jianghu-ui 1.0.6 → 1.0.8

package/src/components/JhFormFields/JhFormFields.vue

@@ -74,11 +74,6 @@
                 </v-tooltip>
               </div>
 
-              <!-- 额外提示信息 -->
-              <div v-if="field.extra" class="jh-field-extra text-caption grey--text mb-2">
-                {{ field.extra }}
-              </div>
-
               <!-- 只读模式展示 -->
               <div v-if="isFieldReadonly(field)" class="jh-form-readonly-text">
                 {{ getReadonlyValue(field) }}
@@ -168,6 +163,7 @@
                   :multiple="field.multiple"
                   :chips="field.chips"
                   :hide-details="field.hideDetails || hideDetails"
+                  small-chips
                   v-bind="field.props"
                   @change="handleChange(field.key, $event)"
                   @blur="handleBlur(field.key, $event)"
@@ -591,13 +587,20 @@ export default {
 
   watch: {
     value: {
-      handler(val) {
-        this.values = { ...val };
+      handler() {
+        this.initValues();
       },
       immediate: true,
       deep: true,
     },
 
+    fields: {
+      handler() {
+        this.initValues();
+      },
+      deep: true,
+    },
+
     dependencies: {
       handler(newDeps) {
         this.setupDependencyWatchers(newDeps);
@@ -912,7 +915,7 @@ export default {
 .jh-form-fields--bordered {
   border: 1px solid rgba(0, 0, 0, 0.12);
   border-radius: 4px;
-  padding: 16px;
+  padding: 15px 16px 30px;
 }
 
 .jh-form-fields-header {
@@ -943,10 +946,37 @@ export default {
   margin-bottom: 0 !important;
 }
 
-.jh-form-fields--readonly .jh-form-readonly-text {
-  padding: 8px 0;
-  min-height: 40px;
-  color: rgba(0, 0, 0, 0.87);
+.jh-form-fields--readonly {
+  /* 只读模式整体样式 */
+  .jh-field-label {
+    /* 只读模式下的标签样式 */
+    color: rgba(0, 0, 0, 0.65);
+    font-weight: 500;
+  }
+  
+  .jh-form-readonly-text {
+    /* 只读模式下的文本样式 */
+    padding: 6px 12px;
+    color: rgba(0, 0, 0, 0.87);
+    background-color: rgba(0, 0, 0, 0.04);
+    border-radius: 4px;
+    line-height: 1.5;
+    transition: all 0.2s ease;
+  }
+  
+  /* 水平布局下的调整 */
+  &.jh-form-fields--horizontal {
+    .jh-field-wrapper {
+      margin-bottom: 16px;
+    }
+  }
+  
+  /* 垂直布局下的调整 */
+  &.jh-form-fields--vertical {
+    .jh-field-wrapper {
+      margin-bottom: 16px;
+    }
+  }
 }
 
 .jh-field-label {
@@ -983,10 +1013,6 @@ export default {
   word-break: break-word;
 }
 
-.jh-field-extra {
-  margin-top: -8px;
-  line-height: 1.5;
-}
 
 .jh-color-preview {
   display: inline-block;

package/src/components/JhModal/JhModal.stories.js

@@ -119,7 +119,7 @@ export default {
 };
 
 // 基础用法
-export const Basic = {
+export const 基础用法 = {
   render: (args) => ({
     components: { JhModal },
     data() {
@@ -194,7 +194,7 @@ export const Basic = {
 };
 
 // 全屏弹窗
-export const Fullscreen = {
+export const 全屏弹窗 = {
   render: (args) => ({
     components: { JhModal },
     data() {
@@ -260,7 +260,7 @@ export const Fullscreen = {
 };
 
 // 自定义操作按钮
-export const CustomActions = {
+export const 自定义操作按钮 = {
   render: (args) => ({
     components: { JhModal },
     data() {
@@ -352,7 +352,7 @@ export const CustomActions = {
 };
 
 // 无操作区域
-export const NoActions = {
+export const 无操作区域 = {
   render: (args) => ({
     components: { JhModal },
     data() {
@@ -416,7 +416,7 @@ export const NoActions = {
 };
 
 // 不同尺寸
-export const DifferentSizes = {
+export const 不同尺寸 = {
   render: (args) => ({
     components: { JhModal },
     data() {
@@ -525,7 +525,7 @@ export const DifferentSizes = {
 };
 
 // 非持久化弹窗
-export const NonPersistent = {
+export const 非持久化弹窗 = {
   render: (args) => ({
     components: { JhModal },
     data() {

package/src/components/JhModal/JhModal.vue

@@ -10,7 +10,7 @@
   >
     <v-card>
       <!-- 标题栏 -->
-      <v-card-title class="d-flex align-center justify-space-between pa-4  sticky top-0 z-10 bg-white darken-1">
+      <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/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 级功能。
+
+## 核心特性
+
+### 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);
+      }
+    }
+  }),
+};
+
+