create-yss-spec 2.1.10 → 2.1.11

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

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { YTable, type YTableColumn } from '@yss-ui/components';
+import { ref } from 'vue';
+
+defineOptions({ name: 'DemoTableFilterMixed' });
+
+type Row = { _X_ROW_KEY: string; name: string; age: number; sex: '0' | '1' };
+
+const source: any = [
+  { _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' },
+  { _X_ROW_KEY: '5', name: 'name5', age: 20, sex: '1', city: 'bj' },
+];
+
+const tableData = ref<Row[]>([...source]);
+const tableRef = ref<any>();
+
+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: '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' } },
+  },
+  {
+    title: '城市',
+    field: 'city',
+    isTransform: true,
+    filterable: true,
+    filterMultiple: true,
+    filters: [
+      { label: '北京', value: 'bj' },
+      { label: '上海', value: 'sh' },
+      { label: '广州', value: 'gz' },
+      { label: '深圳', value: 'sz' },
+    ],
+    filterMethod: ({ values, cellValue }: any) => {
+      if (!values || values.length === 0) return true;
+      return values.includes(String(cellValue));
+    },
+    props: { fieldNames: { label: 'cityName', value: 'cityCode' } },
+  },
+]);
+
+const optionsMap = {
+  sex: [
+    { dictName: '男', dictValue: '1' },
+    { dictName: '女', dictValue: '0' },
+  ],
+  city: [
+    { cityName: '北京', cityCode: 'bj' },
+    { cityName: '上海', cityCode: 'sh' },
+    { cityName: '广州', cityCode: 'gz' },
+    { cityName: '深圳', cityCode: 'sz' },
+  ],
+};
+
+const onRemoteIfNeeded = () => {};
+
+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"
+      @filter-change="onRemoteIfNeeded"
+    >
+      <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>
+
+      <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="markActive(option)"
+          />
+        </div>
+      </template>
+    </YTable>
+  </div>
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/table/filter-remote/constant.ts

@@ -0,0 +1,129 @@
+import type { YTableColumn } from '@yss-ui/components';
+
+/**
+ * 用户数据类型
+ */
+export interface UserData {
+  _X_ROW_KEY: string;
+  name: string;
+  age: number;
+  gender: string;
+  status: string;
+  department: string;
+}
+
+/**
+ * 查询参数类型
+ */
+export interface QueryParams {
+  current: number;
+  pageSize: number;
+  name?: string;
+  minAge?: number;
+  gender?: string;
+  status?: string[];
+}
+
+/**
+ * API 响应类型
+ */
+export interface ApiResponse {
+  list: UserData[];
+  total: number;
+}
+
+/**
+ * 表格列配置
+ */
+export const tableColumns: YTableColumn[] = [
+  {
+    title: '姓名',
+    field: 'name',
+    width: 120,
+    filterable: true,
+    filters: [{ data: '' }],
+    // ✅ 关键：远程筛选必须返回 true，禁用本地筛选，让数据直接显示
+    filterMethod: () => true,
+  },
+  {
+    title: '年龄',
+    field: 'age',
+    width: 100,
+    filterable: true,
+    filters: [{ data: '' }],
+    // ✅ 关键：远程筛选必须返回 true，禁用本地筛选，让数据直接显示
+    filterMethod: () => true,
+  },
+  {
+    title: '性别',
+    field: 'gender',
+    width: 100,
+    isTransform: true,
+    filterable: true,
+    filterMultiple: false,
+    filters: [
+      { label: '男', value: 'male' },
+      { label: '女', value: 'female' },
+    ],
+    props: { fieldNames: { label: 'label', value: 'value' } },
+    // ✅ 关键：远程筛选必须返回 true，禁用本地筛选，让数据直接显示
+    filterMethod: () => true,
+  },
+  {
+    title: '状态',
+    field: 'status',
+    width: 120,
+    isTransform: true,
+    filterable: true,
+    filterMultiple: true,
+    filters: [
+      { label: '在职', value: 'active' },
+      { label: '离职', value: 'inactive' },
+      { label: '试用期', value: 'probation' },
+    ],
+    props: { fieldNames: { label: 'label', value: 'value' } },
+    // ✅ 关键：远程筛选必须返回 true，禁用本地筛选，让数据直接显示
+    filterMethod: () => true,
+  },
+  {
+    title: '部门',
+    field: 'department',
+    minWidth: 150,
+  },
+];
+
+/**
+ * 字典映射数据
+ */
+export const optionsMap = {
+  gender: [
+    { label: '男', value: 'male' },
+    { label: '女', value: 'female' },
+  ],
+  status: [
+    { label: '在职', value: 'active' },
+    { label: '离职', value: 'inactive' },
+    { label: '试用期', value: 'probation' },
+  ],
+};
+
+/**
+ * 生成模拟用户数据
+ * @param count 数据条数
+ * @returns 用户数据数组
+ */
+export const generateMockData = (count: number): UserData[] => {
+  const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十', '郑十一', '刘十二'];
+  const genders = ['male', 'female'];
+  const statuses = ['active', 'inactive', 'probation'];
+  const departments = ['技术部', '产品部', '运营部', '市场部', '人力资源部'];
+
+  return Array.from({ length: count }, (_, i) => ({
+    _X_ROW_KEY: String(i + 1),
+    name: `${names[i % names.length]}${Math.floor(i / names.length) + 1}`,
+    age: Math.floor(Math.random() * 30) + 20,
+    gender: genders[i % 2],
+    status: statuses[i % 3],
+    department: departments[i % departments.length],
+  }));
+};

package/template/.cursor/skills/yss-ui/assets/demos/table/filter-remote/hooks/useTableData.ts

@@ -0,0 +1,186 @@
+import { nextTick, ref } from 'vue';
+import type { Ref } from 'vue';
+import type { YTablePagination } from '@yss-ui/components';
+import type { UserData, QueryParams, ApiResponse } from '../constant';
+import { generateMockData } from '../constant';
+
+/**
+ * 表格数据管理 Hook
+ * @param tableRef 表格组件引用
+ */
+export const useTableData = (tableRef: Ref<any>) => {
+  /** 表格数据 */
+  const tableData = ref<UserData[]>([]);
+
+  /** 加载状态 */
+  const loading = ref(false);
+
+  /** 分页配置 */
+  const pagination = ref<YTablePagination>({
+    current: 1,
+    pageSize: 20,
+    total: 0,
+    remote: true,
+    showSizeChanger: true,
+    showQuickJumper: true,
+    size: 'small',
+    pageSizeOptions: ['10', '20', '50', '100'],
+  });
+
+  /** 筛选参数 */
+  const queryParams = ref<Omit<QueryParams, 'current' | 'pageSize'>>({});
+
+  /** 全量模拟数据（模拟后端数据库） */
+  const allMockData = generateMockData(156);
+
+  /**
+   * 模拟后端 API 请求
+   * @param params 查询参数
+   * @returns API 响应数据
+   */
+  const mockApiRequest = async (params: QueryParams): Promise<ApiResponse> => {
+    // 模拟网络延迟
+    await new Promise(resolve => setTimeout(resolve, 500));
+
+    // 筛选数据
+    let filteredData = [...allMockData];
+
+    // 姓名筛选（模糊匹配）
+    if (params.name) {
+      filteredData = filteredData.filter(item => item.name.includes(params.name!));
+    }
+
+    // 年龄筛选（大于等于）
+    if (params.minAge !== undefined && params.minAge !== null) {
+      filteredData = filteredData.filter(item => item.age >= params.minAge!);
+    }
+
+    // 性别筛选（单选）
+    if (params.gender) {
+      filteredData = filteredData.filter(item => item.gender === params.gender);
+    }
+
+    // 状态筛选（多选）
+    if (params.status?.length) {
+      filteredData = filteredData.filter(item => params.status!.includes(item.status));
+    }
+
+    const total = filteredData.length;
+
+    // 分页处理
+    const start = (params.current - 1) * params.pageSize;
+    const end = start + params.pageSize;
+    const list = filteredData.slice(start, end);
+
+    return { list, total };
+  };
+
+  /**
+   * 获取表格数据
+   */
+  const fetchTableData = async () => {
+    loading.value = true;
+    try {
+      const params: QueryParams = {
+        current: pagination.value.current!,
+        pageSize: pagination.value.pageSize!,
+        ...queryParams.value,
+      };
+
+      const res = await mockApiRequest(params);
+
+      tableData.value = res.list;
+      pagination.value.total = res.total;
+
+      // ✅ 关键修复：等待 DOM 更新后强制刷新表格
+      // 在远程筛选+远程分页模式下，vxe-table 不会自动处理数据更新
+      // 需要先等待 Vue 更新 DOM，然后手动触发表格重新渲染
+      await nextTick();
+      const $table = tableRef.value?.getTableInstance?.();
+      if ($table) {
+        // 方案组合：先重新计算，再更新数据，确保表格完全刷新
+        await $table.recalculate(true);
+        await nextTick();
+        await $table.updateData();
+      }
+    } catch (error) {
+      console.error('获取数据失败:', error);
+      tableData.value = [];
+      pagination.value.total = 0;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  /**
+   * 处理筛选条件变化
+   * @param params 筛选参数
+   */
+  const handleFilterChange = (params: any) => {
+    const { column, values, datas } = params || {};
+    const field = column?.field;
+
+    if (!field) return;
+
+    // 姓名筛选（输入框）
+    if (field === 'name') {
+      const [keyword] = datas || [];
+      queryParams.value.name = keyword || undefined;
+    }
+
+    // 年龄筛选（输入框）
+    if (field === 'age') {
+      const [minAge] = datas || [];
+      queryParams.value.minAge = minAge ? Number(minAge) : undefined;
+    }
+
+    // 性别筛选（单选）
+    if (field === 'gender') {
+      const [selectedValue] = values || [];
+      queryParams.value.gender = selectedValue || undefined;
+    }
+
+    // 状态筛选（多选）
+    if (field === 'status') {
+      queryParams.value.status = values?.length ? values : undefined;
+    }
+
+    // 筛选条件变化时，重置到第一页
+    pagination.value.current = 1;
+
+    // 重新获取数据
+    fetchTableData();
+  };
+
+  /**
+   * 处理分页变化
+   * @param pageInfo 分页信息
+   */
+  const handlePageChange = (pageInfo: { current: number; pageSize: number }) => {
+    pagination.value.current = pageInfo.current;
+    pagination.value.pageSize = pageInfo.pageSize;
+    fetchTableData();
+  };
+
+  /**
+   * 更新筛选选项状态（用于自定义筛选输入框）
+   * @param option 筛选选项
+   */
+  const updateFilterStatus = (option: any) => {
+    const $table = tableRef.value?.getTableInstance?.();
+    if ($table) {
+      $table.updateFilterOptionStatus(option, !!option.data);
+    }
+  };
+
+  return {
+    tableData,
+    loading,
+    pagination,
+    queryParams,
+    fetchTableData,
+    handleFilterChange,
+    handlePageChange,
+    updateFilterStatus,
+  };
+};

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

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { YTable } from '@yss-ui/components';
+import { tableColumns, optionsMap } from './constant';
+import { useTableData } from './hooks/useTableData';
+
+defineOptions({ name: 'DemoTableFilterRemote' });
+
+const tableRef = ref();
+
+// 使用 hook 管理表格数据和逻辑（传入 tableRef 用于手动刷新表格）
+const { tableData, loading, pagination, fetchTableData, handleFilterChange, handlePageChange, updateFilterStatus } =
+  useTableData(tableRef);
+
+// 组件挂载时加载数据
+onMounted(() => {
+  fetchTableData();
+});
+
+/**
+ * 处理自定义筛选输入框变化（用于更新筛选图标状态）
+ */
+const changeFilterEvent = (option: any) => {
+  updateFilterStatus(option);
+};
+</script>
+
+<template>
+  <div style="padding: 12px">
+    <YTable
+      ref="tableRef"
+      :columns="tableColumns"
+      :data="tableData"
+      :loading="loading"
+      :options-map="optionsMap"
+      pageable
+      :pagination="pagination"
+      @filter-change="handleFilterChange"
+      @page-change="handlePageChange"
+    >
+      <!-- 姓名筛选插槽（输入框） -->
+      <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="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>

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

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { YTable, type YTableColumn } from '@yss-ui/components';
+import { reactive, ref } from 'vue';
+import './style.less';
+
+defineOptions({ name: 'DemoTableGroupHeader' });
+
+const columns = reactive<YTableColumn[]>([
+  { type: 'seq', title: '序号', field: 'seq', width: 60, align: 'center' },
+  {
+    title: '人员信息',
+    align: 'center',
+    field: 'personInfo',
+    headerAlign: 'center',
+    children: [
+      { field: 'name', title: '姓名', width: 120 },
+      { field: 'sex', title: '性别', width: 80 },
+    ],
+  },
+  {
+    title: '位置信息',
+    field: 'personInfo111',
+    children: [
+      { field: 'province', title: '省份', minWidth: 120 },
+      { field: 'city', title: '城市', minWidth: 120 },
+      { field: 'address', title: '地址', minWidth: 180 },
+    ],
+  },
+  { field: 'age', title: '年龄', width: 80, align: 'center' },
+]);
+
+const tableData = ref(
+  Array.from({ length: 8 }).map((_, i) => ({
+    name: `测试${i + 1}`,
+    sex: i % 2 ? '女' : '男',
+    age: 20 + i,
+    province: '广东',
+    city: i % 2 ? '广州' : '深圳',
+    address: '天河区某某路 88 号',
+  }))
+);
+
+// 事件与方法示例
+const tableRef = ref<InstanceType<typeof YTable>>();
+const groupClickCount = ref(0);
+const onGroupAction = () => {
+  groupClickCount.value += 1;
+};
+</script>
+
+<template>
+  <div class="demo-container">
+    <YTable
+      id="demo-basic-ytable1111"
+      ref="tableRef"
+      :data="tableData"
+      :columns="columns"
+      :border="true"
+      :toolbar-config="{ custom: true }"
+      :custom-config="{ storage: true, immediate: true }"
+      :column-config="{ drag: true, useKey: true }"
+      :column-drag-config="{ isPeerDrag: true, isCrossDrag: true, isToChildDrag: true }"
+    >
+      <!-- 自定义分组表头内容（示例：仅定制“位置信息”分组） -->
+      <template #group-header="{ column }">
+        <div v-if="column.title === '位置信息'" class="group-header-slot">
+          <span>📍 位置信息(自定义插槽)</span>
+          <a class="link" @click.stop="onGroupAction">点击我({{ groupClickCount }})</a>
+        </div>
+        <span v-else>{{ column.title }}</span>
+      </template>
+    </YTable>
+  </div>
+</template>
+
+<style scoped>
+.group-header-slot {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+}
+.link {
+  color: var(--primary-color, #3371ff);
+  cursor: pointer;
+}
+</style>

package/template/.cursor/skills/yss-ui/assets/demos/table/group-header/style.less

@@ -0,0 +1,3 @@
+.demo-container {
+  padding: 20px;
+}

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { YTable, type YTableColumn } from '@yss-ui/components';
+import { reactive } from 'vue';
+import './style.less';
+
+defineOptions({ name: 'DemoTableHeaderHeight' });
+
+const columns = reactive<YTableColumn[]>([
+  { type: 'seq', title: '序号', width: 60, align: 'center' },
+  { field: 'name', title: '姓名', width: 160 },
+  { field: 'role', title: '角色', width: 140 },
+  { field: 'status', title: '状态', width: 100, align: 'center' },
+]);
+
+const tableData = [
+  { name: '张三', role: '前端', status: 1 },
+  { name: '李四', role: '后端', status: 0 },
+  { name: '王五', role: '产品', status: 1 },
+];
+</script>
+
+<template>
+  <div class="demo-container">
+    <YTable :data="tableData" :columns="columns" :cell-config="{ height: 56 }" :header-height="42" />
+  </div>
+  <div class="desc">数据行高 56px，表头高 46px（互不影响）。</div>
+</template>
+
+<style scoped></style>

package/template/.cursor/skills/yss-ui/assets/demos/table/header-height/style.less

@@ -0,0 +1,9 @@
+.demo-container {
+  padding: 20px;
+}
+
+.desc {
+  margin-top: 8px;
+  color: rgb(0 0 0 / 45%);
+  font-size: 12px;
+}