jianghu-ui 1.0.5 → 1.0.7

package/src/components/JhModalForm/JhModalForm.vue

@@ -8,7 +8,7 @@
   >
     <v-card>
       <!-- 标题栏 -->
-      <v-card-title class="d-flex align-center justify-space-between pa-4">
+      <v-card-title class="d-flex align-center justify-space-between pa-4 sticky top-0 z-10 bg-white darken-1">
         <span class="text-h6">{{ title }}</span>
         <v-btn
           v-if="closable"

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 级功能。
+
+## 核心特性
 
-### 5. 行选择增强
-- 支持单选/多选
-- \`selection-change\` 事件返回 \`{ selectedRowKeys, selectedRows }\`
-- 提供 \`getSelectedRows()\` 和 \`clearSelection()\` 方法
+### 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 实例。
 
-### 6. 响应式密度
-三种密度自动适配：
-- **default**: 48px 行高
-- **medium**: 40px 行高
-- **compact**: 32px 行高
+### 2. 工具栏与高级筛选
+- **集成搜索**：工具栏内置全局搜索。
+- **列设置**：支持运行时列显示/隐藏切换。
+- **密度切换**：支持 default/medium/compact 三种视觉密度。
+- **高级筛选**：可集成 JhQueryFilter 实现复杂的组合查询。
+
+### 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,85 +1326,157 @@ export const 完整CRUD示例 = {
 };
 
 
-export const SelectionAlertRender = {
+// 受控服务端分页 (完全由父组件控制)
+export const 受控服务端分页 = {
   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' }
-        ]
+        headers: sampleHeaders,
+        items: [],
+        loading: false,
+        page: 1,
+        itemsPerPage: 10,
+        serverItemsLength: 0,
       };
     },
-    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} ?`)
-          ]
-        );
+    mounted() {
+      this.loadData();
+    },
+    watch: {
+      page() {
+        console.log('Page changed to:', this.page);
+        this.loadData();
       },
-      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) }
-            },
-            '????'
-          )
-        ]);
+      itemsPerPage() {
+        console.log('Items per page changed to:', this.itemsPerPage);
+        // 通常改变每页大小时建议重置到第一页，但这里取决于业务逻辑
+        // 注意：v-data-table 可能会自动触发 update:page 为 1
+        this.loadData();
       },
-      handleBatchDelete(rows) {
-        alert(`???? ${rows.length} ?`);
+    },
+    methods: {
+      async loadData() {
+        this.loading = true;
+        console.log(`Loading data: page=${this.page}, size=${this.itemsPerPage}`);
+        
+        // 模拟 API 延迟
+        await new Promise(resolve => setTimeout(resolve, 300));
+        
+        const total = allMockData.length;
+        const start = (this.page - 1) * this.itemsPerPage;
+        const end = start + this.itemsPerPage;
+        
+        this.items = allMockData.slice(start, end);
+        this.serverItemsLength = total;
+        this.loading = false;
       },
-      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"
-      />
-    `
-  })
+      <div>
+        <div class="mb-4 pa-4 orange lighten-5 rounded">
+          <strong>受控服务端分页示例 (无 request 函数)</strong>
+          <p class="mb-0 mt-2">完全由父组件控制 page 和 itemsPerPage，模拟传统的 v-data-table 服务端分页用法。</p>
+          <div class="mt-2">
+            Page: {{ page }} | ItemsPerPage: {{ itemsPerPage }} | Total: {{ serverItemsLength }}
+          </div>
+        </div>
+        <jh-table
+          :headers="headers"
+          :items="items"
+          :loading="loading"
+          :page.sync="page"
+          :items-per-page.sync="itemsPerPage"
+          :server-items-length="serverItemsLength"
+          :footer-props="{
+            'items-per-page-options': [5, 10, 20]
+          }"
+        />
+      </div>
+    `,
+  }),
+};
+
+// 原生插槽透传
+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);
+      }
+    }
+  }),
 };
+
+