From 21dfc7206831db664d49729e7628839725a10405 Mon Sep 17 00:00:00 2001 From: old burden Date: Fri, 17 Apr 2026 14:12:44 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B5=E9=9D=A2=E9=A3=8E=E6=A0=BC?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- portal-ui/index.html | 7 +- portal-ui/src/assets/styles/base.less | 42 ++++--- .../src/assets/styles/portal-buttons.less | 99 +++++++++++++++++ portal-ui/src/assets/styles/var.less | 20 +++- portal-ui/src/components/Preview.vue | 2 +- portal-ui/src/components/RechargePc.vue | 6 +- portal-ui/src/components/RechargeSelect.vue | 2 +- portal-ui/src/components/VideoComposeCard.vue | 8 +- portal-ui/src/comps/button/style/index.less | 34 ++++-- portal-ui/src/comps/input/Input.js | 2 +- portal-ui/src/lang/zh_HK/common.js | 4 +- .../src/layout/components/ChangePassword.vue | 2 +- portal-ui/src/layout/components/Forgot.vue | 2 +- portal-ui/src/layout/components/Menu.vue | 32 +++++- portal-ui/src/layout/components/Money.vue | 2 +- portal-ui/src/layout/components/Register.vue | 2 +- portal-ui/src/layout/components/User.vue | 77 ++++++++++--- .../src/layout/components/UserAccount.vue | 68 ++++++++++-- portal-ui/src/layout/components/appMain.vue | 7 ++ portal-ui/src/layout/components/navBar.vue | 103 ++++++++++++++--- portal-ui/src/layout/components/sideBar.vue | 104 +++++++++++++++--- portal-ui/src/layout/default.vue | 8 +- portal-ui/src/main.js | 2 + portal-ui/src/store/modules/main.js | 7 +- portal-ui/src/views/GeneratedAssets.vue | 58 ++++++++-- portal-ui/src/views/VideoGen.vue | 4 +- portal-ui/static/images/favicon.svg | 33 ++++++ 27 files changed, 614 insertions(+), 123 deletions(-) create mode 100644 portal-ui/src/assets/styles/portal-buttons.less create mode 100644 portal-ui/static/images/favicon.svg diff --git a/portal-ui/index.html b/portal-ui/index.html index 2d63180..750f4bb 100644 --- a/portal-ui/index.html +++ b/portal-ui/index.html @@ -5,10 +5,9 @@ - - asio + + + 智绘影视
diff --git a/portal-ui/src/assets/styles/base.less b/portal-ui/src/assets/styles/base.less index 88e72d7..71b87bf 100644 --- a/portal-ui/src/assets/styles/base.less +++ b/portal-ui/src/assets/styles/base.less @@ -1,3 +1,5 @@ +@import './var.less'; + html, body { width: 100%; @@ -17,31 +19,38 @@ body { body { font-size: 14px; -webkit-font-smoothing: antialiased; - color: #1f2329; + color: var(--portal-text-strong); font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif; overflow: hidden; position: relative; + background-color: var(--portal-bg-deep); +} + +body:not([arco-theme='dark']) { + color: #1f2329; + background-color: #f8fafc; } // firefox 滚动条样式 * { - scrollbar-color: rgba(144, 147, 153, 0.5) #0f0f12; + scrollbar-color: rgba(34, 211, 238, 0.35) var(--portal-bg-surface); } /*滚动条整体样式*/ ::-webkit-scrollbar { - background-color: #0f0f12; + background-color: var(--portal-bg-surface); } /*滚动条里面小方块*/ ::-webkit-scrollbar-thumb { - background-color: red; - border: 3px solid #0f0f12; + background: linear-gradient(180deg, rgba(34, 211, 238, 0.45), rgba(56, 189, 248, 0.25)); + border: 3px solid var(--portal-bg-surface); + border-radius: 8px; } /*滚动条里面轨道*/ ::-webkit-scrollbar-track { - background: #0f0f12; + background: var(--portal-bg-surface); } :focus { @@ -195,11 +204,11 @@ fieldset { padding: 20px 10px; font-size: 14px; font-weight: bold; - color: #fd8000; + color: rgb(var(--primary-6)); } .page-error { - color: red; + color: #fbbf24; font-size: 20px; padding: 30px; } @@ -240,14 +249,15 @@ input:-webkit-autofill { width: 100vw !important; height: 100vh !important; z-index: 100 !important; - background: #fff; + background: var(--portal-bg-deep); padding: 12px !important; } .arco-modal-simple { - background: #0f0f12; + background: var(--portal-bg-raised); border-radius: 10px; - border: 2px solid #e6217a; + border: 1px solid var(--portal-border-glow); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.45); .arco-modal-title { color: #fff; } @@ -257,11 +267,13 @@ input:-webkit-autofill { .arco-modal-footer { .arco-btn-secondary { - color: #ffffff; - background-color: #1a1a1a; - border: 1px solid #1a1a1a; + color: #fff; + background-color: rgba(30, 41, 59, 0.35); + border: 1px solid rgba(92, 107, 138, 0.45); &:hover { - background-color: #262626; + color: #fff; + background-color: rgba(30, 41, 59, 0.55); + border-color: #5c6b8a; } } } diff --git a/portal-ui/src/assets/styles/portal-buttons.less b/portal-ui/src/assets/styles/portal-buttons.less new file mode 100644 index 0000000..7666a4c --- /dev/null +++ b/portal-ui/src/assets/styles/portal-buttons.less @@ -0,0 +1,99 @@ +/** + * 全站按钮：暗色主题下文字统一为白色；线框/文本/虚线在亮色主题保留灰字以保证对比度 + * 不改动 danger 状态按钮 + */ +@portal-btn-slate: #1e293b; +@portal-btn-slate-hover: #334155; +@portal-btn-slate-active: #0f172a; +@portal-btn-gray: #5c6b8a; +@portal-btn-gray-hover: #94a3b8; + +.arco-btn-primary:not(.arco-btn-disabled):not(.arco-btn-status-danger) { + background-color: @portal-btn-slate !important; + border-color: @portal-btn-slate !important; + color: #fff !important; + + &:hover { + background-color: @portal-btn-slate-hover !important; + border-color: @portal-btn-slate-hover !important; + color: #fff !important; + } + + &:active { + background-color: @portal-btn-slate-active !important; + border-color: @portal-btn-slate-active !important; + color: #fff !important; + } +} + +.arco-btn-secondary:not(.arco-btn-disabled):not(.arco-btn-status-danger) { + background-color: rgba(30, 41, 59, 0.42) !important; + border: 1px solid rgba(92, 107, 138, 0.45) !important; + color: #fff !important; + + &:hover { + background-color: rgba(30, 41, 59, 0.62) !important; + border-color: @portal-btn-gray !important; + color: #fff !important; + } +} + +.arco-btn-outline:not(.arco-btn-disabled):not(.arco-btn-status-danger) { + background-color: transparent !important; + border-color: rgba(92, 107, 138, 0.55) !important; + color: #fff !important; + + &:hover { + border-color: @portal-btn-gray !important; + color: #fff !important; + background-color: rgba(92, 107, 138, 0.08) !important; + } +} + +.arco-btn-outline.arco-btn-primary:not(.arco-btn-disabled):not(.arco-btn-status-danger) { + background-color: transparent !important; + border-color: rgba(92, 107, 138, 0.55) !important; + color: #fff !important; + + &:hover { + border-color: @portal-btn-gray !important; + color: #fff !important; + background-color: rgba(92, 107, 138, 0.1) !important; + } +} + +.arco-btn-text:not(.arco-btn-disabled):not(.arco-btn-status-danger) { + color: #fff !important; + background-color: transparent !important; + + &:hover { + color: #fff !important; + background-color: rgba(148, 163, 184, 0.08) !important; + } +} + +.arco-btn-dashed:not(.arco-btn-disabled):not(.arco-btn-status-danger) { + color: #fff !important; + border-color: rgba(92, 107, 138, 0.5) !important; + background-color: transparent !important; + + &:hover { + color: #fff !important; + border-color: @portal-btn-gray !important; + background-color: rgba(92, 107, 138, 0.06) !important; + } +} + +/* 亮色主题：透明底按钮若仍用白字会看不清，恢复石板灰字 */ +body:not([arco-theme='dark']) { + .arco-btn-outline:not(.arco-btn-disabled):not(.arco-btn-status-danger), + .arco-btn-outline.arco-btn-primary:not(.arco-btn-disabled):not(.arco-btn-status-danger), + .arco-btn-text:not(.arco-btn-disabled):not(.arco-btn-status-danger), + .arco-btn-dashed:not(.arco-btn-disabled):not(.arco-btn-status-danger) { + color: @portal-btn-gray !important; + + &:hover { + color: @portal-btn-gray-hover !important; + } + } +} diff --git a/portal-ui/src/assets/styles/var.less b/portal-ui/src/assets/styles/var.less index d4a8e20..d34be58 100644 --- a/portal-ui/src/assets/styles/var.less +++ b/portal-ui/src/assets/styles/var.less @@ -1,10 +1,20 @@ +/* Portal 主题令牌：暗色科技风基底 + 青/Cyan 点缀 */ body { - // 背景色 - 浅 - --mf-color-bg-3: #f8f8fa; + --portal-bg-void: #06080d; + --portal-bg-deep: #0a0e14; + --portal-bg-surface: #0f141c; + --portal-bg-raised: #141b26; + --portal-border-subtle: rgba(148, 163, 184, 0.12); + --portal-border-glow: rgba(34, 211, 238, 0.22); + --portal-text-strong: rgba(248, 250, 252, 0.96); + --portal-text-muted: rgba(148, 163, 184, 0.85); + --portal-accent: #22d3ee; + --portal-accent-soft: rgba(34, 211, 238, 0.14); + // 背景色 - 浅（兼容旧变量） + --mf-color-bg-3: #f8f8fa; --his-border-color: rgb(166, 124, 82, 0.3); } body[arco-theme='dark'] { - // 背景色 - 浅 - --mf-color-bg-3: #17171a; -} \ No newline at end of file + --mf-color-bg-3: #0f141c; +} diff --git a/portal-ui/src/components/Preview.vue b/portal-ui/src/components/Preview.vue index 2026e48..43b953c 100644 --- a/portal-ui/src/components/Preview.vue +++ b/portal-ui/src/components/Preview.vue @@ -43,7 +43,7 @@ export default { overflow: hidden; background: #0f0f12; border-radius: 20px; - border: 2px solid #e6217a; + border: 1px solid rgb(var(--primary-6)); height: 520px; width: 864px; top: 45% !important; diff --git a/portal-ui/src/components/RechargePc.vue b/portal-ui/src/components/RechargePc.vue index 50915f4..7c5f4df 100644 --- a/portal-ui/src/components/RechargePc.vue +++ b/portal-ui/src/components/RechargePc.vue @@ -528,7 +528,7 @@ export default { rgba(230, 33, 122, 0.7) 49% ); border-radius: 20px; - border: 2px solid #e6217a; + border: 1px solid rgb(var(--primary-6)); width: 500px; // height: 320px; top: 45% !important; @@ -629,7 +629,7 @@ export default { rgba(230, 33, 122, 0.7) 49% ); border-radius: 20px; - border: 2px solid #e6217a; + border: 1px solid rgb(var(--primary-6)); width: 600px; max-height: 90vh; overflow-y: auto; @@ -701,7 +701,7 @@ export default { :deep(.arco-select-dropdown) { background-color: rgba(39, 20, 51, 0.95); - border: 1px solid #e6217a; + border: 1px solid rgb(var(--primary-6)); } :deep(.arco-select-option) { diff --git a/portal-ui/src/components/RechargeSelect.vue b/portal-ui/src/components/RechargeSelect.vue index 9f53178..dc0f42b 100644 --- a/portal-ui/src/components/RechargeSelect.vue +++ b/portal-ui/src/components/RechargeSelect.vue @@ -126,7 +126,7 @@ export default { overflow: hidden; background: #0f0f12; border-radius: 20px; - border: 2px solid #e6217a; + border: 1px solid rgb(var(--primary-6)); width: 500px; top: 45% !important; transform: translateY(-45%) !important; diff --git a/portal-ui/src/components/VideoComposeCard.vue b/portal-ui/src/components/VideoComposeCard.vue index a70ed57..81b8114 100644 --- a/portal-ui/src/components/VideoComposeCard.vue +++ b/portal-ui/src/components/VideoComposeCard.vue @@ -1971,13 +1971,13 @@ defineExpose({ .vg-compose-left-upload:deep(.arco-btn) { background: rgba(0, 202, 224, 0.2); border-color: rgba(0, 202, 224, 0.35); - color: #7eeaf2; + color: #fff; } .vg-compose-left-upload:deep(.arco-btn:hover) { background: rgba(0, 202, 224, 0.28); border-color: rgba(0, 202, 224, 0.45); - color: #a8f4f9; + color: #fff; } .vg-asset-controls { @@ -2292,11 +2292,11 @@ defineExpose({ } .vg-compose-clear:deep(.arco-btn) { - color: rgba(255, 255, 255, 0.75); + color: #fff; } .vg-compose-clear:deep(.arco-btn:hover) { - color: #7eeaf2; + color: #fff; background: rgba(0, 202, 224, 0.1); } diff --git a/portal-ui/src/comps/button/style/index.less b/portal-ui/src/comps/button/style/index.less index 3eb35ea..1c37526 100644 --- a/portal-ui/src/comps/button/style/index.less +++ b/portal-ui/src/comps/button/style/index.less @@ -16,14 +16,13 @@ } &.arco-btn-text { - // padding: 0 10px 0 0; &.arco-btn-status-default { - color: var(--color-text-3); + color: #fff; &:hover { - color: rgb(var(--primary-5)); + color: #fff; } &:active { - color: rgb(var(--primary-7)); + color: #fff; background-color: transparent; } &.arco-btn-disabled { @@ -35,16 +34,35 @@ margin-right: 4px; } } - + &.arco-btn-primary { - color: #FFF; + background-color: #1e293b; + border-color: #1e293b; + color: #fff; &.arco-btn-loading, &:hover { - color: #FFF; + color: #fff; + background-color: #334155; + border-color: #334155; } - + &.arco-btn-disabled { color: var(--color-text-5); } } } + +/* 与 portal-buttons.less 一致：亮色主题下文本按钮用灰字 */ +body:not([arco-theme='dark']) { + .mf-button.arco-btn-text.arco-btn-status-default:not(.arco-btn-disabled) { + color: #5c6b8a; + + &:hover { + color: #94a3b8; + } + + &:active { + color: #94a3b8; + } + } +} diff --git a/portal-ui/src/comps/input/Input.js b/portal-ui/src/comps/input/Input.js index 7a991e5..57b2e13 100644 --- a/portal-ui/src/comps/input/Input.js +++ b/portal-ui/src/comps/input/Input.js @@ -179,7 +179,7 @@ export default { if (inputType == 'password') { return ( diff --git a/portal-ui/src/lang/zh_HK/common.js b/portal-ui/src/lang/zh_HK/common.js index 72b01d7..2164569 100644 --- a/portal-ui/src/lang/zh_HK/common.js +++ b/portal-ui/src/lang/zh_HK/common.js @@ -47,6 +47,9 @@ export default { logout: '退出登入', userEmailPlaceholder: '請輸入郵箱或帳號', passwordPlaceholder: '請輸入密碼', + loginLabelAccount: '郵箱或帳號', + loginLabelPassword: '密碼', + loginSubtitle: '請輸入帳號與密碼以登入', forgetPassword: '忘記密碼？', register: '註冊', login: '登入', @@ -150,7 +153,6 @@ export default { seedance20: 'Seedance 2.0', seedance20Fast: 'Seedance 2.0 Fast', // 富文本编辑器 - insertImage: '插入圖片', mentionImage: '引用圖片', noImageToMention: '暫無可引用的圖片', // VM支付相關 diff --git a/portal-ui/src/layout/components/ChangePassword.vue b/portal-ui/src/layout/components/ChangePassword.vue index 7fcea8f..bc87bf6 100644 --- a/portal-ui/src/layout/components/ChangePassword.vue +++ b/portal-ui/src/layout/components/ChangePassword.vue @@ -197,7 +197,7 @@ export default { ); background-color: transparent !important; border-radius: 20px; - border: 2px solid #e6217a; + border: 1px solid rgb(var(--primary-6)); width: 500px; top: 45% !important; transform: translateY(-45%) !important; diff --git a/portal-ui/src/layout/components/Forgot.vue b/portal-ui/src/layout/components/Forgot.vue index 642d6ab..2a14208 100644 --- a/portal-ui/src/layout/components/Forgot.vue +++ b/portal-ui/src/layout/components/Forgot.vue @@ -244,7 +244,7 @@ export default { ); background-color: transparent !important; border-radius: 20px; - border: 2px solid #e6217a; + border: 1px solid rgb(var(--primary-6)); width: 500px; top: 45% !important; transform: translateY(-45%) !important; diff --git a/portal-ui/src/layout/components/Menu.vue b/portal-ui/src/layout/components/Menu.vue index 3727cf5..d315dea 100644 --- a/portal-ui/src/layout/components/Menu.vue +++ b/portal-ui/src/layout/components/Menu.vue @@ -1,5 +1,7 @@