refactor(pc): 从 Gi Admin Pro + Arco 重搭为纯 Vue 3 + Naive UI
旧模板的 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
This commit is contained in:
@@ -0,0 +1,37 @@
|
||||
import type { PaginationProps } from 'naive-ui'
|
||||
|
||||
/**
|
||||
* 列表页分页器的统一参数。
|
||||
*
|
||||
* ## 为什么要有这个文件
|
||||
* 手写 `pagination` 对象时,`prefix` 的类型最容易写错:
|
||||
* ```ts
|
||||
* // ✗ 这样写 vue-tsc 会报 TS2322:naive 给的 info 里 itemCount 是 `number | undefined`
|
||||
* pagination: { prefix: ({ itemCount }: { itemCount: number }) => `共 ${itemCount} 条` }
|
||||
* ```
|
||||
* 报错信息很长(说的是 `RenderPrefix` 不兼容),而真正的原因只是**少了个 `?`**。
|
||||
* 三个列表页各踩一次不值得,所以收口到这里。
|
||||
*
|
||||
* ## 另一个踩过的坑(与类型无关,但同样只在运行时暴露)
|
||||
* naive 的 `n-data-table` 在 `pagination` 非 false 时会**自己再切一次数据**
|
||||
* (内部 `flattenData`)。所以远程分页必须同时:
|
||||
* ① `remote` 打开;② `:pagination` 的 `page`/`pageSize` 由**我们**控制;
|
||||
* ③ 处理 `@update:page` 与 `@update:page-size` **两个**事件并重新取数。
|
||||
* 只改本地每页条数不重新取数,就会出现"分页器说 50 条/页、表里还是 20 条"。
|
||||
*/
|
||||
export function listPagination(opts: {
|
||||
page: number
|
||||
pageSize: number
|
||||
itemCount: number
|
||||
pageSizes?: number[]
|
||||
}): PaginationProps {
|
||||
return {
|
||||
page: opts.page,
|
||||
pageSize: opts.pageSize,
|
||||
itemCount: opts.itemCount,
|
||||
showSizePicker: true,
|
||||
pageSizes: opts.pageSizes ?? [10, 20, 50, 100],
|
||||
// ⚠️ `itemCount?: number` 里的 `?` 是必需的(见上方注释)
|
||||
prefix: (info: { itemCount?: number }) => `共 ${info.itemCount ?? 0} 条`
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user