create-yss-spec 1.0.0

package/template/.codex/skills/yss-ui/assets/demos/table/merge-cells/hooks/useMergeCells.ts

@@ -0,0 +1,183 @@
+import { type YTableColumn } from '@yss-ui/components';
+import { reactive, ref, watchEffect, type Ref } from 'vue';
+
+const mergeFields = ['date', 'province', 'city'] as const;
+type MergeField = (typeof mergeFields)[number];
+
+export interface UseMergeCellsReturn {
+  columns: YTableColumn[];
+  tableData: Ref<any[]>;
+  spanMethod: (params: { row: any; rowIndex: number; column: any }) => { rowspan: number; colspan: number } | undefined;
+}
+
+/**
+ * 单元格合并 Demo 逻辑
+ * @returns Demo 所需的响应式状态与方法
+ */
+export const useMergeCells = (): UseMergeCellsReturn => {
+  const columns = reactive<YTableColumn[]>([
+    { type: 'seq', title: '序号', width: 60, align: 'center' },
+    { field: 'date', title: '日期', width: 120 },
+    { field: 'province', title: '省份', width: 100 },
+    { field: 'city', title: '城市', width: 100 },
+    { field: 'name', title: '客户', width: 120 },
+    { field: 'product', title: '商品', width: 140 },
+    { field: 'quantity', title: '数量', width: 80, align: 'right' },
+    { field: 'price', title: '单价', width: 100, align: 'right' },
+    { field: 'amount', title: '金额', minWidth: 120, align: 'right' },
+  ]);
+
+  const tableData = ref([
+    {
+      date: '2024-01-01',
+      province: '浙江',
+      city: '杭州',
+      name: '张三',
+      product: '笔记本电脑',
+      quantity: 2,
+      price: 5000,
+      amount: 10000,
+    },
+    {
+      date: '2024-01-01',
+      province: '浙江',
+      city: '杭州',
+      name: '李四',
+      product: '鼠标',
+      quantity: 1,
+      price: 100,
+      amount: 100,
+    },
+    {
+      date: '2024-01-01',
+      province: '浙江',
+      city: '宁波',
+      name: '王五',
+      product: '键盘',
+      quantity: 1,
+      price: 300,
+      amount: 300,
+    },
+    {
+      date: '2024-01-01',
+      province: '浙江',
+      city: '宁波',
+      isSubtotal: true,
+      name: '',
+      product: '小计',
+      quantity: null,
+      price: null,
+      amount: 10400,
+    },
+    {
+      date: '2024-01-02',
+      province: '江苏',
+      city: '南京',
+      name: '赵六',
+      product: '耳机',
+      quantity: 1,
+      price: 200,
+      amount: 200,
+    },
+    {
+      date: '2024-01-02',
+      province: '江苏',
+      city: '南京',
+      name: '孙七',
+      product: '显示器',
+      quantity: 1,
+      price: 1500,
+      amount: 1500,
+    },
+    {
+      date: '2024-01-02',
+      province: '江苏',
+      city: '苏州',
+      name: '周八',
+      product: 'U 盘',
+      quantity: 3,
+      price: 50,
+      amount: 150,
+    },
+    {
+      date: '2024-01-02',
+      province: '江苏',
+      city: '苏州',
+      isSubtotal: true,
+      name: '',
+      product: '小计',
+      quantity: null,
+      price: null,
+      amount: 1850,
+    },
+    {
+      date: '2024-01-02',
+      province: '合计',
+      city: '',
+      isTotalRow: true,
+      name: '',
+      product: '',
+      quantity: null,
+      price: null,
+      amount: 12250,
+    },
+  ]);
+
+  const rowspanMaps = reactive<Record<MergeField, number[]>>({
+    date: [],
+    province: [],
+    city: [],
+  });
+
+  const computeRowspanMap = (data: any[], field: MergeField) => {
+    const res: number[] = Array(data.length).fill(1);
+    let start = 0;
+    while (start < data.length) {
+      let end = start + 1;
+      while (end < data.length && data[end]?.[field] === data[start]?.[field]) {
+        end++;
+      }
+      const span = end - start;
+      res[start] = span;
+      for (let i = start + 1; i < end; i++) res[i] = 0;
+      start = end;
+    }
+    return res;
+  };
+
+  watchEffect(() => {
+    const data = tableData.value;
+    (mergeFields as readonly MergeField[]).forEach(f => {
+      rowspanMaps[f] = computeRowspanMap(data, f);
+    });
+  });
+
+  const spanMethod = ({ row, rowIndex, column }: any) => {
+    const field: string | undefined = column?.field;
+    if (field && (mergeFields as readonly string[]).includes(field)) {
+      const span = (rowspanMaps as any)[field]?.[rowIndex];
+      if (span === 0) return { rowspan: 0, colspan: 0 };
+      if (span > 1) return { rowspan: span, colspan: 1 };
+    }
+
+    if (row?.isSubtotal) {
+      if (field === 'product') return { rowspan: 1, colspan: 2 };
+      if (field === 'quantity') return { rowspan: 0, colspan: 0 };
+    }
+
+    if (row?.isTotalRow) {
+      if (field === 'province') return { rowspan: 1, colspan: 5 };
+      if (['city', 'name', 'product', 'quantity'].includes(field as string)) {
+        return { rowspan: 0, colspan: 0 };
+      }
+    }
+
+    return undefined;
+  };
+
+  return {
+    columns,
+    tableData,
+    spanMethod,
+  };
+};

package/template/.codex/skills/yss-ui/assets/demos/table/merge-cells/index.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { YTable } from '@yss-ui/components';
+import { useMergeCells } from './hooks/useMergeCells';
+import './style.less';
+
+defineOptions({ name: 'DemoTableMergeCells' });
+
+const { columns, tableData, spanMethod } = useMergeCells();
+</script>
+
+<template>
+  <div class="demo-container">
+    <YTable :data="tableData" :columns="columns" :span-method="spanMethod" :border="true" :show-overflow="'tooltip'" />
+  </div>
+</template>
+
+<style scoped></style>

package/template/.codex/skills/yss-ui/assets/demos/table/merge-cells/style.less

@@ -0,0 +1,3 @@
+.demo-container {
+  padding: 20px;
+}

package/template/.codex/skills/yss-ui/assets/demos/table/pagination-remote/hooks/usePaginationRemote.ts

@@ -0,0 +1,106 @@
+import { type YTableColumn, type YTablePagination } from '@yss-ui/components';
+import { onMounted, reactive, ref, type Ref } from 'vue';
+
+type Row = {
+  _X_ROW_KEY: string;
+  name: string;
+  role: string;
+  status: number;
+  createTime: string;
+};
+
+type ApiResult<T> = {
+  list: T[];
+  pageIndex: number;
+  pageSize: number;
+  totalCount: number;
+  totalPages: number;
+};
+
+export interface UsePaginationRemoteReturn {
+  loading: Ref<boolean>;
+  dataSource: Ref<Row[]>;
+  pagination: Ref<YTablePagination>;
+  columns: YTableColumn[];
+  handlePageChange: (params: { current: number; pageSize: number }) => void;
+}
+
+/**
+ * 远程分页表格 Demo 逻辑
+ * @returns Demo 所需的响应式状态与方法
+ */
+export const usePaginationRemote = (): UsePaginationRemoteReturn => {
+  const loading = ref(false);
+  const dataSource = ref<Row[]>([]);
+
+  const pagination = ref<YTablePagination>({});
+
+  const columns = reactive<YTableColumn[]>([
+    { type: 'seq', title: '序号', width: 60, align: 'center' },
+    { field: 'name', title: '姓名', width: 140 },
+    { field: 'role', title: '角色', width: 120 },
+    { field: 'status', title: '状态', width: 100, align: 'center' },
+    { field: 'createTime', title: '创建时间', width: 180 },
+  ]);
+
+  /** 模拟接口 */
+  const mockRequest = (params: { pageIndex: number; pageSize: number }): Promise<ApiResult<Row>> => {
+    const { pageIndex, pageSize } = params;
+    const totalCount = 237;
+    const start = (pageIndex - 1) * pageSize;
+    const end = Math.min(start + pageSize, totalCount);
+    const list: Row[] = Array.from({ length: Math.max(0, end - start) }).map((_, i) => {
+      const idx = start + i + 1;
+      return {
+        _X_ROW_KEY: String(idx),
+        name: `用户 ${idx}`,
+        role: ['前端', '后端', '测试'][idx % 3],
+        status: idx % 2,
+        createTime: '2024-01-01 00:00:00',
+      };
+    });
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve({
+          list,
+          pageIndex,
+          pageSize,
+          totalCount,
+          totalPages: Math.ceil(totalCount / pageSize),
+        });
+      }, 400);
+    });
+  };
+
+  const fetchTable = async ({ current, pageSize }: { current: number; pageSize: number }) => {
+    loading.value = true;
+    try {
+      const res = await mockRequest({ pageIndex: current, pageSize });
+      dataSource.value = res.list;
+      pagination.value = {
+        ...pagination.value,
+        current: res.pageIndex,
+        pageSize: res.pageSize,
+        total: res.totalCount,
+      };
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const handlePageChange = ({ current, pageSize }: { current: number; pageSize: number }) => {
+    fetchTable({ current, pageSize });
+  };
+
+  onMounted(() => {
+    fetchTable({ current: 1, pageSize: 20 });
+  });
+
+  return {
+    loading,
+    dataSource,
+    pagination,
+    columns,
+    handlePageChange,
+  };
+};

package/template/.codex/skills/yss-ui/assets/demos/table/pagination-remote/index.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { YTable } from '@yss-ui/components';
+import { usePaginationRemote } from './hooks/usePaginationRemote';
+
+defineOptions({ name: 'DemoTablePaginationRemote' });
+
+const { loading, dataSource, pagination, columns, handlePageChange } = usePaginationRemote();
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <YTable
+      v-model:pagination="pagination"
+      :data="dataSource"
+      :columns="columns"
+      :loading="loading"
+      :pageable="true"
+      height="420px"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>
+
+<style scoped></style>

package/template/.codex/skills/yss-ui/assets/demos/table/renderers/index.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { YTable, type YTableColumn } from '@yss-ui/components';
+import { ref } from 'vue';
+
+defineOptions({ name: 'DemoTableRenderers' });
+
+const tableRef = ref<any>();
+
+const tableData = ref([
+  { _X_ROW_KEY: '1', name: 'Alice', age: 18 },
+  { _X_ROW_KEY: '2', name: 'Bob', age: 22 },
+  { _X_ROW_KEY: '3', name: 'Cindy', age: 25 },
+]);
+
+const columns = ref<YTableColumn[]>([
+  {
+    field: 'name',
+    title: '姓名',
+    minWidth: 120,
+  },
+  {
+    field: 'age',
+    title: '年龄(插槽渲染)',
+    width: 150,
+  },
+]);
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <YTable ref="tableRef" :columns="columns" :data="tableData" :pageable="false">
+      <!-- 全局表头插槽：仅当列未声明 #<field>Header 时生效 -->
+      <template #header="{ column }">
+        <span style="display: inline-flex; align-items: center; gap: 6px">
+          <i class="vxe-icon--question" style="color: var(--primary-color, #3371ff)"></i>
+          {{ column.title }}
+        </span>
+      </template>
+      <!-- 指定字段的表头插槽（优先级高于全局 header） -->
+      <template #name-header="{ column }">
+        <span style="display: inline-flex; align-items: center; gap: 6px">
+          <i class="vxe-icon--edit-outline" style="color: var(--primary-color, #3371ff)"></i>
+          自定义：{{ column.title }}
+        </span>
+      </template>
+      <!-- 指定字段的单元格内容插槽 -->
+      <template #age="{ row }">
+        <span
+          style="
+            display: inline-block;
+            padding: 2px 8px;
+            border-radius: 10px;
+            border: 1px solid var(--primary-color, #3371ff);
+            color: var(--primary-color, #3371ff);
+          "
+        >
+          {{ row.age }}
+        </span>
+      </template>
+    </YTable>
+  </div>
+</template>
+
+<style scoped></style>

package/template/.codex/skills/yss-ui/assets/demos/table/selection-checkbox/index.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { YButton, YTable, type YTableColumn } from '@yss-ui/components';
+import { reactive, ref } from 'vue';
+import './style.less';
+
+defineOptions({ name: 'DemoTableSelectionCheckbox' });
+
+const yTableRef = ref<InstanceType<typeof YTable> | null>(null);
+
+const columns = reactive<YTableColumn[]>([
+  { type: 'checkbox', width: 50, align: 'center' },
+  { type: 'seq', title: '序号', width: 60, align: 'center' },
+  { field: 'name', title: 'Name', minWidth: 140 },
+  { field: 'sex', title: 'Sex', width: 100 },
+  { field: 'age', title: 'Age', width: 100 },
+  { field: 'address', title: 'Address', minWidth: 200 },
+]);
+
+const tableData = ref([
+  { id: 1, name: 'Test1', sex: 'Man', age: 28, address: 'test abc' },
+  { id: 2, name: 'Test2', sex: 'Women', age: 22, address: 'Guangzhou' },
+  { id: 3, name: 'Test3', sex: 'Man', age: 32, address: 'Shanghai' },
+  { id: 4, name: 'Test4', sex: 'Women', age: 23, address: 'test abc' },
+  { id: 5, name: 'Test5', sex: 'Women', age: 30, address: 'Shanghai' },
+]);
+
+const getVxe = () => yTableRef.value?.getTableInstance?.();
+
+/**
+ * 切换第1、2行选中
+ * 注意：由于表格内部数据经过处理，需要从表格实例中获取行对象
+ */
+const selectFirstTwo = () => {
+  const $vxe = getVxe();
+  if (!$vxe) return;
+  const tableRows = $vxe.getData();
+  const row1 = tableRows.find((row: any) => row.id === 1);
+  const row2 = tableRows.find((row: any) => row.id === 2);
+  if (row1) $vxe.toggleCheckboxRow(row1);
+  if (row2) $vxe.toggleCheckboxRow(row2);
+};
+
+/**
+ * 设置第3、4行选中
+ */
+const selectThirdFourth = () => {
+  const $vxe = getVxe();
+  if (!$vxe) return;
+  const tableRows = $vxe.getData();
+  const row3 = tableRows.find((row: any) => row.id === 3);
+  const row4 = tableRows.find((row: any) => row.id === 4);
+  const rowsToSelect = [row3, row4].filter(Boolean);
+  if (rowsToSelect.length > 0) {
+    $vxe.setCheckboxRow(rowsToSelect, true);
+  }
+};
+
+const selectAll = () => getVxe()?.setAllCheckboxRow?.(true);
+const clearAll = () => getVxe()?.clearCheckboxRow?.();
+
+const getSelection = () => {
+  const $vxe = getVxe();
+  if (!$vxe) return;
+  const rows = $vxe.getCheckboxRecords?.() || [];
+  alert(`已选中 ${rows.length} 行：\n` + rows.map((r: any) => r.name).join(', '));
+};
+</script>
+
+<template>
+  <div class="demo-container">
+    <div class="demo-actions">
+      <YButton @click="selectFirstTwo">切换第1、2行选中</YButton>
+      <YButton @click="selectThirdFourth">设置第3、4行选中</YButton>
+      <YButton @click="selectAll">设置所有行选中</YButton>
+      <YButton @click="clearAll">清除所有行选中</YButton>
+      <YButton type="primary" @click="getSelection">获取选中</YButton>
+    </div>
+    <YTable
+      ref="yTableRef"
+      :data="tableData"
+      :columns="columns"
+      :border="true"
+      :checkbox-config="{ highlight: true }"
+    />
+  </div>
+</template>
+
+<style scoped></style>

package/template/.codex/skills/yss-ui/assets/demos/table/selection-checkbox/style.less

@@ -0,0 +1,9 @@
+.demo-container {
+  padding: 20px;
+}
+
+.demo-actions {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}

package/template/.codex/skills/yss-ui/assets/demos/table/selection-radio/index.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { YButton, YTable, type YTableColumn } from '@yss-ui/components';
+import { reactive, ref } from 'vue';
+import './style.less';
+
+defineOptions({ name: 'DemoTableSelectionRadio' });
+
+const yTableRef = ref<InstanceType<typeof YTable> | null>(null);
+
+const columns = reactive<YTableColumn[]>([
+  { type: 'radio', width: 50, align: 'center' },
+  { type: 'seq', title: '序号', width: 60, align: 'center' },
+  { field: 'name', title: 'Name', minWidth: 140 },
+  { field: 'sex', title: 'Sex', width: 100 },
+  { field: 'age', title: 'Age', width: 100 },
+  { field: 'address', title: 'Address', minWidth: 200 },
+]);
+
+const tableData = ref([
+  { id: 1, name: 'Test1', sex: 'Man', age: 28, address: 'test abc' },
+  { id: 2, name: 'Test2', sex: 'Women', age: 22, address: 'Guangzhou' },
+  { id: 3, name: 'Test3', sex: 'Man', age: 32, address: 'Shanghai' },
+  { id: 4, name: 'Test4', sex: 'Women', age: 23, address: 'test abc' },
+  { id: 5, name: 'Test5', sex: 'Women', age: 30, address: 'Shanghai' },
+]);
+
+const getVxe = () => yTableRef.value?.getTableInstance?.();
+
+/**
+ * 设置第2行为当前单选
+ * 注意：由于表格内部数据经过处理，需要从表格实例中获取行对象
+ */
+const setSecond = () => {
+  const $vxe = getVxe();
+  if (!$vxe) return;
+  // 从表格实例获取数据，找到 id=2 的行
+  const tableRows = $vxe.getData();
+  const targetRow = tableRows.find((row: any) => row.id === 2);
+  if (targetRow) {
+    $vxe.setRadioRow(targetRow);
+  }
+};
+
+const clearRadio = () => getVxe()?.clearRadioRow?.();
+</script>
+
+<template>
+  <div class="demo-container">
+    <div class="demo-actions">
+      <YButton @click="setSecond">设置第2行为当前单选</YButton>
+      <YButton @click="clearRadio">清空单选</YButton>
+    </div>
+    <YTable ref="yTableRef" :data="tableData" :columns="columns" :border="true" :radio-config="{ highlight: true }" />
+  </div>
+</template>
+
+<style scoped></style>

package/template/.codex/skills/yss-ui/assets/demos/table/selection-radio/style.less

@@ -0,0 +1,9 @@
+.demo-container {
+  padding: 20px;
+}
+
+.demo-actions {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}

package/template/.codex/skills/yss-ui/assets/demos/table/transform/index.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { YTable } from '@yss-ui/components';
+import { ref } from 'vue';
+
+defineOptions({ name: 'DemoTableTransform' });
+
+const tableData = ref([
+  { _X_ROW_KEY: '1', name: '张三', sex: '1', age: 28 },
+  { _X_ROW_KEY: '2', name: '李四', sex: '0', age: 22 },
+]);
+
+const columns = [
+  { title: '姓名', field: 'name' },
+  { title: '年龄', field: 'age' },
+  { title: '性别', field: 'sex', isTransform: true, props: { fieldNames: { label: 'dictName', value: 'dictValue' } } },
+];
+
+const optionsMap = {
+  sex: [
+    { dictName: '男', dictValue: '1' },
+    { dictName: '女', dictValue: '0' },
+  ],
+};
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <YTable :columns="columns" :data="tableData" :pageable="false" :options-map="optionsMap" />
+  </div>
+</template>
+
+<style scoped></style>