@a2simcode/ui 0.0.87 → 0.0.88

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

@@ -127,6 +127,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

@@ -59,7 +59,6 @@
   </template>
 </Demo>
 
-
 ## 多选功能
 
 通过 `is-multiple` 属性开启多选功能。多选功能支持两种使用场景：
@@ -118,42 +117,42 @@
    - 如果数据被刷新或重新加载，有批处理按钮时会清空选中状态，无批处理按钮时会尝试保留仍然存在的记录
 
 3. **获取选中数据**：
-   ```vue
-   <template>
-     <j-table-panel ref="tablePanelRef" is-multiple @select="handleSelect" />
+   <Demo :source-code="tablePanelGetSelectionCode">
+   <template #source>
+   <table-panel-get-selection />
+   </template>
+   <template #description>
+   通过 `@select` 监听选中变化；通过组件实例方法 `getSelection()` 获取选中数据，`clearSelection()` 清空选中。
    </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>
-   ```
+   </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" />
@@ -207,6 +206,8 @@ 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'
@@ -215,4 +216,6 @@ 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/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/package.json

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