Optimize admin menu (#935)

OpenCSGs · Feb 11, 2025 · 2cce245 · 2cce245
1 parent 9aed19f
commit 2cce245
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 27 deletions.
diff --git a/frontend/public/images/icons/admin-menu-tag.svg b/frontend/public/images/icons/admin-menu-tag.svg
diff --git a/frontend/src/components/admin_next/admin_component/Menu.vue b/frontend/src/components/admin_next/admin_component/Menu.vue
@@ -76,7 +76,7 @@
 
 <style scoped lang="postcss">
   .menu-section-title {
-    @apply text-[16px] text-[#0f1728] font-normal leading-normal mb-4 px-5;
+    @apply text-[16px] text-[#0f1728] font-normal leading-normal mb-1 mt-5 px-5;
     font-family: 'PingFang SC', sans-serif;
   }
 

diff --git a/frontend/src/components/admin_next/router/index.js b/frontend/src/components/admin_next/router/index.js
@@ -20,14 +20,21 @@ import { admin as admin_zh } from "../../../locales/zh_js/admin.js"
 
 const adminLocale = cookies.get('locale') === 'en' ? admin_en : admin_zh
 
-
 // parent menu name
 export const PARENT_NAME = {
   BASE_CONFIG: adminLocale.baseConfigTitle,
+  system: adminLocale.menuSystem,
+  account: adminLocale.menuAccount,
+  hub: adminLocale.menuHub
 };
 
 // use for parent menu render
-export const PARENT_NAME_LIST = [PARENT_NAME.BASE_CONFIG];
+export const PARENT_NAME_LIST = [
+  PARENT_NAME.BASE_CONFIG,
+  PARENT_NAME.system,
+  PARENT_NAME.account,
+  PARENT_NAME.hub
+]
 
 export const BASE_URL = '/admin_panel';
 
@@ -39,102 +46,102 @@ export const MENU_SETTING = [
     // this property use for find the parent name
     parentName: PARENT_NAME.BASE_CONFIG,
     icon: "admin-menu-dashboard",
-    type: "item",
+    type: "menu",
   },
   {
     path: `${BASE_URL}/system_config`,
     component: AdminSystemConfig,
     name: adminLocale.systemConfig.title,
-    parentName: PARENT_NAME.BASE_CONFIG,
+    parentName: PARENT_NAME.system,
     icon: "admin-menu-settings",
-    type: "item",
+    type: "menu",
   },
   {
     path: `${BASE_URL}/users`,
     component: AdminUserList,
     name: adminLocale.users.title,
-    parentName: PARENT_NAME.BASE_CONFIG,
+    parentName: PARENT_NAME.account,
     icon: "admin-menu-users",
-    type: "item",
+    type: "menu",
   },
   {
     path: `${BASE_URL}/users/:id`,
     component: AdminUserDetail,
     name: "用户详情",
-    parentName: PARENT_NAME.BASE_CONFIG,
+    parentName: PARENT_NAME.account,
     icon: User,
   },
   {
     path: `${BASE_URL}/sync`,
     component: AdminSyncSetting,
     name: adminLocale.syncSetting.title,
-    parentName: PARENT_NAME.BASE_CONFIG,
+    parentName: PARENT_NAME.hub,
     icon: "admin-menu-cloud",
-    type: "item",
+    type: "menu",
   },
   {
     path: `${BASE_URL}/tags`,
     component: AdminTagsList,
     name: adminLocale.tags.title,
-    parentName: PARENT_NAME.BASE_CONFIG,
-    icon: 'admin-menu-cloud',
-    type: 'item'
+    parentName: PARENT_NAME.hub,
+    icon: 'admin-menu-tag',
+    type: 'menu'
   },
   {
     path: `${BASE_URL}/tags/new`,
     component: AdminTagsForm,
     name: adminLocale.tags.newTag,
-    parentName: PARENT_NAME.BASE_CONFIG
+    parentName: PARENT_NAME.hub
   },
   {
     path: `${BASE_URL}/tags/:id/edit`,
     component: AdminTagsForm,
     name: adminLocale.tags.editTag,
-    parentName: PARENT_NAME.BASE_CONFIG
+    parentName: PARENT_NAME.hub
   },
   {
     path: `${BASE_URL}/tags/:id`,
     component: AdminTagsDetail,
     name: adminLocale.tags.tagDetailTitle,
-    parentName: PARENT_NAME.BASE_CONFIG
+    parentName: PARENT_NAME.hub
   },
   {
     path: `${BASE_URL}/tag_categories`,
     component: AdminTagCategoriesList,
     name: adminLocale.tagCategories.title,
-    parentName: PARENT_NAME.BASE_CONFIG,
-    icon: 'admin-menu-cloud',
-    type: 'item'
+    parentName: PARENT_NAME.hub,
+    icon: 'admin-menu-tag',
+    type: 'menu'
   },
   {
     path: `${BASE_URL}/tag_categories/new`,
     component: AdminTagCategoriesForm,
     name: adminLocale.tagCategories.create,
-    parentName: PARENT_NAME.BASE_CONFIG
+    parentName: PARENT_NAME.hub
   },
   {
     path: `${BASE_URL}/tag_categories/:id/edit`,
     component: AdminTagCategoriesForm,
     name: adminLocale.tagCategories.edit,
-    parentName: PARENT_NAME.BASE_CONFIG
+    parentName: PARENT_NAME.hub
   },
   {
     path: `${BASE_URL}/broadcasts`,
     component: AdminBroadcastList,
     name: adminLocale.broadcasts.title,
-    parentName: PARENT_NAME.BASE_CONFIG,
+    parentName: PARENT_NAME.system,
     icon: 'admin-menu-cloud',
-    type: 'item'
+    type: 'menu'
   },
   {
     path: `${BASE_URL}/broadcasts/new`,
     component: AdminBroadcastNew,
-    parentName: PARENT_NAME.BASE_CONFIG,
+    parentName: PARENT_NAME.system,
   },
   {
     path: `${BASE_URL}/broadcasts/:id/edit`,
     component: AdminBroadcastEdit,
-    parentName: PARENT_NAME.BASE_CONFIG,
+    parentName: PARENT_NAME.system,
   },
 ];
 
@@ -143,7 +150,7 @@ export const menuRenderList = PARENT_NAME_LIST.reduce((acc, item) => {
     name: item,
     type: "group",
     children: MENU_SETTING.filter(
-      (menu) => menu.type === "item" && menu.parentName === item
+      (menu) => menu.type === "menu" && menu.parentName === item
     ),
   });
   return acc;

diff --git a/frontend/src/locales/en_js/admin.js b/frontend/src/locales/en_js/admin.js
@@ -1,5 +1,8 @@
 export const admin = {
   baseConfigTitle: 'Basic Settings',
+  menuSystem: 'System',
+  menuAccount: 'Account',
+  menuHub: 'Hub',
   createSuccess: 'Create Success',
   updateSuccess: 'Update Success',
   operations: 'Operations',

diff --git a/frontend/src/locales/zh_js/admin.js b/frontend/src/locales/zh_js/admin.js
@@ -1,5 +1,8 @@
 export const admin = {
   baseConfigTitle: '基础配置',
+  menuSystem: '系统',
+  menuAccount: '账号',
+  menuHub: 'Hub',
   createSuccess: '创建成功',
   updateSuccess: '更新成功',
   operations: '操作',