create-yss-spec 2.1.10 → 2.1.13

package/template/.cursor/skills/yss-ui/assets/demos/table/basic/hooks/useBasicTable.ts

@@ -0,0 +1,205 @@
+import { type YTableActionConfig, type YTableColumn } from '@yss-ui/components';
+import { reactive, ref, type Ref } from 'vue';
+
+export interface UseBasicTableReturn {
+  loading: Ref<boolean>;
+  pagination: Ref<{
+    current: number;
+    pageSize: number;
+    total: number;
+    showSizeChanger: boolean;
+    showQuickJumper: boolean;
+    pageSizeOptions: string[];
+  }>;
+  columns: YTableColumn[];
+  actionConfig: YTableActionConfig;
+  columnsWithAction: YTableColumn[];
+  tableData: Ref<any[]>;
+  handleCellClick: (params: any) => void;
+  handleCurrentRowChange: (params: any) => void;
+  handlePageChange: (payload: any) => void;
+  onCreate: () => void;
+  onBatch: () => void;
+  onView: (row: any) => void;
+  onEdit: (row: any) => void;
+  onDelete: (row: any) => void;
+}
+
+/**
+ * Basic 表格 Demo 逻辑
+ * @returns Demo 所需的响应式状态与方法
+ */
+export const useBasicTable = (): UseBasicTableReturn => {
+  const loading = ref(false);
+  const pagination = ref({
+    current: 1,
+    pageSize: 5,
+    total: 0,
+    showSizeChanger: true,
+    showQuickJumper: true,
+    pageSizeOptions: ['5', '10', '20', '50'],
+  });
+
+  const columns = reactive<YTableColumn[]>([
+    {
+      type: 'seq' as const,
+      title: '序号',
+      width: 60,
+      align: 'center' as const,
+      fixed: 'left' as const,
+    },
+    {
+      field: 'name',
+      title: '姓名',
+      width: 120,
+      sortable: true,
+    },
+    {
+      field: 'role',
+      title: '角色',
+      width: 100,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 80,
+      align: 'center' as const,
+    },
+    {
+      field: 'createTime',
+      title: '备注',
+      width: 160,
+    },
+    {
+      field: 'createTime1',
+      title: '备注2',
+      width: 160,
+    },
+    {
+      field: 'createTime2',
+      title: '备注2',
+      width: 160,
+    },
+    {
+      field: 'createTime3',
+      title: '备注2',
+      width: 160,
+    },
+  ]);
+
+  const actionConfig = reactive<YTableActionConfig>({
+    displayLimit: 2,
+    width: 140,
+    fixed: 'right',
+    buttons: [
+      { key: 'view', text: '查看', clickFn: scope => onView(scope.row) },
+      { key: 'edit', text: '编辑', clickFn: scope => onEdit(scope.row) },
+      {
+        key: 'delete',
+        text: '删除',
+        isConfirm: true,
+        confirmProps: { title: '确认删除该条数据吗？' },
+        clickFn: scope => onDelete(scope.row),
+      },
+    ],
+  });
+
+  const columnsWithAction = reactive<YTableColumn[]>([
+    ...columns,
+    {
+      type: 'action' as const,
+      title: '操作',
+      align: 'center' as const,
+      actionConfig: {
+        displayLimit: 2,
+        width: 130,
+        moreRenderType: 'ellipsis',
+        buttons: [
+          { key: 'view', text: '查看', clickFn: scope => onView(scope.row) },
+          { key: 'edit', text: '编辑', clickFn: scope => onEdit(scope.row) },
+          {
+            key: 'delete',
+            text: '删除',
+            isConfirm: true,
+            confirmProps: { title: '确认删除该条数据吗？' },
+            clickFn: scope => onDelete(scope.row),
+          },
+        ],
+      },
+    },
+  ]);
+
+  const tableData = ref([
+    {
+      name: '张三',
+      department: '技术部',
+      role: '前端工程师',
+      status: 1,
+      createTime: '2024-01-15 10:30:00',
+    },
+    {
+      name: '李四xxxxx',
+      department: '产品部',
+      role: '产品经理',
+      status: 1,
+      createTime: '2024-01-16 09:20:00',
+    },
+    {
+      name: '王五',
+      department: '设计部',
+      role: 'UI设计师',
+      status: 0,
+      createTime: '2024-01-17 14:15:00',
+    },
+    {
+      name: '赵六',
+      department: '技术部',
+      role: '后端工程师',
+      status: 1,
+      createTime: '2024-01-18 11:45:00',
+    },
+    {
+      name: '孙七',
+      department: '运营部',
+      role: '运营专员',
+      status: 1,
+      createTime: '2024-01-19 16:20:00',
+    },
+  ]);
+
+  const handleCellClick = (params: any) => {
+    // eslint-disable-next-line no-console
+    console.info(`点击了 ${params.row.name} 的 ${params.column.title}`);
+  };
+
+  const handleCurrentRowChange = (_params: any) => {
+    // 当前行变更
+  };
+
+  const handlePageChange = (_payload: any) => {
+    // 分页改变
+  };
+
+  const onCreate = () => alert('点击了新增');
+  const onBatch = () => alert('点击了批量操作');
+  const onView = (row: any) => alert(`查看：${row.name}`);
+  const onEdit = (row: any) => alert(`编辑：${row.name}`);
+  const onDelete = (row: any) => alert(`删除：${row.name}`);
+
+  return {
+    loading,
+    pagination,
+    columns,
+    actionConfig,
+    columnsWithAction,
+    tableData,
+    handleCellClick,
+    handleCurrentRowChange,
+    handlePageChange,
+    onCreate,
+    onBatch,
+    onView,
+    onEdit,
+    onDelete,
+  };
+};

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

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { YButton, YTable } from '@yss-ui/components';
+// import { MoreOutlined } from '@ant-design/icons-vue';
+import { useBasicTable } from './hooks/useBasicTable';
+import './style.less';
+
+defineOptions({ name: 'DemoTableBasic' });
+
+const {
+  loading,
+  pagination,
+  columns,
+  actionConfig,
+  columnsWithAction,
+  tableData,
+  handleCellClick,
+  handleCurrentRowChange,
+  handlePageChange,
+  onCreate,
+  onBatch,
+} = useBasicTable();
+</script>
+
+<template>
+  <div class="demo-container">
+    <YTable
+      id="demo-basic-ytable"
+      v-model:pagination="pagination"
+      :data="tableData"
+      :columns="columns"
+      :border="true"
+      :stripe="false"
+      :loading="loading"
+      :toolbar-config="{ custom: true }"
+      :action-config="actionConfig"
+      @page-change="handlePageChange"
+      @cell-click="handleCellClick"
+      @current-row-change="handleCurrentRowChange"
+    >
+      <!-- 自定义状态列 -->
+      <template #status="{ row }">
+        <span :class="['status-tag', row.status === 1 ? 'status-active' : 'status-inactive']">
+          {{ row.status === 1 ? '启用' : '禁用' }}
+        </span>
+      </template>
+      <!-- 工具栏插槽：在"列设置"齿轮左右增加自定义按钮 -->
+      <template #toolbar-left>
+        <YButton type="primary" @click="onCreate">新增</YButton>
+      </template>
+      <template #toolbar-right>
+        <YButton style="margin-right: 8px" @click="onBatch">上传附件</YButton>
+      </template>
+    </YTable>
+
+    <YTable
+      id="demo-basic-ytable1"
+      v-model:pagination="pagination"
+      :data="tableData"
+      :columns="columnsWithAction"
+      :border="true"
+      :stripe="false"
+      :loading="loading"
+      toolbar-size="small"
+      :toolbar-config="{ custom: true }"
+      :row-config="{ isCurrent: false, isHover: false }"
+      @page-change="handlePageChange"
+      @cell-click="handleCellClick"
+      @current-row-change="handleCurrentRowChange"
+    >
+      <!-- 自定义状态列 -->
+      <template #status="{ row }">
+        <span :class="['status-tag', row.status === 1 ? 'status-active' : 'status-inactive']">
+          {{ row.status === 1 ? '启用' : '禁用' }}
+        </span>
+      </template>
+
+      <template #toolbar-left>
+        <span>列操作自定义icon</span>
+      </template>
+      <!-- actionConfig 配置 moreRenderType: 'ellipsis' 和 'moreButton' -->
+      <!-- 也可以 自定义操作列"更多"图标（会透传给操作列组件） -->
+      <!-- <template #action-more-icon>
+        <span style="color: var(--primary-color); cursor: pointer"><MoreOutlined /></span>
+      </template> -->
+    </YTable>
+  </div>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,28 @@
+.demo-container {
+  padding: 20px;
+}
+
+.demo-actions {
+  margin-top: 16px;
+  display: flex;
+  gap: 8px;
+}
+
+.status-tag {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-active {
+  background: #f6ffed;
+  color: #52c41a;
+  border: 1px solid #b7eb8f;
+}
+
+.status-inactive {
+  background: #fff2f0;
+  color: #ff4d4f;
+  border: 1px solid #ffadd2;
+}

package/template/.cursor/skills/yss-ui/assets/demos/table/column-custom-search/hooks/useColumnCustomSearch.ts

@@ -0,0 +1,236 @@
+import { type YTableColumn } from '@yss-ui/components';
+import { computed, nextTick, ref, type ComputedRef, type Ref } from 'vue';
+
+export interface ColumnFilterOption {
+  label: string;
+  value: string;
+  checked?: boolean;
+}
+
+export interface UseColumnCustomSearchReturn {
+  tableRef: Ref<any>;
+  tableData: Ref<any[]>;
+  columns: Ref<YTableColumn[]>;
+  columnSearchKeywords: Ref<Record<string, string>>;
+  columnAllFilters: Ref<Record<string, ColumnFilterOption[]>>;
+  virtualListRefs: Ref<Record<string, any>>;
+  filterPanelKeys: Ref<Record<string, number>>;
+  VIRTUAL_ITEM_HEIGHT: number;
+  VIRTUAL_VIEWPORT_HEIGHT: number;
+  getFilteredOptions: (field: string, column: any) => ComputedRef<ColumnFilterOption[]>;
+  isAllChecked: (field: string, column: any) => ComputedRef<boolean>;
+  isIndeterminate: (field: string, column: any) => ComputedRef<boolean>;
+  handleCheckAll: (field: string, column: any, $panel: any) => void;
+  handleOptionChange: (field: string, option: any, checked: boolean, $panel: any) => void;
+  handleSearchInput: (field: string) => void;
+  customConfig: Ref<Record<string, any>>;
+  virtualXConfig: Ref<{ enabled: boolean; gt: number }>;
+  virtualYConfig: Ref<{ enabled: boolean; gt: number }>;
+  rowConfig: Ref<Record<string, any>>;
+}
+
+/**
+ * 列筛选 + 搜索 + 虚拟列表 Demo 逻辑（拆分为 hook）
+ * @returns Demo 所需的响应式状态与方法
+ */
+export const useColumnCustomSearch = (): UseColumnCustomSearchReturn => {
+  const tableRef = ref<any>();
+
+  /** 从数据中提取某列唯一值（去重后升序） */
+  const getUniqueValues = (data: any[], field: string): string[] => {
+    const values = data.map(row => String(row[field] || ''));
+    return Array.from(new Set(values)).sort();
+  };
+
+  // 构造 1000+ 行示例数据（配合固定高度触发虚拟滚动）
+  const tableData = ref<any[]>([]);
+  for (let r = 0; r < 1200; r += 1) {
+    const row: Record<string, any> = { _X_ROW_KEY: `row_${r}` };
+    for (let c = 1; c <= 70; c += 1) {
+      // 模拟第三列部分字段为空（每隔3行或行号能被5整除时为空）
+      if (c === 3 && (r % 3 === 0 || r % 5 === 0)) {
+        row[`col${c}`] = '';
+      } else {
+        row[`col${c}`] = `内容${r + 1}-${c}`;
+      }
+    }
+    tableData.value.push(row);
+  }
+
+  // 每列的搜索关键词、完整筛选项
+  const columnSearchKeywords = ref<Record<string, string>>({});
+  const columnAllFilters = ref<Record<string, ColumnFilterOption[]>>({});
+
+  // VirtualList 实例映射：按列字段保存，用于重置滚动
+  const virtualListRefs = ref<Record<string, any>>({});
+  // 筛选面板强制刷新 key（用于解决单选状态不同步问题）
+  const filterPanelKeys = ref<Record<string, number>>({});
+
+  // 虚拟列表参数（改用 antdv vc-virtual-list）
+  const VIRTUAL_ITEM_HEIGHT = 32; // 单项高度（px）
+  const VIRTUAL_VIEWPORT_HEIGHT = 240; // 可视高度（与样式一致）
+
+  // 生成 70 列示例（含序号列），每列都启用筛选
+  const columns = ref<YTableColumn[]>([
+    { type: 'seq' as const, title: '序号', width: 60, align: 'center', fixed: 'left' },
+  ]);
+
+  // 为每列生成筛选选项
+  for (let i = 0; i < 70; i += 1) {
+    const field = `col${i + 1}`;
+    const uniqueValues = getUniqueValues(tableData.value, field);
+    const filters: ColumnFilterOption[] = uniqueValues.map(value => ({ label: value, value }));
+
+    columnAllFilters.value[field] = filters;
+    columnSearchKeywords.value[field] = '';
+    filterPanelKeys.value[field] = 0;
+
+    // 数据处理 第三列留一列不显示 其他列都显示
+    if (i === 2) {
+      // 不展示数据
+      columns.value.push({
+        field,
+        title: `备注${i + 1}`,
+        width: 120,
+        filterable: true,
+        filterMultiple: true,
+        filters,
+      });
+    } else {
+      columns.value.push({
+        field,
+        title: `备注${i + 1}`,
+        width: 120,
+        filterable: true,
+        filterMultiple: true,
+        filters,
+      });
+    }
+  }
+
+  /** 获取某列过滤后的选项（根据搜索关键词） */
+  const getFilteredOptions = (field: string, column: any) => {
+    return computed<ColumnFilterOption[]>(() => {
+      const keyword = columnSearchKeywords.value[field]?.trim().toLowerCase() || '';
+      const allFilters = (column?.filters as ColumnFilterOption[]) || columnAllFilters.value[field] || [];
+
+      if (!keyword) return allFilters;
+      return allFilters.filter(filter =>
+        String(filter.label || '')
+          .toLowerCase()
+          .includes(keyword)
+      );
+    });
+  };
+
+  /** 是否全选 */
+  const isAllChecked = (field: string, column: any) => {
+    return computed<boolean>(() => {
+      const filteredOptions = getFilteredOptions(field, column).value;
+      if (filteredOptions.length === 0) return false;
+      return filteredOptions.every(opt => (opt as any).checked);
+    });
+  };
+
+  /** 是否半选 */
+  const isIndeterminate = (field: string, column: any) => {
+    return computed<boolean>(() => {
+      const filteredOptions = getFilteredOptions(field, column).value;
+      const checkedCount = filteredOptions.filter(opt => (opt as any).checked).length;
+      return checkedCount > 0 && checkedCount < filteredOptions.length;
+    });
+  };
+
+  /** 全选/取消全选 */
+  const handleCheckAll = (field: string, column: any, $panel: any) => {
+    const filteredOptions = getFilteredOptions(field, column).value;
+    const allChecked = isAllChecked(field, column).value;
+    filteredOptions.forEach((option: any) => {
+      option.checked = !allChecked; // 更新可视状态
+      $panel.changeOption(null, option.checked, option); // 同步 vxe 内部状态
+    });
+  };
+
+  /** 单个选项变化 */
+  const handleOptionChange = (field: string, option: any, checked: boolean, $panel: any) => {
+    // 1. 保存当前滚动位置
+    const list = virtualListRefs.value[field];
+    let scrollOffset = 0;
+    if (list && list.scrollTo) {
+      // 尝试获取当前滚动偏移量
+      const listElement = list.$el || list;
+      if (listElement && listElement.querySelector) {
+        const scrollContainer = listElement.querySelector('.rc-virtual-list-holder');
+        if (scrollContainer) {
+          scrollOffset = scrollContainer.scrollTop || 0;
+        }
+      }
+    }
+
+    // 2. 更新选项状态
+    option.checked = checked;
+    $panel.changeOption(null, checked, option);
+    filterPanelKeys.value[field] = (filterPanelKeys.value[field] || 0) + 1; // 强制刷新
+
+    // 3. 在 DOM 更新后恢复滚动位置
+    nextTick(() => {
+      const list = virtualListRefs.value[field];
+      if (list && scrollOffset > 0) {
+        const listElement = list.$el || list;
+        if (listElement && listElement.querySelector) {
+          const scrollContainer = listElement.querySelector('.rc-virtual-list-holder');
+          if (scrollContainer) {
+            scrollContainer.scrollTop = scrollOffset;
+          }
+        }
+      }
+    });
+  };
+
+  /** 搜索输入时：重置该列虚拟列表滚动到顶部 */
+  const handleSearchInput = (field: string) => {
+    const list = virtualListRefs.value[field];
+    if (list && typeof list.scrollTo === 'function') {
+      list.scrollTo({ index: 0 });
+    }
+  };
+
+  // 仅保留"字段显隐"的列设置（禁用排序与固定）
+  const customConfig = ref({
+    allowFixed: false,
+    allowSort: false,
+    storage: {
+      enabled: true,
+      key: 'yss-ui:table:demo-column-custom-search:columns',
+    },
+  });
+
+  /** 虚拟滚动配置 (vxe-table v4.10.6+ 使用 virtual-x-config / virtual-y-config) */
+  const virtualXConfig = ref({ enabled: true, gt: 60 });
+  const virtualYConfig = ref({ enabled: true, gt: 100 });
+
+  /** 行配置 - 行标识配置 */
+  const rowConfig = ref({ keyField: '_X_ROW_KEY', useKey: true });
+
+  return {
+    tableRef,
+    tableData,
+    columns,
+    columnSearchKeywords,
+    columnAllFilters,
+    virtualListRefs,
+    filterPanelKeys,
+    VIRTUAL_ITEM_HEIGHT,
+    VIRTUAL_VIEWPORT_HEIGHT,
+    getFilteredOptions,
+    isAllChecked,
+    isIndeterminate,
+    handleCheckAll,
+    handleOptionChange,
+    handleSearchInput,
+    customConfig,
+    virtualXConfig,
+    virtualYConfig,
+    rowConfig,
+  };
+};

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

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { YButton, YTable } from '@yss-ui/components';
+import { Checkbox, Empty, Input, message, Tooltip } from 'ant-design-vue';
+import VirtualList from 'ant-design-vue/es/vc-virtual-list';
+import { useColumnCustomSearch } from './hooks/useColumnCustomSearch';
+import './style.less';
+
+// 简洁空状态图片
+const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
+
+defineOptions({ name: 'DemoTableColumnCustomSearch' });
+
+const {
+  tableRef,
+  tableData,
+  columns,
+  columnSearchKeywords,
+  virtualListRefs,
+  filterPanelKeys,
+  VIRTUAL_ITEM_HEIGHT,
+  VIRTUAL_VIEWPORT_HEIGHT,
+  getFilteredOptions,
+  isAllChecked,
+  isIndeterminate,
+  handleCheckAll,
+  handleOptionChange,
+  handleSearchInput,
+  customConfig,
+  virtualXConfig,
+  virtualYConfig,
+} = useColumnCustomSearch();
+
+const handleGetFilters = () => {
+  const $table = tableRef.value?.getTableInstance?.();
+  if (!$table) {
+    return;
+  }
+  const { tableData: data = [] } = $table.getTableData() || {};
+  // eslint-disable-next-line no-console
+  console.log('获取筛选条件->', $table.getCheckedFilters(), '获取筛选后的表格数据->', data);
+  message.success('已获取筛选条件');
+};
+
+/** 清除所有筛选条件 */
+const handleClearAllFilters = () => {
+  const $table = tableRef.value?.getTableInstance?.();
+  if (!$table) {
+    return;
+  }
+  $table.clearFilter();
+  message.success('已清除所有筛选条件');
+};
+</script>
+
+<template>
+  <div class="demo-container">
+    <YTable
+      id="demo-column-custom-search"
+      ref="tableRef"
+      :data="tableData"
+      :columns="columns"
+      :custom-config="customConfig"
+      :toolbar-config="{ custom: true }"
+      :border="true"
+      :height="480"
+      :virtual-x-config="virtualXConfig"
+      :virtual-y-config="virtualYConfig"
+    >
+      <template #toolbar-right>
+        <div style="display: flex; gap: 10px; margin-right: 10px">
+          <YButton type="primary" @click="handleGetFilters">获取筛选条件/表格数据</YButton>
+          <YButton @click="handleClearAllFilters">清除筛选条件</YButton>
+        </div>
+      </template>
+
+      <!-- 为每一列添加自定义筛选面板（包含搜索框） -->
+      <template
+        v-for="col in columns.filter(c => c.field)"
+        :key="col.field"
+        #[`${col.field}-filter`]="{ $panel, column }"
+      >
+        <div v-if="column" :key="filterPanelKeys[col.field!]">
+          <!-- 搜索框 -->
+          <div class="vxe-table-filter-header">
+            <Input
+              v-model:value="columnSearchKeywords[col.field!]"
+              placeholder="搜索"
+              size="small"
+              allow-clear
+              @input="() => handleSearchInput(col.field!)"
+            />
+          </div>
+
+          <!-- 无数据时展示空状态 -->
+          <div v-if="getFilteredOptions(col.field!, column).value.length === 0">
+            <Empty :image="simpleImage" description="暂无数据" />
+          </div>
+
+          <!-- 全选 -->
+          <div v-else class="vxe-table-filter-body" :style="{ overflow: 'visible', maxHeight: 'none' }">
+            <div class="vxe-table-filter-option">
+              <Checkbox
+                :checked="isAllChecked(col.field!, column).value"
+                :indeterminate="isIndeterminate(col.field!, column).value"
+                @change="handleCheckAll(col.field!, column, $panel)"
+              >
+                全选
+              </Checkbox>
+            </div>
+            <!-- 使用 antdv 的 vc-virtual-list 实现虚拟滚动 -->
+            <VirtualList
+              :ref="(el: any) => (virtualListRefs[col.field!] = el)"
+              :data="getFilteredOptions(col.field!, column).value"
+              :height="VIRTUAL_VIEWPORT_HEIGHT"
+              :item-height="VIRTUAL_ITEM_HEIGHT"
+              :item-key="(opt: any) => opt?.value"
+            >
+              <template #default="option">
+                <div
+                  class="vxe-table-filter-option"
+                  :style="{ height: VIRTUAL_ITEM_HEIGHT + 'px', display: 'flex', alignItems: 'center', width: '100%' }"
+                >
+                  <Checkbox
+                    :checked="!!(option as any).checked"
+                    @change="(e: any) => handleOptionChange(col.field!, option as any, e.target.checked, $panel)"
+                  >
+                    <Tooltip :title="(option as any).label" placement="top">
+                      <span class="filter-option-text">{{ (option as any).label }}</span>
+                    </Tooltip>
+                  </Checkbox>
+                </div>
+              </template>
+            </VirtualList>
+          </div>
+        </div>
+      </template>
+    </YTable>
+  </div>
+</template>
+
+<style scoped></style>