best_yunwei
/
ai_images
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 页面风格优化

This commit is contained in:
old burden 2026-04-17 14:12:44 +08:00
parent edbebf0d5d
commit 21dfc72068
27 changed files with 614 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
portal-ui/index.html
View File

@ -5,10 +5,9 @@
<meta <meta
name="viewport" name="viewport"
content="width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0" /> content="width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0" />
<link <link rel="icon" href="/images/favicon.svg" type="image/svg+xml" />
rel="icon" <link rel="alternate icon" href="/images/default/logo.jpg" type="image/jpeg" />
href="/images/logo.png" /> <title>智绘影视</title>
<title>asio</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

42
portal-ui/src/assets/styles/base.less
View File

@ -1,3 +1,5 @@
@import './var.less';
html, html,
body { body {
width: 100%; width: 100%;
@ -17,31 +19,38 @@ body {
body { body {
font-size: 14px; font-size: 14px;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
color: #1f2329; color: var(--portal-text-strong);
font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif; font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background-color: var(--portal-bg-deep);
}
body:not([arco-theme='dark']) {
color: #1f2329;
background-color: #f8fafc;
} }
// firefox 滚动条样式 // firefox 滚动条样式
* { * {
scrollbar-color: rgba(144, 147, 153, 0.5) #0f0f12; scrollbar-color: rgba(34, 211, 238, 0.35) var(--portal-bg-surface);
} }
/*滚动条整体样式*/ /*滚动条整体样式*/
::-webkit-scrollbar { ::-webkit-scrollbar {
background-color: #0f0f12; background-color: var(--portal-bg-surface);
} }
/*滚动条里面小方块*/ /*滚动条里面小方块*/
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: red; background: linear-gradient(180deg, rgba(34, 211, 238, 0.45), rgba(56, 189, 248, 0.25));
border: 3px solid #0f0f12; border: 3px solid var(--portal-bg-surface);
border-radius: 8px;
} }
/*滚动条里面轨道*/ /*滚动条里面轨道*/
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: #0f0f12; background: var(--portal-bg-surface);
} }
:focus { :focus {
@ -195,11 +204,11 @@ fieldset {
padding: 20px 10px; padding: 20px 10px;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
color: #fd8000; color: rgb(var(--primary-6));
} }
.page-error { .page-error {
color: red; color: #fbbf24;
font-size: 20px; font-size: 20px;
padding: 30px; padding: 30px;
} }
@ -240,14 +249,15 @@ input:-webkit-autofill {
width: 100vw !important; width: 100vw !important;
height: 100vh !important; height: 100vh !important;
z-index: 100 !important; z-index: 100 !important;
background: #fff; background: var(--portal-bg-deep);
padding: 12px !important; padding: 12px !important;
} }
.arco-modal-simple { .arco-modal-simple {
background: #0f0f12; background: var(--portal-bg-raised);
border-radius: 10px; 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 { .arco-modal-title {
color: #fff; color: #fff;
} }
@ -257,11 +267,13 @@ input:-webkit-autofill {
.arco-modal-footer { .arco-modal-footer {
.arco-btn-secondary { .arco-btn-secondary {
color: #ffffff; color: #fff;
background-color: #1a1a1a; background-color: rgba(30, 41, 59, 0.35);
border: 1px solid #1a1a1a; border: 1px solid rgba(92, 107, 138, 0.45);
&:hover { &:hover {
background-color: #262626; color: #fff;
background-color: rgba(30, 41, 59, 0.55);
border-color: #5c6b8a;
} }
} }
} }

99
portal-ui/src/assets/styles/portal-buttons.less Normal file
View File

@ -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;
}
}
}

18
portal-ui/src/assets/styles/var.less
View File

@ -1,10 +1,20 @@
/* Portal 主题令牌：暗色科技风基底 + 青/Cyan 点缀 */
body { body {
// 背景色 - 浅 --portal-bg-void: #06080d;
--mf-color-bg-3: #f8f8fa; --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); --his-border-color: rgb(166, 124, 82, 0.3);
} }
body[arco-theme='dark'] { body[arco-theme='dark'] {
// 背景色 - 浅 --mf-color-bg-3: #0f141c;
--mf-color-bg-3: #17171a;
} }

2
portal-ui/src/components/Preview.vue
View File

@ -43,7 +43,7 @@ export default {
overflow: hidden; overflow: hidden;
background: #0f0f12; background: #0f0f12;
border-radius: 20px; border-radius: 20px;
border: 2px solid #e6217a; border: 1px solid rgb(var(--primary-6));
height: 520px; height: 520px;
width: 864px; width: 864px;
top: 45% !important; top: 45% !important;

6
portal-ui/src/components/RechargePc.vue
View File

@ -528,7 +528,7 @@ export default {
rgba(230, 33, 122, 0.7) 49% rgba(230, 33, 122, 0.7) 49%
); );
border-radius: 20px; border-radius: 20px;
border: 2px solid #e6217a; border: 1px solid rgb(var(--primary-6));
width: 500px; width: 500px;
// height: 320px; // height: 320px;
top: 45% !important; top: 45% !important;
@ -629,7 +629,7 @@ export default {
rgba(230, 33, 122, 0.7) 49% rgba(230, 33, 122, 0.7) 49%
); );
border-radius: 20px; border-radius: 20px;
border: 2px solid #e6217a; border: 1px solid rgb(var(--primary-6));
width: 600px; width: 600px;
max-height: 90vh; max-height: 90vh;
overflow-y: auto; overflow-y: auto;
@ -701,7 +701,7 @@ export default {
:deep(.arco-select-dropdown) { :deep(.arco-select-dropdown) {
background-color: rgba(39, 20, 51, 0.95); background-color: rgba(39, 20, 51, 0.95);
border: 1px solid #e6217a; border: 1px solid rgb(var(--primary-6));
} }
:deep(.arco-select-option) { :deep(.arco-select-option) {

2
portal-ui/src/components/RechargeSelect.vue
View File

@ -126,7 +126,7 @@ export default {
overflow: hidden; overflow: hidden;
background: #0f0f12; background: #0f0f12;
border-radius: 20px; border-radius: 20px;
border: 2px solid #e6217a; border: 1px solid rgb(var(--primary-6));
width: 500px; width: 500px;
top: 45% !important; top: 45% !important;
transform: translateY(-45%) !important; transform: translateY(-45%) !important;

8
portal-ui/src/components/VideoComposeCard.vue
View File

@ -1971,13 +1971,13 @@ defineExpose({
.vg-compose-left-upload:deep(.arco-btn) { .vg-compose-left-upload:deep(.arco-btn) {
background: rgba(0, 202, 224, 0.2); background: rgba(0, 202, 224, 0.2);
border-color: rgba(0, 202, 224, 0.35); border-color: rgba(0, 202, 224, 0.35);
color: #7eeaf2; color: #fff;
} }
.vg-compose-left-upload:deep(.arco-btn:hover) { .vg-compose-left-upload:deep(.arco-btn:hover) {
background: rgba(0, 202, 224, 0.28); background: rgba(0, 202, 224, 0.28);
border-color: rgba(0, 202, 224, 0.45); border-color: rgba(0, 202, 224, 0.45);
color: #a8f4f9; color: #fff;
} }
.vg-asset-controls { .vg-asset-controls {
@ -2292,11 +2292,11 @@ defineExpose({
} }
.vg-compose-clear:deep(.arco-btn) { .vg-compose-clear:deep(.arco-btn) {
color: rgba(255, 255, 255, 0.75); color: #fff;
} }
.vg-compose-clear:deep(.arco-btn:hover) { .vg-compose-clear:deep(.arco-btn:hover) {
color: #7eeaf2; color: #fff;
background: rgba(0, 202, 224, 0.1); background: rgba(0, 202, 224, 0.1);
} }

30
portal-ui/src/comps/button/style/index.less
View File

@ -16,14 +16,13 @@
} }
&.arco-btn-text { &.arco-btn-text {
// padding: 0 10px 0 0;
&.arco-btn-status-default { &.arco-btn-status-default {
color: var(--color-text-3); color: #fff;
&:hover { &:hover {
color: rgb(var(--primary-5)); color: #fff;
} }
&:active { &:active {
color: rgb(var(--primary-7)); color: #fff;
background-color: transparent; background-color: transparent;
} }
&.arco-btn-disabled { &.arco-btn-disabled {
@ -37,10 +36,14 @@
} }
&.arco-btn-primary { &.arco-btn-primary {
color: #FFF; background-color: #1e293b;
border-color: #1e293b;
color: #fff;
&.arco-btn-loading, &.arco-btn-loading,
&:hover { &:hover {
color: #FFF; color: #fff;
background-color: #334155;
border-color: #334155;
} }
&.arco-btn-disabled { &.arco-btn-disabled {
@ -48,3 +51,18 @@
} }
} }
} }
/* 与 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;
}
}
}

2
portal-ui/src/comps/input/Input.js
View File

@ -179,7 +179,7 @@ export default {
if (inputType == 'password') { if (inputType == 'password') {
return ( return (
<a-input-password <a-input-password
invisible-button={true} invisible-button={false}
{...inputProps} {...inputProps}
v-slots={inputSlots} v-slots={inputSlots}
/> />

4
portal-ui/src/lang/zh_HK/common.js
View File

@ -47,6 +47,9 @@ export default {
logout: '退出登入', logout: '退出登入',
userEmailPlaceholder: '請輸入郵箱或帳號', userEmailPlaceholder: '請輸入郵箱或帳號',
passwordPlaceholder: '請輸入密碼', passwordPlaceholder: '請輸入密碼',
loginLabelAccount: '郵箱或帳號',
loginLabelPassword: '密碼',
loginSubtitle: '請輸入帳號與密碼以登入',
forgetPassword: '忘記密碼？', forgetPassword: '忘記密碼？',
register: '註冊', register: '註冊',
login: '登入', login: '登入',
@ -150,7 +153,6 @@ export default {
seedance20: 'Seedance 2.0', seedance20: 'Seedance 2.0',
seedance20Fast: 'Seedance 2.0 Fast', seedance20Fast: 'Seedance 2.0 Fast',
// 富文本编辑器 // 富文本编辑器
insertImage: '插入圖片',
mentionImage: '引用圖片', mentionImage: '引用圖片',
noImageToMention: '暫無可引用的圖片', noImageToMention: '暫無可引用的圖片',
// VM支付相關 // VM支付相關

2
portal-ui/src/layout/components/ChangePassword.vue
View File

@ -197,7 +197,7 @@ export default {
); );
background-color: transparent !important; background-color: transparent !important;
border-radius: 20px; border-radius: 20px;
border: 2px solid #e6217a; border: 1px solid rgb(var(--primary-6));
width: 500px; width: 500px;
top: 45% !important; top: 45% !important;
transform: translateY(-45%) !important; transform: translateY(-45%) !important;

2
portal-ui/src/layout/components/Forgot.vue
View File

@ -244,7 +244,7 @@ export default {
); );
background-color: transparent !important; background-color: transparent !important;
border-radius: 20px; border-radius: 20px;
border: 2px solid #e6217a; border: 1px solid rgb(var(--primary-6));
width: 500px; width: 500px;
top: 45% !important; top: 45% !important;
transform: translateY(-45%) !important; transform: translateY(-45%) !important;

32
portal-ui/src/layout/components/Menu.vue
View File

@ -1,5 +1,7 @@
<template> <template>
<div class="menu-wrapper"> <div
class="menu-wrapper"
:class="{ 'menu-wrapper--collapsed': collapsed }">
<a-scrollbar> <a-scrollbar>
<a-menu <a-menu
:collapsed="collapsed" :collapsed="collapsed"
@ -166,16 +168,39 @@ const getMenuSvg = (key) => {
<style lang="less" scoped> <style lang="less" scoped>
.menu-wrapper { .menu-wrapper {
height: 100%; height: 100%;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
.arco-scrollbar { .arco-scrollbar {
height: 100%; height: 100%;
max-width: 100%;
:deep(.arco-scrollbar-container) { :deep(.arco-scrollbar-container) {
height: 100%; height: 100%;
max-width: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }
} }
&--collapsed {
overflow-x: hidden;
:deep(.arco-scrollbar) {
max-width: 100%;
}
:deep(.arco-scrollbar-container) {
overflow-x: hidden !important;
}
/* 避免出现横向滚动条轨道 */
:deep(.arco-scrollbar-track-direction-horizontal) {
display: none !important;
}
}
} }
.menu-item { .menu-item {
@ -190,7 +215,7 @@ const getMenuSvg = (key) => {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: rgba(255, 255, 255, 0.74); color: var(--portal-text-muted);
transition: color 0.2s ease; transition: color 0.2s ease;
} }
@ -202,6 +227,7 @@ const getMenuSvg = (key) => {
} }
.menu-svg-icon.active { .menu-svg-icon.active {
color: #ffffff; color: #e2e8f0;
filter: none;
} }
</style> </style>

2
portal-ui/src/layout/components/Money.vue
View File

@ -102,7 +102,7 @@ export default {
&-save { &-save {
width: 410px; width: 410px;
height: 40px; height: 40px;
background: #e6217a; background: rgb(var(--primary-6));
border-radius: 10px; border-radius: 10px;
margin-top: 30px; margin-top: 30px;
} }

2
portal-ui/src/layout/components/Register.vue
View File

@ -272,7 +272,7 @@ export default {
); );
background-color: transparent !important; background-color: transparent !important;
border-radius: 20px; border-radius: 20px;
border: 2px solid #e6217a; border: 1px solid rgb(var(--primary-6));
width: 500px; width: 500px;
top: 45% !important; top: 45% !important;
transform: translateY(-45%) !important; transform: translateY(-45%) !important;

77
portal-ui/src/layout/components/User.vue
View File

@ -19,9 +19,19 @@
<a-tabs <a-tabs
v-model="current" v-model="current"
lazy-load> lazy-load>
<a-tab-pane <a-tab-pane key="account">
key="account" <template #title>
:title="$t('common.myAccount')"> <span class="user-tab-title">
<svg
class="user-tab-icon"
viewBox="0 0 24 24"
aria-hidden="true">
<path
d="M12 12a4 4 0 1 0-4-4a4 4 0 0 0 4 4Zm0 2c-3.33 0-6 1.34-6 3v1h12v-1c0-1.66-2.67-3-6-3Z" />
</svg>
{{ $t('common.myAccount') }}
</span>
</template>
<UserAccount /> <UserAccount />
</a-tab-pane> </a-tab-pane>
<!-- 隐藏有奖邀请 --> <!-- 隐藏有奖邀请 -->
@ -32,9 +42,19 @@
:title="$t('common.rechargeRecord')"> :title="$t('common.rechargeRecord')">
<RechargeRecord /> <RechargeRecord />
</a-tab-pane> --> </a-tab-pane> -->
<a-tab-pane <a-tab-pane key="resume">
key="resume" <template #title>
:title="$t('common.myProduct')"> <span class="user-tab-title">
<svg
class="user-tab-icon"
viewBox="0 0 24 24"
aria-hidden="true">
<path
d="M4 6.5A2.5 2.5 0 0 1 6.5 4H14l1.6 2H17.5A2.5 2.5 0 0 1 20 8.5v8a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 16.5v-10ZM6 8v8h12V9.5h-2.2L14 7H6.5A.5.5 0 0 0 6 7.5V8Zm3 2.5h6v1.5H9V10.5Zm0 3h4v1.5H9V13.5Z" />
</svg>
{{ $t('common.myProduct') }}
</span>
</template>
<ResumeRecord /> <ResumeRecord />
</a-tab-pane> </a-tab-pane>
<!-- 隐藏邀请消费记录 --> <!-- 隐藏邀请消费记录 -->
@ -159,11 +179,12 @@ export default {
<style lang="less"> <style lang="less">
.user-dialog { .user-dialog {
overflow: hidden; /* 允许头像半圆伸出卡片，不被裁掉 */
overflow: visible;
background: #0f0f12; background: #0f0f12;
border-radius: 10px; border-radius: 10px;
border-radius: 20px; border-radius: 20px;
border: 2px solid #e6217a; border: 1px solid rgba(92, 107, 138, 0.46);
width: 500px; width: 500px;
min-height: 520px; min-height: 520px;
top: 45% !important; top: 45% !important;
@ -179,6 +200,7 @@ export default {
.arco-modal-body { .arco-modal-body {
padding: 24px 30px 30px 30px; padding: 24px 30px 30px 30px;
overflow: visible;
} }
.user-close { .user-close {
@ -194,22 +216,42 @@ export default {
} }
.user-wrapper { .user-wrapper {
.user-tab-title {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.user-tab-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
fill: currentColor;
opacity: 0.9;
}
.arco-tabs { .arco-tabs {
&-tab { &-tab {
width: 130px; min-width: 120px;
width: auto;
padding: 0 14px;
height: 40px; height: 40px;
border-radius: 10px; border-radius: 10px;
font-size: 14px; font-size: 14px;
color: #ffffff; color: #cbd5e1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: background-color 0.2s ease, color 0.2s ease;
&-active { &-active {
background: #e6217a; background: #1e293b;
color: #e2e8f0;
} }
&:hover { &:hover {
background: #e6217a; background: rgba(30, 41, 59, 0.78);
color: #e2e8f0;
.arco-tabs-tab-title { .arco-tabs-tab-title {
&:before { &:before {
@ -247,9 +289,16 @@ export default {
.user-wrapper { .user-wrapper {
.arco-tabs { .arco-tabs {
&-tab { &-tab {
width: 120px; min-width: 0;
width: auto;
padding: 0 10px;
font-size: 12px; font-size: 12px;
margin: 0 8px; margin: 0 6px;
}
.user-tab-icon {
width: 16px;
height: 16px;
} }
&-nav-button { &-nav-button {
color: #fff !important; color: #fff !important;

68
portal-ui/src/layout/components/UserAccount.vue
View File

@ -284,7 +284,7 @@ export default {
background: #0f0f12; background: #0f0f12;
border-radius: 10px; border-radius: 10px;
border-radius: 20px; border-radius: 20px;
border: 2px solid #e6217a; border: 1px solid rgba(92, 107, 138, 0.46);
width: 500px; width: 500px;
min-height: 400px; min-height: 400px;
top: 45% !important; top: 45% !important;
@ -403,11 +403,18 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.user-account { .user-account {
padding: 70px 24px 30px 24px; padding: 70px 24px 30px 24px;
overflow: visible;
&-wrap { &-wrap {
background: #1a1b20; background: #1a1b20;
border-radius: 10px; border-radius: 10px;
padding: 60px 60px 30px 60px; padding: 60px 60px 30px 60px;
position: relative; position: relative;
overflow: visible;
}
:deep(.mf-image-upload-wrap) {
overflow: visible;
} }
:deep(.mf-image-upload) { :deep(.mf-image-upload) {
@ -419,27 +426,68 @@ export default {
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: visible;
box-sizing: border-box;
/* 头像外圈：深色底上也能看清边界 */
border: 2px solid rgba(148, 163, 184, 0.45);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
background: rgba(15, 20, 28, 0.95);
.arco-upload-list-item { .arco-upload-list-item {
width: 60px;
height: 60px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
.arco-upload-list-picture { .arco-upload-list-picture {
width: 60px; width: 56px;
height: 60px; height: 56px;
margin: 0; margin: 0;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 1px solid rgba(148, 163, 184, 0.2);
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
}
} }
.mf-image-upload-btn {
width: 56px;
height: 56px;
margin: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(30, 41, 59, 0.65);
border: 1px dashed rgba(148, 163, 184, 0.35);
box-sizing: border-box;
}
.mf-image-upload-btn .arco-image {
border-radius: 50%;
overflow: hidden;
}
.arco-upload-list-picture-mask { .arco-upload-list-picture-mask {
line-height: 60px; line-height: 56px;
border-radius: 50%;
.mf-icon { .mf-icon {
margin-right: 8px; margin-right: 8px;
} }
// display: none !important;
} }
} }
&:hover { &:hover {
// .user-account-avatar-edit { border-color: rgba(203, 213, 225, 0.55);
// display: flex;
// }
} }
} }
@ -448,7 +496,7 @@ export default {
position: absolute; position: absolute;
right: -8px; right: -8px;
bottom: -8px; bottom: -8px;
color: rgba(var(--primary-6)); color: #94a3b8;
// display: none; // display: none;
// width: 100%; // width: 100%;
// height: 100%; // height: 100%;

7
portal-ui/src/layout/components/appMain.vue
View File

@ -86,6 +86,13 @@ export default {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
background: var(--portal-bg-surface);
background-image: radial-gradient(
ellipse 80% 50% at 100% 0%,
rgba(56, 189, 248, 0.05) 0%,
transparent 45%
),
radial-gradient(ellipse 60% 40% at 0% 100%, rgba(34, 211, 238, 0.04) 0%, transparent 40%);
&-wrap { &-wrap {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;

103
portal-ui/src/layout/components/navBar.vue
View File

@ -52,12 +52,12 @@
v-if="userInfo.username" v-if="userInfo.username"
@click="showUser"> @click="showUser">
<span> <span>
<a-image <span class="wallet-icon" aria-hidden="true">
class="wallet" <svg viewBox="0 0 24 24">
:preview="false" <path
:width="16" d="M3.8 7.2A2.2 2.2 0 0 1 6 5h11.7A2.3 2.3 0 0 1 20 7.3v1.1h.4a1.6 1.6 0 0 1 1.6 1.6v4a1.6 1.6 0 0 1-1.6 1.6H20v1.1a2.3 2.3 0 0 1-2.3 2.3H6a2.2 2.2 0 0 1-2.2-2.2V7.2Zm2.2-.7a.7.7 0 0 0-.7.7v.2h12.4a.8.8 0 1 0 0-1.6H6Zm12.5 3.4v4.2h2V9.9h-2Zm-.9 5.7V9.4H5.3v7.4c0 .4.3.7.7.7h11.7a.8.8 0 0 0 .8-.8v-1.1h-.9Zm.8-3.6a1.2 1.2 0 1 1 0-2.4a1.2 1.2 0 0 1 0 2.4Z" />
fit="cover" </svg>
src="/images/nav/img_money@2x.png" /> </span>
{{ userInfo.balance || '0.00' }} {{ userInfo.balance || '0.00' }}
</span> </span>
<mf-avatar <mf-avatar
@ -70,7 +70,8 @@
class="right-menu-item logout" class="right-menu-item logout"
v-if="userInfo.username"> v-if="userInfo.username">
<mf-button <mf-button
type="text" class="navbar-logout-btn"
type="outline"
@click="logout"> @click="logout">
{{ $t('common.logout') }} {{ $t('common.logout') }}
</mf-button> </mf-button>
@ -244,6 +245,33 @@ export default {
box-sizing: content-box; box-sizing: content-box;
padding-left: 20px; padding-left: 20px;
padding-right: 30px; padding-right: 30px;
position: relative;
background: linear-gradient(
180deg,
rgba(15, 20, 28, 0.97) 0%,
rgba(10, 14, 20, 0.94) 100%
);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--portal-border-subtle);
box-shadow: 0 1px 0 rgba(92, 107, 138, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.03);
&::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(92, 107, 138, 0.35) 50%,
transparent 100%
);
opacity: 0.5;
pointer-events: none;
}
.left-menu { .left-menu {
display: flex; display: flex;
@ -331,26 +359,55 @@ export default {
&.language { &.language {
.mf-button { .mf-button {
font-size: 14px; font-size: 14px;
color: #999999; color: #fff;
background-color: transparent; background-color: transparent;
&:hover { &:hover {
background-color: transparent; background-color: transparent;
color: #fff;
} }
} }
.language-display[disabled] { .language-display[disabled] {
color: #999999 !important; color: rgba(255, 255, 255, 0.55) !important;
opacity: 0.85; opacity: 0.85;
cursor: not-allowed; cursor: not-allowed;
} }
} }
&.logout { &.logout {
.mf-button { .navbar-logout-btn.mf-button {
background-color: transparent; height: 32px;
padding: 0 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: #f8fafc !important;
background: linear-gradient(
180deg,
rgba(30, 41, 59, 0.85) 0%,
rgba(15, 23, 42, 0.92) 100%
) !important;
border: 1px solid rgba(34, 211, 238, 0.42) !important;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.35),
0 1px 10px rgba(34, 211, 238, 0.12);
&:hover { &:hover {
background-color: transparent; color: #fff !important;
background: linear-gradient(
180deg,
rgba(51, 65, 85, 0.95) 0%,
rgba(30, 41, 59, 0.98) 100%
) !important;
border-color: rgba(34, 211, 238, 0.65) !important;
box-shadow:
0 0 0 1px rgba(34, 211, 238, 0.2),
0 0 16px rgba(34, 211, 238, 0.18);
}
&:active {
transform: translateY(0.5px);
} }
} }
} }
@ -363,12 +420,13 @@ export default {
&.user { &.user {
width: 150px; width: 150px;
color: rgb(var(--primary-6)); color: #cbd5e1;
border: 2px solid transparent; border: 2px solid transparent;
height: 32px; height: 32px;
border: 1px solid #5c5d68; border: 1px solid rgba(92, 107, 138, 0.46);
background: #26272e; background: linear-gradient(135deg, rgba(30, 41, 59, 0.58) 0%, rgba(15, 20, 28, 0.98) 100%);
border-radius: 16px; border-radius: 16px;
box-shadow: 0 0 0 1px rgba(92, 107, 138, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -380,8 +438,21 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
flex-grow: 1; flex-grow: 1;
.arco-image { color: #e2e8f0;
.wallet-icon {
width: 18px;
height: 18px;
margin-right: 8px; margin-right: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #94a3b8;
svg {
width: 18px;
height: 18px;
fill: currentColor;
}
} }
} }
} }

104
portal-ui/src/layout/components/sideBar.vue
View File

@ -112,23 +112,88 @@ export default {
position: relative; position: relative;
transition: width 0.3s; transition: width 0.3s;
z-index: 12; z-index: 12;
background-color: #000; background: linear-gradient(180deg, var(--portal-bg-void) 0%, var(--portal-bg-deep) 32%, #0c1018 100%);
border-right: 1px solid; /* 宽度随你调整 */ border-right: 1px solid var(--portal-border-subtle);
border-image: linear-gradient( box-shadow: inset -1px 0 0 rgba(92, 107, 138, 0.12);
to bottom,
#0f0f12 0%,
rgba(255,255,255, 0.7) 40%,
rgba(255,255,255, 0.7) 60%,
#0f0f12 100%
)
1 100%;
&.collapsed { &.collapsed {
width: 56px !important; width: 56px !important;
overflow: hidden; min-width: 56px !important;
max-width: 56px !important;
overflow-x: hidden;
box-sizing: border-box;
:deep(.arco-menu) { :deep(.arco-menu) {
padding-left: 0px; padding: 6px 2px 10px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
/* 收起：更小一号的图标格，避免撑出横向滚动 */
:deep(.arco-menu-collapsed) {
width: 100%;
max-width: 100%;
overflow-x: hidden;
.arco-menu-item {
width: 40px !important;
min-width: 40px;
max-width: 40px;
height: 40px;
min-height: 40px;
margin-left: auto;
margin-right: auto;
margin-bottom: 6px;
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
.arco-menu-item-inner {
padding: 0 !important;
width: 100%;
justify-content: center !important;
}
.arco-menu-icon {
margin-right: 0 !important;
}
/* 收起时标题不占布局宽度，避免图标挤偏；保留节点以免 Tooltip 异常 */
.arco-menu-title {
flex: 0 0 0 !important;
min-width: 0 !important;
max-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
}
.arco-menu-item.arco-menu-selected {
background: rgba(30, 41, 59, 0.92) !important;
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35) !important;
}
.arco-menu-item.arco-menu-selected .arco-menu-icon {
color: #e2e8f0;
}
}
:deep(.arco-menu-collapsed .menu-svg-icon) {
width: 18px !important;
height: 18px !important;
}
:deep(.arco-menu-collapsed .menu-svg-icon svg) {
width: 18px !important;
height: 18px !important;
} }
} }
@ -141,13 +206,20 @@ export default {
line-height: 1.4; line-height: 1.4;
font-size: 15px; font-size: 15px;
background-color: transparent; background-color: transparent;
color: rgba(255, 255, 255, 0.7); color: var(--portal-text-muted);
border-radius: 10px; border-radius: 10px;
margin-bottom: 10px; margin-bottom: 10px;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
&.arco-menu-selected, &:hover:not(.arco-menu-selected) {
&:hover { background-color: rgba(255, 255, 255, 0.05);
background-color: rgb(var(--primary-6)); color: var(--portal-text-strong);
}
&.arco-menu-selected {
color: var(--portal-text-strong);
background: rgba(30, 41, 59, 0.55);
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.3);
} }
} }

8
portal-ui/src/layout/default.vue
View File

@ -82,7 +82,13 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
background: #0f0f12; background: var(--portal-bg-deep);
background-image: radial-gradient(
ellipse 100% 60% at 50% -10%,
rgba(34, 211, 238, 0.07) 0%,
transparent 55%
),
linear-gradient(180deg, var(--portal-bg-void) 0%, var(--portal-bg-deep) 40%, var(--portal-bg-deep) 100%);
.sidebar-backdrop { .sidebar-backdrop {
display: none; display: none;

2
portal-ui/src/main.js
View File

@ -104,4 +104,6 @@ import {
} from './directive/clamp' } from './directive/clamp'
app.use(useClamp) app.use(useClamp)
import '@/assets/styles/portal-buttons.less'
app.mount('#app') app.mount('#app')

7
portal-ui/src/store/modules/main.js
View File

@ -23,8 +23,11 @@ const state = {
// 当前语言 // 当前语言
// 多语言切换已禁用：全站固定繁体中文（zh_HK） // 多语言切换已禁用：全站固定繁体中文（zh_HK）
language: 'zh_HK', language: 'zh_HK',
// 主题 ''：亮色 / dark:暗黑 // 主题 ''：亮色 / dark:暗黑（未存储时默认暗色；显式存 '' 仍为亮色）
theme: $storage.get('theme') || '', theme: (() => {
const t = $storage.get('theme')
return t === undefined || t === null ? 'dark' : t
})(),
// 系统端 // 系统端
system: $storage.get('system') || '', system: $storage.get('system') || '',
// 当前系统的所有多语言数据 // 当前系统的所有多语言数据

58
portal-ui/src/views/GeneratedAssets.vue
View File

@ -5,8 +5,28 @@
</div> </div>
<div class="view-tabs"> <div class="view-tabs">
<a-tabs v-model="activeTab" @change="handleTabChange" type="card"> <a-tabs v-model="activeTab" @change="handleTabChange" type="card">
<a-tab-pane key="personal" title="个人" /> <a-tab-pane key="personal">
<a-tab-pane key="department" title="部门" /> <template #title>
<span class="ga-tab-title">
<svg class="ga-tab-icon" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M12 12a4 4 0 1 0-4-4a4 4 0 0 0 4 4Zm0 2c-3.33 0-6 1.34-6 3v1h12v-1c0-1.66-2.67-3-6-3Z" />
</svg>
个人
</span>
</template>
</a-tab-pane>
<a-tab-pane key="department">
<template #title>
<span class="ga-tab-title">
<svg class="ga-tab-icon" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M4 18v-1c0-1.66 2.03-3 4.5-3c.97 0 1.87.22 2.64.6c.73-.55 1.7-.88 2.86-.88s2.13.33 2.86.88A4.48 4.48 0 0 1 19 17v1H4Zm13-6.5a3 3 0 1 0 0-6a3 3 0 0 0 0 6Zm-8.5-1a3.5 3.5 0 1 0 0-7a3.5 3.5 0 0 0 0 7Z" />
</svg>
部门
</span>
</template>
</a-tab-pane>
</a-tabs> </a-tabs>
</div> </div>
<!-- 查询区域 --> <!-- 查询区域 -->
@ -866,10 +886,24 @@ export default {
margin-bottom: 20px; margin-bottom: 20px;
padding: 0 4px; padding: 0 4px;
.ga-tab-title {
display: inline-flex;
align-items: center;
gap: 8px;
}
.ga-tab-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
fill: currentColor;
opacity: 0.92;
}
::v-deep(.arco-tabs) { ::v-deep(.arco-tabs) {
.arco-tabs-nav { .arco-tabs-nav {
background: rgba(22, 24, 30, 0.98) !important; background: rgba(22, 24, 30, 0.98) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(148, 163, 184, 0.18) !important;
border-radius: 12px !important; border-radius: 12px !important;
padding: 6px !important; padding: 6px !important;
margin-bottom: 0; margin-bottom: 0;
@ -877,9 +911,9 @@ export default {
} }
.arco-tabs-tab { .arco-tabs-tab {
color: rgba(255, 255, 255, 0.85) !important; color: rgba(203, 213, 225, 0.92) !important;
margin: 0 4px !important; margin: 0 4px !important;
padding: 10px 28px !important; padding: 10px 20px !important;
border-radius: 8px !important; border-radius: 8px !important;
transition: all 0.2s ease !important; transition: all 0.2s ease !important;
font-size: 14px; font-size: 14px;
@ -888,17 +922,17 @@ export default {
} }
.arco-tabs-tab:hover { .arco-tabs-tab:hover {
color: white !important; color: #e2e8f0 !important;
background: rgba(0, 102, 204, 0.25) !important; background: rgba(30, 41, 59, 0.65) !important;
border-color: rgba(0, 102, 204, 0.3) !important; border-color: rgba(148, 163, 184, 0.25) !important;
} }
.arco-tabs-tab-active { .arco-tabs-tab-active {
color: white !important; color: #f1f5f9 !important;
background: #0066cc !important; background: #1e293b !important;
border-color: #0066cc !important; border-color: rgba(148, 163, 184, 0.35) !important;
font-weight: 600 !important; font-weight: 600 !important;
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.5) !important; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.2) !important;
} }
.arco-tabs-ink-bar { .arco-tabs-ink-bar {

4
portal-ui/src/views/VideoGen.vue
View File

@ -1714,11 +1714,11 @@ export default {
} }
.vg-toolbar-clear:deep(.arco-btn) { .vg-toolbar-clear:deep(.arco-btn) {
color: rgba(255, 255, 255, 0.75); color: #fff;
} }
.vg-toolbar-clear:deep(.arco-btn:hover) { .vg-toolbar-clear:deep(.arco-btn:hover) {
color: #7eeaf2; color: #fff;
background: rgba(0, 202, 224, 0.1); background: rgba(0, 202, 224, 0.1);
} }

33
portal-ui/static/images/favicon.svg Normal file
View File

@ -0,0 +1,33 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Site icon">
<title>asio</title>
<defs>
<linearGradient id="favicon-bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#141b26"/>
<stop offset="100%" stop-color="#0a0e14"/>
</linearGradient>
</defs>
<rect width="32" height="32" rx="8" fill="url(#favicon-bg)"/>
<rect
x="1"
y="1"
width="30"
height="30"
rx="7"
fill="none"
stroke="#22d3ee"
stroke-opacity="0.35"
stroke-width="1"/>
<rect
x="1.5"
y="1.5"
width="29"
height="29"
rx="6.5"
fill="none"
stroke="#5c6b8a"
stroke-opacity="0.45"
stroke-width="0.75"/>
<path
fill="#22d3ee"
d="M13.2 9.8c0-.45.48-.73.87-.5l8.8 5.2a.58.58 0 0 1 0 1l-8.8 5.2a.58.58 0 0 1-.87-.5v-10.4Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 789 B