lovife
5b877451eb
旧模板的 193 个文件整体删除，换成纯 Vue 3.5 + Naive UI 2.42 的树。
- 去掉 auto-import（组件与 API 全显式 import）、v-hasPerm（改 user.has('码')，全库 8 处）、
Stylelint；n-tag 的 type 统一过 utils/tag.ts 转换（Arco 色词直接透传会静默变灰）
- 图标改为构建期抽取：scripts/extract-pc-icons.py -> icons/icon-data.ts（37 个），
内网离线部署不会白屏
- 重搭后修掉 6 类"编译 / lint / typecheck 全绿、界面上就是坏的"故障：
① NGrid 的 cols 写成像素值（不是断点名 -> 永远只 1 列，工作台因此错乱）
② n-tab-pane 用 tab 属性（只渲染空注释节点，整排 tab 一个字都不显示）
③ 漏 import 被当未知自定义元素（样式整块丢） ④ .n-card__content 类名不存在
（高度链第一环失效，表格行在 DOM 里但屏幕上没有） ⑤ 填报单状态映射错位一格
⑥ 有标题的卡片没有上内边距（naive 的 padding-top 只给"内容区是长子"的卡片）
- 卡片式版面提成全局基线：styles/index.scss 的 xt-* 令牌 + .page-card / .toolbar /
.section-title，页面只引用、不再各写一套
- 品牌：改名「深学在线」，文字标换成几何标（方 = 卷宗 / 环 = 在线，不用文字字形）；
index.html 的页签图标从 404 的 /favicon.ico 改指真实存在的 /favicon.svg
2.3 KiB
2.3 KiB
name, description
| name | description |
|---|---|
| code-ts | Vue 3 + TypeScript 命名、导入顺序、显式 import 与目录组织。编写或修改 .ts/.js 代码、新增 composable 或工具函数时加载本技能。 |
TypeScript 规范（Vue 3 + Naive UI）
Vue SFC 见 code-vue，样式见 code-css。
命名
- 组件文件：PascalCase（
AppIcon.vue、AuditDetailDrawer.vue）；工具/接口模块：kebab-case 或小写（export-task.ts、acting-tenant.ts）。 - 变量 / 函数：camelCase；事件处理用
handle前缀；Composables 用use前缀。 - 常量：
UPPER_SNAKE_CASE（如TENANT_STATUS）；展示映射放在src/apis/xt/<域>.ts里与接口同处。 - 样式 class：kebab-case（见 code-css）。
TypeScript
import type { ... }与值导入分开写（ESLint@antfu会强制）。- 对象结构优先
interface；联合/工具类型用type。 - Props 默认值：
withDefaults(defineProps<Type>(), { ... })；避免any。 - 接口出入参类型直接复用
src/apis/xt/里的契约类型，不要手写一份字段。
导入顺序（ESLint 会排）
- 类型导入（
import type） → 2. 第三方（vue/naive-ui/axios） → 3. 项目内部（@/apis、@/stores、@/utils、@/icons、@/composables）
⚠️ 本仓库没有 auto-import：naive-ui 组件、Vue API（ref/computed/h…）、工具函数必须显式 import。
不要写"为已自动导入的 API 写冗余 import"这类旧规范 —— 那是上一版（Gi 模板）的约定，现在写了才不报错。
常用内部模块
| 模块 | 用途 |
|---|---|
@/utils/http.ts |
axios 实例：成功直接 resolve data、失败弹提示、带 Authorization 与 X-Tenant-Id |
@/utils/naive.ts |
全局 message（在组件外用，如 http 拦截器） |
@/utils/tag.ts |
tagOf()：状态色词 → n-tag 的 type（必须过这一层） |
@/utils/format.ts |
fmtDate 等格式化 |
@/composables/pagination.ts |
listPagination()：列表页分页器统一参数 |
@/stores/user.ts |
useUserStore()：has('码') / hasAny(...) / menus / isPlatform |
@/stores/acting-tenant.ts |
平台运营的「当前学校」（请求头 X-Tenant-Id） |