From e496a2b6098a85b741b90966e43d86151b654e86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Wed, 10 Jan 2024 12:17:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20navbar=20=E7=9A=84?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/global-setting/index.vue |  15 ++-
 src/components/navbar/index.vue         | 140 +++++++++++-------------
 src/components/tab-bar/readme.md        |  12 --
 src/locale/en-US/index.json             |  36 ++++--
 src/locale/zh-CN/index.json             |  33 ++++--
 src/types/components.d.ts               |   5 +
 6 files changed, 132 insertions(+), 109 deletions(-)
 delete mode 100644 src/components/tab-bar/readme.md

diff --git a/src/components/global-setting/index.vue b/src/components/global-setting/index.vue
index da2a4c3..90af1fe 100644
--- a/src/components/global-setting/index.vue
+++ b/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>
diff --git a/src/components/navbar/index.vue b/src/components/navbar/index.vue
index 13faac1..81c270f 100644
--- a/src/components/navbar/index.vue
+++ b/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,6 +173,7 @@ 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();
@@ -209,9 +181,6 @@ 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,
diff --git a/src/components/tab-bar/readme.md b/src/components/tab-bar/readme.md
deleted file mode 100644
index cea5c93..0000000
--- a/src/components/tab-bar/readme.md
+++ /dev/null
@@ -1,12 +0,0 @@
-## 组件说明
-
-该组件非官方最终设计规范，以单独组件存在。
-
-同时仅仅提供最基本的功能，后续进行优化及更改。
-
-
-## Component description
-
-The component unofficial final design specification exists as a separate component.
-
-At the same time, only the most basic functions are provided, and subsequent optimizations and changes will be made.
\ No newline at end of file
diff --git a/src/locale/en-US/index.json b/src/locale/en-US/index.json
index f5f1086..118aad1 100644
--- a/src/locale/en-US/index.json
+++ b/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": ""
 }
diff --git a/src/locale/zh-CN/index.json b/src/locale/zh-CN/index.json
index b3e01e5..9102b48 100644
--- a/src/locale/zh-CN/index.json
+++ b/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": "注册"
 }
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index e58e304..3ba7ba2 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -50,6 +50,7 @@ declare module 'vue' {
     APopover: typeof import('@arco-design/web-vue')['Popover']
     ARadio: typeof import('@arco-design/web-vue')['Radio']
     ARadioGroup: typeof import('@arco-design/web-vue')['RadioGroup']
+    ARangePicker: typeof import('@arco-design/web-vue')['RangePicker']
     AResult: typeof import('@arco-design/web-vue')['Result']
     ARow: typeof import('@arco-design/web-vue')['Row']
     ASelect: typeof import('@arco-design/web-vue')['Select']
@@ -93,6 +94,7 @@ declare module 'vue' {
     IconCommand: typeof import('@arco-design/web-vue/es/icon')['IconCommand']
     IconDesktop: typeof import('@arco-design/web-vue/es/icon')['IconDesktop']
     IconDownload: typeof import('@arco-design/web-vue/es/icon')['IconDownload']
+    IconDragArrow: typeof import('@arco-design/web-vue/es/icon')['IconDragArrow']
     IconExport: typeof import('@arco-design/web-vue/es/icon')['IconExport']
     IconFaceSmileFill: typeof import('@arco-design/web-vue/es/icon')['IconFaceSmileFill']
     IconFolderDelete: typeof import('@arco-design/web-vue/es/icon')['IconFolderDelete']
@@ -102,12 +104,14 @@ declare module 'vue' {
     IconHome: typeof import('@arco-design/web-vue/es/icon')['IconHome']
     IconLanguage: typeof import('@arco-design/web-vue/es/icon')['IconLanguage']
     IconLarkColor: typeof import('@arco-design/web-vue/es/icon')['IconLarkColor']
+    IconLineHeight: typeof import('@arco-design/web-vue/es/icon')['IconLineHeight']
     IconLocation: typeof import('@arco-design/web-vue/es/icon')['IconLocation']
     IconLock: typeof import('@arco-design/web-vue/es/icon')['IconLock']
     IconMenuFold: typeof import('@arco-design/web-vue/es/icon')['IconMenuFold']
     IconMoonFill: typeof import('@arco-design/web-vue/es/icon')['IconMoonFill']
     IconMore: typeof import('@arco-design/web-vue/es/icon')['IconMore']
     IconNotification: typeof import('@arco-design/web-vue/es/icon')['IconNotification']
+    IconPlus: typeof import('@arco-design/web-vue/es/icon')['IconPlus']
     IconRefresh: typeof import('@arco-design/web-vue/es/icon')['IconRefresh']
     IconSearch: typeof import('@arco-design/web-vue/es/icon')['IconSearch']
     IconSettings: typeof import('@arco-design/web-vue/es/icon')['IconSettings']
@@ -115,6 +119,7 @@ declare module 'vue' {
     IconStop: typeof import('@arco-design/web-vue/es/icon')['IconStop']
     IconSunFill: typeof import('@arco-design/web-vue/es/icon')['IconSunFill']
     IconSwap: typeof import('@arco-design/web-vue/es/icon')['IconSwap']
+    IconSync: typeof import('@arco-design/web-vue/es/icon')['IconSync']
     IconTag: typeof import('@arco-design/web-vue/es/icon')['IconTag']
     IconTags: typeof import('@arco-design/web-vue/es/icon')['IconTags']
     IconTiktokColor: typeof import('@arco-design/web-vue/es/icon')['IconTiktokColor']