xuanzhi-service/web/AGENTS.md

AI 开发入口 [!IMPORTANT]

• 本文档要求：本文档为项目级别规范和重要导航，必须严格参考
• 本文档要求：本文档只允许在已有的结构上 CRUD，不允许增加其他标题区
• 本文档要求：.ai-specs 目录下新增/删除任何文档的时候都应该在本文档中修改 ## 项目文档
• 文档要求：规范型文档是给 AI 的顶层入口文档，不是“解释得更全”就更好，而是要更短、更硬、更可判定
• 代码优化：先复用再新增，允许抽公共逻辑，但公共逻辑必须保证边界仍清晰
• 代码优化：优化代码时必须同时考虑冗余、孤岛代码、代码清晰度、复杂度、边界条件和兼容性，不能只追求功能跑通；不要修改 UI/UX 视觉效果，除非明确要求
• 代码默认遵循：业务流程需要遵循 主流做法 工业级正规
• 代码默认遵循：强制工作流：按 ## 项目文档 定位需要的文档 → 读取匹配文档 → 进入源码

工具使用规则

• 搜索范围限制：Grep/Glob 严禁全盘搜索，绝对禁止扫描 .gitignore 忽略的目录，以避免性能卡顿
• 读写：所有文件读取/写入统一使用 UTF-8（建议无 BOM）
• 读写：PowerShell/脚本读取项目文件必须显式指定 -Encoding utf8
• 画图：优先使用 mermaid flowchart
• 对话/文档编写：必须是中文为主体语言，技术术语保留英文原文

项目架构

• 技术栈：本项目为 Vue 3 + Vite 前端工程，基于 gin-vue-admin web 体系；路由使用 Vue Router 4，状态管理使用 Pinia，HTTP 请求使用 Axios，UI 组件库使用 Element Plus，构建与环境变量由 Vite 管理，样式体系包含 SCSS 与 UnoCSS

• 代码链路：本项目采用 Router / Permission → View → Components / Hooks → API → Request → Backend 主链路

• Pinia 作为跨页面共享状态层，贯穿 Permission、View、API；Plugin 作为插件化业务子目录，内部可有自己的 api / view / form，但仍受主应用工程规则约束

  ├── web ├── public (静态公开资源) ├── src │ ├── api (主应用接口层) │ ├── assets (构建期静态资源) │ ├── components (跨页面复用组件) │ ├── core (项目基础配置与初始化) │ ├── directive (全局指令) │ ├── hooks (复用组合逻辑) │ ├── pinia (全局状态) │ │ └── modules (状态模块) │ ├── plugin (插件化业务目录) │ ├── router (静态路由入口) │ ├── style (全局样式与覆盖) │ ├── utils (通用工具与请求基座) │ ├── view (页面级目录) │ ├── App.vue (根组件) │ ├── main.js (应用入口) │ └── permission.js (全局路由守卫) ├── .env.development (开发环境变量) ├── .env.production (生产环境变量) ├── package.json (脚本与依赖) └── vite.config.js (Vite 配置)

层级	职责	命名规范
Router / Permission	定义静态路由、接管全局守卫、处理登录态、动态路由注册和页面进入规则；禁止承载页面展示逻辑	路由入口固定 src/router/index.js；守卫入口固定 src/permission.js
View	承载页面编排、页面生命周期、页面局部状态和页面级接口调用；禁止把复用逻辑长期堆在页面中	页面目录固定 src/view/<module>；页面入口优先 index.vue
Components	承载跨页面复用 UI 组件和局部交互能力；禁止直接绑定具体页面路由语义	目录固定 src/components/<component>；组件入口优先 index.vue 或具名 .vue
Hooks	承载跨页面复用行为逻辑；禁止承载模板和页面路由配置	目录固定 src/hooks；新 hooks 优先使用 useXxx.js
API	承载接口函数和参数组织；禁止重复实现 token、401、loading 等全局请求逻辑	主应用目录固定 src/api/<module>.js；插件接口固定 src/plugin/<plugin>/api/<module>.js
Request	承载 Axios 实例、token 注入、全局 loading、统一错误处理和 401 跳转	请求基座固定 src/utils/request.js
Pinia	承载跨页面共享状态；禁止把单页面临时状态全部塞进全局 store	模块目录固定 src/pinia/modules/<module>.js；store 导出使用 useXxxStore
Style	承载全局样式、重置样式和 Element Plus 覆盖；禁止把页面局部样式长期上提到全局	样式目录固定 src/style；Element Plus 覆盖优先放在 src/style/element*
Plugin	承载插件化业务代码，优先在插件目录内部自洽；禁止复制主应用基础设施	目录固定 src/plugin/<plugin>；常见子目录为 api、view、form

• 新增页面时，主落点一律放在 src/view/<module>。
• 新增接口时，主应用放在 src/api，插件接口放在 src/plugin/<plugin>/api。
• 新增跨页面复用组件时，统一放在 src/components。
• 新增跨页面共享行为逻辑时，统一放在 src/hooks。
• 新增全局共享状态时，统一放在 src/pinia/modules。
• 新增插件功能时，优先在 src/plugin/<plugin> 目录内闭环实现。

架构关系

• 关系总线：sys-specs / coding-specs → Router / Permission → View → Components / Hooks / API → Request，其中 Pinia 贯穿登录态、动态路由和跨页面共享状态；Plugin 沿用主应用同一套请求、路由、状态和样式基础设施

flowchart LR
    SPEC["sys-specs / coding-specs"] --> Router
    Router["Router / Permission"] --> View
    View --> Components["Components / Hooks"]
    View --> API
    API --> Request["utils/request.js"]
    Pinia --> Router
    Pinia --> View
    Pinia --> API
    Plugin["plugin/*"] --> View
    Plugin --> API
    Request --> Backend["Backend"]

• 改 view：必须同步检查对应 api、pinia、路由入口、页面标题、keep-alive、权限显示是否仍一致
• 改 components：必须同步检查调用页面、props、events、slots 和样式兼容性
• 改 hooks：必须同步检查调用方是否仍满足生命周期和响应式前提
• 改 api：必须同步检查 src/utils/request.js 契约、调用页面、store、错误提示和返回值结构
• 改 src/utils/request.js：必须同步检查 token 注入、loading、401 跳转、上传下载和插件接口兼容性
• 改 pinia：必须同步检查页面初始化、动态路由依赖、缓存和持久化字段
• 改 router / permission.js：必须同步检查白名单、动态路由注入、默认首页、菜单跳转和未登录跳转
• 改 style：必须同步检查全局覆盖范围，避免误伤登录页、主布局页和插件页
• 改 plugin/*：必须同步检查插件内部 api / view / form 是否自洽，以及是否错误侵入主应用公共层

项目文档

• 根目录：.ai-specs
• 要求：开始写代码前，根据任务类型先定位目录，再读取对应文档；有对应文档必须先读
• 兜底：索引表无匹配时，按本文件通用规则和现有同层代码风格实现

coding-specs 存放对前端功能代码的说明/限制/要求

路径	用途	说明
.ai-specs\coding-specs\page-view-component-split.md	规定 view / components / hooks 的边界与默认落点	涉及新增页面、抽公共组件、抽 hooks 时必读
.ai-specs\coding-specs\api-request-flow.md	规定 api 与 request.js 的分层、错误处理和请求链路	涉及新增接口、修改请求封装、上传下载、统一错误处理时必读
.ai-specs\coding-specs\router-permission-route.md	规定静态路由、动态路由、白名单和权限链路	涉及新增页面路由、登录跳转、菜单进入、默认首页时必读
.ai-specs\coding-specs\pinia-store-boundary.md	规定共享状态和页面状态的分层边界	涉及新增 store、共享状态、状态持久化时必读
.ai-specs\coding-specs\plugin-module-structure.md	规定 plugin/* 的目录结构和与主应用公共层的关系	涉及新增插件、修改插件目录、决定代码是否上提时必读
.ai-specs\coding-specs\style-asset-spec.md	规定全局样式、静态资源和主题覆盖的修改边界	涉及全局样式、Element Plus 覆盖、资源路径时必读

sys-specs 存放前端系统级文档

路径	用途	说明
.ai-specs\sys-specs\frontend-directory-spec.md	规定前端工程目录总体结构和新增代码的默认落点	涉及新增目录、移动文件、决定代码放置位置时必读
.ai-specs\sys-specs\naming-import-path-spec.md	规定命名、导入路径、别名和导出风格	涉及新增文件、目录命名、导入路径调整时必读
.ai-specs\sys-specs\env-build-spec.md	规定环境变量、Vite 构建配置和 scripts 修改边界	涉及 .env.*、vite.config.js、package.json scripts 时必读

可复用代码/组件

中文	代码文件名	说明
请求基座	src/utils/request.js	统一 Axios 实例、token、loading、错误处理、401 跳转
路由守卫	src/permission.js	统一登录态校验、动态路由注册、页面进入和跳转规则
路由状态	src/pinia/modules/router.js	统一异步路由、keep-alive 和默认首页相关状态
用户状态	src/pinia/modules/user.js	统一 token、用户信息和登录态清理
事件总线	src/utils/bus.js	提供跨组件的全局 mitt 事件能力