@a2simcode/ui 0.0.87 → 0.0.89

package/docs/components/meta/table-panel.ts

@@ -12,6 +12,12 @@ export default {
       "type": "boolean",
       "default": "false"
     },
+    {
+      "name": "parentKey",
+      "description": "父级字段名（isTree 为 true 时用于将扁平数据转换成树形数据）",
+      "type": "string",
+      "default": "''"
+    },
     {
       "name": "isShowNumber",
       "description": "是否显示序号",
@@ -127,6 +133,36 @@ export default {
       "description": "高亮模式 cross 十字 row 行 column 列 cell 单元格",
       "type": "'cross' | 'row' | 'column' | 'cell'",
       "default": "'row'"
+    },
+    {
+      "name": "showFilterButton",
+      "description": "是否显示筛选按钮（包含右侧固定筛选面板）",
+      "type": "boolean",
+      "default": "true"
+    },
+    {
+      "name": "showOrderButton",
+      "description": "是否显示排序按钮",
+      "type": "boolean",
+      "default": "true"
+    },
+    {
+      "name": "showColumnButton",
+      "description": "是否显示列管理按钮",
+      "type": "boolean",
+      "default": "true"
+    },
+    {
+      "name": "showRefreshButton",
+      "description": "是否显示刷新按钮",
+      "type": "boolean",
+      "default": "true"
+    },
+    {
+      "name": "showFullscreenButton",
+      "description": "是否显示全屏按钮",
+      "type": "boolean",
+      "default": "true"
     }
   ],
   "events": [

package/docs/components/table-panel.md

@@ -15,6 +15,19 @@
   </template>
 </Demo>
 
+## 树形数据
+
+当 `isTree` 为 `true` 时，可配合 `parentKey` 将扁平数据自动转换为树形结构展示。
+
+<Demo :source-code="tablePanelTreeParentKeyCode">
+  <template #source>
+    <table-panel-tree-parent-key />
+  </template>
+  <template #description>
+    设置 `is-tree` 和 `parent-key`，在 `loadData` 返回的扁平数据中通过 `parent-key` 指定的字段建立父子关系。
+  </template>
+</Demo>
+
 ## 筛选功能
 
 支持多条件筛选，可以针对不同字段类型选择不同的筛选方式。
@@ -59,7 +72,6 @@
   </template>
 </Demo>
 
-
 ## 多选功能
 
 通过 `is-multiple` 属性开启多选功能。多选功能支持两种使用场景：
@@ -118,42 +130,42 @@
    - 如果数据被刷新或重新加载，有批处理按钮时会清空选中状态，无批处理按钮时会尝试保留仍然存在的记录
 
 3. **获取选中数据**：
-   ```vue
-   <template>
-     <j-table-panel ref="tablePanelRef" is-multiple @select="handleSelect" />
+   <Demo :source-code="tablePanelGetSelectionCode">
+   <template #source>
+   <table-panel-get-selection />
    </template>
-   <script setup>
-   import { ref } from 'vue'
-   
-   const tablePanelRef = ref()
-   
-   // 方式1: 通过事件监听
-   const handleSelect = (selectedRecords) => {
-     console.log('选中的记录:', selectedRecords)
-   }
-   
-   // 方式2: 通过组件实例方法
-   const getSelected = () => {
-     const selected = tablePanelRef.value?.getSelection()
-     console.log('选中的记录:', selected)
-   }
-   </script>
-   ```
+   <template #description>
+   通过 `@select` 监听选中变化；通过组件实例方法 `getSelection()` 获取选中数据，`clearSelection()` 清空选中。
+   </template>
+   </Demo>
 
 4. **两种模式的区别**：
 
-| 特性 | 无批处理按钮 | 有批处理按钮 |
-|------|------------|------------|
-| 工具栏按钮 | 始终显示 | 选中后切换为选中控制按钮 |
-| 查询设置按钮 | 选中后仍显示，进入"仅显示选中"模式后隐藏 | 选中后立即隐藏 |
-| 选中状态保持 | 跨页保持，刷新后尝试保留 | 跨页保持，刷新后清空 |
-| 仅显示选中模式 | 支持 | 支持 |
-| 适用场景 | 需要获取选中数据，但操作在外部处理 | 需要批量操作功能 |
+| 特性           | 无批处理按钮                             | 有批处理按钮             |
+| -------------- | ---------------------------------------- | ------------------------ |
+| 工具栏按钮     | 始终显示                                 | 选中后切换为选中控制按钮 |
+| 查询设置按钮   | 选中后仍显示，进入"仅显示选中"模式后隐藏 | 选中后立即隐藏           |
+| 选中状态保持   | 跨页保持，刷新后尝试保留                 | 跨页保持，刷新后清空     |
+| 仅显示选中模式 | 支持                                     | 支持                     |
+| 适用场景       | 需要获取选中数据，但操作在外部处理       | 需要批量操作功能         |
 
 ## 批量操作
 
 批量操作是多选功能的一种扩展使用方式，详见上面的"多选功能"章节中的"带批处理按钮的多选"部分。
 
+## 按钮显示控制
+
+可以通过属性控制右上角功能按钮是否显示。
+
+<Demo :source-code="tablePanelButtonVisibilityCode">
+  <template #source>
+    <table-panel-button-visibility />
+  </template>
+  <template #description>
+    通过 `showFilterButton / showOrderButton / showColumnButton / showRefreshButton / showFullscreenButton` 控制按钮显示。
+  </template>
+</Demo>
+
 ## API
 
 <ApiTable :data="tablePanelApi" componentName="table-panel" />
@@ -202,17 +214,23 @@ interface LoadDataParams {
 
 <script setup>
 import TablePanelBasic from '../examples/table-panel/basic.vue'
+import TablePanelTreeParentKey from '../examples/table-panel/tree-parent-key.vue'
 import TablePanelFilter from '../examples/table-panel/filter.vue'
 import TablePanelPagination from '../examples/table-panel/pagination.vue'
 import TablePanelMultipleSelection from '../examples/table-panel/multiple-selection.vue'
 import TablePanelBatchOperations from '../examples/table-panel/batch-operations.vue'
 import TablePanelSubTableLazy from '../examples/table-panel/sub-table-lazy.vue'
+import TablePanelGetSelection from '../examples/table-panel/get-selection.vue'
+import TablePanelButtonVisibility from '../examples/table-panel/button-visibility.vue'
 import tablePanelApi from './meta/table-panel'
 
 import tablePanelBasicCode from '../examples/table-panel/basic.vue?raw'
+import tablePanelTreeParentKeyCode from '../examples/table-panel/tree-parent-key.vue?raw'
 import tablePanelFilterCode from '../examples/table-panel/filter.vue?raw'
 import tablePanelPaginationCode from '../examples/table-panel/pagination.vue?raw'
 import tablePanelMultipleSelectionCode from '../examples/table-panel/multiple-selection.vue?raw'
 import tablePanelBatchOperationsCode from '../examples/table-panel/batch-operations.vue?raw'
 import tablePanelSubTableLazyCode from '../examples/table-panel/sub-table-lazy.vue?raw'
+import tablePanelGetSelectionCode from '../examples/table-panel/get-selection.vue?raw'
+import tablePanelButtonVisibilityCode from '../examples/table-panel/button-visibility.vue?raw'
 </script>

package/docs/components/table.md

@@ -57,6 +57,19 @@
   </template>
 </Demo>
 
+## Checkbox 交互布局
+
+通过列类型 `checkbox` 可以渲染一个内置的交互布局：两行内容（like/collect + normal/special），点击会实时更新当前行的数据并刷新显示。
+
+<Demo :source-code="tableCheckboxLayoutCode">
+  <template #source>
+    <table-checkbox-layout />
+  </template>
+  <template #description>
+    在 `columns` 中设置 `type: 'checkbox'`，并在对应字段里存储 `{ like, collect, type }`。
+  </template>
+</Demo>
+
 ## 自定义布局
 
 通过列配置中的 `customLayout` 属性，可以使用 VTable 的 CustomLayout 功能自定义单元格渲染。
@@ -280,6 +293,7 @@ import TableBasic from '../examples/table/basic.vue'
 import TableTag from '../examples/table/tag.vue'
 import TableIcon from '../examples/table/icon.vue'
 import TableLink from '../examples/table/link.vue'
+import TableCheckboxLayout from '../examples/table/checkbox-layout.vue'
 import TableCustomLayout from '../examples/table/custom-layout.vue'
 import TableFrozenColumn from '../examples/table/frozen-column.vue'
 import TableHeightMode from '../examples/table/height-mode.vue'
@@ -301,6 +315,7 @@ import tableBasicCode from '../examples/table/basic.vue?raw'
 import tableTagCode from '../examples/table/tag.vue?raw'
 import tableIconCode from '../examples/table/icon.vue?raw'
 import tableLinkCode from '../examples/table/link.vue?raw'
+import tableCheckboxLayoutCode from '../examples/table/checkbox-layout.vue?raw'
 import tableCustomLayoutCode from '../examples/table/custom-layout.vue?raw'
 import tableFrozenColumnCode from '../examples/table/frozen-column.vue?raw'
 import tableHeightModeCode from '../examples/table/height-mode.vue?raw'

package/docs/examples/table/checkbox-layout.vue

@@ -0,0 +1,68 @@
+<template>
+  <div style="position: relative; width: 100%; height: 400px">
+    <j-table :columns="columns" :records="records" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'name',
+    config: {
+      label: '用户',
+      width: 120,
+      align: 'left',
+    },
+  },
+  {
+    id: 'settings',
+    type: 'checkbox',
+    config: {
+      label: '设置',
+      width: 240,
+      align: 'center',
+    },
+  },
+  {
+    id: 'settingsText',
+    config: {
+      label: '当前值',
+      width: 'auto',
+      align: 'left',
+      fieldFormat: (row: any) => {
+        return JSON.stringify(row.settings)
+      },
+    },
+  },
+])
+
+const records = ref([
+  {
+    id: '1',
+    name: '张三',
+    settings: [
+      { label: 'like', value: 'like', checked: true },
+      { label: 'collect', value: 'collect', checked: false },
+    ],
+  },
+  {
+    id: '2',
+    name: '李四',
+    settings: [
+      { label: 'like', value: 'like', checked: false },
+      { label: 'collect', value: 'collect', checked: true },
+      { label: 'notify', value: 'notify', checked: true },
+    ],
+  },
+  {
+    id: '3',
+    name: '王五',
+    settings: [
+      { label: 'like', value: 'like', checked: false },
+      { label: 'collect', value: 'collect', checked: false },
+    ],
+  },
+])
+</script>

package/docs/examples/table-panel/button-visibility.vue

@@ -0,0 +1,88 @@
+<template>
+  <div style="position: relative; width: 100%; height: 620px">
+    <div style="margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px">
+      <label style="display: flex; align-items: center; gap: 6px">
+        <input v-model="showFilterButton" type="checkbox" />
+        筛选
+      </label>
+      <label style="display: flex; align-items: center; gap: 6px">
+        <input v-model="showOrderButton" type="checkbox" />
+        排序
+      </label>
+      <label style="display: flex; align-items: center; gap: 6px">
+        <input v-model="showColumnButton" type="checkbox" />
+        列管理
+      </label>
+      <label style="display: flex; align-items: center; gap: 6px">
+        <input v-model="showRefreshButton" type="checkbox" />
+        刷新
+      </label>
+      <label style="display: flex; align-items: center; gap: 6px">
+        <input v-model="showFullscreenButton" type="checkbox" />
+        全屏
+      </label>
+    </div>
+
+    <j-table-panel
+      row-key="orderId"
+      :columns="columns"
+      :load-data="loadData"
+      :show-filter-button="showFilterButton"
+      :show-order-button="showOrderButton"
+      :show-column-button="showColumnButton"
+      :show-refresh-button="showRefreshButton"
+      :show-fullscreen-button="showFullscreenButton"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const showFilterButton = ref(true)
+const showOrderButton = ref(true)
+const showColumnButton = ref(true)
+const showRefreshButton = ref(true)
+const showFullscreenButton = ref(true)
+
+const columns = ref([
+  {
+    id: 'orderId',
+    type: '',
+    config: {
+      label: '订单号',
+      width: 150,
+      filter: { isSearchKeyword: true },
+    },
+  },
+  {
+    id: 'customerId',
+    type: '',
+    config: {
+      label: '客户编号',
+      width: 120,
+      filter: { isSearchKeyword: true },
+    },
+  },
+  {
+    id: 'productName',
+    type: '',
+    config: {
+      label: '产品名称',
+      filter: { isSearchKeyword: true },
+    },
+  },
+])
+
+const mockData = [
+  { orderId: 'CA-2016-152156', customerId: 'CG-12520', productName: 'Canon ImageCLASS 2200' },
+  { orderId: 'CA-2017-152157', customerId: 'DV-13045', productName: 'Logitech Mouse' },
+  { orderId: 'US-2017-108966', customerId: 'SO-20335', productName: 'HON Mesh Task Chair' },
+]
+
+const loadData = async () => {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(mockData), 200)
+  })
+}
+</script>

package/docs/examples/table-panel/get-selection.vue

@@ -0,0 +1,111 @@
+<template>
+  <div style="position: relative; width: 100%; height: 560px">
+    <div style="margin-bottom: 8px; display: flex; gap: 8px; align-items: center">
+      <j-button type="primary" label="获取选中" @click="handleGetSelection" />
+      <j-button type="text" label="清空选中" @click="handleClearSelection" />
+      <div style="font-size: 12px; color: var(--j-color-text-tertiary)">
+        当前选中：{{ selectedRecords.length }} 条
+      </div>
+    </div>
+
+    <j-table-panel
+      ref="tablePanelRef"
+      row-key="orderId"
+      :columns="columns"
+      :load-data="loadData"
+      is-multiple
+      @select="handleSelect"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const tablePanelRef = ref<any>()
+const selectedRecords = ref<Record<string, any>[]>([])
+
+const columns = ref([
+  {
+    id: 'orderId',
+    type: '',
+    config: {
+      label: '订单号',
+      width: 150,
+      filter: { isSearchKeyword: true },
+    },
+  },
+  {
+    id: 'customerId',
+    type: '',
+    config: {
+      label: '客户编号',
+      width: 120,
+      filter: { isSearchKeyword: true },
+    },
+  },
+  {
+    id: 'productName',
+    type: '',
+    config: {
+      label: '产品名称',
+      filter: { isSearchKeyword: true },
+    },
+  },
+  {
+    id: 'category',
+    type: '',
+    config: {
+      label: '类别',
+      width: 120,
+      dataType: 'options',
+      options: [
+        { label: '办公用品', value: '办公用品' },
+        { label: '科技产品', value: '科技产品' },
+        { label: '家具', value: '家具' },
+      ],
+    },
+  },
+])
+
+const mockData = [
+  {
+    orderId: 'CA-2016-152156',
+    customerId: 'CG-12520',
+    productName: 'Canon ImageCLASS 2200 Advanced Copier',
+    category: '办公用品',
+  },
+  {
+    orderId: 'CA-2017-152157',
+    customerId: 'DV-13045',
+    productName: 'Logitech Wireless Mouse',
+    category: '科技产品',
+  },
+  {
+    orderId: 'US-2017-108966',
+    customerId: 'SO-20335',
+    productName: 'HON Mesh Task Chair',
+    category: '家具',
+  },
+]
+
+const loadData = async () => {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(mockData), 200)
+  })
+}
+
+const handleSelect = (records: Record<string, any>[]) => {
+  selectedRecords.value = records || []
+}
+
+const handleGetSelection = () => {
+  const selection = tablePanelRef.value?.getSelection?.() || []
+  ElMessage.info(`当前选中 ${selection.length} 条`)
+}
+
+const handleClearSelection = () => {
+  tablePanelRef.value?.clearSelection?.()
+}
+</script>

package/docs/examples/table-panel/tree-parent-key.vue

@@ -0,0 +1,66 @@
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table-panel
+      row-key="id"
+      :columns="columns"
+      :load-data="loadData"
+      :is-tree="true"
+      parent-key="pid"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'name',
+    type: '',
+    config: {
+      label: '名称',
+      width: 240,
+    },
+  },
+  {
+    id: 'id',
+    type: '',
+    config: {
+      label: 'ID',
+      width: 160,
+    },
+  },
+  {
+    id: 'pid',
+    type: '',
+    config: {
+      label: '父ID',
+      width: 160,
+    },
+  },
+  {
+    id: 'value',
+    type: '',
+    config: {
+      label: '值',
+      width: 120,
+      align: 'right',
+    },
+  },
+])
+
+const flatData = [
+  { id: '1', pid: '', name: '父节点 1', value: 10 },
+  { id: '1-1', pid: '1', name: '子节点 1-1', value: 11 },
+  { id: '1-2', pid: '1', name: '子节点 1-2', value: 12 },
+  { id: '1-2-1', pid: '1-2', name: '子节点 1-2-1', value: 121 },
+  { id: '2', pid: '', name: '父节点 2', value: 20 },
+  { id: '2-1', pid: '2', name: '子节点 2-1', value: 21 },
+]
+
+const loadData = async (_params: Record<string, any>) => {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(flatData), 200)
+  })
+}
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2simcode/ui",
-  "version": "0.0.87",
+  "version": "0.0.89",
   "description": "A Vue 3 UI Component Library",
   "type": "module",
   "main": "./dist/simcode-ui.umd.js",