create-yss-spec 2.1.10 → 2.1.11

package/template/.cursor/skills/yss-page-module-development/examples/StandardListPage/constant.ts

@@ -0,0 +1,128 @@
+import type { YTableColumn } from '@yss-ui/components';
+
+/**
+ * 质量规则数据项接口
+ */
+export interface QualityRuleItem {
+  /** 规则ID */
+  id: string;
+  /** 规则编码 */
+  ruleCode?: string;
+  /** 规则名称 */
+  ruleName: string;
+  /** 模板ID */
+  templateId?: string | number;
+  /** 规则模板名称 */
+  templateName: string;
+  /** 数据源名称 */
+  datasourceName: string;
+  /** 规则强度名称 */
+  intensityName: string;
+  /** 规则类型名称 */
+  ruleTypeName: string;
+  /** 校验开关状态: 0=禁用, 1=启用 */
+  status: 0 | 1;
+  /** 创建人 */
+  createdBy: string;
+  /** 创建时间 */
+  createdDate: string;
+  [key: string]: any;
+}
+
+/**
+ * 树节点数据接口
+ */
+export interface TreeNodeData {
+  /** 节点ID */
+  id: string;
+  /** 节点名称 */
+  name?: string;
+  /** 目录编码 */
+  dirCode?: string;
+  /** 树类型: 1=规则分类树, 2=数据源树 */
+  treeType?: '1' | '2';
+  /** 数据源名称（数据源树使用） */
+  datasourceName?: string;
+  /** 数据库名称（数据源树使用） */
+  databaseName?: string;
+  /** 数据库类型（数据源树使用） */
+  dataBaseType?: string;
+  [key: string]: any;
+}
+
+/**
+ * 搜索表单数据接口
+ */
+export interface SearchFormData {
+  /** 规则名称 */
+  ruleName: string;
+}
+
+/**
+ * 表格列配置
+ */
+export const TABLE_COLUMNS: YTableColumn[] = [
+  {
+    field: 'ruleName',
+    title: '质量规则名称',
+    minWidth: 130,
+    fixed: 'left',
+    slots: { default: 'ruleName' },
+  },
+  {
+    field: 'templateName',
+    title: '规则模板',
+    minWidth: 130,
+  },
+  {
+    field: 'datasourceName',
+    title: '数据源名称',
+    minWidth: 120,
+  },
+  {
+    field: 'intensityName',
+    title: '规则强度',
+    minWidth: 100,
+  },
+  {
+    field: 'ruleTypeName',
+    title: '规则类型',
+    minWidth: 120,
+  },
+  {
+    field: 'status',
+    title: '校验开关',
+    width: 90,
+    slots: { default: 'status' },
+  },
+  {
+    field: 'createdBy',
+    title: '创建人',
+    width: 120,
+  },
+  {
+    field: 'createdDate',
+    title: '创建时间',
+    width: 140,
+  },
+  {
+    field: 'lastModifiedDate',
+    title: '最近修改时间',
+    width: 140,
+  },
+  {
+    field: 'lastModifiedBy',
+    title: '最近修改人',
+    width: 140,
+  },
+];
+
+/**
+ * 规则类型常量
+ */
+export const RULE_TYPE = {
+  /** 业务校验 */
+  BUSINESS: 'BUSINESS',
+  /** 技术校验 */
+  TECH: 'TECH',
+} as const;

package/template/.cursor/skills/yss-page-module-development/examples/StandardListPage/hooks/useQualityRuleList.ts

@@ -0,0 +1,144 @@
+import { ref, reactive } from 'vue';
+// 注意：这里使用的是生成的 API 客户端，实际开发中请使用 pnpm sync:generate 生成
+import { getPomApi } from '@/api/generated/quality';
+import type { QualityRuleItem, SearchFormData, TreeNodeData } from '../constant';
+
+/**
+ * 质量规则列表数据逻辑 Hook
+ * 管理列表数据、分页、搜索等
+ */
+export const useQualityRuleList = () => {
+  /** 表格数据 */
+  const tableData = ref<QualityRuleItem[]>([]);
+
+  /** 加载状态 */
+  const loading = ref(false);
+
+  /** 分页配置 */
+  const pagination = reactive({
+    current: 1,
+    pageSize: 20,
+    total: 0,
+    remote: true,
+  });
+
+  /** 搜索表单数据 */
+  const searchForm = reactive<SearchFormData>({
+    ruleName: '',
+  });
+
+  /** 当前选中的树节点 */
+  const selectedNode = ref<TreeNodeData | null>(null);
+
+  /**
+   * 获取查询参数
+   */
+  const getQueryParams = () => {
+    const baseParams = {
+      pageIndex: pagination.current,
+      pageSize: pagination.pageSize,
+      ruleName: searchForm.ruleName,
+    };
+
+    // 规则分类树节点
+    if (selectedNode.value?.treeType === '1') {
+      return {
+        ...baseParams,
+        dirCode: selectedNode.value.dirCode,
+      };
+    }
+
+    // 数据源树节点（表节点）
+    if (selectedNode.value?.treeType === '2') {
+      return {
+        ...baseParams,
+        datasourceName: selectedNode.value.datasourceName,
+        databaseName: selectedNode.value.databaseName,
+        tableName: selectedNode.value.name,
+      };
+    }
+
+    return baseParams;
+  };
+
+  /**
+   * 获取列表数据
+   */
+  const fetchList = async () => {
+    loading.value = true;
+    try {
+      const params = getQueryParams();
+
+      // 调用 API (示例)
+      const { pageQualityRule } = getPomApi();
+      const { data, totalCount } = await pageQualityRule(params);
+
+      tableData.value = (data as unknown as QualityRuleItem[]) || [];
+      pagination.total = totalCount || 0;
+    } catch (error) {
+      console.error('查询列表失败:', error);
+      tableData.value = [];
+      pagination.total = 0;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  /**
+   * 处理分页变化
+   * @param payload - 分页参数对象，包含 current 和 pageSize
+   */
+  const handlePageChange = (payload: { current: number; pageSize: number }) => {
+    pagination.current = payload.current;
+    pagination.pageSize = payload.pageSize;
+    fetchList();
+  };
+
+  /**
+   * 处理每页条数变化
+   * @param pageSize - 新的每页条数
+   */
+  const handleSizeChange = (pageSize: number) => {
+    pagination.current = 1;
+    pagination.pageSize = pageSize;
+    fetchList();
+  };
+
+  /**
+   * 处理搜索
+   */
+  const handleSearch = () => {
+    pagination.current = 1;
+    fetchList();
+  };
+
+  /**
+   * 处理刷新
+   */
+  const handleRefresh = () => {
+    fetchList();
+  };
+
+  /**
+   * 处理树节点点击
+   */
+  const handleTreeNodeClick = (node: TreeNodeData) => {
+    selectedNode.value = node;
+    pagination.current = 1;
+    fetchList();
+  };
+
+  return {
+    tableData,
+    loading,
+    pagination,
+    searchForm,
+    selectedNode,
+    fetchList,
+    handlePageChange,
+    handleSizeChange,
+    handleSearch,
+    handleRefresh,
+    handleTreeNodeClick,
+  };
+};

package/template/.cursor/skills/yss-page-module-development/examples/StandardListPage/hooks/useRuleActions.ts

@@ -0,0 +1,141 @@
+import { message, Modal } from 'ant-design-vue';
+import { useRouter } from 'vue-router';
+import { getPomApi } from '@/api/generated/quality';
+import { RULE_TYPE } from '@/constant'; // 假设项目根目录有全局常量
+import type { QualityRuleItem, TreeNodeData } from '../constant';
+
+/**
+ * 质量规则操作逻辑 Hook
+ * 处理编辑、删除、运行、状态切换等操作
+ */
+export const useRuleActions = (refreshList: () => void) => {
+  const router = useRouter();
+
+  /**
+   * 处理编辑规则
+   * @param row 规则数据行
+   */
+  const handleEdit = (row: QualityRuleItem) => {
+    router.push({
+      path: '/biz/rules/create',
+      query: {
+        id: row.id,
+        formMode: 1,
+        qualityType: RULE_TYPE.BUSINESS,
+      },
+    });
+  };
+
+  /**
+   * 处理删除规则
+   * @param row 规则数据行
+   */
+  const handleDelete = async (row: QualityRuleItem) => {
+    try {
+      const { deleteQualityRule } = getPomApi();
+      await deleteQualityRule({ ids: [row.id] } as any);
+      message.success('删除成功');
+      refreshList();
+    } catch (error) {
+      console.error('删除失败:', error);
+    }
+  };
+
+  /**
+   * 处理运行规则
+   * @param row 规则数据行
+   */
+  const handleRun = async (row: QualityRuleItem) => {
+    try {
+      const { executeQualityCheck } = getPomApi();
+      await executeQualityCheck({
+        ruleCode: row.ruleCode || row.id,
+        qualityType: 'BUSINESS',
+      });
+
+      message.success('运行成功');
+    } catch (error) {
+      console.error('运行失败:', error);
+    }
+  };
+
+  /**
+   * 处理状态切换
+   * @param row 规则数据行
+   */
+  const handleStatusChange = async (row: QualityRuleItem) => {
+    const text = row.status === 1 ? '禁用' : '启用';
+    Modal.confirm({
+      title: `确认${text}`,
+      content: `确认${text}此规则吗？`,
+      okText: '确认',
+      cancelText: '取消',
+      onOk: async () => {
+        try {
+          const newStatus = row.status === 1 ? 0 : 1;
+          const { qualityRuleEnabled } = getPomApi();
+          await qualityRuleEnabled({
+            id: Number(row.id),
+            status: newStatus,
+          });
+          message.success(`${text}成功`);
+          refreshList();
+        } catch (error) {
+          console.error(`${text}失败:`, error);
+        }
+      },
+    });
+  };
+
+  /**
+   * 处理新建规则
+   * @param selectedNode 当前选中的树节点
+   */
+  const handleCreate = (selectedNode: TreeNodeData | null) => {
+    const query: any = {
+      qualityType: 'BUSINESS',
+    };
+
+    if (selectedNode) {
+      if (selectedNode.treeType === '1') {
+        // 规则分类树节点
+        query.dirCode = selectedNode.dirCode;
+      } else if (selectedNode.treeType === '2') {
+        // 数据源树节点
+        query.datasourceName = selectedNode.datasourceName;
+        query.databaseName = selectedNode.databaseName;
+        query.dataBaseType = selectedNode.dataBaseType;
+      }
+    }
+
+    router.push({
+      path: '/biz/rules/create',
+      query,
+    });
+  };
+
+  /**
+   * 处理规则名称点击（跳转详情页）
+   * @param row 规则数据行
+   */
+  const handleRuleNameClick = (row: QualityRuleItem) => {
+    router.push({
+      path: '/rules/detail',
+      query: {
+        id: row.id,
+        templateId: row.templateId,
+        qualityType: RULE_TYPE.BUSINESS,
+        ruleCode: row.ruleCode,
+      },
+    });
+  };
+
+  return {
+    handleEdit,
+    handleDelete,
+    handleRun,
+    handleStatusChange,
+    handleCreate,
+    handleRuleNameClick,
+  };
+};

package/template/.cursor/skills/yss-page-module-development/examples/StandardListPage/index.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { Input as AInput, Button as AButton, Switch as ASwitch } from 'ant-design-vue';
+import { RedoOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import { YSplitPane, YCard, YTable } from '@yss-ui/components';
+import { useTableHeight } from '@yss-ui/hooks';
+import { TABLE_COLUMNS, type QualityRuleItem } from './constant';
+import { useQualityRuleList } from './hooks/useQualityRuleList';
+import { useRuleActions } from './hooks/useRuleActions';
+import QualityTree from '@/components/QualityTree/index.vue'; // 假设的树组件
+
+defineOptions({
+  name: 'StandardListPage',
+});
+
+/** 列表数据逻辑 */
+const {
+  tableData,
+  loading,
+  pagination,
+  searchForm,
+  selectedNode,
+  fetchList,
+  handlePageChange,
+  handleSizeChange,
+  handleSearch,
+  handleRefresh,
+  handleTreeNodeClick,
+} = useQualityRuleList();
+
+const tableRef = ref();
+// 自动计算表格高度，使其占满剩余空间
+const { tableHeight } = useTableHeight(tableRef, { withPagination: true });
+
+/** 规则操作逻辑 */
+const { handleEdit, handleDelete, handleRun, handleStatusChange, handleCreate, handleRuleNameClick } =
+  useRuleActions(fetchList);
+
+/**
+ * 操作列配置
+ * 使用 computed 确保响应式，支持动态显示/隐藏按钮
+ */
+const actionConfig = computed(() => ({
+  title: '操作',
+  width: 160,
+  align: 'center' as const,
+  fixed: 'right' as const,
+  buttons: [
+    {
+      text: '编辑',
+      key: 'edit',
+      type: 'link' as const,
+      clickFn: ({ row }: { row: QualityRuleItem }) => handleEdit(row),
+      disabledFn: ({ row }: { row: QualityRuleItem }) => !!row.status,
+    },
+    {
+      text: '运行',
+      key: 'run',
+      type: 'link' as const,
+      isConfirm: true,
+      confirmProps: {
+        title: '确认运行此规则吗？',
+        needLoading: true,
+      },
+      clickFn: async ({ row }: { row: QualityRuleItem }, _btn: any, helpers: any) => {
+        await handleRun(row);
+        helpers?.hideLoading();
+        helpers?.close();
+      },
+    },
+    {
+      text: '删除',
+      key: 'delete',
+      type: 'link' as const,
+      danger: true,
+      isConfirm: true,
+      confirmProps: {
+        title: '确认删除此规则吗？删除后无法恢复',
+        needLoading: true,
+      },
+      clickFn: async ({ row }: { row: QualityRuleItem }, _btn: any, helpers: any) => {
+        await handleDelete(row);
+        helpers?.hideLoading();
+        helpers?.close();
+      },
+      disabledFn: ({ row }: { row: QualityRuleItem }) => !!row.status,
+    },
+  ],
+}));
+
+/**
+ * 处理搜索框回车
+ */
+const handleSearchPressEnter = () => {
+  handleSearch();
+};
+</script>
+
+<template>
+  <div class="business-quality-rule">
+    <YSplitPane
+      :initial-width="280"
+      :min-width="280"
+      :max-width="480"
+      collapsible
+      storage-key="business-quality-rule-split"
+    >
+      <!-- 左侧：树组件 -->
+      <template #left>
+        <div class="tree-panel">
+          <QualityTree @node-select="handleTreeNodeClick" />
+        </div>
+      </template>
+
+      <!-- 右侧：主内容区 -->
+      <template #right>
+        <y-card class-name="content-panel">
+          <!-- 搜索和操作区 -->
+          <div class="search-bar">
+            <div class="search-inputs">
+              <AInput
+                v-model:value="searchForm.ruleName"
+                placeholder="请输入规则名称"
+                allow-clear
+                style="width: 300px"
+                @press-enter="handleSearchPressEnter"
+              />
+            </div>
+
+            <div class="action-buttons">
+              <AButton :loading="loading" @click="handleRefresh">
+                <template #icon><RedoOutlined /></template>
+                刷新
+              </AButton>
+              <AButton type="primary" @click="() => handleCreate(selectedNode)">
+                <template #icon><PlusOutlined /></template>
+                添加质量规则
+              </AButton>
+            </div>
+          </div>
+
+          <!-- 表格 -->
+          <div ref="tableRef" class="table-container">
+            <YTable
+              :data="tableData"
+              :columns="TABLE_COLUMNS"
+              :loading="loading"
+              :action-config="actionConfig"
+              pageable
+              :max-height="tableHeight"
+              :pagination="pagination"
+              @page-change="handlePageChange"
+              @size-change="handleSizeChange"
+            >
+              <!-- 规则名称列（自定义渲染为链接） -->
+              <template #ruleName="{ row }">
+                <a class="rule-name-link" @click="() => handleRuleNameClick(row)">
+                  {{ row.ruleName }}
+                </a>
+              </template>
+
+              <!-- 状态列（自定义渲染为开关） -->
+              <template #status="{ row }">
+                <ASwitch :checked="row.status === 1" @change="() => handleStatusChange(row)" />
+              </template>
+            </YTable>
+          </div>
+        </y-card>
+      </template>
+    </YSplitPane>
+  </div>
+</template>
+<style lang="less" scoped>
+@import './style.less';
+</style>

package/template/.cursor/skills/yss-page-module-development/examples/StandardListPage/style.less

@@ -0,0 +1,83 @@
+@import "@/styles/variables.less";
+
+.business-quality-rule {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  /** 树面板样式 */
+  .tree-panel {
+    height: 100%;
+    background-color: #fff;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    border-radius: 8px;
+  }
+
+  /** 内容面板样式 */
+  .content-panel {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    // CRITICAL: YSplitPane 内部不要加 padding-left，改为给 YCard 加 margin
+    .y-card {
+      margin-left: 12px;
+    }
+
+    // CRITICAL: 让 Card 内容区域支持 flex 布局
+    :deep(.ant-card-body) {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      overflow: hidden;
+    }
+
+    // 搜索栏（固定高度）
+    .search-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px;
+      gap: 16px;
+      flex-shrink: 0;
+
+      .search-inputs {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .action-buttons {
+        display: flex;
+        gap: 8px;
+      }
+    }
+
+    // 表格容器（使用 flex: 1 占据剩余空间）
+    .table-container {
+      flex: 1; // ← CRITICAL: 让表格区域占据剩余空间
+      overflow: hidden; // ← CRITICAL: 防止溢出
+      display: flex;
+      flex-direction: column;
+      min-height: 0; // 关键：允许 flex 子元素收缩
+    }
+
+    // 规则名称链接样式
+    .rule-name-link {
+      color: @primary-color;
+      cursor: pointer;
+      text-decoration: none;
+      transition: color 0.2s;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}

package/template/.cursor/skills/yss-page-module-development/references/frontend-docs.md

@@ -0,0 +1,11 @@
+# yss-page-module-development Frontend Documentation
+
+Generated: 2026-08-17T12:03:37.436Z
+
+Use these YSS UI documentation entry points as authoritative references when local repo examples are insufficient.
+
+- components: http://192.168.164.27:3200/components
+- hooks: http://192.168.164.27:3200/hooks
+- skills: http://192.168.164.27:3200/skills
+
+When documentation and local code differ, inspect the current project code before editing and prefer established local usage.