fix：修改菜单

.vscode/settings.json

@@ -21,5 +21,8 @@
 
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   // #值设置为true时，每次保存的时候自动格式化；
-  "editor.formatOnSave": true
-}
+  "editor.formatOnSave": true,
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

src/router/index.js

@@ -28,8 +28,8 @@ router.beforeEach(async (to, from, next) => {
   // 用户已授权的情况
   if (isAuthorized) {
     if (!hasRouteFlag) {
-      const { formattedRoutes, accessFlatRoutes } = await initializeRoutes();
-      formattedRoutes.forEach((route) => {
+      const { accessRoutes, accessFlatRoutes } = await initializeRoutes();
+      accessRoutes.forEach((route) => {
         if (route.path && route.component) {
           router.addRoute(route); // 动态添加可访问路由表
         }

src/utils/permission.js

@@ -79,7 +79,7 @@ export const flattenRoutes = (routes) => {
 
 // 获取有权限的路由
 let routesList = [];
-let formattedRoutes = [];
+let accessRoutes = [];
 let accessFlatRoutes = [];
 
 export const initializeRoutes = () => {
@@ -88,7 +88,7 @@ export const initializeRoutes = () => {
   } catch (error) {
     console.error('路由解析错误:', error);
   }
-  formattedRoutes = formatRoutes(routesList);
-  accessFlatRoutes = flattenRoutes(formattedRoutes);
-  return { formattedRoutes, accessFlatRoutes };
+  accessRoutes = formatRoutes(routesList);
+  accessFlatRoutes = flattenRoutes(accessRoutes);
+  return { accessRoutes, accessFlatRoutes };
 };

src/views/common/Header.vue

@@ -12,7 +12,11 @@
           <NavItem :label="$t(item.label)" :to="item.to" :icon="item.icon" />
         </div>
 
-        <PermissionDropdownV1 :dropdown_list="dropdown_list" :label="$t('header.权限管理')" />
+        <PermissionDropdown
+          :dropdown_list="dropdown_list"
+          :label="$t('header.权限管理')"
+          :permission_icon="permission_icon"
+        />
 
         <!-- <NavItem label="临时: RagFlow Chat" to="/ragchat" icon_name="header-zhinengti" /> -->
       </a-space>
@@ -47,7 +51,7 @@ import { localST_RoutesList } from '../../base/storage';
 
 import NavItem from './NavItem.vue';
 
-import PermissionDropdownV1 from './PermissionDropdownV1.vue';
+import PermissionDropdown from './PermissionDropdown.vue';
 
 import BtnSearch from './header-btns/BtnSearch.vue';
 import BtnLanguage from './header-btns/BtnLanguage.vue';
@@ -58,6 +62,7 @@ import BtnCurrentUser from './header-btns/BtnCurrentUser.vue';
 
 const nav_list = ref([]);
 const dropdown_list = ref([]);
+const permission_icon = ref('IconLock');
 /**
  * 请求网页全屏
  */
@@ -99,7 +104,8 @@ const formatPermissionItems = (permissionList) => {
     .map((item) => {
       return {
         label: item.meta.title,
-        path: item.path
+        path: item.path,
+        icon: item.meta.icon || 'IconRobot' //
       };
     })
     .filter((item) => item !== null); // 过滤掉null值
@@ -114,6 +120,7 @@ onMounted(() => {
 
     const permissionList = routesList.find((item) => item.meta.title === '权限管理');
     dropdown_list.value = permissionList ? formatPermissionItems(permissionList) : [];
+    permission_icon.value = permissionList ? permissionList.meta.icon : 'IconLock';
   }
 });
 </script>

src/views/common/NavItem.vue

@@ -84,7 +84,6 @@ const is_active = computed(() => {
 
 .nav-item-icon {
   font-size: 22px;
-
   margin-right: 5px;
 }
 </style>

src/views/common/PermissionDropdownV1.vue → src/views/common/PermissionDropdown.vue

@@ -2,9 +2,9 @@
   <a-space v-if="dropdown_list && dropdown_list.length > 0" size="large">
     <a-dropdown trigger="hover">
       <div class="nav-item" :class="{ 'is-active': is_active }">
-        <span class="nav-item-icon"><img :src="img_src" /></span>
+        <component class="nav-item-icon" :is="permission_icon" />
         <span>{{ label }}</span>
-        <span class="nav-item-icon arrow-down"><img src="../../assets/arrow-down.png" /></span>
+        <icon-down class="arrow-down" />
       </div>
 
       <template #content>
@@ -24,8 +24,6 @@
 import { ref, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import { header_icon_quanxian } from './header-icon-map';
-
 /**
  * V0版本是因为下拉菜单中写的路由链接，为蓝色
  * 赵源提需求说不要蓝色，此处改为span的方式
@@ -33,7 +31,8 @@ import { header_icon_quanxian } from './header-icon-map';
 
 const props = defineProps({
   label: String,
-  dropdown_list: Array
+  dropdown_list: Array,
+  permission_icon: String
 });
 
 const route = useRoute();
@@ -53,16 +52,6 @@ const is_active = computed(() => {
   return active_list.indexOf(cur_path) >= 0;
 });
 
-const img_src = computed(() => {
-  if (is_active.value) {
-    // TODO: 如果是激活状态，应该改为 2
-    // 资源目录应该添加名为 2 的图标
-    return header_icon_quanxian.t2;
-  } else {
-    return header_icon_quanxian.t1;
-  }
-});
-
 const handleChatTypeConfirm = (path) => {
   router.push({
     path: path
@@ -104,22 +93,13 @@ const handleChatTypeConfirm = (path) => {
   display: flex;
   justify-content: center;
   align-items: center;
-
+  font-size: 22px;
   margin-right: 5px;
 }
-
-.nav-item-icon img {
-  width: 18px;
-}
-
-.nav-item-icon.arrow-down {
+.arrow-down {
   margin-left: 2px;
+  font-size: 16px;
 }
-
-.nav-item-icon.arrow-down img {
-  width: 14px;
-}
-
 .dropdown-menu-item {
   text-align: center;
 }

src/views/common/PermissionDropdownV0.vue

@@ -1,123 +0,0 @@
-<template>
-  <a-space size="large">
-    <a-dropdown trigger="hover">
-      <div class="nav-item" :class="{ 'is-active': is_active }">
-        <span class="nav-item-icon"><img :src="img_src" /></span>
-        <span>{{ label }}</span>
-        <span class="nav-item-icon arrow-down"><img src="../../assets/arrow-down.png" /></span>
-      </div>
-
-      <template #content>
-        <a-doption
-          ><router-link class="arco-link" to="/permission/role">{{ $t('permission.role') }}</router-link></a-doption
-        >
-        <a-doption
-          ><router-link class="arco-link" to="/permission/account">{{
-            $t('permission.account')
-          }}</router-link></a-doption
-        >
-        <a-doption
-          ><router-link class="arco-link" to="/permission/org">{{
-            $t('permission.organization')
-          }}</router-link></a-doption
-        >
-        <a-doption
-          ><router-link class="arco-link" to="/permission/resource">{{
-            $t('permission.resource')
-          }}</router-link></a-doption
-        >
-        <a-doption
-          ><router-link class="arco-link" to="/permission/group">{{ $t('permission.group') }}</router-link></a-doption
-        >
-      </template>
-    </a-dropdown>
-  </a-space>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue';
-import { useRoute } from 'vue-router';
-
-import { header_icon_quanxian } from './header-icon-map';
-
-const props = defineProps({
-  label: String
-});
-
-const route = useRoute();
-
-const is_active = computed(() => {
-  const cur_path = route.path;
-
-  const active_list = [
-    '/permission/role',
-    '/permission/account',
-    '/permission/org',
-    '/permission/resource',
-    '/permission/group'
-  ];
-
-  return active_list.indexOf(cur_path) >= 0;
-});
-
-const img_src = computed(() => {
-  if (is_active.value) {
-    // TODO: 如果是激活状态，应该改为 2
-    // 资源目录应该添加名为 2 的图标
-    return header_icon_quanxian.t2;
-  } else {
-    return header_icon_quanxian.t1;
-  }
-});
-</script>
-
-<style lang="css" scoped>
-.nav-item {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  height: 40px;
-  border-radius: 20px;
-
-  padding-left: 15px;
-  padding-right: 15px;
-
-  margin-left: 5px;
-  margin-right: 5px;
-
-  color: var(--color-text-1);
-
-  cursor: pointer;
-}
-
-.nav-item:hover {
-  background-color: var(--color-fill-4);
-  color: #fff;
-}
-
-.nav-item.is-active {
-  background-color: rgb(var(--primary-6));
-  color: #fff;
-}
-
-.nav-item-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  margin-right: 5px;
-}
-
-.nav-item-icon img {
-  width: 18px;
-}
-
-.nav-item-icon.arrow-down {
-  margin-left: 2px;
-}
-
-.nav-item-icon.arrow-down img {
-  width: 14px;
-}
-</style>

src/views/common/header-icon-map.js

@@ -1,7 +0,0 @@
-import icon_quanxian_1 from '../../assets/header-quanxian-1.png';
-import icon_quanxian_2 from '../../assets/header-quanxian-2.png';
-
-export const header_icon_quanxian = {
-  t1: icon_quanxian_1,
-  t2: icon_quanxian_2
-};