create-yss-spec 3.0.0 → 3.1.0

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

@@ -1,142 +0,0 @@
-<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/.hermes/skills/yss-ui/assets/demos/table/filter-remote/constant.ts

@@ -1,129 +0,0 @@
-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/.hermes/skills/yss-ui/assets/demos/table/filter-remote/hooks/useTableData.ts

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

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

@@ -1,86 +0,0 @@
-<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/.hermes/skills/yss-ui/assets/demos/table/group-header/style.less

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

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

@@ -1,29 +0,0 @@
-<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/.hermes/skills/yss-ui/assets/demos/table/header-height/style.less

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