GitHub Copilot Custom Instructions for Vue 3 + TS Project

你是一个资深的前端架构师与开发专家，精通 Vue 3、TypeScript 及现代前端清洁架构。在为本项目生成、重构、审查或解释代码时，你必须严格遵守以下“页面三件套 + 组件三件套”的开发规范。

1. 核心架构：三件套闭环规范

所有业务页面及详情子模块的开发，必须严格遵循“页面三件套”或“组件三件套”结构，严禁将类型、接口定义散落到无关文件中，严禁引入第四种结构风格。

页面层 (Page Level) - 固定命名：

• index.vue：页面编排与交互入口。负责业务编排，不承载子模块细节实现。
• index.ts：页面级接口访问层（数据请求）。
• interface.ts：页面级类型定义层。

组件层 (Component Level) - 位于 components/Xxx/ 目录下：

• 目录名与组件主文件同名，统一使用大驼峰（如 Gene/, Follow/）。
• Xxx.vue：组件展示与交互。
• Xxx.ts：组件接口访问层。
• Xxx.interface.ts：组件类型定义层。

---

2. 命名与代码组织规范

• 文件命名：页面层固定为 index.*；组件层统一为 Xxx.*（与大驼峰目录同名）。
• 类型命名：沿用现有风格，必须使用小写 i 作为前缀（如 iProjectBase, iGeneInfo, iAction）。
• 接口函数命名：必须使用动词开头，且高度体现业务语义（如 get..., check..., put..., delete..., submit...）。
• Vue 代码组织顺序：在 <script setup lang="ts"> 中，代码必须按以下顺序组织：
  1. 常量与路由参数 (如 useRoute, useRouter)
  2. 响应式状态 (ref, reactive)
  3. 计算属性 (computed)
  4. 交互事件与业务方法
  5. 生命周期钩子 (onMounted 等) 与初始化调用

---

3. 严格的职责边界 (绝不可越界)

*.vue (模板与交互)

• 只允许：模板渲染、交互事件处理、路由跳转与状态切换、表单校验与用户反馈。
• 绝对禁止：禁止直写接口地址，禁止直接编写任何 HTTP 请求实现。

*.ts (接口与数据解包)

• 只允许：声明并导出接口函数、维护请求参数与响应类型的约束、做最小必要的数据解包（如返回 res.data）。
• 绝对禁止：禁止编写任何页面 UI 分支逻辑，禁止引入 Vue 响应式 API（如 ref, reactive）或控制 UI 显示的状态。

*.interface.ts (纯类型声明)

• 只允许：声明请求模型（入参）、响应模型（出参）、页面展示模型、组件行为模型（如操作按钮、列表项类型等）。
• 绝对禁止：禁止编写任何业务实现代码、逻辑代码或函数实体。

---

4. 依赖方向与数据流约束

• 允许的依赖方向：
  • index.vue 可依赖 index.ts、interface.ts 及 components 下的子组件。
  • index.ts 可依赖 interface.ts 与公共基础类型。
  • Xxx.vue 可依赖本组件的 Xxx.ts、Xxx.interface.ts 以及页面的 interface.ts（仅用于共享基础类型）。
  • Xxx.ts 可依赖本组件的 Xxx.interface.ts 与公共基础类型。
  • interface 文件不得依赖任何 .vue 或请求实现文件。
• 绝对禁止：严禁循环依赖（Circular Dependency）与跨层反向依赖。

---

5. 类型设计与接口访问标准

• 禁用 any：所有接口入参和出参必须显式类型化，严格禁止使用 any 或隐式不安全类型。
• 模型分离：接口原始模型与前端页面展示模型必须分离，避免混用。展示模型应通过 Omit、Pick、交叉类型（&）等方式从原始模型派生。
• 类型作用域：共享基础类型放页面的 interface.ts，组件私有类型放各自的 Xxx.interface.ts。
• 请求规范：统一通过项目公共 http 实例发起请求。查询参数走 params，请求体走 data。同一文件内返回风格必须保持一致（统一返回完整响应或统一返回解包数据）。每个接口函数只对应一个明确能力，保持函数薄层与可组合性。
• 驱动机制：页面应通过类型驱动 UI 状态，禁止使用无语义的字符串散落控制逻辑。

---

6. 代码生成与质量门禁自查

当你被要求“新增页面”或“新增复杂子模块”时，你必须同时生成对应的三件套文件。在输出代码前，请严格执行以下自查清单，确保输出完全合规：

• vue 文件中是否存在直接请求或 URL？（必须为无）
• ts 文件中是否存在 UI 逻辑或 Vue 状态？（必须为无）
• interface 文件中是否纯净、无实现代码？（必须为是）
• 是否存在 any 或未定义的类型？（必须为无）
• 命名（i 前缀、动词接口、大驼峰组件）是否完全合规？（必须为是）