create-yss-spec 2.1.10 → 2.1.13

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

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { YButton, YEditTable, type YEditTableColumn, type YTableActionConfig } from '@yss-ui/components';
+import { Collapse as ACollapse, CollapsePanel as ACollapsePanel, message } from 'ant-design-vue';
+import { ref } from 'vue';
+
+defineOptions({ name: 'DemoEditTableRowOptions' });
+
+type Option = { label: string; value: string };
+
+const tableRef = ref<any>();
+
+const data = ref<any[]>([
+  { id: 1, product: 'p1', productName: '企业邮箱', version: 'p1-v2', quantity: 10, remark: '老客户' },
+  { id: 2, product: 'p2', productName: '云存储', version: 'p2-v1', quantity: 1, remark: '' },
+]);
+
+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-input',
+    minWidth: 160,
+    props: { placeholder: '选择产品后自动回填' },
+  },
+  {
+    title: '版本（行级字典）',
+    field: 'version',
+    component: 'form-item-select',
+    isTransform: true,
+    props: { fieldNames: { label: 'label', value: 'value' } },
+    minWidth: 200,
+    cellProps: ({ row }) => ({ loading: !!row.__loadingVersions }),
+    filterOptions: ({ row }: any) => row?.opts?.version || productToVersions[row?.product] || [],
+  },
+  { title: '数量', field: 'quantity', component: 'form-item-input-number', width: 120, props: { min: 1 } },
+  { title: '备注', field: 'remark', component: 'form-item-input', minWidth: 200 },
+  { type: 'action', title: '操作', width: 160 },
+];
+
+const optionsMap = ref<Record<string, Option[]>>({
+  product: [
+    { label: '企业邮箱', value: 'p1' },
+    { label: '云存储', value: 'p2' },
+    { label: '在线协作', value: 'p3' },
+  ],
+});
+
+const productToVersions: Record<string, Option[]> = {
+  p1: [
+    { label: '标准版', value: 'p1-v1' },
+    { label: '旗舰版', value: 'p1-v2' },
+  ],
+  p2: [
+    { label: '基础版', value: 'p2-v1' },
+    { label: '容量加强版', value: 'p2-v2' },
+    { label: '企业版', value: 'p2-v3' },
+  ],
+  p3: [
+    { label: '团队版', value: 'p3-v1' },
+    { label: '企业版', value: 'p3-v2' },
+  ],
+};
+
+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 onUpdateRow = async ({ row, key, value }: { row: any; key: string; value: any }) => {
+  if (key === 'product') {
+    const hit = (optionsMap.value.product || []).find(o => `${o.value}` === `${value}`);
+    row.productName = hit?.label || '';
+    row.version = '';
+
+    row.__loadingVersions = true;
+    const list = await mockFetchVersions(value);
+    row.opts = { version: list };
+    row.__loadingVersions = false;
+  }
+};
+
+const mockFetchVersions = (product: string): Promise<Option[]> =>
+  new Promise(resolve => setTimeout(() => resolve(productToVersions[product] || []), 300));
+
+const add = () => {
+  const item: any = {};
+  columns.forEach(c => {
+    if (!c.field) return;
+    const comp = (c as any).component;
+    if (comp === 'form-item-input-number') item[c.field] = 1;
+    else if (comp === 'form-item-switch') item[c.field] = false;
+    else 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);
+};
+
+const simulateGlobalDictSwitch = () => {
+  optionsMap.value.product = [
+    { label: '企业邮箱 Pro', value: 'p1' },
+    { label: '云存储 Pro', value: 'p2' },
+    { label: '在线协作 Pro', value: 'p3' },
+  ];
+  message.success('已模拟全局字典切换（仅影响"产品"列）');
+};
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <div style="display: flex; justify-content: space-between; margin-bottom: 8px">
+      <div>
+        <YButton style="margin-left: 8px" @click="simulateGlobalDictSwitch">模拟全局字典切换</YButton>
+      </div>
+    </div>
+
+    <YEditTable
+      ref="tableRef"
+      v-model:data="data"
+      :columns="columns"
+      :table-config="{ editConfig: { trigger: 'click', mode: 'row' } }"
+      :options-map="optionsMap"
+      :action-config="actionConfig"
+      row-options-field-name="opts"
+      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>
+  </div>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { YButton, YEditTable, type YEditTableColumn, type YTableActionConfig } from '@yss-ui/components';
+import {
+  Collapse as ACollapse,
+  CollapsePanel as ACollapsePanel,
+  Input as AInput,
+  InputNumber as AInputNumber,
+  Select as ASelect,
+  Switch as ASwitch,
+} from 'ant-design-vue';
+import { ref } from 'vue';
+
+defineOptions({ name: 'DemoEditTableSlotLinkage' });
+
+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' },
+  { title: '产品名称', field: 'productName' },
+  { title: '版本', field: 'version' },
+  { title: '数量', field: 'quantity' },
+  { title: '单价(¥)', field: 'price' },
+  { title: '总价(¥)', field: 'total' },
+  { title: '启用', field: 'enabled' },
+  { title: '备注', field: 'remark' },
+  { type: 'action', title: '操作', width: 160 },
+];
+
+const productOptions = [
+  { 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 onProductChange = (row: any, value: any) => {
+  const hit = productOptions.find(o => `${o.value}` === `${value}`);
+  row.productName = hit?.label || '';
+  row.version = '';
+};
+
+const recalcTotal = (row: any) => {
+  const q = Number(row.quantity) || 0;
+  const p = Number(row.price) || 0;
+  row.total = Number((q * p).toFixed(2));
+};
+
+const add = () => {
+  const r: any = {};
+  columns.forEach(c => c.field && (r[c.field] = ''));
+  r.quantity = 1;
+  r.price = 0;
+  r.total = 0;
+  r.enabled = true;
+  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">
+    <div style="text-align: right; margin-bottom: 8px">
+      <YButton type="primary" @click="add">添 行</YButton>
+    </div>
+    <YEditTable v-model:data="data" :columns="columns" :action-config="actionConfig" addable @add="add">
+      <template #product="{ row }">
+        <a-select
+          v-model:value="row.product"
+          :options="productOptions"
+          :field-names="{ label: 'label', value: 'value' }"
+          show-search
+          allow-clear
+          style="width: 100%"
+          @change="val => onProductChange(row, val)"
+        />
+      </template>
+
+      <template #productName="{ row }">
+        <a-input v-model:value="row.productName" placeholder="选择产品后自动回填名称" />
+      </template>
+
+      <template #version="{ row }">
+        <a-select
+          v-model:value="row.version"
+          :options="productToVersions[row.product] || []"
+          :field-names="{ label: 'label', value: 'value' }"
+          show-search
+          allow-clear
+          style="width: 100%"
+        />
+      </template>
+
+      <template #quantity="{ row }">
+        <a-input-number
+          v-model:value="row.quantity"
+          :min="1"
+          style="width: 100%"
+          placeholder="数量"
+          @change="() => recalcTotal(row)"
+        />
+      </template>
+
+      <template #price="{ row }">
+        <a-input-number
+          v-model:value="row.price"
+          :min="0"
+          :step="1"
+          style="width: 100%"
+          placeholder="单价"
+          @change="() => recalcTotal(row)"
+        />
+      </template>
+
+      <template #total="{ row }">
+        <a-input-number v-model:value="row.total" :min="0" style="width: 100%" :disabled="true" />
+      </template>
+
+      <template #enabled="{ row }">
+        <a-switch v-model:checked="row.enabled" @change="checked => !checked && (row.remark = '')" />
+      </template>
+
+      <template #remark="{ row }">
+        <a-input v-model:value="row.remark" placeholder="启用时建议填写备注" />
+      </template>
+    </YEditTable>
+  </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/submit-view/index.vue

@@ -0,0 +1,107 @@
+<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 { getCurrentInstance, ref } from 'vue';
+
+defineOptions({ name: 'DemoEditTableSubmitView' });
+
+const data = ref<any[]>([
+  { name: '张三', status: '1', joinDate: '2024-10-01' },
+  { name: '李四', status: '0', joinDate: '2024-10-02' },
+]);
+
+const saved = ref<any[] | null>(null);
+
+const editRules: Record<string, any[]> = {
+  name: [{ required: true }],
+  status: [{ required: true }],
+};
+
+const columns: YEditTableColumn[] = [
+  { title: '姓名', field: 'name', component: 'form-item-input' },
+  {
+    title: '状态',
+    field: 'status',
+    component: 'form-item-select',
+    isTransform: true,
+    props: { fieldNames: { label: 'dictName', value: 'dictValue' } },
+  },
+  { title: '入职日期', field: 'joinDate', component: 'form-item-date', props: { format: 'YYYY-MM-DD' } },
+  { type: 'action', title: '操作', width: 160 },
+];
+
+const optionsMap = {
+  status: [
+    { 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 save = async () => {
+  const ins = getCurrentInstance() as any;
+  const tableRef = ins?.refs?.tableRef;
+  if (!tableRef) return (saved.value = JSON.parse(JSON.stringify(data.value)));
+  const { valid } = await tableRef.validate();
+  if (!valid) return alert('请先修复校验错误');
+  saved.value = JSON.parse(JSON.stringify(data.value));
+};
+
+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="save">保存</YButton>
+      <YButton style="margin-left: 8px" @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"
+    />
+    <a-collapse v-if="saved" style="margin-top: 12px">
+      <a-collapse-panel key="saved" 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(saved, null, 2) }}</pre>
+        </div>
+      </a-collapse-panel>
+    </a-collapse>
+  </div>
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/file-import/basic.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <YButton type="primary" @click="visible = true">导入</YButton>
+    <YFileImport
+      v-model:model-value="visible"
+      :loadings="loadings"
+      :file-type-list="['xls', 'xlsx', 'csv']"
+      @final-import="finalImport"
+      @download-template="downloadTemplate"
+      @export-error-data="exportErrorData"
+      @next-step="nextStep"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { YButton, YFileImport } from '@yss-ui/components';
+import { ref } from 'vue';
+
+const visible = ref(false);
+const loadings = ref<string[]>([]);
+
+function show(name: string) {
+  loadings.value = [...loadings.value, name];
+}
+function hide(name: string) {
+  loadings.value = loadings.value.filter(n => n !== name);
+}
+async function mockAsync(name: string) {
+  try {
+    show(name);
+    await new Promise(r => setTimeout(r, 800));
+  } finally {
+    hide(name);
+  }
+}
+
+async function finalImport({ loadingName, close }: any) {
+  await mockAsync(loadingName);
+  (window as any).$message?.success?.('导入成功');
+  close();
+}
+async function downloadTemplate({ loadingName }: any) {
+  await mockAsync(loadingName);
+  (window as any).$message?.success?.('下载成功');
+}
+async function exportErrorData({ loadingName }: any) {
+  await mockAsync(loadingName);
+  (window as any).$message?.success?.('下载成功');
+}
+function nextStep() {
+  // 这里可做额外校验或预检接口
+}
+</script>

package/template/.cursor/skills/yss-ui/assets/demos/file-import/formily.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <YssFormily :schema="schema" :scope="{ open }" />
+    <YFileImport v-model:model-value="visible" @final-import="finalImport" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { YFileImport, YssFormily } from '@yss-ui/components';
+import { ref } from 'vue';
+
+const visible = ref(false);
+const schema = {
+  type: 'object',
+  properties: {
+    actions: {
+      type: 'void',
+      'x-component': 'AutoButtonGroup',
+      'x-component-props': { align: 'left' },
+      properties: {
+        importBtn: {
+          type: 'void',
+          'x-component': 'YButton',
+          'x-content': '导入',
+          'x-component-props': {
+            type: 'primary',
+            onClick: '{{ open }}',
+          },
+        },
+      },
+    },
+  },
+};
+
+function open() {
+  visible.value = true;
+}
+function finalImport({ close }: any) {
+  (window as any).$message?.success?.('导入成功');
+  close();
+}
+</script>

package/template/.cursor/skills/yss-ui/assets/demos/file-import/multiple.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <YButton @click="visible = true">多文件导入</YButton>
+    <YFileImport
+      v-model:model-value="visible"
+      title="多文件导入"
+      :multiple="true"
+      :file-type-list="['csv']"
+      :import-result="{ successkey: '1', failkey: '0', success: 10, fail: 2, total: 12 }"
+      @final-import="finalImport"
+      @export-error-data="exportErrorData"
+    >
+      <template #footerRight>
+        <span style="color: rgb(0 0 0 / 45%); margin-left: 8px">示例：仅允许 .csv</span>
+      </template>
+    </YFileImport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { YButton, YFileImport } from '@yss-ui/components';
+import { ref } from 'vue';
+
+const visible = ref(false);
+
+async function finalImport() {
+  (window as any).$message?.success?.('导入成功');
+  visible.value = false;
+}
+async function exportErrorData() {
+  (window as any).$message?.success?.('下载成功');
+}
+</script>

package/template/.cursor/skills/yss-ui/assets/demos/file-import/result-slot.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <YButton type="primary" @click="visible = true">自定义结果插槽</YButton>
+    <YFileImport v-model:model-value="visible" :import-result="resultInfo">
+      <template #result="{ result }">
+        <div style="padding: 8px 0">
+          <strong>自定义结果：</strong>
+          <span>总计 {{ result.total }} 行，其中成功 {{ result.success }} 行，失败 {{ result.fail }} 行</span>
+        </div>
+      </template>
+      <template #footerLeft>
+        <YButton size="small" theme="warning" @click="mockAdjust">刷新结果</YButton>
+      </template>
+    </YFileImport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { YButton, YFileImport } from '@yss-ui/components';
+import { ref } from 'vue';
+
+const visible = ref(false);
+const resultInfo = ref({ successkey: 'ok', failkey: 'bad', success: 2, fail: 1, total: 3 });
+
+function mockAdjust() {
+  const s = Math.floor(Math.random() * 10) + 1;
+  const f = Math.floor(Math.random() * 5);
+  resultInfo.value = { successkey: 'ok', failkey: 'bad', success: s, fail: f, total: s + f } as any;
+}
+</script>

package/template/.cursor/skills/yss-ui/assets/demos/formily/actions.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <YssFormily ref="formRef" :schema="schema" />
+  </div>
+</template>
+<script setup lang="ts">
+import { YssFormily, type ISchema } from '@yss-ui/components';
+import { ref } from 'vue';
+
+const formRef = ref();
+
+const schema: ISchema = {
+  type: 'object',
+  properties: {
+    layout: {
+      type: 'void',
+      'x-component': 'FormLayout',
+      'x-component-props': { layout: 'horizontal', labelWidth: 90 },
+      properties: {
+        grid: {
+          type: 'void',
+          'x-component': 'FormGrid',
+          // 'x-component-props': { maxColumns: 3, minColumns: 3, columnGap: 16, rowGap: 0 },
+          properties: {
+            name: {
+              type: 'string',
+              title: '姓名',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+              'x-decorator-props': { gridSpan: 1 },
+            },
+            email: {
+              type: 'string',
+              title: '邮箱',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+              'x-decorator-props': { gridSpan: 1 },
+            },
+            phone: {
+              type: 'string',
+              title: '电话',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+              'x-decorator-props': { gridSpan: 1 },
+            },
+            actions: {
+              type: 'void',
+              'x-component': 'AutoButtonGroup',
+              'x-decorator-props': { gridSpan: 3 },
+              properties: {
+                submit: { type: 'void', 'x-component': 'Submit', 'x-content': '提交' },
+                reset: { type: 'void', 'x-component': 'Reset', 'x-content': '重置' },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+</script>