create-yss-spec 3.3.1 → 3.3.3

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

@@ -1,205 +0,0 @@
-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/.qoder/skills/yss-ui/assets/demos/table/basic/index.vue

@@ -1,89 +0,0 @@
-<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/.qoder/skills/yss-ui/assets/demos/table/basic/style.less

@@ -1,28 +0,0 @@
-.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/.qoder/skills/yss-ui/assets/demos/table/column-custom-search/hooks/useColumnCustomSearch.ts

@@ -1,236 +0,0 @@
-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/.qoder/skills/yss-ui/assets/demos/table/column-custom-search/index.vue

@@ -1,141 +0,0 @@
-<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>