From df6ef5ad22b37e59f4f5cb9721d0127fc2976d57 Mon Sep 17 00:00:00 2001
From: chiyi <cyi.cc@outlook.com>
Date: Tue, 27 Oct 2026 17:37:27 +0800
Subject: [PATCH] =?UTF-8?q?style(ui):=20=E5=85=A8=E7=AB=99=E7=A9=BA?=
 =?UTF-8?q?=E5=8D=A0=E4=BD=8D=E7=BB=9F=E4=B8=80=E4=B8=BA=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E5=9D=97=20+=20=E6=96=87=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增全局 .empty/.empty-ico/.empty-text/.empty-sub
- 渠道、并发分组、违禁词、触发记录、兑换码、订单、邀请日志、
  文档模型表、作品管理的空态全部改为图标块样式
- 渠道表单状态已另改滑动开关

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

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 frontend/src/style.css                    |  6 ++++++
 frontend/src/views/AdminOrdersView.vue    |  7 +++++--
 frontend/src/views/BannedWordHitsView.vue |  7 +++++--
 frontend/src/views/BannedWordsView.vue    |  7 +++++--
 frontend/src/views/CdksView.vue           | 12 +++++++++---
 frontend/src/views/ChannelsView.vue       | 12 ++++++++----
 frontend/src/views/ConcurrencyView.vue    |  7 +++++--
 frontend/src/views/DocsView.vue           |  5 ++++-
 frontend/src/views/ImagesView.vue         |  8 ++++----
 frontend/src/views/InvitesAdminView.vue   |  7 +++++--
 frontend/src/views/LogsView.vue           |  8 ++++----
 frontend/src/views/ModelsView.vue         | 10 +++++-----
 frontend/src/views/UsersView.vue          | 10 +++++-----
 13 files changed, 70 insertions(+), 36 deletions(-)

diff --git a/frontend/src/style.css b/frontend/src/style.css
index 017ff5f..ed7eb15 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -359,6 +359,12 @@ button:not(:disabled), [role="button"]:not([aria-disabled="true"]) { cursor: poi
 /* 表体单元格基线：没显式设颜色的 td 统一次要色，数字/名称列各自覆盖 */
 .theme-text .card table tbody td { color: var(--fg-2); }
 .theme-text .card table tbody tr.row-on td:first-child { box-shadow: inset 2px 0 0 #18181b; }
+
+/* ── 空占位：图标块 + 文案，全站表格/卡片共用 ── */
+.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 4.5rem 1.5rem; color: var(--fg-3); text-align: center; }
+.empty-ico { width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: var(--surface-2); border: 1px solid var(--hairline); display: grid; place-items: center; color: var(--fg-3); }
+.empty-text { font-size: 0.875rem; }
+.empty-sub { font-size: 0.75rem; color: var(--fg-3); margin-top: -0.375rem; }
 .public-dark .hover\:bg-slate-50:hover { background: rgb(255 255 255 / 0.04); }
 .public-dark .hover\:bg-slate-100:hover { background: rgb(255 255 255 / 0.06); }
 
diff --git a/frontend/src/views/AdminOrdersView.vue b/frontend/src/views/AdminOrdersView.vue
index dc72039..da96412 100644
--- a/frontend/src/views/AdminOrdersView.vue
+++ b/frontend/src/views/AdminOrdersView.vue
@@ -95,8 +95,11 @@ function goPage(n) {
       </div>
     </div>
 
-    <div v-if="loading && !items.length" class="card text-center text-sm text-white/40 py-20">加载中…</div>
-    <div v-else-if="!total" class="card text-center text-sm text-white/40 py-20">暂无订单</div>
+    <div v-if="loading && !items.length" class="card empty"><span class="empty-text">加载中…</span></div>
+    <div v-else-if="!total" class="card empty">
+      <span class="empty-ico"><Icon name="receipt" class="w-6 h-6" /></span>
+      <span class="empty-text">暂无订单</span>
+    </div>
 
     <div v-else class="card overflow-x-auto !p-0">
       <table class="w-full text-sm log-table min-w-[820px]">
diff --git a/frontend/src/views/BannedWordHitsView.vue b/frontend/src/views/BannedWordHitsView.vue
index ba70f58..4ddd027 100644
--- a/frontend/src/views/BannedWordHitsView.vue
+++ b/frontend/src/views/BannedWordHitsView.vue
@@ -85,8 +85,11 @@ function goPage(n) {
           </tr>
         </thead>
         <tbody>
-          <tr v-if="loading && !items.length"><td colspan="4" class="text-center text-xs text-white/40 py-10">加载中…</td></tr>
-          <tr v-else-if="!items.length"><td colspan="4" class="text-center text-xs text-white/40 py-10">{{ search.trim() ? '没有匹配的记录' : '还没有触发记录' }}</td></tr>
+          <tr v-if="loading && !items.length"><td colspan="4"><div class="empty"><span class="empty-text">加载中…</span></div></td></tr>
+          <tr v-else-if="!items.length"><td colspan="4"><div class="empty">
+            <span class="empty-ico"><Icon name="ban" class="w-6 h-6" /></span>
+            <span class="empty-text">{{ search.trim() ? '没有匹配的记录' : '还没有触发记录' }}</span>
+          </div></td></tr>
           <tr v-for="h in items" :key="h.id" class="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors align-top">
             <td class="px-5 py-3.5 text-sm font-medium text-rose-300">{{ h.word }}</td>
             <td class="px-3 py-3.5">
diff --git a/frontend/src/views/BannedWordsView.vue b/frontend/src/views/BannedWordsView.vue
index c10fdf7..bed4d55 100644
--- a/frontend/src/views/BannedWordsView.vue
+++ b/frontend/src/views/BannedWordsView.vue
@@ -152,8 +152,11 @@ onMounted(load)
           </tr>
         </thead>
         <tbody>
-          <tr v-if="loading && !items.length"><td colspan="5" class="text-center text-xs text-white/40 py-10">加载中…</td></tr>
-          <tr v-else-if="!items.length"><td colspan="5" class="text-center text-xs text-white/40 py-10">还没有违禁词</td></tr>
+          <tr v-if="loading && !items.length"><td colspan="5"><div class="empty"><span class="empty-text">加载中…</span></div></td></tr>
+          <tr v-else-if="!items.length"><td colspan="5"><div class="empty">
+            <span class="empty-ico"><Icon name="ban" class="w-6 h-6" /></span>
+            <span class="empty-text">还没有违禁词</span>
+          </div></td></tr>
           <tr v-for="w in pagedItems" :key="w.id" class="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors" :class="selected.has(w.id) && 'row-on'">
             <td class="px-3 py-3.5 align-middle text-center">
               <input type="checkbox" :checked="selected.has(w.id)" @change="toggleSelect(w.id)" @click.stop class="chk" />
diff --git a/frontend/src/views/CdksView.vue b/frontend/src/views/CdksView.vue
index b78d110..dc41491 100644
--- a/frontend/src/views/CdksView.vue
+++ b/frontend/src/views/CdksView.vue
@@ -218,9 +218,15 @@ const pageNumbers = computed(() => {
 
     <!-- table -->
     <div class="card overflow-hidden">
-      <div v-if="loading && !items.length" class="text-center text-sm text-white/40 py-16">加载中…</div>
-      <div v-else-if="!items.length && !stats.total" class="text-center text-sm text-white/40 py-16">还没有兑换码</div>
-      <div v-else-if="!items.length" class="text-center text-sm text-white/40 py-16">没有匹配的兑换码</div>
+      <div v-if="loading && !items.length" class="empty"><span class="empty-text">加载中…</span></div>
+      <div v-else-if="!items.length && !stats.total" class="empty">
+        <span class="empty-ico"><Icon name="key" class="w-6 h-6" /></span>
+        <span class="empty-text">还没有兑换码</span>
+      </div>
+      <div v-else-if="!items.length" class="empty">
+        <span class="empty-ico"><Icon name="key" class="w-6 h-6" /></span>
+        <span class="empty-text">没有匹配的兑换码</span>
+      </div>
       <table v-else class="w-full text-sm">
         <colgroup>
           <col class="w-9" />
diff --git a/frontend/src/views/ChannelsView.vue b/frontend/src/views/ChannelsView.vue
index 18f2981..707337f 100644
--- a/frontend/src/views/ChannelsView.vue
+++ b/frontend/src/views/ChannelsView.vue
@@ -204,8 +204,12 @@ onMounted(load)
                 <button @click="del(c)" class="op danger" title="删除"><Icon name="trash" class="w-3.5 h-3.5" /></button>
               </td>
             </tr>
-            <tr v-if="loading"><td colspan="11" class="py-10 text-center text-white/40 text-sm">正在加载渠道…</td></tr>
-            <tr v-else-if="!channels.length"><td colspan="11" class="py-10 text-center text-white/40 text-sm">没有渠道，点上方「添加渠道」接入上游实例</td></tr>
+            <tr v-if="loading"><td colspan="11"><div class="empty"><span class="empty-text">正在加载渠道…</span></div></td></tr>
+            <tr v-else-if="!channels.length"><td colspan="11"><div class="empty">
+              <span class="empty-ico"><Icon name="plug" class="w-6 h-6" /></span>
+              <span class="empty-text">还没有渠道</span>
+              <span class="empty-sub">点上方「添加渠道」接入上游实例</span>
+            </div></td></tr>
           </tbody>
         </table>
       </div>
@@ -269,11 +273,11 @@ onMounted(load)
           <button @click="fetchTarget = null" class="text-white/40 hover:text-white transition-colors"><Icon name="close" class="w-5 h-5" /></button>
         </div>
         <div class="p-5">
-          <div v-if="fetching" class="py-10 text-center text-white/40 text-sm">正在从上游拉取模型列表…</div>
+          <div v-if="fetching" class="empty !py-10"><span class="empty-text">正在从上游拉取模型列表…</span></div>
           <template v-else>
             <p class="text-xs text-white/45 mb-3 leading-relaxed">开启的模型会同步到本站模型列表，参数随上游带入；到「模型管理」配价后上架。别名即本站模型标识，留空 = 与上游同名。</p>
             <p v-if="fetchErr" class="text-xs text-rose-300 mb-3">{{ fetchErr }}</p>
-            <div v-if="!specs.length" class="py-10 text-center text-white/40 text-sm">上游没有可售模型（模型需在上游已配价）</div>
+            <div v-if="!specs.length" class="empty !py-10"><span class="empty-text">上游没有可售模型（模型需在上游已配价）</span></div>
             <div v-else class="space-y-2 max-h-[400px] overflow-y-auto p-0.5">
               <div v-for="s in specs" :key="s.id" @click="togglePick(s.id)"
                    class="p-3 rounded-xl ring-1 ring-white/10 bg-white/[0.02] hover:bg-white/[0.04] hover:ring-white/20 cursor-pointer transition-all space-y-2"
diff --git a/frontend/src/views/ConcurrencyView.vue b/frontend/src/views/ConcurrencyView.vue
index 9dbdce6..021c4cc 100644
--- a/frontend/src/views/ConcurrencyView.vue
+++ b/frontend/src/views/ConcurrencyView.vue
@@ -75,8 +75,11 @@ onMounted(load)
           </tr>
         </thead>
         <tbody>
-          <tr v-if="loading"><td colspan="5" class="text-center text-xs text-white/40 py-10">加载中…</td></tr>
-          <tr v-else-if="!items.length"><td colspan="5" class="text-center text-xs text-white/40 py-10">还没有分组</td></tr>
+          <tr v-if="loading"><td colspan="5"><div class="empty"><span class="empty-text">加载中…</span></div></td></tr>
+          <tr v-else-if="!items.length"><td colspan="5"><div class="empty">
+            <span class="empty-ico"><Icon name="layers" class="w-6 h-6" /></span>
+            <span class="empty-text">还没有分组</span>
+          </div></td></tr>
           <tr v-for="g in items" :key="g.id" class="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
             <td class="px-5 py-3.5 align-middle text-sm font-medium text-white/90">{{ g.name }}</td>
             <td class="px-3 py-3.5 align-middle text-right tabular-nums">
diff --git a/frontend/src/views/DocsView.vue b/frontend/src/views/DocsView.vue
index a7a3007..b18b6b5 100644
--- a/frontend/src/views/DocsView.vue
+++ b/frontend/src/views/DocsView.vue
@@ -275,7 +275,10 @@ async function copy(text) {
                 </div>
               </td>
             </tr>
-            <tr v-if="!models.length"><td colspan="4" class="px-4 py-10 text-center text-white/35">暂无可用模型</td></tr>
+            <tr v-if="!models.length"><td colspan="4"><div class="empty">
+              <span class="empty-ico"><Icon name="models" class="w-6 h-6" /></span>
+              <span class="empty-text">暂无可用模型</span>
+            </div></td></tr>
           </tbody>
         </table>
       </div>
diff --git a/frontend/src/views/ImagesView.vue b/frontend/src/views/ImagesView.vue
index 94674ae..b56389c 100644
--- a/frontend/src/views/ImagesView.vue
+++ b/frontend/src/views/ImagesView.vue
@@ -259,12 +259,12 @@ onUnmounted(() => window.removeEventListener('keydown', onKey))
     </div>
 
     <!-- grid -->
-    <div v-if="loading && !items.length" class="text-center text-sm text-white/40 py-20">加载中…</div>
-    <div v-else-if="!items.length" class="card flex flex-col items-center gap-3 text-white/40 py-20">
-      <span class="w-14 h-14 rounded-2xl bg-white/[0.04] grid place-items-center">
+    <div v-if="loading && !items.length" class="empty"><span class="empty-text">加载中…</span></div>
+    <div v-else-if="!items.length" class="card empty">
+      <span class="empty-ico">
         <Icon name="files" class="w-6 h-6" />
       </span>
-      <span class="text-sm">还没有生成过任何图片</span>
+      <span class="empty-text">还没有生成过任何图片</span>
     </div>
 
     <div v-else class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
diff --git a/frontend/src/views/InvitesAdminView.vue b/frontend/src/views/InvitesAdminView.vue
index e01dffd..c6fb164 100644
--- a/frontend/src/views/InvitesAdminView.vue
+++ b/frontend/src/views/InvitesAdminView.vue
@@ -52,8 +52,11 @@ onMounted(load)
 
     <div class="card overflow-hidden">
       
-      <div v-if="loading && !items.length" class="text-center text-sm text-white/40 py-16">加载中…</div>
-      <div v-else-if="!items.length" class="text-center text-sm text-white/40 py-16">还没有邀请记录</div>
+      <div v-if="loading && !items.length" class="empty"><span class="empty-text">加载中…</span></div>
+      <div v-else-if="!items.length" class="empty">
+        <span class="empty-ico"><Icon name="team" class="w-6 h-6" /></span>
+        <span class="empty-text">还没有邀请记录</span>
+      </div>
 
       <table v-else class="w-full text-sm">
         <colgroup>
diff --git a/frontend/src/views/LogsView.vue b/frontend/src/views/LogsView.vue
index 3fb27a1..f7083fa 100644
--- a/frontend/src/views/LogsView.vue
+++ b/frontend/src/views/LogsView.vue
@@ -192,10 +192,10 @@ const sourcePill = (s) => ({
 
     <!-- Table -->
     <div class="card overflow-hidden">
-      <div v-if="loading && !items.length" class="text-center text-sm text-white/40 py-20">加载中…</div>
-      <div v-else-if="!filtered.length" class="flex flex-col items-center gap-3 text-white/40 py-20">
-        <span class="w-14 h-14 rounded-2xl bg-white/[0.04] grid place-items-center"><Icon name="files" class="w-6 h-6" /></span>
-        <span class="text-sm">{{ search.trim() ? '没有匹配的记录' : '还没有日志' }}</span>
+      <div v-if="loading && !items.length" class="empty"><span class="empty-text">加载中…</span></div>
+      <div v-else-if="!filtered.length" class="empty">
+        <span class="empty-ico"><Icon name="files" class="w-6 h-6" /></span>
+        <span class="empty-text">{{ search.trim() ? '没有匹配的记录' : '还没有日志' }}</span>
       </div>
 
       <!-- Each row is a thumbnail + a stack of model/prompt + a meta line.
diff --git a/frontend/src/views/ModelsView.vue b/frontend/src/views/ModelsView.vue
index 1fa0bdb..ac590e2 100644
--- a/frontend/src/views/ModelsView.vue
+++ b/frontend/src/views/ModelsView.vue
@@ -110,11 +110,11 @@ onMounted(loadModels)
 
     <!-- Table -->
     <div class="card overflow-hidden">
-      <div v-if="loading && !models.length" class="text-center text-sm text-white/40 py-20">加载中…</div>
-      <div v-else-if="!filtered.length" class="flex flex-col items-center gap-3 text-white/40 py-20">
-        <span class="w-14 h-14 rounded-2xl bg-white/[0.04] grid place-items-center"><Icon name="models" class="w-6 h-6" /></span>
-        <span v-if="models.length" class="text-sm">没有匹配的模型</span>
-        <router-link v-else to="/admin/channels" class="text-sm text-sky-300 underline underline-offset-2">还没有模型，先到「渠道管理」添加渠道，保存后会自动同步上游模型</router-link>
+      <div v-if="loading && !models.length" class="empty"><span class="empty-text">加载中…</span></div>
+      <div v-else-if="!filtered.length" class="empty">
+        <span class="empty-ico"><Icon name="models" class="w-6 h-6" /></span>
+        <span v-if="models.length" class="empty-text">没有匹配的模型</span>
+        <router-link v-else to="/admin/channels" class="empty-text underline underline-offset-2">还没有模型，先到「渠道管理」添加渠道，保存后会自动同步上游模型</router-link>
       </div>
 
       <table v-else class="w-full text-sm table-fixed min-w-[1080px]">
diff --git a/frontend/src/views/UsersView.vue b/frontend/src/views/UsersView.vue
index 1a6516f..8c7565a 100644
--- a/frontend/src/views/UsersView.vue
+++ b/frontend/src/views/UsersView.vue
@@ -258,13 +258,13 @@ async function doRecharge() {
 
     <!-- Table -->
     <div class="card overflow-hidden">
-      <div v-if="loading && !items.length" class="text-center text-sm text-white/40 py-20">加载中…</div>
-      <div v-else-if="!filtered.length" class="flex flex-col items-center gap-3 text-white/40 py-20">
-        <span class="w-14 h-14 rounded-2xl bg-white/[0.04] grid place-items-center">
+      <div v-if="loading && !items.length" class="empty"><span class="empty-text">加载中…</span></div>
+      <div v-else-if="!filtered.length" class="empty">
+        <span class="empty-ico">
           <Icon name="accounts" class="w-6 h-6" />
         </span>
-        <span class="text-sm">{{ stats.total ? '没有匹配的用户' : '还没有用户' }}</span>
-        <button v-if="!stats.total" @click="showAdd = true" class="btn-soft mt-1">新建第一个</button>
+        <span class="empty-text">{{ stats.total ? '没有匹配的用户' : '还没有用户' }}</span>
+        <button v-if="!stats.total" @click="showAdd = true" class="btn-soft">新建第一个</button>
       </div>
 
       <div v-else class="overflow-x-auto">