feat: 更新 navbar 的设计

src/components/global-setting/index.vue

@@ -7,18 +7,21 @@
     </a-button>
   </div>
   <a-drawer
-    :width="300"
+    :width="410"
     unmount-on-close
     :visible="visible"
-    :cancel-text="$t('settings.close')"
-    :ok-text="$t('settings.copySettings')"
     @ok="copySettings"
     @cancel="cancel"
   >
     <template #title>{{ $t('settings.title') }}</template>
+    <a-alert type="warning">{{ $t('settings.alertContent') }}</a-alert>
     <Block :options="contentOpts" :title="$t('settings.content')" />
     <Block :options="othersOpts" :title="$t('settings.otherSettings')" />
-    <a-alert>{{ $t('settings.alertContent') }}</a-alert>
+    <template #footer>
+      <a-button type="primary" style="margin: 0" shape="round" long>
+        {{ $t('settings.copySettings') }}
+      </a-button>
+    </template>
   </a-drawer>
 </template>
 
@@ -94,5 +97,9 @@ const setVisible = () => {
     font-size: 18px;
     vertical-align: -4px;
   }
+
+  .arco-drawer-footer > .arco-btn {
+    margin-left: 0;
+  }
 }
 </style>

src/components/navbar/index.vue

@@ -2,10 +2,7 @@
   <div class="navbar">
     <div class="left-side">
       <a-space>
-        <img
-          alt="logo"
-          src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image"
-        />
+        <logoSvg style="width: 36px; color: #165fdd" />
         <a-typography-title
           :style="{ margin: 0, fontSize: '18px' }"
           :heading="5"
@@ -24,28 +21,33 @@
     </div>
     <ul class="right-side">
       <li>
-        <a-tooltip :content="$t('settings.search')">
-          <a-button class="nav-btn" type="outline" :shape="'circle'">
-            <template #icon>
-              <icon-search />
-            </template>
-          </a-button>
+        <a-input-search style="width: 135px" placeholder="搜索" />
+      </li>
+      <li>
+        <a-tooltip :content="$t('settings.reload')">
+          <div class="nav-btn" @click="handleReload">
+            <icon-sync />
+          </div>
         </a-tooltip>
       </li>
       <li>
-        <a-tooltip :content="$t('settings.language')">
-          <a-button
+        <a-tooltip :content="$t('settings.source')">
+          <a
             class="nav-btn"
-            type="outline"
-            :shape="'circle'"
-            @click="setDropDownVisible"
+            href="https://github.com/LIjiAngChen8/arco-admin"
+            target="_blank"
           >
-            <template #icon>
-              <icon-language />
-            </template>
-          </a-button>
+            <icon-github />
+          </a>
         </a-tooltip>
-        <a-dropdown trigger="click" @select="changeLocale as any">
+      </li>
+      <li>
+        <a-tooltip :content="$t('settings.language')">
+          <div class="nav-btn" @click="setDropDownVisible">
+            <icon-language />
+          </div>
+        </a-tooltip>
+        <a-dropdown trigger="click" @select="changeLocale">
           <div ref="triggerBtn" class="trigger-btn"></div>
           <template #content>
             <a-doption
@@ -69,33 +71,19 @@
               : $t('settings.navbar.theme.toLight')
           "
         >
-          <a-button
-            class="nav-btn"
-            type="outline"
-            :shape="'circle'"
-            @click="handleToggleTheme"
-          >
-            <template #icon>
-              <icon-moon-fill v-if="theme === 'dark'" />
-              <icon-sun-fill v-else />
-            </template>
-          </a-button>
+          <div class="nav-btn" @click="handleToggleTheme">
+            <icon-moon-fill v-if="theme === 'dark'" />
+            <icon-sun-fill v-else />
+          </div>
         </a-tooltip>
       </li>
       <li>
         <a-tooltip :content="$t('settings.navbar.alerts')">
-          <div class="message-box-trigger">
-            <a-badge :count="9" dot>
-              <a-button
-                class="nav-btn"
-                type="outline"
-                :shape="'circle'"
-                @click="setPopoverVisible"
-              >
-                <icon-notification />
-              </a-button>
-            </a-badge>
-          </div>
+          <a-badge :count="9">
+            <div class="nav-btn" @click="setPopoverVisible">
+              <icon-notification />
+            </div>
+          </a-badge>
         </a-tooltip>
         <a-popover
           trigger="click"
@@ -117,40 +105,23 @@
               : $t('settings.navbar.screen.toFull')
           "
         >
-          <a-button
-            class="nav-btn"
-            type="outline"
-            :shape="'circle'"
-            @click="toggleFullScreen"
-          >
-            <template #icon>
-              <icon-fullscreen-exit v-if="isFullscreen" />
-              <icon-fullscreen v-else />
-            </template>
-          </a-button>
+          <div class="nav-btn" @click="toggleFullScreen">
+            <icon-fullscreen-exit v-if="isFullscreen" />
+            <icon-fullscreen v-else />
+          </div>
         </a-tooltip>
       </li>
       <li>
         <a-tooltip :content="$t('settings.title')">
-          <a-button
-            class="nav-btn"
-            type="outline"
-            :shape="'circle'"
-            @click="setVisible"
-          >
-            <template #icon>
-              <icon-settings />
-            </template>
-          </a-button>
+          <div class="nav-btn" @click="setVisible">
+            <icon-settings />
+          </div>
         </a-tooltip>
       </li>
       <li>
         <a-dropdown trigger="click">
-          <a-avatar
-            :size="32"
-            :style="{ marginRight: '8px', cursor: 'pointer' }"
-          >
-            <img alt="avatar" :src="avatar" />
+          <a-avatar style="margin-right: 8px; cursor: pointer" :size="32">
+            <IconUser />
           </a-avatar>
           <template #content>
             <a-doption>
@@ -202,16 +173,14 @@ import useLocale from '@/hooks/locale';
 import useUser from '@/hooks/user';
 import Menu from '@/components/menu/index.vue';
 import MessageBox from '../message-box/index.vue';
+import logoSvg from '@/assets/logo.svg';
 
 const appStore = useAppStore();
 const userStore = useUserStore();
 const { logout } = useUser();
 const { changeLocale, currentLocale } = useLocale();
 const { isFullscreen, toggle: toggleFullScreen } = useFullscreen();
 const locales = [...LOCALE_OPTIONS];
-const avatar = computed(() => {
-  return userStore.avatar;
-});
 const theme = computed(() => {
   return appStore.theme;
 });
@@ -234,6 +203,9 @@ const handleToggleTheme = () => {
 const setVisible = () => {
   appStore.updateSettings({ globalSettings: true });
 };
+const handleReload = () => {
+  window.location.reload();
+};
 const refBtn = ref();
 const triggerBtn = ref();
 const setPopoverVisible = () => {
@@ -293,7 +265,7 @@ const toggleDrawerMenu = inject('toggleDrawerMenu') as () => void;
   li {
     display: flex;
     align-items: center;
-    padding: 0 10px;
+    padding: 0 4px;
   }
 
   a {
@@ -302,9 +274,27 @@ const toggleDrawerMenu = inject('toggleDrawerMenu') as () => void;
   }
 
   .nav-btn {
-    font-size: 16px;
+    position: relative;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    // transition: all 0.1s cubic-bezier(0, 0, 1, 1);
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1.5715;
     color: rgb(var(--gray-8));
-    border-color: rgb(var(--gray-2));
+    text-align: center;
+    white-space: nowrap;
+    cursor: pointer;
+    border-radius: var(--border-radius-circle);
+    outline: none;
+
+    &:hover {
+      border: 1px solid rgb(var(--gray-2));
+    }
   }
 
   .trigger-btn,

src/locale/en-US/index.json

@@ -1,16 +1,17 @@
 {
+  "common.add": "Add",
+  "common.back": "Back",
+  "common.cancel": "Cancel",
+  "common.close": "Close",
+  "common.confirm": "Confirm",
+  "common.copy": "Copy",
+  "common.delete": "Delete",
+  "common.edit": "Edit",
   "common.login": "Login",
   "common.logout": "Logout",
   "common.ok": "OK",
-  "common.cancel": "Cancel",
   "common.save": "Save",
-  "common.delete": "Delete",
-  "common.confirm": "Confirm",
-  "common.add": "Add",
-  "common.edit": "Edit",
-  "common.copy": "Copy",
-  "common.close": "Close",
-  "common.back": "Back",
+  "common.signin": "Sign in",
   "login-agreement": "I have read and agree",
   "login-agreement-and": "and",
   "login-privacy-policy": "Privacy Policy",
@@ -30,7 +31,22 @@
   "login.form.username.msg": "Please enter account/email",
   "login.form.username.placeholder": "Account/Email",
   "login.more": "More",
+  "messageBox.logout": "Logout",
+  "messageBox.switchRoles": "Switch Roles",
+  "messageBox.userCenter": "User Center",
+  "messageBox.userSettings": "User Settings",
+  "settings.alertContent": "The current modifications serve for previewing configuration changes in real-time. To apply them permanently to the project, click the \"Copy Configuration\" button below and paste the configuration into the src/config/settings.ts file.",
   "settings.close": "",
-  "settings.copySettings": "",
-  "common.signin": "Sign in"
+  "settings.copySettings": "Copy Settings",
+  "settings.language": "language",
+  "settings.navbar.alerts": "Alerts",
+  "settings.navbar.screen.toExit": "Exit full",
+  "settings.navbar.screen.toFull": "Full",
+  "settings.navbar.theme.toDark": "Click to use Dark mode",
+  "settings.navbar.theme.toLight": "Click to use light mode",
+  "settings.reload": "Reload",
+  "settings.source": "Source",
+  "settings.sync": "Sync",
+  "settings.title": "Application configuration",
+  "signin": ""
 }

src/locale/zh-CN/index.json

@@ -1,15 +1,17 @@
 {
+  "common.add": "添加",
+  "common.back": "返回",
+  "common.cancel": "取消",
+  "common.close": "关闭",
+  "common.confirm": "",
+  "common.copy": "复制",
+  "common.delete": "删除",
+  "common.edit": "编辑",
   "common.login": "登录",
   "common.logout": "退出",
   "common.ok": "确定",
-  "common.cancel": "取消",
   "common.save": "保存",
-  "common.delete": "删除",
-  "common.add": "添加",
-  "common.edit": "编辑",
-  "common.copy": "复制",
-  "common.close": "关闭",
-  "common.back": "返回",
+  "common.signin": "",
   "login-agreement": "我已阅读并同意",
   "login-agreement-and": "和",
   "login-privacy-policy": "隐私政策",
@@ -29,7 +31,22 @@
   "login.form.username.msg": "请输入账号/邮箱",
   "login.form.username.placeholder": "账号/邮箱",
   "login.more": "更多方式",
+  "messageBox.logout": "退出登录",
+  "messageBox.switchRoles": "切换权限",
+  "messageBox.userCenter": "用户中心",
+  "messageBox.userSettings": "用户设置",
+  "settings.alertContent": "当前更改仅是实时预览配置效果。要真正作用于项目，点击下方的「复制配置」按钮，将配置粘贴到 src/config/settings.ts 中即可。",
   "settings.close": "关闭",
-  "settings.copySettings": "确定",
+  "settings.copySettings": "复制配置",
+  "settings.language": "语言",
+  "settings.navbar.alerts": "消息通知",
+  "settings.navbar.screen.toExit": "退出全屏",
+  "settings.navbar.screen.toFull": "全屏",
+  "settings.navbar.theme.toDark": "点击切换为暗黑模式",
+  "settings.navbar.theme.toLight": "点击切换为亮色模式",
+  "settings.reload": "重新加载",
+  "settings.source": "源码",
+  "settings.sync": "刷新",
+  "settings.title": "应用配置",
   "signin": "注册"
 }