refactor(菜单): 左侧菜单样式

frontend/src/assets/icon-font/iconfont.css

@@ -1,7 +1,7 @@
 @font-face {
   font-family: iconfont; /* Project id 3462279 */
-  src: url('iconfont.woff2?t=1715686154177') format('woff2'), url('iconfont.woff?t=1715686154177') format('woff'),
+  src: url('iconfont.woff2?t=1715742855393') format('woff2'), url('iconfont.woff?t=1715742855393') format('woff'),
-    url('iconfont.ttf?t=1715686154177') format('truetype'), url('iconfont.svg?t=1715686154177#iconfont') format('svg');
+    url('iconfont.ttf?t=1715742855393') format('truetype'), url('iconfont.svg?t=1715742855393#iconfont') format('svg');
 }
 .iconfont {
   font-size: 16px;
@@ -10,6 +10,9 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+.icon-icon_api-test-filled2::before {
+  content: '\e7b4';
+}
 .icon-a-icon_test-tracking_filled1::before {
   content: '\e7b3';
 }

frontend/src/assets/icon-font/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "DE、MS项目icon管理",
   "glyphs": [
+    {
+      "icon_id": "40342056",
+      "name": "icon_api-test-filled",
+      "font_class": "icon_api-test-filled2",
+      "unicode": "e7b4",
+      "unicode_decimal": 59316
+    },
     {
       "icon_id": "40334819",
       "name": "icon_test-tracking_filled",

frontend/src/assets/icon-font/iconfont.svg

@@ -14,6 +14,8 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="icon_api-test-filled2" unicode="&#59316;" d="M128 810.666667h768a42.666667 42.666667 0 0 0 42.666667-42.666667v-85.333333H85.333333V768a42.666667 42.666667 0 0 0 42.666667 42.666667z m682.666667-554.666667a170.666667 170.666667 0 1 0 0-341.333333 170.666667 170.666667 0 0 0 0 341.333333z m85.333333 341.333333a42.666667 42.666667 0 0 0 42.666667-42.666666l0.042666-298.666667a213.333333 213.333333 0 0 1-298.666666-298.666667H128a42.666667 42.666667 0 0 0-42.666667 42.666667V554.666667a42.666667 42.666667 0 0 0 42.666667 42.666666h768z m-80.256-384.085333c-4.693333 0.682667-8.96-3.157333-9.557333-8.533333l-25.002667-233.984c-0.554667-5.376 2.773333-10.24 7.466667-10.922667l16.981333-2.389333c4.693333-0.682667 8.96 3.157333 9.514667 8.533333l25.002666 233.984c0.554667 5.376-2.773333 10.24-7.466666 10.922667l-16.938667 2.389333z m75.136-63.573333l-13.994667-11.221334a10.794667 10.794667 0 0 1-2.133333-13.696l24.32-39.850666-24.746667-40.533334a10.794667 10.794667 0 0 1 2.133334-13.653333l13.994666-11.306667c3.84-3.114667 9.216-2.005333 11.946667 2.432l34.304 56.32 0.810667 1.664 0.512 1.749334a11.093333 11.093333 0 0 1-0.896 9.386666l-34.346667 56.32c-2.688 4.437333-8.021333 5.546667-11.904 2.432z m-171.946667-1.877334l-34.304-56.32-0.810666-1.706666-0.512-1.706667a11.050667 11.050667 0 0 1 0.896-9.386667l34.346666-56.32c2.688-4.48 8.021333-5.546667 11.904-2.432l13.994667 11.264a10.794667 10.794667 0 0 1 2.133333 13.653334l-24.32 39.850666 24.746667 40.533334a10.794667 10.794667 0 0 1-2.133333 13.696l-13.994667 11.264c-3.84 3.114667-9.216 2.048-11.946667-2.389334zM382.634667 512.426667H310.528L230.186667 298.666667h67.498666l10.368 35.285333h75.264L393.813333 298.666667h69.12L382.592 512.426667z m210.986666 0H483.84V298.666667h66.346667v79.36h36.138666c26.666667 0 46.506667 6.058667 59.434667 18.218666 12.970667 12.117333 19.498667 29.013333 19.498667 50.602667 0 20.992-5.973333 37.162667-17.92 48.554667-11.861333 11.349333-29.781333 17.066667-53.717334 17.066666z m175.018667 0h-66.218667V298.666667h66.218667V512.426667z m-422.784-55.466667l23.637333-76.8H322.346667l23.466666 76.8z m223.146667 11.989333c12.373333 0 20.736-2.346667 25.216-6.997333 4.48-4.693333 6.698667-10.368 6.698666-17.066667 0-6.912-2.56-12.544-7.68-16.981333-5.205333-4.437333-14.122667-6.613333-26.88-6.613333h-16.213333v47.658666h18.858667z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="a-icon_test-tracking_filled1" unicode="&#59315;" d="M981.333333 85.333333a170.666667 170.666667 0 1 0-341.333333 0 170.666667 170.666667 0 0 0 341.333333 0z m-153.514666 102.4a17.066667 17.066667 0 0 1-34.133334 0v-102.485333a17.066667 17.066667 0 0 1 4.992-12.074667l72.32-72.32a17.066667 17.066667 0 0 1 24.149334 24.106667l-67.370667 67.370667V187.733333zM341.333333 853.333333a42.666667 42.666667 0 0 1-42.666666-42.666666v-170.666667a42.538667 42.538667 0 0 1 42.666666-42.666667 42.453333 42.453333 0 0 1 41.813334 34.048C383.701333 634.197333 384 637.056 384 640V810.666667a42.666667 42.666667 0 0 1-42.666667 42.666666z m341.333334 0a42.666667 42.666667 0 0 1-42.666667-42.666666v-170.666667a42.666667 42.666667 0 1 1 85.333333 0V810.666667a42.666667 42.666667 0 0 1-42.666666 42.666666zM128 725.333333h128v-85.333333a85.333333 85.333333 0 1 1 170.666667 0V725.333333h170.666666v-85.333333a85.333333 85.333333 0 1 1 170.666667 0V725.333333h128a42.666667 42.666667 0 0 0 42.666667-42.666666v-426.666667a213.333333 213.333333 0 0 1-298.666667-298.666667H128a42.666667 42.666667 0 0 0-42.666667 42.666667V682.666667a42.666667 42.666667 0 0 0 42.666667 42.666666z m85.333333-469.333333a42.666667 42.666667 0 0 1 0-85.333333h298.666667a42.666667 42.666667 0 0 1 0 85.333333H213.333333z m0 170.666667a42.666667 42.666667 0 0 1 0-85.333334h170.666667a42.666667 42.666667 0 0 1 0 85.333334H213.333333z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="icon_functional_testing1" unicode="&#59314;" d="M256 853.333333a42.666667 42.666667 0 0 1-42.666667-42.666666v-42.666667h597.333334V810.666667a42.666667 42.666667 0 0 1-42.666667 42.666666H256zM128 640a42.666667 42.666667 0 0 0 42.666667 42.666667h682.666666a42.666667 42.666667 0 0 0 42.666667-42.666667v-42.666667H128V640zM85.333333 512a42.666667 42.666667 0 0 1-42.666666-42.666667v-512a42.666667 42.666667 0 0 1 42.666666-42.666666h853.333334a42.666667 42.666667 0 0 1 42.666666 42.666666V469.333333a42.666667 42.666667 0 0 1-42.666666 42.666667H85.333333z m192-128a64 64 0 0 1 0-128h469.333334a64 64 0 0 1 0 128h-469.333334z"  horiz-adv-x="1024" />

frontend/src/components/business/ms-menu/index.vue

@@ -391,7 +391,7 @@
             }}
           >
             <a-menu-item
-              class={['flex items-center justify-between', collapsed.value ? 'h-[56px] w-[56px]' : '']}
+              class={['flex w-full items-center justify-between', collapsed.value ? 'h-[56px] w-[56px]' : '']}
               key="personalInfo"
             >
               {collapsed.value ? (
@@ -428,10 +428,12 @@
         element?.name === SettingRouteEnum.SETTING_ORGANIZATION ? (
           <a-menu-item key={element?.name} v-slots={{ icon }} onClick={() => goto(element)}>
             <div class="inline-flex w-[calc(100%-34px)] items-center justify-between !bg-transparent">
-              {t(
+              {collapsed.value ? (
-                collapsed.value
+                <div class="text-center text-[12px] leading-[16px]">
-                  ? element?.meta?.collapsedLocale || element?.meta?.locale || ''
+                  {t(element?.meta?.collapsedLocale || element?.meta?.locale || '')}
-                  : element?.meta?.locale || ''
+                </div>
+              ) : (
+                t(element?.meta?.locale || '')
               )}
               {xPack.value
                 ? orgTrigger(element, menuSwitchOrgVisible, () => (
@@ -454,10 +456,12 @@
           </a-menu-item>
         ) : (
           <a-menu-item key={element?.name} v-slots={{ icon }} onClick={() => goto(element)}>
-            {t(
+            {collapsed.value ? (
-              collapsed.value
+              <div class="text-center text-[12px] leading-[16px]">
-                ? element?.meta?.collapsedLocale || element?.meta?.locale || ''
+                {t(element?.meta?.collapsedLocale || element?.meta?.locale || '')}
-                : element?.meta?.locale || ''
+              </div>
+            ) : (
+              t(element?.meta?.locale || '')
             )}
           </a-menu-item>
         );
@@ -475,10 +479,12 @@
                     v-slots={{
                       icon,
                       title: () =>
-                        h(
+                        h('div', {
-                          'div',
+                          innerHTML: t(
-                          t(collapsed.value ? element?.meta?.collapsedLocale || '' : element?.meta?.locale || '')
+                            collapsed.value ? element?.meta?.collapsedLocale || '' : element?.meta?.locale || ''
-                        ),
+                          ),
+                          class: collapsed.value ? 'text-[12px] leading-[16px]' : '',
+                        }),
                     }}
                     class={BOTTOM_MENU_LIST.includes(element?.name as string) ? 'arco-menu-inline--bottom' : ''}
                   >
@@ -506,6 +512,7 @@
             selected-keys={selectedKey.value}
             auto-open-selected={true}
             level-indent={34}
+            class={collapsed.value ? 'arco-menu-collapsed' : ''}
             style="height: 100%;width:100%;"
             onCollapse={setCollapse}
             trigger-props={{
@@ -608,10 +615,12 @@
     min-width: 60px;
   }
   .arco-menu-vertical.arco-menu-collapsed {
+    margin-left: 8px;
     width: 56px;
     .arco-menu-inner {
       @apply !p-0;
 
+      padding-top: 12px !important;
       padding-bottom: 32px !important;
       .arco-menu-item,
       .arco-menu-inline--bottom {
@@ -649,6 +658,12 @@
       }
     }
   }
+  .arco-menu-collapsed {
+    .arco-menu-collapse-button {
+      top: 12px;
+      right: -16px;
+    }
+  }
   .arco-menu-item-tooltip {
     @apply hidden;
   }

frontend/src/layout/default-layout.vue

@@ -187,7 +187,7 @@
         background-color: var(--color-bg-6);
       }
     }
-    :deep(.arco-menu-light) {
+    :deep(.arco-menu-light:not(.arco-menu-collapsed)) {
       background-color: transparent !important;
       .arco-menu-item {
         :hover {

frontend/src/locale/en-US/index.ts

@@ -66,7 +66,6 @@ export default {
     'menu.settings': 'Settings',
     'menu.settingsShort': 'System',
     'menu.settings.system': 'System',
-    'menu.settings.systemManagement': 'System Management',
     'menu.settings.system.usergroup': 'User Group',
     'menu.settings.system.authorizedManagement': 'Authorized',
     'menu.settings.system.pluginManager': 'Plugin',
@@ -78,7 +77,6 @@ export default {
     'menu.settings.system.parameter': 'System Parameter',
     'menu.settings.system.log': 'Log',
     'menu.settings.organization': 'Organization',
-    'menu.settings.organizationManagement': 'Organization Management',
     'menu.settings.organization.member': 'Member',
     'menu.settings.organization.userGroup': 'User Group',
     'menu.settings.organization.project': 'Project',

frontend/src/locale/zh-CN/index.ts

@@ -70,7 +70,6 @@ export default {
     'menu.settings': '系统设置',
     'menu.settingsShort': '系统',
     'menu.settings.system': '系统',
-    'menu.settings.systemManagement': '系统管理',
     'menu.settings.system.user': '用户',
     'menu.settings.system.usergroup': '用户组',
     'menu.settings.system.authorizedManagement': '授权',
@@ -82,7 +81,6 @@ export default {
     'menu.settings.system.parameter': '系统参数',
     'menu.settings.system.log': '日志',
     'menu.settings.organization': '组织',
-    'menu.settings.organizationManagement': '组织管理',
     'menu.settings.organization.member': '成员',
     'menu.settings.organization.userGroup': '用户组',
     'menu.settings.organization.project': '项目',

frontend/src/router/routes/modules/apiTest.ts

@@ -11,7 +11,7 @@ const ApiTest: AppRouteRecordRaw = {
   meta: {
     locale: 'menu.apiTest',
     collapsedLocale: 'menu.apiTestShort',
-    icon: 'icon-icon_api-test-filled1',
+    icon: 'icon-icon_api-test-filled2',
     order: 4,
     hideChildrenInMenu: true,
     roles: [

frontend/src/router/routes/modules/setting.ts

@@ -40,7 +40,6 @@ const Setting: AppRouteRecordRaw = {
       component: null,
       meta: {
         locale: 'menu.settings.system',
-        collapsedLocale: 'menu.settings.systemManagement',
         roles: [
           'SYSTEM_USER:READ',
           'SYSTEM_USER_ROLE:READ',
@@ -184,7 +183,6 @@ const Setting: AppRouteRecordRaw = {
       component: null,
       meta: {
         locale: 'menu.settings.organization',
-        collapsedLocale: 'menu.settings.organizationManagement',
         roles: [
           'ORGANIZATION_MEMBER:READ',
           'ORGANIZATION_USER_ROLE:READ',