@a2simcode/ui 0.0.248 → 0.0.249

package/docs/components/meta/card-list.ts

@@ -0,0 +1,210 @@
+export default {
+  props: [
+    {
+      name: 'dataSource',
+      description: '数据源',
+      type: 'Record<string, any>[]',
+      default: '[]',
+    },
+    {
+      name: 'loadSrc',
+      description: '根据行数据返回图片地址',
+      type: '(item: Record<string, any>) => string',
+      default: 'undefined',
+    },
+    {
+      name: 'labelKey',
+      description: '标题字段',
+      type: 'string',
+      default: "'f_Name'",
+    },
+    {
+      name: 'rowKey',
+      description: '行唯一键字段（用于单选/多选）',
+      type: 'string',
+      default: "'f_Id'",
+    },
+    {
+      name: 'buttons',
+      description: '操作按钮配置（支持 children 下拉）',
+      type: 'ButtonCompType[]',
+      default: '[]',
+    },
+    {
+      name: 'maxBtns',
+      description: '最多显示按钮数量，超出部分折叠到下拉',
+      type: 'number',
+      default: '3',
+    },
+    {
+      name: 'setButton',
+      description: '行级按钮处理方法（可动态隐藏/禁用）',
+      type: '(data: { buttons: ButtonCompType[]; row: Record<string, any> }) => void',
+      default: 'undefined',
+    },
+    {
+      name: 'showBigEditButton',
+      description: '是否在卡片中部展示大编辑按钮（需要存在 id=edit 的按钮）',
+      type: 'boolean',
+      default: 'false',
+    },
+    {
+      name: 'loading',
+      description: '加载状态',
+      type: 'boolean',
+      default: 'false',
+    },
+    {
+      name: 'isRadio',
+      description: '是否单选',
+      type: 'boolean',
+      default: 'false',
+    },
+    {
+      name: 'isMultiSelect',
+      description: '是否多选',
+      type: 'boolean',
+      default: 'false',
+    },
+    {
+      name: 'isPage',
+      description: '是否分页',
+      type: 'boolean',
+      default: 'false',
+    },
+    {
+      name: 'pageTotal',
+      description: '总数据条数',
+      type: 'number',
+      default: '0',
+    },
+    {
+      name: 'tablePage',
+      description: '当前页码（v-model:tablePage）',
+      type: 'number',
+      default: '1',
+    },
+    {
+      name: 'pageSize',
+      description: '分页大小（v-model:pageSize）',
+      type: 'number',
+      default: '50',
+    },
+    {
+      name: 'pageSizes',
+      description: '分页大小选项',
+      type: 'number[]',
+      default: 'undefined',
+    },
+    {
+      name: 'pageLayoutSimple',
+      description: '是否使用简洁分页布局',
+      type: 'boolean',
+      default: 'false',
+    },
+    {
+      name: 'backgroundColor',
+      description: '外层背景色',
+      type: 'string',
+      default: "''",
+    },
+    {
+      name: 'cardWidth',
+      description: '卡片宽度（number 或 string）',
+      type: 'number | string',
+      default: "'25%'",
+    },
+    {
+      name: 'cardHeight',
+      description: '卡片高度（已废弃，不再生效）',
+      type: 'number',
+      default: 'undefined',
+    },
+    {
+      name: 'cardAspectRatio',
+      description: '卡片宽高比（例如 258/184）',
+      type: 'number | string',
+      default: '258 / 184',
+    },
+    {
+      name: 'imageFit',
+      description: '图片填充模式',
+      type: "'fill' | 'contain' | 'cover' | 'none' | 'scale-down'",
+      default: "'contain'",
+    },
+    {
+      name: 'fallback',
+      description: '图片加载失败时展示的兜底图片地址',
+      type: 'string',
+      default: "''",
+    },
+    {
+      name: 'itemRender',
+      description: '自定义卡片渲染方法（优先于 slot=item）',
+      type: '(data: { item: Record<string, any>; index: number }) => any',
+      default: 'undefined',
+    },
+  ],
+  events: [
+    {
+      name: 'click',
+      description: '点击操作按钮时触发',
+      type: '(id: string, data: { item: Record<string, any>; index: number; button: ButtonCompType }) => void',
+    },
+    {
+      name: 'loadPageData',
+      description: '分页变更时触发',
+      type: '(data: { rows: number; page: number }) => void',
+    },
+    {
+      name: 'update:pageSize',
+      description: '分页大小双向绑定更新事件',
+      type: '(value: number) => void',
+    },
+    {
+      name: 'update:tablePage',
+      description: '页码双向绑定更新事件',
+      type: '(value: number) => void',
+    },
+    {
+      name: 'selectionChange',
+      description: '选中项变化时触发',
+      type: '(data: { selections: string[]; rows: Record<string, any>[] }) => void',
+    },
+  ],
+  slots: [
+    {
+      name: 'item',
+      description: '自定义卡片内容，参数：{ item, index }',
+    },
+  ],
+  methods: [
+    {
+      name: 'clearSelection',
+      description: '清空选中项',
+      type: '() => void',
+    },
+    {
+      name: 'toggleRowSelection',
+      description: '切换行选中状态',
+      type: '(rows: Record<string, any>[], selected: boolean) => void',
+    },
+    {
+      name: 'getSelections',
+      description: '获取选中行数据',
+      type: '() => Record<string, any>[]',
+    },
+  ],
+  types: [
+    {
+      name: 'CardListProps',
+      properties: [
+        { name: 'dataSource', type: 'Record<string, any>[]', description: '数据源' },
+        { name: 'loadSrc', type: '(item: Record<string, any>) => string', description: '根据行数据返回图片地址' },
+        { name: 'labelKey', type: 'string', description: '标题字段' },
+        { name: 'rowKey', type: 'string', description: '行唯一键字段' },
+        { name: 'buttons', type: 'ButtonCompType[]', description: '操作按钮配置' },
+      ],
+    },
+  ],
+}

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

@@ -1,5 +1,11 @@
 export default {
   "props": [
+    {
+      "name": "viewMode",
+      "description": "显示方式 table 表格 card 卡片",
+      "type": "'table' | 'card'",
+      "default": "'table'"
+    },
     {
       "name": "modelValue",
       "description": "输入值【作为表单的编辑表格使用】",
@@ -221,6 +227,54 @@ export default {
       "description": "是否支持行拖动排序",
       "type": "boolean",
       "default": "false"
+    },
+    {
+      "name": "cardLabelKey",
+      "description": "卡片视图标题字段名",
+      "type": "string",
+      "default": "'f_Name'"
+    },
+    {
+      "name": "cardLoadSrc",
+      "description": "卡片视图图片加载方法",
+      "type": "(item: Record<string, any>) => string",
+      "default": "undefined"
+    },
+    {
+      "name": "cardFallback",
+      "description": "卡片视图图片加载失败兜底图",
+      "type": "string",
+      "default": "''"
+    },
+    {
+      "name": "cardBackgroundColor",
+      "description": "卡片视图背景色",
+      "type": "string",
+      "default": "''"
+    },
+    {
+      "name": "cardShowBigEditButton",
+      "description": "卡片视图是否展示大编辑按钮（需要 buttons 中包含 id 为 edit 的按钮）",
+      "type": "boolean",
+      "default": "false"
+    },
+    {
+      "name": "cardWidth",
+      "description": "卡片视图卡片宽度",
+      "type": "number",
+      "default": "258"
+    },
+    {
+      "name": "cardHeight",
+      "description": "卡片视图卡片高度",
+      "type": "number",
+      "default": "184"
+    },
+    {
+      "name": "cardImageFit",
+      "description": "卡片视图图片填充方式",
+      "type": "'fill' | 'contain' | 'cover' | 'none' | 'scale-down'",
+      "default": "'fill'"
     }
   ],
   "events": [

package/docs/components/table-panel.md

@@ -205,6 +205,19 @@
   </template>
 </Demo>
 
+## 卡片视图
+
+通过 `view-mode="card"` 切换为卡片展示模式，并使用 `card-label-key / card-load-src` 指定卡片标题字段和图片来源。
+
+<Demo :source-code="tablePanelCardCode">
+  <template #source>
+    <table-panel-card />
+  </template>
+  <template #description>
+    卡片模式会使用内置的 `JCardList` 渲染数据，并复用表格面板的搜索、筛选、排序、分页能力。
+  </template>
+</Demo>
+
 ## 自定义渲染（掩码示例）
 
 通过 `render-v-node` 可以跳过内置表格渲染，使用 VNode 自定义每条记录的展示方式。下面示例用卡片布局展示行数据，并支持一键切换手机号/邮箱的掩码显示。
@@ -278,6 +291,7 @@ 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 TablePanelModelValue from '../examples/table-panel/model-value.vue'
+import TablePanelCard from '../examples/table-panel/card.vue'
 import TablePanelMask from '../examples/table-panel/mask.vue'
 import tablePanelApi from './meta/table-panel'
 
@@ -293,5 +307,6 @@ import tablePanelSubTableLazyCode from '../examples/table-panel/sub-table-lazy.v
 import tablePanelGetSelectionCode from '../examples/table-panel/get-selection.vue?raw'
 import tablePanelButtonVisibilityCode from '../examples/table-panel/button-visibility.vue?raw'
 import tablePanelModelValueCode from '../examples/table-panel/model-value.vue?raw'
+import tablePanelCardCode from '../examples/table-panel/card.vue?raw'
 import tablePanelMaskCode from '../examples/table-panel/mask.vue?raw'
 </script>

package/docs/examples/card-list/basic.vue

@@ -0,0 +1,70 @@
+<template>
+  <div style="padding: 12px">
+    <j-card-list
+      :data-source="list"
+      :load-src="loadSrc"
+      :buttons="buttons"
+      :show-big-edit-button="true"
+      :is-multi-select="true"
+      @click="handleClick"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const list = ref([
+  { f_Id: '1', f_Name: '卡片 1', img: 'https://picsum.photos/seed/simcode-1/600/400' },
+  { f_Id: '2', f_Name: '卡片 2', img: 'https://picsum.photos/seed/simcode-2/600/400' },
+  { f_Id: '3', f_Name: '卡片 3', img: 'https://picsum.photos/seed/simcode-3/600/400' },
+  { f_Id: '4', f_Name: '卡片 4', img: 'https://picsum.photos/seed/simcode-4/600/400' },
+])
+
+const loadSrc = (row: any) => row.img
+
+const buttons = ref([
+  {
+    id: 'edit',
+    label: '编辑',
+    config: { type: 'primary', icon: 'material-symbols-light:edit-outline' },
+    click: (scope: any) => {
+      ElMessage.info(`点击编辑：${scope?.data?.f_Name || ''}`)
+    },
+  },
+  {
+    id: 'delete',
+    label: '删除',
+    config: { status: 'danger', icon: 'material-symbols-light:delete-outline' },
+    click: (scope: any) => {
+      ElMessage.warning(`点击删除：${scope?.data?.f_Name || ''}`)
+    },
+  },
+  {
+    id: 'more',
+    label: '更多',
+    config: { icon: 'material-symbols-light:more-horiz' },
+    children: [
+      {
+        id: 'copy',
+        label: '复制',
+        click: (scope: any) => {
+          ElMessage.success(`点击复制：${scope?.data?.f_Name || ''}`)
+        },
+      },
+      {
+        id: 'detail',
+        label: '详情',
+        click: (scope: any) => {
+          ElMessage.info(`点击详情：${scope?.data?.f_Name || ''}`)
+        },
+      },
+    ],
+  },
+])
+
+const handleClick = (id: string, payload: any) => {
+  ElMessage.success(`触发 click 事件：${id}（${payload?.item?.f_Name || ''}）`)
+}
+</script>

package/docs/examples/card-list/selection-pagination.vue

@@ -0,0 +1,69 @@
+<template>
+  <div style="padding: 12px">
+    <div style="margin-bottom: 12px; display: flex; gap: 8px">
+      <j-button type="primary" label="获取选中项" @click="handleGetSelections" />
+      <j-button label="清空选中" @click="handleClear" />
+    </div>
+
+    <j-card-list
+      ref="cardListRef"
+      :data-source="list"
+      :load-src="loadSrc"
+      :is-radio="true"
+      :is-page="true"
+      :page-total="total"
+      v-model:table-page="page"
+      v-model:page-size="pageSize"
+      :page-sizes="[4, 8, 12]"
+      :loading="loading"
+      @load-page-data="handleLoadPageData"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const loading = ref(false)
+const total = ref(40)
+const page = ref(1)
+const pageSize = ref(4)
+
+const buildList = (p: number, s: number) => {
+  const start = (p - 1) * s + 1
+  return Array.from({ length: s }).map((_, i) => {
+    const id = String(start + i)
+    return {
+      f_Id: id,
+      f_Name: `第 ${id} 条`,
+      img: `https://picsum.photos/seed/simcode-page-${id}/600/400`,
+    }
+  })
+}
+
+const list = ref(buildList(page.value, pageSize.value))
+
+const loadSrc = (row: any) => row.img
+
+const handleLoadPageData = async (data: any) => {
+  loading.value = true
+  page.value = data.page
+  pageSize.value = data.rows
+  await new Promise((r) => setTimeout(r, 300))
+  list.value = buildList(page.value, pageSize.value)
+  loading.value = false
+}
+
+const cardListRef = ref<any>()
+
+const handleGetSelections = () => {
+  const rows = cardListRef.value?.getSelections?.() || []
+  ElMessage.info(`选中：${rows?.[0]?.f_Name || '无'}`)
+}
+
+const handleClear = () => {
+  cardListRef.value?.clearSelection?.()
+  ElMessage.success('已清空')
+}
+</script>

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

@@ -0,0 +1,101 @@
+<template>
+  <div style="position: relative; width: 100%; height: 520px">
+    <j-table-panel
+      view-mode="card"
+      row-key="id"
+      :columns="columns"
+      :load-data="loadData"
+      :actions="actions"
+      :is-page="true"
+      card-label-key="name"
+      :card-load-src="cardLoadSrc"
+      :card-width="25"
+      :card-show-big-edit-button="true"
+      card-image-fit="cover"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const columns = ref([
+  {
+    id: 'id',
+    type: '',
+    config: {
+      label: 'ID',
+      width: 80,
+    },
+  },
+  {
+    id: 'name',
+    type: '',
+    config: {
+      label: '名称',
+      filter: {
+        isSearchKeyword: true,
+      },
+    },
+  },
+  {
+    id: 'category',
+    type: '',
+    config: {
+      label: '分类',
+      width: 120,
+      filter: {
+        isSearchKeyword: true,
+      },
+    },
+  },
+])
+
+const actions = ref([
+  {
+    id: 'edit',
+    label: '编辑',
+    config: { icon: 'mdi:pencil' },
+    click: (row: Record<string, any>) => {
+      ElMessage.info(`编辑：${row.name}`)
+    },
+  },
+  {
+    id: 'delete',
+    label: '删除',
+    config: { icon: 'mdi:delete', status: 'danger' },
+    click: (row: Record<string, any>) => {
+      ElMessage.warning(`删除：${row.name}`)
+    },
+  },
+])
+
+const mockData = Array.from({ length: 30 }).map((_, index) => {
+  const id = index + 1
+  const category = ['办公用品', '科技产品', '家具'][id % 3]
+  return {
+    id,
+    name: `示例数据 ${id}`,
+    category,
+    cover: `https://picsum.photos/seed/table-panel-card-${id}/400/300`,
+  }
+})
+
+const cardLoadSrc = (item: Record<string, any>) => {
+  return item.cover || ''
+}
+
+const loadData = async (params: any) => {
+  const rows = params?.pagination?.rows ?? 12
+  const page = params?.pagination?.page ?? 1
+
+  const start = Math.max(0, (page - 1) * rows)
+  const end = start + rows
+
+  return {
+    rows: mockData.slice(start, end),
+    records: mockData.length,
+  }
+}
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2simcode/ui",
-  "version": "0.0.248",
+  "version": "0.0.249",
   "description": "A Vue 3 UI Component Library",
   "type": "module",
   "main": "./dist/simcode-ui.umd.js",
@@ -82,7 +82,7 @@
     "element-plus": "2.14.2",
     "sortablejs": "1.15.7",
     "sql-formatter": "15.7.2",
-    "vue": "3.5.38",
+    "vue": "3.5.39",
     "@wangeditor/editor": "5.1.23",
     "diagram-js": "15.13.0",
     "diagram-js-direct-editing": "3.3.0",
@@ -225,7 +225,7 @@
     "vite-plugin-dts": "4.5.4",
     "vitepress": "1.6.4",
     "vitest": "4.1.0",
-    "vue": "3.5.38",
+    "vue": "3.5.39",
     "vue-docgen-api": "4.79.2",
     "vue-tsc": "3.2.7"
   }