fix: collapse sidebar icon

Signed-off-by: Kaifuny <superbiger.github@gmail.com>

contact-frontend/packages/modules/services/enterprise/src/layouts/MenusLayout.vue

@@ -1,15 +1,23 @@
 <script setup lang="ts">
-import { MenusLayout } from '@cskefu/shared-ui'
+import { ref } from 'vue'
 import { MenuOption } from 'naive-ui'
 
-import routes from '../routes'
+import { MenusLayout } from '@cskefu/shared-ui'
 import { routesToMenus } from '@cskefu/shared-utils'
 import { Menu } from '@cskefu/shared-ui'
 
+import routes from '../routes'
+
 const menuOptions: MenuOption[] = routesToMenus(routes)
+const collapsed = ref<boolean>(false)
 </script>
 <template>
-  <MenusLayout>
+  <MenusLayout v-model:collapsed="collapsed">
-    <Menu :options="menuOptions" />
+    <Menu
+      v-model:collapsed="collapsed"
+      :options="menuOptions"
+      :collapsed-width="64"
+      :collapsed-icon-size="24"
+    />
   </MenusLayout>
 </template>

contact-frontend/packages/modules/services/enterprise/src/routes/index.ts

@@ -6,6 +6,9 @@ import {
   BusinessOutline,
   GitNetworkOutline,
   LibraryOutline,
+  BagCheckOutline,
+  PeopleOutline,
+  OptionsOutline,
 } from '@vicons/ionicons5'
 
 const routes: RouteRecordRaw[] = [
@@ -52,7 +55,7 @@ const routes: RouteRecordRaw[] = [
         meta: {
           title: '质检',
           requiresAuth: true,
-          icon: 'el-icon-setting',
+          icon: BagCheckOutline,
         },
       },
       {
@@ -60,6 +63,7 @@ const routes: RouteRecordRaw[] = [
         name: ROUTE_NAME.ENTERPRISE_ADMIN_INDEX,
         meta: {
           title: '组织/成员',
+          icon: PeopleOutline,
         },
         children: [
           {
@@ -69,7 +73,6 @@ const routes: RouteRecordRaw[] = [
             meta: {
               title: '账号管理',
               requiresAuth: true,
-              icon: 'el-icon-setting',
             },
           },
           {
@@ -79,7 +82,6 @@ const routes: RouteRecordRaw[] = [
             meta: {
               title: '角色管理',
               requiresAuth: true,
-              icon: 'el-icon-setting',
             },
           },
           {
@@ -89,7 +91,6 @@ const routes: RouteRecordRaw[] = [
             meta: {
               title: '组织架构',
               requiresAuth: true,
-              icon: 'el-icon-setting',
             },
           },
         ],
@@ -99,6 +100,7 @@ const routes: RouteRecordRaw[] = [
         name: ROUTE_NAME.ENTERPRISE_FEATURE_INDEX,
         meta: {
           title: '功能设置',
+          icon: OptionsOutline,
         },
         children: [
           {
@@ -108,7 +110,6 @@ const routes: RouteRecordRaw[] = [
             meta: {
               title: '对话设置',
               requiresAuth: true,
-              icon: 'el-icon-setting',
             },
           },
           {
@@ -118,7 +119,6 @@ const routes: RouteRecordRaw[] = [
             meta: {
               title: '客户设置',
               requiresAuth: true,
-              icon: 'el-icon-setting',
             },
           },
           {
@@ -128,7 +128,6 @@ const routes: RouteRecordRaw[] = [
             meta: {
               title: '工单设置',
               requiresAuth: true,
-              icon: 'el-icon-setting',
             },
           },
           {
@@ -138,7 +137,6 @@ const routes: RouteRecordRaw[] = [
             meta: {
               title: '留言设置',
               requiresAuth: true,
-              icon: 'el-icon-setting',
             },
           },
         ],

contact-frontend/packages/modules/services/organization/src/layouts/MenusLayout.vue

@@ -3,11 +3,18 @@ import { MenusLayout } from '@cskefu/shared-ui'
 import { MenuOption } from 'naive-ui'
 
 import { Menu } from '@cskefu/shared-ui'
+import { ref } from 'vue'
 
 const menuOptions: MenuOption[] = []
+const collapsed = ref<boolean>(false)
 </script>
 <template>
-  <MenusLayout>
+  <MenusLayout v-model:collapsed="collapsed">
-    <Menu :options="menuOptions" />
+    <Menu
+      v-model:collapsed="collapsed"
+      :options="menuOptions"
+      :collapsed-width="64"
+      :collapsed-icon-size="24"
+    />
   </MenusLayout>
 </template>

contact-frontend/packages/modules/services/seats/src/layouts/MenusLayout.vue

@@ -1,15 +1,23 @@
 <script setup lang="ts">
-import { MenusLayout } from '@cskefu/shared-ui'
+import { ref } from 'vue'
 import { MenuOption } from 'naive-ui'
 
-import routes from '../routes'
+import { MenusLayout } from '@cskefu/shared-ui'
 import { routesToMenus } from '@cskefu/shared-utils'
 import { Menu } from '@cskefu/shared-ui'
 
+import routes from '../routes'
+
 const menuOptions: MenuOption[] = routesToMenus(routes)
+const collapsed = ref<boolean>(false)
 </script>
 <template>
-  <MenusLayout>
+  <MenusLayout v-model:collapsed="collapsed">
-    <Menu :options="menuOptions" />
+    <Menu
+      v-model:collapsed="collapsed"
+      :options="menuOptions"
+      :collapsed-width="64"
+      :collapsed-icon-size="24"
+    />
   </MenusLayout>
 </template>

contact-frontend/packages/modules/services/seats/src/routes/index.ts

@@ -7,10 +7,7 @@ import {
   AnalyticsOutline,
   ChatbubblesOutline,
   DocumentAttachOutline,
-  BarChartOutline,
-  SettingsOutline,
   HardwareChip,
-  GridOutline,
 } from '@vicons/ionicons5'
 
 const routes: RouteRecordRaw[] = [
@@ -75,7 +72,6 @@ const routes: RouteRecordRaw[] = [
             meta: {
               title: '数据统计',
               requiresAuth: true,
-              icon: BarChartOutline,
             },
           },
           {
@@ -85,7 +81,6 @@ const routes: RouteRecordRaw[] = [
             meta: {
               title: '机器人管理',
               requiresAuth: true,
-              icon: GridOutline,
             },
           },
           {
@@ -95,7 +90,6 @@ const routes: RouteRecordRaw[] = [
             meta: {
               title: '机器人设置',
               requiresAuth: true,
-              icon: SettingsOutline,
             },
           },
         ],

contact-frontend/packages/modules/services/setting/src/layouts/MenusLayout.vue

@@ -2,11 +2,18 @@
 import { MenusLayout } from '@cskefu/shared-ui'
 import { MenuOption } from 'naive-ui'
 import { Menu } from '@cskefu/shared-ui'
+import { ref } from 'vue'
 
 const menuOptions: MenuOption[] = []
+const collapsed = ref<boolean>(false)
 </script>
 <template>
-  <MenusLayout>
+  <MenusLayout v-model:collapsed="collapsed">
-    <Menu :options="menuOptions" />
+    <Menu
+      v-model:collapsed="collapsed"
+      :options="menuOptions"
+      :collapsed-width="64"
+      :collapsed-icon-size="24"
+    />
   </MenusLayout>
 </template>

contact-frontend/packages/modules/services/system/src/layouts/MenusLayout.vue

@@ -1,16 +1,23 @@
 <script setup lang="ts">
-import { MenusLayout } from '@cskefu/shared-ui'
+import { ref } from 'vue'
 import { MenuOption } from 'naive-ui'
+
 import { Menu } from '@cskefu/shared-ui'
+import { MenusLayout } from '@cskefu/shared-ui'
+import { routesToMenus } from '@cskefu/shared-utils'
 
 import routes from '../routes'
 
-import { routesToMenus } from '@cskefu/shared-utils'
-
 const menuOptions: MenuOption[] = routesToMenus(routes)
+const collapsed = ref<boolean>(false)
 </script>
 <template>
-  <MenusLayout>
+  <MenusLayout v-model:collapsed="collapsed">
-    <Menu :options="menuOptions" />
+    <Menu
+      v-model:collapsed="collapsed"
+      :options="menuOptions"
+      :collapsed-width="64"
+      :collapsed-icon-size="24"
+    />
   </MenusLayout>
 </template>

contact-frontend/packages/shared/ui/src/layouts/MenusLayout.vue

@@ -18,7 +18,13 @@ defineProps({
     type: Boolean,
     default: true,
   },
+  collapsed: {
+    type: Boolean,
+    default: false,
+  },
 })
+
+defineEmits(['update:collapsed'])
 </script>
 <template>
   <n-layout has-sider class="h-full">
@@ -35,7 +41,16 @@ defineProps({
       :y-offset="60"
       :rotate="-15"
     />
-    <n-layout-sider bordered show-trigger="bar" collapse-mode="transform">
+    <n-layout-sider
+      :collapsed-width="64"
+      :width="280"
+      :collapsed="collapsed"
+      bordered
+      show-trigger="bar"
+      collapse-mode="width"
+      @collapse="$emit('update:collapsed', true)"
+      @expand="$emit('update:collapsed', false)"
+    >
       <slot></slot>
     </n-layout-sider>
     <n-layout-content