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

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-border-color: rgba(121, 187, 255, 0.45);
-  --el-tag-text-color: #8cc5ff;
-  background: rgba(64, 158, 255, 0.18) !important;
-  border-color: rgba(121, 187, 255, 0.45) !important;
-  color: #8cc5ff !important;
+  --el-tag-bg-color: color-mix(in srgb, var(--el-color-primary) 18%, transparent);
+  --el-tag-border-color: color-mix(in srgb, var(--el-color-primary) 45%, transparent);
+  --el-tag-text-color: var(--el-color-primary-light-5);
+  background: color-mix(in srgb, var(--el-color-primary) 18%, transparent) !important;
+  border-color: color-mix(in srgb, var(--el-color-primary) 45%, transparent) !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-light-3: #79bbff;
-  --el-color-primary-light-5: #a0cfff;
-  --el-color-primary-light-7: #c6e2ff;
-  --el-color-primary-light-8: #d9ecff;
-  --el-color-primary-light-9: #ecf5ff;
-  --el-color-primary-dark-2: #337ecc;
+  --el-color-primary: #c4322a;
+  --el-color-primary-light-3: #d3615b;
+  --el-color-primary-light-5: #e19995;
+  --el-color-primary-light-7: #f0c2c0;
+  --el-color-primary-light-8: #f5d9d8;
+  --el-color-primary-light-9: #faeeed;
+  --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;
-  border-color: var(--el-color-primary-light-3) !important;
+  background: var(--el-color-primary-dark-2) !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;
-  background: #ecf5ff;
+  border-color: var(--el-color-primary-light-5);
+  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-border-color: #c6e2ff;
-  --el-tag-text-color: #2b7de9;
-  background: #ecf5ff !important;
-  border-color: #c6e2ff !important;
-  color: #2b7de9 !important;
+  --el-tag-bg-color: var(--el-color-primary-light-9);
+  --el-tag-border-color: var(--el-color-primary-light-7);
+  --el-tag-text-color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9) !important;
+  border-color: var(--el-color-primary-light-7) !important;
+  color: var(--el-color-primary) !important;
 }
 .el-tag.status-badge.is-offline {
   --el-tag-bg-color: #fdecec;