From edd5253529b72779c92d3694e89abb1dbfbbcbf8 Mon Sep 17 00:00:00 2001
From: chiyi <cyi.cc@outlook.com>
Date: Tue, 27 Oct 2026 18:06:06 +0800
Subject: [PATCH] =?UTF-8?q?style(ui):=20=E6=93=8D=E4=BD=9C=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E6=94=B9=E5=B9=BD=E7=81=B5=E6=A0=B7=E5=BC=8F=E2=80=94?=
 =?UTF-8?q?=E2=80=94=E5=B9=B3=E6=97=B6=E4=BB=85=E5=9B=BE=E6=A0=87=EF=BC=8C?=
 =?UTF-8?q?=E6=82=AC=E5=81=9C=E5=87=BA=E5=BA=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- .act/.op 去底色边框，悬停浅灰底，危险按钮悬停淡红底+红字
- 用户/模型/兑换码/违禁词/并发分组/渠道六页统一

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        | 14 +++-----------
 frontend/src/views/ChannelsView.vue    |  4 ++--
 frontend/src/views/ConcurrencyView.vue |  9 ++++-----
 frontend/src/views/ModelsView.vue      | 25 ++++++-------------------
 frontend/src/views/UsersView.vue       | 14 +++-----------
 6 files changed, 22 insertions(+), 53 deletions(-)

diff --git a/frontend/src/views/BannedWordsView.vue b/frontend/src/views/BannedWordsView.vue
index a415964..8253a5b 100644
--- a/frontend/src/views/BannedWordsView.vue
+++ b/frontend/src/views/BannedWordsView.vue
@@ -202,14 +202,13 @@ onMounted(load)
 <style scoped>
 .act {
   display: inline-flex; align-items: center; justify-content: center;
-  width: 1.9rem; height: 1.9rem; border-radius: 0.5rem;
-  color: var(--fg-2); background: var(--surface-2);
-  box-shadow: inset 0 0 0 1px var(--hairline);
+  width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
+  color: var(--fg-3); background: transparent;
   transition: background 0.15s, color 0.15s;
 }
 .act:hover { background: var(--hover); color: var(--fg); }
-.act.danger { color: rgb(253 164 175); background: rgb(244 63 94 / 0.12); box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.3); }
-.act.danger:hover { color: white; background: rgb(244 63 94 / 0.25); }
+.act.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; }
+
 .btn-soft.danger {
   color: rgb(253 164 175);
   background: rgb(244 63 94 / 0.12);
diff --git a/frontend/src/views/CdksView.vue b/frontend/src/views/CdksView.vue
index 324edf0..f52f788 100644
--- a/frontend/src/views/CdksView.vue
+++ b/frontend/src/views/CdksView.vue
@@ -332,20 +332,12 @@ const pageNumbers = computed(() => {
 /* row icon action buttons — mirror 账号管理 for a consistent look */
 .act {
   display: inline-flex; align-items: center; justify-content: center;
-  width: 1.9rem; height: 1.9rem;
-  border-radius: 0.5rem;
-  color: var(--fg-2);
-  background: var(--surface-2);
-  box-shadow: inset 0 0 0 1px var(--hairline);
+  width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
+  color: var(--fg-3); background: transparent;
   transition: background 0.15s, color 0.15s;
 }
 .act:hover { background: var(--hover); color: var(--fg); }
-.act.danger {
-  color: rgb(253 164 175);
-  background: rgb(244 63 94 / 0.12);
-  box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.3);
-}
-.act.danger:hover { color: white; background: rgb(244 63 94 / 0.25); }
+.act.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; }
 
 .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 bfd20f4..9c0717b 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: 26px; padding: 0 7px; margin-left: 4px; border-radius: 7px; background: var(--surface-2); color: var(--fg-2); }
+.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.15); color: rgb(251 113 133); }
+.op.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; }
 
 /* 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 2a30971..58d6286 100644
--- a/frontend/src/views/ConcurrencyView.vue
+++ b/frontend/src/views/ConcurrencyView.vue
@@ -137,14 +137,13 @@ onMounted(load)
 <style scoped>
 .act {
   display: inline-flex; align-items: center; justify-content: center;
-  width: 1.9rem; height: 1.9rem; border-radius: 0.5rem;
-  color: var(--fg-2); background: var(--surface-2);
-  box-shadow: inset 0 0 0 1px var(--hairline);
+  width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
+  color: var(--fg-3); background: transparent;
   transition: background 0.15s, color 0.15s;
 }
 .act:hover { background: var(--hover); color: var(--fg); }
-.act.danger { color: rgb(253 164 175); background: rgb(244 63 94 / 0.12); box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.3); }
-.act.danger:hover { color: white; background: rgb(244 63 94 / 0.25); }
+.act.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; }
+
 .fade-enter-active, .fade-leave-active { transition: opacity 0.15s ease; }
 .fade-enter-from, .fade-leave-to { opacity: 0; }
 </style>
diff --git a/frontend/src/views/ModelsView.vue b/frontend/src/views/ModelsView.vue
index dda93b9..f33038f 100644
--- a/frontend/src/views/ModelsView.vue
+++ b/frontend/src/views/ModelsView.vue
@@ -273,25 +273,12 @@ onMounted(loadModels)
 
 /* --- compact square icon button for the actions column --- */
 .act {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.9rem;
-  height: 1.9rem;
-  border-radius: 0.5rem;
-  color: var(--fg-2);
-  background: var(--surface-2);
-  box-shadow: inset 0 0 0 1px var(--hairline);
-  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
+  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;
 }
 .act:hover { background: var(--hover); color: var(--fg); }
-.act.danger {
-  color: rgb(225 29 72);
-  background: rgb(244 63 94 / 0.08);
-  box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.22);
-}
-.act.danger:hover {
-  color: #fff;
-  background: rgb(225 29 72);
-}
+.act.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; }
+
 </style>
diff --git a/frontend/src/views/UsersView.vue b/frontend/src/views/UsersView.vue
index 5deea5b..a0efcff 100644
--- a/frontend/src/views/UsersView.vue
+++ b/frontend/src/views/UsersView.vue
@@ -625,20 +625,12 @@ async function doRecharge() {
 /* --- icon-only action buttons */
 .act {
   display: inline-flex; align-items: center; justify-content: center;
-  width: 1.9rem; height: 1.9rem;
-  border-radius: 0.5rem;
-  color: var(--fg-2);
-  background: var(--surface-2);
-  box-shadow: inset 0 0 0 1px var(--hairline);
+  width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
+  color: var(--fg-3); background: transparent;
   transition: background 0.15s, color 0.15s;
 }
 .act:hover { background: var(--hover); color: var(--fg); }
-.act.danger {
-  color: rgb(253 164 175);
-  background: rgb(244 63 94 / 0.12);
-  box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.3);
-}
-.act.danger:hover { color: white; background: rgb(244 63 94 / 0.25); }
+.act.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; }
 
 /* disabled inputs in the edit modal — readable, but visually 'cool' so the
    admin knows they can't change them. */