From effe76d83fd1d89f720fa035807742a683234e40 Mon Sep 17 00:00:00 2001
From: chiyi <cyi.cc@outlook.com>
Date: Wed, 14 Oct 2026 17:24:47 +0800
Subject: [PATCH] =?UTF-8?q?style(admin):=20=E7=AE=A1=E7=90=86=E5=8F=B0?=
 =?UTF-8?q?=E5=85=A8=E5=B1=80=E6=A0=B7=E5=BC=8F=E5=8D=87=E7=BA=A7=E2=80=94?=
 =?UTF-8?q?=E2=80=94=E5=8D=A1=E7=89=87=E9=AB=98=E5=85=89=E3=80=81=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E7=BB=9F=E4=B8=80=E6=B6=A6=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- .card 圆角 xl→2xl,顶部加内高光(亮色 sheen/暗色 rim-light)
- 卡片内表格:thead 统一紫罗兰渐变底色,tbody 行 hover 统一紫光
  洗色 + 首列内描边,不再依赖各页散落的 hover:bg-white 工具类
- AdminLayout:顶栏 Admin 标签改紫→青渐变胶囊,侧栏 logo 副标
  改渐变文字

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

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 frontend/src/layouts/AdminLayout.vue | 14 +++++++++--
 frontend/src/style.css               | 36 +++++++++++++++++++++++-----
 2 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/frontend/src/layouts/AdminLayout.vue b/frontend/src/layouts/AdminLayout.vue
index fbd88b5..d7d0328 100644
--- a/frontend/src/layouts/AdminLayout.vue
+++ b/frontend/src/layouts/AdminLayout.vue
@@ -55,7 +55,7 @@ watch(() => route.path, () => {
         <Logo v-else :size="32" />
         <div class="leading-tight min-w-0">
           <div class="text-sm font-extrabold truncate tracking-tight text-[color:var(--fg)]">{{ site.title }}</div>
-          <div class="text-[11px] font-bold uppercase tracking-widest text-[color:var(--m-orange)] truncate">Admin</div>
+          <div class="admin-tag text-[11px] font-bold uppercase tracking-widest truncate">Admin</div>
         </div>
       </router-link>
 
@@ -118,7 +118,7 @@ watch(() => route.path, () => {
       </div>
 
       <header class="relative z-10 h-14 shrink-0 border-b border-b-[color:var(--ink-soft)] bg-[var(--app-bg)]/60 backdrop-blur-xl flex items-center px-8">
-        <div class="text-[10px] uppercase tracking-[0.25em] text-[color:var(--m-orange)] font-extrabold mr-3">Admin</div>
+        <div class="admin-badge text-[10px] uppercase tracking-[0.25em] font-extrabold mr-3 px-2.5 py-1 rounded-lg text-white select-none">Admin</div>
         <div class="text-[color:var(--fg-faint)] mr-3">/</div>
         <h1 class="text-sm font-semibold tracking-tight text-[color:var(--fg)]">{{ currentLabel }}</h1>
       </header>
@@ -137,6 +137,16 @@ watch(() => route.path, () => {
 </template>
 
 <style scoped>
+.admin-tag {
+  background: linear-gradient(120deg, #7c5cfc, #22d3ee);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.admin-badge {
+  background: linear-gradient(120deg, #7c5cfc, #5f6cf8 60%, #22d3ee 140%);
+  box-shadow: 0 4px 14px var(--accent-glow);
+}
 .admin-link {
   position: relative;
   display: flex;
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 1397a70..822536d 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -327,6 +327,28 @@ button:not(:disabled), [role="button"]:not([aria-disabled="true"]) { cursor: poi
    own utility so vertical clipping / rounded corners are preserved. */
 .card:has(> table) { overflow-x: auto; }
 
+/* ===== Admin table polish =====
+   Every data table lives in a `.card` and views hand-roll their own
+   th/td utilities — these rules unify the reading of all of them:
+   a faint violet band on the header row and a violet wash on row hover.
+   Scoped to `.theme-text` (the admin main wrapper) so public pages with
+   over-media tables are untouched; specificity outranks the per-view
+   Tailwind hover utilities and the light-mode white rescue. */
+.theme-text .card table thead {
+  background: linear-gradient(180deg, rgb(124 92 252 / 0.07), rgb(124 92 252 / 0.025));
+}
+html.dark .theme-text .card table thead {
+  background: linear-gradient(180deg, rgb(139 92 246 / 0.13), rgb(139 92 246 / 0.05));
+}
+.theme-text .card table tbody tr { transition: background-color 0.15s ease; }
+.theme-text .card table tbody tr:hover { background-color: rgb(124 92 252 / 0.08); }
+html.dark .theme-text .card table tbody tr:hover { background-color: rgb(139 92 246 / 0.11); }
+/* Checkbox column + first data column get a hair more air against the
+   card edge so dense tables don't feel cramped. */
+.theme-text .card table tbody tr:hover :is(td, th):first-child {
+  box-shadow: inset 2px 0 0 rgb(124 92 252 / 0.55);
+}
+
 ::-webkit-scrollbar { width: 9px; height: 9px; }
 ::-webkit-scrollbar-thumb { background: rgb(24 21 36 / 0.2); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
 ::-webkit-scrollbar-thumb:hover { background: rgb(24 21 36 / 0.38); background-clip: content-box; }
@@ -545,7 +567,7 @@ html.dark .memphis-dots {
   background: rgb(255 255 255 / 0.04);
   border-color: rgb(255 255 255 / 0.1);
   color: rgb(255 255 255 / 0.92);
-  box-shadow: var(--glass-shadow);
+  box-shadow: var(--glass-shadow), inset 0 1px 0 rgb(255 255 255 / 0.07);
 }
 .public-dark .field {
   background: rgb(255 255 255 / 0.04);
@@ -626,14 +648,16 @@ html.dark .memphis-dots {
 .public-dark .hover\:bg-slate-100:hover { background: rgb(255 255 255 / 0.06); }
 
 @layer components {
-  /* surfaces — frosted card with a hairline glass edge + soft shadow */
+  /* surfaces — frosted card with a hairline glass edge + soft shadow.
+     The inset top line is the light's "sheen" on the glass — barely
+     visible on white, reads as a subtle rim-light in dark mode. */
   .card {
-    @apply rounded-xl;
+    @apply rounded-2xl;
     background: var(--surface);
-    -webkit-backdrop-filter: blur(14px);
-    backdrop-filter: blur(14px);
+    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
     border: 1px solid var(--glass-border);
-    box-shadow: var(--glass-shadow);
+    box-shadow: var(--glass-shadow), inset 0 1px 0 rgb(255 255 255 / 0.55);
   }
 
   /* buttons — each variant is self-contained (Tailwind v4 can't @apply a custom class) */