@a2simcode/ui 0.0.180 → 0.0.181

package/docs/components/input-layer.md

@@ -15,12 +15,27 @@
   </template>
 </Demo>
 
+## 自定义渲染
+
+通过 `render-v-node` 透传到底层 `j-table-panel`，可以用 VNode 自定义每条记录的展示方式（例如卡片列表）。示例中点击卡片会设置选中项，点击“确定”后回填到输入框。
+
+<Demo :source-code="inputLayerRenderVNodeCode">
+  <template #source>
+    <input-layer-render-vnode />
+  </template>
+  <template #description>
+    `render-v-node` 接收当前行数据并返回 VNode；点击卡片设置选中项后，InputLayer 会从表格面板的选中项回填值与文本。
+  </template>
+</Demo>
+
 ## API
 
 <ApiTable :data="inputLayerApi" componentName="input-layer" />
 
 <script setup>
 import InputLayerBasic from '../examples/input-layer/basic.vue'
+import InputLayerRenderVnode from '../examples/input-layer/render-vnode.vue'
 import inputLayerBasicCode from '../examples/input-layer/basic.vue?raw'
+import inputLayerRenderVNodeCode from '../examples/input-layer/render-vnode.vue?raw'
 import inputLayerApi from './meta/input-layer'
 </script>

package/docs/components/meta/input-layer.ts

@@ -92,6 +92,11 @@ export default {
       "description": "加载数据方法",
       "type": "TSFunctionType"
     },
+    {
+      "name": "renderVNode",
+      "description": "自定义渲染 VNode",
+      "type": "TSFunctionType"
+    },
     {
       "name": "getText",
       "description": "获取显示值方法",
@@ -195,7 +200,13 @@ export default {
     }
   ],
   "slots": [],
-  "methods": [],
+  "methods": [
+    {
+      "name": "getTablePanelRef",
+      "description": "",
+      "type": "() => void"
+    }
+  ],
   "types": [
     {
       "name": "InputLayerProps",
@@ -280,6 +291,11 @@ export default {
           "type": "(params: any) => Promise<any>",
           "description": "加载数据方法"
         },
+        {
+          "name": "renderVNode",
+          "type": "(params: Record<string, any>) => VNode",
+          "description": "自定义渲染 VNode"
+        },
         {
           "name": "getText",
           "type": "(value: string) => string",

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

@@ -181,6 +181,11 @@ export default {
       "description": "是否显示全屏按钮",
       "type": "boolean",
       "default": "true"
+    },
+    {
+      "name": "renderVNode",
+      "description": "自定义渲染 VNode",
+      "type": "(params: Record<string, any>) => import('vue').VNode"
     }
   ],
   "events": [

package/docs/components/table-panel.md

@@ -166,6 +166,19 @@
   </template>
 </Demo>
 
+## 自定义渲染（掩码示例）
+
+通过 `render-v-node` 可以跳过内置表格渲染，使用 VNode 自定义每条记录的展示方式。下面示例用卡片布局展示行数据，并支持一键切换手机号/邮箱的掩码显示。
+
+<Demo :source-code="tablePanelMaskCode">
+  <template #source>
+    <table-panel-mask />
+  </template>
+  <template #description>
+    `render-v-node` 接收当前行数据并返回 VNode；建议同时配置 `row-key`，便于列表渲染时保持稳定 key。
+  </template>
+</Demo>
+
 ## API
 
 <ApiTable :data="tablePanelApi" componentName="table-panel" />
@@ -222,6 +235,7 @@ import TablePanelBatchOperations from '../examples/table-panel/batch-operations.
 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 TablePanelMask from '../examples/table-panel/mask.vue'
 import tablePanelApi from './meta/table-panel'
 
 import tablePanelBasicCode from '../examples/table-panel/basic.vue?raw'
@@ -233,4 +247,5 @@ import tablePanelBatchOperationsCode from '../examples/table-panel/batch-operati
 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'
+import tablePanelMaskCode from '../examples/table-panel/mask.vue?raw'
 </script>

package/docs/examples/input-layer/render-vnode.vue

@@ -0,0 +1,127 @@
+<template>
+  <div style="width: 420px">
+    <j-input-layer
+      ref="inputLayerRef"
+      v-model="value"
+      placeholder="请选择用户（卡片渲染）"
+      :columns="columns"
+      :load-layer-data="loadData"
+      :width="800"
+      :height="500"
+      value-key="id"
+      label-key="name"
+      :render-v-node="renderVNode"
+      @change="handleChange"
+    />
+    <div style="margin-top: 10px">选中值: {{ value }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, h } from 'vue'
+
+const value = ref('')
+const selectedId = ref<string>('')
+const inputLayerRef = ref<any>()
+
+const handleChange = (data: any) => {
+  console.log(data, 'data')
+}
+
+const columns = [
+  {
+    id: 'id',
+    config: {
+      label: 'ID',
+      width: 80,
+    },
+  },
+  {
+    id: 'name',
+    config: {
+      label: '姓名',
+      width: 120,
+    },
+  },
+  {
+    id: 'age',
+    config: {
+      label: '年龄',
+      width: 80,
+    },
+  },
+  {
+    id: 'email',
+    config: {
+      label: '邮箱',
+    },
+  },
+]
+
+const loadData = async () => {
+  return [
+    { id: '1', name: '张三', age: 25, email: 'zhangsan@example.com' },
+    { id: '2', name: '李四', age: 30, email: 'lisi@example.com' },
+    { id: '3', name: '王五', age: 28, email: 'wangwu@example.com' },
+    { id: '4', name: '赵六', age: 35, email: 'zhaoliu@example.com' },
+    { id: '5', name: '孙七', age: 22, email: 'sunqi@example.com' },
+  ]
+}
+
+const setSelection = (row: Record<string, any>) => {
+  selectedId.value = String(row.id ?? '')
+  const tablePanelRef = inputLayerRef.value?.getTablePanelRef?.()
+  tablePanelRef?.setSelection?.([row])
+}
+
+const renderVNode = (row: Record<string, any>) => {
+  const isActive = selectedId.value === String(row.id ?? '')
+
+  return h(
+    'div',
+    {
+      class: ['input-layer-card', isActive ? 'is-active' : ''],
+      onClick: () => setSelection(row),
+    },
+    [
+      h('div', { class: 'input-layer-card__title' }, [h('span', row.name), h('span', row.id)]),
+      h('div', { class: 'input-layer-card__meta' }, `年龄：${row.age}`),
+      h('div', { class: 'input-layer-card__meta' }, `邮箱：${row.email}`),
+    ]
+  )
+}
+</script>
+
+<style scoped>
+.input-layer-card {
+  padding: 12px 14px;
+  border: 1px solid var(--j-color-border);
+  border-radius: 6px;
+  background: var(--j-color-bg-container);
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+
+.input-layer-card + .input-layer-card {
+  margin-top: 10px;
+}
+
+.input-layer-card.is-active {
+  border-color: var(--j-color-primary);
+}
+
+.input-layer-card__title {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 6px;
+  color: var(--j-color-text);
+  font-weight: 600;
+}
+
+.input-layer-card__meta {
+  line-height: 20px;
+  font-size: 12px;
+  color: var(--j-color-text-2);
+}
+</style>

package/docs/examples/table-panel/mask.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="table-panel-mask-demo">
+    <j-table-panel
+      row-key="id"
+      :columns="columns"
+      :load-data="loadData"
+      :buttons="buttons"
+      :render-v-node="renderVNode"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, h } from 'vue'
+
+const isMasked = ref(true)
+
+const columns = ref([
+  {
+    id: 'id',
+    type: '',
+    config: { label: 'ID', width: 120 },
+  },
+  {
+    id: 'name',
+    type: '',
+    config: {
+      label: '姓名',
+      filter: { isSearchKeyword: true },
+    },
+  },
+  {
+    id: 'phone',
+    type: '',
+    config: { label: '手机号' },
+  },
+  {
+    id: 'email',
+    type: '',
+    config: { label: '邮箱' },
+  },
+])
+
+const buttons = ref([
+  {
+    label: '切换掩码',
+    icon: 'mdi:eye',
+    click: () => {
+      isMasked.value = !isMasked.value
+    },
+  },
+])
+
+const data = [
+  { id: 'U-1001', name: '张三', phone: '13812345678', email: 'zhangsan@example.com' },
+  { id: 'U-1002', name: '李四', phone: '18698765432', email: 'lisi@example.com' },
+  { id: 'U-1003', name: '王五', phone: '15900001111', email: 'wangwu@example.com' },
+]
+
+const loadData = async () => data
+
+const maskPhone = (value?: string) => {
+  if (!value) return ''
+  if (value.length <= 7) return value
+  return `${value.slice(0, 3)}****${value.slice(-4)}`
+}
+
+const maskEmail = (value?: string) => {
+  if (!value) return ''
+  const at = value.indexOf('@')
+  if (at <= 1) return value
+  return `${value.slice(0, 1)}****${value.slice(at)}`
+}
+
+const renderVNode = (row: Record<string, any>) => {
+  const phoneText = isMasked.value ? maskPhone(row.phone) : row.phone
+  const emailText = isMasked.value ? maskEmail(row.email) : row.email
+
+  return h('div', { class: 'mask-row' }, [
+    h('div', { class: 'mask-row__main' }, [
+      h('div', { class: 'mask-row__title' }, [
+        h('span', { class: 'mask-row__name' }, row.name),
+        h('span', { class: 'mask-row__id' }, row.id),
+      ]),
+      h('div', { class: 'mask-row__kv' }, [
+        h('span', { class: 'mask-row__k' }, '手机号'),
+        h('span', { class: 'mask-row__v' }, phoneText),
+      ]),
+      h('div', { class: 'mask-row__kv' }, [
+        h('span', { class: 'mask-row__k' }, '邮箱'),
+        h('span', { class: 'mask-row__v' }, emailText),
+      ]),
+    ]),
+  ])
+}
+</script>
+
+<style scoped>
+.table-panel-mask-demo {
+  position: relative;
+  width: 100%;
+  height: 500px;
+}
+
+.mask-row {
+  padding: 12px 16px;
+  border: 1px solid var(--j-color-border);
+  border-radius: 6px;
+  background: var(--j-color-bg-container);
+}
+
+.mask-row + .mask-row {
+  margin-top: 10px;
+}
+
+.mask-row__title {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  gap: 12px;
+}
+
+.mask-row__name {
+  font-weight: 600;
+  color: var(--j-color-text);
+}
+
+.mask-row__id {
+  font-size: 12px;
+  color: var(--j-color-text-3);
+}
+
+.mask-row__kv {
+  display: flex;
+  gap: 10px;
+  line-height: 20px;
+}
+
+.mask-row__k {
+  width: 48px;
+  flex: 0 0 auto;
+  color: var(--j-color-text-2);
+  font-size: 12px;
+}
+
+.mask-row__v {
+  color: var(--j-color-text);
+  font-size: 12px;
+}
+</style>

package/package.json

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