@a2simcode/ui 0.0.264 → 0.0.266

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

@@ -1,115 +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>
+<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/custom-merge-cell.vue

@@ -0,0 +1,206 @@
+<template>
+  <div>
+    <el-radio-group v-model="mode" style="margin-bottom: 12px">
+      <el-radio-button value="array">数组模式</el-radio-button>
+      <el-radio-button value="function">回调函数模式</el-radio-button>
+    </el-radio-group>
+
+    <div style="position: relative; width: 100%; height: 500px">
+      <j-table
+        :columns="columns"
+        :records="records"
+        :custom-merge-cell="customMergeCell"
+        :is-show-number="false"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const mode = ref<'array' | 'function'>('array')
+
+const columns = ref([
+  { id: 'xiangmu', config: { label: '项目', width: 120, align: 'center' } },
+  { id: 'mokuai', config: { label: '模块', width: 120, align: 'center' } },
+  { id: 'fuzeren', config: { label: '负责人', width: 'auto', align: 'center' } },
+  { id: 'jindu', config: { label: '进度', width: 100, align: 'center' } },
+  { id: 'zhuangtai', config: { label: '状态', width: 100, align: 'center' } },
+  { id: 'beizhu', config: { label: '备注', width: 'auto', align: 'left' } },
+])
+
+const records = ref([
+  {
+    xiangmu: '项目A',
+    mokuai: '前端',
+    fuzeren: '张三',
+    jindu: '80%',
+    zhuangtai: '进行中',
+    beizhu: '按计划推进',
+  },
+  {
+    xiangmu: '项目A',
+    mokuai: '后端',
+    fuzeren: '李四',
+    jindu: '60%',
+    zhuangtai: '进行中',
+    beizhu: '接口开发中',
+  },
+  {
+    xiangmu: '项目A',
+    mokuai: '测试',
+    fuzeren: '王五',
+    jindu: '0%',
+    zhuangtai: '未开始',
+    beizhu: '等待开发完成',
+  },
+  {
+    xiangmu: '项目A',
+    mokuai: '设计',
+    fuzeren: '赵六',
+    jindu: '100%',
+    zhuangtai: '已完成',
+    beizhu: '',
+  },
+  {
+    xiangmu: '项目B',
+    mokuai: '前端',
+    fuzeren: '钱七',
+    jindu: '40%',
+    zhuangtai: '进行中',
+    beizhu: '需求变更',
+  },
+  {
+    xiangmu: '项目B',
+    mokuai: '后端',
+    fuzeren: '孙八',
+    jindu: '90%',
+    zhuangtai: '进行中',
+    beizhu: '即将收尾',
+  },
+  {
+    xiangmu: '项目B',
+    mokuai: '测试',
+    fuzeren: '周九',
+    jindu: '20%',
+    zhuangtai: '进行中',
+    beizhu: '部分测试中',
+  },
+  {
+    xiangmu: '项目B',
+    mokuai: '运维',
+    fuzeren: '吴十',
+    jindu: '0%',
+    zhuangtai: '未开始',
+    beizhu: '',
+  },
+  {
+    xiangmu: '项目C',
+    mokuai: '前端',
+    fuzeren: '郑十一',
+    jindu: '100%',
+    zhuangtai: '已完成',
+    beizhu: '',
+  },
+  {
+    xiangmu: '项目C',
+    mokuai: '后端',
+    fuzeren: '王十二',
+    jindu: '100%',
+    zhuangtai: '已完成',
+    beizhu: '',
+  },
+  {
+    xiangmu: '项目C',
+    mokuai: '测试',
+    fuzeren: '李十三',
+    jindu: '50%',
+    zhuangtai: '进行中',
+    beizhu: '回归测试中',
+  },
+])
+
+// 数组模式：静态定义合并规则（row 从 1 开始，0 是表头）
+const arrayRules = [
+  // 合并行：项目A 的"项目"列纵向合并 4 行
+  {
+    text: '项目A 汇总\n前端+后端+测试+设计',
+    range: { start: { col: 0, row: 1 }, end: { col: 0, row: 4 } },
+    style: { bgColor: '#e8f5e9', color: '#2e7d32' },
+  },
+  // 合并行：项目B 的"项目"列纵向合并 4 行
+  {
+    text: '项目B 汇总',
+    range: { start: { col: 0, row: 5 }, end: { col: 0, row: 8 } },
+    style: { bgColor: '#e3f2fd', color: '#1565c0' },
+  },
+  // 合并行：项目C 的"项目"列纵向合并 3 行
+  {
+    text: '项目C 汇总',
+    range: { start: { col: 0, row: 9 }, end: { col: 0, row: 11 } },
+    style: { bgColor: '#fff3e0', color: '#e65100' },
+  },
+  // 合并列+行：项目B 的进度/状态/备注 3 列 × 4 行合并为一个大单元格
+  {
+    text: '项目B 整体评估\n进度偏慢，需重点关注测试模块',
+    range: { start: { col: 3, row: 5 }, end: { col: 5, row: 8 } },
+    style: { bgColor: '#fce4ec', color: '#c62828' },
+  },
+  // 合并列+行：项目C 的进度/状态/备注 3 列 × 3 行合并为一个大单元格
+  {
+    text: '项目C 即将收尾\n前端后端已完成，测试进行中',
+    range: { start: { col: 3, row: 9 }, end: { col: 5, row: 11 } },
+    style: { bgColor: '#f3e5f5', color: '#6a1b9a' },
+  },
+]
+
+// 回调函数模式：根据 col/row 动态返回合并规则
+const funcMerge = (col: number, row: number) => {
+  // 合并"项目"列（col=0），row 从 1 开始（0 是表头）
+  if (col === 0) {
+    if (row >= 1 && row <= 4) {
+      return {
+        text: '项目A 汇总\n前端+后端+测试+设计',
+        range: { start: { col: 0, row: 1 }, end: { col: 0, row: 4 } },
+        style: { bgColor: '#e8f5e9', color: '#2e7d32' },
+      }
+    }
+    if (row >= 5 && row <= 8) {
+      return {
+        text: '项目B 汇总',
+        range: { start: { col: 0, row: 5 }, end: { col: 0, row: 8 } },
+        style: { bgColor: '#e3f2fd', color: '#1565c0' },
+      }
+    }
+    if (row >= 9 && row <= 11) {
+      return {
+        text: '项目C 汇总',
+        range: { start: { col: 0, row: 9 }, end: { col: 0, row: 11 } },
+        style: { bgColor: '#fff3e0', color: '#e65100' },
+      }
+    }
+  }
+  // 合并列+行：项目B 的进度/状态/备注 3 列 × 4 行
+  if (col >= 3 && col <= 5 && row >= 5 && row <= 8) {
+    return {
+      text: '项目B 整体评估\n进度偏慢，需重点关注测试模块',
+      range: { start: { col: 3, row: 5 }, end: { col: 5, row: 8 } },
+      style: { bgColor: '#fce4ec', color: '#c62828' },
+    }
+  }
+  // 合并列+行：项目C 的进度/状态/备注 3 列 × 3 行
+  if (col >= 3 && col <= 5 && row >= 9 && row <= 11) {
+    return {
+      text: '项目C 即将收尾\n前端后端已完成，测试进行中',
+      range: { start: { col: 3, row: 9 }, end: { col: 5, row: 11 } },
+      style: { bgColor: '#f3e5f5', color: '#6a1b9a' },
+    }
+  }
+  return undefined
+}
+
+const customMergeCell = computed(() => {
+  return mode.value === 'array' ? arrayRules : funcMerge
+})
+</script>

package/docs/examples/table/dynamic-type.vue

@@ -1,73 +1,73 @@
-<template>
-  <div style="position: relative; width: 100%; height: 500px">
-    <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: 'id',
-    config: {
-      label: 'ID',
-      width: 80,
-      align: 'center',
-    },
-  },
-  {
-    id: 'name',
-    config: {
-      label: '名称',
-      align: 'left',
-    },
-  },
-  {
-    id: 'showType',
-    config: {
-      label: '展示类型',
-      width: 140,
-      align: 'center',
-    },
-  },
-  {
-    id: 'render',
-    type: 'j-switch',
-    getCompType: ({ row }: any) => row.showType,
-    getCompConfig: ({ row }: any) => {
-      switch (row.showType) {
-        case 'j-rate':
-          return { count: 5 }
-        case 'j-slider':
-          return { min: 0, max: 100 }
-        case 'j-tag':
-        case 'j-input-tag':
-          return {
-            dataType: 'options',
-            options: [
-              { value: 'a', label: 'A', color: '#e8f3ff' },
-              { value: 'b', label: 'B', color: '#f7f7f7' },
-              { value: 'c', label: 'C', color: '#ffece8' },
-            ],
-          }
-        default:
-          return {}
-      }
-    },
-    config: {
-      label: '动态列',
-      align: 'center',
-    },
-  },
-])
-
-const records = ref([
-  { id: 1, name: '开关', showType: 'j-switch', render: true },
-  { id: 2, name: '评分', showType: 'j-rate', render: 3.5 },
-  { id: 3, name: '滑块', showType: 'j-slider', render: 30 },
-  { id: 4, name: '标签', showType: 'j-tag', render: 'a,b,c' },
-  { id: 5, name: '标签', showType: 'text', render: 'a,b,c' },
-])
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <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: 'id',
+    config: {
+      label: 'ID',
+      width: 80,
+      align: 'center',
+    },
+  },
+  {
+    id: 'name',
+    config: {
+      label: '名称',
+      align: 'left',
+    },
+  },
+  {
+    id: 'showType',
+    config: {
+      label: '展示类型',
+      width: 140,
+      align: 'center',
+    },
+  },
+  {
+    id: 'render',
+    type: 'j-switch',
+    getCompType: ({ row }: any) => row.showType,
+    getCompConfig: ({ row }: any) => {
+      switch (row.showType) {
+        case 'j-rate':
+          return { count: 5 }
+        case 'j-slider':
+          return { min: 0, max: 100 }
+        case 'j-tag':
+        case 'j-input-tag':
+          return {
+            dataType: 'options',
+            options: [
+              { value: 'a', label: 'A', color: '#e8f3ff' },
+              { value: 'b', label: 'B', color: '#f7f7f7' },
+              { value: 'c', label: 'C', color: '#ffece8' },
+            ],
+          }
+        default:
+          return {}
+      }
+    },
+    config: {
+      label: '动态列',
+      align: 'center',
+    },
+  },
+])
+
+const records = ref([
+  { id: 1, name: '开关', showType: 'j-switch', render: true },
+  { id: 2, name: '评分', showType: 'j-rate', render: 3.5 },
+  { id: 3, name: '滑块', showType: 'j-slider', render: 30 },
+  { id: 4, name: '标签', showType: 'j-tag', render: 'a,b,c' },
+  { id: 5, name: '标签', showType: 'text', render: 'a,b,c' },
+])
+</script>