RunForge-Frontend/src/components/Navbar/index.vue

<template>
  <div class="navbar">
    <div class="left-side">
      <a-space style="cursor: pointer; -webkit-app-region: no-drag;" @click="$router.push('/')">
        <img alt="RunForge" src="/logo.svg" height="35">
        <a-typography-title class="brand-title" :style="{ margin: 0, fontSize: '18px' }" :heading="5">
          RunForge
        </a-typography-title>
      </a-space>
    </div>

    <ul class="right-side">
      <li v-if="!isElectron()" class="desktop-shortcut">
        <a-tooltip content="首页">
          <a-button class="nav-btn" type="outline" :shape="'circle'" @click="$router.push('/')">
            <template #icon>
              <icon-home />
            </template>
          </a-button>
        </a-tooltip>
      </li>

      <li v-if="!isElectron()" class="desktop-shortcut">
        <a-tooltip content="售后服务">
          <a-button class="nav-btn" type="outline" :shape="'circle'" @click="$router.push('/service/createOrder')">
            <template #icon>
              <icon-customer-service />
            </template>
          </a-button>
        </a-tooltip>
      </li>

      <li v-if="!isElectron()" class="desktop-shortcut">
        <a-tooltip content="下载专区">
          <a-button class="nav-btn" type="outline" :shape="'circle'" @click="$router.push('/download')">
            <template #icon>
              <icon-download />
            </template>
          </a-button>
        </a-tooltip>
      </li>

      <li v-if="!isElectron()" class="desktop-shortcut">
        <a-tooltip content="文档中心">
          <a-button class="nav-btn" type="outline" :shape="'circle'" @click="$router.push('/doc')">
            <template #icon>
              <icon-book />
            </template>
          </a-button>
        </a-tooltip>
      </li>

      <li v-if="!isElectron()" class="mobile-shortcut">
        <a-dropdown trigger="click" position="br">
          <a-button class="nav-btn" type="outline" :shape="'circle'">
            <template #icon>
              <icon-more />
            </template>
          </a-button>
          <template #content>
            <a-doption @click="$router.push('/')">
              <icon-home /> 首页
            </a-doption>
            <a-doption @click="$router.push('/service/createOrder')">
              <icon-customer-service /> 售后服务
            </a-doption>
            <a-doption @click="$router.push('/download')">
              <icon-download /> 下载专区
            </a-doption>
            <a-doption @click="$router.push('/doc')">
              <icon-book /> 文档中心
            </a-doption>
          </template>
        </a-dropdown>
      </li>

      <li v-if="avatar">
        <a-dropdown trigger="hover">
          <a-avatar class="nav-btn" :size="32" :style="{ marginRight: '8px', cursor: 'pointer' }">
            <img alt="avatar" :src="avatar" />
          </a-avatar>
          <template #content>
            <a-doption>
              <a-space @click="$router.push('/user')">
                <icon-user />
                <span>
                  个人中心
                </span>
              </a-space>
            </a-doption>
            <a-doption>
              <a-space @click="handleLogout">
                <icon-export />
                <span>
                  退出登录
                </span>
              </a-space>
            </a-doption>
          </template>
        </a-dropdown>
      </li>

      <div v-if="isElectron()">
        <a-button class="actions" type="text" @click="minimizeWindow">
          <template #icon>
            <icon-minus />
          </template>
        </a-button>

        <a-button class="actions" type="text" @click="maximizeWindow">
          <template #icon>
            <icon-fullscreen />
          </template>
        </a-button>

        <a-button class="actions close" type="text" @click="closeWindow">
          <template #icon>
            <icon-close />
          </template>
        </a-button>
      </div>
    </ul>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Message, Modal } from '@arco-design/web-vue'
import { useUserStore } from '@/store'
import { isElectron } from '@/utils/electron'

const userStore = useUserStore();

const avatar = computed(() => {
  return userStore.avatar;
})

const handleLogout = () => {
  Modal.confirm({
    title: '退出登录',
    content: '您即将退出登录，是否继续？',
    onOk: () => {
      const userStore = useUserStore()
      userStore.logout()
      Message.success('退出成功!')
      setTimeout(() => { window.location.reload() }, 1000)
    },
    onCancel: () => {

    }
  })
}

function closeWindow() {
  window.electron.closeWindow()  // 调用关闭窗口的方法
}
function minimizeWindow() {
  window.electron.minimizeWindow()  // 调用最小化窗口的方法
}
function maximizeWindow() {
  window.electron.maximizeWindow()  // 调用最大化窗口的方法
}
</script>

<style scoped lang="less">
.navbar {
  -webkit-app-region: drag;
  display: flex;
  justify-content: space-between;
  height: 100%;
  background-color: var(--color-bg-2);
  border-bottom: 1px solid var(--color-border);
  user-select: none;
}

.left-side {
  display: flex;
  align-items: center;
  padding-left: 20px;
  min-width: 0;
}

.brand-title {
  margin: 0;
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
}

.center-side {
  flex: 1;
}

.right-side {
  display: flex;
  padding-right: 30px;
  list-style: none;

  :deep(.locale-select) {
    border-radius: 20px;
  }

  li {
    display: flex;
    align-items: center;
    padding: 0 10px;
  }

  a {
    color: var(--color-text-1);
    text-decoration: none;
  }

  .nav-btn {
    -webkit-app-region: no-drag;
    border-color: rgb(var(--gray-2));
    color: rgb(var(--gray-8));
    font-size: 16px;
  }

  .trigger-btn,
  .ref-btn {
    position: absolute;
    bottom: 14px;
  }

  .trigger-btn {
    margin-left: 14px;
  }
}

.actions {
  color: rgb(var(--gray-8));
  -webkit-app-region: no-drag;
}

.close:hover {
  background-color: rgb(var(--red-5));
  color: white;
}

@media (max-width: 992px) {
  .brand-title {
    font-size: 16px !important;
  }

  .right-side {
    padding-right: 12px;
  }

  .right-side li {
    padding: 0 4px;
  }

  .desktop-shortcut {
    display: none !important;
  }
}

@media (min-width: 993px) {
  .mobile-shortcut {
    display: none !important;
  }
}
</style>