create-yss-spec 3.0.0 → 3.0.1

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

@@ -1,181 +0,0 @@
-<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/.hermes/skills/yss-ui/assets/demos/edit-table/pagination-action/index.vue

@@ -1,131 +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: '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/.hermes/skills/yss-ui/assets/demos/edit-table/required/index.vue

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

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