前端规范

代码风格与检查

图 1 · pnpm lint 的四道串联检查
  • 统一 Biome 格式化：Tab 缩进（宽度 4）、单引号，配置在 asone-front/biome.json。
  • src/services、public、.umi*、dist、node_modules 不参与 Biome 检查；src/services/asone-server 由 pnpm openapi 生成，但类型仍需与后端保持一致。
  • Lint 关闭项：noExplicitAny、useExhaustiveDependencies，以及部分 a11y 规则（noStaticElementInteractions、useKeyWithClickEvents）。
  • 提交前执行 pnpm lint，它是 biome:lint + tsc --noEmit + i18n-check + node --test "scripts/**/*.test.mjs" 的链式脚本，任一环节失败都不算通过。
cd asone-front
pnpm biome        # 按配置自动格式化与修复
pnpm lint         # 提交前全量检查
pnpm i18n-check   # 只查中英文案缺失

框架与组件用法

  • React 19：函数组件不再需要 forwardRef，ref 直接作为 props；不用字符串 ref、不用 findDOMNode、不给函数组件设 defaultProps。
  • antd 6 / ProComponents：列表页用 PageContainer + ProTable；数据驱动写法（items、menu）优先于子组件式旧写法。
  • 时间统一 dayjs，禁止 moment；样式用 Tailwind 4 原子类 + src/theme 设计变量，不在页面内写大段行内样式。
  • 接口调用只经过 src/services/asone-server/...，页面不直接 request；全局拦截在 src/globalRequestConfig.ts。
  • 权限：useAccess / usePageAccess + src/constants/permissions.ts，不散落硬编码权限字符串。
  • 国际化：所有面向用户的文案走 t('key')，zh-CN 与 en-US 同步补齐。

禁止过期 API

过期写法应写
visible / onVisibleChange（Modal / Drawer / Dropdown / Tooltip）open / onOpenChange
destroyOnClosedestroyOnHidden
bodyStyle / headStyle / dropdownStyle / dropdownClassNamestyles.body / styles.header / styles.popup.root、classNames
dropdownRenderpopupRender
bordered（Card / Table / Input）variant（outlined / borderless / filled）
Tabs.TabPane、Menu.Item、Dropdown 的 overlayitems、menu
ReactDOM.render / hydratecreateRoot / hydrateRoot
moment、moment-timezonedayjs

TypeScript 不会因 JSDoc @deprecated 报错，因此写组件属性前必须查当前版本文档；依赖过期情况用 pnpm outdated 自查。

依赖管理

  • 新增依赖只选官方出品且持续发布的库，已归档或标注 EOL 的不引入（request、node-fetch 2.x 等）。
  • 项目已有能力不重复引库：dayjs、@ant-design/charts、@antv/g6、bpmn-js、@dnd-kit、@file-viewer 已覆盖图表、流程图、拖拽与文件预览。
  • 使用 pnpm（devEngines 已约束包管理器），提交保持 pnpm-lock.yaml 同步更新，不用 npm / yarn 生成额外锁文件。