首页 › 前端开发综合论坛 › 前端开发规范文档

合江华硕电脑及监控安装 發表於 2024-7-10 14:17:00

前端开发规范文档

<h1 id="前端开发规范文档">前端开发规范文档</h1>
<h1 id="规范文档">规范文档</h1>
<p>持续更新的前端开发规范文档，文档中描述了前端开发的各种规范。<strong>如果有更好的建议，欢迎提交。</strong></p>
<h2 id="目录">目录</h2>
<ul>
<li>文档规范</li>
<li>约定规范
<ul>
<li>项目结构</li>
<li>内部约定</li>
<li>内部 SDK</li>
</ul>
</li>
<li>文案规范 (2025-04-18 新增)</li>
<li>命名规范
<ul>
<li><strong>规范哲学</strong></li>
<li><strong>目录命名</strong></li>
<li><strong>文件命名</strong></li>
<li><strong>程序命名</strong></li>
<li>路由命名（2025-10-27 新增）</li>
</ul>
</li>
<li>图标规范</li>
<li>模块规范</li>
<li>组件规范</li>
<li>代码规范</li>
<li>格式规范</li>
<li>GitOps 规范 (2025-04-03 更新)</li>
<li>测试规范</li>
<li>应用规范
<ul>
<li>应用生命周期设计 Lifecycle Hooks</li>
<li>多语言 &amp; 国际化 Multi-languages &amp; Internationalization</li>
<li>应用配置与枚举 Configurations and Enums</li>
<li>身份认证与权限 Auth &amp; Permission</li>
<li>应用储存与缓存 Application Storage &amp; Cache</li>
<li>表单字段与校验 From Field &amp; Validator</li>
<li>常见副作用 Common side effects</li>
<li>资源处理 Resource processing</li>
<li>提效工具 Tools</li>
<li>工作流工具 CI/CD</li>
</ul>
</li>
<li>页面视觉规范 (2025-03-18 新增)</li>
<li>其他规范</li>
</ul>
<h2 id="文档规范">文档规范</h2>
<p>如何编写一个好的文档，工程介绍 Readme 和技术文档 Docmentation.</p>
<ul>
<li>工程介绍: How to write a good README file</li>
<li>技术文档: Documentation standards</li>
</ul>
<h2 id="约定规范">约定规范</h2>
<p>描述工程中的常见约定规范，包括：</p>
<ul>
<li>项目结构</li>
<li>内部约定</li>
<li>内部 SDK</li>
</ul>
<h3 id="项目结构">项目结构</h3>
<p><strong>规范哲学</strong></p>
<ul>
<li>所有的功能和逻辑，只跟模块相关的，都应该放在该模块下，模块之间保持独立性，互相独立，互不关心，完全解耦。</li>
<li>不要把所有的相关功能行为都放进一个全局的文件维护，这是反模式的设计。所有的设计模式都是为了<strong>高内聚，低耦合</strong>。</li>
</ul>
<p>例如：把所有业务模块的 api service 耦合到一个大的 allApi.js 是并不明智的做法，这样做变成了<strong>高内聚，高耦合。</strong>限制代码的可重用性，降低了代码的可维护性和可扩展性。</p>
<ul>
<li>高耦合：意味着如果某个模块的 Service 发生变化，可能会影响到其他模块。这违背了模块化设计的原则，应该尽量减少模块之间的依赖关系。</li>
<li>维护成本：一个大的全局文件会变得非常庞大，难以管理和维护。每次需要添加或修改 Service 时，都需要修改这个文件，这可能会引发各种问题，比如<strong>冲突</strong>、<strong>漏洞</strong>等。</li>
<li>测试成本：将所有的 API Service 都放在一个文件中，会使得测试变得困难。每次需要测试某个 API Service 时，都需要加载整个文件，这可能会导致测试时间过长。</li>
</ul>
<p><strong>最佳实践</strong></p>
<ul>
<li>全局性功能 - 放置到<strong>全局文件目录</strong>，使用 <code>@/{moduleName}.{featName}.{ts|js}</code>&nbsp;引入。意义即：<strong>全局公有，全局共有，对外暴露，全局使用</strong>
<ul>
<li>全局组件 - src/components</li>
<li>全局常量 - src/constants</li>
<li>全局服务 - src/services</li>
<li>全局工具 - src/utils</li>
<li>全局接口 - src/interfaces</li>
<li>全局钩子 - src/hooks</li>
<li>全局主题 - src/themes</li>
<li>全局验证 - src/validations</li>
<li>全局样式 - src/styles</li>
<li>全局翻译 - src/locales</li>
<li>全局类型 - src/types</li>
<li>全局三方库 - src/libs</li>
<li>全局 Context - src/contexts</li>
<li>全局模版 - src/templates</li>
<li>全局包 - src/packages
<ul>
<li>Monorepo 的使用场景</li>
</ul>
</li>
<li>Others ...</li>
</ul>
</li>
<li>业务性功能 - <strong>放置到模块内部</strong>，并使用 <code>modules/{moduleName}</code> 声明。意义即：<strong>模块内部私有，不对外暴露，非本模块内部的外部最好不要使用</strong>
<ul>
<li>现在使用<strong>约定式路由</strong>可以把 <code>_</code> 前缀去掉，因为不再需要通过 <code>_</code> 区分 public/private 的 page/component （2025 年 3 月 4 日更新）</li>
<li>模块组件 - <code>auth/components/AuthRoleSelector/index.tsx</code> 仅服务于当前业务的组件，不对外暴露，不对外使用</li>
<li>模块服务 - <code>auth/services/AuthRoleApi.service.ts</code> 仅服务于当前业务的服务，可以是 API，也可以是其他功能定义</li>
<li>模块钩子 - <code>auth/hooks/AuthRole.hook.ts</code> 仅服务于当前业务的钩子</li>
<li>模块 Context - <code>auth/contexts/AuthRole.context.ts</code> 仅服务于当前业务的数据</li>
<li>...</li>
</ul>
</li>
</ul>
<h3 id="内部约定">内部约定</h3>
<ul>
<li>所有的 table 的实体名，使用 <code>fixed=”left”</code> 固定到左侧，方便用户使用</li>
<li>所有的 table 的操作列，使用 <code>fixed=“right”</code> 固定到右侧，方便用户操作</li>
<li>所有的请求函数，使用 <code>async/await</code> + <code>try catch finally</code> 格式，为了更好的维护体验
<ul>
<li>在 try 中的&nbsp;await 之后判断 code 状态码是否正常，使用 <code>isRightSystemResponse</code></li>
<li>在 finally 中处理 loading = false</li>
<li>在 catch 中处理 error （通常拦截器会统一处理异常，但某些特例 code 的情况下需要手动处理）</li>
</ul>
</li>
</ul>
<h3 id="内部-sdk">内部 SDK</h3>
<ul>
<li>日期操作：使用 dayjs，其它功能扩展再通过插件引入即可。</li>
<li>工具方法：使用 lodash-es，支持 ESM 的 Tree-shaking 和无需配置按需加载。</li>
<li>表单校验：使用 zod， 围绕尽可能友好的开发体验而设计。</li>
<li>状态管理：使用 zustand，可能是 React 目前最好用的 State Management Library</li>
</ul>
<h2 id="文案规范">文案规范</h2>
<blockquote>
<p>文案是产品与用户最直接的沟通方式，输出正确、一致的文案，是产品设计中不可或缺的一部分。 —— 摘自 SemiDesign 文案规范</p>
</blockquote>
<ul>
<li>文案与代码分离</li>
<li>文案术语词典</li>
<li>用户体验优化</li>
</ul>
<h3 id="文案与代码分离"><strong>文案与代码分离</strong></h3>
<ul>
<li>
<p><strong>使用外部资源文件</strong>：将文案存储在独立文件（如 JSON、YAML）或国际化库（如 i18next、Vue I18n）中，避免硬编码。</p>
<pre><code class="language-json">// en.json
{
"button": {
    "submit": "Submit",
    "cancel": "Cancel"
}
}
</code></pre>
</li>
<li>
<p><strong>按模块/功能分类</strong>：通过层级结构组织文案（如&nbsp;<code>login.title</code>,&nbsp;<code>error.invalidEmail</code>），提升可维护性。</p>
</li>
</ul>
<h3 id="文案术语词典">文案术语词典</h3>
<ul>
<li>
<p><strong>交互操作类，</strong>常见的交互操作</p>
<table>
<thead>
<tr>
<th><strong>中文术语</strong></th>
<th><strong>英文映射</strong></th>
<th><strong>使用场景</strong></th>
<th><strong>禁用近义词</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>新增</td>
<td>Add</td>
<td>新增实体数据、集合条目</td>
<td>创建、新建</td>
</tr>
<tr>
<td>添加</td>
<td>Attach</td>
<td>建立对象间关联关系</td>
<td>增加</td>
</tr>
<tr>
<td>编辑</td>
<td>Edit</td>
<td>对数据进行修改</td>
<td>修改、操作</td>
</tr>
<tr>
<td>提交</td>
<td>Submit</td>
<td>表单最终确认操作</td>
<td>递交、发送</td>
</tr>
<tr>
<td>保存</td>
<td>Save</td>
<td>临时存储非最终操作</td>
<td>暂存、存储</td>
</tr>
<tr>
<td>重置</td>
<td>Reset</td>
<td>表单恢复初始状态</td>
<td>清除、还原</td>
</tr>
<tr>
<td>刷新</td>
<td>Refresh</td>
<td>数据/页面重新加载</td>
<td>更新、重载</td>
</tr>
<tr>
<td>展开</td>
<td>Expand</td>
<td>显示更多内容</td>
<td>打开、展示</td>
</tr>
<tr>
<td>收起</td>
<td>Collapse</td>
<td>隐藏部分内容</td>
<td>关闭、折叠</td>
</tr>
</tbody>
</table>
<div class="mermaid">graph LR
    A[用户操作] --&gt; B{操作对象类型}
    B --&gt;|独立实体| C[创建新项目]
    B --&gt;|集合条目| D[新增数据记录]
    B --&gt;|关联关系| E[添加权限]
</div><h3 id="关于-创建新增添加-冲突解决原则"><strong>关于 创建/新增/添加 冲突解决原则</strong></h3>
<ol>
<li><strong>层级优先</strong>：
<ul>
<li>系统级操作优先使用"创建"（如创建租户）</li>
<li>业务级操作使用"新增"（如新增订单）</li>
<li>关系型操作使用"添加"（如添加标签）</li>
</ul>
</li>
<li><strong>用户心智模型匹配</strong>：
<ul>
<li>需要二次配置的操作使用"添加"（添加审批人需要选择已有用户）</li>
<li>直接生成新实例的操作使用"创建"（创建新应用生成唯一AppID）</li>
</ul>
</li>
</ol>
</li>
<li>
<p><strong>数据状态类</strong>，同 Ant Design 枚举的映射</p>
<table>
<thead>
<tr>
<th><strong>中文术语</strong></th>
<th><strong>英文映射</strong></th>
<th><strong>使用场景</strong></th>
<th><strong>状态标识色</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>默认</td>
<td>Default</td>
<td>默认状态</td>
<td>-</td>
</tr>
<tr>
<td>成功</td>
<td>Success</td>
<td>操作完成且符合预期</td>
<td>绿色</td>
</tr>
<tr>
<td>警告</td>
<td>Warning</td>
<td>需要用户注意的非阻塞性提示</td>
<td>橙色</td>
</tr>
<tr>
<td>错误</td>
<td>Error</td>
<td>操作失败或系统异常</td>
<td>红色</td>
</tr>
<tr>
<td>进行中</td>
<td>Processing</td>
<td>异步操作等待结果</td>
<td>蓝色</td>
</tr>
<tr>
<td>已禁用</td>
<td>Disabled</td>
<td>不可交互状态</td>
<td>灰色</td>
</tr>
</tbody>
</table>
</li>
<li>
<p><strong>技术概念类</strong></p>
<table>
<thead>
<tr>
<th><strong>中文术语</strong></th>
<th><strong>英文映射</strong></th>
<th><strong>定义</strong></th>
<th><strong>代码命名规范</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>应用</td>
<td>App</td>
<td>整个前端项目</td>
<td><strong><code>App</code></strong></td>
</tr>
<tr>
<td>页面</td>
<td>Page</td>
<td>路由级视图组件</td>
<td><strong><code>UserPage</code></strong></td>
</tr>
<tr>
<td>组件</td>
<td>Component</td>
<td>可复用的UI单元</td>
<td><strong><code>TableComponent</code></strong></td>
</tr>
<tr>
<td>服务</td>
<td>Service</td>
<td>数据获取/业务逻辑处理</td>
<td><strong><code>user.service.ts</code></strong></td>
</tr>
<tr>
<td>钩子</td>
<td>Hook</td>
<td>逻辑复用模块（React）</td>
<td><strong><code>useFetchData</code></strong></td>
</tr>
<tr>
<td>仓库</td>
<td>Store</td>
<td>状态管理容器（Vuex/Pinia）</td>
<td><strong><code>user.store.ts</code></strong></td>
</tr>
</tbody>
</table>
</li>
<li>
<p><strong>电商场景领域术语示例</strong></p>
<table>
<thead>
<tr>
<th><strong>中文术语</strong></th>
<th><strong>英文映射</strong></th>
<th><strong>定义</strong></th>
<th><strong>相关组件</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>商品</td>
<td>Product</td>
<td>可购买物品的抽象实体</td>
<td><strong><code>ProductCard</code></strong></td>
</tr>
<tr>
<td>购物车</td>
<td>Cart</td>
<td>用户暂存选购商品的容器</td>
<td><strong><code>CartSidebar</code></strong></td>
</tr>
<tr>
<td>优惠券</td>
<td>Coupon</td>
<td>折扣/满减凭证</td>
<td><strong><code>CouponSelector</code></strong></td>
</tr>
<tr>
<td>秒杀</td>
<td>Flash Sale</td>
<td>限时抢购活动</td>
<td><strong><code>CountdownTimer</code></strong></td>
</tr>
<tr>
<td>物流</td>
<td>Logistics</td>
<td>商品配送相关信息</td>
<td><strong><code>ShippingInfo</code></strong></td>
</tr>
</tbody>
</table>
</li>
<li>
<p><strong>SaaS 系统领域术语示例</strong></p>
<table>
<thead>
<tr>
<th><strong>中文术语</strong></th>
<th><strong>英文映射</strong></th>
<th><strong>定义</strong></th>
<th><strong>权限级别</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>工作台</td>
<td>Workspace</td>
<td>用户主操作界面</td>
<td>全局可见</td>
</tr>
<tr>
<td>租户</td>
<td>Tenant</td>
<td>独立客户实例</td>
<td>系统管理员可见</td>
</tr>
<tr>
<td>角色</td>
<td>Role</td>
<td>权限集合定义</td>
<td>带权限控制</td>
</tr>
<tr>
<td>审计</td>
<td>Audit</td>
<td>操作记录追踪</td>
<td>日志相关组件</td>
</tr>
</tbody>
</table>
</li>
</ul>
<h3 id="用户体验优化"><strong>用户体验优化</strong></h3>
<ul>
<li>
<p><strong>清晰简洁</strong>：避免技术术语（如“404错误” → “页面未找到”）。</p>
<table>
<thead>
<tr>
<th><strong>错误场景</strong></th>
<th><strong>标准文案模板</strong></th>
<th><strong>技术映射</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>网络异常</td>
<td>网络连接不可用，请检查后重试</td>
<td><strong><code>network_error</code></strong></td>
</tr>
<tr>
<td>权限不足</td>
<td>当前账号无权访问此功能</td>
<td><strong><code>permission_denied</code></strong></td>
</tr>
<tr>
<td>数据加载失败</td>
<td>信息获取失败，点击重新加载</td>
<td><strong><code>data_fetch_failed</code></strong></td>
</tr>
<tr>
<td>表单校验错误</td>
<td>请完善标 * 的必填项</td>
<td><strong><code>form_validation_failed</code></strong></td>
</tr>
<tr>
<td>会话过期</td>
<td>登录状态已过期，请重新登录</td>
<td><strong><code>session_expired</code></strong></td>
</tr>
</tbody>
</table>
</li>
<li>
<p><strong>错误提示友好化</strong>：明确问题并提供解决方案（如“密码需至少8位，包含字母和数字”）。通用错误模板：</p>
<pre><code class="language-markdown">**{错误类型}**
{问题描述}

**解决方案**:
1. {操作步骤1}
2. {操作步骤2}
[需要帮助？联系支持团队](mailto:support@company.com)
</code></pre>
</li>
<li>
<p><strong>统一语气与风格</strong>：根据产品定位选择正式或亲切的语气，并全局保持一致。</p>
</li>
</ul>
<h2 id="命名规范">命名规范</h2>
<table>
<thead>
<tr>
<th>命名方式</th>
<th>小驼峰</th>
<th>大驼峰</th>
<th>短横线</th>
<th>下划线</th>
<th>全大写</th>
</tr>
</thead>
<tbody>
<tr>
<td>命名缩写</td>
<td><strong>camelCase</strong></td>
<td><strong>PascalCase</strong></td>
<td><strong>kebab-case</strong></td>
<td><strong>snake_case</strong></td>
<td><strong>UPPER_CASE</strong></td>
</tr>
<tr>
<td>约定写法</td>
<td>单词之间用大写字母分隔，第一个单词的首字母小写。</td>
<td>单词之间用大写字母分隔，每个单词的首字母都大写。</td>
<td>单词之间用短横线 <code>-</code> 分隔，所有字母小写。</td>
<td>单词之间用下划线&nbsp;<code>_</code>&nbsp;分隔，所有字母小写。</td>
<td>单词之间用下划线&nbsp;<code>_</code>&nbsp;分隔，所有字母大写。</td>
</tr>
<tr>
<td>常用场景</td>
<td>变量名</td>
<td>类名、接口名、构造函数、组件名</td>
<td>URL、文件名、WebComponent</td>
<td>变量、函数、数据库字段</td>
<td>常量、枚举</td>
</tr>
<tr>
<td>示例 1</td>
<td><code>firstName</code></td>
<td><code>Person</code></td>
<td><code>page-title</code></td>
<td><code>first_name</code></td>
<td><code>MAX_SIZE</code></td>
</tr>
<tr>
<td>示例 2</td>
<td><code>loginButton</code></td>
<td><code>LoginForm</code></td>
<td><code>user-avatar</code></td>
<td><code>user_profile</code></td>
<td><code>ERROR_CODE</code></td>
</tr>
<tr>
<td>示例 3</td>
<td><code>userProfile</code></td>
<td><code>IPlugin</code></td>
<td><code>test-demo</code></td>
<td><code>__main__</code></td>
<td><code>HTTP_STATUS</code></td>
</tr>
</tbody>
</table>
<ul>
<li>规范哲学</li>
<li>目录命名</li>
<li>文件命名</li>
<li>程序命名</li>
</ul>
<h3 id="规范哲学">规范哲学</h3>
<ul>
<li>不修改的字段即<strong>常量</strong>使用 <strong><code>UPPER_CASE</code></strong></li>
<li>不常修改的字段即<strong>变量</strong>使用 <strong><code>PascalCase</code></strong>，即不是常量，也不是变量，介于两者之间</li>
<li>经常修改的字段即<strong>变量</strong>使用 <strong><code>camelCase</code></strong></li>
<li><strong>数据库</strong>或<strong>接口</strong>字段使用 <strong><code>snake_case</code></strong></li>
</ul>
<h3 id="目录命名"><strong>目录</strong>命名</h3>
<p>参见上文中的 内部规则 - 全局性功能 - 全局文件目录：</p>
<ul>
<li>
<p><strong>config</strong> - 配置文件集合目录，使用 <code>PascalCase</code> 命名</p>
<ul>
<li>global.config.ts - 全局配置文件</li>
<li>app.config.ts - 应用配置文件</li>
<li>database.config.ts - 数据库配置文件</li>
</ul>
</li>
<li>
<p><strong>constants</strong> - 放置常量、枚举，使用 <code>PascalCase</code> 命名</p>
<ul>
<li>
<p><strong>配置常量</strong>：SystemConfig.const.ts</p>
<pre><code class="language-tsx">import packageJson from '../../package.json'

export const APP_NAME = packageJson.name
export const APP_VERSION = packageJson.version
</code></pre>
</li>
<li>
<p><strong>枚举常量</strong>：UserStatusEnum.const.js - 用户状态</p>
<ul>
<li>
<p><strong>枚举定义</strong>：是一组值的集合。类似于 Python 中的 Dictionary + Tuple，具名 Key + 不可变 Value.</p>
<ul>
<li>
<p>枚举名称：使用 <code>PascalCase</code>，枚举字段同使用 <code>PascalCase</code> 声明。比如说 TypeScript 中的枚举定义:</p>
<pre><code class="language-tsx">/**
* 用户状态 枚举定义
*/
export const UserStatusEnum = {
/** 0 - 正常 */
Normal: 0,
/** 1 - 禁用 */
Banned: 1
}
</code></pre>
<ul>
<li><code>enum Color { Red, Green, Yellow }</code></li>
<li><code>enum UserStatusEnum { Normal = 0, Banned = 1 }</code></li>
</ul>
</li>
</ul>
</li>
<li>
<p><strong>枚举对象：</strong>是对枚举定义的补充，是对枚举值的意义的解释的补充，比如:</p>
<pre><code class="language-tsx">/**
* 用户状态 枚举对象
*/
export const UserStatus = {
Normal: {
    label: '正常',
    value: UserStatusEnum.Normal,
},
Banned: {
    label: '禁用',
    value: UserStatusEnum.Banned,
},
}
</code></pre>
<ul>
<li>
<p>在代码中获取对应枚举值的 <code>label</code> 或 <code>value</code> 用于 <code>if</code> 或 <code>swith</code> 等相关的条件判断</p>
</li>
<li>
<p>在代码中通过编写&nbsp;<code>UserStatus.Normal.value</code> 这样的代码提升代码的<strong>可读性</strong>和<strong>可维护性</strong></p>
<pre><code class="language-jsx">if (response.userStatus === UserStatus.Normal.value) {}
</code></pre>
</li>
</ul>
</li>
<li>
<p><strong>枚举列表</strong>，很多业态需要遍历枚举对象的值。比如：Select, Checkbox, RadioGroup：</p>
<pre><code class="language-jsx">const UserStatusList = Object.values(UserStatus)
</code></pre>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p><strong>services</strong> - 放置公共服务，使用 <code>PascalCase</code>，通常暴露出来一个 Service class，用以被实例化或上下文注入。用例及场景：</p>
<ul>
<li>
<p>作为一个职责单一的<strong>纯函数</strong>方法被其他逻辑方法依赖使用，<strong>便于代码细粒度的拆分和组合</strong>。</p>
<ul>
<li>UserApi.service.js - 用户相关 API 接口的服务，其他任意模块都可以通过调用 <code>UserApi.fetchUserById(userId: number)</code> 获取用户信息数据。</li>
</ul>
</li>
<li>
<p>作为一个封装了<strong>所有跟服务端通信的服务集合</strong>，<strong>暴露出去 Service 的命名空间</strong>，增加代码可读性和可维护性。且通常<strong>一个前端的 Service class 对应一个后端的 Controller class</strong>。</p>
<pre><code class="language-tsx">// 上方放置用户服务 UserService 的类型声明
export declare namespace UserService {
type CurrentUser = {
    token: string;
    user_info: {
      avatar: string;
      login_name: string;
      real_name: string;
      email: string;
      work_no: string;
    };
    permissions: string[];
    roles: string[];
};

type LoginResult = {
    status?: string;
    type?: string;
    currentAuthority?: string;
};

type FakeCaptcha = {
    code?: number;
    status?: string;
};

type LoginParams = {
    username?: string;
    password?: string;
    autoLogin?: boolean;
    type?: string;
};
}

// 下方放置用户服务 UserService 的服务方法实现
export class UserService {
        /**
       * 获取当前的用户 POST /api/currentUser
       * @see {@link https://fox-yapi.kuainiujinke.com/project/36/interface/api/739}
       */
        async function currentUser() {
          const res = await request.post&lt;API.Response&lt;UserService.CurrentUser&gt;&gt;(
          '/api/fox-user/user/getUserInfo',
          {},
          );
          return res.data.data;
        }


/** 登录接口 POST /api/login/account */
async function login(data: UserService.LoginParams) {
          const res = await request.post&lt;API.Response&lt;UserService.CurrentUser&gt;&gt;(
          '/api/fox-user/user/login',
          data,
          );
          return res.data;
        }
}
</code></pre>
<p><strong>前端编写的 Service 通常对应后端的接口文档链接地址</strong>，可以通过注释加上该地址以方便后续同学维护和查询接口信息，这一点长期来看将非常实用。能够减少大量的沟通成本，从而降低许多维护成本。（2025 年 5 月 12 日新增）</p>
<pre><code class="language-tsx">export class ResultStatisticsService {
/**
   * 查询质检结果统计列表
   *** @see {@link [接口地址](https://app.apifox.com/link/project/5957596/apis/api-287268287)}**
   *
   * @param params
   * @returns
   */
static async getResultStatisticsList(params: ResultStatisticsParams) {
    const res = await request.post&lt;API.Page&lt;ResultStatisticsItem&gt;&gt;(
      `${API_PREFIX}/api/report/inspection-result`,
      params,
    );

    return res.data;
}
}
</code></pre>
</li>
<li>
<p>作为一个职责单一的<strong>高内聚</strong>的功能实现被其他模块耦合，<strong>其他模块依赖该 Service 的抽象</strong>，便于代码的依赖。</p>
<ul>
<li>Plugin.service.js - 插件可以有各种各样的实现，但它们必须实现 <code>IPlugin.interface.ts</code> 定义的基础接口。</li>
<li>CacheStorage.service.ts - 支持特定缓存时间后过期的 storage 的服务，暴露出去一个实例。</li>
<li>MemoryStorage.service.ts - 运行时内存 storage 服务，暴露出去一个实例。</li>
<li>ClientStorage.service.ts - 客户端本地存储的 storage 服务，暴露出去两个实例。
<ul>
<li>
<p>clientLocalStorage</p>
<pre><code class="language-tsx">export const clientLocalStorage = new ClientStorage(
typeof localStorage !== 'undefined' ? localStorage : ({} as any as Storage)
)
</code></pre>
</li>
<li>
<p>clientSessionStorage</p>
<pre><code class="language-tsx">export const clientSessionStorage = new ClientStorage(
typeof sessionStorage !== 'undefined'
    ? sessionStorage
    : ({} as any as Storage)
)
</code></pre>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p><strong>components</strong> - 公共组件，用于放置全局使用的公共组件。使用 <code>PascalCase</code> 命名</p>
<ul>
<li>CSR/SSR/SSG/ISR：
<ul>
<li>CashConverter/index.ts - 金钱转换组件</li>
<li>CoinConverter/index.ts - 金币转换组件</li>
</ul>
</li>
<li>Next.js RSC:
<ul>
<li>layouts/DefaultLayout.server.tsx - 服务端组件</li>
<li>sidebar/SidebarMenu.client.tsx - 客户端组件</li>
</ul>
</li>
</ul>
</li>
<li>
<p><strong>utils</strong> - 公共工具方法，使用 <code>camelCase</code> 命名</p>
<ul>
<li>formatter.util.ts - 格式化工具</li>
<li>logger.util.ts - 日志打印工具</li>
<li>converter.util.ts - 转换工具库</li>
</ul>
</li>
<li>
<p><strong>themes</strong> - 全局主题，使用 <code>camelCase</code> 命名</p>
<ul>
<li>light.theme.ts - 白天主题</li>
<li>dark.theme.ts - 黑夜主题</li>
<li>gold.theme.ts - 土豪金？！</li>
</ul>
</li>
<li>
<p><strong>interfaces</strong> - 定义公共接口 interface，<strong>设计为先。</strong>在编写代码之前，先声明 interface 定义 API 接口，是很好的习惯。PS：常规约定是在接口声明前使用 <code>I</code> 单词开头，如下：</p>
<ul>
<li>IStorage.interface.ts - 储存接口定义，对应不同的实现是:
<ul>
<li><code>class SessionStorageImpl implements IStorage {}</code> ，ClientStorage 的 sessionStorage 实现</li>
<li><code>class MemoryStorageImpl implements IStorage {}</code> ，MemoryStorage 的内存版本实现</li>
</ul>
</li>
<li>IPlugin.interface.ts - 插件接口定义，对应实现同上</li>
<li>当 interface 的命名中已经中带有特定意义则无需再通过 <code>I</code> 声明，否则显得冗余了（2025 年 3 月 4 日更新）：
<ul>
<li>比如 React 组件 Props interface: <code>ButtonProps</code>, <code>AvatarProps</code>, <code>SelectProps</code></li>
</ul>
</li>
</ul>
</li>
<li>
<p><strong>hooks</strong> - 公共钩子 hook 集合目录，<s>使用 <code>camelCase</code> 命名</s>。2025 年 5 月 15 日更新，使用 <code>kebab-case</code> 命名更符合当前 hook 主流的命名习惯。</p>
<ul>
<li>install.hook.ts - 安装相关 hook</li>
<li>machine-status.hook.ts - 使用机器状态的 hook</li>
</ul>
</li>
<li>
<p><strong>contexts</strong> - React context 集合目录，使用 <code>PascalCase</code> 命名</p>
<ul>
<li>User.context.ts - 用于存放用户相关的数据，使用 Provider 提供给所有的嵌套子组件消费 Consumer。 (生产消费模式)</li>
<li>Config.context.ts - 用于存放系统配置相关的数据。</li>
</ul>
</li>
<li>
<p><strong>locales</strong> - 语言集合目录，不同的国际化对目录或文件对命名要求不一致，取决于上下文。通常是 <code>locales</code> 或者 <code>langs</code></p>
<ul>
<li>zh.{ts|js|json} - 中文
<ul>
<li>zh-CN：大陆简体中文</li>
<li>zh-HK：香港繁体中文</li>
<li>zh-TW：台湾繁体中文</li>
</ul>
</li>
<li>vi - 越南语</li>
<li>id - 印尼语</li>
<li>br - 巴西语</li>
<li>mx - 墨西哥语</li>
<li>th - 泰语</li>
</ul>
</li>
<li>
<p>*.setup.ts - 启动或实例化配置的文件，使用 <code>camelCase</code> 命名</p>
<ul>
<li>db.setup.ts - 读取配置并<strong>启动</strong> DB 的代码文件</li>
<li>router.setup.ts - 读取 router 配置并<strong>实例化</strong> router 的代码文件</li>
</ul>
</li>
<li>
<p>main.ts/index.ts - 程序入口文件</p>
</li>
</ul>
<h3 id="文件命名">文件命名</h3>
<p>对一个文件的描述出了父级文件夹的命名作为功能集合之外，还能通过<strong>扩展后缀名</strong>。这最初是 Java 社区的命名规范，后迁移到了 TypeScript 社区。</p>
<p>特别是在 Nest.js 之后开始大行其道。<strong>后缀名是对文件功能的补充说明</strong>，当编辑器打开了几个同名文件的时候可以补充说明当前文件对应的职责。如果没有后缀名，当在开发 User 模块时，打开几个 User.ts 文件将很令人困惑。比如：</p>
<pre><code>user
├── models    用户模块对数据模型对定义和声明
│   └── model/User.interace.ts
│   └── model/User.dto.ts
│   └── model/User.dao.ts
├── User.controller.ts    用户模块的 Controller class 对 endpoints 定义和实现
├── User.service.ts    用户模块对 DB 的 CURD 模块的 Service 实现
└── ...
</code></pre>
<p>因此在定义文件名时，可以补充文件职责 featName：</p>
<ul>
<li>
<p><strong>文件名</strong>：{moduleName}.{featName}.{extension}，视具体情况使用 <code>PascalCase</code> 命名或者 <code>camelCase</code> 命名。</p>
<ul>
<li>moduleName - 当前文件的主要功能或模块</li>
<li>featName - 当前文件的功能/角色/定位</li>
<li>extension - 文件扩展名</li>
</ul>
<p>例子：</p>
<ul>
<li>UserStatusEnum.const.js</li>
<li>formatter.util.ts</li>
<li>Config.context.ts</li>
</ul>
</li>
<li>
<p><strong>组件名</strong>：使用 <code>PascalCase</code> 命名。Web component 和 Vue 推荐 kebab-case，React社区推荐 <strong>PascalCase</strong>/index.tsx。命名规则同 **Class 类名，<strong>使用 noun 名词 + desc 描述。本质上，</strong>一个组件，就是一个能被实例化复用的一组 UI 和 Function 的集合**，功能同 Class.</p>
<ul>
<li>GooglePage.server.tsx - 对应 nextjs 中的服务端组件</li>
<li>AppSupport.client.tsx - 对应 nextjs 中的客户端组件</li>
<li>CashConverter/index.tsx - 推荐统一使用目录放置 index.tsx。不推荐 CashConverter.tsx 这种单文件组件，不利于扩展、新增文件和组件。</li>
</ul>
</li>
</ul>
<h3 id="程序命名">程序命名</h3>
<ul>
<li><strong>Class 类名</strong>：使用 <code>PascalCase</code> 命名，命名规范同变量名 noun 名词 + desc 描述。在早期的 ES 规范中，区分构造函数和普通函数就已经使用这样的命名规范。
<ul>
<li><code>export class CacheStorage extends ClientStorage {}</code>&nbsp;- 类继承</li>
<li><code>export default class StatisticsService {}</code> - 默认导出</li>
<li><code>class AdjustGenerator {}</code> - Adjust 生成器 Class</li>
</ul>
</li>
<li><strong>Interface 接口名</strong>：使用 <code>PascalCase</code> 命名，约定是大写字母 I + InterfaceName 用于让人一眼理解当前的用法是 interface, 而非 class.
<ul>
<li><code>IContentBlockProps</code> - 最常见的 React 组件的 props interface 声明</li>
<li><code>IStorageInterface</code> - Storage.interface.ts 储存接口的设计定义</li>
</ul>
</li>
<li><strong>Method 方法名</strong>：使用 <code>camelCase</code> 命名，verb 动词 + noun 名词 + desc 描述，提升<strong>可读性</strong>，增强<strong>可维护性</strong>。
<ul>
<li><code>handleClickMenu</code> - 处理点击菜单</li>
<li><code>convertIPAddress</code> - 转换 IP 地址</li>
<li><code>searchEntityByParam</code> - 通过 param 参数查询 noun 实体—— <strong>适用于根据某个参数查询数据的场景</strong>，<strong>通过清晰准确的函数名定义，使代码一目了然。</strong>可读性和可维护性明显优于 <code>searchUser</code> 这种写法。例如：
<ul>
<li><code>searchUserByName</code> - 通过 name 查询用户</li>
<li><code>getGoogleConfigByPkg</code> - 通过 pkg 获取 Google 配置</li>
<li><code>genServiceUrlByVisitorId</code> - 通过 VisitorId 生成 service 地址</li>
</ul>
</li>
</ul>
</li>
<li><strong>Variable 变量名</strong>：使用 <code>camelCase</code> 命名，最常见的命名，通常格式 noun 名词 + desc 描述。变量名应该尽可能的体现它的<strong>功能</strong>/<strong>角色</strong>/<strong>意义</strong>。
<ul>
<li><code>nodeEnv</code> - 名如其义</li>
<li><code>options.map(**option** =&gt; **option**.value)</code> - 尽量使用有意义的命名，不要使用 <code>items.map(**x** =&gt; **x**.label)</code> 这种命名，编译时工程会自动 Minification，不用节约变量命名的字符串长度物理空间。</li>
<li>不要使用什么 <code>form1</code>, <code>form2</code>, <code>parentNode2</code> 这种命名，非常不专业！而且令人困惑。</li>
</ul>
</li>
<li><strong>Constant 常量名</strong>：常量的编写，使用 <code>UPPER_CASE</code> 命名，使用 noun 名词 + desc 描述。
<ul>
<li>APP_VERSION - 应用版本</li>
<li>SYSTEM_TITLE - 系统标题</li>
</ul>
</li>
<li><strong>Enum 枚举名</strong>：因此枚举区别于常量，使用 <code>PascalCase</code> 命名。枚举跟常量类似，不同在于枚举会新增和删除 option。
<ul>
<li>RechargeType.enum.ts - 动态枚举</li>
<li>UserStatusEnum.const.ts - 常量枚举</li>
</ul>
</li>
<li><strong>Bool 布尔值名</strong>：使用 <code>camelCase</code> 命名，常见的命名格式即 isXXxx, shouldXXxx, hasXXxx 用于表示<strong>状态</strong>、<strong>行为</strong>、<strong>存在</strong>。
<ul>
<li>isInstalledPWA - 是否已安装过 PWA 应用，is + verb/ed (动词或动词过去式)&nbsp;+ noun（名词）表示 noun 是否已执行 verb/ed 动作。</li>
<li>isSupportedPWA - 是否支持 PWA 模式，is + verb + noun 表示是否 noun 是否存在 verb 状态 。</li>
<li>shouldInstallPWA - 是否应该安装 PWA 应用, should + verb + noun 表示 noun 是否应该执行 verb 行为。</li>
<li>hasCheckedStatus - 是否已检查过 status，has + verb/ed + noun 表示是否已经执行过 verb 行为。</li>
</ul>
</li>
</ul>
<h3 id="路由命名">路由命名</h3>
<p>对于路由中的多个单词，目前存在 2 种形式的路由定义：</p>
<ul>
<li>一种是驼峰 CamelCase</li>
<li>一种是中划线 kebab-case。</li>
</ul>
<p>我们约定一下，链接中都使用中划线，kebab-case。也就是说，在约定式路由中，对应的（路由）文件夹都用 kebab-case 命名，这也符合 Web Standard：</p>
<pre><code class="language-jsx">// bad case
https://fox.weidu.co/admin/tools/decode/batchEncrypt

// good case
https://fox.weidu.co/admin/strategy/flow/collect/record-list
</code></pre>
<h2 id="图标规范">图标规范</h2>
<p>尽量保证系统内图标的一致性。包括<strong>风格一致性</strong>，<strong>大小一致性</strong>，<strong>色彩一致性</strong>。</p>
<h3 id="推荐图标库">推荐图标库</h3>
<p>在统一了 Render 库为 React 的基础上配合统一的 UI 库 Ant Design 使用：</p>
<ul>
<li>第一优先级：https://ant-design.antgroup.com/components/icon-cn</li>
<li>第二优先级：https://react-icons.github.io/react-icons/ or https://lucide.dev/ - 作为补充，能满足 90% 的场景了。（2024-04-16 更新）</li>
<li>第三优先级：https://iconfont.cn/ - 用来弥补就是剩下的 10% 的场景。</li>
<li>最后的选择：自定义 SVG。</li>
</ul>
<h3 id="iconfont">IconFont</h3>
<ul>
<li><strong>Icon 图标</strong>使用 iconfont 统一管理
<ul>
<li>收益：
<ol>
<li>节省开发资源：iconfont 有十几年来业界积淀的大量图标，我们可以节省大量寻找图标、导入/导出图标到 SVG 再到项目的时间。</li>
<li>降低开发成本：Antd 支持通过 iconfont url 一键生成图标组件，不用为图标引入 SVG 和编写单独代码、重新构建和部署。</li>
<li>降低维护成本：不需要对样式、大小做修改，增删图标不需要修改代码仓库，只需要修改配置的 CDN URL。</li>
<li>增加 DX / UX：增删图标后刷新依赖立即可用，将 ICON_CDN_URL 改成类似 apoll 这种支持运行时更改配置的<strong>工具库</strong>，可以做到无缝更新图标 UI。</li>
<li>零构建成本：无需为图标做构建，更新图标后 iconfont 一键生成新的 CDN URL 地址，更新到配置中心即可。</li>
</ol>
</li>
<li>风险
<ul>
<li>CDN 稳定性：iconfont 是阿里系服务，已稳定运行近 10 年。稳定性有保障，前司使用了 7 年未出过问题。我们的服务也部署在阿里云服务上，所以唯一的风险就是阿里云挂了 ?！</li>
<li>解决办法：将 CDN 在本地 OSS/CDN 备份一份作为容错。—— 2024-06-28 补充</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="模块规范">模块规范</h2>
<p>我们最常用的模块划分，即是<strong>按功能区分</strong>。前文中的目录和文件名都是，除此之外，前端开发中最常用的就是<strong>按逻辑区分</strong>。</p>
<ul>
<li><strong>功能</strong>：按照功能来划分模块，根据不同的功能将代码放入不同的模块中。这样可以提高代码的可读性和可维护性。</li>
<li><strong>逻辑分层</strong>：根据项目的业务逻辑来划分模块，将相关的业务逻辑放在同一个模块中。这样可以更好地划分职责和降低模块之间的耦合度。</li>
<li><strong>数据类型</strong>：根据数据类型来划分模块，将处理相同数据类型的代码放在同一个模块中。这样可以提高代码的一致性和可维护性。</li>
<li><strong>可重用性</strong>：将可重用的代码提取出来作为独立的模块，以便在其他地方重用。这样可以提高代码的复用性，减少重复编码。</li>
<li><strong>性能</strong>：根据性能考虑来划分模块，将对性能有影响的代码放在独立的模块中，以便进行优化和管理。</li>
<li><strong>安全性</strong>：根据安全性考虑来划分模块，将涉及安全性的代码放在独立的模块中，以便进行安全性检查和管理。</li>
<li><strong>测试</strong>：根据可测试性考虑来划分模块，将需要测试的代码放在独立的模块中，以便更好地进行单元测试和集成测试。</li>
</ul>
<h2 id="组件规范">组件规范</h2>
<ul>
<li>组件分类</li>
<li>组件拆分</li>
<li>组件测试</li>
</ul>
<h3 id="组件分类">组件分类</h3>
<p>这里有一个非常简单的通俗易懂的方案，摘自 Dan 的说法就是 “聪明” 组件与 “愚蠢” 组件。顾名思义：</p>
<ul>
<li>快速记忆（2025 年 5 月 12 日更新）：
<ul>
<li>聪明组件：里面有 数据，副作用，功能等提供丰富能力的组件。</li>
<li>愚蠢组件：里面啥都没有，只能用来渲染 UI。</li>
</ul>
</li>
<li>按功能区分
<ul>
<li>基础组件：基本的 UI 元素，例如：按钮 Button、输入框 Input、标签 Tag 等。</li>
<li>容器组件：包装和组织其他组件，例如：布局容器 Layout、导航栏 NavigationBar、卡片 Card 等。</li>
<li>展示组件：展示数据，例如：表格 Table、图表 Chart、列表 List 等。</li>
<li>表单组件：收集和验证用户输入，例如：表单输入框 Input、选择器 Picker、复选框 Checkbox 等。</li>
<li>导航组件：导航和导航跳转，例如：导航栏 Breadcrumb、菜单 Menu、分页 Pagination ****等。</li>
<li>弹出层组件：创建弹出层或对话框，例如：模态框 Modal、弹层 Popover、浮层抽屉 Drawer ****等。</li>
<li>图标组件：展示图标，例如：图标 Icon、图标库 Iconfont 等。</li>
<li>工具组件：一些常用的工具功能，例如：时间选择器 TimePicker、日期选择器 DatePicker 等。</li>
</ul>
</li>
<li>按职责区分
<ul>
<li>UI 组件
<ul>
<li>UI 组件通常只关注展示和用户交互，并不涉及业务逻辑。</li>
<li>UI 的展示和交互，例如按钮、输入框、标签、表格等。</li>
</ul>
</li>
<li>逻辑组件
<ul>
<li>逻辑组件与 UI 组件进行交互，并提供数据和功能给 UI 组件使用。</li>
<li>负责处理业务逻辑和数据流动，例如数据获取、数据处理、数据展示等。</li>
</ul>
</li>
<li>业务组件
<ul>
<li>数据获取/处理/展示：从后端接口获取的业务数据，对数据进行处理和转换，将数据传递给 UI 组件进行展示，提供一些可复用的数据展示组件。</li>
<li>业务逻辑处理：业务组件可以处理与业务逻辑相关的功能，例如功能验证、数据校验、数据提交、逻辑处理等。</li>
<li>事件处理：业务组件可以处理用户交互事件，例如点击事件、输入事件等，并根据事件触发相应的业务逻辑。</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="组件拆分">组件拆分</h3>
<p>在前端开发中，组件是构建用户界面的基本单元。当设计组件时，考虑从以下几个维度进行划分：</p>
<ul>
<li><strong>功能</strong>：按照功能来划分组件，将具有相似功能的元素组合成一个组件。提高代码的可重用性和可维护性。</li>
<li><strong>单一职责原则</strong>：遵循单一职责原则，即一个组件应该只负责一种功能或展示一种数据。使组件更加灵活和易于维护。</li>
<li><strong>拆分复杂度</strong>：将复杂的UI或功能拆分成多个简单的组件，以便更好地管理和维护。降低每个组件的复杂度，提高代码的可读性。</li>
<li><strong>可复用性</strong>：将可复用的 UI 元素提取为独立的组件，以便在整个应用程序中重复使用。有助于减少重复编码和提高开发效率。</li>
<li><strong>UI/UX</strong>：根据用户界面和用户体验来划分组件，将具有相似 UI 和 UX 需求的元素放在同一个组件中。提高用户体验的一致性。</li>
<li><strong>数据流</strong>：根据数据流来划分组件，将数据流相似的元素放在同一个组件中。有助于管理数据流和状态管理。</li>
<li><strong>可测试性</strong>：将需要测试的功能放在独立的组件中，以便更好地进行单元测试和集成测试。提高代码的质量和稳定性。</li>
</ul>
<p>通过从这些维度进行组件的划分，可以使代码更加模块化、可维护和可扩展。合理的组件划分降低代码的耦合度，提高代码的复用性和可测试性。</p>
<h3 id="组件测试">组件测试</h3>
<p>使用 Storybook 管理工程内部公共组件，包括组件 DEMO，API 描述，自动生成基于组件 DEMO 的 API 接口文档，并可通过 Web GUI 直接运行自动化测试，或者通过 Vitest 编写组件测试用例运行测试即可。</p>
<ul>
<li>Why Storybook?
<ul>
<li><strong>📝 Develop UIs that are more durable</strong></li>
<li><strong>✅ Test UIs with less effort and no flakes</strong></li>
<li><strong>📚 Document UI for your team to reuse</strong></li>
<li><strong>📤 Share how the UI actually works</strong></li>
<li><strong>🚦Automate UI workflows</strong></li>
</ul>
</li>
</ul>
<h2 id="代码规范">代码规范</h2>
<ul>
<li>代码组织</li>
<li>拼写问题</li>
<li>写法约定</li>
</ul>
<h3 id="代码组织">代码组织</h3>
<ul>
<li><strong>组件化</strong>（见组件拆分）和<strong>模块化</strong>，做最小细粒度拆分，提高可读性和可维护性
<ul>
<li>文件名与模块功能相关联，以便更好地理解代码的作用</li>
<li>避免将太多的代码放在单个文件中，减少加载时间和内存占用</li>
</ul>
</li>
<li><strong>公共依赖提取</strong>，更利于查找、定位和维护
<ul>
<li>公共枚举</li>
<li>公共配置</li>
</ul>
</li>
<li><strong>动态导入</strong>，在应用初始化加载入口时做懒加载设计，减少加载入口的 Bundle 代码大小，优化用户体验
<ul>
<li>locale 多语言代码:
<ul>
<li>根据系统语言，加载默认的语言包</li>
<li>用户 1. 点击切换后，2. 再动态导入 3. 导入成功后 4. 切换系统语言</li>
</ul>
</li>
<li>theme 主题代码，同上</li>
<li>page 页面适配代码，初始化时加载了两套代码：
<ul>
<li>Mobile 和 PC，通过判断只动态导入一套代码即可</li>
</ul>
</li>
</ul>
</li>
<li><strong>路由懒加载</strong>：入口文件由 lazy, import 加 Suspense 统一包装，全部懒加载/<strong>按需加载</strong>。
<ul>
<li>PC 和 mobile 组件在 CSR 使用声明式组件渲染条件加载</li>
<li>在 SSR 使用 request 的 UA 拦截渲染。</li>
</ul>
</li>
<li><strong>工程配置</strong>：Bundler 使用 vitePluginImp 插件配置 antd/lodash 等流行库的<strong>按需加载</strong>
<ul>
<li>vite-plugin-imp - A vite plugin for import library component style automatic.</li>
<li>vite-plugin-chunk-split - 一个简单易用的 Vite 拆包插件</li>
<li>Rollup output.manualchunks</li>
</ul>
</li>
</ul>
<h3 id="拼写问题">拼写问题</h3>
<ul>
<li>安装 Code Spell Checker 插件，提示单词拼写错误</li>
</ul>
<h3 id="写法约定">写法约定</h3>
<ul>
<li>
<p>可继承，但不可重写 JavaScript 原生类型的 Class，比如：String, Number, Boolean, Symbol 等</p>
<pre><code class="language-tsx">// bad
class String {}

// good
class StrImpl extends String {}
</code></pre>
</li>
<li>
<p><strong>能用枚举就用枚举，千万不要使用字面量</strong>。例如：如果以后 <code>zh</code> 改成了 <code>zh-CN/zh-HK/zh-TW</code>，就不得不重新修改代码了。这增加了维护成本，而且从可读性上来讲，枚举的可读性更强。</p>
<pre><code class="language-tsx">// bad
locale === 'zh' ? 'zh_CN' : 'en_US'

// good
import { LanguageEnum } from '@fox-ui/runtime';

locale === LanguageEnum.Chinese ? 'zh_CN' : 'en_US'
</code></pre>
</li>
<li>
<p><strong>异步操作</strong>：使用 <code>try/catch</code> 和 <code>async/await</code>，不要使用 <code>Promise</code></p>
<pre><code class="language-tsx">// bad
function query() {
return fetch().then().catch()
}

// good
async function query() {
try {
          const data = await fetch()
} catch (error) {
          // code ...
}
}
</code></pre>
</li>
<li>
<p><strong>魔法数字</strong>：使用枚举声明，不要使用具体的无法直接理解的无意义的值</p>
<pre><code class="language-jsx">// bad
if (value === 0) {}
else (value === 1) {}

// good
if (value === SelectEnum.PROVINCE) {}
else if (value === SelectEnum.CITY) {}
</code></pre>
</li>
<li>
<p><strong>代码语义化</strong>：抽象的值先声明具体词义</p>
<pre><code class="language-jsx">// bad
new Date().getTime() - (30 * 24 * 3600 * 1000)

// good
const ONE_SECOND = 1000
const ONE_MINUTE = ONE_SECOND * 60
const ONE_HOUR = ONE_MINUTE * 60
const ONE_DAY = ONE_HOUR * 24
const ONE_MONTH = ONE_DAY * 30

new Date().getTime() - ONE_MONTH
</code></pre>
</li>
<li>
<p><strong>枚举函数参数命名</strong>：更好的可读性带来更低的理解成本，减少认知负担。</p>
<pre><code class="language-tsx">// bad: it 缩写不常见，且无实际据名意义
const menus = menuItems.map(it =&gt; preProcessMenuItem(it));

// good: 名词复数 -&gt; 名词单数
const menus = menus.map(menu =&gt; menu.visible)
</code></pre>
</li>
<li>
<p><strong>代码健壮性</strong>：使用 <code>??</code> 可选操作符或者逻辑操作符 <code>&amp;&amp;</code> 或 <code>||</code> 兼容</p>
<pre><code class="language-jsx">// bad
const { code, data } = awai request()
if (code === 200) {
this.data = data.map(item =&gt; ({
    ...item,
    xx: 'xx',
}))
}

// good
const { code, data } = awai request()

if (code === 200) {
this.data = data?.map(item =&gt; ({
    ...(item ?? {}),
    xx: 'xx',
})) ?? []
}
</code></pre>
</li>
<li>
<p><strong>Early Return</strong>：提前返回，提升执行速度与效率</p>
<pre><code class="language-jsx">// bad
if (type) {
        res = (num / str)
} else {
        res = (num * str)
}

return res

// good
if(type) return num / str
return num * str
</code></pre>
</li>
<li>
<p>多重判断：使用策略模式，而非多重 if 或者 三元表达式。（2025-04-01 新增）</p>
<pre><code class="language-tsx">// bad
            {businessType === BusinessType.Collection
                ? t('strategy.addCollectionStrategy')
                : businessType === BusinessType.Market
                  ? t('strategy.addMarketingStrategy')
                  : businessType === BusinessType.CollectUnAssign
                  ? t('strategy.addCollectUnAssignStrategy')
                  : t('strategy.addMarketUnAssignStrategy')}

// good
const getStrategyButtonText = useCallback(
    (businessType: BusinessType) =&gt; {
      const strategyTextMap: Record&lt;BusinessType, string&gt; = {
      : t('strategy.addCollectionStrategy'),
      : t('strategy.addMarketingStrategy'),
      : t(
          'strategy.addCollectUnAssignStrategy',
      ),
      : t('strategy.addMarketUnAssignStrategy'),
      };

      return strategyTextMap || t('strategy.addStrategy');
    },
    ,
);
</code></pre>
</li>
<li>
<p>禁止导入任何私有类型，Why? 以后依赖升级了这个声明被改了，那代码编译就过不了了。（2025-04-08 新增）</p>
<pre><code class="language-tsx">// bad
import type { DataNode } from 'antd/es/tree';

// good
import { type TreeDataNode } from 'antd'
</code></pre>
</li>
</ul>
<h2 id="格式规范">格式规范</h2>
<ul>
<li>
<p>VSCode 推荐插件</p>
<ul>
<li>安装 Trailing Spaces 插件 - Highlight trailing spaces and delete them in a flash! ，提示和自动修复尾空格</li>
<li>安装 ESLint,Prettier, EditorConfig, DotENV 等插件，自动格式化代码</li>
<li>安装 Better Comments, change-case, Auto Rename Tag, Auto Close Tag 等插件自动优化代码编写和格式化体验</li>
</ul>
</li>
<li>
<p>Linter 自定义配置</p>
<ul>
<li>
<p><strong>空间感</strong> 和 <strong>呼吸感</strong>：增加声明之间的空行，让代码空间有呼吸感。了解更多见 ESLint padding-line-between-statements 规则：</p>
<pre><code class="language-json">{
"rules": {
    "padding-line-between-statements": [
      "error",
      { "blankLine": "always", "prev": ["block", "block-like"], "next": "*" },
      { "blankLine": "always", "prev": "import", "next": "*" },
      { "blankLine": "any", "prev": "import", "next": "import" },
      { "blankLine": "always", "prev": "*", "next": ["export", "return", "block", "block-like"] },
      { "blankLine": "any", "prev": "export", "next": "export" },
      { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*" },
      { "blankLine": "any", "prev": ["const", "let", "var"], "next": ["const", "let", "var"] }
    ]
},
}
</code></pre>
</li>
</ul>
</li>
<li>
<p>Linter 工具默认配置</p>
<ul>
<li>使用脚手架默认 lint 配置</li>
<li>参见项目的模版代码 eslint 规则</li>
<li>参考 Airbnb’s Style Guide&nbsp;commit lint 规则</li>
</ul>
</li>
</ul>
<h2 id="gitops-规范">GitOps 规范</h2>
<p>因为最近上线总是出现各种版本不一致的问题，所以找了一圈 GitOps 的最佳实践。这是一个容易忽略的环节，却也是一个程序员生涯中高频出现的场景。我们每天都在使用 Git，而 Git 的使用规范，直接关系到了产品本身的稳定性。</p>
<p>以前我也不理解，为什么一个简单的合并要经过这么多步骤。现在我的理解是增加这些冗余过程的原因，是为了增加安全垫。越是牵一发动全身的事情，越应该谨慎。<strong>人性是懒惰的，不能依靠人性，而应该依靠规范和流程。</strong></p>
<ul>
<li>Workflow 工作流</li>
<li>Branches 分支管理</li>
<li>Commits 提交规范</li>
<li>Quality 质量管理</li>
<li>Version 版本管理</li>
<li>ChangeLog 修改日志</li>
<li>CheckList 检查清单</li>
<li>Publish 发布管理</li>
</ul>
<h3 id="workflow-规范">WorkFlow 规范</h3>
<p>在线预览流程图</p>
<div class="mermaid">gitGraph
    commit id: "Initial commit"
    commit tag: "v1.0.0"
    branch test
    commit id: "chore: CI/CD初始化"
    checkout main
    branch feat-login
    commit id: "feat: 登录模块"
    branch feat-login-mountain
    commit id: "feat: 增加权限验证"
    branch feat-login-echo
    commit id: "feat: 增加自动跳转"
    checkout feat-login
    merge feat-login-mountain
    merge feat-login-echo
    checkout test
    merge feat-login id: "MR!123" tag: "test-20230820"
    checkout main
    merge test id: "Release v1.1.0" tag: "v1.1.0"
    checkout main
    branch hotfix-401-mountain
    commit id: "fix:紧急修复鉴权漏洞"
    checkout main
    merge hotfix-401-mountain tag: "v1.1.1"
    checkout test

</div><h3 id="流程执行要点">流程执行要点：</h3>
<ol>
<li>
<p><strong>三环境四阶段</strong>：</p>
<ul>
<li>开发环境（Feature 分支）：开发者本地验证</li>
<li>测试环境（Test 分支）：自动化流水线 + Tester 人工验收</li>
<li>预发环境（Release / Pre 候选）：生产配置验证，If have</li>
<li>生产环境（Main / Master 分支）：蓝绿发布</li>
</ul>
</li>
<li>
<p><strong>紧急通道设计</strong>：</p>
<pre><code class="language-bash"># Hotfix 特批流程
git checkout -b hotfix-xxx-{name}-{YYYYMMDD} main
git commit -m "fix(#{taskID}): 紧急修复 XX 漏洞 "
git push origin hotfix-xxx--{name}-{YYYYMMDD}# 提交 MR - 需 Tech Lead 审批
</code></pre>
</li>
</ol>
<h3 id="branch-规范">Branch 规范</h3>
<p><strong>分支命名习惯</strong></p>
<table>
<thead>
<tr>
<th>Instance</th>
<th>Branch</th>
<th>Description, Instructions, Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stable 稳定环境</td>
<td>master / main</td>
<td>Accepts merges from Features and Hotfixes</td>
</tr>
<tr>
<td>Test 测试环境</td>
<td>test</td>
<td>Accepts merges from Features and Hotfixes</td>
</tr>
<tr>
<td>Working Features/Issues</td>
<td></td>
<td></td>
</tr>
<tr>
<td>开发环境</td>
<td>feature-{taskTitle}-{developerName}-</td>
<td>Always branch off HEAD of Working</td>
</tr>
<tr>
<td>Hotfix 紧急修复</td>
<td>hotfix-*</td>
<td>Always branch off Stable</td>
</tr>
</tbody>
</table>
<p><strong>分支管理规则</strong></p>
<table>
<thead>
<tr>
<th><strong>分支类型</strong></th>
<th><strong>命名规则</strong></th>
<th><strong>保护规则</strong></th>
<th><strong>合并策略</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>Main / Master 稳定环境分支</td>
<td><code>main</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>master</code></td>
<td>1. 禁止直接 push</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<ol start="2">
<li>MR 需要 CodeReview | 1. 仅接受来自 release 分支的合并</li>
<li>仅接收测试通过的 feature 分支的合并 |<br>
| Release / Pre预发布环境分支 | <code>tag-YYYYMMDD</code><br>
<code>release/YYYYMMDD</code><br>
<code>pre</code>| 1. 自动触发预发环境部署</li>
<li>禁止 force | 1. 接收 test 分支合并，保留7天</li>
<li>接收测试通过的 feature 分支的合并 |<br>
| Test 测试环境分支 | <code>test</code> | 1. 禁止 force | 1. 给测试同学使用</li>
<li>直接收合入，通常不会合出 |<br>
| Feature开发分支 | <code>feature-telesales-moutnain</code> | 1. 每日未活跃分支提醒？ | 1. 开发完成需发起 MR 到 test 分支，给测试同学提测</li>
<li>验证后提交 MR 走 Code Review 流程</li>
<li>合并后到 master 后删除分支</li>
<li>走<strong>正常发布流程</strong> |<br>
| Hotfix 紧急修复 | <code>hotfix-{JIRA-ID}-woods-{YYYYMMDD}</code><br>
<code>hotfix-{TASK-NAME}-olf-{YYYYMMDD}</code> | 1. 只能从 master 上 checkout | 1. 修复后直接合并到 test 验证</li>
<li>验证后直接合并到 master</li>
<li>走<strong>紧急发布流程</strong> |</li>
</ol>
<p><strong>分支清理策略</strong></p>
<pre><code class="language-bash"># .gitlab-ci.yml 分支清理任务
cleanup_branches:
stage: cleanup
script: |
    # 删除 7 天前的 feature 分支
    git branch -r --merged | grep 'origin/feature-' |
    while read branch; do
      if [ $(git log -1 --since='7 days' $branch | wc -l) -eq 0 ]; then
      git push origin --delete ${branch#origin/}
      fi
    done
rules:
    - if: $CI_PIPELINE_SOURCE == "schedule"# 每日凌晨执行
</code></pre>
<h3 id="commit-规范">Commit 规范</h3>
<ul>
<li>目前走的自动化流程，使用的 <code>@commitlint</code> 工具。<strong>Why？</strong>见如下文章：</li>
<li>https://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html</li>
<li>https://commitlint.js.org/concepts/commit-conventions.html - <strong>目前我们已使用该自动化工具管理</strong></li>
</ul>
<h3 id="changelog-规范">ChangeLog 规范</h3>
<p>https://changesets-docs.vercel.app/en - 自动化工具，目前只有 KN 官网使用了自动化管理 ChangeLogs</p>
<p>https://github.com/changesets/changesets</p>
<pre><code class="language-bash"># 安装配置
npm install @changesets/cli -D
npx changeset init

# 添加变更说明
npx changeset# 交互式生成变更文件

# 发布时自动生成日志
npx changeset version
npx changeset publish
</code></pre>
<h3 id="quality-规范">Quality 规范</h3>
<ol>
<li>
<p>Code 代码质量</p>
<table>
<thead>
<tr>
<th><strong>关卡</strong></th>
<th><strong>检查项</strong></th>
<th><strong>阈值</strong></th>
<th><strong>工具链</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>提交前</td>
<td>1. <strong>Biome - FOX</strong></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<ol start="2">
<li>ESLint/Prettier - OA | 0 error | husky + lint-staged |<br>
| MR 合并前 | 1. Tech Lead Review</li>
<li>SonarQube 扫描</li>
<li>AI Code Review | 1. Review Comments</li>
<li>A级（0 blocker）</li>
<li>Automation flow | 1. Follow 前端开发规范文档</li>
<li>GitLab SAST模板 |<br>
| 发布前 | 依赖漏洞扫描 | 无高危漏洞 | Trivy + Dependency-Check |</li>
</ol>
</li>
<li>
<p>UI / UE 质量</p>
<ol>
<li>Developer 验收</li>
<li>Leader 验收</li>
<li>Product Manager 验收</li>
<li>Director 验收</li>
</ol>
</li>
<li>
<p>标准库 —— 测试覆盖率标准</p>
<pre><code class="language-jsx"># vitest.config.js
module.exports = {
coverageThreshold: {
    global: {
      branches: 80,
      functions: 85,
      lines: 90,
      statements: 90
    }
}
};
</code></pre>
</li>
<li>
<p>安全红线，<strong>绝对禁止项</strong></p>
<ul>
<li>硬编码密钥（检测到立即阻断流水线）- <code>.npmrc</code></li>
<li>高危依赖（CVE 评分 ≥ 9.0）</li>
<li>未授权 API（/admin 等接口未鉴权）</li>
</ul>
</li>
</ol>
<h3 id="version-版本管理">Version 版本管理</h3>
<ul>
<li>Fox 目前的版本管理使用的是 Tag: V</li>
<li>OA 目前的版本管理使用的是？ 暂无</li>
<li>KN 官网 目前使用的版本管理是 Tag v1.0.0</li>
</ul>
<h3 id="checklist-检查清单"><strong>CheckList 检查清单</strong></h3>
<ol>
<li>
<p>自动化检查项（CI/CD 内嵌）- 这是个理想的方案，但目前还不具足，需要依赖上下游共同推动</p>
<pre><code class="language-yaml"># .gitlab/checklist.yaml
checks:
- id: api_schema_validation
    desc: "OpenAPI 契约校验通过"
    script: npx swagger-cli validate api-spec.yaml

- id: i18n_coverage
    desc: "国际化文案覆盖率 ≥ 95%"
    script: npm run check-i18n -- --min=95

- id: error_boundary
    desc: "所有路由组件已添加错误边界 / Loading 效果"
    script: grep -rL 'withErrorBoundary' src/routes/ | xargs -I{} echo "缺失错误边界: {}" &amp;&amp; exit 1
</code></pre>
</li>
<li>
<p>人工检查项 -（从 feature 合并到 master 的 MR 模板）</p>
<ol>
<li>Default https://git.kuainiujinke.com/loan_after/v2/fox-admin-ui/-/blob/master/.gitlab/merge_request_templates/Default.md</li>
<li>Test https://git.kuainiujinke.com/loan_after/v2/fox-admin-ui/-/blob/master/.gitlab/merge_request_templates/Test.md</li>
</ol>
</li>
</ol>
<h3 id="publish-发布规范"><strong>Publish 发布规范</strong></h3>
<ol>
<li>每次<strong>合并代码 / 发版本</strong> 应该有 <strong>责任人，轮班制，下班前需要合完</strong></li>
<li>经过前面流程后打上线日期的 TAG，目前 Pipline 会自己打</li>
<li><strong>Gitlab 监听 Tag 变动，如果有新增，执行应用打包</strong> - 会加上 CI / CD 自动化</li>
</ol>
<h2 id="其他规范">其他规范</h2>
<ul>
<li>React.js 编写规范</li>
<li>Vue.js 编写规范</li>
</ul>
<h3 id="reactjs-编写规范">React.js 编写规范</h3>
<h3 id="state">State</h3>
<p>摘自 （2025-06-13 更新）</p>
<p><strong>在使用 useState 之前，考虑以下几点：</strong></p>
<ul>
<li>这个值是否可以在渲染时简单派生？</li>
<li>有库已经管理这个状态了吗？</li>
<li>这个值是否需要触发重渲染？</li>
</ul>
<p>如果这些问题的答案都是“否”，那么你可能不需要 useState。</p>
<p><strong>从已有状态中派生值</strong></p>
<ul>
<li>派生值不需要存储在状态中。如果你的数据可以从已有状态或属性中计算出来，直接在渲染时计算它们。</li>
</ul>
<pre><code class="language-tsx">const formattedDate = new Date(date).toLocaleDateString();
</code></pre>
<p>以上代码在无需存储的情况下从给定的 date 输入派生出格式化的日期字符串。这种方法避免了不必要的状态管理，简化了渲染逻辑，并保持组件高效。</p>
<p><strong>不要用 useEffect 来计算值</strong></p>
<ul>
<li>停止使用 useEffect 进行简单的计算！如果你的值可以直接从状态或属性计算出来且不涉及副作用，那就直接在渲染时计算。</li>
<li>对于高耗时计算，可以用 useMemo 优化性能：</li>
</ul>
<pre><code class="language-tsx">const expensiveValue = useMemo(() =&gt; computeExpensiveValue(data), );
</code></pre>
<p>这一做法将使用 useMemo 钩子在 data 变化时重新计算 expensiveValue，避免每次渲染时不必要的重新计算，提升了性能。</p>
<h3 id="hooks">Hooks</h3>
<p>因为 hooks 在框架级的强约定（不能放入条件表达式、强制先后顺序），所以不用考虑声明等顺序问题。</p>
<ul>
<li><strong>Props 中的函数</strong>，将往下传递的函数使用 <strong>useMemoizedFn</strong> 或者 <strong>useCallback</strong> 包裹，可优化渲染性能。</li>
<li><strong>Request 请求</strong>，使用 useRequest/useSWR/useQuery 等 React 流行的请求 hook，已实现更现代化的应用状态管理和更新，使代码更加结构化，数据更新更及时，用户体验和 DX 更好。</li>
<li><strong>Loading 状态</strong>使用最佳实践 Suspense</li>
</ul>
<p>2025-01-08 补充：<strong>尽量将独立的逻辑都分解抽离成独立的 React Hooks</strong>，参考代码 optimize: 使用 react-hooks 重构了 Calendar 状态，Why?</p>
<ol>
<li>移动端页面的逻辑跟 PC 基本一致，且更简单</li>
<li>原来的写法需要写两份代码，抽成逻辑独立的 hooks 方便复用</li>
</ol>
<p>Why React Hooks?：</p>
<ol>
<li>抽离成 hooks 将逻辑 logic 跟视图 view 分离，便于组合</li>
<li>编写前端代码，组合优于继承。从 HTML 时代开始，标签 Markup 的设计就是组合。再到 MVC/MVVM 框架时代的组件，都是为了便于拆分和组合</li>
</ol>
<p>PS: Hooks 对前端开发具有划时代的分水岭一般的意义。推荐所有能拆分的逻辑都拆成各个 hooks，方便复用，也更利于维护。</p>
<h3 id="vuejs-编写规范">Vue.js 编写规范</h3>
<p>由于我们现在并不适用 Vue，略。但大概是：</p>
<ul>
<li>lint 工具约定 props, components, computed, data, watcher, beforeMount, mounted 等 options api 的编写顺序。</li>
<li>AI Code Review</li>
</ul>
<h2 id="测试规范">测试规范</h2>
<ul>
<li><strong>端到端测试(E2E Test)</strong>:
<ul>
<li>端到端测试是从用户的角度出发,模拟真实的用户场景和业务流程,验证整个系统的端到端行为是否符合预期。</li>
<li>它测试的是整个应用程序的完整流程,包括UI交互、数据交互、第三方系统集成等。</li>
<li>端到端测试通常使用自动化测试工具(如Selenium、Cypress等)来模拟用户操作,并验证最终结果。</li>
<li>端到端测试的目的是确保整个应用程序在各个组件协同工作时,能够正常运行并满足业务需求。</li>
<li>端到端测试通常运行速度较慢,因为它需要启动整个应用程序,并模拟完整的用户场景。</li>
</ul>
</li>
<li><strong>单元测试(Unit Test)</strong>:
<ul>
<li>单元测试是针对最小可测试单元(如函数、方法或模块)进行验证,确保它们的行为符合预期。</li>
<li>它测试的是独立的代码单元,与其他单元没有耦合关系。</li>
<li>单元测试通常使用测试框架(如Jest、Mocha等)来编写和运行测试用例。</li>
<li>单元测试的目的是确保每个代码单元的内部实现是正确的,并满足设计要求。</li>
<li>单元测试通常运行速度较快,因为它只关注单个代码单元,不需要启动整个应用程序。</li>
</ul>
</li>
<li><strong>集成测试(Integration Test)</strong></li>
</ul>
<h1 id="应用规范">应用规范</h1>
<ul>
<li>应用生命周期设计 Lifecycle Hooks</li>
<li>多语言 &amp; 国际化 i18n languages</li>
<li>应用配置与枚举 Configurations and Enums</li>
<li>身份认证与权限 ****Auth &amp; Permission</li>
<li>应用储存与缓存 Application Storage &amp; Cache</li>
<li>表单字段与校验 From Field &amp; Validator</li>
<li>常见副作用 Common side effects</li>
<li>资源处理 Resource processing</li>
<li>提效工具 Tools</li>
<li>工作流工具 CI/CD</li>
</ul>
<h2 id="应用生命周期设计-lifecycle-hooks">应用生命周期设计 Lifecycle Hooks</h2>
<ol>
<li>应用初始化阶段 - beforeCreate/create：
<ul>
<li>应用初始化：在应用启动时进行一些全局的初始化设置，例如创建根组件、设置路由等。</li>
<li>模块加载：根据需要异步加载应用所需的模块、组件和资源。</li>
</ul>
</li>
<li>应用路由导航：
<ul>
<li>路由导航守卫：在进行路由导航之前或之后执行一些操作，例如身份验证、权限检查等。</li>
<li>路由解析：解析路由参数、查询参数等，准备要渲染的组件所需的数据。</li>
</ul>
</li>
<li>组件生命周期：
<ul>
<li>组件创建：在组件创建时执行一些初始化操作，例如设置初始状态、订阅事件等。</li>
<li>组件渲染：将组件的模板渲染到页面上，显示相应的视图。</li>
<li>组件更新：在组件状态或属性变化时，重新渲染组件。</li>
<li>组件销毁：在组件被销毁之前执行一些清理操作，例如取消订阅、清除定时器等。</li>
</ul>
</li>
<li>数据管理：
<ul>
<li>数据获取：从后端或其他数据源获取数据，并进行相应的处理和转换。</li>
<li>数据更新：在数据发生变化时，通知相关的组件进行更新。</li>
</ul>
</li>
<li>事件处理：
<ul>
<li>事件绑定：将事件处理函数与相应的 DOM 元素或组件进行绑定。</li>
<li>事件触发：在用户交互或其他触发条件下，触发相应的事件处理函数。</li>
</ul>
</li>
<li><strong>错误处理</strong>：
<ul>
<li>异常捕获：捕获应用中的异常或错误，并进行相应的处理和报告。</li>
<li>错误 SDK：<strong>Sentry</strong> or others</li>
</ul>
</li>
<li><strong>应用状态销毁</strong> - beforeUnmount/unmount：
<ol>
<li><strong>取消订阅和事件解绑</strong>：在应用销毁前，确保取消所有的订阅和解绑所有绑定的事件处理函数，以避免潜在的内存泄漏问题。</li>
<li><strong>断开连接和清理资源</strong>：如果应用与后端服务建立了连接或使用了其他资源，应在销毁阶段断开连接并清理相应的资源，以释放占用的资源和确保正确的资源管理。</li>
<li><strong>清理定时器和计时器</strong>：如果应用中使用了定时器或计时器，应在销毁阶段清理它们，以防止在应用销毁后继续运行并导致潜在的问题。</li>
<li><strong>清理缓存和状态</strong>：根据应用的需求，可以在销毁阶段清除应用使用的缓存数据或状态，以确保下次启动应用时处于初始状态。</li>
</ol>
</li>
</ol>
<h2 id="多语言--国际化-multi-languages--internationalization">多语言 &amp; 国际化 Multi-languages &amp; Internationalization</h2>
<ul>
<li>国际化主键 i18n Plugins</li>
<li>国际化主键 i18n Key</li>
<li>国际化声明 i18n Declaration</li>
<li>国际化大小写约定</li>
</ul>
<h3 id="国际化插件-i18n-plugins">国际化插件 i18n Plugins</h3>
<p>请安装 lokalise.i18n-ally 插件，以实现更好的 i18n 国际化编写体验：</p>
<ul>
<li>支持一键新增翻译</li>
<li>支持自动机器翻译</li>
<li>支持编辑器文案自动替换</li>
<li>其他实用功能</li>
</ul>
<h3 id="国际化主键-i18n-key">国际化主键 i18n Key</h3>
<p>不同的国际化框架可能对于区别语言和地区的标识符使用不同的约定，为了保持代码共识的一致性，定义统一的 i18n key 规则如下：</p>
<ul>
<li>语言代码：语言代码通常是由两个字母组成，表示语言的 ISO 639-1 代码。例如，<strong><code>zh</code></strong>表示中文，<strong><code>en</code></strong>表示英语。</li>
<li>地区代码：地区代码通常是由两个字母组成，表示地区的 ISO 3166-1 代码。例如，<strong><code>CN</code></strong>表示中国，<strong><code>US</code></strong>表示美国。</li>
<li>语言和地区的组合：使用<strong>语言代码</strong>和<strong>地区代码</strong>的组合来表示不同的语言和地区。例如，<strong><code>zh-CN</code></strong>表示中文（中国），<strong><code>zh-TW</code></strong> 表示中文（台湾），<strong><code>en-US</code></strong>表示英语（美国），<code>es-MX</code> 表示西班牙语（墨西哥）。
<ul>
<li>
<p>如果遇到重复声明，则引用同一份文件即可，比如一些适用繁体中文的地区：</p>
<pre><code class="language-tsx">import zh_CN from './zh-CN.locale.json' // 简体中文，适用地区：中国大陆
import zh_HK from './zh-HK.locale.json' // 繁体中文，适用地区：中国香港，中国台湾

const i18nMap: &lt;I18nCode, Translations&gt; = {
        'zh_CN': zh_CN,
        'zh-HK': zh_HK,
        'zh-TW': zh_TW
}
</code></pre>
</li>
</ul>
</li>
</ul>
<h3 id="国际化声明-i18n-declaration">国际化声明 i18n Declaration</h3>
<p><strong>文件格式</strong></p>
<p>i18n 有多种编写格式，不同的编程语言支持不同的格式。比如：.yaml, .json, .js, .ts, .properties, .xml 等。</p>
<ul>
<li>在前端工程中，约定使用以下格式：<strong><code>.json</code></strong>&nbsp;&gt;&nbsp;<strong><code>.ts</code></strong>&nbsp;&gt;&nbsp;<strong><code>.mjs</code></strong>&nbsp;&gt;&nbsp;<strong><code>.js</code></strong></li>
</ul>
<p><strong>数据形态</strong></p>
<p>约定使用 KeyPath 结构，而不是 KeyValue 结构。因为 KeyPath 允许<strong>更细粒度和模块化</strong>，更简洁，可读性更高，可维护性更好。很多 i18n 插件同时支持两种数据格式，但 <strong><code>KeyPath</code></strong> 更适合现代前端工程。</p>
<ul>
<li>
<p><strong>Nested/KeyPath</strong>： <strong><code>KeyPath</code></strong>&nbsp;是 key 对应命名空间关键字，可以无限衍生，value 对应文本内容。</p>
<ul>
<li>
<p><strong>写法格式</strong>：JSON 文件中的 namespace 使用 PasCal 大驼峰的格式暴露以区别普通 key。</p>
<pre><code class="language-json">{
"WelcomePage": {
    "title": "Welcome to our website!"
}
}
</code></pre>
<pre><code class="language-tsx">{
"WelcomePage": {
    "title": "欢迎访问我们的网站！"
}
}
</code></pre>
</li>
<li>
<p>用法示例</p>
<pre><code class="language-tsx">const { t } = useTranslation('WelcomePage')
const title = t("title") // 对应语言文案
</code></pre>
</li>
</ul>
</li>
<li>
<p><s>Flat/KeyValue: <strong><code>KeyValue</code></strong>&nbsp;是 key 的 value 对应的文本内容。</s></p>
<ul>
<li>
<p>写法格式</p>
<pre><code class="language-json">{
        "message.common.code.askDecryptionAgain": "Do you want to decrypt again?"
}
</code></pre>
<pre><code class="language-tsx">{
        "message.common.code.askDecryptionAgain": "是否重新解密?"
}
</code></pre>
</li>
<li>
<p>用法示例</p>
<pre><code class="language-jsx">const confirmMessage = i18n.t('message.common.code.askDecryptionAgain')
</code></pre>
</li>
</ul>
</li>
</ul>
<h3 id="国际化大小写约定">国际化大小写约定</h3>
<ol>
<li>菜单 / 列头：每个单词的首字母大写（介词除外 at, on, for, with etc.）</li>
<li>操作 / 功能：仅首字母的单词大写，专有名词除外</li>
</ol>
<p>同 ant-design pro 的做法保持一致。</p>
<p><img src="%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83%E6%96%87%E6%A1%A3/image.png"></p>
<h2 id="应用配置与枚举-configurations-and-enums">应用配置与枚举 Configurations and Enums</h2>
<p>所有的异步资源，在设计接口时使用 async/await 异步 + Memory Cache 的模式。如果数据未请求过，则发起 Http 请求。若请求过，则从缓存中读取。</p>
<h3 id="系统配置-system-configurations">系统配置 System configurations</h3>
<p>系统设置 ，是初始化系统时的前置依赖，不同的环境有不同的配置。通常的设计是后端架构师使用 Apollo 定义配置后通过接口 <code>/api/system/config</code> 返回给前端：</p>
<pre><code class="language-tsx">interface SystemConfig {
    /* CDN 静态资源地址 */
    CDN_URL: string
    /* 资源上传地址 */
    uploadURL: string
    /* 资源下载地址 */
    downloadURL: string
    /* 图标下载地址 - 系统 icons，通常是维护的 iconfont url */
    iconfontURL: string
    /* API 请求前缀 */
    API_BASE_URL: string
    /* 当前版本 */
    version: string | number
    /* 其他系统三方依赖的配置 */
    systemTitle: string
    systemLogo: string
    systemEnumAPI: string
    /* 等等其他配置项 */
}
</code></pre>
<h3 id="系统枚举-system-enums">系统枚举 System enums</h3>
<p>在开发业务系统时，会定义大量的枚举。枚举的定义，多数由后端同学在开发后端逻辑时定义。比如 Java 的 <code>EnumClass</code>，TypeScript 的 <code>Enum</code> 对象等。这些枚举在我们的系统中被大量使用，而被循环渲染的过程中有多种业态，比如：</p>
<ul>
<li>select 下拉框</li>
<li>radio 单选框</li>
<li>checkbox 多选框</li>
</ul>
<p>因此，保证枚举的及时性和一致性至关重要。<strong>枚举的一致性影响我们的开发体验</strong>，<strong>枚举的及时性影响我们的用户体验</strong>。常见的场景是：</p>
<ol>
<li>后端维护后端枚举</li>
<li>前端维护前端枚举</li>
<li>共同枚举的管理 ⚠️
<ol>
<li>前端改了，跟后端接口返回不一致</li>
<li>后端改了，前端无感知</li>
</ol>
</li>
<li>后端枚举更新了
<ol>
<li>前端必须 follow 更改</li>
<li>前端必须发版本</li>
<li>才能触达用户</li>
</ol>
</li>
</ol>
<p><strong>因此枚举不适合也不应该在前端维护</strong>。枚举应该通过接口统一返回，此时可以根据业务的使用密度来划分枚举接口的密度。比如，在初始化业务系统时，被即时使用到枚举，可以在系统初始化时通过接口 /api/system/enums 返回：</p>
<pre><code class="language-tsx">interface Enum {
    /* 枚举名 */
    label: string
    /* 枚举值 */
    value: string | number
    /* 摘自 @ant-design/pro-components */
    status: 'Success' | 'Error' | 'Processing' | 'Warning' | 'Default';
}

// 推荐使用 键值对 的方式，方便前端做判断
type EnumMap = Record&lt;string, Enum&gt;
// 使用 List 的方式，方便前端做 for 循环渲染
type EnumList = Enum[]
</code></pre>
<p>使用 EnumMap 的好处在于，可以直接通过 EnumMap 定位到具体的 option。举例 GET <code>/api/system/enum/userStatus</code>：</p>
<pre><code class="language-jsx">{
    code: 0,
    success: true,
    data: {
      UserStatus: {
            Online: { label: '在线', value: 1, status: 'Success' },
            Offline: { label: '离线', value: 0, status: 'Warning' },
            Deleted: { label: '已删除', value: -1, status: 'Error' },
      },
      // other enums
    }
}
</code></pre>
<p>在代码中判断很好使用：</p>
<pre><code class="language-jsx">// 如果用户状态为在线
if (row.userStatus === UserStatus.Online.value) {
    // code here
}
</code></pre>
<p>当作为 select 筛选时：</p>
<pre><code class="language-jsx">const userStatusList = Object.values(UserStatus)
</code></pre>
<h3 id="枚举的国际化-i18n-for-enums">枚举的国际化 i18n for Enums</h3>
<ol>
<li>后端实现，后端在返回 <code>/api/enum/*</code> 时根据 request-headers 中的 accept-language 传回对应的翻译后的语言版本。</li>
<li>前端实现，不推荐这么做。前端实现，<strong>则带来了开发体验上的断层</strong>。</li>
</ol>
<h2 id="身份认证与权限-permission--auth">身份认证与权限 Permission &amp; Auth</h2>
<p>"Auth"（身份验证）和 "Permission"（权限）是在软件开发中常用的两个概念，它们在用户认证和授权方面起着不同的作用：</p>
<ol>
<li>
<p><strong>Auth（身份验证）：</strong></p>
<p>身份验证（Auth）是确认用户身份的过程。它用于验证用户是否是系统中的合法用户，并且具有适当的凭据来访问系统资源。身份验证通常涉及用户提供凭据（如用户名和密码）以验证其身份。认证成功后，系统会授予用户一个身份标识（如令牌或会话），以便在后续的请求中验证用户的身份。</p>
<p>身份验证的目的是确保只有经过验证的用户可以访问系统的受保护资源。它通常用于用户登录和访问控制的过程中。例如，用户在网站上登录时需要进行身份验证，以便系统可以验证其身份并授予相应的访问权限。</p>
</li>
<li>
<p><strong>Permission（权限）：</strong></p>
<p>权限（Permission）是指授予用户或用户组对系统资源执行特定操作的权力。权限控制决定了哪些用户可以执行哪些操作，并限制了他们对资源的访问。权限通常与用户的角色、组织结构或其他属性相关联。</p>
<p>权限控制的目的是确保用户仅能访问其被授权的资源，并限制他们对系统中敏感或保密信息的访问。例如，一个系统管理员可能具有更高级的权限，可以执行敏感操作，而普通用户只能执行有限的操作，受到访问限制。</p>
</li>
</ol>
<p>总结来说，<strong>身份验证（Auth）用于验证用户的身份，并为其颁发身份标识</strong>，而<strong>权限（Permission）用于控制用户对系统资源的访问和操作</strong>。身份验证确保用户是合法用户，而权限控制决定了用户可以做什么以及对哪些资源具有访问权限。</p>
<h3 id="用户校验-auth">用户校验 Auth</h3>
<ol>
<li>
<p>用户登录 User login - 在系统初始化的生命周期中判断用户是否登录，并根据用户登录后的角色与权限执行后续逻辑。若未登录，则重定向到登录页面。 <code>/login?redirect=prevPage</code></p>
<pre><code class="language-tsx">type Role = string | number
type FunctionKey = string | number

interface BaseEntity {
createdTime: Date
createdUser: User['id']
updatedTime: Date
updatedUser: User['id']
}
</code></pre>
<pre><code class="language-tsx">import React, { useEffect, PropsWithChildren } from 'react'

// user.context.ts
interface User extends BaseEntity {
id: string
name: string
/* 角色 */
roles: Role[]
/* 权限点 */
functionKeys: FunctionKey[]
}

const UserContext = createContext&lt;User&gt;(null | null)

const UserProvider: React.FC&lt;PropsWithChildren&gt; = ({ children }) =&gt; {
const = useState&lt;User | null&gt;(null);
const history = useHistory();

useEffect(() =&gt; {
    const checkUserLogin = async () =&gt; {
      const isLoggedIn = checkIfUserIsLoggedIn(); // 自定义函数，用于判断用户是否登录

      if (isLoggedIn) {
      const user = await getUserData(); // 自定义函数，用于获取用户数据
      setUser(user);
      } else {
      const redirectUrl = window.location.href; // 获取当前页面 URL
      history.push(`/login?redirect=${encodeURIComponent(redirectUrl)}`);
      }
    };

    checkUserLogin();
}, );

return &lt;UserContext.Provider value={user}&gt;{children}&lt;/UserContext.Provider&gt;;
};

export { UserContext, UserProvider };
</code></pre>
</li>
</ol>
<h3 id="鉴权-permission">鉴权 Permission</h3>
<ul>
<li>
<p>用户身份角色 User Roles - 通常的设计是，路由 <code>Route['meta']</code> 需要指定权限点，再判断用户的权限点中是否拥有该权限，如果拥有则放入有效路由表中，并动态装载到路由表中。</p>
<pre><code class="language-tsx">interface Route {
    path: string
    name: string
    component: any
    children?: Route[]
    meta: {
      title: string
      roles: Role[]
      cache: boolean
    }
}
</code></pre>
<ul>
<li>路由菜单权限 Page Route Menu - 根据用户角色权限渲染指定路由，仅渲染有权限的路由，否则跳转 404。</li>
</ul>
<pre><code class="language-tsx">const geneNewRoutes = (allRoutes: Route[]) =&gt; {
    const newRoutes = []

    allRoutes.forEach((route) =&gt; {
      if (user.roles.includes(route.name)) {
            if (route?.children?.length) {
                route.children = geneNewRoutes(route.children)
            }

            newRoutes.push(route)
      }
    })

    return newRoutes
}
</code></pre>
</li>
<li>
<p>用户权限点 Function Keys - 判断用户的权限点是否拥有该权限，拥有则渲染，反之不渲染。</p>
<pre><code class="language-tsx">type FunctionKeys = string[]
</code></pre>
<ul>
<li>按钮模块功能权限 Button/Module Feature - 根据用户权限点判断用户是否有某个指定权限，并根据条件渲染特定功能模块。</li>
</ul>
<pre><code class="language-tsx">import React, { PropsWithChildren } from 'react'
import UserContext from '@/contexts/user.context'

interface IAccessProps {
    functionKeys: string[]
    fallback?: React.ReactNode
}

const Access: React.FC&lt;PropsWithChildren&lt;IAccessProps&gt;&gt; = ({
    functionKeys = [],
    fallback = null,
    children
}) =&gt; {
    const user = useContext(UserContext)
    const functions = user.functionKeys
    const accessible = functionKeys.every(key =&gt; functions.includes(key))

    return accessible ? typeof children === 'function' ? children(accessible) : children : fallback
}
</code></pre>
</li>
</ul>
<h2 id="应用缓存-application-storage-cache">应用缓存 Application Storage Cache</h2>
<ul>
<li>Memory（内存）存储：
<ul>
<li>将数据存储在内存中，例如使用变量、数组或对象等数据结构。</li>
<li>当页面刷新或关闭时，内存中的数据会丢失。</li>
<li>对于临时数据或者在单个页面会话中传递数据的场景很有用。</li>
<li>不受存储空间限制，但是占用内存可能会影响性能。</li>
</ul>
</li>
<li>Session（会话）存储：
<ul>
<li>使用 <strong><code>sessionStorage</code></strong> 对象存储数据，数据存储在浏览器的会话期间。</li>
<li>当浏览器或标签页关闭时，存储的数据会丢失。</li>
<li>用于在页面会话期间存储临时数据，例如表单输入或页面设置。</li>
<li>存储空间一般在 5-10MB 之间，因浏览器而异。</li>
</ul>
</li>
<li>Local（本地）存储：
<ul>
<li>使用 <strong><code>localStorage</code></strong> 对象存储数据，数据存储在浏览器的持久存储中。</li>
<li>即使浏览器关闭或刷新，存储的数据依然存在，除非用户清除浏览器缓存或主动删除。</li>
<li>用于存储持久性数据，例如用户设置、应用配置或缓存数据。</li>
<li>存储空间一般在 5-10MB 之间，因浏览器而异。</li>
</ul>
</li>
<li>IndexedDB 存储：
<ul>
<li>客户端非关系型数据库技术，提供结构化数据存储和事务处理。</li>
<li>支持键值对和对象存储，可以处理复杂查询和大量数据。</li>
<li>适用于需要本地处理大量数据的 Web 应用程序。</li>
<li>存储空间受用户设备和浏览器设置限制，可达数百兆甚至更多。</li>
<li>是现代 Web 开发中推荐的客户端数据库技术。</li>
</ul>
</li>
<li>其他储存
<ul>
<li>CookieStorage - 略</li>
<li>CacheStorage - 增加 expireTime 在读写时处理过期的数据</li>
</ul>
</li>
</ul>
<h2 id="表单原子性-from--field-与表单校验-validator">表单原子性 From &amp; Field 与表单校验 Validator</h2>
<h3 id="表单组件">表单组件</h3>
<ul>
<li>Form - 表单控件，中后台 CRUD 高频控件。</li>
<li>Field - 字段控件，其内置了各种数据类型的渲染。
<ul>
<li>currency</li>
<li>number</li>
<li>text</li>
<li>percent</li>
<li>progress</li>
<li>date</li>
<li>datetime</li>
<li>time</li>
<li>等常见类型，全部类型参见 ProField 的 ValueType 枚举。</li>
</ul>
</li>
</ul>
<h3 id="验证库">验证库</h3>
<ul>
<li><strong>async-validator</strong> - 阿里前端开发的异步验证库，是 ant design 和 element ui 的验证库。</li>
<li>joi - The most powerful data validation library for JS.</li>
<li>zod - 围绕尽可能友好的开发体验而设计。</li>
<li>…</li>
</ul>
<h1 id="常见副作用-common-side-effects">常见副作用 Common side effects</h1>
<h3 id="事件监听">事件监听</h3>
<ul>
<li>Window 全局级事件 https://developer.mozilla.org/en-US/docs/Web/API/Window
<ul>
<li>DOMLoaded</li>
<li>load</li>
<li>unload</li>
<li>unhandledRejection</li>
</ul>
</li>
<li>BOM 事件
<ul>
<li>Mouse event</li>
<li>Keyboard event</li>
<li>focus/blur/scroll</li>
<li>...</li>
</ul>
</li>
</ul>
<h3 id="异步回调">异步回调</h3>
<ul>
<li>事件回调</li>
<li>网络请求</li>
<li>定时器
<ul>
<li>setTimeout</li>
<li>setInterval</li>
<li>process.nextTick =&gt; only for Nodejs</li>
</ul>
</li>
<li>文件 I/O</li>
<li>...</li>
</ul>
<h1 id="资源处理-resource-processing">资源处理 Resource processing</h1>
<h3 id="加载方式">加载方式</h3>
<ul>
<li>动态资源
<ul>
<li>XHR
<ul>
<li>
<p>请求功能：</p>
<ul>
<li>类型适配 - adapter（适配器模式）</li>
<li>数据处理 - transformData（代理模式）</li>
<li>数据拦截 - interceptors（拦截器模式）</li>
<li>异常处理 - errorHandler</li>
</ul>
<p>请求库对比：</p>
<ul>
<li>axios - 经典 XHR 请求框架，据说作者面试 Google 翻车后去了 Apple。</li>
<li>useRquest - 阿里出品的 ahooks 库中的 request hook，同下面的 useSWR，但更简单好用？！能快速配合 react + ant design 生态。</li>
<li>useSWR - React 社区很流行的一个 request library。</li>
<li>react-query 相比swr feature更多，但是打包体积也更大。</li>
</ul>
</li>
</ul>
</li>
<li>JSONP</li>
</ul>
</li>
<li>静态资源
<ul>
<li>JS/CSS/HTML</li>
<li>Image/Video/Audio</li>
<li>...</li>
</ul>
</li>
<li>加载状态
<ul>
<li>加载中 - loading</li>
<li>加载完成 - success</li>
<li>加载失败 - failed</li>
</ul>
</li>
</ul>
<h3 id="数据类型">数据类型</h3>
<ul>
<li>JSON</li>
<li>XML</li>
<li>Text</li>
<li>HTML</li>
<li>FormData</li>
<li>Binary</li>
<li>GraphQL</li>
<li>...</li>
</ul>
<h3 id="加载方式-1">加载方式</h3>
<ul>
<li>同步加载</li>
<li>异步加载 - 懒加载/按需加载</li>
</ul>
<h2 id="提效工具-tools">提效工具 Tools</h2>
<ul>
<li>VSCode Plugins
<ul>
<li>Github Copilot</li>
<li>Codeium</li>
</ul>
</li>
<li>VSCode Snippets</li>
</ul>
<h2 id="工作流工具-cicd">工作流工具 CI/CD</h2>
<h3 id="开发阶段">开发阶段：</h3>
<ul>
<li>Stylelint for css</li>
<li>Prettier for IDE</li>
<li>Eslint for typescript</li>
<li>Commitlint</li>
<li>Changeset</li>
<li>.editorconfig</li>
</ul>
<h3 id="部署阶段">部署阶段：</h3>
<ul>
<li>Github Action</li>
<li>Gitlab pipeline</li>
<li>Jenkins web-hook</li>
<li>Docker deploy</li>
<li>Vercel</li>
</ul>
<h2 id="页面视觉规范">页面视觉规范</h2>
<ul>
<li>规范哲学</li>
<li>设计价值观</li>
<li>视觉效果</li>
<li>视觉体验</li>
</ul>
<h3 id="规范哲学-1">规范哲学</h3>
<ul>
<li><strong>设计为目的服务</strong> —— 完美不在于无以复加，而在于无可删减，万事莫不如此。—— 摘自 AntDesign</li>
<li><strong>技术为产品服务</strong> —— 发现、学习、整理和洞察市场的需求，再设计满足该需求的功能产品与业务流程。—— 摘自 AntDesign</li>
<li><strong>产品为用户服务</strong> —— 产品的增长依赖于用户的群体扩大和深度使用，而用户的成长又依赖于产品功能的完善。—— 摘自 AntDesign</li>
<li>好用才是核心 —— 如无必要，勿增实体，不分散用户注意力，让用户专注于任务达成，而非界面。通过情感化设计，适度安抚用户负面情感，强化用户正面情感。—— 摘自 AntDesign</li>
</ul>
<h3 id="设计价值观">设计价值观</h3>
<p>参考 Ant-Design 设计价值观（2025-03-28 新增），默认 UI 的设计风格完全跟 Ant-Design Pro 靠齐，间距、表单、图表、列表都是。以<strong>保持设计语言与价值观的一致性与连贯性。</strong>（2025-03-26 新增）</p>
<ul>
<li>BTW，老板的意志 &gt; 总监的意志 &gt; <strong>保持设计语言的一致性与连贯性&gt;</strong> 产品经理的意志 &gt; 业务 leader 的意志</li>
</ul>
<h3 id="视觉效果">视觉效果</h3>
<p>现代社会信息过载，所有展示在界面上的信息，我们需要保证它（2025-09-12 新增）：</p>
<ol>
<li><strong>排列工整</strong>，可以看看《写给大家看的设计书》</li>
<li><strong>有意义</strong>，无论是只读 read 还是有交互 action。如果这个信息没有意义，就删掉它</li>
<li><strong>对于数据细节</strong>（比如单据号），默认带有具体的交互细节，比如能直接跳过去 or 可复制</li>
</ol>
<p><img src="%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83%E6%96%87%E6%A1%A3/image%201.png"></p>
<h3 id="视觉体验">视觉体验</h3>
<p>在开发的时候，需要带入一些用户体验的<strong>换位思考</strong>。如果我们作为自己开发的系统页面的用户，会是怎样的感受 ？！（2025-09-12 新增）</p>
<h3 id="oa-系统">OA 系统</h3>
<p><strong>OA 表格的展示规范</strong>，跟猫叔协商后，我们采取跟 Fox 一样的策略 <strong>“效率优先，美观其次”</strong>。规范用法请参考按照如下步骤（2025-10-13 新增）<strong>：</strong></p>
<ol>
<li>“重要信息” 不要使用 ellipsis 省略号，需要<strong>全部展示并自动换行</strong>。怎么定义“重要信息”的边界？比如第一列内容（除开序号），通常是最重要的内容。</li>
<li>表格宽度上，保证 column 列之间的 “<strong>视觉间距一致</strong>”，不要有 “<strong>大段留白的突兀感</strong>”。
<ol>
<li>因为信息的密度不同（比如说“中文名”和“英文名”的字符数量），但是它们通常都有一些共性</li>
<li>比如中文名通常 2 到 4 个字符串，英文名比较长，但是我们可以默认支持 8 个英文字符的换行，从而达到 “视觉上的宽度和间距一致性”。</li>
</ol>
</li>
<li>针对内容宽度不固定无法取到折中值的场景，通过<strong>设置 column 列的 minWidth 和 maxWidth 属性</strong>让内容自适应宽度。
<ol>
<li>ant-design Table 中默认不支持 max-width 属性，我们可以通过编写 hook 去包装所有 render，通过在 render 中渲染一个容器元素，并给容器元素设置 maxWidth 样式实现</li>
<li>且该 render 是支持 ant-design/pro-components 中的 valueType 属性的无需再手写各种 column 的 formatters，可以通过&nbsp;<code>render: (dom,entity,index, action, schema) =&gt; React.ReactNode</code>&nbsp;回调函数的第一个参数 dom 拿到。</li>
</ol>
</li>
<li>默认使用如上展示策略，除开产品要求的特殊场景。</li>
</ol>
<h3 id="fox-系统">Fox 系统</h3>
<ul>
<li>PageContainer 不用显示页面标题 title，因为 InnerTabs 站内多标签页已经展示了 title</li>
<li>Card 不需要边框，默认全部使用无边框的 Card</li>
<li>ProTable 的 FilterForm 的 label 宽度需要右对齐，即固定 width 而非 auto，且默认收起</li>
<li>要最小化的缩减用户的交互，比如：表单 form 默认 focus 第一项，支持键盘完成所有操作
<ul>
<li>新增的交互使用弹窗，而且默认选中第一个 input 输入框，目的是尽可能减少用户的操作（点击 or 筛选）</li>
</ul>
</li>
<li>客户的电脑屏幕并不大，以及色彩跟字体都没有 Mac 精细，需要考虑空间性价比，以及 Windows 低分辨率下美观</li>
</ul>
<p>大多数中台的页面都是如下几种类型：</p>
<ul>
<li>组件结构（Components）</li>
<li>列表页（List）</li>
<li>表单页（Form）</li>
<li>详情页（Detail）</li>
<li>过渡效果 (Loading Effect)</li>
</ul>
<h3 id="组件结构">组件结构</h3>
<p>在目前系统中主要的组件结构如下（2025-04-16 新增）：</p>
<ul>
<li>Page 页面组件，即 PageContainer 包裹的页面组件</li>
<li>EntityTable 实体列表组件，即 ProTable 列表组件，渲染模型列表数据</li>
<li>ModelForm 模型表单组件，即 Form 表单组件，编写模型字段的值</li>
<li>ModelDescription 模型描述组件，即 Description 描述组件，描述实体字段意义</li>
<li>EditPage 编辑页组件，即 PageContainer + ModelForm</li>
<li>DetailPage 详情页组件，即 PageContainer + ModelDescription</li>
</ul>
<p><strong>Why?</strong>（2025-04-16 新增）</p>
<ul>
<li><strong>关注点分离</strong>：「Page 页面组件」 只负责布局结构，表格逻辑被封装到 「EntityTable 实体列表组件」 中</li>
<li><strong>代码复用</strong>：「EntityTable 实体列表组件」 可在其他地方重用，「ModelForm」, 「ModelDescription」 同理</li>
<li><strong>可维护性提高</strong>：更改组件逻辑时只需修改特定组件，不会影响其他组件</li>
<li><strong>测试更容易</strong>：独立组件更易于单元测试</li>
</ul>
<h3 id="列表页">列表页</h3>
<p><strong>编写细节</strong></p>
<ul>
<li>
<p>在列表页或者详情页的渲染中，通常有数据转换的场景。比如最常见的日期范围选择，前端使用 DateRangePicker 渲染选择后的值是一个数组 <code></code>，但后端接受的是两个字段 <code>startTime</code> &amp; <code>endTime</code>。（2025 年 5 月 12 日新增）</p>
<p>Before: 在 request 的函数里面处理，一大堆的 <code>converter</code>。</p>
<p>After: ant-design pro-components 包括其他 pro-table, pro-fields 中处理数据的格式化都有这个 <code>transform</code> API，不用再转来转去了。</p>
<pre><code class="language-tsx">    {
      title: t('Check.QualityResult.callTime'),
      dataIndex: 'callTime',
      key: 'callTime',
      width: 160,
      valueType: 'dateRange',
      initialValue: [
          dayjs()
            .subtract(1, 'day')
            .startOf('day')
            .format('YYYY-MM-DD HH:mm:ss'),
          dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
      ],
      fieldProps: {
          allowClear: false,
      },
      search: {
          transform: values =&gt; {
            const callTimeRange = convertDateRangeToStartAndEnd(values);

            return {
            startCallTime: callTimeRange,
            endCallTime: callTimeRange,
            };
          },
      },
      order: 1,
      tooltip: t('Check.ResultStatistics.callDateTooltip'),
      render: (_, record) =&gt; record.callTime,
      }
</code></pre>
</li>
<li>
<p>列表中的枚举如果在语义上带有明显的 “积极” 或 “消极” 意味，则需要添加状态 <code>status</code> 或者颜色 <code>color</code> 标识以提升用户体验，方便用户快速识别（2025-04-17 新增）</p>
<p><img src="%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83%E6%96%87%E6%A1%A3/image%202.png"></p>
<p>2025-06-06 新增</p>
<p><img src="%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83%E6%96%87%E6%A1%A3/image%203.png"></p>
</li>
<li>
<p>列表上 item 请使用 react-router 自带的 <code>Link</code> 渲染，以保持浏览器对 a 标签渲染的默认行为。</p>
<p><img src="%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83%E6%96%87%E6%A1%A3/image%204.png"></p>
</li>
<li>
<p>列表页的日期默认选择当天 today 的日期，且 FilterForm 中有 dateRange 选项时候，设置 DatePicker 的 clearable 为 false，禁止用户清空。（2025-03-28 新增，背景：Fox 的数据太大，不带日期的查询很消耗性能）</p>
</li>
<li>
<p>列表中如果存在日期 / 时间类文案字段这种具有固定长度的表格，设置一个直接可见数据全貌的款度，不要鼠标移上去再展示全部。鼠标移上去展示全部，适用于那种场景？（2025-06-06 新增）</p>
<ul>
<li>这个数据本身就是人类不友好的，不可读的，不可以理解的，比如 ID，编号 等系统字段</li>
<li>人类可读的，友好的，都应该尽量显示全貌，避免多余的步骤</li>
<li>除了备注或者长文本那种场景，实在太多显示不了，又不重要的，可以显示省略号然后鼠标移上去展示</li>
</ul>
</li>
</ul>
<p><img src="%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83%E6%96%87%E6%A1%A3/image%205.png"></p>
<h3 id="表单页">表单页</h3>
<p>表单分成两种情况：</p>
<ul>
<li><strong>ModalForm</strong> - 弹窗表单，这种直接使用 ProComponents 提供的组件 <code>ModalForm</code> &gt; <code>ModelForm</code> 即可。</li>
<li><strong>ModelForm</strong> - 模型表单（即数据表单），通常被独立放在 1 个页面中存在。这种方式的区别是：
<ul>
<li>需要新开路由 <code>/list/edit/:id?</code> ，有 id 参数即是编辑，无 id 参数即是新增</li>
<li>需要解耦成独立组件 <code>PageContainer</code> &gt; <code>Card</code> &gt; <code>ModelForm</code> &gt; <code>ProForm</code>，便于未来可能向 ModalForm 方式迁移</li>
</ul>
</li>
</ul>
<h3 id="详情页">详情页</h3>
<p><strong>左右分栏页</strong>，记得<strong>吸顶</strong>或者<strong>吸底</strong>。</p>
<p><img src="%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83%E6%96%87%E6%A1%A3/image%206.png"></p>
<p>列表中 item 的详情页的 PageContainer 的 title 需要使用该 item 的业务标题，这是一个被忽视的细节，真实用户在使用的使用确实更在乎的是<strong>业务标题</strong>，而不是什么<strong>页面名</strong>。</p>
<p><img src="%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83%E6%96%87%E6%A1%A3/image%207.png"></p>
<h3 id="过渡效果">过渡效果</h3>
<p>不要写这种 <code>loading...</code> 感觉非常奇怪。 loading for what? Why needs loading indicator here? 突兀，奇怪，不自然。</p>
<blockquote>
<p>Loading 的基本特征就是，<strong>尽可能保证过渡效果的“自然”</strong>。</p>
</blockquote>
<p><img src="%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83%E6%96%87%E6%A1%A3/image%208.png"></p>
<ol>
<li>如果组件本身自带尺寸 size（width * height），使用一些组件自带的 loading，比如 Card, List 的 loading 属性。</li>
<li>使用 Skeleton 骨架屏，或者Spin + spinning 把组件包裹起来也可以</li>
<li>明确弃用 ProCard 的 loading，因为太丑了。改为使用 ant-design 的 Card 组件的 loading。</li>
</ol>
<h2 id="service-层编写规范">Service 层编写规范</h2>
<p>Service 层负责封装 API 调用和数据转换逻辑。本文档规范适用于 <code>packages/components/src/services/</code> 下的协议服务实现。</p>
<h3 id="基本结构">基本结构</h3>
<p><strong>使用 Class 而非函数</strong>：所有 Service 必须使用 Class 声明，通过 constructor 接收配置。</p>
<pre><code class="language-typescript">export class UlinkPhoneService {
constructor(private readonly config: FoxChatConfig) {}

async fetchPhoneInfo(caseId: string | number): Promise&lt;PhoneInfoResponse&gt; {
    // implementation
}
}
</code></pre>
<p><strong>命名规范</strong>：</p>
<ul>
<li>Service 类名：<code>{Protocol}{Feature}Service</code> 格式，如 <code>UlinkPhoneService</code>、<code>CollectConversationService</code></li>
<li>文件名：与类名一致，如 <code>phone.service.ts</code></li>
</ul>
<p><strong>文件位置</strong>：按协议/功能分目录存放</p>
<pre><code>services/
├── ulink/
│   ├── conversation.service.ts
│   ├── template.service.ts
│   ├── message.service.ts
│   └── phone.service.ts
├── collect/
│   └── ...
└── shared/
    └── ...
</code></pre>
<h3 id="代码组织顺序">代码组织顺序</h3>
<pre><code class="language-typescript">// 1. 类型导入（外部 -&gt; 内部）
import type { FoxChatConfig } from '@/types/fox-chat.type';
import { toOptionalString, toRecord } from '@/utils/converter.util';
import { request, type API } from '@feoe/shared';

// 2. 常量定义
const API_PATHS = {
PHONE_INFO: '/im/sms/phone/info',
} as const;

// 3. Helper 函数（如有）
function isNotFoundError(error: unknown): boolean {
// ...
}

// 4. Service Class 定义
export class UlinkPhoneService {
constructor(private readonly config: FoxChatConfig) {}

// 公开方法
async fetchPhoneInfo(): Promise&lt;PhoneInfoResponse&gt; {}

// 私有方法
private getCaseId(): string | number | undefined {}
}
</code></pre>
<h3 id="必需元素">必需元素</h3>
<h4 id="1-api_paths-常量">1. API_PATHS 常量</h4>
<p>所有 API 路径必须定义为常量，使用 <code>as const</code> 确保类型安全：</p>
<pre><code class="language-typescript">const API_PATHS = {
CONVERSATION_LIST: '/bifrost-hermod/chat/list',
CONVERSATION_UNREAD: '/bifrost-hermod/chat/unread',
SESSION_INFO: '/im/session/info',
} as const;
</code></pre>
<h4 id="2-错误处理">2. 错误处理</h4>
<p>必须检查 <code>businessEndpoint</code> 是否配置：</p>
<pre><code class="language-typescript">async fetchPhoneInfo(caseId: string | number): Promise&lt;PhoneInfoResponse&gt; {
if (!this.config.businessEndpoint) {
    throw new Error('businessEndpoint 未配置，无法调用号码信息接口');
}

const url = `${this.config.businessEndpoint}${API_PATHS.PHONE_INFO}`;
// ...
}
</code></pre>
<h4 id="3-响应验证">3. 响应验证</h4>
<pre><code class="language-typescript">const response = await request.get&lt;API.Response&lt;PhoneInfoResponse&gt;&gt;(url, {
params: { caseId },
});

if (response.data.code !== 0) {
throw new Error(String(result.message ?? '获取号码信息失败'));
}
</code></pre>
<h4 id="4-类型安全">4. 类型安全</h4>
<p>使用 typescript 声明实体 Entity 的接口和字段</p>
<h3 id="注释规范">注释规范</h3>
<p><strong>Class 注释</strong>：说明协议、端点、与同类 Service 的区别</p>
<pre><code class="language-typescript">/**
* Ulink 协议 - 号码信息服务
*
* 获取案件可下发模板短信的号码（注册手机号或联系手机号）
*
* @remarks
* 端点：GET /im/sms/phone/info?caseId={caseId}
*/
export class UlinkPhoneService {
// ...
}
</code></pre>
<p><strong>公开方法注释</strong>：必须有 JSDoc 注释</p>
<pre><code class="language-typescript">/**
* 获取案件号码信息
*
* @param caseId - 案件 ID
* @returns 号码信息，包含注册手机号和联系手机号
*/
async fetchPhoneInfo(caseId: string | number): Promise&lt;PhoneInfoResponse&gt; {
// ...
}
</code></pre>
<h3 id="导出规范">导出规范</h3>
<p>在对应的 <code>index.ts</code> 中：</p>
<pre><code class="language-typescript">// 导出 Service 类
export { UlinkConversationService } from './conversation.service';
export { UlinkTemplateService } from './template.service';
export { UlinkMessageService } from './message.service';
export { UlinkPhoneService } from './phone.service';

// 导出公共类型（不导出内部辅助类型）
export type {
CreateConversationByCaseParams,
FoxChatConversation,
FoxChatConversationCreateParams,
FoxChatConversationIdentity,
FoxChatConversationInfo,
FoxChatConversationListParams,
FoxChatConversationMetadata,
FoxChatConversationQueryParams,
FoxChatSupportedChannelSession,
SupportedChannelSession,
} from './conversation.service';

export type { PhoneInfo, PhoneInfoResponse } from './phone.service';
</code></pre>
<h3 id="参考示例">参考示例</h3>
<p>参考以下文件实现：</p>
<ul>
<li><code>packages/components/src/services/ulink/template.service.ts</code></li>
<li><code>packages/components/src/services/ulink/conversation.service.ts</code></li>
<li><code>packages/components/src/services/ulink/phone.service.ts</code></li>
</ul>
<h3 id="与应用层-service-的区别">与应用层 Service 的区别</h3>
<table>
<thead>
<tr>
<th>类型</th>
<th>位置</th>
<th>用途</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>协议 Service</strong></td>
<td><code>packages/components/src/services/</code></td>
<td>封装协议通信，跨应用复用</td>
<td><code>UlinkPhoneService</code></td>
</tr>
<tr>
<td><strong>应用 Service</strong></td>
<td><code>apps/{name}/services/</code></td>
<td>应用特定业务逻辑</td>
<td><code>UserService</code></td>
</tr>
</tbody>
</table>
<p>协议 Service 应保持协议无关性，不包含特定业务的逻辑。</p><br><br>
来源：https://www.cnblogs.com/givingwu/p/18293975

查看完整版本: 前端开发规范文档