代码优化

Author: 陈鑫

src/assets/user.png

@@ -71,6 +71,11 @@ const Menus = defineComponent({
                   if (!menu.children || !menu.children.length) {
                     return (
                       <Menu.Item key={menu.path}>
+                        {menus.meta?.icon && (
+                          <span
+                            class={`iconfont ${menu.meta.icon} menu-icon`}
+                          ></span>
+                        )}
                         <span>{menu.meta?.title}</span>
                       </Menu.Item>
                     )

src/components/GlobalHeader/Menus.tsx

@@ -1,15 +1,30 @@
 import { defineComponent } from 'vue'
 import { RouterView } from 'vue-router'
-import { Layout } from 'ant-design-vue'
+import { Layout, Dropdown } from 'ant-design-vue'
 import { GlobalHeader, Menus } from '@/components/GlobalHeader'
 
 import styles from './index.module.less'
+import UserIcon from '../assets/user.png'
 
 const LevelBasicLayout = defineComponent({
   name: 'LevelBasicLayout',
   setup() {
     const slots = {
-      content: () => <Menus></Menus>,
+      content: () => (
+        <>
+          {/* 导航栏 */}
+          <Menus></Menus>
+          {/* 用户信息 */}
+          <div class={styles['user-info']}>
+            <Dropdown>
+              <div>
+                <img src={UserIcon} class={styles['user-head']} />
+                <a class={styles['user-name']}>admin</a>
+              </div>
+            </Dropdown>
+          </div>
+        </>
+      ),
     }
     return () => (
       <Layout class={styles['level-layout']}>

src/layouts/LevelBasicLayout.tsx

@@ -6,6 +6,52 @@
       height: 100%;
     }
   }
+  .user-info {
+    min-width: 100px;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: flex-end;
+    .lang-box {
+      width: 80px;
+      margin-right: 10px;
+      &.ant-select {
+        font-size: 12px;
+      }
+      .ant-select-selection {
+        background: transparent;
+        border: 1px solid #a7a5a5;
+        color: #fff;
+      }
+      .ant-select-arrow {
+        color: #fff;
+        font-size: 10px;
+      }
+    }
+    .ant-dropdown-trigger {
+      height: 54px;
+      line-height: 54px;
+    }
+    .user-head {
+      width: 30px;
+      height: 30px;
+      margin-right: 10px;
+      margin-top: -4px;
+    }
+    .user-name {
+      line-height: 54px;
+      font-size: 16px;
+      color: rgba(255, 255, 255, 0.85);
+    }
+    .icon {
+      line-height: 54px;
+      font-size: 24px;
+      font-weight: bold;
+      color: #fff;
+      margin-left: 10px;
+      cursor: pointer;
+    }
+  }
 }
 
 .page-view {