From 97f9befc6dc4b4aebee4c4f75140a1192f508c21 Mon Sep 17 00:00:00 2001
From: wanghanlin <1533525126@qq.com>
Date: Thu, 3 Sep 2026 11:02:17 +0800
Subject: [PATCH] =?UTF-8?q?refactor(frontend):=20=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E8=A1=A8=E6=A0=BC=E4=B8=BA=20BaseTable=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 BaseTable 封装 t-table，统一下发小尺寸/悬浮/占满宽度/固定表头，操作列自动右固定，替换 13 个列表页 t-table，补齐缺失 loading；同步 UI 开发准则与组件声明
---
 frontend/UI-DEV-GUIDE.md                    |  9 ++---
 frontend/components.d.ts                    |  2 ++
 frontend/src/components/BaseTable.vue       | 40 +++++++++++++++++++++
 frontend/src/views/AccountManager.vue       |  9 ++---
 frontend/src/views/ApiKeyManager.vue        |  4 +--
 frontend/src/views/AuditLogManager.vue      |  4 +--
 frontend/src/views/ConversationManager.vue  | 10 +++---
 frontend/src/views/DashboardPanel.vue       |  2 +-
 frontend/src/views/FaqManager.vue           |  4 +--
 frontend/src/views/FeedbackOps.vue          |  4 +--
 frontend/src/views/McpServerManager.vue     | 10 +++---
 frontend/src/views/ModelConfigManager.vue   |  6 ++--
 frontend/src/views/PromptTracePanel.vue     | 14 ++++----
 frontend/src/views/SensitiveWordManager.vue |  4 +--
 frontend/src/views/UserManager.vue          |  9 ++---
 frontend/src/views/WebhookManager.vue       |  4 +--
 16 files changed, 89 insertions(+), 46 deletions(-)
 create mode 100644 frontend/src/components/BaseTable.vue

diff --git a/frontend/UI-DEV-GUIDE.md b/frontend/UI-DEV-GUIDE.md
index ac4cdab..2d468a7 100644
--- a/frontend/UI-DEV-GUIDE.md
+++ b/frontend/UI-DEV-GUIDE.md
@@ -133,7 +133,7 @@ import { palette, paletteBg, paletteBorder } from '@/utils/palette'
     </div>
 
     <!-- ② 表格 -->
-    <t-table
+    <BaseTable
       :data="pagination.data.value"
       :columns="columns"
       :loading="pagination.loading.value"
@@ -152,7 +152,7 @@ import { palette, paletteBg, paletteBorder } from '@/utils/palette'
           <t-button size="small" variant="text" theme="danger" @click="onDelete(row)">删除</t-button>
         </t-space>
       </template>
-    </t-table>
+    </BaseTable>
   </t-card>
 
   <!-- ③ 弹窗表单 -->
@@ -229,8 +229,9 @@ const columns = [
 
 | 点 | 规范 |
 | --- | --- |
+| 列表表格组件 | 统一用 `BaseTable` 组件（自动 `size="small"` + 悬浮 `hover` + 占满容器宽度 `table-layout="fixed"` + 固定表头 `max-height`）；操作列 `colKey:'op'` 自动右固定 `fixed:'right'`，无需手动设置 |
 | 表格列定义 | 统一写在 `<script>` 的 `columns` 数组 + `:columns`；**禁用** `<t-table-column>` 标签写法 |
-| 分页 | 统一用 `<t-table>` 内置 `:pagination` + `@page-change` + `showJumper`；**禁用**独立 `<t-pagination>` 组件 |
+| 分页 | 统一用 `<BaseTable>` 内置 `:pagination` + `@page-change` + `showJumper`；**禁用**独立 `<t-pagination>` 组件 |
 | 列排序 | 后端分页表格：列 `sorter: true` + 表格 `:sort="sortInfo"` + `@sort-change` 透传服务端 `sortField/sortOrder`；前端全量表格：仅列 `sorter: true`，数值列用 `sorter: (a,b)=>(a.x??0)-(b.x??0)` 函数 |
 | 表格 loading | 必须绑定 `:loading`（现状有 4 个页面缺失） |
 | pageSize | 默认统一 20（现状 10/20/30 三档不一） |
@@ -398,7 +399,7 @@ try {
 ### 一致性偏差
 
 8. 页头 3 种写法并存：`title` 属性（多数） vs `#title`+`<h2>`（`ModelConfigManager`） vs `#title`+图标（`SystemConfigManager`）。
-9. 表格缺 `:loading`：`UserManager` / `AccountManager` / `McpServerManager` / `ConversationManager`。
+9. ~~表格缺 `:loading`：`UserManager` / `AccountManager` / `McpServerManager` / `ConversationManager`。~~（已补齐，且列表表格统一由 `BaseTable` 承载）
 10. 分页缺失/不统一：`AccountManager` 无分页；pageSize 10/20/30 三档。
 11. 表单校验分裂：全无 `:rules`，手写 `if` 与 `:disabled` 两种土办法并存。
 12. 图标体系分裂：emoji 主导，仅 `SystemConfigManager` 用 tdesign-icons；`ModelConfigManager` 操作列纯 emoji 按钮。
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index b72a1c3..96e0dac 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    BaseTable: typeof import('./src/components/BaseTable.vue')['default']
     FormDialog: typeof import('./src/components/FormDialog.vue')['default']
     FormDrawer: typeof import('./src/components/FormDrawer.vue')['default']
     MessageSources: typeof import('./src/components/MessageSources.vue')['default']
@@ -24,6 +25,7 @@ declare module 'vue' {
     TDialog: typeof import('tdesign-vue-next')['Dialog']
     TDivider: typeof import('tdesign-vue-next')['Divider']
     TDrawer: typeof import('tdesign-vue-next')['Drawer']
+    TDropdown: typeof import('tdesign-vue-next')['Dropdown']
     TEmpty: typeof import('tdesign-vue-next')['Empty']
     TForm: typeof import('tdesign-vue-next')['Form']
     TFormItem: typeof import('tdesign-vue-next')['FormItem']
diff --git a/frontend/src/components/BaseTable.vue b/frontend/src/components/BaseTable.vue
new file mode 100644
index 0000000..c8a715f
--- /dev/null
+++ b/frontend/src/components/BaseTable.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    columns?: any[]
+    /** 统一最大高度，传 '' 或 0 关闭固定表头 */
+    maxHeight?: string | number
+  }>(),
+  {
+    columns: () => [],
+    maxHeight: 'calc(100vh - 240px)',
+  },
+)
+
+// 操作列自动右固定：colKey === 'op' 且未显式 fixed 时补 fixed:'right'
+const resolvedColumns = computed(() =>
+  props.columns.map((col) =>
+    col && col.colKey === 'op' && !col.fixed ? { ...col, fixed: 'right' } : col,
+  ),
+)
+</script>
+
+<template>
+  <t-table
+    v-bind="$attrs"
+    size="small"
+    hover
+    table-layout="fixed"
+    :max-height="maxHeight"
+    :columns="resolvedColumns"
+  >
+    <!-- 动态透传所有具名插槽（op / title / fileType / ... 及作用域插槽） -->
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}" />
+    </template>
+  </t-table>
+</template>
diff --git a/frontend/src/views/AccountManager.vue b/frontend/src/views/AccountManager.vue
index 9146807..45601c3 100644
--- a/frontend/src/views/AccountManager.vue
+++ b/frontend/src/views/AccountManager.vue
@@ -5,7 +5,7 @@
       <t-button theme="primary" size="small" @click="openCreate">＋ 新建账号</t-button>
       <t-button variant="outline" size="small" @click="loadList">🔄 刷新</t-button>
     </div>
-    <t-table :data="accounts" :columns="columns" row-key="id">
+    <BaseTable :data="accounts" :columns="columns" row-key="id" :loading="loading">
       <template #roles="{row}"><t-tag v-for="r in (row.roleNames||[])" :key="r" size="small" variant="light" theme="primary" style="margin-right:4px;">{{ r }}</t-tag></template>
       <template #op="{row}">
         <t-space :size="4">
@@ -13,7 +13,7 @@
           <t-button size="small" variant="text" theme="danger" @click="doDelete(row.id)">删除</t-button>
         </t-space>
       </template>
-    </t-table>
+    </BaseTable>
 
     <t-dialog v-model:visible="modal.visible" :header="modal.isEdit?'编辑账号':'新建账号'" width="480px" :footer="false">
       <t-form label-align="top">
@@ -35,7 +35,7 @@ import { useConfirm } from '@/composables/useConfirm'
 
 const { confirm } = useConfirm()
 
-const accounts=ref<any[]>([])
+const accounts=ref<any[]>([]); const loading=ref(false)
 
 const columns=[{colKey:'name',title:'账号名称',width:160,sorter:true},{colKey:'roles',title:'绑定角色',width:240,sorter:true},{colKey:'op',title:'操作',width:120}]
 
@@ -43,7 +43,8 @@ const modal=reactive({visible:false,isEdit:false,id:null as any,name:''})
 
 onMounted(()=>loadList())
 
-async function loadList(){try{const r=await getAccountList();if(r.success)accounts.value=r.data||[]}catch(e:any){toast('加载失败:'+e.message,'error')}}
+async function loadList(){loading.value=true
+  try{const r=await getAccountList();if(r.success)accounts.value=r.data||[]}catch(e:any){toast('加载失败:'+e.message,'error')}finally{loading.value=false}}
 
 function openCreate(){Object.assign(modal,{visible:true,isEdit:false,id:null,name:''})}
 function openEdit(a:any){Object.assign(modal,{visible:true,isEdit:true,id:a.id,name:a.name||''})}
diff --git a/frontend/src/views/ApiKeyManager.vue b/frontend/src/views/ApiKeyManager.vue
index bc464d4..dcc1c1e 100644
--- a/frontend/src/views/ApiKeyManager.vue
+++ b/frontend/src/views/ApiKeyManager.vue
@@ -5,7 +5,7 @@
       <div style="flex:1;" /><span class="total-hint">共 {{ total }} 个 Key</span>
     </div>
 
-    <t-table :data="keys" :columns="columns" row-key="id" :loading="loading" :sort="sortInfo"
+    <BaseTable :data="keys" :columns="columns" row-key="id" :loading="loading" :sort="sortInfo"
       :pagination="{current:page,total:total,pageSize:pageSize,showJumper:true}" @page-change="onPageChange" @sort-change="onSortChange">
       <template #keyValue="{row}">
         <code class="key-code">{{ maskKey(row.keyValue) }}</code>
@@ -25,7 +25,7 @@
           <t-button size="small" variant="text" theme="danger" @click="doDelete(row.id)">删除</t-button>
         </t-space>
       </template>
-    </t-table>
+    </BaseTable>
 
     <!-- 新建弹窗 -->
     <t-dialog v-model:visible="showCreateDialog" header="新建 API Key" width="520px" :footer="false">
diff --git a/frontend/src/views/AuditLogManager.vue b/frontend/src/views/AuditLogManager.vue
index 75bd839..8bb2087 100644
--- a/frontend/src/views/AuditLogManager.vue
+++ b/frontend/src/views/AuditLogManager.vue
@@ -1,13 +1,13 @@
 <template>
   <t-card title="📋 内容审计日志" :bordered="false">
     <p class="desc-text">记录所有敏感词命中事件，包含输入/输出方向、违规内容、命中词及处理方式。</p>
-    <t-table :data="logs" :columns="columns" row-key="id" :loading="loading" :sort="sortInfo"
+    <BaseTable :data="logs" :columns="columns" row-key="id" :loading="loading" :sort="sortInfo"
       :pagination="{current:page,total:total,pageSize:pageSize,showJumper:true}" @page-change="onPageChange" @sort-change="onSortChange">
       <template #direction="{row}"><span :style="{color:row.direction==='INPUT'?'var(--color-primary)':'var(--color-success)'}">{{ row.direction==='INPUT'?'输入':'输出' }}</span></template>
       <template #originalText="{row}"><span :title="row.originalText" class="ellipsis-td">{{ row.originalText }}</span></template>
       <template #actionTaken="{row}"><span :style="{color:row.actionTaken==='BLOCK'?'var(--color-error)':row.actionTaken==='MASK'?'var(--color-warning)':'var(--color-success)'}">{{ row.actionTaken==='BLOCK'?'拦截':row.actionTaken==='MASK'?'脱敏':'通过' }}</span></template>
       <template #hitWords="{row}"><span class="hit-words">{{ formatHitWords(row.hitWords) }}</span></template>
-    </t-table>
+    </BaseTable>
   </t-card>
 </template>
 
diff --git a/frontend/src/views/ConversationManager.vue b/frontend/src/views/ConversationManager.vue
index 66a48f1..5d48579 100644
--- a/frontend/src/views/ConversationManager.vue
+++ b/frontend/src/views/ConversationManager.vue
@@ -17,7 +17,7 @@
       <t-button variant="outline" size="small" @click="load()">刷新</t-button>
     </div>
 
-    <t-table :data="conversations" :columns="columns" row-key="conversationId" :sort="sortInfo"
+    <BaseTable :data="conversations" :columns="columns" row-key="conversationId" :loading="loading" :sort="sortInfo"
       :pagination="{current:page,total:total,pageSize:pageSize,showJumper:true}" @page-change="onPageChange" @sort-change="onSortChange">
       <template #op="{row}">
         <t-space :size="4">
@@ -26,7 +26,7 @@
           <t-button size="small" variant="text" theme="danger" @click="remove(row.conversationId)">删除</t-button>
         </t-space>
       </template>
-    </t-table>
+    </BaseTable>
 
     <!-- 消息详情弹窗 -->
     <t-dialog v-model:visible="msgModal.visible" header="会话消息详情" width="900px" :footer="false">
@@ -87,7 +87,7 @@ import { useConfirm } from '@/composables/useConfirm'
 
 const { confirm } = useConfirm()
 
-const conversations=ref<any[]>([]);const page=ref(1);const pageSize=ref(10);const total=ref(0)
+const conversations=ref<any[]>([]);const page=ref(1);const pageSize=ref(10);const total=ref(0);const loading=ref(false)
 const keyword=ref('');const accountFilter=ref('');const roleFilter=ref('')
 const roles=ref<any[]>([]);const stats=ref<any>(null)
 const msgModal=ref({visible:false,conversationId:'',roleName:'',messages:[] as any[]})
@@ -131,8 +131,8 @@ function reasonLabel(c: string): string {
   return map[c] || c
 }
 
-async function load(p=1){page.value=p
-  try{const r=await listConversations(p,pageSize.value,keyword.value||undefined,accountFilter.value||undefined,roleFilter.value||undefined,sortInfo.value?.sortBy||undefined,sortInfo.value?(sortInfo.value.descending?'desc':'asc'):undefined);if(r.success){conversations.value=r.data||[];total.value=r.total||0}else toast(r.message||'查询失败','error')}catch(e:any){toast('加载失败：'+e.message,'error')}}
+async function load(p=1){page.value=p;loading.value=true
+  try{const r=await listConversations(p,pageSize.value,keyword.value||undefined,accountFilter.value||undefined,roleFilter.value||undefined,sortInfo.value?.sortBy||undefined,sortInfo.value?(sortInfo.value.descending?'desc':'asc'):undefined);if(r.success){conversations.value=r.data||[];total.value=r.total||0}else toast(r.message||'查询失败','error')}catch(e:any){toast('加载失败：'+e.message,'error')}finally{loading.value=false}}
 function onPageChange(i:{current:number;pageSize:number}){pageSize.value=i.pageSize;load(i.current)}
 function onSortChange(s:any){sortInfo.value=s&&s.sortBy?{sortBy:s.sortBy,descending:!!s.descending}:null;load(1)}
 
diff --git a/frontend/src/views/DashboardPanel.vue b/frontend/src/views/DashboardPanel.vue
index 5f6eb31..a9ecde0 100644
--- a/frontend/src/views/DashboardPanel.vue
+++ b/frontend/src/views/DashboardPanel.vue
@@ -34,7 +34,7 @@
       <t-row :gutter="16">
         <t-col :span="6">
           <t-card title="📚 文档命中排行 TOP-10" :bordered="true">
-            <t-table :data="topHitDocuments" :columns="hitColumns" row-key="idx" v-if="topHitDocuments.length" />
+            <BaseTable :data="topHitDocuments" :columns="hitColumns" row-key="idx" v-if="topHitDocuments.length" :max-height="''" />
             <t-empty v-else description="暂无数据" />
           </t-card>
         </t-col>
diff --git a/frontend/src/views/FaqManager.vue b/frontend/src/views/FaqManager.vue
index 4b78a6e..fff1d41 100644
--- a/frontend/src/views/FaqManager.vue
+++ b/frontend/src/views/FaqManager.vue
@@ -19,7 +19,7 @@
     </div>
 
     <!-- FAQ 表格 -->
-    <t-table :data="faqs" :columns="columns" row-key="id" :loading="loading" :sort="sortInfo"
+    <BaseTable :data="faqs" :columns="columns" row-key="id" :loading="loading" :sort="sortInfo"
       :pagination="{ current: page, total: total, pageSize: pageSize, showJumper: true }" @page-change="onPageChange" @sort-change="onSortChange">
       <template #status="{ row }">
         <span @click="toggleStatus(row)" style="cursor:pointer;" :style="{color: row.status === 'ENABLED' ? 'var(--td-success-color)' : 'var(--td-error-color)'}">
@@ -32,7 +32,7 @@
           <t-button size="small" variant="text" theme="danger" @click="removeFaq(row.id)">删除</t-button>
         </t-space>
       </template>
-    </t-table>
+    </BaseTable>
 
     <!-- 新增/编辑抽屉（富文本 Markdown 编辑器需宽幅，用抽屉替代窄弹窗） -->
     <FormDrawer
diff --git a/frontend/src/views/FeedbackOps.vue b/frontend/src/views/FeedbackOps.vue
index 660c653..ffc2064 100644
--- a/frontend/src/views/FeedbackOps.vue
+++ b/frontend/src/views/FeedbackOps.vue
@@ -11,7 +11,7 @@
     </div>
 
     <!-- 反馈列表 -->
-    <t-table :data="feedbacks" :columns="columns" row-key="conversationId" :loading="loading" :sort="sortInfo"
+    <BaseTable :data="feedbacks" :columns="columns" row-key="conversationId" :loading="loading" :sort="sortInfo"
       :pagination="{ current: page, total: total, pageSize: pageSize, showJumper: true }" @page-change="onPageChange" @sort-change="onSortChange"
       empty="暂无反馈数据，用户在 SDK 端对 AI 回复点赞或点踩后将在此展示。">
       <template #feedbackType="{ row }">
@@ -45,7 +45,7 @@
           <t-button size="small" variant="text" theme="danger" @click="removeFeedback(row)">删除</t-button>
         </t-space>
       </template>
-    </t-table>
+    </BaseTable>
 
     <!-- 消息详情弹窗 -->
     <t-dialog v-model:visible="detailModal.visible" header="会话消息详情" width="800px" :footer="false">
diff --git a/frontend/src/views/McpServerManager.vue b/frontend/src/views/McpServerManager.vue
index 28008fd..06f63e2 100644
--- a/frontend/src/views/McpServerManager.vue
+++ b/frontend/src/views/McpServerManager.vue
@@ -9,7 +9,7 @@
       <span class="total-hint">共 {{ total }} 条配置</span>
     </div>
 
-    <t-table :data="servers" :columns="columns" row-key="id" :sort="sortInfo"
+    <BaseTable :data="servers" :columns="columns" row-key="id" :loading="loading" :sort="sortInfo"
       :pagination="{ current: currentPage, total: total, pageSize: pageSize, showJumper: true }" @page-change="onPageChange" @sort-change="onSortChange">
       <template #transport_type="{ row }"><t-tag size="small" :theme="row.transport_type==='sse'?'primary':'default'" variant="light">{{ row.transport_type==='sse'?'SSE':'Stdio' }}</t-tag></template>
       <template #displayUrl="{ row }"><span class="ellipsis" :title="getDisplayUrl(row)">{{ getDisplayUrl(row)||'-' }}</span></template>
@@ -21,7 +21,7 @@
           <t-button size="small" variant="text" theme="danger" @click="remove(row.id,row.name)">删除</t-button>
         </t-space>
       </template>
-    </t-table>
+    </BaseTable>
 
     <!-- 测试结果 -->
     <div v-if="testResult.visible" class="test-toast" :style="{background:testResult.success?'var(--color-success-text)':'var(--color-error-text)'}">
@@ -68,7 +68,7 @@ import { useConfirm } from '@/composables/useConfirm'
 
 const { confirm } = useConfirm()
 
-const servers = ref<any[]>([]); const currentPage=ref(1); const pageSize=ref(10); const total=ref(0)
+const servers = ref<any[]>([]); const currentPage=ref(1); const pageSize=ref(10); const total=ref(0); const loading=ref(false)
 const showModal=ref(false); const modalMode=ref('add'); const editId=ref<any>(null); const saving=ref(false)
 const form=ref({name:'',transportType:'sse',url:'',command:'',argsText:'',envText:'',headersText:'',description:''})
 const testLoading=ref<Record<string,boolean>>({}); const testResult=ref({visible:false,success:false,message:'' as any}); let testTimer:any=null
@@ -80,8 +80,8 @@ const sortInfo = ref<{ sortBy: string; descending: boolean } | null>(null)
 onMounted(()=>load())
 onUnmounted(()=>{if(testTimer)clearTimeout(testTimer)})
 
-async function load(p=1){currentPage.value=p
-  try{const r=await api.listMcpServers(p,pageSize.value,sortInfo.value?.sortBy||undefined,sortInfo.value?(sortInfo.value.descending?'desc':'asc'):undefined);if(r.success){servers.value=(r.data||[]).map((s:any)=>({...s,_active:s.is_active}));total.value=r.total||0}else toast(r.message||'查询失败','error')}catch(e:any){toast('加载失败：'+e.message,'error')}}
+async function load(p=1){currentPage.value=p;loading.value=true
+  try{const r=await api.listMcpServers(p,pageSize.value,sortInfo.value?.sortBy||undefined,sortInfo.value?(sortInfo.value.descending?'desc':'asc'):undefined);if(r.success){servers.value=(r.data||[]).map((s:any)=>({...s,_active:s.is_active}));total.value=r.total||0}else toast(r.message||'查询失败','error')}catch(e:any){toast('加载失败：'+e.message,'error')}finally{loading.value=false}}
 function onPageChange(i:{current:number;pageSize:number}){pageSize.value=i.pageSize;load(i.current)}
 function onSortChange(s:any){sortInfo.value=s&&s.sortBy?{sortBy:s.sortBy,descending:!!s.descending}:null;load(1)}
 
diff --git a/frontend/src/views/ModelConfigManager.vue b/frontend/src/views/ModelConfigManager.vue
index d001af9..c744835 100644
--- a/frontend/src/views/ModelConfigManager.vue
+++ b/frontend/src/views/ModelConfigManager.vue
@@ -67,8 +67,7 @@
     </div>
 
     <!-- 配置列表表格 -->
-    <div style="overflow-x:auto;">
-      <t-table :data="configs" :columns="tableColumns" row-key="id" :loading="tableLoading" hover stripe :sort="sortInfo"
+    <BaseTable :data="configs" :columns="tableColumns" row-key="id" :loading="tableLoading" :sort="sortInfo"
         :pagination="{ current: currentPage, total: total, pageSize: pageSize, showJumper: true }"
         @page-change="onPageChange" @sort-change="onSortChange">
         <template #app_type="{ row }">
@@ -104,8 +103,7 @@
             <t-button v-show="!row.is_active" size="small" variant="text" theme="danger" @click="remove(row.id, row.name)" title="删除">🗑️</t-button>
           </t-space>
         </template>
-      </t-table>
-    </div>
+      </BaseTable>
 
     <!-- F1: 测试结果提示 -->
     <div v-if="testResult.visible" class="test-result-toast"
diff --git a/frontend/src/views/PromptTracePanel.vue b/frontend/src/views/PromptTracePanel.vue
index 3ed1213..32a0f5d 100644
--- a/frontend/src/views/PromptTracePanel.vue
+++ b/frontend/src/views/PromptTracePanel.vue
@@ -12,7 +12,7 @@
       <div class="stat-card"><span class="stat-num">{{ statSummary.avgLatency }}</span><span class="stat-label">平均耗时(ms)</span></div>
       <div class="stat-card"><span class="stat-num">{{ statSummary.faqRate }}</span><span class="stat-label">FAQ 命中率</span></div>
     </div>
-    <t-table :data="stats" :columns="statsColumns" row-key="key" size="small" :loading="statsLoading" :pagination="false" style="margin-bottom:16px;" />
+    <BaseTable :data="stats" :columns="statsColumns" row-key="key" :loading="statsLoading" :pagination="false" :max-height="''" style="margin-bottom:16px;" />
 
     <!-- 筛选栏 -->
     <div class="toolbar">
@@ -32,7 +32,7 @@
     </div>
 
     <!-- 调用列表 -->
-    <t-table :data="traces" :columns="columns" row-key="id" :loading="loading" :sort="sortInfo"
+    <BaseTable :data="traces" :columns="columns" row-key="id" :loading="loading" :sort="sortInfo"
       :selected-row-keys="selectedRowKeys"
       :pagination="{ current: page, total: total, pageSize: pageSize, showJumper: true }"
       @page-change="onPageChange" @select-change="onSelectChange" @sort-change="onSortChange">
@@ -59,7 +59,7 @@
         <t-button size="small" variant="text" @click="openDetail(row)">详情</t-button>
         <t-button size="small" variant="text" @click="openTimeline(row)">时间线</t-button>
       </template>
-    </t-table>
+    </BaseTable>
 
     <!-- 详情抽屉 -->
     <t-drawer v-model:visible="detailVisible" size="large" header="调用详情" :footer="false">
@@ -97,7 +97,7 @@
             </t-tab-panel>
             <t-tab-panel value="rag" label="RAG 资料">
               <div class="muted" style="margin-bottom:8px;">检索模式：{{ detail.searchMode || '-' }} · 命中：{{ detail.hitCount ?? '-' }} 条</div>
-              <t-table v-if="detailRagHits.length" :data="detailRagHits" :columns="ragHitsColumns" size="small" :pagination="false" style="margin-bottom:12px;" />
+              <BaseTable v-if="detailRagHits.length" :data="detailRagHits" :columns="ragHitsColumns" :pagination="false" :max-height="''" style="margin-bottom:12px;" />
               <div class="block-title">注入的 RAG 上下文</div>
               <pre class="full-prompt">{{ detail.ragContext || '(无 RAG 资料)' }}</pre>
             </t-tab-panel>
@@ -111,18 +111,18 @@
               </div>
             </t-tab-panel>
             <t-tab-panel value="tools" label="工具调用">
-              <t-table v-if="detailToolCalls.length" :data="detailToolCalls" :columns="toolCallsColumns" size="small" :pagination="false">
+              <BaseTable v-if="detailToolCalls.length" :data="detailToolCalls" :columns="toolCallsColumns" :pagination="false" :max-height="''">
                 <template #latencyMs="{ row }"><span>{{ row.latencyMs ?? '-' }}ms</span></template>
                 <template #error="{ row }">
                   <t-tag v-if="row.error" size="small" variant="light" theme="danger">失败</t-tag>
                   <span v-else class="muted">-</span>
                 </template>
-              </t-table>
+              </BaseTable>
               <t-empty v-else description="本次调用未触发 MCP 工具" />
             </t-tab-panel>
             <t-tab-panel value="context" label="对话上下文">
               <div v-if="detail.historyTurns" class="muted" style="margin-bottom:8px;">历史轮数：{{ detail.historyTurns }}</div>
-              <t-table v-if="detailHistory.length" :data="detailHistory" :columns="historyColumns" size="small" :pagination="false" />
+              <BaseTable v-if="detailHistory.length" :data="detailHistory" :columns="historyColumns" :pagination="false" :max-height="''" />
               <t-empty v-else description="无多轮历史记录" />
             </t-tab-panel>
           </t-tabs>
diff --git a/frontend/src/views/SensitiveWordManager.vue b/frontend/src/views/SensitiveWordManager.vue
index 14d665a..15e9f2a 100644
--- a/frontend/src/views/SensitiveWordManager.vue
+++ b/frontend/src/views/SensitiveWordManager.vue
@@ -12,7 +12,7 @@
       <span class="total-hint">共 {{ total }} 个</span>
     </div>
 
-    <t-table :data="words" :columns="columns" row-key="id" :loading="loading" :sort="sortInfo"
+    <BaseTable :data="words" :columns="columns" row-key="id" :loading="loading" :sort="sortInfo"
       :pagination="{ current: page, total: total, pageSize: pageSize, showJumper: true }" @page-change="onPageChange" @sort-change="onSortChange">
       <template #category="{ row }">
         <t-tag size="small" :style="{ background: catColor(row.category) }" variant="light">{{ catLabel(row.category) }}</t-tag>
@@ -29,7 +29,7 @@
           <t-button size="small" variant="text" theme="danger" @click="doDelete(row)">删除</t-button>
         </t-space>
       </template>
-    </t-table>
+    </BaseTable>
 
     <!-- 新增/编辑弹窗 -->
     <t-dialog v-model:visible="showFormDialog" :header="editingId ? '编辑敏感词' : '添加敏感词'" width="480px" :footer="false">
diff --git a/frontend/src/views/UserManager.vue b/frontend/src/views/UserManager.vue
index efb92d6..bd6f907 100644
--- a/frontend/src/views/UserManager.vue
+++ b/frontend/src/views/UserManager.vue
@@ -9,7 +9,7 @@
       <t-button theme="primary" size="small" @click="openCreate">+ 新建用户</t-button>
     </div>
 
-    <t-table :data="users" :columns="columns" row-key="id" :sort="sortInfo"
+    <BaseTable :data="users" :columns="columns" row-key="id" :loading="loading" :sort="sortInfo"
       :pagination="{ current: page, total: total, pageSize: pageSize, showJumper: true }" @page-change="onPageChange" @sort-change="onSortChange">
       <template #role_names="{ row }">
         <t-tag v-for="r in (row.role_names||'').split(',').filter(Boolean)" :key="r" size="small" variant="light" theme="primary" style="margin-right:2px;">{{ r }}</t-tag>
@@ -26,7 +26,7 @@
           <t-button size="small" variant="text" :theme="row.enabled?'warning':'success'" @click="handleToggle(row)">{{ row.enabled?'禁用':'启用' }}</t-button>
         </t-space>
       </template>
-    </t-table>
+    </BaseTable>
 
     <!-- 新建/编辑弹窗 -->
     <t-dialog v-model:visible="modal.visible" :header="modal.isEdit?'编辑用户':'新建用户'" width="480px" :footer="false">
@@ -75,7 +75,7 @@ import { useConfirm } from '@/composables/useConfirm'
 const { confirm } = useConfirm()
 
 const users = ref<any[]>([]); const total=ref(0); const page=ref(1); const pageSize=ref(20)
-const keyword=ref(''); const filterEnabled=ref<boolean|null>(null); const allRoles=ref<any[]>([]); const saving=ref(false)
+const keyword=ref(''); const filterEnabled=ref<boolean|null>(null); const allRoles=ref<any[]>([]); const saving=ref(false); const loading=ref(false)
 const statusOpts=[{label:'全部状态',value:null},{label:'已启用',value:true},{label:'已禁用',value:false}]
 
 const columns = [
@@ -91,7 +91,8 @@ const pwdModal = reactive({visible:false,userId:null as any,username:'',newPassw
 
 onMounted(()=>{loadData();loadRoles()})
 
-async function loadData(){try{const r=await listSysUsers(page.value,pageSize.value,keyword.value,filterEnabled.value as any,sortInfo.value?.sortBy||undefined,sortInfo.value?(sortInfo.value.descending?'desc':'asc'):undefined);if(r.success){users.value=r.data.records||[];total.value=r.data.total||0}}catch(e){console.error(e)}}
+async function loadData(){loading.value=true
+  try{const r=await listSysUsers(page.value,pageSize.value,keyword.value,filterEnabled.value as any,sortInfo.value?.sortBy||undefined,sortInfo.value?(sortInfo.value.descending?'desc':'asc'):undefined);if(r.success){users.value=r.data.records||[];total.value=r.data.total||0}}catch(e){console.error(e)}finally{loading.value=false}}
 async function loadRoles(){try{const r=await getAllSysRoles();if(r.success)allRoles.value=r.data||[]}catch(e){console.error(e)}}
 function onPageChange(i:{current:number;pageSize:number}){page.value=i.current;pageSize.value=i.pageSize;loadData()}
 function onSortChange(s:any){sortInfo.value=s&&s.sortBy?{sortBy:s.sortBy,descending:!!s.descending}:null;loadData()}
diff --git a/frontend/src/views/WebhookManager.vue b/frontend/src/views/WebhookManager.vue
index 7c90295..a4b45a1 100644
--- a/frontend/src/views/WebhookManager.vue
+++ b/frontend/src/views/WebhookManager.vue
@@ -5,7 +5,7 @@
       <div style="flex:1;" /><span class="total-hint">共 {{ total }} 个</span>
     </div>
 
-    <t-table :data="webhooks" :columns="columns" row-key="id" :loading="loading" :sort="sortInfo"
+    <BaseTable :data="webhooks" :columns="columns" row-key="id" :loading="loading" :sort="sortInfo"
       :pagination="{current:page,total:total,pageSize:pageSize,showJumper:true}" @page-change="onPageChange" @sort-change="onSortChange">
       <template #events="{row}">
         <t-tag v-for="ev in getEvents(row)" :key="ev" size="small" variant="light" style="margin-right:4px;">{{ ev }}</t-tag>
@@ -18,7 +18,7 @@
           <t-button size="small" variant="text" theme="danger" @click="doDelete(row.id)">删除</t-button>
         </t-space>
       </template>
-    </t-table>
+    </BaseTable>
 
     <t-dialog v-model:visible="showFormDialog" :header="editingId?'编辑 Webhook':'新建 Webhook'" width="520px" :footer="false">
       <t-form label-align="top">