feat: control-sider

.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
   rules: {
     'vue/multi-word-component-names': 0,
     '@typescript-eslint/no-empty-function': 'off',
-    'no-undef': 'off'
+    'no-undef': 'off',
+    '@typescript-eslint/no-var-requires': 0
   }
 }

package.json

@@ -9,6 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@ant-design/icons-vue": "^6.1.0",
     "ant-design-vue": "^3.3.0-beta.4",
     "babel-plugin-import": "^1.13.6",
     "core-js": "^3.8.3",

src/layout/navbar.vue

@@ -1,7 +1,13 @@
 <template>
   <a-layout-header class="header">
-      <div class="logo" />
-      <a-menu
+      <a-row style="width: 100%;"  >
+        <a-col :span="2" >
+          <div class="logo" >
+            logo
+          </div>
+        </a-col>
+        <a-col :span="20" >
+        <a-menu
           theme="dark"
           mode="horizontal"
           :style="{ lineHeight: '64px' }"
@@ -15,13 +21,20 @@
           >
             {{route.name}}
           </a-menu-item>
-      </a-menu>
+          </a-menu>
+        </a-col>
+        <a-col :span="2" >
+          <user />
+        </a-col>
+      </a-row>
+
   </a-layout-header>
 </template>
 
 <script lang="ts" setup >
 import { ref } from 'vue'
 import { useAppRouter } from '@/store/router'
+import user from './user.vue'
 const appRouter = useAppRouter()
 
 const selectedKeys1 = ref<string[]>([appRouter.$state.router.navbar.selectPath])
@@ -31,5 +44,12 @@ const changeRouter = (path: string) => appRouter.changeNavbar(path)
 </script>
 
 <style lang="less" scoped >
-
+.header {
+  width: 100vw;
+  display: flex;
+  .logo {
+    width: 170px;
+    color: #fff;
+  }
+}
 </style>

src/layout/sider.vue

@@ -2,34 +2,43 @@
   <a-row>
     <a-col>
       <a-layout-sider
-            width="200"
-            style="background: #fff; height: 100%;"
+            :trigger="null"
+            v-model:collapsed="collapsed"
+            collapsible
+            style="background: #fff; height: 92.5%;"
             breakpoint="lg"
-            collapsed-width="0"
             @collapse="onCollapse"
             @breakpoint="onBreakpoint"
         >
          <a-menu
             v-model:selectedKeys="selectedKeys2"
             v-model:openKeys="openKeys"
-
             mode="inline"
             :style="{ height: '100%', borderRight: 0 }"
             >
             <template v-for="item in appRouter.router.sider.route" :key="item.path">
               <a-sub-menu  v-if="item.children" :key="item.path">
                 <template #title>
-                <span>
-                    <user-outlined />
+                  <user-outlined />
+                  <span>
                     {{item.name}}
-                </span>
+                  </span>
                 </template>
-                <a-menu-item @click="changeRoute(_)" v-for="_ in item.children" :key="_.path" >{{_.name}}</a-menu-item>
+                <a-menu-item @click="changeRoute(_)" v-for="_ in item.children" :key="_.path" >
+                  <user-outlined />{{_.name}}
+                </a-menu-item>
               </a-sub-menu>
-              <a-menu-item v-else @click="changeRoute(item)" >{{item.name}}</a-menu-item>
+              <a-menu-item v-else @click="changeRoute(item)" >
+                <user-outlined />
+                <span>{{item.name}}</span>
+              </a-menu-item>
             </template>
-            </a-menu>
+          </a-menu>
         </a-layout-sider>
+        <div class="control" >
+          <menu-fold-outlined @click="collapsed = true" v-if="!collapsed" style="font-size: 30px;cursor: pointer;" />
+          <menu-unfold-outlined  @click="collapsed = false" v-else style="font-size: 30px;cursor: pointer;" />
+        </div>
     </a-col>
   </a-row>
 </template>
@@ -40,13 +49,15 @@ import RootRouter from '@/router/index'
 import { useAppRouter } from '@/store/router'
 import { useEmitter } from '@/hooks/index'
 import { Emitter } from '@/enum/emitter'
-
+import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined } from '@ant-design/icons-vue'
 const emitter = useEmitter()
 const appRouter = useAppRouter()
 
 const onCollapse = () => {}
 const onBreakpoint = () => {}
 
+const collapsed = ref<boolean>(false)
+
 const selectedKeys2 = ref<string[]>([appRouter.router.sider!.selectPath])
 const openKeys = ref<string[]>(appRouter.router.sider!.openKeys)
 
@@ -62,5 +73,13 @@ const changeRoute = (route: Router.RoutesProps) => {
 </script>
 
 <style lang="less" scoped >
+.control {
+  width: 100%;
+  height: 5%;
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
+}
 </style>

src/layout/user.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="user" >
+
+    <a-dropdown>
+      <a-badge :count="1">
+      <a-avatar shape="round" :src="ava"  style="cursor: pointer;" />
+    </a-badge>
+
+    <template #overlay>
+      <a-menu>
+        <a-menu-item>
+          <a href="javascript:;">退出登录</a>
+        </a-menu-item>
+      </a-menu>
+    </template>
+  </a-dropdown>
+
+  </div>
+</template>
+
+<script lang="ts" setup >
+const ava = require('@/assets/ava.jpg')
+</script>
+
+<style lang="less" scoped >
+</style>

src/main.ts

@@ -3,7 +3,7 @@ import App from './App.vue'
 import router from './router'
 import '@/router/before'
 import { createPinia } from 'pinia'
-import antd from 'ant-design-vue'
+import antd, { ConfigProvider } from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.css'
 
 const pinia = createPinia()