create-yss-spec 3.3.1 → 3.3.3

package/template/.claude/skills/yss-ui/assets/demos/edit-table/async-remote/hooks/useAsyncRemote.ts

@@ -1,201 +0,0 @@
-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/.claude/skills/yss-ui/assets/demos/edit-table/async-remote/index.vue

@@ -1,45 +0,0 @@
-<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/.claude/skills/yss-ui/assets/demos/edit-table/basic/index.vue

@@ -1,104 +0,0 @@
-<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>

package/template/.claude/skills/yss-ui/assets/demos/edit-table/big-data/index.vue

@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import type { YEditTableColumn, YTableActionConfig } from '@yss-ui/components';
-import { YEditTable } from '@yss-ui/components';
-import { ref } from 'vue';
-
-defineOptions({ name: 'DemoEditTableBigData' });
-
-const STATUS = [
-  { dictName: '已完成', dictValue: '0' },
-  { dictName: '进行中', dictValue: '1' },
-  { dictName: '未开始', dictValue: '2' },
-  { dictName: '已取消', dictValue: '3' },
-];
-
-const columns: YEditTableColumn[] = [
-  { title: '序号', field: 'id', width: 80, align: 'center' },
-  { title: '姓名', field: 'name', component: 'form-item-input', minWidth: 140 },
-  { title: '年龄', field: 'age', component: 'form-item-input-number', props: { min: 0 }, width: 120, align: 'right' },
-  {
-    title: '状态',
-    field: 'status',
-    component: 'form-item-select',
-    isTransform: true,
-    props: { fieldNames: { label: 'dictName', value: 'dictValue' } },
-    width: 160,
-  },
-  { title: '日期', field: 'date', component: 'form-item-date', props: { format: 'YYYY-MM-DD' }, width: 160 },
-  { type: 'action', title: '操作', width: 160 },
-];
-
-const optionsMap = { status: STATUS };
-
-const makeRow = (i: number) => ({
-  id: i + 1,
-  name: `用户${i + 1}`,
-  age: (i % 60) + 18,
-  status: `${i % STATUS.length}`,
-  date: `2024-10-${String((i % 28) + 1).padStart(2, '0')}`,
-});
-
-const data = ref<any[]>(Array.from({ length: 1000 }, (_, i) => makeRow(i)));
-
-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">
-    <YEditTable
-      v-model:data="data"
-      :columns="columns"
-      :table-config="{ editConfig: { trigger: 'click', mode: 'row' }, showOverflow: 'tooltip' }"
-      :options-map="optionsMap"
-      :max-height="480"
-      :pageable="false"
-      :action-config="actionConfig"
-    />
-  </div>
-  <div style="padding: 0 12px; color: #999">当前行数：{{ data.length }}（无分页，滚动查看）</div>
-</template>
-
-<style scoped></style>

package/template/.claude/skills/yss-ui/assets/demos/edit-table/custom-rule/index.vue

@@ -1,114 +0,0 @@
-<script setup lang="ts">
-import { YButton, YEditTable, type YEditTableColumn, type YTableActionConfig } from '@yss-ui/components';
-import { ref } from 'vue';
-
-defineOptions({ name: 'DemoEditTableCustomRule' });
-
-const tableRef = ref<any>();
-const data = ref<any[]>([
-  { name: '张三', age: 19, sex: '1' },
-  { name: '李四', age: 28, sex: '0' },
-]);
-
-const columns: YEditTableColumn[] = [
-  {
-    title: '姓名',
-    field: 'name',
-    component: 'form-item-input',
-    customRule: (value: string, _row: any, field: string, tableData: any[]) => {
-      const label = '姓名';
-      const val = (value || '').trim();
-      if (!val) return { errMsg: `${label}不能为空` };
-      if (val.length < 6) return { errMsg: `最小为 6 位` };
-      if (val.length > 20) return { errMsg: `${label}不能超过20个字符` };
-      const dup = tableData.filter(r => r?.[field] === val);
-      if (dup.length > 1) return { errMsg: `${label}不能重复` };
-      return { errMsg: '' };
-    },
-  },
-  { 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' },
-  cellConfig: { height: 42 },
-  editRules: { 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 () => {
-  if (!tableRef.value) {
-    return alert('表格组件未正确挂载');
-  }
-  const { valid, errorMsg } = (await tableRef.value?.validate()) ?? {};
-  if (!valid) {
-    const msg = (errorMsg as Map<string, string>).values()?.next()?.value;
-    return alert(msg ?? '校验失败');
-  }
-  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/.claude/skills/yss-ui/assets/demos/edit-table/direct-editable/index.vue

@@ -1,94 +0,0 @@
-<script setup lang="ts">
-import type { YEditTableColumn, YTableActionConfig } from '@yss-ui/components';
-import { YEditTable } from '@yss-ui/components';
-import {
-  Collapse as ACollapse,
-  CollapsePanel as ACollapsePanel,
-  Input as AInput,
-  InputNumber as AInputNumber,
-  Select as ASelect,
-} from 'ant-design-vue';
-import { ref } from 'vue';
-
-defineOptions({ name: 'DemoEditTableDirectEditable' });
-
-const data = ref<any[]>([{ name: '张三', age: 18, status: '1' }]);
-
-const columns: YEditTableColumn[] = [
-  { title: '姓名', field: 'name' },
-  { title: '年龄', field: 'age' },
-  { title: '状态', field: 'status' },
-  { type: 'action', title: '操作', width: 160 },
-];
-
-const statusOptions = [
-  { dictName: '已完成', dictValue: '0' },
-  { dictName: '进行中', dictValue: '1' },
-  { dictName: '未开始', dictValue: '2' },
-  { dictName: '已取消', dictValue: '3' },
-];
-
-const add = () => {
-  const r: any = {};
-  columns.forEach(c => c.field && (r[c.field] = ''));
-  data.value.push(r);
-};
-
-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">
-    <YEditTable v-model:data="data" :columns="columns" :action-config="actionConfig" addable @add="add">
-      <!-- 全部单元格直接可编辑：使用字段插槽在查看态渲染输入控件 -->
-      <template #name="{ row }">
-        <a-input v-model:value="row.name" placeholder="请输入" />
-      </template>
-      <template #age="{ row }">
-        <a-input-number v-model:value="row.age" :min="0" style="width: 100%" placeholder="请输入" />
-      </template>
-      <template #status="{ row }">
-        <a-select
-          v-model:value="row.status"
-          :options="statusOptions"
-          :field-names="{ label: 'dictName', value: 'dictValue' }"
-          show-search
-          allow-clear
-          style="width: 100%"
-        />
-      </template>
-    </YEditTable>
-  </div>
-  <div style="padding: 12px 12px 0; color: #999">提示：点击任意单元格直接进入编辑。</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>