blood_vue/.trae/skills/blood-system/SKILL.md

name	description
blood-system	输血系统前端项目编码规范与业务约束。在编写、修改、审查输血系统(blood_vue)前端代码时自动应用，涵盖组件写法、TS类型、接口请求、表单校验、安全约束等规则。

项目基础信息

• 项目名称：输血系统
• 前端项目：blood_vue
• 后端项目：blood
• 技术栈：Vue3 + TypeScript + Element Plus + Vite + Pinia + Axios + scss
• 后端：springboot + mybatis + redis
• 数据库：sqlserver2008
• 编码语言：中文注释，提示、弹窗文案使用中文

强制编码规则

1. 组件统一使用 <script setup> 语法糖，禁止使用 Options API；单文件组件结构顺序：script setup lang="ts" → template → style
2. 变量命名：小驼峰；常量全大写下划线；组件名大驼峰；禁止拼音命名，业务字段使用业务英文缩写
3. TS类型：所有接口入参、返回体、表单对象必须定义 interface/type，禁止 any；尽量使用 readonly 约束只读数据
4. 样式：统一使用 scoped，优先使用 Element Plus 自带样式，自定义 class 采用 BEM 命名，禁止全局污染
5. 导入：按顺序导入：vue内置包 → 第三方依赖 → 项目组件 → 工具函数 → 静态资源；统一使用 import，不使用 require
6. 每次新增组件，需要增加组件注释说明

接口请求规范

1. 所有请求必须使用项目已封装 axios 实例，禁止直接原生 axios；统一拦截器处理 token、401、500
2. 后端返回固定结构 {code:number, msg:string, data:any}，code=200 或 0 代表成功；业务异常统一捕获提示
3. 接口请求必须写 TS 类型定义，请求参数、返回 data 都要定义 interface；增加注释说明接口用途、业务场景

表单 & 校验

1. Element Plus ElForm，表单校验规则抽离单独 rules 对象；必填项添加 required:true，提示文案友好
2. 检验项目、标本类型、状态下拉选项，统一维护枚举常量，不要硬编码写死在 template
3. 保存、提交按钮：提交期间增加 loading 状态，防止重复提交；表单提交前先触发全部校验

业务与安全约束

1. 禁止：前端硬编码密钥、token、账号密码；禁止直接拼接 SQL 相关参数；禁止 eval 危险函数
2. 弹窗提示：操作类动作（删除、取消、作废）必须增加确认弹窗；成功/失败给出 toast 提示

AI 输出约束

1. 输出代码优先完整片段，不要省略关键逻辑；新增组件同时补充 interface 类型
2. 给出代码后，附带简短说明：改动点、注意事项、需要后端配合的字段
3. 不要生成多余无关代码，保持简洁；如存在多种方案，优先选择和现有项目一致的写法
4. 如修改已有代码，先展示原有代码片段，再给出修改后的代码，标注改动位置