From e8e5527e63c3981b6a11854a02b6451c4b28fa12 Mon Sep 17 00:00:00 2001 From: chiyi Date: Tue, 27 Oct 2026 18:12:31 +0800 Subject: [PATCH] =?UTF-8?q?style(ui):=20=E6=93=8D=E4=BD=9C=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E7=99=BD=E5=BA=95=E7=81=B0=E8=BE=B9=EF=BC=8C=E5=8D=B1?= =?UTF-8?q?=E9=99=A9=E6=8C=89=E9=92=AE=E6=82=AC=E5=81=9C=E6=B7=A1=E7=BA=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- frontend/src/views/BannedWordsView.vue | 9 +++++---- frontend/src/views/CdksView.vue | 9 +++++---- frontend/src/views/ChannelsView.vue | 6 +++--- frontend/src/views/ConcurrencyView.vue | 9 +++++---- frontend/src/views/ModelsView.vue | 9 +++++---- frontend/src/views/UsersView.vue | 9 +++++---- 6 files changed, 28 insertions(+), 23 deletions(-) diff --git a/frontend/src/views/BannedWordsView.vue b/frontend/src/views/BannedWordsView.vue index 8253a5b..c900634 100644 --- a/frontend/src/views/BannedWordsView.vue +++ b/frontend/src/views/BannedWordsView.vue @@ -203,11 +203,12 @@ onMounted(load) .act { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 0.6rem; - color: var(--fg-3); background: transparent; - transition: background 0.15s, color 0.15s; + color: var(--fg-3); background: var(--surface-solid); + box-shadow: inset 0 0 0 1px var(--hairline); + transition: background 0.15s, color 0.15s, box-shadow 0.15s; } -.act:hover { background: var(--hover); color: var(--fg); } -.act.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; } +.act:hover { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px rgb(24 24 27 / 0.14); } +.act.danger:hover { background: rgb(244 63 94 / 0.08); color: #dc2626; box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.28); } .btn-soft.danger { color: rgb(253 164 175); diff --git a/frontend/src/views/CdksView.vue b/frontend/src/views/CdksView.vue index f52f788..a684737 100644 --- a/frontend/src/views/CdksView.vue +++ b/frontend/src/views/CdksView.vue @@ -333,11 +333,12 @@ const pageNumbers = computed(() => { .act { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 0.6rem; - color: var(--fg-3); background: transparent; - transition: background 0.15s, color 0.15s; + color: var(--fg-3); background: var(--surface-solid); + box-shadow: inset 0 0 0 1px var(--hairline); + transition: background 0.15s, color 0.15s, box-shadow 0.15s; } -.act:hover { background: var(--hover); color: var(--fg); } -.act.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; } +.act:hover { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px rgb(24 24 27 / 0.14); } +.act.danger:hover { background: rgb(244 63 94 / 0.08); color: #dc2626; box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.28); } .fp { display: inline-flex; align-items: center; gap: 0.35rem; diff --git a/frontend/src/views/ChannelsView.vue b/frontend/src/views/ChannelsView.vue index 9c0717b..7617625 100644 --- a/frontend/src/views/ChannelsView.vue +++ b/frontend/src/views/ChannelsView.vue @@ -324,9 +324,9 @@ onMounted(load) .lbl { display: block; font-size: 0.72rem; font-weight: 500; color: var(--fg-3); margin-bottom: 0.4rem; } -.op { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; margin-left: 4px; border-radius: 8px; background: transparent; color: var(--fg-3); transition: background 0.15s, color 0.15s; } -.op:hover { background: var(--hover); color: var(--fg); } -.op.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; } +.op { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; margin-left: 4px; border-radius: 8px; background: var(--surface-solid); color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--hairline); transition: background 0.15s, color 0.15s, box-shadow 0.15s; } +.op:hover { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px rgb(24 24 27 / 0.14); } +.op.danger:hover { background: rgb(244 63 94 / 0.08); color: #dc2626; box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.28); } /* iOS-style switch for 模型开关 in the sync modal */ .sw { position: relative; width: 2rem; height: 1.15rem; border-radius: 9999px; background: var(--hover); box-shadow: inset 0 0 0 1px var(--hairline); transition: background 0.18s ease; flex-shrink: 0; } diff --git a/frontend/src/views/ConcurrencyView.vue b/frontend/src/views/ConcurrencyView.vue index 58d6286..b90da7f 100644 --- a/frontend/src/views/ConcurrencyView.vue +++ b/frontend/src/views/ConcurrencyView.vue @@ -138,11 +138,12 @@ onMounted(load) .act { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 0.6rem; - color: var(--fg-3); background: transparent; - transition: background 0.15s, color 0.15s; + color: var(--fg-3); background: var(--surface-solid); + box-shadow: inset 0 0 0 1px var(--hairline); + transition: background 0.15s, color 0.15s, box-shadow 0.15s; } -.act:hover { background: var(--hover); color: var(--fg); } -.act.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; } +.act:hover { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px rgb(24 24 27 / 0.14); } +.act.danger:hover { background: rgb(244 63 94 / 0.08); color: #dc2626; box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.28); } .fade-enter-active, .fade-leave-active { transition: opacity 0.15s ease; } .fade-enter-from, .fade-leave-to { opacity: 0; } diff --git a/frontend/src/views/ModelsView.vue b/frontend/src/views/ModelsView.vue index f33038f..fc5a5ab 100644 --- a/frontend/src/views/ModelsView.vue +++ b/frontend/src/views/ModelsView.vue @@ -275,10 +275,11 @@ onMounted(loadModels) .act { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 0.6rem; - color: var(--fg-3); background: transparent; - transition: background 0.15s, color 0.15s; + color: var(--fg-3); background: var(--surface-solid); + box-shadow: inset 0 0 0 1px var(--hairline); + transition: background 0.15s, color 0.15s, box-shadow 0.15s; } -.act:hover { background: var(--hover); color: var(--fg); } -.act.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; } +.act:hover { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px rgb(24 24 27 / 0.14); } +.act.danger:hover { background: rgb(244 63 94 / 0.08); color: #dc2626; box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.28); } diff --git a/frontend/src/views/UsersView.vue b/frontend/src/views/UsersView.vue index c51bf3d..6996252 100644 --- a/frontend/src/views/UsersView.vue +++ b/frontend/src/views/UsersView.vue @@ -628,11 +628,12 @@ async function doRecharge() { .act { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 0.6rem; - color: var(--fg-3); background: transparent; - transition: background 0.15s, color 0.15s; + color: var(--fg-3); background: var(--surface-solid); + box-shadow: inset 0 0 0 1px var(--hairline); + transition: background 0.15s, color 0.15s, box-shadow 0.15s; } -.act:hover { background: var(--hover); color: var(--fg); } -.act.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; } +.act:hover { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px rgb(24 24 27 / 0.14); } +.act.danger:hover { background: rgb(244 63 94 / 0.08); color: #dc2626; box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.28); } /* disabled inputs in the edit modal — readable, but visually 'cool' so the admin knows they can't change them. */