jianghu-ui 1.0.6 → 1.0.7

package/src/components/JhTable/JhTable.stories.js

@@ -101,6 +101,14 @@ export default {
       control: 'boolean',
       description: '是否显示选择框',
     },
+    rowKey: {
+      control: 'text',
+      description: '行唯一标识字段，默认为 "id"',
+    },
+    itemKey: {
+      control: 'text',
+      description: 'rowKey 的别名，与 v-data-table API 保持一致',
+    },
     size: {
       control: 'select',
       options: ['default', 'medium', 'compact'],
@@ -144,97 +152,51 @@ export default {
       description: {
         component: `
 
-增强版数据表格组件，参考 Ant Design Pro 的 ProTable 设计，提供丰富的功能。
-
-## 新增功能特性（Pro 版）
-
-### 1. 工具栏功能
-- **搜索框**：全局快速搜索
-- **刷新按钮**：重新加载数据
-- **列设置**：显示/隐藏列，实时生效
-- **密度切换**：默认/中等/紧凑三种密度
-- **全屏切换**：全屏显示表格（可选）
-
-### 2. 列增强功能
-- **copyable**：显示复制按钮，一键复制单元格内容
-- **ellipsis**：超长文本自动省略，鼠标悬停显示完整内容
-- **tooltip**：鼠标悬停提示
-- **自定义插槽**：完全自定义列渲染
-
-### 3. 操作列配置化
-\`\`\`javascript
-actionColumn: {
-  title: '操作',
-  width: 180,
-  fixed: 'right',
-  buttons: [
-    {
-      text: '编辑',
-      type: 'link', // link / icon / button
-      icon: 'mdi-pencil',
-      color: 'primary',
-      tooltip: '编辑记录',
-      onClick: (row) => { console.log('编辑', row) },
-      visible: (row) => row.status !== '禁用',
-      confirm: '确认编辑？'
-    },
-    {
-      text: '删除',
-      type: 'link',
-      icon: 'mdi-delete',
-      color: 'error',
-      onClick: (row) => { console.log('删除', row) },
-      confirm: '确认删除？'
-    }
-  ]
-}
-\`\`\`
-
-### 4. 服务端分页
-通过 \`request\` prop 支持服务端分页：
-\`\`\`javascript
-async fetchData(params) {
-  // params: { page, pageSize, search, sorter, filters }
-  const response = await fetch('/api/users', {
-    method: 'POST',
-    body: JSON.stringify(params),
-  });
-  return {
-    data: response.list,
-    total: response.total,
-    success: true,
-  };
-}
-\`\`\`
+增强版数据表格组件，深度继承 Vuetify 2 的 v-data-table，并提供 Pro 级功能。
+
+## 核心特性
+
+### 1. 深度继承
+- **API 兼容**：支持 v-data-table 的所有 Props（如 \`show-expand\`、\`group-by\`、\`item-class\` 等）。
+- **插槽透传**：支持所有原生插槽（如 \`top\`、\`footer\`、\`expanded-item\` 等）以及自定义列插槽 \`item.<value>\`。
+- **事件透传**：支持所有原生事件（如 \`click:row\`、\`current-items\` 等）。
+- **实例访问**：通过 \`getVDataTable()\` 获取底层 v-data-table 实例。
 
-### 5. 行选择增强
-- 支持单选/多选
-- \`selection-change\` 事件返回 \`{ selectedRowKeys, selectedRows }\`
-- 提供 \`getSelectedRows()\` 和 \`clearSelection()\` 方法
+### 2. 工具栏与高级筛选
+- **集成搜索**：工具栏内置全局搜索。
+- **列设置**：支持运行时列显示/隐藏切换。
+- **密度切换**：支持 default/medium/compact 三种视觉密度。
+- **高级筛选**：可集成 JhQueryFilter 实现复杂的组合查询。
 
-### 6. 响应式密度
-三种密度自动适配：
-- **default**: 48px 行高
-- **medium**: 40px 行高
-- **compact**: 32px 行高
+### 3. 列与单元格增强
+- **Schema 渲染**：支持 \`valueType\` (status, progress, money, date, json 等) 自动化渲染。
+- **交互功能**：支持 \`copyable\` (一键复制) 和 \`ellipsis\` (超长省略)。
+- **操作列配置**：支持配置化的按钮列表，内置权限控制和二次确认。
+
+### 4. 数据流控制
+- **服务端分页**：通过 \`request\` 自动处理请求、分页、排序。
+- **状态持久化**：支持列显示状态持久化。
 
 ## 方法
 
+- \`getVDataTable()\`: 获取底层 v-data-table 实例
 - \`reload()\`: 重新加载数据（服务端分页）
 - \`reset()\`: 重置到第一页
 - \`clearSelection()\`: 清空选择
 - \`getSelectedRows()\`: 获取选中的行
 
-## 事件
+## 事件 (除 v-data-table 原生事件外)
 
 - \`create-click\`: 点击新增按钮
-- \`update-click\`: 点击详情按钮（item）
-- \`delete-click\`: 点击删除按钮（item）
-- \`row-click\`: 点击行（item, event）
+- \`update-click\`: 点击详情按钮（针对 actionColumn 默认按钮）
+- \`delete-click\`: 点击删除按钮（针对 actionColumn 默认按钮）
 - \`selection-change\`: 选择改变 ({ selectedRowKeys, selectedRows })
-- \`refresh\`: 点击刷新按钮
-- \`copy-success\`: 复制成功（text）
-- \`request-error\`: 请求失败（error）
+- \`columns-state-change\`: 列状态改变 (snapshot)
+- \`filter-search\`: 高级筛选查询
+- \`filter-reset\`: 高级筛选重置
+- \`sort-change\`: 排序改变
+- \`copy-success\`: 复制成功 (text)
+- \`request-error\`: 请求失败 (error)
         `,
       },
     },
@@ -253,7 +215,7 @@ export const 基础示例 = {
     showUpdateAction: true,
     showDeleteAction: true,
     showSelect: false,
-    size: 'default',
+    size: 'medium',
   },
   render: (args) => ({
     components: { JhTable },
@@ -857,16 +819,20 @@ export const 自定义列渲染 = {
       <div>
         <jh-table v-bind="args">
           <!-- 自定义状态列 -->
-          <template v-slot:item.status="{ item }">
+          <template v-slot:item.status="{ item, index }">
             <v-chip
               :color="item.status === '启用' ? 'success' : 'error'"
               small
               label
             >
-              <v-icon left x-small>
-                {{ item.status === '启用' ? 'mdi-check-circle' : 'mdi-close-circle' }}
-              </v-icon>
-              {{ item.status }}
+              <v-badge
+                v-if="index === 0"
+                dot
+                inline
+                color="red"
+                class="mr-1"
+              ></v-badge>
+              {{ item.status }} (索引: {{ index }})
             </v-chip>
           </template>
         </jh-table>
@@ -1360,89 +1326,6 @@ export const 完整CRUD示例 = {
 };
 
 
-export const SelectionAlertRender = {
-  render: () => ({
-    components: { JhTable },
-    data() {
-      return {
-        headers: [
-          { text: '????', value: 'name' },
-          { text: '????', value: 'containers' },
-          { text: '????', value: 'calls' },
-          { text: '???', value: 'owner' },
-          { text: '????', value: 'createdAt' }
-        ],
-        items: [
-          { id: 1, name: 'AppName-0', containers: 8, calls: 1276, owner: '???', createdAt: '2025-11-23' },
-          { id: 2, name: 'AppName-1', containers: 12, calls: 938, owner: '???', createdAt: '2025-11-23' },
-          { id: 3, name: 'AppName-2', containers: 1, calls: 820, owner: '???', createdAt: '2025-11-23' },
-          { id: 4, name: 'AppName-3', containers: 5, calls: 1291, owner: '???', createdAt: '2025-11-23' },
-          { id: 5, name: 'AppName-4', containers: 17, calls: 1796, owner: '???', createdAt: '2025-11-23' }
-        ]
-      };
-    },
-    methods: {
-      renderAlert(h, { selectedRows, onCleanSelected }) {
-        const totalContainers = selectedRows.reduce((sum, row) => sum + row.containers, 0);
-        const totalCalls = selectedRows.reduce((sum, row) => sum + row.calls, 0);
-        return h(
-          'div',
-          { class: 'd-flex align-center flex-wrap', style: { gap: '12px' } },
-          [
-            h('span', { class: 'font-weight-medium' }, `?? ${selectedRows.length} ?`),
-            h(
-              'v-btn',
-              {
-                props: { text: true, xSmall: true, color: 'primary' },
-                on: { click: onCleanSelected }
-              },
-              '????'
-            ),
-            h('span', { class: 'grey--text text--darken-1' }, `?????${totalContainers} ?`),
-            h('span', { class: 'grey--text text--darken-1' }, `????${totalCalls} ?`)
-          ]
-        );
-      },
-      renderAlertActions(h, { selectedRows }) {
-        return h('div', { class: 'd-flex align-center', style: { gap: '8px' } }, [
-          h(
-            'v-btn',
-            {
-              props: { small: true, color: 'error' },
-              on: { click: () => this.handleBatchDelete(selectedRows) }
-            },
-            '????'
-          ),
-          h(
-            'v-btn',
-            {
-              props: { small: true, outlined: true, color: 'primary' },
-              on: { click: () => this.handleExport(selectedRows) }
-            },
-            '????'
-          )
-        ]);
-      },
-      handleBatchDelete(rows) {
-        alert(`???? ${rows.length} ?`);
-      },
-      handleExport(rows) {
-        alert(`?? ${rows.length} ?`);
-      }
-    },
-    template: `
-      <jh-table
-        :headers="headers"
-        :items="items"
-        show-select
-        :toolbar="false"
-        :table-alert-render="renderAlert"
-        :table-alert-option-render="renderAlertActions"
-      />
-    `
-  })
-};
-
 // 受控服务端分页 (完全由父组件控制)
 export const 受控服务端分页 = {
   render: () => ({
@@ -1513,3 +1396,87 @@ export const 受控服务端分页 = {
     `,
   }),
 };
+
+// 原生插槽透传
+export const 原生插槽透传 = {
+  render: () => ({
+    components: { JhTable },
+    data() {
+      return {
+        headers: sampleHeaders,
+        items: sampleItems.slice(0, 5),
+      };
+    },
+    template: `
+      <jh-table :headers="headers" :items="items" header-title="原生插槽透传示例">
+        <!-- 顶部插槽 -->
+        <template v-slot:top>
+          <v-toolbar flat color="blue lighten-4">
+            <v-toolbar-title>这是 v-data-table 的 top 插槽</v-toolbar-title>
+            <v-divider class="mx-4" inset vertical></v-divider>
+            <v-spacer></v-spacer>
+            <v-btn color="primary" dark class="mb-2">自定义按钮</v-btn>
+          </v-toolbar>
+        </template>
+
+        <!-- 底部插槽 -->
+        <template v-slot:footer>
+          <div class="pa-4 text-center grey lighten-3">
+            这是 v-data-table 的 footer 插槽，可以放置汇总信息等
+          </div>
+        </template>
+
+        <!-- 自定义表头插槽 (原生方式) -->
+        <template v-slot:header.username="{ header }">
+          <span class="orange--text font-weight-bold italic">{{ header.text }} (自定义)</span>
+        </template>
+      </jh-table>
+    `,
+  }),
+};
+
+// 原生实例访问
+export const 原生实例访问 = {
+  render: () => ({
+    components: { JhTable },
+    data() {
+      return {
+        headers: sampleHeaders,
+        items: sampleItems,
+      };
+    },
+    template: `
+      <div>
+        <div class="mb-4">
+          <v-btn @click="callNativeSelectAll" color="primary">通过 Ref 调用原生全选 (selectAll)</v-btn>
+          <v-btn @click="checkNativeInstance" color="secondary" class="ml-2">检查原生实例</v-btn>
+        </div>
+        <jh-table
+          ref="jhTableRef"
+          :headers="headers"
+          :items="items"
+          show-select
+          header-title="原生实例访问示例"
+        />
+      </div>
+    `,
+    methods: {
+      callNativeSelectAll() {
+        const vDataTable = this.$refs.jhTableRef.getVDataTable();
+        if (vDataTable) {
+          // 注意：Vuetify 2.x 的 selectAll 可能需要特定参数或通过内部 toggle 实现
+          // 这里演示获取实例并操作
+          vDataTable.toggleSelectAll(true);
+          alert('已通过 getVDataTable().toggleSelectAll(true) 触发全选');
+        }
+      },
+      checkNativeInstance() {
+        const vDataTable = this.$refs.jhTableRef.getVDataTable();
+        console.log('原生 v-data-table 实例:', vDataTable);
+        alert('实例已打印到控制台，构造函数名：' + vDataTable.$options.name);
+      }
+    }
+  }),
+};
+
+

package/src/components/JhTable/JhTable.vue

@@ -65,8 +65,9 @@
         />
         <template v-else>
           <v-icon small class="mr-2" color="primary">mdi-checkbox-marked-circle</v-icon>
-          <span>已选择 <strong class="primary--text">{{ selectedItems.length }}</strong> 项</span>
-          <v-btn text x-small class="ml-2" @click="clearSelection">清空</v-btn>
+          <div>已选择 <strong class="primary--text">{{ selectedItems.length }}</strong> 项</div>
+          <v-spacer></v-spacer>
+          <a text x-small class="ml-2" @click="clearSelection">清空</a>
         </template>
       </div>
       <div v-if="hasAlertActionsContent" class="jh-pro-table-alert-actions">
@@ -254,7 +255,7 @@
       :show-select="showSelectComputed"
       :single-select="singleSelectComputed"
       :value="selectedItems"
-      :item-key="rowKey"
+      :item-key="computedRowKey"
       :dense="tableDense"
       :multi-sort="multiSort"
       :must-sort="mustSort"
@@ -277,7 +278,7 @@
         <slot :name="`header.${header.value}`" :header="h">{{ h.text || h.title }}</slot>
       </template>
 
-      <!-- 自定义列插槽 -->
+      <!-- 自定义列插槽 (透传 item.* 并在没有时回退到默认渲染) -->
       <template
         v-for="header in visibleHeaders"
         v-slot:[`item.${header.value}`]="{ item, value, index }"
@@ -383,10 +384,10 @@
 
         <!-- 普通列 -->
         <template v-else>
-          <!-- 自定义插槽 -->
-          <slot v-if="header.slot || $scopedSlots[`item.${header.value}`]" :name="`item.${header.value}`" :item="item" :value="value"></slot>
+          <!-- 自定义插槽 (透传 item.[value]) -->
+          <slot v-if="header.slot || $scopedSlots[`item.${header.value}`]" :name="`item.${header.value}`" :item="item" :value="value" :index="index"></slot>
 
-          <!-- 列配置渲染 -->
+          <!-- 列配置渲染 (没有自定义插槽时) -->
           <div v-else class="jh-table-schema-cell d-flex align-center flex-wrap">
             <!-- 状态标签 -->
             <template v-if="header.valueType === 'status'">
@@ -486,8 +487,13 @@
         </template>
       </template>
 
+      <!-- 透传所有其他插槽 (v-data-table 的原生插槽，排除已处理的) -->
+      <template v-for="slotName in passthroughSlots" v-slot:[slotName]="slotProps">
+        <slot :name="slotName" v-bind="slotProps"></slot>
+      </template>
+
       <!-- 加载中 -->
-      <template v-slot:loading>
+      <template v-if="!$scopedSlots.loading" v-slot:loading>
         <div class="jh-no-data pa-6">
           <v-progress-circular indeterminate color="primary"></v-progress-circular>
           <div class="mt-2">数据加载中...</div>
@@ -495,7 +501,7 @@
       </template>
 
       <!-- 无数据 -->
-      <template v-slot:no-data>
+      <template v-if="!$scopedSlots['no-data']" v-slot:no-data>
         <div class="jh-no-data pa-6">
           <v-icon large color="grey lighten-1">mdi-inbox-outline</v-icon>
           <div class="mt-2 text-body-2 grey--text">暂无数据</div>
@@ -503,7 +509,7 @@
       </template>
 
       <!-- 无结果 -->
-      <template v-slot:no-results>
+      <template v-if="!$scopedSlots['no-results']" v-slot:no-results>
         <div class="jh-no-data pa-6">
           <v-icon large color="grey lighten-1">mdi-magnify</v-icon>
           <div class="mt-2 text-body-2 grey--text">未找到匹配的数据</div>
@@ -511,7 +517,7 @@
       </template>
 
       <!-- 分页文本 -->
-      <template v-slot:[`footer.page-text`]="pagination">
+      <template v-if="!$scopedSlots['footer.page-text']" v-slot:[`footer.page-text`]="pagination">
         <span>{{ pagination.pageStart }}-{{ pagination.pageStop }}</span>
         <span class="ml-1">共{{ pagination.itemsLength }}条</span>
       </template>
@@ -808,11 +814,16 @@ export default {
     },
     rowKey: {
       type: String,
-      default: 'id'
+      default: undefined
+    },
+    // 别名，兼容 v-data-table
+    itemKey: {
+      type: String,
+      default: undefined
     },
     size: {
       type: String,
-      default: 'default', // default / medium / compact
+      default: 'medium', // default / medium / compact
       validator: (v) => ['default', 'medium', 'compact'].includes(v)
     },
     footerProps: {
@@ -882,13 +893,15 @@ export default {
       internalSortBy: this.normalizeSortBy(this.sortBy),
       internalSortDesc: this.normalizeSortDesc(this.sortDesc),
       sortChangeTimer: null,
-      hasAppliedDefaultRowSelection: false
+      hasAppliedDefaultRowSelection: false,
+      // 最终使用的 item-key
+      computedRowKey: this.rowKey || this.itemKey || this.$attrs['item-key'] || 'id'
     };
   },
   computed: {
     // 选中的行 keys
     selectedRowKeys() {
-      return this.selectedItems.map(item => item[this.rowKey]);
+      return this.selectedItems.map(item => item[this.computedRowKey]);
     },
 
     tableAlertScope() {
@@ -1013,6 +1026,24 @@ export default {
     customHeaderSlots() {
       return this.internalColumns.filter(h => this.$scopedSlots[`header.${h.value}`]);
     },
+    // 需要透传的原生插槽
+    passthroughSlots() {
+      const handledSlots = [
+        'loading', 'no-data', 'no-results', 'footer.page-text',
+        'toolbar-actions', 'toolbar-extra', 'header-title', 'table-extra', 'alert', 'alert-actions'
+      ];
+      return Object.keys(this.$scopedSlots).filter(name => {
+        // 排除已处理的 item.* 和 header.*
+        if (name.startsWith('item.') || name.startsWith('header.')) {
+          return false;
+        }
+        // 排除筛选字段插槽
+        if (name.startsWith('filter-field-')) {
+          return false;
+        }
+        return !handledSlots.includes(name);
+      });
+    },
     // 表格样式类
     tableClassComputed() {
       return [
@@ -1098,7 +1129,7 @@ export default {
         'filterSearchText', 'filterResetText', 'showCreateButton', 'showUpdateAction',
         'showDeleteAction', 'actionColumn', 'columnsState', 'pagination',
         'itemsPerPage', 'rowSelection', 'tableAlertRender', 'tableAlertOptionRender',
-        'showSelect', 'singleSelect', 'rowKey', 'size', 'footerProps',
+        'showSelect', 'singleSelect', 'rowKey', 'itemKey', 'size', 'footerProps',
         'tableClass', 'polling', 'debounceTime', 'dataTableProps'
       ];
       
@@ -1215,6 +1246,12 @@ export default {
         this.$nextTick(() => this.applySelectionState());
       }
     },
+    rowKey(val) {
+      this.computedRowKey = val || this.itemKey || this.$attrs['item-key'] || 'id';
+    },
+    itemKey(val) {
+      this.computedRowKey = this.rowKey || val || this.$attrs['item-key'] || 'id';
+    },
     actionColumn: {
       handler() {
         this.initColumns(this.headers);
@@ -1618,7 +1655,7 @@ export default {
     handleSelectionChange(selectedItems) {
       this.selectedItems = selectedItems;
       const payload = {
-        selectedRowKeys: selectedItems.map(item => item[this.rowKey]),
+        selectedRowKeys: selectedItems.map(item => item[this.computedRowKey]),
         selectedRows: selectedItems
       };
       this.$emit('selection-change', payload);
@@ -1824,6 +1861,10 @@ export default {
       if (!label) return '';
       return type === 'select' ? `请选择${label}` : `请输入${label}`;
     },
+    // 获取原生 v-data-table 实例
+    getVDataTable() {
+      return this.$refs.dataTable;
+    },
     // 重新加载数据（服务端分页）
     async reload() {
       if (!this.request) return;
@@ -2042,7 +2083,7 @@ export default {
     syncSelectionByKeys(keys) {
       if (!Array.isArray(keys)) return;
       const keySet = new Set(keys);
-      const matched = this.currentItems.filter(item => keySet.has(item[this.rowKey]));
+      const matched = this.currentItems.filter(item => keySet.has(item[this.computedRowKey]));
       this.selectedItems = matched;
       this.$emit('input', matched);
     },
@@ -2050,7 +2091,7 @@ export default {
       if (this.hasAppliedDefaultRowSelection) return;
       if (!this.rowSelection || !Array.isArray(this.rowSelection.defaultSelectedRowKeys)) return;
       const keySet = new Set(this.rowSelection.defaultSelectedRowKeys);
-      const matched = this.currentItems.filter(item => keySet.has(item[this.rowKey]));
+      const matched = this.currentItems.filter(item => keySet.has(item[this.computedRowKey]));
       if (matched.length) {
         this.selectedItems = matched;
         this.$emit('input', matched);
@@ -2081,7 +2122,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px 24px;
+  padding: 16px 0;
   border-bottom: 1px solid #f0f0f0;
   min-height: 64px;
 }
@@ -2099,7 +2140,10 @@ export default {
   height: 40px;
 }
 .jh-pro-table ::v-deep .jh-table-medium.v-data-table > .v-data-table__wrapper > table > tbody > tr > td {
-  height: 40px;
+    min-height: 40px;
+    height: 40px;
+    color: #333C44;
+    font-size: .8125rem;
 }
 
 
@@ -2133,14 +2177,14 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding: 12px 24px;
-  background: #e6f7ff;
-  border: 1px solid #91d5ff;
+  background: #fbfbfb;
   border-radius: 4px;
   margin: 16px 0 0;
 }
 
 .jh-pro-table-alert-info {
   display: flex;
+  flex: 1;
   align-items: center;
   font-size: 14px;
   color: rgba(0, 0, 0, 0.65);
@@ -2155,6 +2199,7 @@ export default {
 /* 工具栏 */
 .jh-pro-table-toolbar {
   padding: 16px 0 !important;
+  flex: inherit;
 }
 
 /* 表格额外内容区 */
@@ -2225,6 +2270,7 @@ export default {
 .jh-table-default >>> .v-data-table > .v-data-table__wrapper > table > thead > tr > th {
   height: 48px !important;
   padding: 0 16px !important;
+  
 }
 
 .jh-table-medium >>> .v-data-table > .v-data-table__wrapper > table > tbody > tr > td,
@@ -2338,6 +2384,20 @@ export default {
   cursor: pointer;
 }
 
+/* 表格行选中样式 */
+.jh-pro-table ::v-deep .v-data-table > .v-data-table__wrapper > table > tbody > tr.v-data-table__selected {
+  background-color: #E6F7FF !important;
+}
+
+.jh-pro-table ::v-deep .v-data-table > .v-data-table__wrapper > table > tbody > tr.v-data-table__selected:hover {
+  background-color: #D1EDFF !important;
+}
+
+/* 优化选中行的过渡效果 */
+.jh-pro-table ::v-deep .v-data-table > .v-data-table__wrapper > table > tbody > tr {
+  transition: background-color 0.2s ease;
+}
+
 /* Flex 工具类（如果没有 Tailwind） */
 .flex {
   display: flex;

package/src/style/globalCSSVuetifyV4.css

@@ -359,8 +359,7 @@
     .v-data-table>.v-data-table__wrapper>table>tbody>tr>td,
     .v-data-table>.v-data-table__wrapper>table>tfoot>tr>td,
     .v-data-table>.v-data-table__wrapper>table>thead>tr>td {
-        min-height: 40px;
-        height: 40px;
+       
         color: #333C44;
         font-size: .8125rem;
     }