From 3bd6e972eaf27e76c364c38a141e4662b97a33ba Mon Sep 17 00:00:00 2001
From: Azure <983547216@qq.com>
Date: Thu, 18 Jun 2026 11:01:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BD=BF=E7=94=A8=E8=87=AA=E5=AE=9A?=
=?UTF-8?q?=E4=B9=89=E4=B8=BB=E9=A2=98=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.vscode/extensions.json | 6 ---
src/assets/style/base.css | 7 ++-
src/assets/style/index.ts | 1 +
src/assets/style/variables.scss | 65 +++++++++++++++++++++++++
src/components/baseLayouts/GameList.vue | 16 +++---
src/components/baseLayouts/UserBar.vue | 4 +-
src/layouts/AuthPageLayout.vue | 8 +--
src/layouts/BaseLayout.vue | 24 +++++----
src/views/auth/Login.vue | 6 +--
src/views/auth/PhoneLogin.vue | 4 +-
src/views/auth/QRCodeLogin.vue | 2 +-
src/views/auth/Register.vue | 12 ++---
12 files changed, 111 insertions(+), 44 deletions(-)
delete mode 100644 .vscode/extensions.json
create mode 100644 src/assets/style/variables.scss
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
deleted file mode 100644
index 81ba7c1..0000000
--- a/.vscode/extensions.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "recommendations": [
- "Vue.volar",
- "oxc.oxc-vscode"
- ]
-}
diff --git a/src/assets/style/base.css b/src/assets/style/base.css
index ad83b4c..daefd77 100644
--- a/src/assets/style/base.css
+++ b/src/assets/style/base.css
@@ -1,3 +1,6 @@
+/* ============================================================
+ * 全局重置样式
+ * ============================================================ */
*,
*::before,
*::after {
@@ -15,8 +18,8 @@ body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.5;
- color: #333;
- background-color: #fff;
+ color: var(--text-primary);
+ background-color: var(--bg-body);
}
#app {
diff --git a/src/assets/style/index.ts b/src/assets/style/index.ts
index 12f4bea..188a1fb 100644
--- a/src/assets/style/index.ts
+++ b/src/assets/style/index.ts
@@ -1 +1,2 @@
+import './variables.scss'
import './base.css'
diff --git a/src/assets/style/variables.scss b/src/assets/style/variables.scss
new file mode 100644
index 0000000..8bb4dc0
--- /dev/null
+++ b/src/assets/style/variables.scss
@@ -0,0 +1,65 @@
+// ============================================================
+// 亮色主题 CSS 自定义属性
+// 所有颜色和样式变量集中定义在此，组件通过 var() 引用
+// ============================================================
+
+:root {
+ // ---- 品牌色 ----
+ // 用于按钮、链接、选中态等需要突出品牌感的元素
+ --color-primary: #4f46e5; /* 主色（靛蓝）：主要按钮、链接文字、激活态 */
+ --color-primary-hover: #4338ca; /* 主色悬停：按钮 hover / focus 时加深 */
+ --color-primary-light: #eef2ff; /* 主色浅底：选中背景、标签、高亮条底色 */
+
+ // ---- 文字色 ----
+ // 按重要性分三级，覆盖主要内容到辅助提示
+ --text-primary: #0f172a; /* 一级文字：标题、正文、重要信息 */
+ --text-secondary: #475569; /* 二级文字：描述、标签、次要信息 */
+ --text-tertiary: #94a3b8; /* 三级文字：占位符、禁用态、水印 */
+ --text-inverse: #ffffff; /* 反色文字：用于深色 / 品牌色背景上 */
+ --text-link: #4f46e5; /* 链接文字色 */
+
+ // ---- 背景色 ----
+ // 从底层到顶层依次变亮，形成自然层级
+ --bg-body: #f1f5f9; /* 页面底色：最底层背景 */
+ --bg-surface: #ffffff; /* 卡片/面板背景：浮于页面之上的容器 */
+ --bg-surface-hover: #f8fafc; /* 卡片悬停：鼠标经过时的微变反馈 */
+ --bg-sidebar: #f8fafc; /* 侧边栏背景：导航区域的专用底色 */
+ --bg-topbar: #ffffff; /* 顶部栏背景：顶部导航条的底色 */
+ --bg-elevated: #ffffff; /* 浮层背景：弹出菜单、下拉面板等最高层 */
+
+ // ---- 边框色 ----
+ --border-default: #e2e8f0; /* 默认边框：卡片、输入框、分割线 */
+ --border-light: #f1f5f9; /* 浅边框：表格行间、轻分割 */
+
+ // ---- 阴影 ----
+ // 按海拔高度递进，越高的层级阴影越重
+ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); /* 微小阴影：卡片默认态 */
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07); /* 中等阴影：悬停卡片 */
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08); /* 大阴影：弹窗、抽屉 */
+
+ // ---- 圆角 ----
+ --radius-sm: 6px; /* 小圆角：标签、小按钮 */
+ --radius-md: 12px; /* 中圆角：卡片、面板、输入框 */
+ --radius-lg: 24px; /* 大圆角：模态框、大卡片 */
+
+ // ---- 间距 ----
+ --space-xs: 4px; /* 极小间距：图标与文字之间 */
+ --space-sm: 8px; /* 小间距：组件内部紧凑排列 */
+ --space-md: 16px; /* 中间距：卡片内边距、列表项间隙 */
+ --space-lg: 24px; /* 大间距：区块之间 */
+
+ // ---- 语义色 ----
+ // 传达状态和反馈，不与品牌色混淆
+ --color-success: #10b981; /* 成功：通过、完成、在线 */
+ --color-success-light: #ecfdf5; /* 成功浅底 */
+ --color-warning: #f59e0b; /* 警告：需要注意、待处理 */
+ --color-warning-light: #fffbeb; /* 警告浅底 */
+ --color-danger: #ef4444; /* 危险：错误、删除、不可逆操作 */
+ --color-danger-light: #fef2f2; /* 危险浅底 */
+ --color-info: #3b82f6; /* 信息：提示、帮助、说明 */
+ --color-info-light: #eff6ff; /* 信息浅底 */
+
+ // ---- 滚动条 ----
+ --scrollbar-thumb: #cbd5e1; /* 滚动条滑块颜色 */
+ --scrollbar-track: transparent; /* 滚动条轨道颜色 */
+}
diff --git a/src/components/baseLayouts/GameList.vue b/src/components/baseLayouts/GameList.vue
index 35bcc7a..66e6508 100644
--- a/src/components/baseLayouts/GameList.vue
+++ b/src/components/baseLayouts/GameList.vue
@@ -117,7 +117,7 @@ function selectGame(id: string) {
display: flex;
height: 100%;
width: 100%;
- color: #fff;
+ color: var(--text-primary);
}
/* ===== 左侧图标列表 ===== */
@@ -129,7 +129,7 @@ function selectGame(id: string) {
flex-shrink: 0;
padding: 8px 4px;
overflow-y: auto;
- border-right: 1px solid rgba(255, 255, 255, 0.15);
+ border-right: 1px solid var(--border-light);
}
.game-list__icon-item {
@@ -143,11 +143,11 @@ function selectGame(id: string) {
transition: background-color 0.2s ease;
&:hover {
- background-color: rgba(255, 255, 255, 0.15);
+ background-color: var(--bg-surface-hover);
}
&--active {
- background-color: rgba(255, 255, 255, 0.25);
+ background-color: var(--color-primary-light);
}
}
@@ -174,7 +174,7 @@ function selectGame(id: string) {
.game-list__detail-desc {
font-size: 14px;
line-height: 1.6;
- color: rgba(255, 255, 255, 0.8);
+ color: var(--text-secondary);
margin-bottom: 24px;
}
@@ -183,13 +183,13 @@ function selectGame(id: string) {
font-size: 16px;
font-weight: 500;
margin-bottom: 8px;
- color: rgba(255, 255, 255, 0.9);
+ color: var(--text-primary);
}
p {
font-size: 13px;
line-height: 1.7;
- color: rgba(255, 255, 255, 0.7);
+ color: var(--text-secondary);
}
}
@@ -198,7 +198,7 @@ function selectGame(id: string) {
align-items: center;
justify-content: center;
height: 100%;
- color: rgba(255, 255, 255, 0.5);
+ color: var(--text-tertiary);
font-size: 14px;
}
diff --git a/src/components/baseLayouts/UserBar.vue b/src/components/baseLayouts/UserBar.vue
index 125779e..1452672 100644
--- a/src/components/baseLayouts/UserBar.vue
+++ b/src/components/baseLayouts/UserBar.vue
@@ -17,7 +17,7 @@
-
+
@@ -42,7 +42,7 @@ import { Setting } from '@element-plus/icons-vue'
}
.user-badge :deep(.el-badge__content.is-dot) {
- background-color: #008000;
+ background-color: var(--color-success);
}
.container {
diff --git a/src/layouts/AuthPageLayout.vue b/src/layouts/AuthPageLayout.vue
index afe1ca1..8261b09 100644
--- a/src/layouts/AuthPageLayout.vue
+++ b/src/layouts/AuthPageLayout.vue
@@ -11,8 +11,8 @@
@@ -61,8 +61,8 @@
flex-direction: column;
align-items: center;
justify-content: center;
- background-color: #fff;
- border-radius: 24px;
+ background-color: var(--bg-surface);
+ border-radius: var(--radius-lg);
padding: 40px 24px 40px 24px;
width: 100%;
}
diff --git a/src/layouts/BaseLayout.vue b/src/layouts/BaseLayout.vue
index 63cbe1c..206da81 100644
--- a/src/layouts/BaseLayout.vue
+++ b/src/layouts/BaseLayout.vue
@@ -58,7 +58,8 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
width: 100%;
height: 30px;
padding: 0 12px;
- background-color: #fde68a; // amber-200
+ background-color: var(--bg-topbar);
+ border-bottom: 1px solid var(--border-default);
}
.base-layout__topbar-title {
@@ -83,7 +84,7 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
font-weight: 500;
line-height: 1;
height: 100%;
- color: #1a1a1a;
+ color: var(--text-primary);
}
.base-layout__main {
@@ -99,8 +100,9 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
position: relative;
width: 400px;
height: 100%;
- padding: 8px;
- background-color: #fcd34d; // amber-300
+ padding: var(--space-sm);
+ background-color: var(--bg-sidebar);
+ border-right: 1px solid var(--border-default);
}
.base-layout__sidebar-content {
@@ -109,7 +111,6 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
height: 100%;
width: 100%;
padding-bottom: 72px;
- background-color: #f59e0b; // amber-500
}
.base-layout__sidebar-bottom {
@@ -120,7 +121,7 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
height: 72px;
left: 0;
bottom: 0;
- padding: 8px;
+ padding: var(--space-sm);
}
.base-layout__sidebar-bottom-inner {
@@ -128,8 +129,10 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
flex: 1;
width: 100%;
height: 100%;
- border-radius: 12px;
- background-color: #92400e; // amber-800
+ border-radius: var(--radius-md);
+ background-color: var(--bg-surface);
+ box-shadow: var(--shadow-sm);
+ border: 1px solid var(--border-light);
}
.base-layout__resize-handle {
@@ -139,9 +142,10 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
top: 0;
right: 0;
cursor: ew-resize;
+ transition: background-color 0.2s ease;
&:hover {
- background-color: #d1d5db; // gray-300
+ background-color: var(--border-default);
}
}
@@ -150,6 +154,6 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
flex: 1;
width: 100%;
height: 100%;
- background-color: #fbbf24; // amber-400
+ background-color: var(--bg-body);
}
diff --git a/src/views/auth/Login.vue b/src/views/auth/Login.vue
index db98428..fa14911 100644
--- a/src/views/auth/Login.vue
+++ b/src/views/auth/Login.vue
@@ -3,7 +3,7 @@
@@ -55,7 +55,7 @@
没有账号？
- 创建账号
+ 创建账号
diff --git a/src/views/auth/PhoneLogin.vue b/src/views/auth/PhoneLogin.vue
index f67efe6..0831acd 100644
--- a/src/views/auth/PhoneLogin.vue
+++ b/src/views/auth/PhoneLogin.vue
@@ -3,7 +3,7 @@
•
diff --git a/src/views/auth/QRCodeLogin.vue b/src/views/auth/QRCodeLogin.vue
index 4e9d41d..444e036 100644
--- a/src/views/auth/QRCodeLogin.vue
+++ b/src/views/auth/QRCodeLogin.vue
@@ -3,7 +3,7 @@
diff --git a/src/views/auth/Register.vue b/src/views/auth/Register.vue
index c32978f..22accdc 100644
--- a/src/views/auth/Register.vue
+++ b/src/views/auth/Register.vue
@@ -3,7 +3,7 @@
-
+
使用 8 个或更多字符，混合大小写字母、数字
@@ -57,7 +57,7 @@
@@ -68,7 +68,7 @@
已经有账号了？
- 去登录
+ 去登录
@@ -275,7 +275,7 @@ const userRegisterFun = () => {
height: 8px;
border-radius: 12px;
position: relative;
- background-color: #e5e7eb;
+ background-color: var(--border-default);
overflow: hidden;
}
@@ -284,7 +284,7 @@ const userRegisterFun = () => {
left: 0;
top: 0;
height: 100%;
- background-color: #ef4444;
+ background-color: var(--color-danger);
transition: all 500ms;
}