jianghu-ui 1.0.5 → 1.0.7

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: {
@@ -845,6 +856,19 @@ export default {
       type: Boolean,
       default: false
     },
+    // ========== v-data-table 透传 Props (补充) ==========
+    page: {
+      type: Number,
+      default: undefined
+    },
+    serverItemsLength: {
+      type: Number,
+      default: undefined
+    },
+    value: {
+      type: Array,
+      default: undefined
+    },
     context: {
       type: Object,
       default: null
@@ -856,26 +880,28 @@ export default {
       searchInputInternal: this.searchInput,
       currentLoading: this.loading,
       currentItems: this.items || [],
-      currentPage: this.pagination ? this.pagination.current || 1 : 1,
+      currentPage: this.page !== undefined ? this.page : (this.pagination ? this.pagination.current || 1 : 1),
       currentItemsPerPage: this.itemsPerPage,
-      serverItemsLength: -1,
+      serverItemsLength: this.serverItemsLength !== undefined ? this.serverItemsLength : -1,
       internalColumns: [],
       currentDensity: this.size,
       isFullscreen: false,
-      selectedItems: [],
+      selectedItems: this.value || [],
       filterValues: {},
       pollingTimer: null,
       searchDebounceTimer: null,
       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() {
@@ -1000,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 [
@@ -1085,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'
       ];
       
@@ -1134,6 +1178,26 @@ export default {
     }
   },
   watch: {
+    page(val) {
+      if (val !== undefined && val !== this.currentPage) {
+        this.currentPage = val;
+      }
+    },
+    serverItemsLength(val) {
+      if (val !== undefined) {
+        this.serverItemsLength = val;
+      }
+    },
+    value(val) {
+      if (val !== undefined) {
+        this.selectedItems = val;
+      }
+    },
+    itemsPerPage(val) {
+      if (val !== undefined && val !== this.currentItemsPerPage) {
+        this.currentItemsPerPage = val;
+      }
+    },
     headers: {
       immediate: true,
       handler(val) {
@@ -1182,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);
@@ -1585,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);
@@ -1634,6 +1704,7 @@ export default {
       const filters = this.transformFilterValues(queryData);
       this.filterValues = filters;
       this.currentPage = 1; // 重置到第一页
+      this.$emit('update:page', 1);
       this.$emit('filter-search', filters);
       if (this.request) {
         this.reload();
@@ -1643,6 +1714,7 @@ export default {
     handleFilterReset() {
       this.filterValues = {};
       this.currentPage = 1; // 重置到第一页
+      this.$emit('update:page', 1);
       this.$emit('filter-reset');
       if (this.request) {
         this.reload();
@@ -1789,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;
@@ -1820,6 +1896,7 @@ export default {
     // 重置到第一页
     reset() {
       this.currentPage = 1;
+      this.$emit('update:page', 1);
       this.reload();
     },
     // 清空选择
@@ -2006,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);
     },
@@ -2014,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);
@@ -2045,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;
 }
@@ -2063,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;
 }
 
 
@@ -2097,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);
@@ -2119,6 +2199,7 @@ export default {
 /* 工具栏 */
 .jh-pro-table-toolbar {
   padding: 16px 0 !important;
+  flex: inherit;
 }
 
 /* 表格额外内容区 */
@@ -2189,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,
@@ -2302,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;
     }

package/src/components/JhAddressSelect/JhAddressSelect.md

@@ -1,267 +0,0 @@
-# JhAddressSelect - 省市区选择组件
-
-省市区三级联动选择组件，支持自定义显示层级、标签文本和数据源。
-
-- ✅ **四级联动**: 支持省、市、区、镇四级联动选择
-- ✅ **自定义层级**: 可配置显示 1-4 级（仅省份、省市、省市区、省市区镇）
-- ✅ **自定义标签**: 支持自定义各级别的显示文本
-- ✅ **自定义数据**: 支持传入自定义省市区数据源
-- ✅ **样式透传**: 支持 Vuetify 的 outlined、dense、loading 等样式
-- ✅ **双向绑定**: 支持 v-model 双向数据绑定
-- ✅ **事件触发**: change 事件在值变化时触发
-- ✅ **清除功能**: 支持清除已选值
-- ✅ **返回完整信息**: 事件返回包�� code 和 name 的完整对象
-- ✅ **多种模式**: 支持普通联动选择 (select) 和级联选择 (cascader) 两种模式
-
-## 基本用法
-
-```vue
-<template>
-  <jh-address-select
-    v-model="address"
-    :data="addressData"
-    @change="handleAddressChange"
-  ></jh-address-select>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      address: { province: null, city: null, district: null, town: null },
-      addressData: [
-        { code: '110000', name: '北京市', children: [...] },
-        { code: '440000', name: '广东省', children: [...] }
-      ]
-    };
-  },
-  methods: {
-    handleAddressChange(value) {
-      console.log('省份:', value.province?.name, value.province?.code);
-      console.log('城市:', value.city?.name, value.city?.code);
-      console.log('区县:', value.district?.name, value.district?.code);
-      console.log('乡镇:', value.town?.name, value.town?.code);
-    }
-  }
-};
-</script>
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| value / v-model | 绑定值，返回包含 code 和 name 的对象 | object | { province: null, city: null, district: null } |
-| level | 显示层级：1-仅省份，2-省市，3-省市区，4-省市区镇 | number | 3 |
-| type | 显示模式：'select' (默认) 或 'cascader' | string | 'select' |
-| label | 级联模式下的输入框标签 | string | '请选择地区' |
-| outlined | 是否使用 outlined 样式 | boolean | true |
-| dense | 是否使用紧凑模式 | boolean | false |
-| loading | 是否显示加载状态 | boolean | false |
-| labels | 自定义标签文本 | object | { province: '省份', city: '城市', district: '区/县', town: '乡镇' } |
-| data | 省市区数据源 | array | 内置示例数据 |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-| --- | --- | --- |
-| input | 值变化时触发（v-model） | (value: object) |
-| change | 值变化时触发 | (value: object) |
-
-### 返回值格式
-
-v-model 绑定值和事件回调参数的格式：
-
-```javascript
-{
-  province: { code: '440000', name: '广东省' },
-  city: { code: '440300', name: '深圳市' },
-  district: { code: '440305', name: '南山区' },
-  town: { code: '440305001', name: '南头街道' }  // level=4 时存在
-}
-```
-
-每个字段都是一个对象，包含 `code`（编码）和 `name`（名称）两个属性。未选择时为 `null`。
-
-### 数据格式
-
-data 属性需要符合以下格式：
-
-```javascript
-[
-  {
-    code: '110000',  // 省份编码
-    name: '北京市',   // 省份名称
-    children: [      // 城市列表
-      {
-        code: '110100',  // 城市编码
-        name: '市辖区',   // 城市名称
-        children: [      // 区县列表
-          {
-            code: '110101',  // 区县编码
-            name: '东城区'   // 区县名称
-          }
-        ]
-      }
-    ]
-  }
-]
-```
-
-## 使用示例
-
-### 默认三级联动
-
-```vue
-<jh-address-select
-  v-model="address"
-  :data="addressData"
-></jh-address-select>
-```
-
-### 级联选择模式
-
-使用 `type="cascader"` 开启级联选择模式。
-
-```vue
-<jh-address-select
-  v-model="address"
-  type="cascader"
-  label="收货地址"
-  :data="addressData"
-></jh-address-select>
-```
-
-### 仅选择到城市
-
-```vue
-<jh-address-select
-  v-model="address"
-  :level="2"
-  :data="addressData"
-></jh-address-select>
-```
-
-### 仅选择省份
-
-```vue
-<jh-address-select
-  v-model="address"
-  :level="1"
-  :data="addressData"
-></jh-address-select>
-```
-
-### 四级联动（省市区镇）
-
-```vue
-<jh-address-select
-  v-model="address"
-  :level="4"
-  :data="addressData"
-></jh-address-select>
-```
-
-### 四级联动（带初始值）
-
-```vue
-<jh-address-select
-  v-model="address"
-  :level="4"
-  :data="addressData"
-></jh-address-select>
-
-<script>
-export default {
-  data() {
-    return {
-      address: {
-        province: { code: '440000', name: '广东省' },
-        city: { code: '440300', name: '深圳市' },
-        district: { code: '440305', name: '南山区' },
-        town: { code: '440305001', name: '南头街道' }
-      }
-    };
-  }
-};
-</script>
-```
-
-### 紧凑模式
-
-```vue
-<jh-address-select
-  v-model="address"
-  dense
-  :data="addressData"
-></jh-address-select>
-```
-
-### 自定义标签文本
-
-```vue
-<jh-address-select
-  v-model="address"
-  :labels="{ province: '所在省份', city: '所在城市', district: '所在区县' }"
-  :data="addressData"
-></jh-address-select>
-```
-
-### 加载状态
-
-```vue
-<jh-address-select
-  v-model="address"
-  :loading="isLoading"
-  :data="addressData"
-></jh-address-select>
-```
-
-### 使用 filled 样式
-
-```vue
-<jh-address-select
-  v-model="address"
-  :outlined="false"
-  :data="addressData"
-></jh-address-select>
-```
-
-### 监听变化
-
-```vue
-<template>
-  <jh-address-select
-    v-model="address"
-    :data="addressData"
-    @change="handleAddressChange"
-  ></jh-address-select>
-</template>
-
-<script>
-export default {
-  methods: {
-    handleAddressChange(value) {
-      console.log('地址变化:', value);
-    }
-  }
-};
-</script>
-```
-
-## 注意事项
-
-1. **数据格式**: data 属性必须符合指定的嵌套格式，包含 code 和 name 字段
-2. **层级控制**: level 属性控制显示的级数，设置为 1 时只显示省份，2 时显示省市，3 时显示省市区，4 时显示省市区镇
-3. **联动逻辑**: 选择省份后会清空城市、区县和乡镇，选择城市后会清空区县和乡镇，选择区县后会清空乡镇
-4. **禁用状态**: 未选择上级时，下级选择器会自动禁用
-5. **响应式布局**: 组件会根据 level 自动调整栅格布局（level=1 时占 12 列，level=2 时占 6 列，level=3 时占 4 列，level=4 时占 3 列）
-6. **返回值格式**: v-model 和事件返回的值包含 code 和 name 两个字段，方便获取编码和名称
-7. **级联模式**: 在 cascader 模式下，点击省份/城市/区县会展示下一级列表，直到选择完指定 level 级数后自动收起菜单
-
-## 相关链接
-
-- [Vuetify Autocomplete](https://vuetifyjs.com/en/components/autocompletes/)
-- [中国行政区划代码](http://www.mca.gov.cn/article/sj/xzqh/)