fix: collapse sidebar icon

Signed-off-by: Kaifuny <superbiger.github@gmail.com>
2025-08-01 16:38:02 +08:00 · 2023-07-25 11:04:10 +08:00 · 2023-07-25 11:04:10 +08:00 · 12cb53bba4
commit 12cb53bba4
parent ffe26155f1
8 changed files with 76 additions and 32 deletions
--- a/contact-frontend/packages/modules/services/enterprise/src/layouts/MenusLayout.vue
+++ b/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>
-    <Menu :options="menuOptions" />
+  <MenusLayout v-model:collapsed="collapsed">
+    <Menu
+      v-model:collapsed="collapsed"
+      :options="menuOptions"
+      :collapsed-width="64"
+      :collapsed-icon-size="24"
+    />
  </MenusLayout>
 </template>
--- a/contact-frontend/packages/modules/services/enterprise/src/routes/index.ts
+++ b/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',
            },
          },
        ],
--- a/contact-frontend/packages/modules/services/organization/src/layouts/MenusLayout.vue
+++ b/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>
-    <Menu :options="menuOptions" />
+  <MenusLayout v-model:collapsed="collapsed">
+    <Menu
+      v-model:collapsed="collapsed"
+      :options="menuOptions"
+      :collapsed-width="64"
+      :collapsed-icon-size="24"
+    />
  </MenusLayout>
 </template>
--- a/contact-frontend/packages/modules/services/seats/src/layouts/MenusLayout.vue
+++ b/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>
-    <Menu :options="menuOptions" />
+  <MenusLayout v-model:collapsed="collapsed">
+    <Menu
+      v-model:collapsed="collapsed"
+      :options="menuOptions"
+      :collapsed-width="64"
+      :collapsed-icon-size="24"
+    />
  </MenusLayout>
 </template>
--- a/contact-frontend/packages/modules/services/seats/src/routes/index.ts
+++ b/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,
            },
          },
        ],
--- a/contact-frontend/packages/modules/services/setting/src/layouts/MenusLayout.vue
+++ b/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>
-    <Menu :options="menuOptions" />
+  <MenusLayout v-model:collapsed="collapsed">
+    <Menu
+      v-model:collapsed="collapsed"
+      :options="menuOptions"
+      :collapsed-width="64"
+      :collapsed-icon-size="24"
+    />
  </MenusLayout>
 </template>
--- a/contact-frontend/packages/modules/services/system/src/layouts/MenusLayout.vue
+++ b/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>
-    <Menu :options="menuOptions" />
+  <MenusLayout v-model:collapsed="collapsed">
+    <Menu
+      v-model:collapsed="collapsed"
+      :options="menuOptions"
+      :collapsed-width="64"
+      :collapsed-icon-size="24"
+    />
  </MenusLayout>
 </template>
--- a/contact-frontend/packages/shared/ui/src/layouts/MenusLayout.vue
+++ b/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