From 4383e9956e0d67ba6b0eb6f43bd7244718bb22f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Fri, 31 Jul 2026 20:50:18 +0800
Subject: [PATCH] =?UTF-8?q?style(top-bar):=20=E7=BB=99=E9=A1=B6=E9=83=A8?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=A0=8F=E6=A0=87=E9=A2=98=E5=8C=BA=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E8=83=8C=E6=99=AF=E6=9D=A1=E4=BB=A5=E5=8C=BA=E5=88=86?=
 =?UTF-8?q?=E8=A7=86=E8=A7=89=E5=B1=82=E6=AC=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 顶部状态栏 `.top-bar__title` 增加品牌色淡底背景和左侧主色竖条
- 文字颜色调整为深色，保持搜索框可读性
- 调整主题相关样式，处理 light 主题和 dark 主题下背景条效果差异
- 优化多个主题下 Logo 背景和文字颜色，提升整体视觉一致性
- 修改欢迎页背景颜色及相关元素颜色，增强视觉层次感
- 调整部分组件和布局的内边距与边框颜色，提升界面细节表现
- 隐藏顶部主题切换项，调整 hover 背景颜色以适应新视觉风格
---
 .workbuddy/memory/2026-07-31.md         |  7 +++++++
 src/components/basic-container/main.vue |  2 +-
 src/page/index/top/index.vue            |  4 ++--
 src/styles/common.scss                  |  2 +-
 src/styles/element-ui.scss              |  2 +-
 src/styles/theme/beautiful.scss         |  1 -
 src/styles/theme/d2.scss                |  2 --
 src/styles/theme/index.scss             | 12 ++++++------
 src/styles/top.scss                     | 22 ++++++++++++----------
 src/views/wel/index.vue                 | 23 ++++++++++++-----------
 10 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/.workbuddy/memory/2026-07-31.md b/.workbuddy/memory/2026-07-31.md
index 5dedb41..44282f8 100644
--- a/.workbuddy/memory/2026-07-31.md
+++ b/.workbuddy/memory/2026-07-31.md
@@ -115,3 +115,10 @@
 - **新增规则**：`.avue-crud__dialog .el-dialog__body { max-height: calc(100vh - 200px); overflow-y: auto; }`
 - **效果**：全站所有 Avue CRUD 弹窗（含 process-config、cargo-type）的 body 在 `calc(100vh - 200px)` 内滚动，内容超长时在窗内滚动而非撑爆整窗；矮弹窗不受影响（max-height 仅为上限）。
 - **验证**：已 `pnpm build` 后台运行验证全站编译。
+
+## 顶部状态栏标题区加背景条
+
+- **需求**：给顶部状态栏（`.top-bar__title` 中间区域）加一条背景条，与白色头部区分。
+- **文件**：`src/styles/top.scss` 的 `.top-bar__title` 规则（原来背景是纯白 `#fff`，看不出边界）
+- **改动**：`background: rgba(64,158,255,0.12)`（品牌色淡底）+ `border-left: 4px solid #409eff`（左侧主色竖条），沿用项目主色 `#409eff`；文字保持深色 `rgba(0,0,0,0.85)`、搜索框可读。
+- **注意**：默认 light 主题（go/d2 等白底头部）效果好；dark 主题头部 `#2c3643` 下淡蓝条可能略冲突（原 `#fff` 背景在 dark 下本就冲突，属历史遗留），如需可给 dark 主题单独覆盖。
diff --git a/src/components/basic-container/main.vue b/src/components/basic-container/main.vue
index a3e9c40..34e3719 100644
--- a/src/components/basic-container/main.vue
+++ b/src/components/basic-container/main.vue
@@ -35,7 +35,7 @@ export default {
 
 <style lang="scss">
 .basic-container {
-  padding: 10px 6px;
+  padding: 0 6px;
   box-sizing: border-box;
 
   &--block {
diff --git a/src/page/index/top/index.vue b/src/page/index/top/index.vue
index 3ba4f62..e5f42c9 100644
--- a/src/page/index/top/index.vue
+++ b/src/page/index/top/index.vue
@@ -17,7 +17,7 @@
       <div v-if="setting.color" class="top-bar__item">
         <top-color></top-color>
       </div>
-      <div v-if="setting.theme" class="top-bar__item">
+      <div v-if="setting.theme" class="top-bar__item" style="display: none;">
         <top-theme></top-theme>
       </div>
       <div v-if="setting.lock" class="top-bar__item">
@@ -372,7 +372,7 @@ export default {
 
   &:hover,
   &:focus {
-    background-color: rgba(0, 0, 0, 0.04);
+    background-color: rgba(255, 255, 255, 0.15);
   }
 
   .top-bar__img {
diff --git a/src/styles/common.scss b/src/styles/common.scss
index edc9b68..3217158 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -119,7 +119,7 @@ a {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
-  margin-bottom: 6px;
+  //margin-bottom: 6px;
   padding: 12px;
 }
 
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 4453f4a..def5e1d 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -274,7 +274,7 @@
   justify-content: flex-end;
   width: 100%;
   box-sizing: border-box;
-  padding: 10px 0 !important;
+  padding: 16px 0 !important;
 }
 
 .avue-crud__pagination .el-pagination,
diff --git a/src/styles/theme/beautiful.scss b/src/styles/theme/beautiful.scss
index 44b903c..e1fa91b 100644
--- a/src/styles/theme/beautiful.scss
+++ b/src/styles/theme/beautiful.scss
@@ -26,7 +26,6 @@
   }
 
   .avue-logo {
-    background: #fff !important;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   }
 
diff --git a/src/styles/theme/d2.scss b/src/styles/theme/d2.scss
index e4d31a6..a3c94a3 100644
--- a/src/styles/theme/d2.scss
+++ b/src/styles/theme/d2.scss
@@ -1,7 +1,6 @@
 .theme-d2 {
   .avue-logo {
     color: rgba(0, 0, 0, 0.85);
-    background-color: #fff;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 
     .avue-logo_title {
@@ -11,7 +10,6 @@
   }
 
   .avue-top {
-    background-color: #fff;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   }
 
diff --git a/src/styles/theme/index.scss b/src/styles/theme/index.scss
index d6a96bf..4e44b2b 100644
--- a/src/styles/theme/index.scss
+++ b/src/styles/theme/index.scss
@@ -47,17 +47,17 @@
 .theme-cool,
 .theme-beautiful {
   .avue-logo {
-    background: #fff !important;
-    background-color: #fff !important;
-    color: rgba(0, 0, 0, 0.85);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    background: #419eff !important;
+    background-color: #419eff !important;
+    color: #fff;
+    box-shadow: none;
 
     .avue-logo_title,
     .avue-logo_subtitle,
     .logo-title {
-      color: rgba(0, 0, 0, 0.85);
+      color: #fff;
       background-image: none;
-      -webkit-text-fill-color: rgba(0, 0, 0, 0.85);
+      -webkit-text-fill-color: #fff;
     }
   }
 }
diff --git a/src/styles/top.scss b/src/styles/top.scss
index 64ae25c..1f0cdf7 100644
--- a/src/styles/top.scss
+++ b/src/styles/top.scss
@@ -20,10 +20,10 @@
 
 .avue-breadcrumb {
   height: 100%;
-  color: rgba(0, 0, 0, 0.65);
+  color: #fff;
 
   i {
-    color: rgba(0, 0, 0, 0.65);
+    color: #fff;
     font-size: 30px !important;
   }
 
@@ -73,7 +73,7 @@
   height: 30px;
   border-radius: 100%;
   box-sizing: border-box;
-  border: 1px solid #eee;
+  border: 1px solid rgba(255, 255, 255, 0.5);
   vertical-align: middle;
 }
 
@@ -96,7 +96,7 @@
   right: 10px;
   display: flex;
   align-items: center;
-  color: rgba(0, 0, 0, 0.85);
+  color: #fff;
 
   i,
   .el-icon,
@@ -106,7 +106,7 @@
   }
 
   .el-color-picker__trigger {
-    border-color: rgba(0, 0, 0, 0.15);
+    border-color: rgba(255, 255, 255, 0.4);
   }
 
   .el-color-picker__icon {
@@ -132,24 +132,26 @@
   height: 100%;
   padding-left: 50px;
   box-sizing: border-box;
-  background: #fff;
+  // 顶部状态栏背景条：品牌色淡底 + 左侧主色竖条，与白色头部区分
+  background: #419eff;
+  //border-left: 4px solid #409eff;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: inherit;
   font-weight: 500;
-  color: rgba(0, 0, 0, 0.85);
+  color: #fff;
 }
 
 .avue-logo {
   height: variables.$top_height;
   line-height: variables.$top_height;
-  background-color: #fff;
+  background-color: #419eff;
   font-size: 20px;
   overflow: hidden;
   box-sizing: border-box;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  color: rgba(0, 0, 0, 0.85);
+  box-shadow: none;
+  color: #fff;
 
   &_title {
     display: block;
diff --git a/src/views/wel/index.vue b/src/views/wel/index.vue
index d9fcf2b..841c96e 100644
--- a/src/views/wel/index.vue
+++ b/src/views/wel/index.vue
@@ -311,12 +311,12 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: linear-gradient(135deg, #409eff 0%, #1677ff 50%, #0958d9 100%);
+  background: #ffffff;
   border-radius: 12px;
   padding: 26px 30px;
-  color: #fff;
+  color: #303133;
   margin-bottom: 16px;
-  box-shadow: 0 6px 24px rgba(64, 158, 255, 0.3);
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
   position: relative;
   overflow: hidden;
 }
@@ -331,27 +331,27 @@ export default {
 .wel-banner__circle {
   position: absolute;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.07);
+  background: rgba(115, 209, 61, 0.07);
   &--1 {
     width: 200px;
     height: 200px;
     right: -40px;
     top: -60px;
-    background: rgba(255, 255, 255, 0.1);
+    background: rgba(115, 209, 61, 0.1);
   }
   &--2 {
     width: 140px;
     height: 140px;
     right: 120px;
     bottom: -50px;
-    background: rgba(255, 255, 255, 0.06);
+    background: rgba(115, 209, 61, 0.06);
   }
   &--3 {
     width: 80px;
     height: 80px;
     left: 25%;
     top: -20px;
-    background: rgba(255, 255, 255, 0.05);
+    background: rgba(115, 209, 61, 0.05);
   }
 }
 .wel-banner__dot-grid {
@@ -366,9 +366,9 @@ export default {
     width: 5px;
     height: 5px;
     border-radius: 50%;
-    background: rgba(255, 255, 255, 0.2);
-    &:nth-child(3n) { background: rgba(255, 255, 255, 0.35); }
-    &:nth-child(3n + 1) { background: rgba(255, 255, 255, 0.12); }
+    background: rgba(115, 209, 61, 0.2);
+    &:nth-child(3n) { background: rgba(115, 209, 61, 0.35); }
+    &:nth-child(3n + 1) { background: rgba(115, 209, 61, 0.12); }
   }
 }
 .wel-banner__left {
@@ -382,7 +382,8 @@ export default {
   width: 56px;
   height: 56px;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba(115, 209, 61, 0.15);
+  color: #389e0d;
   display: flex;
   align-items: center;
   justify-content: center;