diff --git a/portal-ui/index.html b/portal-ui/index.html
index 2d63180..b51323f 100644
--- a/portal-ui/index.html
+++ b/portal-ui/index.html
@@ -7,8 +7,9 @@
content="width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0" />
- asio
+ type="image/svg+xml"
+ href="/favicon.svg" />
+ 智绘影音
diff --git a/portal-ui/src/assets/styles/base.less b/portal-ui/src/assets/styles/base.less
index 88e72d7..9216cfe 100644
--- a/portal-ui/src/assets/styles/base.less
+++ b/portal-ui/src/assets/styles/base.less
@@ -23,25 +23,30 @@ body {
position: relative;
}
+body[arco-theme='dark'] {
+ color: #e5e7eb;
+ background-color: #121826;
+}
+
// firefox 滚动条样式
* {
- scrollbar-color: rgba(144, 147, 153, 0.5) #0f0f12;
+ scrollbar-color: rgba(77, 137, 255, 0.35) #121826;
}
/*滚动条整体样式*/
::-webkit-scrollbar {
- background-color: #0f0f12;
+ background-color: #121826;
}
/*滚动条里面小方块*/
::-webkit-scrollbar-thumb {
- background-color: red;
- border: 3px solid #0f0f12;
+ background-color: rgba(77, 137, 255, 0.35);
+ border: 3px solid #121826;
}
/*滚动条里面轨道*/
::-webkit-scrollbar-track {
- background: #0f0f12;
+ background: #121826;
}
:focus {
@@ -67,11 +72,22 @@ body {
// 正常页面切换动画
.page-enter-active {
- animation: page-in 0.3s;
+ animation: page-in 0.35s ease-out;
}
.page-leave-active {
- animation: page-in 0.3s reverse;
+ animation: page-in 0.28s ease-in reverse;
+}
+
+/* 路由视图淡入淡出（与 appMain 中 portal-page 过渡配合） */
+.portal-page-enter-active,
+.portal-page-leave-active {
+ transition: opacity 0.32s ease;
+}
+
+.portal-page-enter-from,
+.portal-page-leave-to {
+ opacity: 0;
}
@keyframes page-in {
@@ -195,11 +211,11 @@ fieldset {
padding: 20px 10px;
font-size: 14px;
font-weight: bold;
- color: #fd8000;
+ color: #f59e0b;
}
.page-error {
- color: red;
+ color: #ef4444;
font-size: 20px;
padding: 30px;
}
@@ -240,33 +256,51 @@ input:-webkit-autofill {
width: 100vw !important;
height: 100vh !important;
z-index: 100 !important;
- background: #fff;
+ background: #121826;
padding: 12px !important;
}
.arco-modal-simple {
- background: #0f0f12;
- border-radius: 10px;
- border: 2px solid #e6217a;
+ background: #1a1f2e;
+ border-radius: 12px;
+ border: none;
+ box-shadow:
+ inset 0 0 0 1px rgba(77, 137, 255, 0.12),
+ 0 4px 20px rgba(0, 0, 0, 0.35);
.arco-modal-title {
- color: #fff;
+ color: #e5e7eb;
}
.arco-modal-body {
- color: #fff;
+ color: #e5e7eb;
}
.arco-modal-footer {
.arco-btn-secondary {
- color: #ffffff;
- background-color: #1a1a1a;
- border: 1px solid #1a1a1a;
+ color: #e5e7eb;
+ background-color: #252b3a;
+ border: 1px solid rgba(77, 137, 255, 0.15);
&:hover {
- background-color: #262626;
+ background-color: rgba(77, 137, 255, 0.14);
+ box-shadow: 0 0 12px rgba(77, 137, 255, 0.25);
}
}
}
}
+/* 主按钮 hover：轻微提亮 + 外发光 */
+.arco-btn-primary:not(.arco-btn-disabled):hover {
+ filter: brightness(1.06);
+ box-shadow: 0 0 12px rgba(77, 137, 255, 0.4);
+}
+
+/* 输入类 focus 同色系发光边框 */
+.arco-input-wrapper:focus-within:not(.arco-input-disabled),
+.arco-textarea-wrapper:focus-within:not(.arco-textarea-disabled),
+.arco-select-view:focus-within:not(.arco-select-view-disabled) {
+ border-color: rgb(var(--primary-6)) !important;
+ box-shadow: 0 0 0 2px rgba(77, 137, 255, 0.22) !important;
+}
+
@media (max-width: 576px) {
.arco-modal-simple {
width: calc(100% - 20px);
diff --git a/portal-ui/src/assets/styles/var.less b/portal-ui/src/assets/styles/var.less
index d4a8e20..bb1c571 100644
--- a/portal-ui/src/assets/styles/var.less
+++ b/portal-ui/src/assets/styles/var.less
@@ -1,10 +1,40 @@
+/* portal-ui 暗色科技主题 — 设计令牌（与 Arco 暗色模式协同） */
+
body {
- // 背景色 - 浅
- --mf-color-bg-3: #f8f8fa;
+ --portal-bg-page: #121826;
+ --portal-bg-card: #1a1f2e;
+ --portal-bg-sub: #252b3a;
+ --portal-text: #e5e7eb;
+ --portal-text-2: #9ca3af;
+ --portal-text-disabled: #6b7280;
+ --portal-primary: #4d89ff;
+ --portal-accent: #9d6bff;
+ --portal-success: #10b981;
+ --portal-warning: #f59e0b;
+ --portal-danger: #ef4444;
+ --portal-glow-border: rgba(77, 137, 255, 0.1);
+ --portal-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.3);
+ --portal-shadow-glow: 0 0 12px rgba(77, 137, 255, 0.4);
+ --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: #252b3a;
+ /* Arco 语义色贴近本主题层级 */
+ --color-bg-1: #121826;
+ --color-bg-2: #1a1f2e;
+ --color-bg-3: #252b3a;
+ --color-bg-4: #2e3548;
+ --color-bg-5: #363d52;
+ --color-fill-1: rgba(255, 255, 255, 0.04);
+ --color-fill-2: rgba(255, 255, 255, 0.06);
+ --color-fill-3: rgba(255, 255, 255, 0.08);
+ --color-border-1: rgba(77, 137, 255, 0.12);
+ --color-border-2: rgba(77, 137, 255, 0.18);
+ --color-border-3: rgba(77, 137, 255, 0.25);
+ --color-text-1: #e5e7eb;
+ --color-text-2: #9ca3af;
+ --color-text-3: #9ca3af;
+ --color-text-4: #6b7280;
+}
diff --git a/portal-ui/src/components/Forbidden.vue b/portal-ui/src/components/Forbidden.vue
index 884e5ce..6b73a0d 100644
--- a/portal-ui/src/components/Forbidden.vue
+++ b/portal-ui/src/components/Forbidden.vue
@@ -81,9 +81,9 @@ export default {
overflow: hidden;
// width: 428px;
// height: 258px;
- // background: linear-gradient(0deg, #271433 0%, #e6217a 49%);
+ // background: linear-gradient(160deg, #121826 0%, #1a1f2e 100%);
// border-radius: 20px;
- // border: 2px solid #e6217a;
+ // border: none; box-shadow: inset 0 0 0 1px rgba(77,137,255,0.1);
// top: 45% !important;
// transform: translateY(-45%) !important;
diff --git a/portal-ui/src/components/Preview.vue b/portal-ui/src/components/Preview.vue
index 2026e48..bd03df9 100644
--- a/portal-ui/src/components/Preview.vue
+++ b/portal-ui/src/components/Preview.vue
@@ -41,9 +41,12 @@ export default {