From 2fe9543b84504db26c2b6abfe97cb63f2bc2c3fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=87=AF=E9=BE=99?= <502431556@qq.com>
Date: Thu, 13 Jan 2022 17:26:06 +0800
Subject: [PATCH] wip(Layout): Layout developing

---
 pnpm-lock.yaml                                |  38 ++++++++----
 src/App.vue                                   |   1 +
 src/assets/imgs/avatar.png                    | Bin 0 -> 4097 bytes
 src/components/Breadcrumb/index.ts            |   3 +
 src/components/Breadcrumb/src/Breadcrumb.vue  |   0
 src/components/Collapse/index.ts              |   3 +
 src/components/Collapse/src/Collapse.vue      |  25 ++++++++
 .../LocaleDropdown/src/LocaleDropdown.vue     |   1 +
 src/components/Menu/src/Menu.vue              |  56 +++++++++++++++++-
 .../Menu/src/components/useRenderMenuItem.tsx |  21 +++++--
 .../src/components/useRenderMenuTitle.tsx     |   4 +-
 src/components/Screenfull/index.ts            |   3 +
 src/components/Screenfull/src/Screenfull.vue  |  16 +++++
 .../SizeDropdown/src/SizeDropdown.vue         |   7 ++-
 src/components/UserInfo/index.ts              |   3 +
 src/components/UserInfo/src/UserInfo.vue      |  46 ++++++++++++++
 src/layout/Layout.vue                         |  32 +++++++++-
 src/locales/en.ts                             |   8 ++-
 src/locales/zh-CN.ts                          |   8 ++-
 src/router/index.ts                           |  17 ++++++
 src/styles/var.css                            |   8 ++-
 src/utils/color.ts                            |   4 --
 src/utils/index.ts                            |   4 ++
 src/utils/routerHelper.ts                     |   3 +-
 src/views/Level/Menu111.vue                   |   2 +-
 src/views/Level/Menu12.vue                    |   2 +-
 src/views/Level/Menu2.vue                     |   2 +-
 27 files changed, 282 insertions(+), 35 deletions(-)
 create mode 100644 src/assets/imgs/avatar.png
 create mode 100644 src/components/Breadcrumb/index.ts
 create mode 100644 src/components/Breadcrumb/src/Breadcrumb.vue
 create mode 100644 src/components/Collapse/index.ts
 create mode 100644 src/components/Collapse/src/Collapse.vue
 create mode 100644 src/components/Screenfull/index.ts
 create mode 100644 src/components/Screenfull/src/Screenfull.vue
 create mode 100644 src/components/UserInfo/index.ts
 create mode 100644 src/components/UserInfo/src/UserInfo.vue

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e22aee1..44987e6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,6 +41,7 @@ specifiers:
   pretty-quick: ^3.1.3
   qs: ^6.10.3
   rimraf: ^3.0.2
+  screenfull: ^6.0.0
   stylelint: ^14.2.0
   stylelint-config-html: ^1.0.0
   stylelint-config-prettier: ^9.0.3
@@ -75,6 +76,7 @@ dependencies:
   nprogress: registry.npmmirror.com/nprogress/0.2.0
   pinia: registry.npmmirror.com/pinia/2.0.9_typescript@4.5.4+vue@3.2.26
   qs: registry.npmmirror.com/qs/6.10.3
+  screenfull: registry.npmmirror.com/screenfull/6.0.0
   vue: registry.npmmirror.com/vue/3.2.26
   vue-i18n: registry.npmmirror.com/vue-i18n/9.1.9_vue@3.2.26
   vue-router: registry.npmmirror.com/vue-router/4.0.12_vue@3.2.26
@@ -7064,8 +7066,8 @@ packages:
       vue-i18n:
         optional: true
     dependencies:
-      '@intlify/message-compiler': registry.npmmirror.com/@intlify/message-compiler/9.2.0-beta.26
-      '@intlify/shared': registry.npmmirror.com/@intlify/shared/9.2.0-beta.26
+      '@intlify/message-compiler': registry.npmmirror.com/@intlify/message-compiler/9.2.0-beta.27
+      '@intlify/shared': registry.npmmirror.com/@intlify/shared/9.2.0-beta.27
       jsonc-eslint-parser: registry.npmmirror.com/jsonc-eslint-parser/1.4.1
       source-map: registry.nlark.com/source-map/0.6.1
       vue-i18n: registry.npmmirror.com/vue-i18n/9.1.9_vue@3.2.26
@@ -7121,18 +7123,18 @@ packages:
       source-map: registry.nlark.com/source-map/0.6.1
     dev: false
 
-  registry.npmmirror.com/@intlify/message-compiler/9.2.0-beta.26:
+  registry.npmmirror.com/@intlify/message-compiler/9.2.0-beta.27:
     resolution:
       {
-        integrity: sha512-qtDgHCMqrXNTekKXGzm0Dm6r3+/X7/jFXP+E07hx+PJbPMv7DzK1iU8h5LlAMQ1/jr2UIRBgXvR5wh35OKoGrA==,
+        integrity: sha512-T3mBTm0559VX6l+lh8p5gDJ9/IS1XbVXeeMNJ2zTzxrf4lXg8OuotNjaxG3ZsuauQ5OqqlArkMYryXGyZnHolA==,
         registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.npmmirror.com/@intlify/message-compiler/download/@intlify/message-compiler-9.2.0-beta.26.tgz
+        tarball: https://registry.npmmirror.com/@intlify/message-compiler/download/@intlify/message-compiler-9.2.0-beta.27.tgz
       }
     name: '@intlify/message-compiler'
-    version: 9.2.0-beta.26
+    version: 9.2.0-beta.27
     engines: { node: '>= 12' }
     dependencies:
-      '@intlify/shared': registry.npmmirror.com/@intlify/shared/9.2.0-beta.26
+      '@intlify/shared': registry.npmmirror.com/@intlify/shared/9.2.0-beta.27
       source-map: registry.nlark.com/source-map/0.6.1
     dev: true
 
@@ -7176,15 +7178,15 @@ packages:
     engines: { node: '>= 10' }
     dev: false
 
-  registry.npmmirror.com/@intlify/shared/9.2.0-beta.26:
+  registry.npmmirror.com/@intlify/shared/9.2.0-beta.27:
     resolution:
       {
-        integrity: sha512-MjUlkjNThqkqy8yXUcFKBiW/hIfqAn5cP3Vd0b4wdOHS8rPCEbvSbAnF08uiZDkVv8gTcsLyymX21GaU6oYyyQ==,
+        integrity: sha512-+Av77mIHy0qFkAq96mMAQGYcColMGN7e5+rUsyn3XxBw6oC3AGqYn/cQ6U/T3qOrzcHgcA+etAaLN3IxFqkJDw==,
         registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.npmmirror.com/@intlify/shared/download/@intlify/shared-9.2.0-beta.26.tgz
+        tarball: https://registry.npmmirror.com/@intlify/shared/download/@intlify/shared-9.2.0-beta.27.tgz
       }
     name: '@intlify/shared'
-    version: 9.2.0-beta.26
+    version: 9.2.0-beta.27
     engines: { node: '>= 12' }
     dev: true
 
@@ -7210,7 +7212,7 @@ packages:
         optional: true
     dependencies:
       '@intlify/bundle-utils': registry.npmmirror.com/@intlify/bundle-utils/2.2.0_vue-i18n@9.1.9
-      '@intlify/shared': registry.npmmirror.com/@intlify/shared/9.2.0-beta.26
+      '@intlify/shared': registry.npmmirror.com/@intlify/shared/9.2.0-beta.27
       '@rollup/pluginutils': registry.npmmirror.com/@rollup/pluginutils/4.1.2
       debug: registry.npmmirror.com/debug/4.3.3
       fast-glob: registry.nlark.com/fast-glob/3.2.7
@@ -11607,6 +11609,18 @@ packages:
       tslib: registry.npmmirror.com/tslib/2.3.1
     dev: true
 
+  registry.npmmirror.com/screenfull/6.0.0:
+    resolution:
+      {
+        integrity: sha512-LGY0nhNQkC4FX4DT4pZdJ5cZH5EOz9Gfh9KcVMl779pS677k4IV1Wv7sY/CwC9VKFT21fYgCh7zkTVVefi5XKA==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/screenfull/download/screenfull-6.0.0.tgz
+      }
+    name: screenfull
+    version: 6.0.0
+    engines: { node: ^14.13.1 || >=16.0.0 }
+    dev: false
+
   registry.npmmirror.com/shebang-regex/3.0.0:
     resolution:
       {
diff --git a/src/App.vue b/src/App.vue
index 02a009d..f19df4d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -32,6 +32,7 @@ html,
 body {
   padding: 0;
   margin: 0;
+  overflow: hidden;
   .size;
 
   #app {
diff --git a/src/assets/imgs/avatar.png b/src/assets/imgs/avatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..e16488e4534d25626ac002e04ce9c64cd834ade2
GIT binary patch
literal 4097
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

literal 0
HcmV?d00001

diff --git a/src/components/Breadcrumb/index.ts b/src/components/Breadcrumb/index.ts
new file mode 100644
index 0000000..93ffe70
--- /dev/null
+++ b/src/components/Breadcrumb/index.ts
@@ -0,0 +1,3 @@
+import Breadcrumb from './src/Breadcrumb.vue'
+
+export { Breadcrumb }
diff --git a/src/components/Breadcrumb/src/Breadcrumb.vue b/src/components/Breadcrumb/src/Breadcrumb.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Collapse/index.ts b/src/components/Collapse/index.ts
new file mode 100644
index 0000000..73f65a3
--- /dev/null
+++ b/src/components/Collapse/index.ts
@@ -0,0 +1,3 @@
+import Collapse from './src/Collapse.vue'
+
+export { Collapse }
diff --git a/src/components/Collapse/src/Collapse.vue b/src/components/Collapse/src/Collapse.vue
new file mode 100644
index 0000000..a7458ae
--- /dev/null
+++ b/src/components/Collapse/src/Collapse.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed, unref } from 'vue'
+import { Icon } from '@/components/Icon'
+import { useAppStore } from '@/store/modules/app'
+
+const appStore = useAppStore()
+
+const collapse = computed(() => appStore.getCollapse)
+
+function toggleCollapse() {
+  const collapsed = unref(collapse)
+  appStore.setCollapse(!collapsed)
+}
+</script>
+
+<template>
+  <div>
+    <Icon
+      :size="18"
+      :icon="collapse ? 'ant-design:menu-unfold-outlined' : 'ant-design:menu-fold-outlined'"
+      class="cursor-pointer"
+      @click="toggleCollapse"
+    />
+  </div>
+</template>
diff --git a/src/components/LocaleDropdown/src/LocaleDropdown.vue b/src/components/LocaleDropdown/src/LocaleDropdown.vue
index bc80259..2f350fc 100644
--- a/src/components/LocaleDropdown/src/LocaleDropdown.vue
+++ b/src/components/LocaleDropdown/src/LocaleDropdown.vue
@@ -25,6 +25,7 @@ function setLang(lang: LocaleType) {
 <template>
   <ElDropdown trigger="click" @command="setLang">
     <Icon
+      :size="18"
       icon="ion:language-sharp"
       color="var(--el-text-color-primary)"
       class="cursor-pointer"
diff --git a/src/components/Menu/src/Menu.vue b/src/components/Menu/src/Menu.vue
index 8ff1be7..bfceccf 100644
--- a/src/components/Menu/src/Menu.vue
+++ b/src/components/Menu/src/Menu.vue
@@ -22,8 +22,8 @@ export default defineComponent({
 
     const preFixCls = getPrefixCls('menu')
 
-    const menuMode = computed(() => {
-      // 水平模式
+    const menuMode = computed((): 'vertical' | 'horizontal' => {
+      // 竖
       const vertical: LayoutType[] = ['classic']
 
       if (vertical.includes(appStore.getLayout)) {
@@ -77,7 +77,7 @@ export default defineComponent({
           >
             {{
               default: () => {
-                const { renderMenuItem } = useRenderMenuItem(routers.value)
+                const { renderMenuItem } = useRenderMenuItem(routers.value, menuMode.value)
                 return renderMenuItem()
               }
             }}
@@ -93,7 +93,10 @@ export default defineComponent({
 @prefix-cls: ~'@{namespace}-menu';
 
 .@{prefix-cls} {
+  transition: width var(--transition-time-02);
+
   :deep(.el-menu) {
+    width: 100% !important;
     border-right: none;
 
     // 设置选中时子标题的颜色
@@ -132,8 +135,55 @@ export default defineComponent({
     }
   }
 
+  // 折叠时的最小宽度
   :deep(.el-menu--collapse) {
     width: var(--left-menu-min-width);
+
+    & > .is-active,
+    & > .is-active > .el-sub-menu__title {
+      background-color: var(--left-menu-collapse-bg-active-color) !important;
+    }
+  }
+
+  // 折叠动画的时候，就需要把文字给隐藏掉
+  :deep(.horizontal-collapse-transition) {
+    transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out !important;
+    .@{prefix-cls}__title {
+      display: none;
+    }
+  }
+}
+</style>
+
+<style lang="less">
+@prefix-cls: ~'@{namespace}-menu-popper';
+
+.@{prefix-cls} {
+  &--vertical {
+    // 设置选中时子标题的颜色
+    .is-active {
+      & > .el-sub-menu__title {
+        color: var(--left-menu-text-active-color) !important;
+      }
+    }
+
+    // 设置子菜单悬停的高亮和背景色
+    .el-sub-menu__title,
+    .el-menu-item {
+      &:hover {
+        color: var(--left-menu-text-active-color) !important;
+        background-color: var(--left-menu-bg-color) !important;
+      }
+    }
+
+    // 设置选中时的高亮背景
+    .el-menu-item.is-active {
+      background-color: var(--left-menu-bg-active-color) !important;
+
+      &:hover {
+        background-color: var(--left-menu-bg-active-color) !important;
+      }
+    }
   }
 }
 </style>
diff --git a/src/components/Menu/src/components/useRenderMenuItem.tsx b/src/components/Menu/src/components/useRenderMenuItem.tsx
index 7171214..1cec7d5 100644
--- a/src/components/Menu/src/components/useRenderMenuItem.tsx
+++ b/src/components/Menu/src/components/useRenderMenuItem.tsx
@@ -3,8 +3,13 @@ import type { RouteMeta } from 'vue-router'
 import { getAllParentPath, hasOneShowingChild } from '../helper'
 import { isUrl } from '@/utils/is'
 import { useRenderMenuTitle } from './useRenderMenuTitle'
+import { useDesign } from '@/hooks/web/useDesign'
+import { pathResolve } from '@/utils/routerHelper'
 
-export function useRenderMenuItem(allRouters: AppRouteRecordRaw[] = []) {
+export function useRenderMenuItem(
+  allRouters: AppRouteRecordRaw[] = [],
+  menuMode: 'vertical' | 'horizontal'
+) {
   function renderMenuItem(routers?: AppRouteRecordRaw[]) {
     return (routers || allRouters).map((v) => {
       const meta = (v.meta ?? {}) as RouteMeta
@@ -23,15 +28,23 @@ export function useRenderMenuItem(allRouters: AppRouteRecordRaw[] = []) {
           !meta?.alwaysShow
         ) {
           return (
-            <ElMenuItem index={fullPath}>
+            <ElMenuItem index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}>
               {{
-                default: () => renderMenuTitle(meta)
+                default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
               }}
             </ElMenuItem>
           )
         } else {
+          const { getPrefixCls } = useDesign()
+
+          const preFixCls = getPrefixCls('menu-popper')
           return (
-            <ElSubMenu index={fullPath}>
+            <ElSubMenu
+              index={fullPath}
+              popperClass={
+                menuMode === 'vertical' ? `${preFixCls}--vertical` : `${preFixCls}--horizontal`
+              }
+            >
               {{
                 title: () => renderMenuTitle(meta),
                 default: () => renderMenuItem(v.children)
diff --git a/src/components/Menu/src/components/useRenderMenuTitle.tsx b/src/components/Menu/src/components/useRenderMenuTitle.tsx
index 9752b30..2bf8fe0 100644
--- a/src/components/Menu/src/components/useRenderMenuTitle.tsx
+++ b/src/components/Menu/src/components/useRenderMenuTitle.tsx
@@ -10,10 +10,10 @@ export function useRenderMenuTitle() {
     return icon ? (
       <>
         <Icon icon={meta.icon}></Icon>
-        {t(title as string)}
+        <span>{t(title as string)}</span>
       </>
     ) : (
-      t(title as string)
+      <span>{t(title as string)}</span>
     )
   }
 
diff --git a/src/components/Screenfull/index.ts b/src/components/Screenfull/index.ts
new file mode 100644
index 0000000..faec2d8
--- /dev/null
+++ b/src/components/Screenfull/index.ts
@@ -0,0 +1,3 @@
+import Screenfull from './src/Screenfull.vue'
+
+export { Screenfull }
diff --git a/src/components/Screenfull/src/Screenfull.vue b/src/components/Screenfull/src/Screenfull.vue
new file mode 100644
index 0000000..d2978fe
--- /dev/null
+++ b/src/components/Screenfull/src/Screenfull.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { Icon } from '@/components/Icon'
+import { useFullscreen } from '@vueuse/core'
+
+const { toggle, isFullscreen } = useFullscreen()
+
+function toggleFullscreen() {
+  toggle()
+}
+</script>
+
+<template>
+  <div @click="toggleFullscreen">
+    <Icon :size="18" :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'" />
+  </div>
+</template>
diff --git a/src/components/SizeDropdown/src/SizeDropdown.vue b/src/components/SizeDropdown/src/SizeDropdown.vue
index d7095a9..f4f8b6c 100644
--- a/src/components/SizeDropdown/src/SizeDropdown.vue
+++ b/src/components/SizeDropdown/src/SizeDropdown.vue
@@ -16,7 +16,12 @@ function setSize(size: ElememtPlusSzie) {
 
 <template>
   <ElDropdown trigger="click" @command="setSize">
-    <Icon icon="mdi:format-size" color="var(--el-text-color-primary)" class="cursor-pointer" />
+    <Icon
+      :size="18"
+      icon="mdi:format-size"
+      color="var(--el-text-color-primary)"
+      class="cursor-pointer"
+    />
     <template #dropdown>
       <ElDropdownMenu>
         <ElDropdownItem v-for="item in sizeMap" :key="item" :command="item">
diff --git a/src/components/UserInfo/index.ts b/src/components/UserInfo/index.ts
new file mode 100644
index 0000000..c3a34ab
--- /dev/null
+++ b/src/components/UserInfo/index.ts
@@ -0,0 +1,3 @@
+import UserInfo from './src/UserInfo.vue'
+
+export { UserInfo }
diff --git a/src/components/UserInfo/src/UserInfo.vue b/src/components/UserInfo/src/UserInfo.vue
new file mode 100644
index 0000000..06228aa
--- /dev/null
+++ b/src/components/UserInfo/src/UserInfo.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ElDropdown, ElDropdownMenu, ElDropdownItem, ElMessageBox } from 'element-plus'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useCache } from '@/hooks/web/useCache'
+import { resetRouter } from '@/router'
+import { useRouter } from 'vue-router'
+
+const { t } = useI18n()
+
+const { wsCache } = useCache()
+
+const { replace } = useRouter()
+
+function loginOut() {
+  ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
+    confirmButtonText: t('common.ok'),
+    cancelButtonText: t('common.cancel'),
+    type: 'warning'
+  })
+    .then(() => {
+      wsCache.clear()
+      resetRouter() // 重置静态路由表
+      replace('/login')
+    })
+    .catch(() => {})
+}
+</script>
+
+<template>
+  <ElDropdown trigger="click">
+    <div class="flex items-center">
+      <img src="@/assets/imgs/avatar.png" alt="" class="w-[calc(var(--tags-view-height)-10px)]" />
+      <span class="<lg:hidden text-14px pl-[5px] text-dark-50">Archer</span>
+    </div>
+    <template #dropdown>
+      <ElDropdownMenu>
+        <ElDropdownItem>
+          <div>{{ t('common.document') }}</div>
+        </ElDropdownItem>
+        <ElDropdownItem divided>
+          <div @click="loginOut">{{ t('common.loginOut') }}</div>
+        </ElDropdownItem>
+      </ElDropdownMenu>
+    </template>
+  </ElDropdown>
+</template>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index d6d8b84..7e66c54 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -4,6 +4,11 @@ import { useTagsViewStore } from '@/store/modules/tagsView'
 import { useAppStore } from '@/store/modules/app'
 import { Menu } from '@/components/Menu'
 import { useDesign } from '@/hooks/web/useDesign'
+import { Collapse } from '@/components/Collapse'
+import { LocaleDropdown } from '@/components/LocaleDropdown'
+import { SizeDropdown } from '@/components/SizeDropdown'
+import { UserInfo } from '@/components/UserInfo'
+import { Screenfull } from '@/components/Screenfull'
 // import { TagsView } from '@/components/TagsView'
 
 const tagsViewStore = useTagsViewStore()
@@ -43,10 +48,18 @@ export default defineComponent({
           <div
             class={[
               `${perFixCls}-right__tool`,
-              'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center'
+              'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between'
             ]}
           >
-            ssss
+            <div class="h-full flex items-center">
+              <Collapse class="header__tigger"></Collapse>
+            </div>
+            <div class="h-full flex items-center">
+              <Screenfull class="header__tigger"></Screenfull>
+              <SizeDropdown class="header__tigger"></SizeDropdown>
+              <LocaleDropdown class="header__tigger"></LocaleDropdown>
+              <UserInfo class="header__tigger"></UserInfo>
+            </div>
           </div>
           <router-view>
             {{
@@ -67,8 +80,23 @@ export default defineComponent({
 <style lang="less" scoped>
 @prefix-cls: ~'@{namespace}-app';
 
+.header__tigger {
+  display: flex;
+  height: 100%;
+  padding: 1px 10px 0;
+  cursor: pointer;
+  align-items: center;
+  transition: background var(--transition-time-02);
+
+  &:hover {
+    background-color: #f6f6f6;
+  }
+}
+
 .@{prefix-cls} {
   &-right {
+    transition: left var(--transition-time-02);
+
     &__tool {
       &::after {
         position: absolute;
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 98bac0c..016a725 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -5,7 +5,13 @@ export default {
     startTimeText: 'Start time',
     endTimeText: 'End time',
     login: 'Login',
-    required: 'This is required'
+    required: 'This is required',
+    loginOut: 'Login out',
+    document: 'Document',
+    reminder: 'Reminder',
+    loginOutMessage: 'Exit the system？',
+    ok: 'OK',
+    cancel: 'Cancel'
   },
   size: {
     default: 'Default',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 1f70e80..f0e0d83 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -5,7 +5,13 @@ export default {
     startTimeText: '开始时间',
     endTimeText: '结束时间',
     login: '登录',
-    required: '该项为必填项'
+    required: '该项为必填项',
+    loginOut: '退出系统',
+    document: '项目文档',
+    reminder: '温馨提示',
+    loginOutMessage: '是否退出本系统？',
+    ok: '确定',
+    cancel: '取消'
   },
   size: {
     default: '默认',
diff --git a/src/router/index.ts b/src/router/index.ts
index 1c9a84c..aa574b1 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -94,6 +94,23 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         }
       }
     ]
+  },
+  {
+    path: '/icon',
+    component: Layout,
+    name: 'IconsDemo',
+    meta: {},
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/Level/Menu2.vue'),
+        name: 'Icons',
+        meta: {
+          title: '图标',
+          icon: 'carbon:skill-level-advanced'
+        }
+      }
+    ]
   }
 ]
 
diff --git a/src/styles/var.css b/src/styles/var.css
index c16b11c..2afa1e3 100644
--- a/src/styles/var.css
+++ b/src/styles/var.css
@@ -1,6 +1,7 @@
 :root {
   --dark-bg-color: #293146;
 
+  /* left menu start */
   --left-menu-max-width: 200px;
 
   --left-menu-min-width: 64px;
@@ -15,11 +16,16 @@
 
   --left-menu-text-active-color: #fff;
 
+  --left-menu-collapse-bg-active-color: var(--el-color-primary);
+  /* left menu end */
+
   --top-tool-height: 40px;
 
-  --top-tool-p-x: 20px;
+  --top-tool-p-x: 0;
 
   --top-tool-border-color: #eee;
 
   --tags-view-height: 40px;
+
+  --transition-time-02: 0.2s;
 }
diff --git a/src/utils/color.ts b/src/utils/color.ts
index 340cde1..bdd8ab8 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -149,7 +149,3 @@ function subtractLight(color: string, amount: number) {
   const c = cc < 0 ? 0 : cc
   return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`
 }
-
-export function setCssVar(prop: string, val: any, dom = document.documentElement) {
-  dom.style.setProperty(prop, val)
-}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 0904c63..61cbd0b 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -34,3 +34,7 @@ export function underlineToHump(str: string): string {
     return letter.toUpperCase()
   })
 }
+
+export function setCssVar(prop: string, val: any, dom = document.documentElement) {
+  dom.style.setProperty(prop, val)
+}
diff --git a/src/utils/routerHelper.ts b/src/utils/routerHelper.ts
index 0c725a5..f64560b 100644
--- a/src/utils/routerHelper.ts
+++ b/src/utils/routerHelper.ts
@@ -122,7 +122,8 @@ export function generateRoutesFn2(routes: AppRouteRecordRaw[]): AppRouteRecordRa
 }
 
 export function pathResolve(parentPath: string, path: string) {
-  return `${parentPath}/${path}`
+  const childPath = path.startsWith('/') || !path ? path : `/${path}`
+  return `${parentPath}${childPath}`
 }
 
 // 路由降级
diff --git a/src/views/Level/Menu111.vue b/src/views/Level/Menu111.vue
index f08e543..6624131 100644
--- a/src/views/Level/Menu111.vue
+++ b/src/views/Level/Menu111.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div>Menu111</div>
+  <div>Menu111 <input type="text" /></div>
 </template>
diff --git a/src/views/Level/Menu12.vue b/src/views/Level/Menu12.vue
index 446e8c9..f2caa5b 100644
--- a/src/views/Level/Menu12.vue
+++ b/src/views/Level/Menu12.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div>Menu12</div>
+  <div>Menu12 <input type="text" /></div>
 </template>
diff --git a/src/views/Level/Menu2.vue b/src/views/Level/Menu2.vue
index 98823cd..897b1b3 100644
--- a/src/views/Level/Menu2.vue
+++ b/src/views/Level/Menu2.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div>Menu2</div>
+  <div>Menu2 <input type="text" /></div>
 </template>