Henry_Du/BYW-VoiceHub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): 补齐浅色主题遗漏：index 后段弹窗 + dashboard 根 + 改密页根
构建并部署 BYW VoiceHub / Preflight 语法与构建检查 (push) Successful in 2m10s
Details
构建并部署 BYW VoiceHub / 构建并推送容器镜像 (push) Successful in 10m4s
Details
构建并部署 BYW VoiceHub / 部署到生产服务器 (push) Successful in 6s
Details

Browse Source 
- index.vue 规则弹窗 modal-content/close/rule/ripple/login-required 全改为语义化 var()
- index.vue 年度报告 year-review 卡片/按钮/brand/badge/title 全部变量化
- dashboard.vue admin-layout 根 #0a0a0a/#fff 改为 var(--bg/text-*)
- change-password.vue 改密页 auth-layout 容器、表单区、back-link 全改为浅色变量
This commit is contained in:
Henry_Du
2026-09-12 14:12:10 +08:00
parent bf7c40c4fe
commit b1c3af84de
3 changed files with 66 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/change-password.vue
+13 -12
View File
@@ -132,7 +132,7 @@ onMounted(async () => {
<style scoped> <style scoped>
.auth-layout { .auth-layout {
min-height: 100vh; min-height: 100vh;
background: #0a0a0a; background: var(--bg-primary, #ffffff);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -142,13 +142,14 @@ onMounted(async () => {
.auth-container { .auth-container {
width: 100%; width: 100%;
max-width: 1200px; max-width: 1200px;
background: #111111; background: var(--surface-primary, var(--bg-primary, #ffffff));
border-radius: 24px; border-radius: 24px;
border: 1px solid #1f1f1f; border: 1px solid var(--border-primary, #e5e7eb);
overflow: hidden; overflow: hidden;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
min-height: 600px; min-height: 600px;
box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.1);
} }
.info-section { .info-section {
@@ -266,7 +267,7 @@ onMounted(async () => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #111111; background: var(--surface-primary, var(--bg-primary, #ffffff));
} }
.form-container { .form-container {
@@ -285,13 +286,13 @@ onMounted(async () => {
.form-header h2 { .form-header h2 {
font-size: 28px; font-size: 28px;
font-weight: 700; font-weight: 700;
color: #ffffff; color: var(--text-primary, #1a2332);
margin: 0 0 8px 0; margin: 0 0 8px 0;
} }
.form-header p { .form-header p {
font-size: 16px; font-size: 16px;
color: #888888; color: var(--text-secondary, #4a5568);
margin: 0; margin: 0;
} }
@@ -305,10 +306,10 @@ onMounted(async () => {
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 12px 20px; padding: 12px 20px;
background: #1a1a1a; background: var(--surface-secondary, var(--bg-secondary, #f7fafc));
border: 1px solid #2a2a2a; border: 1px solid var(--border-primary, #e5e7eb);
border-radius: 8px; border-radius: 8px;
color: #cccccc; color: var(--text-secondary, #4a5568);
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@@ -316,9 +317,9 @@ onMounted(async () => {
} }
.back-link:hover { .back-link:hover {
background: #2a2a2a; background: var(--surface-tertiary, var(--bg-tertiary, #edf2f7));
color: #ffffff; color: var(--text-primary, #1a2332);
border-color: #3a3a3a; border-color: var(--border-secondary, #cbd5e1);
} }
.back-link svg { .back-link svg {
app/pages/dashboard.vue
+4 -4
View File
@@ -548,8 +548,8 @@ onUnmounted(() => {
.admin-layout { .admin-layout {
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
background: #0a0a0a; background: var(--bg-primary, #ffffff);
color: #ffffff; color: var(--text-primary, #1a2332);
position: relative; position: relative;
} }
@@ -561,11 +561,11 @@ onUnmounted(() => {
background: transparent; background: transparent;
} }
.custom-scrollbar::-webkit-scrollbar-thumb { .custom-scrollbar::-webkit-scrollbar-thumb {
background: #27272a; background: var(--border-primary, #cbd5e1);
border-radius: 10px; border-radius: 10px;
} }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { .custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #3f3f46; background: var(--border-secondary, #94a3b8);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
app/pages/index.vue
+49 -48
View File
@@ -1912,7 +1912,7 @@ if (
background-color: var(--error, #ef4444); background-color: var(--error, #ef4444);
color: #ffffff; color: #ffffff;
font-size: 10px; font-size: 10px;
font-weight: bold; font-weight: 700;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -3179,10 +3179,10 @@ if (
/* 弹窗内容 */ /* 弹窗内容 */
.modal-content { .modal-content {
background: linear-gradient(135deg, #1a1b24 0%, #121318 100%); background: var(--surface-primary, var(--bg-primary, #ffffff));
border-radius: 20px; border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--border-primary, #e5e7eb);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-card, 0 25px 50px -12px rgba(0, 0, 0, 0.12));
max-width: 420px; max-width: 420px;
width: 90%; width: 90%;
overflow: hidden; overflow: hidden;
@@ -3206,7 +3206,7 @@ if (
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 24px 28px 16px; padding: 24px 28px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid var(--border-secondary, #f1f5f9);
} }
.modal-header h2 { .modal-header h2 {
@@ -3217,7 +3217,7 @@ if (
sans-serif; sans-serif;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
color: #ffffff; color: var(--text-primary, #1a2332);
margin: 0; margin: 0;
letter-spacing: 0.02em; letter-spacing: 0.02em;
} }
@@ -3227,9 +3227,9 @@ if (
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 50%; border-radius: 50%;
background: rgba(255, 255, 255, 0.08); background: var(--surface-tertiary, var(--bg-tertiary, #f1f5f9));
border: none; border: none;
color: rgba(255, 255, 255, 0.6); color: var(--text-tertiary, #64748b);
font-size: 24px; font-size: 24px;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
@@ -3240,8 +3240,8 @@ if (
} }
.close-button:hover { .close-button:hover {
background: rgba(255, 255, 255, 0.15); background: var(--border-secondary, #e2e8f0);
color: #ffffff; color: var(--text-primary, #1a2332);
transform: rotate(90deg); transform: rotate(90deg);
} }
@@ -3268,24 +3268,24 @@ if (
gap: 0.5rem; gap: 0.5rem;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #ffffff; color: var(--text-primary, #1a2332);
margin: 0; margin: 0;
} }
.rules-icon { .rules-icon {
color: #3b82f6; color: var(--primary, #0b5afe);
} }
.rules-text { .rules-text {
font-size: 14px; font-size: 14px;
color: rgba(255, 255, 255, 0.6); color: var(--text-secondary, #4a5568);
line-height: 1.6; line-height: 1.6;
margin: 0; margin: 0;
} }
.guidelines-content { .guidelines-content {
font-size: 14px; font-size: 14px;
color: rgba(255, 255, 255, 0.6); color: var(--text-secondary, #4a5568);
line-height: 1.6; line-height: 1.6;
} }
@@ -3298,31 +3298,31 @@ if (
.rule-item { .rule-item {
display: flex; display: flex;
font-size: 14px; font-size: 14px;
color: rgba(255, 255, 255, 0.6); color: var(--text-secondary, #4a5568);
line-height: 1.5; line-height: 1.5;
} }
.rule-item span { .rule-item span {
margin-right: 0.5rem; margin-right: 0.5rem;
color: rgba(255, 255, 255, 0.3); color: var(--text-disabled, #94a3b8);
font-weight: 600; font-weight: 600;
} }
/* 年度报告弹窗 */ /* 年度报告弹窗 */
.year-review-overlay { .year-review-overlay {
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
background: rgba(0, 0, 0, 0.4); background: rgba(15, 23, 42, 0.35);
} }
.year-review-card { .year-review-card {
position: relative; position: relative;
width: 90%; width: 90%;
max-width: 400px; max-width: 400px;
background: #12121a; background: var(--surface-primary, var(--bg-primary, #ffffff));
border-radius: 32px; border-radius: 32px;
overflow: hidden; overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--border-primary, #e5e7eb);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-card, 0 25px 50px -12px rgba(0, 0, 0, 0.12));
animation: card-appear 0.6s cubic-bezier(0.16, 1, 0.3, 1); animation: card-appear 0.6s cubic-bezier(0.16, 1, 0.3, 1);
} }
@@ -3339,7 +3339,7 @@ if (
.card-pattern { .card-pattern {
position: absolute; position: absolute;
inset: 0; inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
background-size: 20px 20px; background-size: 20px 20px;
opacity: 0.5; opacity: 0.5;
} }
@@ -3351,9 +3351,9 @@ if (
width: 36px; width: 36px;
height: 36px; height: 36px;
border-radius: 12px; border-radius: 12px;
background: rgba(255, 255, 255, 0.05); background: var(--surface-tertiary, var(--bg-tertiary, #f1f5f9));
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--border-secondary, #f1f5f9);
color: rgba(255, 255, 255, 0.4); color: var(--text-tertiary, #64748b);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -3363,8 +3363,8 @@ if (
} }
.card-close:hover { .card-close:hover {
background: rgba(255, 255, 255, 0.1); background: var(--border-secondary, #e2e8f0);
color: #fff; color: var(--text-primary, #1a2332);
transform: translateY(2px); transform: translateY(2px);
} }
@@ -3379,9 +3379,9 @@ if (
display: inline-block; display: inline-block;
padding: 4px 12px; padding: 4px 12px;
background: rgba(139, 92, 246, 0.1); background: rgba(139, 92, 246, 0.1);
border: 1px solid rgba(139, 92, 246, 0.2); border: 1px solid rgba(139, 92, 246, 0.25);
border-radius: 99px; border-radius: 99px;
color: #a78bfa; color: #7c3aed;
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
letter-spacing: 0.1em; letter-spacing: 0.1em;
@@ -3405,8 +3405,8 @@ if (
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #fff; color: #ffffff;
box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.5); box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.35);
z-index: 2; z-index: 2;
transform: rotate(-5deg); transform: rotate(-5deg);
} }
@@ -3461,14 +3461,14 @@ if (
.card-title { .card-title {
font-size: 24px; font-size: 24px;
font-weight: 800; font-weight: 800;
color: #fff; color: var(--text-primary, #1a2332);
margin-bottom: 12px; margin-bottom: 12px;
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
.card-description { .card-description {
font-size: 15px; font-size: 15px;
color: rgba(255, 255, 255, 0.5); color: var(--text-secondary, #4a5568);
line-height: 1.6; line-height: 1.6;
margin-bottom: 32px; margin-bottom: 32px;
} }
@@ -3482,10 +3482,10 @@ if (
.btn-primary { .btn-primary {
width: 100%; width: 100%;
padding: 16px; padding: 16px;
background: #fff; background: var(--primary, #0b5afe);
border: none; border: none;
border-radius: 16px; border-radius: 16px;
color: #000; color: #ffffff;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
display: flex; display: flex;
@@ -3498,8 +3498,8 @@ if (
.btn-primary:hover { .btn-primary:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1); box-shadow: 0 10px 20px rgba(11, 90, 254, 0.2);
background: #f4f4f4; background: var(--primary-hover, #0043f8);
} }
.btn-primary:active { .btn-primary:active {
@@ -3510,9 +3510,9 @@ if (
width: 100%; width: 100%;
padding: 14px; padding: 14px;
background: transparent; background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--border-primary, #e5e7eb);
border-radius: 16px; border-radius: 16px;
color: rgba(255, 255, 255, 0.6); color: var(--text-secondary, #4a5568);
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
@@ -3520,9 +3520,9 @@ if (
} }
.btn-secondary:hover { .btn-secondary:hover {
background: rgba(255, 255, 255, 0.05); background: var(--surface-tertiary, var(--bg-tertiary, #f1f5f9));
color: #fff; color: var(--text-primary, #1a2332);
border-color: rgba(255, 255, 255, 0.2); border-color: var(--border-secondary, #d1d5db);
} }
@keyframes card-appear { @keyframes card-appear {
@@ -3564,7 +3564,7 @@ if (
.ripple-effect { .ripple-effect {
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3); background-color: rgba(11, 90, 254, 0.25);
transform: scale(0); transform: scale(0);
animation: ripple 0.6s linear; animation: ripple 0.6s linear;
pointer-events: none; pointer-events: none;
@@ -3640,32 +3640,33 @@ if (
text-align: center; text-align: center;
max-width: 400px; max-width: 400px;
padding: 30px; padding: 30px;
background-color: rgba(30, 41, 59, 0.5); background-color: var(--surface-secondary, var(--bg-secondary, #f7fafc));
border-radius: 12px; border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--border-primary, #e5e7eb);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); box-shadow: var(--shadow-card, 0 5px 20px rgba(0, 0, 0, 0.08));
} }
.login-icon { .login-icon {
font-size: 3rem; font-size: 3rem;
margin-bottom: 15px; margin-bottom: 15px;
color: var(--primary, #0b5afe);
} }
.login-required-content h3 { .login-required-content h3 {
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: 10px; margin-bottom: 10px;
color: var(--light); color: var(--text-primary, #1a2332);
} }
.login-required-content p { .login-required-content p {
margin-bottom: 20px; margin-bottom: 20px;
color: rgba(255, 255, 255, 0.7); color: var(--text-secondary, #4a5568);
} }
.login-button { .login-button {
background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%); background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
border: none; border: none;
color: white; color: #ffffff;
padding: 10px 20px; padding: 10px 20px;
border-radius: 6px; border-radius: 6px;
font-weight: 600; font-weight: 600;