feat: 优化菜单 tag 配置、初始菜单路由主题

src/components/SimpleMenu/src/SimpleMenuTag.vue

@@ -5,9 +5,10 @@
         :dot="!getContent"
         :count="getContent"
         :number-style="{
-            color: 'f8f8f8',
             lineHeight: '18px',
-            boxShadow: `0 0 0 1px #979797`,
+            boxShadow: `0 0 0 2px #fff`,
+            color: item.tag?.color ?? 'f8f8f8',
+            backgroundColor: item.tag?.background ?? '#ff4d4f',
         }"
     />
 </template>

src/router/routes/modules/demo/tools.ts

@@ -76,6 +76,7 @@ const tools: AppRouteModule = {
                     component: () => import('/@/views/demo/tools/online/form/index.vue'),
                     tag: {
                         content: '开发中',
+                        background: '#f50',
                     },
                 },
                 {

src/router/types.ts

@@ -21,9 +21,10 @@ export interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
 }
 
 export interface MenuTag {
-    type?: 'default' | 'warning' | 'error' | 'success' | 'processing'
-    content?: string
     dot?: boolean
+    content?: string
+    color?: string
+    background?: string
 }
 
 export interface Menu {

src/settings/projectSetting.ts

@@ -79,7 +79,7 @@ const setting: ProjectConfig = {
     // Menu configuration
     menuSetting: {
         // sidebar menu bg color
-        bgColor: SIDE_BAR_BG_COLOR_LIST[3],
+        bgColor: SIDE_BAR_BG_COLOR_LIST[0],
         //  Whether to fix the left menu
         fixed: true,
         // Menu collapse
@@ -100,7 +100,7 @@ const setting: ProjectConfig = {
         // Menu mode
         mode: MenuModeEnum.INLINE,
         // Menu type
-        type: MenuTypeEnum.MIX,
+        type: MenuTypeEnum.SIDEBAR,
         // Menu theme
         theme: ThemeEnum.LIGHT,
         // Split menu

types/vue-router.d.ts

@@ -49,9 +49,14 @@ declare module 'vue-router' {
         autoFullScreen?: boolean
         // tag
         tag?: {
-            type?: 'primary' | 'error' | 'warn' | 'success'
-            content?: string
+            // 是否以小圆点显示
             dot?: boolean
+            // tag 文本
+            content?: string
+            // tag 颜色
+            color?: string
+            // tag 背景色
+            background?: string
         }
     }
 }