style(web): 统一辣椒红主色与菜单层级

src/components/Menu/src/components/useRenderMenuItem.tsx

@@ -9,7 +9,7 @@ const { renderMenuTitle } = useRenderMenuTitle()
 export const useRenderMenuItem = () =>
   // allRouters: AppRouteRecordRaw[] = [],
   {
-    const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
+    const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/', nested = false) => {
       return routers
         .filter((v) => !v.meta?.hidden)
         .map((v) => {
@@ -27,7 +27,8 @@ export const useRenderMenuItem = () =>
                 index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}
               >
                 {{
-                  default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
+                  default: () =>
+                    renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta, !nested)
                 }}
               </ElMenuItem>
             )
@@ -35,8 +36,8 @@ export const useRenderMenuItem = () =>
             return (
               <ElSubMenu index={fullPath}>
                 {{
-                  title: () => renderMenuTitle(meta),
+                  title: () => renderMenuTitle(meta, !nested),
-                  default: () => renderMenuItem(v.children!, fullPath)
+                  default: () => renderMenuItem(v.children!, fullPath, true)
                 }}
               </ElSubMenu>
             )

src/components/Menu/src/components/useRenderMenuTitle.tsx

@@ -5,11 +5,11 @@ import { AppIcon } from '@/components/AppIcon'
 import { useI18n } from '@/hooks/web/useI18n'
 
 export const useRenderMenuTitle = () => {
-  const renderMenuTitle = (meta: RouteMeta) => {
+  const renderMenuTitle = (meta: RouteMeta, showIcon = true) => {
     const { t } = useI18n()
     const { title = 'Please set title', icon } = meta
 
-    return icon ? (
+    return icon && showIcon ? (
       <>
         <AppIcon icon={meta.icon}></AppIcon>
         <span class="v-menu__title overflow-hidden overflow-ellipsis whitespace-nowrap">

src/components/Setting/src/Setting.vue

@@ -195,7 +195,7 @@ const themeChange = () => {
       <ColorRadioPicker
         v-model="systemTheme"
         :schema="[
-          '#409eff',
+          '#c4322a',
           '#009688',
           '#536dfe',
           '#ff5c93',

src/store/modules/app.ts

@@ -67,7 +67,7 @@ export const useAppStore = defineStore('app', {
       currentSize: 'default', // 组件尺寸
       theme: {
         // 主题色
-        elColorPrimary: '#409eff',
+        elColorPrimary: '#c4322a',
         // 左侧菜单边框颜色
         leftMenuBorderColor: 'inherit',
         // 左侧菜单背景颜色
@@ -343,6 +343,10 @@ export const useAppStore = defineStore('app', {
   persist: {
     afterRestore: (context) => {
       context.store.title = import.meta.env.VITE_APP_TITLE
+      if (context.store.theme?.elColorPrimary !== '#c4322a') {
+        context.store.setTheme({ elColorPrimary: '#c4322a' })
+        context.store.setCssVarTheme()
+      }
     }
   }
 })

src/styles/business/dark.css

@@ -28,12 +28,12 @@ html.dark .role-card {
 
 html.dark .stat-icon,
 html.dark .role-icon {
-  background: rgb(64 158 255 / 16%) !important;
+  background: color-mix(in srgb, var(--el-color-primary) 18%, transparent) !important;
   color: var(--el-color-primary) !important;
 }
 
 html.dark .role-active {
-  background: rgb(64 158 255 / 12%);
+  background: color-mix(in srgb, var(--el-color-primary) 14%, transparent);
   border-color: var(--el-color-primary);
 }
 
@@ -106,12 +106,12 @@ html.dark .el-tag.status-badge.is-draft {
   color: #c0c4cc !important;
 }
 html.dark .el-tag.status-badge.is-pending {
-  --el-tag-bg-color: rgba(64, 158, 255, 0.18);
+  --el-tag-bg-color: color-mix(in srgb, var(--el-color-primary) 18%, transparent);
-  --el-tag-border-color: rgba(121, 187, 255, 0.45);
+  --el-tag-border-color: color-mix(in srgb, var(--el-color-primary) 45%, transparent);
-  --el-tag-text-color: #8cc5ff;
+  --el-tag-text-color: var(--el-color-primary-light-5);
-  background: rgba(64, 158, 255, 0.18) !important;
+  background: color-mix(in srgb, var(--el-color-primary) 18%, transparent) !important;
-  border-color: rgba(121, 187, 255, 0.45) !important;
+  border-color: color-mix(in srgb, var(--el-color-primary) 45%, transparent) !important;
-  color: #8cc5ff !important;
+  color: var(--el-color-primary-light-5) !important;
 }
 html.dark .el-tag.status-badge.is-offline {
   --el-tag-bg-color: rgba(245, 108, 108, 0.18);

src/styles/business/index.css

@@ -8,4 +8,5 @@
 @import './console.css';
 @import './creator-center.css';
 @import './layout.css';
+@import './menu.css';
 @import './dark.css';

src/styles/business/menu.css

@@ -0,0 +1,131 @@
+/* 左侧菜单：统一行高、缩进、图标和选中态。 */
+#v-menu .el-menu {
+  padding: 4px 0;
+  background: transparent;
+}
+
+#v-menu .el-menu-item,
+#v-menu .el-sub-menu__title {
+  height: 44px;
+  padding-left: 8px !important;
+  margin: 4px 8px;
+  overflow: hidden;
+  color: var(--left-menu-text-color);
+  font-size: 14px;
+  line-height: 44px;
+  border-radius: 8px;
+  transition:
+    color var(--transition-time-02),
+    background-color var(--transition-time-02);
+}
+
+#v-menu .el-menu--inline {
+  padding-left: 0 !important;
+}
+
+#v-menu .el-menu--inline .el-menu-item,
+#v-menu .el-menu--inline .el-sub-menu__title {
+  height: 40px;
+  padding-left: 0 !important;
+  margin: 3px 8px 3px 42px;
+  line-height: 40px;
+}
+
+#v-menu .el-menu--inline .app-icon {
+  display: none;
+}
+
+#v-menu .el-menu-item .app-icon,
+#v-menu .el-sub-menu__title .app-icon {
+  flex: 0 0 18px;
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}
+
+#v-menu .el-menu-item:hover,
+#v-menu .el-sub-menu__title:hover,
+#v-menu .el-sub-menu.is-opened > .el-sub-menu__title,
+#v-menu .el-sub-menu.is-active > .el-sub-menu__title,
+#v-menu .el-menu-item.is-active {
+  color: var(--el-color-primary) !important;
+  background-color: var(--el-color-primary-light-9) !important;
+}
+
+#v-menu .el-menu .el-menu {
+  background: transparent;
+}
+
+#v-menu .el-menu--collapse .el-menu-item,
+#v-menu .el-menu--collapse .el-sub-menu__title {
+  justify-content: center;
+  padding: 0 !important;
+  margin: 4px 6px;
+}
+
+#v-menu .el-menu--collapse .app-icon {
+  margin-right: 0;
+}
+
+html.dark #v-menu .el-menu-item:hover,
+html.dark #v-menu .el-sub-menu__title:hover {
+  color: #fff !important;
+  background-color: color-mix(in srgb, var(--el-color-primary) 72%, transparent) !important;
+}
+
+html.dark #v-menu .el-sub-menu.is-opened > .el-sub-menu__title,
+html.dark #v-menu .el-sub-menu.is-active > .el-sub-menu__title,
+html.dark #v-menu .el-menu-item.is-active {
+  color: #fff !important;
+  background-color: var(--app-primary-strong) !important;
+}
+
+.v-menu-popper--vertical,
+.v-menu-popper--horizontal {
+  padding: 4px;
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 8px;
+  background: var(--el-bg-color-overlay);
+}
+
+.v-menu-popper--vertical .el-menu-item,
+.v-menu-popper--vertical .el-sub-menu__title,
+.v-menu-popper--horizontal .el-menu-item,
+.v-menu-popper--horizontal .el-sub-menu__title {
+  height: 40px;
+  padding-left: 16px !important;
+  margin: 2px 4px;
+  color: var(--el-text-color-regular);
+  font-size: 14px;
+  line-height: 40px;
+  border-radius: 8px;
+}
+
+.v-menu-popper--vertical .app-icon,
+.v-menu-popper--horizontal .app-icon {
+  flex: 0 0 18px;
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}
+
+.v-menu-popper--vertical .el-menu-item:hover,
+.v-menu-popper--horizontal .el-menu-item:hover,
+.v-menu-popper--vertical .el-menu-item.is-active,
+.v-menu-popper--horizontal .el-menu-item.is-active {
+  color: var(--el-color-primary) !important;
+  background-color: var(--el-color-primary-light-9) !important;
+}
+
+html.dark .v-menu-popper--vertical,
+html.dark .v-menu-popper--horizontal {
+  border-color: var(--el-border-color);
+}
+
+html.dark .v-menu-popper--vertical .el-menu-item:hover,
+html.dark .v-menu-popper--horizontal .el-menu-item:hover,
+html.dark .v-menu-popper--vertical .el-menu-item.is-active,
+html.dark .v-menu-popper--horizontal .el-menu-item.is-active {
+  color: #fff !important;
+  background-color: var(--app-primary-strong) !important;
+}

src/styles/business/theme.css

@@ -15,13 +15,13 @@
   font-family: var(--font-body);
   color: var(--el-text-color-primary);
   background: var(--el-bg-color-page);
-  --el-color-primary: #409eff;
+  --el-color-primary: #c4322a;
-  --el-color-primary-light-3: #79bbff;
+  --el-color-primary-light-3: #d3615b;
-  --el-color-primary-light-5: #a0cfff;
+  --el-color-primary-light-5: #e19995;
-  --el-color-primary-light-7: #c6e2ff;
+  --el-color-primary-light-7: #f0c2c0;
-  --el-color-primary-light-8: #d9ecff;
+  --el-color-primary-light-8: #f5d9d8;
-  --el-color-primary-light-9: #ecf5ff;
+  --el-color-primary-light-9: #faeeed;
-  --el-color-primary-dark-2: #337ecc;
+  --el-color-primary-dark-2: #9d2822;
   --purple: var(--el-color-primary);
   --muted: #909399;
   --line: #e4e7ed;
@@ -30,6 +30,14 @@ body {
   background: var(--el-bg-color-page);
   color: var(--el-text-color-primary);
 }
+.el-button--primary {
+  --el-button-bg-color: var(--el-color-primary);
+  --el-button-border-color: var(--el-color-primary);
+  --el-button-hover-bg-color: var(--el-color-primary-dark-2);
+  --el-button-hover-border-color: var(--el-color-primary-dark-2);
+  --el-button-active-bg-color: var(--el-color-primary-dark-2);
+  --el-button-active-border-color: var(--el-color-primary-dark-2);
+}
 .eyebrow {
   letter-spacing: 0.7px;
   color: #9298a1;
@@ -52,8 +60,8 @@ body {
   box-shadow: none !important;
 }
 .primary-button:hover {
-  background: var(--el-color-primary-light-3) !important;
+  background: var(--el-color-primary-dark-2) !important;
-  border-color: var(--el-color-primary-light-3) !important;
+  border-color: var(--el-color-primary-dark-2) !important;
 }
 .stats-grid {
   gap: 12px;
@@ -73,7 +81,7 @@ body {
 }
 .stat-icon {
   border-radius: var(--app-radius-sm);
-  background: #ecf5ff !important;
+  background: var(--el-color-primary-light-9) !important;
   color: var(--el-color-primary) !important;
 }
 .stat-value {
@@ -97,7 +105,7 @@ body {
   color: #61738a;
 }
 .chart-svg path:first-of-type {
-  fill: #d9ecff;
+  fill: var(--el-color-primary-light-8);
 }
 .chart-svg path:last-of-type {
   stroke: var(--el-color-primary);
@@ -241,12 +249,12 @@ body {
   border-color: #e7e9ec;
 }
 .role-active {
-  border-color: #a0cfff;
+  border-color: var(--el-color-primary-light-5);
-  background: #ecf5ff;
+  background: var(--el-color-primary-light-9);
 }
 .role-icon {
   border-radius: var(--app-radius-sm);
-  background: #ecf5ff !important;
+  background: var(--el-color-primary-light-9) !important;
   color: var(--el-color-primary) !important;
 }
 .role-badge {
@@ -314,12 +322,12 @@ body {
   color: #6b7280 !important;
 }
 .el-tag.status-badge.is-pending {
-  --el-tag-bg-color: #ecf5ff;
+  --el-tag-bg-color: var(--el-color-primary-light-9);
-  --el-tag-border-color: #c6e2ff;
+  --el-tag-border-color: var(--el-color-primary-light-7);
-  --el-tag-text-color: #2b7de9;
+  --el-tag-text-color: var(--el-color-primary);
-  background: #ecf5ff !important;
+  background: var(--el-color-primary-light-9) !important;
-  border-color: #c6e2ff !important;
+  border-color: var(--el-color-primary-light-7) !important;
-  color: #2b7de9 !important;
+  color: var(--el-color-primary) !important;
 }
 .el-tag.status-badge.is-offline {
   --el-tag-bg-color: #fdecec;

src/views/Login/Login.vue

@@ -129,7 +129,7 @@ const themeChange = () => {
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.08em;
-  color: #d9ecff !important;
+  color: var(--el-color-primary-light-8) !important;
 }
 
 .login-panel {

src/views/permission/MenuManagementView.vue

@@ -75,7 +75,7 @@ const { treeData, loading, form, parentOptions, resetForm, selectNode, saveMenu,
         <el-form-item label="权限标识">
           <el-input v-model="form.permissionCode" placeholder="例如 drama:list" />
         </el-form-item>
-        <el-form-item v-if="form.type !== 'BUTTON'" label="菜单图标">
+        <el-form-item v-if="form.type === 'CATALOG'" label="菜单图标">
           <el-select v-model="form.icon" clearable placeholder="请选择">
             <el-option v-for="icon in menuIconNames" :key="icon" :label="icon" :value="icon" />
           </el-select>

src/views/permission/composables/useMenuManagement.js

@@ -93,7 +93,7 @@ export function useMenuManagement() {
       routePath: raw.path || '',
       routeName: raw.name || '',
       component: raw.component === '#' ? '' : raw.component || '',
-      icon: normalizeAppIcon(raw.icon),
+      icon: raw.type === 'CATALOG' ? normalizeAppIcon(raw.icon) : '',
       permissionCode: raw.permissionCode || '',
       type: raw.type || 'MENU',
       sort: raw.sort ?? 1,
@@ -113,7 +113,7 @@ export function useMenuManagement() {
       routePath: form.routePath.trim(),
       routeName: form.routeName.trim(),
       component: form.type === 'CATALOG' ? '#' : form.component.trim(),
-      icon: form.type === 'BUTTON' ? '' : normalizeAppIcon(form.icon),
+      icon: form.type === 'CATALOG' ? normalizeAppIcon(form.icon) : '',
       permissionCode: form.permissionCode.trim(),
       type: form.type,
       sort: Number(form.sort) || 1,