@a2simcode/ui 0.0.60 → 0.0.62

package/docs/components/meta/table.ts

@@ -212,11 +212,6 @@ export default {
     {
       "name": "TableColumnConfig",
       "properties": [
-        {
-          "name": "label",
-          "type": "string",
-          "description": "列的标题"
-        },
         {
           "name": "width",
           "type": "number",
@@ -319,7 +314,7 @@ export default {
         },
         {
           "name": "config",
-          "type": "TableColumnConfig & BaseCompConfig",
+          "type": "TableColumnCompConfig & {\n    /**\n     * @zh 列的标题\n     */\n    label: string\n  }",
           "description": "列配置"
         },
         {

package/docs/components/table.md

@@ -29,6 +29,48 @@
   </template>
 </Demo>
 
+## Icon 图标
+
+通过列类型 `j-icon` 可以渲染 SVG 图标。支持传入 SVG 字符串或 Iconify 图标名称。
+
+<Demo :source-code="tableIconCode">
+  <template #source>
+    <table-icon />
+  </template>
+  <template #description>
+    在 `columns` 中设置 `type: 'j-icon'`。数据可以是 SVG 字符串，也可以是 Iconify 图标名称（如 `mdi:home`）。
+    可以通过 `config.size` 设置图标大小，`config.color` 设置图标颜色。
+  </template>
+</Demo>
+
+## Link 链接
+
+通过列类型 `link` 可以渲染链接，并支持点击事件。
+
+<Demo :source-code="tableLinkCode">
+  <template #source>
+    <table-link />
+  </template>
+  <template #description>
+    在 `columns` 中设置 `type: 'link'`。
+    通过 `config.click` 设置点击回调函数，参数为 `{ row, column, e, openLayer }`。
+  </template>
+</Demo>
+
+## 自定义布局
+
+通过列配置中的 `customLayout` 属性，可以使用 VTable 的 CustomLayout 功能自定义单元格渲染。
+
+<Demo :source-code="tableCustomLayoutCode">
+  <template #source>
+    <table-custom-layout />
+  </template>
+  <template #description>
+    在列对象中定义 `customLayout` 函数。该函数接收 `args` 参数，其中包含 `customLayout` 类（VTable.CustomLayout），可用于创建 Group, Text, Image 等布局元素。
+    函数需要返回 `{ rootContainer, renderDefault: false }`。
+  </template>
+</Demo>
+
 ## 冻结列
 
 通过 `columns` 中的 `config.frozen` 属性设置列的冻结方式，支持 `left`（左侧冻结）和 `right`（右侧冻结）。
@@ -189,6 +231,9 @@
 <script setup>
 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 TableCustomLayout from '../examples/table/custom-layout.vue'
 import TableFrozenColumn from '../examples/table/frozen-column.vue'
 import TableHeightMode from '../examples/table/height-mode.vue'
 import TableTreeColumn from '../examples/table/tree-column.vue'
@@ -204,6 +249,9 @@ import tableApi from './meta/table'
 
 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 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'
 import tableTreeColumnCode from '../examples/table/tree-column.vue?raw'

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

@@ -0,0 +1,115 @@
+<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: 'id',
+    config: {
+      label: 'ID',
+      width: 80,
+    },
+  },
+  {
+    id: 'info',
+    config: {
+      label: 'User Info (Custom Layout)',
+      width: 250,
+    },
+    customLayout: (args: any) => {
+      const { table, row, col, rect, customLayout } = args
+      const { Group, Text, Image } = customLayout
+      const record = table.getCellOriginRecord(col, row)
+      const { name, avatar, role } = record
+
+      const container = new Group({
+        height: rect.height,
+        width: rect.width,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: [0, 10],
+      })
+
+      // Avatar
+      const image = new Image({
+        width: 32,
+        height: 32,
+        image: avatar,
+        cornerRadius: 16,
+        marginRight: 10,
+      })
+      container.add(image)
+
+      // Text Container
+      const textContainer = new Group({
+        height: 32,
+        width: rect.width - 60,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+      })
+
+      const nameText = new Text({
+        text: name,
+        fontSize: 14,
+        fontFamily: 'sans-serif',
+        fill: '#333',
+      })
+      textContainer.add(nameText)
+
+      const roleText = new Text({
+        text: role,
+        fontSize: 12,
+        fontFamily: 'sans-serif',
+        fill: '#999',
+        marginTop: 4,
+      })
+      textContainer.add(roleText)
+
+      container.add(textContainer)
+
+      return {
+        rootContainer: container,
+        renderDefault: false,
+      }
+    },
+  },
+  {
+    id: 'status',
+    config: {
+      label: 'Status',
+      width: 100,
+    },
+  },
+])
+
+const records = ref([
+  {
+    id: 1,
+    name: 'John Doe',
+    role: 'Software Engineer',
+    avatar: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9IiMxNjVkZmYiLz48dGV4dCB4PSIxNiIgeT0iMjEiIGZvbnQtc2l6ZT0iMTYiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiI+SjwvdGV4dD48L3N2Zz4=',
+    status: 'Active',
+  },
+  {
+    id: 2,
+    name: 'Jane Smith',
+    role: 'Product Manager',
+    avatar: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9IiMwMGI0MmEiLz48dGV4dCB4PSIxNiIgeT0iMjEiIGZvbnQtc2l6ZT0iMTYiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiI+SjwvdGV4dD48L3N2Zz4=',
+    status: 'Inactive',
+  },
+  {
+    id: 3,
+    name: 'Bob Johnson',
+    role: 'Designer',
+    avatar: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9IiNmYmI0MDAiLz48dGV4dCB4PSIxNiIgeT0iMjEiIGZvbnQtc2l6ZT0iMTYiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiI+QjwvdGV4dD48L3N2Zz4=',
+    status: 'Active',
+  },
+])
+</script>

package/docs/examples/table/icon.vue

@@ -0,0 +1,85 @@
+<template>
+  <div style="position: relative; width: 100%; height: 300px">
+    <j-table v-if="iconsReady" :columns="columns" :records="records" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getIcon, iconLoaded, loadIcon } from '@iconify/vue'
+import { onBeforeMount, ref } from 'vue'
+
+const iconsReady = ref(false)
+
+const browsers = [
+  { name: 'Chrome', icon: 'logos:chrome' },
+  { name: 'Firefox', icon: 'logos:firefox' },
+  { name: 'Safari', icon: 'logos:safari' },
+  { name: 'Edge', icon: 'logos:microsoft-edge' },
+]
+
+const toSvg = (iconName: string) => {
+  const iconData = getIcon(iconName)
+  if (!iconData) return ''
+  return `<svg viewBox="0 0 ${iconData.width} ${iconData.height}">${iconData.body}</svg>`
+}
+
+const records = ref<Record<string, any>[]>([])
+
+onBeforeMount(async () => {
+  // @ts-ignore
+  if (import.meta.env.SSR) {
+    iconsReady.value = true
+    return
+  }
+
+  const icons = browsers.map((item) => item.icon)
+
+  await Promise.all(
+    icons.map(async (icon) => {
+      if (!iconLoaded(icon)) {
+        await loadIcon(icon)
+      }
+    })
+  )
+
+  records.value = browsers.map((item) => {
+    return {
+      ...item,
+      svg: toSvg(item.icon),
+    }
+  })
+
+  iconsReady.value = true
+})
+
+const columns = ref([
+  {
+    id: 'name',
+    config: {
+      label: '浏览器',
+      width: 150,
+      align: 'left',
+    },
+  },
+  {
+    id: 'icon',
+    type: 'j-icon',
+    config: {
+      label: '图标（Iconify）',
+      width: 120,
+      align: 'center',
+      size: 24,
+    },
+  },
+  {
+    id: 'svg',
+    type: 'j-icon',
+    config: {
+      label: '图标（SVG）',
+      width: 120,
+      align: 'center',
+      size: 24,
+    },
+  },
+])
+</script>

package/docs/examples/table/link.vue

@@ -0,0 +1,66 @@
+<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'
+import { ElMessage } from 'element-plus'
+
+const columns = ref([
+  {
+    id: 'name',
+    type: 'link',
+    config: {
+      label: '项目名称',
+      width: 'auto',
+      align: 'left',
+      click: ({ row }: { row: any }) => {
+        ElMessage.success(`点击了项目: ${row.name}`)
+      },
+    },
+  },
+  {
+    id: 'status',
+    config: {
+      label: '状态',
+      width: 'auto',
+      align: 'center',
+    },
+  },
+  {
+    id: 'owner',
+    type: 'link',
+    config: {
+      label: '负责人',
+      width: 'auto',
+      align: 'center',
+      click: ({ row }: { row: any }) => {
+        ElMessage.info(`查看负责人: ${row.owner}`)
+      },
+    },
+  },
+])
+
+const records = ref([
+  {
+    id: '1',
+    name: '项目A',
+    status: '进行中',
+    owner: '张三',
+  },
+  {
+    id: '2',
+    name: '项目B',
+    status: '已完成',
+    owner: '李四',
+  },
+  {
+    id: '3',
+    name: '项目C',
+    status: '待审核',
+    owner: '王五',
+  },
+])
+</script>

package/package.json

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