create-yss-spec 1.0.0

package/template/.codex/skills/yss-ui/assets/demos/echarts/treemap.vue

@@ -0,0 +1,30 @@
+<template>
+  <div style="width: 100%; height: 360px">
+    <YEcharts :options="option" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { YEcharts } from '@yss-ui/components';
+import type { EChartsCoreOption } from 'echarts';
+import { ref } from 'vue';
+
+const option = ref<EChartsCoreOption>({
+  title: { text: '矩形树图' },
+  series: [
+    {
+      type: 'treemap',
+      roam: false,
+      nodeClick: false,
+      data: [
+        { name: 'A', value: 10 },
+        { name: 'B', value: 20 },
+        { name: 'C', value: 30 },
+        { name: 'D', value: 15 },
+      ],
+    },
+  ],
+});
+</script>
+
+<style scoped></style>

package/template/.codex/skills/yss-ui/assets/demos/edit-table/all-types/hooks/useAllTypes.ts

@@ -0,0 +1,259 @@
+import type { YEditTableColumn, YTableActionConfig } from '@yss-ui/components';
+import { reactive, ref } from 'vue';
+
+/**
+ * 在树/级联结构中查找指定值的 label
+ */
+const findTreeLabel = (list: any[], value: any, fm: any): string | undefined => {
+  for (const item of list || []) {
+    if (`${item[fm.value]}` === `${value}`) return item[fm.label];
+    const child = findTreeLabel(item[fm.children] || [], value, fm);
+    if (child) return child;
+  }
+};
+
+/**
+ * 根据路径获取级联选择的 labels
+ */
+const getCascaderPathLabels = (list: any[], path: any[], fm: any): string[] | string => {
+  const labels: string[] = [];
+  let current = list;
+  for (const val of path || []) {
+    const hit = (current || []).find((n: any) => `${n[fm.value]}` === `${val}`);
+    if (!hit) break;
+    labels.push(hit[fm.label]);
+    current = hit[fm.children] || [];
+  }
+  // 自定义处理：仅展示最后一级
+  return labels?.at(-1) || '';
+};
+
+/**
+ * 所有类型的编辑表格 Hook
+ */
+export const useAllTypes = () => {
+  const data = ref<any[]>([
+    {
+      name: '张三',
+      age: 28,
+      status: '1',
+      skills: ['vue', 'ts'],
+      date: '2024-10-01',
+      dateRange: ['2024-10-01', '2024-10-07'],
+      time: '13:30:45',
+      dept: 'beijing',
+      area: ['zhejiang', 'hangzhou', 'xihu'],
+      done: true,
+      enabled: false,
+    },
+  ]);
+
+  const columns: YEditTableColumn[] = [
+    { title: '姓名', field: 'name', component: 'form-item-input', minWidth: 140 },
+    { title: '年龄', field: 'age', component: 'form-item-input-number', width: 120, props: { min: 0 } },
+    {
+      title: '状态(字典)',
+      field: 'status',
+      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,
+    },
+    { title: '日期', field: 'date', component: 'form-item-date', width: 160, props: { format: 'YYYY-MM-DD' } },
+    {
+      title: '日期范围',
+      field: 'dateRange',
+      component: 'form-item-date-range',
+      width: 240,
+      props: { format: 'YYYY-MM-DD', valueFormat: 'YYYY-MM-DD' },
+    },
+    { title: '时间(HH:mm:ss)', field: 'time', component: 'form-item-time', width: 160, props: { format: 'HH:mm:ss' } },
+    {
+      title: '部门(树选择)',
+      field: 'dept',
+      component: 'form-item-tree-select',
+      minWidth: 180,
+      props: {
+        fieldNames: { label: 'label', value: 'value', children: 'children' },
+        treeDefaultExpandAll: true,
+        allowClear: true,
+      },
+      formatter: ({ cellValue }: any) =>
+        findTreeLabel(optionsMap.dept, cellValue, { label: 'label', value: 'value', children: 'children' }) ||
+        cellValue,
+    },
+    {
+      title: '地区(级联)',
+      field: 'area',
+      component: 'form-item-cascader',
+      minWidth: 200,
+      props: { fieldNames: { label: 'label', value: 'value', children: 'children' } },
+    },
+    {
+      title: '地区(级联)formatter 展示最后一级',
+      field: 'area1',
+      component: 'form-item-cascader',
+      minWidth: 200,
+      props: { fieldNames: { label: 'label', value: 'value', children: 'children' } },
+      formatter: ({ cellValue }) => {
+        return Array.isArray(cellValue)
+          ? getCascaderPathLabels(optionsMap.area, cellValue, { label: 'label', value: 'value', children: 'children' })
+          : cellValue;
+      },
+    },
+    { title: '是否完成', field: 'done', component: 'form-item-checkbox', width: 120 },
+    {
+      title: '启用',
+      field: 'enabled',
+      component: 'form-item-switch',
+      width: 120,
+      props: { trueText: '自定义文案是', falseText: '自定义文案否', style: { width: '34px' } },
+    },
+    { type: 'action', title: '操作', width: 100, fixed: 'right', align: 'center' },
+  ];
+
+  const optionsMap = {
+    status: [
+      { dictName: '已完成', dictValue: '0' },
+      { dictName: '进行中', dictValue: '1' },
+      { dictName: '未开始', dictValue: '2' },
+      { dictName: '已取消', dictValue: '3' },
+    ],
+    dept: [
+      {
+        label: '总部',
+        value: 'hq',
+        children: [
+          { label: '北京', value: 'beijing' },
+          { label: '上海', value: 'shanghai' },
+        ],
+      },
+      {
+        label: '分部',
+        value: 'branch',
+        children: [
+          { label: '杭州', value: 'hangzhou' },
+          { label: '深圳', value: 'shenzhen' },
+        ],
+      },
+    ],
+    area: [
+      {
+        label: '浙江省',
+        value: 'zhejiang',
+        children: [
+          {
+            label: '杭州市',
+            value: 'hangzhou',
+            children: [
+              { label: '西湖区', value: 'xihu' },
+              { label: '滨江区', value: 'binjiang' },
+            ],
+          },
+        ],
+      },
+      {
+        label: '广东省',
+        value: 'guangdong',
+        children: [
+          {
+            label: '深圳市',
+            value: 'shenzhen',
+            children: [
+              { label: '南山区', value: 'nanshan' },
+              { label: '福田区', value: 'futian' },
+            ],
+          },
+        ],
+      },
+    ],
+    area1: [
+      {
+        label: '浙江省',
+        value: 'zhejiang',
+        children: [
+          {
+            label: '杭州市',
+            value: 'hangzhou',
+            children: [
+              { label: '西湖区', value: 'xihu' },
+              { label: '滨江区', value: 'binjiang' },
+            ],
+          },
+        ],
+      },
+      {
+        label: '广东省',
+        value: 'guangdong',
+        children: [
+          {
+            label: '深圳市',
+            value: 'shenzhen',
+            children: [
+              { label: '南山区', value: 'nanshan' },
+              { label: '福田区', value: 'futian' },
+            ],
+          },
+        ],
+      },
+    ],
+  };
+
+  const add = () => {
+    const r: any = {};
+    columns.forEach(c => {
+      if (!c.field) return;
+      const comp = (c as any).component;
+      const p = (c as any).props || {};
+      if (comp === 'form-item-select' && p.multiple) r[c.field] = [];
+      else if (comp === 'form-item-date-range') r[c.field] = [];
+      else if (comp === 'form-item-checkbox' || comp === 'form-item-switch') r[c.field] = false;
+      else r[c.field] = '';
+    });
+    data.value.push(r);
+  };
+
+  const onDelete = (listRef: { value: any[] }, payload: any) => {
+    const { scope, close, hideLoading } = payload || {};
+    const { rowIndex } = scope || {};
+    setTimeout(() => {
+      listRef.value.splice(rowIndex, 1);
+      hideLoading?.();
+      close?.();
+    }, 300);
+  };
+
+  const actionConfig = reactive<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 }),
+      },
+    ],
+  });
+
+  return {
+    data,
+    columns,
+    optionsMap,
+    actionConfig,
+    add,
+  };
+};

package/template/.codex/skills/yss-ui/assets/demos/edit-table/all-types/index.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { YEditTable } from '@yss-ui/components';
+import { Collapse as ACollapse, CollapsePanel as ACollapsePanel } from 'ant-design-vue';
+import { useAllTypes } from './hooks/useAllTypes';
+
+defineOptions({ name: 'DemoEditTableAllTypes' });
+
+const { data, columns, optionsMap, actionConfig, add } = useAllTypes();
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <YEditTable
+      v-model:data="data"
+      :columns="columns"
+      :table-config="{ editConfig: { trigger: 'click', mode: 'row' } }"
+      :options-map="optionsMap"
+      :action-config="actionConfig"
+      addable
+      @add="add"
+    />
+  </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/.codex/skills/yss-ui/assets/demos/edit-table/async-remote/hooks/useAsyncRemote.ts

@@ -0,0 +1,201 @@
+import type { YEditTableColumn, YTableActionConfig } from '@yss-ui/components';
+import { message } from 'ant-design-vue';
+import { onMounted, reactive, ref } from 'vue';
+
+/**
+ * 异步远程联动 Hook
+ */
+export const useAsyncRemote = () => {
+  const loading = ref(false);
+  const productNameLoadingRow = ref<any | null>(null);
+  const datasetId = ref<'A' | 'B'>('A');
+
+  const optionsMap = reactive<Record<string, any[]>>({ product: [] });
+  const serverProductNameMap = ref<Record<string, { label: string; value: string }[]>>({});
+
+  const data = ref<any[]>([
+    { product: 'p1', productName: '', quantity: 1, price: 199, total: 199, enabled: true, remark: '' },
+    { product: 'p2', productName: '', quantity: 2, price: 299, total: 598, enabled: true, remark: '' },
+  ]);
+
+  /**
+   * 模拟：获取产品下拉
+   */
+  const apiFetchProducts = (): Promise<{ label: string; value: string }[]> => {
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve([
+          { label: '企业邮箱', value: 'p1' },
+          { label: '云存储', value: 'p2' },
+          { label: '在线协作', value: 'p3' },
+        ]);
+      }, 300);
+    });
+  };
+
+  /**
+   * 模拟：根据当前 datasetId 返回整套"产品名称"映射
+   */
+  const apiFetchProductNameMap = (): Promise<Record<string, { label: string; value: string }[]>> => {
+    return new Promise(resolve => {
+      setTimeout(() => {
+        if (datasetId.value === 'A') {
+          resolve({
+            p1: [
+              { label: '标准版 A', value: 'p1-a1' },
+              { label: '旗舰版 A', value: 'p1-a2' },
+            ],
+            p2: [
+              { label: '基础版 A', value: 'p2-a1' },
+              { label: '容量加强版 A', value: 'p2-a2' },
+            ],
+            p3: [
+              { label: '团队版 A', value: 'p3-a1' },
+              { label: '企业版 A', value: 'p3-a2' },
+            ],
+          });
+        } else {
+          resolve({
+            p1: [
+              { label: '标准版 B', value: 'p1-b1' },
+              { label: '旗舰版 B', value: 'p1-b2' },
+            ],
+            p2: [
+              { label: '基础版 B', value: 'p2-b1' },
+              { label: '容量加强版 B', value: 'p2-b2' },
+            ],
+            p3: [
+              { label: '团队版 B', value: 'p3-b1' },
+              { label: '企业版 B', value: 'p3-b2' },
+            ],
+          });
+        }
+      }, 500);
+    });
+  };
+
+  /**
+   * 首次拉取"产品"与"产品名称映射"
+   */
+  const bootstrapRemote = async () => {
+    loading.value = true;
+    try {
+      optionsMap.product = await apiFetchProducts();
+      serverProductNameMap.value = await apiFetchProductNameMap();
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const columns: YEditTableColumn[] = [
+    {
+      title: '产品（接口返回）',
+      field: 'product',
+      component: 'form-item-select',
+      isTransform: true,
+      props: { fieldNames: { label: 'label', value: 'value' } },
+      width: 180,
+    },
+    {
+      title: '产品名称（随服务端变化）',
+      field: 'productName',
+      component: 'form-item-select',
+      isTransform: true,
+      props: { fieldNames: { label: 'label', value: 'value' } },
+      cellProps: ({ row }) => ({ loading: productNameLoadingRow.value === row }),
+      minWidth: 200,
+      filterOptions: ({ row }: any) => {
+        const product = row?.product;
+        return serverProductNameMap.value?.[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: '停用' },
+    },
+    { title: '备注', field: 'remark', component: 'form-item-input', minWidth: 200 },
+  ];
+
+  const editRules: Record<string, any[]> = {
+    product: [{ required: true }],
+    productName: [{ 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 = async ({ row, key, value: _value }: { row: any; key: string; value: any }) => {
+    if (key === 'product') {
+      row.productName = '';
+      productNameLoadingRow.value = row;
+      try {
+        datasetId.value = datasetId.value === 'A' ? 'B' : 'A';
+        serverProductNameMap.value = await apiFetchProductNameMap();
+        message.success(`已切换服务端数据集为 ${datasetId.value}`);
+      } finally {
+        productNameLoadingRow.value = null;
+      }
+    }
+    if (key === 'quantity' || key === 'price') {
+      const q = Number(row.quantity) || 0;
+      const p = Number(row.price) || 0;
+      row.total = Number((q * p).toFixed(2));
+    }
+  };
+
+  const onDelete = (listRef: { value: any[] }, payload: any) => {
+    const { scope, close, hideLoading } = payload || {};
+    const { rowIndex } = scope || {};
+    setTimeout(() => {
+      listRef.value.splice(rowIndex, 1);
+      hideLoading?.();
+      close?.();
+    }, 300);
+  };
+
+  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 }),
+      },
+    ],
+  };
+
+  onMounted(() => {
+    bootstrapRemote();
+  });
+
+  return {
+    data,
+    columns,
+    optionsMap,
+    serverProductNameMap,
+    editRules,
+    actionConfig,
+    add,
+    onUpdateRow,
+  };
+};

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { YButton, YEditTable } from '@yss-ui/components';
+import { Collapse as ACollapse, CollapsePanel as ACollapsePanel } from 'ant-design-vue';
+import { useAsyncRemote } from './hooks/useAsyncRemote';
+
+defineOptions({ name: 'DemoEditTableAsyncRemote' });
+
+const { data, columns, optionsMap, serverProductNameMap, editRules, add, onUpdateRow } = useAsyncRemote();
+</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"
+      addable
+      @add="add"
+      @update-row="onUpdateRow"
+    />
+
+    <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-panel key="srv" header="模拟服务端返回（当前数据集）">
+        <div style="padding: 12px; border: 1px dashed #d9d9d9; border-radius: 4px">
+          <div style="color: #999; margin-bottom: 6px">products：</div>
+          <pre style="margin: 0; white-space: pre-wrap">{{ JSON.stringify(optionsMap.product, null, 2) }}</pre>
+          <div style="color: #999; margin: 6px 0">productNameMap（按所选产品动态过滤）：</div>
+          <pre style="margin: 0; white-space: pre-wrap">{{ JSON.stringify(serverProductNameMap, null, 2) }}</pre>
+        </div>
+      </a-collapse-panel>
+    </a-collapse>
+  </div>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,104 @@
+<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: 'DemoEditTableBasic' });
+
+const tableRef = ref<any>();
+const data = ref<any[]>([
+  { name: '张三', age: 18, status: '1' },
+  { name: '李四', age: 25, status: '0' },
+]);
+
+const columns: YEditTableColumn[] = [
+  {
+    title: '姓名',
+    field: 'name',
+    component: 'form-item-input',
+  },
+  {
+    title: '年龄',
+    field: 'age',
+    component: 'form-item-input-number',
+    props: { min: 0 },
+  },
+  {
+    title: '状态（字典翻译）',
+    field: 'status',
+    component: 'form-item-select',
+    isTransform: true,
+    props: { fieldNames: { label: 'dictName', value: 'dictValue' } },
+  },
+  {
+    title: '状态（行内写死）',
+    field: 'status2',
+    component: 'form-item-select',
+    options: [
+      { label: '已完成', value: '0' },
+      { label: '进行中', value: '1' },
+    ],
+  },
+  { type: 'action', title: '操作', width: 160 },
+];
+
+const tableConfig = { editConfig: { trigger: 'click', mode: 'row' }, size: 'small' };
+
+const optionsMap = {
+  status: [
+    { dictName: '已完成', dictValue: '0' },
+    { dictName: '进行中', dictValue: '1' },
+    { dictName: '未开始', dictValue: '2' },
+    { dictName: '已取消', dictValue: '3' },
+  ],
+};
+
+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 add = () => {
+  const item: any = {};
+  columns.forEach(c => c.field && (item[c.field] = ''));
+  data.value.push(item);
+};
+
+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 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>