一站式开源持续测试平台，为软件质量保驾护航

## 提交规范 ### 1. 提交消息格式 ```bin <Type>[optional Scope]: <Description> [optional body] [optional footer] ``` #### Type 提交的类型 > 表示提交的目的或影响的范围 - feat: 新功能（A new feature） - fix: 修复 bug（A bug fix） - docs: 文档变更（Documentation changes） - style: 代码样式调整（Code style changes） - refactor: 代码重构（Code refactoring） - test: 测试相关的变更（Test-related changes） - chore: 构建过程或工具变动（Build process or tooling changes） - perf: 性能优化（Performance optimization） - ci: CI/CD 相关的变动（Changes to the CI/CD configuration or scripts） - revert: 撤销之前的提交（Revert a previous commit） #### Scope 作用域 提交的作用域，表示本次提交影响的部分代码或模块，可以根据项目的需要选择性地添加。 #### Description 描述 简明扼要地描述本次提交的内容 #### body 正文 可选的详细描述，可以包含更多的信息和上下文 #### footer 脚注 可选的脚注，通常用于引用相关的问题编号或关闭问题。 ## 示例提交消息： ``` feat(user): add login functionality - Add login form and authentication logic - Implement user authentication API endpoints Closes #123 ``` 在这个示例中，提交类型为 feat（新功能），作用域为 user，描述了添加登录功能的内容。正文部分提供了更详细的说明，并引用了问题编号。 ## 架构总览 ``` ├── babel.config.js // babel配置，支持JSX ├── commitlint.config.js // commitlint配置，校验commit信息 ├── components.d.ts // 组件注册TS声明 ├── config // 项目构建配置 │ ├── plugin // 构建插件 │ ├── utils // 构建工具方法 │ ├── vite.config.base.ts // vite基础配置 │ ├── vite.config.dev.ts // vite开发环境配置 │ └── vite.config.prod.ts // vite 生产配置 ├── index.html // 单页面html模板 ├── src │ ├── App.vue // 应用入口vue │ ├── api // 项目请求api封装 │ │ ├── http // axios封装 │ │ ├── modules // 各业务模块的请求方法 │ │ ├── requrls // 按业务模块划分的接口地址 │ ├── assets // 全局静态资源 │ │ ├── images - svg │ │ ├── logo.svg │ │ ├── style │ ├── components // 组件 │ ├── config // 全局配置，常量类、JSON │ ├── directive // 自定义指令集 │ ├── enums // 全局枚举定义 │ ├── hooks // 全局hooks集 │ ├── layout // 应用布局组件 │ ├── locale // 国际化配置 │ ├── main.ts // 项目主入口 │ ├── mock // mock数据配置 │ ├── models // 全局数据模型定义 │ ├── router // 路由 │ ├── store // pinia状态库 │ ├── types // 全局TS声明 │ ├── utils // 公共工具方法 │ └── views │ ├── modules // 页面模块 │ └── base // 公共页面，403、404等 │ ├── env.d.ts // 环境信息TS类型声明 └── .env.development // 开发环境变量声明 └── .env.production // 生产环境变量声明 └── .eslintrc.js // eslint配置 └── .prettierrc.js // prettier配置 └── tsconfig.json // 全局TS配置 ``` <a name="dd14f832"></a> ## -状态管理模块设计 Vue3 状态管理方案采用的是`pinia`，API 风格与`Redux`类的状态管理库类似，也是通过模块化的方式注册`模块store`，每个`store`中包含数据仓库`state`、数据包装过滤`getter`、同步/异步操作`action`。与`Vuex`相比，`pinia`提供了`compasition-API`、完整支持 TS 以及可扩展的`Plugin`功能。<br />整体模块划分为业务模块`modules/*`、注册入口`index`以及插件`plugins/*`。<br />首先，在`store/index.ts`中声明注册`pinia`并引入自定义的插件： ```typescript import { createPinia } from 'pinia'; import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'; import { debouncePlugin } from './plugins'; import useXXStore from './modules/xx'; const pinia = createPinia(); // 插件会在实例创建后应用，因此插件不能在pinia实例创建前使用 pinia.use(debouncePlugin).use(piniaPluginPersistedstate); export { useXXStore }; // 导出模块store export default pinia; ``` 然后，在项目入口`mian.ts`中使用： ```typescript import { createApp } from 'vue'; import store from '@/store'; import app from '@/App.vue'; createApp(app).use(store).mount('#app'); ``` <a name="piniaPlugins.ts"></a> ### plugins 在此文件内编写`pinia`插件，并在注册的时候引入使用即可： ```typescript import { debounce, isObject } from 'lodash-es'; // 首先得声明插件使用到的额外属性，因为pinia的TS类型声明中，每个store只有三个原生属性state、getters、actions，若没有使用到额外属性则无需声明 declare module 'pinia' { export interface DefineStoreOptionsBase<S, Store> { cache?: Partial<CacheType<S, Store>>; // 缓存配置 debounce?: Partial<Record<keyof StoreActions<Store>, number>>; // 节流配置 } } // 基于lodash的防抖函数封装，读取store中cache配置的属性，针对已配置的属性更改操作进行防抖处理 export const debouncePlugin = ({ options, store }: PiniaPluginContext) => { if (options.debounce) { return Object.keys(options.debounce).reduce((debounceActions: debounceAction, action) => { debounceActions[action] = debounce(store[action], options.debounce![action]); return debounceActions; }, {}); } }; ``` 上述自定义插件，在 store 中如下配置： ```typescript export const useStore = defineStore('demo', { state: () => ({ testDebounce: '', }), getters: {}, actions: {}, debounce: { // 防抖设置 testDebounce: 500, // 值为防抖缓冲时间 }, }); ``` <a name="520bb47a"></a> ## -网络模块设计 网络模块包含：请求 url 封装`api/requrls/*`、请求方法封装`api/modules/*`、请求工具封装`api/http/*`。 <a name="slaQE"></a> ### requrls 将项目接口地址收敛至此文件夹下管理，避免出现一个项目多个重复接口 url、方便接口地址复用且方便统一处理 ```typescript export const LoginUrl = '/api/user/login'; export const LogoutUrl = '/api/user/logout'; export const GetUserInfoUrl = '/api/user/info'; export const GetMenuListUrl = '/api/user/menu'; ``` <a name="y561q"></a> ### modules 将项目实际请求方法按业务模块划分，统一管理实际业务请求，将请求方法与接口地址解耦 ```typescript import axios from 'axios'; import { LoginUrl, LogoutUrl, GetUserInfoUrl, GetMenuListUrl } from '@/api/requrls/user'; import type { RouteRecordNormalized } from 'vue-router'; import type { UserState } from '@/store/modules/user/types'; import type { LoginData, LoginRes } from '@/models/user'; export function login(data: LoginData) { return axios.post<LoginRes>(LoginUrl, data); } export function logout() { return axios.post<LoginRes>(LogoutUrl); } export function getUserInfo() { return axios.post<UserState>(GetUserInfoUrl); } export function getMenuList() { return axios.post<RouteRecordNormalized[]>(GetMenuListUrl); } ``` 最终通过`index.ts`将请求方法暴露出去 ```typescript export * from './modules/user'; export * from './modules/dashboard'; export * from './modules/message'; ``` <a name="0f0a9627"></a> #### 请求工具封装 基于`axios`封装请求方法，提供`form-data/json/urlencoded`格式的数据处理、�