chiyi/image2api
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): 全站统一首页墨黑中性风格，固定亮色并移除光暗切换

Browse Source 
- 全站紫/青/粉写死色值与 CSS 变量改为墨黑中性色板
- 移除 aurora 光斑/星点装饰，登录弹窗改纯白卡片
- theme.js 固定亮色并清除历史 dark 选择，删除前台/后台/画布切换按钮
- 模型页空状态文案对齐「保存渠道即自动同步」

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
chiyi
2026-10-27 16:17:55 +08:00
co-authored by Devin
parent 8b85d5623a
commit 4d31219368
22 changed files with 155 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AnnouncementModal.vue
+3 -3
View File
@@ -17,7 +17,7 @@ const html = computed(() => marked.parse(announcement.content.trim() || '暂无
<div class="px-6 py-4 border-b border-b-[color:var(--ink-soft)] flex items-center justify-between gap-3 shrink-0">
<div class="flex items-center gap-2">
<span class="w-7 h-7 rounded-lg text-white grid place-items-center"
style="background: linear-gradient(135deg, #7c5cfc, #22d3ee); box-shadow: 0 4px 12px var(--accent-glow)">
style="background: linear-gradient(135deg, #18181b, #52525b); box-shadow: 0 4px 12px var(--accent-glow)">
<Icon name="spark" class="w-4 h-4" />
</span>
<h2 class="text-base font-extrabold">公告</h2>
@@ -30,7 +30,7 @@ const html = computed(() => marked.parse(announcement.content.trim() || '暂无
<div class="px-6 py-4 border-t border-t-[color:var(--ink-soft)] flex justify-end shrink-0">
<button @click="dismissAnnouncement"
class="rounded-lg text-white border border-white/20 px-5 py-2 text-sm font-extrabold hover:-translate-y-0.5 active:translate-y-0.5 transition-all"
style="background: linear-gradient(120deg, #7c5cfc, #22d3ee); box-shadow: 0 8px 20px var(--accent-glow)">
style="background: linear-gradient(120deg, #18181b, #52525b); box-shadow: 0 8px 20px var(--accent-glow)">
我知道了
</button>
</div>
@@ -55,7 +55,7 @@ const html = computed(() => marked.parse(announcement.content.trim() || '暂无
.ann-body :deep(li) { margin: 0.2em 0; }
.ann-body :deep(a) { color: var(--m-orange); text-decoration: underline; }
.ann-body :deep(strong) { font-weight: 700; color: var(--fg); }
.ann-body :deep(code) { background: rgb(124 92 252 / 0.12); padding: 0.1em 0.35em; border-radius: 0.3rem; font-size: 0.85em; }
.ann-body :deep(code) { background: rgb(24 24 27 / 0.12); padding: 0.1em 0.35em; border-radius: 0.3rem; font-size: 0.85em; }
.ann-body :deep(pre) { background: #111; color: #f5f5f5; padding: 0.8em; border-radius: 0.5rem; overflow-x: auto; margin: 0.6em 0; }
.ann-body :deep(pre code) { background: none; padding: 0; }
.ann-body :deep(blockquote) { border-left: 3px solid var(--m-orange); padding-left: 0.9em; color: var(--fg-3); margin: 0.6em 0; }
frontend/src/components/LoginModal.vue
+11 -16
View File
@@ -161,12 +161,9 @@ async function submit() {
<template>
<transition name="modal">
<div v-if="auth.loginOpen" class="fixed inset-0 z-50 grid place-items-center px-4">
<div class="absolute inset-0 bg-black/70 backdrop-blur-md" @click="closeLogin"></div>
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="closeLogin"></div>
<div class="card relative z-10 w-full max-w-[26rem]">
<!-- ambient aurora washes -->
<div class="pointer-events-none absolute -top-24 -right-16 h-56 w-56 rounded-full bg-[#8b5cf6]/30 blur-3xl"></div>
<div class="pointer-events-none absolute -bottom-24 -left-16 h-56 w-56 rounded-full bg-[#22d3ee]/25 blur-3xl"></div>
<div class="relative p-7">
<button class="absolute top-4 right-4 grid h-7 w-7 place-items-center rounded-lg text-[color:var(--fg-3)] hover:text-[color:var(--fg)] hover:bg-[var(--hover)] transition-colors"
@@ -263,11 +260,9 @@ async function submit() {
<style scoped>
.card {
border-radius: 1.2rem;
background: var(--menu-bg);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
background: #ffffff;
color: var(--fg);
border: 1px solid var(--glass-border);
border: 1px solid rgb(24 24 27 / 0.08);
box-shadow: var(--glass-shadow-lg);
overflow: hidden;
}
@@ -277,7 +272,7 @@ html.dark .card {
.logo-halo {
position: relative;
filter: drop-shadow(0 6px 14px rgb(124 92 252 / 0.4));
filter: drop-shadow(0 6px 14px rgb(24 24 27 / 0.4));
}
/* segmented tab control */
@@ -296,7 +291,7 @@ html.dark .card {
.tab:hover { color: var(--fg); }
.tab-on {
color: #fff;
background: linear-gradient(120deg, #7c5cfc, #5f6cf8);
background: linear-gradient(120deg, #18181b, #27272a);
border-color: transparent;
box-shadow: 0 4px 14px var(--accent-glow);
}
@@ -317,8 +312,8 @@ html.dark .card {
}
html.dark .fld { background: rgb(255 255 255 / 0.05); }
.fld:focus {
border-color: rgb(124 92 252 / 0.65);
box-shadow: 0 0 0 3px rgb(124 92 252 / 0.18);
border-color: rgb(24 24 27 / 0.65);
box-shadow: 0 0 0 3px rgb(24 24 27 / 0.18);
}
.fld::placeholder { color: var(--fg-faint); }
/* Keep autofill on-theme in dark (otherwise it paints white/yellow). */
@@ -345,11 +340,11 @@ html.dark .fld:-webkit-autofill:focus {
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.75rem; font-weight: 800; white-space: nowrap;
color: var(--fg);
background: var(--hover); border: 1px solid rgb(124 92 252 / 0.4);
box-shadow: 0 2px 10px rgb(124 92 252 / 0.14);
background: var(--hover); border: 1px solid rgb(24 24 27 / 0.4);
box-shadow: 0 2px 10px rgb(24 24 27 / 0.14);
transition: background 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}
.code-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px rgb(124 92 252 / 0.22); }
.code-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px rgb(24 24 27 / 0.22); }
.code-btn:active:not(:disabled) { transform: scale(0.96) translateY(1px); box-shadow: none; }
/* Disabled (sending / countdown): just dim — keep the theme text color so it
never washes out to invisible white on the light card. */
@@ -361,7 +356,7 @@ html.dark .fld:-webkit-autofill:focus {
display: flex; align-items: center; justify-content: center; gap: 0.5rem;
padding: 0.72rem 0; border-radius: 0.65rem; font-size: 0.9rem; font-weight: 800;
letter-spacing: 0.02em; color: white; margin-top: 0.35rem;
background: linear-gradient(120deg, #7c5cfc, #5f6cf8 55%, #22d3ee 140%);
background: linear-gradient(120deg, #18181b, #27272a 55%, #52525b 140%);
border: 1px solid rgb(255 255 255 / 0.16);
box-shadow: 0 8px 22px var(--accent-glow);
transition: transform 0.13s, box-shadow 0.13s, filter 0.15s;
frontend/src/components/PaymentModal.vue
+2 -2
View File
@@ -129,7 +129,7 @@ onUnmounted(clearTimers)
<p class="text-sm text-[color:var(--fg-3)] mt-1">二维码已失效,订单已取消</p>
<p class="text-xs text-[color:var(--fg-faint)] mt-1">如需充值请重新下单</p>
<button @click="finish" class="mt-5 rounded-lg text-white border border-white/20 px-5 py-2 text-sm font-extrabold hover:-translate-y-0.5 active:translate-y-0.5 transition-all"
style="background: linear-gradient(120deg, #7c5cfc, #22d3ee); box-shadow: 0 8px 20px var(--accent-glow)">关闭</button>
style="background: linear-gradient(120deg, #18181b, #52525b); box-shadow: 0 8px 20px var(--accent-glow)">关闭</button>
</div>
<!-- pending -->
@@ -147,7 +147,7 @@ onUnmounted(clearTimers)
<!-- jump (no qrcode): the cashier opened in a new tab — just monitor -->
<template v-else>
<div class="flex flex-col items-center justify-center py-7 mb-2">
<div class="w-12 h-12 rounded-full border-[3px] border-[rgb(124_92_252/0.2)] border-t-[#7c5cfc] animate-spin mb-3"></div>
<div class="w-12 h-12 rounded-full border-[3px] border-[rgb(124_92_252/0.2)] border-t-[#18181b] animate-spin mb-3"></div>
<p class="text-sm font-medium text-[color:var(--fg)]">支付监控中…</p>
<p class="text-xs text-[color:var(--fg-faint)] mt-1">已打开支付页面,完成后自动到账</p>
</div>
frontend/src/components/canvas/CanvasNodeView.vue
+6 -6
View File
@@ -240,8 +240,8 @@ defineExpose({ startEdit, commitNote })
overflow: hidden;
}
.cv-node.is-selected {
border-color: rgb(124 92 252 / 0.7);
box-shadow: var(--glass-shadow-lg), 0 0 0 3px rgb(124 92 252 / 0.25), 0 10px 30px var(--accent-glow);
border-color: rgb(24 24 27 / 0.7);
box-shadow: var(--glass-shadow-lg), 0 0 0 3px rgb(24 24 27 / 0.25), 0 10px 30px var(--accent-glow);
}
.cv-node:active {
cursor: grabbing;
@@ -337,8 +337,8 @@ html.dark .cv-node--note {
justify-content: center;
gap: 10px;
background:
radial-gradient(130% 130% at 15% 0%, rgb(124 92 252 / 0.14), transparent 55%),
radial-gradient(130% 130% at 85% 100%, rgb(34 211 238 / 0.12), transparent 55%),
radial-gradient(130% 130% at 15% 0%, rgb(24 24 27 / 0.14), transparent 55%),
radial-gradient(130% 130% at 85% 100%, rgb(24 24 27 / 0.12), transparent 55%),
var(--surface);
}
.cv-node__gen::after {
@@ -371,7 +371,7 @@ html.dark .cv-node--note {
width: 34px;
height: 34px;
border-radius: 50%;
border: 3px solid rgb(124 92 252 / 0.2);
border: 3px solid rgb(24 24 27 / 0.2);
border-top-color: var(--m-orange);
border-right-color: var(--m-orange-2);
animation: cv-spin 0.9s linear infinite;
@@ -417,7 +417,7 @@ html.dark .cv-node--note {
}
.cv-port:hover::after, .cv-port:focus-visible::after, .cv-port.is-active::after {
transform: scale(1.3);
box-shadow: 0 0 0 4px rgb(124 92 252 / 0.25), 0 2px 10px var(--accent-glow);
box-shadow: 0 0 0 4px rgb(24 24 27 / 0.25), 0 2px 10px var(--accent-glow);
}
.cv-port.is-active::after { background: var(--m-orange); }
.cv-port:focus-visible { outline: 2px solid var(--m-orange); outline-offset: -2px; border-radius: 50%; }
frontend/src/components/canvas/CanvasStage.vue
+3 -3
View File
@@ -811,7 +811,7 @@ defineExpose({
stroke: rgb(95 108 248 / 0.85);
stroke-width: 2.4;
stroke-dasharray: 10 6;
filter: drop-shadow(0 0 5px rgb(124 92 252 / 0.3));
filter: drop-shadow(0 0 5px rgb(24 24 27 / 0.3));
}
.cv-edge--hot {
stroke: var(--m-orange);
@@ -843,8 +843,8 @@ defineExpose({
}
.cv-marquee {
position: absolute;
border: 2px dashed rgb(124 92 252 / 0.5);
background: rgb(124 92 252 / 0.08);
border: 2px dashed rgb(24 24 27 / 0.5);
background: rgb(24 24 27 / 0.08);
pointer-events: none;
border-radius: 4px;
}