create-yss-spec 2.1.9 → 2.1.11

package/template/.cursor/skills/yss-ui/assets/demos/edit-table/linkage/index.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { YButton, YEditTable, type YEditTableColumn, type YTableActionConfig } from '@yss-ui/components';
+import { Collapse as ACollapse, CollapsePanel as ACollapsePanel } from 'ant-design-vue';
+import { ref } from 'vue';
+
+defineOptions({ name: 'DemoEditTableLinkage' });
+
+const data = ref<any[]>([
+  {
+    product: 'p1',
+    productName: '企业邮箱',
+    version: 'p1-v2',
+    quantity: 2,
+    price: 199,
+    total: 398,
+    enabled: true,
+    remark: '试用客户优先处理',
+  },
+]);
+
+const columns: YEditTableColumn[] = [
+  {
+    title: '产品',
+    field: 'product',
+    component: 'form-item-select',
+    isTransform: true,
+    props: { fieldNames: { label: 'label', value: 'value' } },
+    width: 160,
+  },
+  {
+    title: '产品名称',
+    field: 'productName',
+    component: 'form-item-input',
+    minWidth: 180,
+    props: { placeholder: '选择产品后自动回填名称' },
+  },
+  {
+    title: '版本',
+    field: 'version',
+    component: 'form-item-select',
+    isTransform: true,
+    props: { fieldNames: { label: 'label', value: 'value' } },
+    minWidth: 160,
+    filterOptions: ({ row }: any) => {
+      const product = row?.product;
+      return productToVersions[product] || [];
+    },
+  },
+  { title: '数量', field: 'quantity', component: 'form-item-input-number', width: 120, props: { min: 1 } },
+  { title: '单价(¥)', field: 'price', component: 'form-item-input-number', width: 140, props: { min: 0, step: 1 } },
+  { title: '总价(¥)', field: 'total', component: 'form-item-input-number', width: 140, props: { disabled: true } },
+  {
+    title: '启用',
+    field: 'enabled',
+    component: 'form-item-switch',
+    width: 120,
+    props: { trueText: '启用', falseText: '停用', style: { width: '34px' } },
+  },
+  {
+    title: '备注',
+    field: 'remark',
+    component: 'form-item-input',
+    minWidth: 200,
+    customRule: (_val: any, row: any) => {
+      if (row?.enabled && !row?.remark) return { errMsg: '启用时，备注必填' };
+      return { errMsg: '' };
+    },
+  },
+  { type: 'action', title: '操作', width: 160 },
+];
+
+const optionsMap = {
+  product: [
+    { label: '企业邮箱', value: 'p1' },
+    { label: '云存储', value: 'p2' },
+    { label: '在线协作', value: 'p3' },
+  ],
+};
+
+const productToVersions: Record<string, { label: string; value: string }[]> = {
+  p1: [
+    { label: '标准版', value: 'p1-v1' },
+    { label: '旗舰版', value: 'p1-v2' },
+  ],
+  p2: [
+    { label: '基础版', value: 'p2-v1' },
+    { label: '容量加强版', value: 'p2-v2' },
+  ],
+  p3: [
+    { label: '团队版', value: 'p3-v1' },
+    { label: '企业版', value: 'p3-v2' },
+  ],
+};
+
+const editRules: Record<string, any[]> = {
+  product: [{ required: true }],
+  version: [{ required: true }],
+  quantity: [{ required: true }],
+};
+
+const add = () => {
+  const item: any = {};
+  columns.forEach(c => {
+    if (!c.field) return;
+    const comp = (c as any).component;
+    if (comp === 'form-item-switch') item[c.field] = false;
+    else if (comp === 'form-item-input-number') item[c.field] = 0;
+    else item[c.field] = '';
+  });
+  item.quantity = 1;
+  item.enabled = true;
+  data.value.push(item);
+};
+
+const onUpdateRow = ({ row, key, value }: { row: any; key: string; value: any }) => {
+  if (key === 'product') {
+    const hit = (optionsMap.product || []).find((o: any) => `${o.value}` === `${value}`);
+    row.productName = hit?.label || '';
+    row.version = '';
+  }
+  if (key === 'quantity' || key === 'price') {
+    const q = Number(row.quantity) || 0;
+    const p = Number(row.price) || 0;
+    row.total = Number((q * p).toFixed(2));
+  }
+  if (key === 'enabled' && !value) {
+    row.remark = '';
+  }
+};
+
+const actionConfig: YTableActionConfig = {
+  buttons: [
+    {
+      key: 'remove',
+      text: '删除',
+      type: 'link',
+      isConfirm: true,
+      confirmProps: { title: '是否删除此行？', needLoading: true },
+      clickFn: (scope: any, _btn: any, { close, hideLoading }: any) => onDelete(data, { scope, close, hideLoading }),
+    },
+  ],
+};
+
+const onDelete = (listRef: { value: any[] }, payload: any) => {
+  const { scope, close, hideLoading } = payload || {};
+  const { rowIndex } = scope || {};
+  setTimeout(() => {
+    listRef.value.splice(rowIndex, 1);
+    hideLoading?.();
+    close?.();
+  }, 300);
+};
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <div style="text-align: right; margin-bottom: 8px">
+      <YButton type="primary" @click="add">添 行</YButton>
+    </div>
+    <YEditTable
+      v-model:data="data"
+      :columns="columns"
+      :table-config="{ editConfig: { trigger: 'click', mode: 'row' }, editRules }"
+      :options-map="optionsMap"
+      :action-config="actionConfig"
+      addable
+      @add="add"
+      @update-row="onUpdateRow"
+    />
+  </div>
+  <a-collapse v-if="data" style="margin-top: 12px">
+    <a-collapse-panel key="data" header="查看数据">
+      <div style="padding: 12px; border: 1px dashed #d9d9d9; border-radius: 4px">
+        <div style="color: #999; margin-bottom: 6px">当前数据：</div>
+        <pre style="margin: 0; white-space: pre-wrap">{{ JSON.stringify(data, null, 2) }}</pre>
+      </div>
+    </a-collapse-panel>
+  </a-collapse>
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/edit-table/pagination-action/index.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import type { YEditTableColumn, YTableActionConfig } from '@yss-ui/components';
+import { YButton, YEditTable } from '@yss-ui/components';
+import { ref } from 'vue';
+
+defineOptions({ name: 'DemoEditTablePaginationAction' });
+
+const tableRef = ref<any>();
+const data = ref<any[]>(
+  Array.from({ length: 37 }).map((_, i) => ({ name: `姓名${i + 1}`, age: i, sex: i % 2 ? '1' : '0' }))
+);
+
+const columns: YEditTableColumn[] = [
+  { title: '姓名', field: 'name', component: 'form-item-input' },
+  { title: '年龄', field: 'age', component: 'form-item-input-number', width: 120 },
+  {
+    title: '性别',
+    field: 'sex',
+    component: 'form-item-select',
+    isTransform: true,
+    props: { fieldNames: { label: 'dictName', value: 'dictValue' } },
+    width: 140,
+  },
+  {
+    title: '技能(多选)',
+    field: 'skills',
+    component: 'form-item-select',
+    props: { multiple: true, maxTagCount: 'responsive' },
+    options: [
+      { label: 'Vue', value: 'vue' },
+      { label: 'React', value: 'react' },
+      { label: 'TypeScript', value: 'ts' },
+      { label: 'Node.js', value: 'node' },
+    ],
+    minWidth: 200,
+  },
+  {
+    type: 'action',
+    width: 80,
+    title: '操作',
+  },
+];
+
+const tableConfig = { editConfig: { trigger: 'click', mode: 'row' } };
+
+const pagination = ref({
+  current: 1,
+  pageSize: 10,
+  total: data.value.length,
+  showQuickJumper: true,
+  showSizeChanger: true,
+  pageSizeOptions: ['10', '20', '50', '100'],
+  remote: false,
+});
+
+const optionsMap = {
+  sex: [
+    { dictName: '男', dictValue: '1' },
+    { dictName: '女', dictValue: '0' },
+  ],
+};
+
+const actionConfig: YTableActionConfig = {
+  align: 'center',
+  buttons: [
+    {
+      key: 'remove',
+      text: '删除',
+      type: 'link',
+      isConfirm: true,
+      confirmProps: { title: '是否删除此条数据？', needLoading: true },
+      clickFn: (scope: any, _btn: any, { close, hideLoading }: any) => onDelete(data, { scope, close, hideLoading }),
+    },
+  ],
+};
+
+const resetPageData = () => {
+  data.value = Array.from({ length: 37 }).map((_, i) => ({ name: `姓名${i + 1}`, age: i, sex: i % 2 ? '1' : '0' }));
+  pagination.value = { ...pagination.value, current: 1, total: data.value.length };
+};
+
+const onPageChange = ({ current, pageSize }: any) => {
+  pagination.value = { ...pagination.value, current, pageSize };
+};
+
+const onSizeChange = (size: number) => {
+  pagination.value = { ...pagination.value, current: 1, pageSize: size };
+};
+
+const onDelete = (listRef: { value: any[] } | any[], payload: any) => {
+  const isRef = Array.isArray((listRef as any).value);
+  const arr = isRef ? (listRef as any).value : (listRef as any);
+  const { scope, close, hideLoading } = normalizeDeletePayload(payload);
+  const { rowIndex } = scope || {};
+  setTimeout(() => {
+    arr.splice(rowIndex, 1);
+    hideLoading?.();
+    close?.();
+  }, 400);
+};
+
+const normalizeDeletePayload = (payload: any) => {
+  if (!payload) return { scope: null, close: () => {}, hideLoading: () => {} };
+  if ('scope' in payload) return payload;
+  const [scope, _config, helpers] = payload || [];
+  return { scope, ...(helpers || {}) };
+};
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <div style="text-align: right; margin-bottom: 8px">
+      <YButton @click="resetPageData">重置数据</YButton>
+    </div>
+    <YEditTable
+      ref="tableRef"
+      v-model:data="data"
+      :columns="columns"
+      :table-config="tableConfig"
+      :options-map="optionsMap"
+      :pageable="true"
+      :pagination="pagination"
+      :action-config="actionConfig"
+      :toolbar-config="{ custom: true }"
+      @page-change="onPageChange"
+      @size-change="onSizeChange"
+    />
+  </div>
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/edit-table/required/index.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { YButton, YEditTable, type YEditTableColumn, type YTableActionConfig } from '@yss-ui/components';
+import { ref } from 'vue';
+
+defineOptions({ name: 'DemoEditTableRequire' });
+
+const tableRef = ref<any>();
+const data = ref<any[]>([
+  { name: '张三', age: 18, sex: '1' },
+  { name: '李四', age: 26, sex: '0' },
+]);
+
+const columns: YEditTableColumn[] = [
+  { title: '姓名', field: 'name', component: 'form-item-input' },
+  { title: '年龄', field: 'age', component: 'form-item-input-number', props: { min: 0 } },
+  {
+    title: '性别',
+    field: 'sex',
+    component: 'form-item-select',
+    isTransform: true,
+    props: { fieldNames: { label: 'dictName', value: 'dictValue' } },
+  },
+  { type: 'action', title: '操作', width: 160 },
+];
+
+const tableConfig = {
+  editConfig: { trigger: 'click', mode: 'row' },
+  editRules: { name: [{ required: true }], sex: [{ required: true }] },
+};
+
+const optionsMap = {
+  sex: [
+    { dictName: '男', dictValue: '1' },
+    { dictName: '女', dictValue: '0' },
+  ],
+};
+
+const add = () => {
+  const item: any = {};
+  columns.forEach(c => c.field && (item[c.field] = ''));
+  data.value.push(item);
+};
+
+const verify = async () => {
+  const { valid } = (await tableRef.value?.validate()) ?? {};
+  if (!valid) {
+    return;
+  }
+  alert('校验成功');
+};
+
+const actionConfig: YTableActionConfig = {
+  buttons: [
+    {
+      key: 'remove',
+      text: '删除',
+      type: 'link',
+      isConfirm: true,
+      confirmProps: { title: '是否删除此行？', needLoading: true },
+      clickFn: (scope: any, _btn: any, { close, hideLoading }: any) => onDelete(data, { scope, close, hideLoading }),
+    },
+  ],
+};
+
+const onDelete = (listRef: { value: any[] }, payload: any) => {
+  const { scope, close, hideLoading } = payload || {};
+  const { rowIndex } = scope || {};
+  setTimeout(() => {
+    listRef.value.splice(rowIndex, 1);
+    hideLoading?.();
+    close?.();
+  }, 300);
+};
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <div style="text-align: right; margin-bottom: 8px">
+      <YButton type="primary" @click="verify">触发校验</YButton>
+      <YButton style="margin-left: 8px" @click="add">添 行</YButton>
+    </div>
+    <YEditTable
+      ref="tableRef"
+      v-model:data="data"
+      addable
+      :columns="columns"
+      :table-config="tableConfig"
+      :options-map="optionsMap"
+      :action-config="actionConfig"
+      @add="add"
+    />
+  </div>
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/edit-table/row-edit/index.vue

@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { YEditTableColumn, YTableActionConfig } from '@yss-ui/components';
+import { YEditTable } from '@yss-ui/components';
+
+defineOptions({ name: 'DemoEditTableRowEdit' });
+
+/**
+ * 表格数据
+ */
+const data = ref<any[]>([
+  { id: 1, name: 'Test1', sex: '1', age: 28 },
+  { id: 2, name: 'Test2', sex: '0', age: 22 },
+  { id: 3, name: 'Test3', sex: '1', age: 32 },
+  { id: 4, name: 'Test4', sex: '0', age: 24 },
+]);
+
+/**
+ * 表格实例引用
+ */
+const tableRef = ref<any>();
+
+/**
+ * 判断某行是否正在编辑（使用 VXE-Table 原生 API）
+ */
+const isEditing = (row: any): boolean => {
+  const $table = tableRef.value?.getTableInstance();
+  return $table ? $table.isEditByRow(row) : false;
+};
+
+/**
+ * 列配置
+ */
+const columns: YEditTableColumn[] = [
+  {
+    title: '姓名',
+    field: 'name',
+    component: 'form-item-input',
+    // 自定义校验：姓名不能重复
+    customRule: (value: any, row: any, _field: string, tableData: any[]) => {
+      if (!value) return { errMsg: '' };
+      const duplicates = tableData.filter(item => item !== row && item.name === value);
+      if (duplicates.length > 0) {
+        return { errMsg: '姓名不能重复' };
+      }
+      return { errMsg: '' };
+    },
+  },
+  {
+    title: '性别',
+    field: 'sex',
+    component: 'form-item-select',
+    isTransform: true,
+    props: { fieldNames: { label: 'dictName', value: 'dictValue' } },
+  },
+  {
+    title: '年龄',
+    field: 'age',
+    component: 'form-item-input-number',
+    // 自定义校验：年龄范围 1-120
+    customRule: (value: any) => {
+      if (value === null || value === undefined || value === '') {
+        return { errMsg: '' };
+      }
+      if (value < 1 || value > 120) {
+        return { errMsg: '年龄必须在 1-120 之间' };
+      }
+      return { errMsg: '' };
+    },
+  },
+  {
+    type: 'action',
+    title: '操作',
+    width: 150,
+    align: 'center',
+    fixed: 'right',
+  },
+];
+
+/**
+ * 字典数据映射
+ */
+const optionsMap = {
+  sex: [
+    { dictName: '男', dictValue: '1' },
+    { dictName: '女', dictValue: '0' },
+  ],
+};
+
+/**
+ * 表格配置
+ */
+const tableConfig = {
+  // 启用数据备份，以支持 revertData 还原数据
+  keepSource: true,
+  editConfig: {
+    trigger: 'manual',
+    mode: 'row',
+    // 关闭失焦自动清除编辑状态，只能通过保存/取消按钮控制
+    autoClear: false,
+  },
+  rowConfig: { keyField: 'id' },
+  // 必填项校验规则
+  editRules: {
+    name: [{ required: true }],
+    sex: [{ required: false }],
+    age: [{ required: true }],
+  },
+};
+
+/**
+ * 进入编辑态（参考 VXE-Table 官方示例）
+ */
+const handleEdit = (scope: any) => {
+  const { row } = scope;
+  const $table = tableRef.value?.getTableInstance();
+  if ($table) {
+    $table.setEditRow(row);
+  }
+};
+
+/**
+ * 保存编辑
+ */
+const handleSave = async (scope: any, _btn: any, helpers: any) => {
+  const { row } = scope;
+  const { hideLoading } = helpers;
+
+  try {
+    // 触发表格校验
+    const validResult = await tableRef.value?.validate();
+
+    if (validResult?.valid) {
+      const $table = tableRef.value?.getTableInstance();
+
+      // 模拟异步保存（实际项目中这里应该调用后端接口）
+      await new Promise(resolve => setTimeout(resolve, 500));
+
+      // 保存成功，清除编辑状态
+      $table?.clearEdit();
+      console.log('保存成功:', row);
+    } else {
+      console.warn('校验失败:', validResult);
+    }
+  } catch (error) {
+    console.error('保存失败:', error);
+  } finally {
+    hideLoading?.();
+  }
+};
+
+/**
+ * 取消编辑（使用 revertData 还原数据）
+ */
+const handleCancel = async () => {
+  const $table = tableRef.value?.getTableInstance();
+  if ($table) {
+    // 获取当前正在编辑的 row
+    const editCell = $table.getEditCell();
+    if (editCell) {
+      const { row } = editCell;
+      // 先还原数据（VXE-Table 原生方法）
+      await $table.revertData(row);
+      // 再清除编辑状态
+      $table.clearEdit();
+    }
+  }
+};
+
+/**
+ * 操作列配置
+ */
+const actionConfig: YTableActionConfig = {
+  buttons: [
+    {
+      key: 'edit',
+      text: '编辑',
+      type: 'link',
+      // 编辑中时隐藏"编辑"按钮
+      hideFn: (scope: any) => isEditing(scope.row),
+      clickFn: handleEdit,
+    },
+    {
+      key: 'save',
+      text: '保存',
+      type: 'link',
+      // 非编辑中时隐藏"保存"按钮
+      hideFn: (scope: any) => !isEditing(scope.row),
+      clickFn: handleSave,
+      isConfirm: false,
+      // 启用异步 loading
+      confirmProps: { needLoading: true },
+    },
+    {
+      key: 'cancel',
+      text: '取消',
+      type: 'link',
+      // 非编辑中时隐藏"取消"按钮
+      hideFn: (scope: any) => !isEditing(scope.row),
+      clickFn: handleCancel,
+    },
+  ],
+};
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <YEditTable
+      ref="tableRef"
+      v-model:data="data"
+      :columns="columns"
+      :table-config="tableConfig"
+      :options-map="optionsMap"
+      :action-config="actionConfig"
+      :toolbar-config="{ custom: true }"
+    />
+  </div>
+</template>
+
+<style scoped></style>