create-yss-spec 2.1.10 → 2.1.11

package/template/.cursor/skills/yss-ui/assets/demos/table/column-custom-search/style.less

@@ -0,0 +1,48 @@
+.demo-container {
+  padding: 20px;
+}
+
+.vxe-table-filter-header {
+  padding: 8px;
+  border-bottom: 1px solid var(--vxe-ui-border-color, #e8eaec);
+}
+
+.vxe-table-filter-body {
+  max-height: 240px;
+  overflow-y: auto;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.vxe-table-filter-option {
+  padding: 6px 12px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: var(--vxe-ui-layout-hover-background-color, #f5f7fa);
+  }
+
+  .filter-option-text {
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+
+  /* 让复选框标签占满一行并可缩小，便于文本省略号生效 */
+  .ant-checkbox-wrapper {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  /* 文本容器允许收缩，触发省略 */
+  .ant-checkbox-wrapper > span:last-child {
+    flex: 1;
+    min-width: 0;
+  }
+}

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

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { YTable } from '@yss-ui/components';
+import { ref } from 'vue';
+
+defineOptions({ name: 'DemoTableDrag' });
+
+const columns = [
+  { type: 'seq' as const, title: '序号', width: 60, align: 'center' as const },
+  { title: '姓名', field: 'name' },
+  { title: '年龄', field: 'age' },
+];
+
+const tableData = ref([
+  { _X_ROW_KEY: '1', name: 'Name1', age: 23 },
+  { _X_ROW_KEY: '2', name: 'Name2', age: 22 },
+  { _X_ROW_KEY: '3', name: 'Name3', age: 18 },
+  { _X_ROW_KEY: '4', name: 'Name4', age: 20 },
+]);
+
+const handleDragEnd = (rows: any[]) => {
+  // eslint-disable-next-line no-console
+  console.log(
+    '拖拽后顺序：',
+    rows.map(r => r.name)
+  );
+};
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <YTable
+      v-model:data="tableData"
+      :columns="columns"
+      :row-dragable="true"
+      :row-config="{ drag: true }"
+      :pageable="false"
+      @row-dragend="handleDragEnd"
+    />
+  </div>
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/table/expand/action-expand.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { message } from 'ant-design-vue';
+import { YButton, YTable, type YTableColumn } from '@yss-ui/components';
+
+defineOptions({ name: 'DemoTableActionExpand' });
+
+const yTableRef = ref();
+
+const columns: YTableColumn[] = [
+  { type: 'expand', width: 1 }, // 必不可少的开启展开行内置核心列
+  { type: 'seq', width: 60, title: '序号', align: 'center' },
+  { title: '任务名称', field: 'name' },
+  { title: '状态', field: 'status' },
+  { title: '执行人', field: 'executor' },
+  { title: '操作', field: 'action', width: 140 },
+];
+
+// 模拟表格数据
+interface TaskItem {
+  id: string;
+  name: string;
+  status: string;
+  executor: string;
+  _btnLoading?: boolean; // 新增：控制按钮 Loading
+  details?: any[];
+}
+
+const tableData = ref<TaskItem[]>([
+  { id: '1', name: '数据同步任务', status: '成功', executor: 'daoming' },
+  { id: '2', name: '报表生成任务', status: '失败', executor: 'yancong' },
+  { id: '3', name: '日志清理任务', status: '待执行', executor: 'zhangsan' },
+]);
+
+// 操作列的自定义事件
+const handleLogClick = (row: any) => {
+  message.info(`查看任务日志: ${row.name}`);
+};
+
+const handleStepClick = async (row: any) => {
+  const tableInst = yTableRef.value?.getTableInstance();
+  if (!tableInst) return;
+
+  // 如果已经展开了，直接切换折叠状态
+  if (tableInst.isExpandByRow(row)) {
+    tableInst.setRowExpand(row, false);
+    return;
+  }
+
+  // 没展开且已有数据，直接展开
+  if (row.details && row.details.length > 0) {
+    tableInst.setRowExpand(row, true);
+    return;
+  }
+
+  const target = tableData.value.find(item => item.id === row.id);
+  if (target) {
+    target._btnLoading = true;
+    try {
+      const res = await fetchStepDetails(target.id);
+      target.details = res || [];
+      // 请求完成，展开行
+      tableInst.setRowExpand(row, true);
+    } catch (e) {
+      console.error(e);
+      target.details = [];
+    } finally {
+      target._btnLoading = false;
+    }
+  }
+};
+
+// 模拟异步获取步骤详情的方法
+const fetchStepDetails = (id: string): Promise<any[]> => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      // 模拟没有数据的情况
+      if (id === '1') {
+        resolve([]);
+      } else {
+        resolve([
+          { step: '步骤一：数据抽取', time: '2023-11-20 10:00:00', status: '成功' },
+          { step: '步骤二：数据清洗', time: '2023-11-20 10:05:00', status: '成功' },
+          { step: '步骤三：数据入库', time: '2023-11-20 10:10:00', status: '正在执行' },
+        ]);
+      }
+    }, 2000); // 延长到 2000ms 更容易看清加载状态
+  });
+};
+
+// 展开行触发事件 (仅用于记录或额外控制，因为请求已在按钮里处理)
+const onToggleRowExpand = async () => {
+  // 置空即可，不需要在这里做请求
+};
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <YTable
+      ref="yTableRef"
+      :columns="columns"
+      :data="tableData"
+      :pageable="false"
+      :row-config="{ keyField: 'id' }"
+      :auto-flex-column="false"
+      :expand-config="{ accordion: true, iconOpen: ' ', iconClose: ' ' }"
+      @toggle-row-expand="onToggleRowExpand"
+    >
+      <!-- 使用自定义操作列插槽接管按钮渲染 -->
+      <template #action="{ row }">
+        <YButton type="link" size="small" @click="handleLogClick(row)">日志</YButton>
+        <YButton
+          type="link"
+          size="small"
+          :loading="tableData.find(item => item.id === row.id)?._btnLoading"
+          @click="handleStepClick(row)"
+        >
+          步骤
+        </YButton>
+      </template>
+
+      <!-- hide-default-icon 通过将 iconOpen 和 iconClose 设为空字符串实现 -->
+      <template #expand-row="{ row }">
+        <div style="padding: 16px 24px; background: #fafafa">
+          <YTable
+            :columns="[
+              { type: 'seq', width: 60, title: '序号', align: 'center' },
+              { title: '执行步骤', field: 'step' },
+              { title: '执行时间', field: 'time' },
+              { title: '状态', field: 'status' },
+            ]"
+            :data="tableData.find(item => item.id === row.id)?.details || []"
+            :pageable="false"
+            :auto-flex-column="false"
+          />
+        </div>
+      </template>
+    </YTable>
+  </div>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { YTable } from '@yss-ui/components';
+import { ref } from 'vue';
+
+defineOptions({ name: 'DemoTableExpand' });
+
+const columns: any[] = [
+  { type: 'seq' as const, width: 60, title: '序号', align: 'center' as const },
+  { type: 'expand' as const, width: 60, title: '展开' },
+  { title: '姓名', field: 'name' },
+  { title: '年龄', field: 'age' },
+  { title: '性别', field: 'sex' },
+];
+
+const tableData = ref([
+  { _X_ROW_KEY: '1', name: '张三', sex: '男', age: 28 },
+  { _X_ROW_KEY: '2', name: '李四', sex: '男', age: 22 },
+]);
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <YTable :columns="columns" :data="tableData" :pageable="false" :expand-config="{ accordion: true }">
+      <template #expand-row="{ row }">
+        <div style="padding: 12px 16px; background: #fafafa">
+          <div>姓名：{{ row.name }}</div>
+          <div>年龄：{{ row.age }}</div>
+          <div>性别：{{ row.sex }}</div>
+        </div>
+      </template>
+    </YTable>
+  </div>
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/table/filter-async/index.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { YTable, type YTableColumn } from '@yss-ui/components';
+import { onMounted, ref } from 'vue';
+
+defineOptions({ name: 'DemoTableFilterAsync' });
+
+type Row = { _X_ROW_KEY: string; name: string; age: number; sex: '0' | '1'; city: string };
+
+const tableData = ref<Row[]>([
+  { _X_ROW_KEY: '1', name: 'name1', age: 18, sex: '1', city: 'bj' },
+  { _X_ROW_KEY: '2', name: 'name2', age: 22, sex: '0', city: 'sh' },
+  { _X_ROW_KEY: '3', name: 'tom', age: 25, sex: '1', city: 'gz' },
+  { _X_ROW_KEY: '4', name: 'jerry', age: 19, sex: '0', city: 'sz' },
+]);
+
+const tableRef = ref<any>();
+
+const columns = ref<YTableColumn[]>([
+  { title: '姓名', field: 'name', filterable: true, filters: [{ data: '' }] },
+  {
+    title: '年龄≥',
+    field: 'age',
+    filterable: true,
+    filterMultiple: true,
+    filters: [
+      { label: '全部', value: '' },
+      { label: '18-25', value: '18-25' },
+      { label: '26-35', value: '26-35' },
+      { label: '36-45', value: '36-45' },
+    ],
+    filterMethod: ({ option, cellValue }: any) => {
+      if (!option?.value) return true;
+      const [min, max] = option.value.split('-').map(Number);
+      return cellValue >= min && cellValue <= max;
+    },
+  },
+  {
+    title: '城市(接口 filters)',
+    field: 'city',
+    isTransform: true,
+    filterable: true,
+    filterMultiple: true,
+    filters: [],
+  },
+]);
+
+onMounted(() => {
+  setTimeout(() => {
+    const remoteFilters = [
+      { label: '北京', value: 'bj' },
+      { label: '上海', value: 'sh' },
+      { label: '广州', value: 'gz' },
+      { label: '深圳', value: 'sz' },
+    ];
+    columns.value = columns.value.map(c => (c.field === 'city' ? { ...c, filters: remoteFilters } : c));
+  }, 300);
+});
+
+const optionsMap = {
+  city: [
+    { cityName: '北京', cityCode: 'bj' },
+    { cityName: '上海', cityCode: 'sh' },
+    { cityName: '广州', cityCode: 'gz' },
+    { cityName: '深圳', cityCode: 'sz' },
+  ],
+};
+
+const markActive = (option: any) => {
+  const $table = tableRef.value?.getTableInstance?.();
+  if ($table) $table.updateFilterOptionStatus(option, !!option.data);
+};
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <YTable ref="tableRef" :columns="columns" :data="tableData" :pageable="false" :options-map="optionsMap">
+      <template #name-filter="{ column }">
+        <div style="padding: 8px 12px; width: 220px">
+          <input
+            v-for="(option, index) in column.filters"
+            :key="index"
+            v-model="option.data"
+            placeholder="输入姓名关键字"
+            style="width: 100%; height: 28px; padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px"
+            @input="markActive(option)"
+          />
+        </div>
+      </template>
+    </YTable>
+  </div>
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/table/filter-auto/index.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { YTable, type YTableColumn } from '@yss-ui/components';
+import { ref } from 'vue';
+
+defineOptions({ name: 'DemoTableFilterAuto' });
+
+type Row = { _X_ROW_KEY: string; name: string; age: number; sex: '0' | '1'; status: string };
+
+const tableData = ref<Row[]>([
+  { _X_ROW_KEY: '1', name: 'name1', age: 18, sex: '1', status: 'enabled' },
+  { _X_ROW_KEY: '2', name: 'name2', age: 22, sex: '0', status: 'disabled' },
+  { _X_ROW_KEY: '3', name: 'tom', age: 25, sex: '1', status: 'enabled' },
+  { _X_ROW_KEY: '4', name: 'jerry', age: 19, sex: '0', status: 'disabled' },
+]);
+
+const columns = ref<YTableColumn[]>([
+  {
+    title: '姓名',
+    field: 'name',
+    filterable: true,
+    filters: [{ data: '' }],
+    filterMethod: ({ option, cellValue }: any) => {
+      const kw = String(option?.data || '').trim();
+      if (!kw) return true;
+      return String(cellValue || '')
+        .toLowerCase()
+        .includes(kw.toLowerCase());
+    },
+  },
+  {
+    title: '年龄≥',
+    field: 'age',
+    filterable: true,
+    filters: [{ data: '' }],
+    filterMethod: ({ option, cellValue }: any) => {
+      const v = Number(option?.data);
+      if (!option?.data && option?.data !== 0) return true;
+      return Number(cellValue) >= v;
+    },
+  },
+  {
+    title: '状态',
+    field: 'status',
+    filterable: true,
+    filterMultiple: true,
+    filters: [
+      { label: '启用', value: 'enabled' },
+      { label: '禁用', value: 'disabled' },
+    ],
+    filterMethod: ({ values, cellValue }: any) => {
+      if (!values || values.length === 0) return true;
+      return values.includes(String(cellValue));
+    },
+  },
+]);
+
+const optionsMap = {};
+
+const tableRef = ref<any>();
+const markActive = (option: any) => {
+  const $table = tableRef.value?.getTableInstance?.();
+  if ($table) $table.updateFilterOptionStatus(option, !!option.data);
+};
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <YTable ref="tableRef" :columns="columns" :data="tableData" :pageable="false" :options-map="optionsMap">
+      <template #name-filter="{ column }">
+        <div style="padding: 8px 12px; width: 220px">
+          <input
+            v-for="(option, index) in column.filters"
+            :key="index"
+            v-model="option.data"
+            :placeholder="column.meta?.placeholder || '请输入关键词'"
+            style="width: 100%; height: 28px; padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px"
+            @input="markActive(option)"
+          />
+        </div>
+      </template>
+
+      <template #age-filter="{ column }">
+        <div style="padding: 8px 12px; width: 220px">
+          <input
+            v-for="(option, index) in column.filters"
+            :key="index"
+            v-model="option.data"
+            type="number"
+            :placeholder="column.meta?.placeholder || '请输入数值'"
+            style="width: 100%; height: 28px; padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px"
+            @input="markActive(option)"
+          />
+        </div>
+      </template>
+    </YTable>
+  </div>
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/table/filter-custom/index.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { YTable, type YTableColumn } from '@yss-ui/components';
+import { ref } from 'vue';
+
+defineOptions({ name: 'DemoTableFilterCustom' });
+
+const tableData = ref([
+  { _X_ROW_KEY: '1', name: 'Alice', email: 'alice@test.com' },
+  { _X_ROW_KEY: '2', name: 'Bob', email: 'bob@test.com' },
+  { _X_ROW_KEY: '3', name: 'Cindy', email: 'cindy@test.com' },
+  { _X_ROW_KEY: '4', name: 'David', email: 'david@test.com' },
+]);
+
+const tableRef = ref<any>();
+
+const columns = ref<YTableColumn[]>([
+  {
+    field: 'name',
+    title: '姓名(自定义筛选)',
+    filterable: true,
+    filters: [{ data: '' }],
+    filterMethod: ({ option, cellValue }: any) => {
+      const kw = String(option?.data || '').trim();
+      if (!kw) return true;
+      return String(cellValue || '')
+        .toLowerCase()
+        .includes(kw.toLowerCase());
+    },
+  },
+  {
+    field: 'email',
+    title: '邮箱',
+    filterable: true,
+    filters: [{ data: '' }],
+    filterMethod: ({ option, cellValue }: any) => {
+      const kw = String(option?.data || '').trim();
+      if (!kw) return true;
+      return String(cellValue || '')
+        .toLowerCase()
+        .includes(kw.toLowerCase());
+    },
+  },
+]);
+
+const changeFilterEvent = (option: any) => {
+  const $table = tableRef.value?.getTableInstance?.();
+  if ($table) {
+    $table.updateFilterOptionStatus(option, !!option.data);
+  }
+};
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <YTable ref="tableRef" :columns="columns" :data="tableData" :pageable="false">
+      <template #filter="{ column }">
+        <div style="padding: 8px 12px; width: 220px">
+          <input
+            v-for="(option, index) in column.filters"
+            :key="index"
+            v-model="option.data"
+            placeholder="输入姓名关键字"
+            style="width: 100%; height: 28px; padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px"
+            @input="changeFilterEvent(option)"
+          />
+        </div>
+      </template>
+    </YTable>
+  </div>
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/table/filter-local/index.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { YTable, type YTableColumn } from '@yss-ui/components';
+import { ref } from 'vue';
+
+defineOptions({ name: 'DemoTableFilterLocal' });
+
+const tableData = ref([
+  { _X_ROW_KEY: '1', name_item_nm: 'name1', age: 18, sex: '1' },
+  { _X_ROW_KEY: '2', name_item_nm: 'name2', age: 22, sex: '0' },
+  { _X_ROW_KEY: '3', name_item_nm: 'tom', age: 25, sex: '1' },
+  { _X_ROW_KEY: '4', name_item_nm: 'jerry', age: 19, sex: '0' },
+]);
+
+const tableRef = ref<any>();
+
+const columns = ref<YTableColumn[]>([
+  {
+    title: '姓名',
+    field: 'name_item_nm',
+    filterable: true,
+    filters: [{ data: '' }],
+    filterMethod: ({ option, cellValue }: any) => {
+      const keyword = option?.data ?? '';
+      if (!keyword) return true;
+      return String(cellValue || '')
+        .toLowerCase()
+        .includes(String(keyword).toLowerCase());
+    },
+  },
+  {
+    title: '年龄≥',
+    field: 'age',
+    filterable: true,
+    filters: [{ data: '' }],
+    filterMethod: ({ option, cellValue }: any) => {
+      const v = Number(option?.data);
+      if (!option?.data && option?.data !== 0) return true;
+      return Number(cellValue) >= v;
+    },
+  },
+  {
+    title: '性别',
+    field: 'sex',
+    isTransform: true,
+    filterable: true,
+    filterMultiple: true,
+    filters: [
+      { label: '男', value: '1' },
+      { label: '女', value: '0' },
+    ],
+    filterMethod: ({ values, cellValue }: any) => {
+      if (!values || values.length === 0) return true;
+      return values.includes(String(cellValue));
+    },
+    props: { fieldNames: { label: 'dictName', value: 'dictValue' } },
+  },
+]);
+
+const optionsMap = {
+  sex: [
+    { dictName: '男', dictValue: '1' },
+    { dictName: '女', dictValue: '0' },
+  ],
+};
+
+const changeFilterEvent = (option: any) => {
+  const $table = tableRef.value?.getTableInstance?.();
+  if ($table) $table.updateFilterOptionStatus(option, !!option.data);
+};
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <YTable
+      ref="tableRef"
+      :columns="columns"
+      :data="tableData"
+      :pageable="false"
+      :options-map="optionsMap"
+      :filter-config="{ iconNone: 'vxe-icon-search', iconMatch: 'vxe-icon-search' }"
+    >
+      <template #name_item_nm-filter="{ column }">
+        <div style="padding: 8px 12px; width: 220px">
+          <input
+            v-for="(option, index) in column.filters"
+            :key="index"
+            v-model="option.data"
+            placeholder="输入姓名关键字"
+            style="width: 100%; height: 28px; padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px"
+            @input="changeFilterEvent(option)"
+          />
+        </div>
+      </template>
+
+      <template #age-filter="{ column }">
+        <div style="padding: 8px 12px; width: 220px">
+          <input
+            v-for="(option, index) in column.filters"
+            :key="index"
+            v-model="option.data"
+            type="number"
+            placeholder="输入最小年龄"
+            style="width: 100%; height: 28px; padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px"
+            @input="changeFilterEvent(option)"
+          />
+        </div>
+      </template>
+    </YTable>
+  </div>
+</template>
+
+<style scoped></style>