---
name: k12-frontend-import-alias
description: 当任务涉及 frontend 导入路径调整时使用，统一使用 @ 别名并禁止 ../ 上跳相对导入
---
# K12 前端导入别名规范技能
## 何时使用
- 修改 `frontend/src` 下任意 `ts/tsx/js` 文件
- 新增组件、页面、路由、API、store、utils 模块
- 代码评审指出存在 `../`、`../../` 上跳导入
## 规范规则
- 跨目录导入统一使用 `@/` 别名路径（如 `@/api`、`@/components`）。
- 禁止使用 `../`、`../../` 等上跳相对导入。
- 禁止使用以 `/` 开头的模块导入路径（如 `from "/utils/http"`）。
- 同目录导入允许使用 `./`（如 `./index.scss`、`./types`）。
## 执行步骤
1. 搜索并定位 `frontend/src` 内所有 `../` 与 `/` 绝对导入。
2. 将跨目录导入替换为 `@/` 别名。
3. 运行前端构建验证（`pnpm --dir frontend build`）。
## 约束
- 不改变业务逻辑，仅在导入路径层面做规范化修改（除非用户另有要求）。
- 保持 `tsconfig.json` 与 `vite.config.ts` 的别名配置一致。