Sherry Platform Vue3

Sherry Platform Vue3 提供了一个基于 Vue3+TS+Pinia+AntdV@3 的、开箱即用的中后台管理系统项目模板，该模板里包含了 platform, pro-components, hooks, utils 四个包。

待完善

• [] postcss-html 依赖发布新版本后，完善 stylelint 对 vue 文件的样式修复
• [] 优化代码提交时的检测速度
• [] ProSearch 组件支持折叠展开

platform

这个包保存了中后台管理系统项目的业务代码，所有的业务开发都在这里的 src 目录下进行，下文介绍了 src 下的每一个目录及文件的作用。

api

• 保存所有与后端相关的接口及类型定义
• api/types.ts 保存了与后端接口相关的通用类型定义
• api/utils.ts 保存了与 API 相关的工具函数
• xxx 目录保存该模块的所有接口
  • xxx/config.ts 保存该模块的统一配置
  • xxx/yyy 目录保存该模块下的子模块接口
  • xxx/yyy 子模块至少包含以下文件：
    • api.ts 保存模块下的所有的 API
    • config.ts 保存模块下的所有配置信息，如接口路径等
    • enums.ts 保存模块下的所有枚举数据，这些枚举数据与后端一一对应
    • types.ts 保存模块下的所有类型信息，这些类型信息根据实际情况来撰写
    • index.ts 统一导出 api.ts, config.ts, enum.ts, types.ts 中的所有内容``

assets

• 保存所有的静态资源
• assets/icons 目录保存所有的自定义 SVG 图标，各 SVG 图标分类保存
  • assets/icons/index.ts 导入所有的自定义 SVG 图标
  • assets/icons/xxx 目录保存该类型/模块的图标
• assets/styles 目录保存所有的样式文件
  • assets/styles/theme 目录保存主题定制的相关文件
  • assets/styles/common 目录保存通用的样式
  • assets/styles/mixins 目录保存常用的 LESS 函数
• assets/images 目录保存全局的图片文件

components

• 保存所有的业务组件
• 每个业务组件都用单独的文件夹存放
• 所有的业务组件都在对应文件夹下的 index.ts 文件中导出
• 所有的业务组件统一在 components/index.ts 文件中导出

config

• 保存全局的统一信息，如全局统一的枚举值等

core

• 保存项目运行的核心代码
• core/authorization 目录下保存了操作权限相关的核心代码
• core/permission 目录下保存了路由权限相关的核心代码
• core/bootstrap.ts 文件保存了项目启动时的核心代码
• core/lazy-use.ts 文件保存了 Vue 插件引入的核心代码

hooks

• 保存业务相关的 hooks
• 每个 hook 存放到单独的文件中，最后统一从 hooks/index.ts 文件中导出

layouts

• 保存布局相关的业务代码
• 目前模板里提供了 basic-layout 和 blank-layout 两套布局

mocks

• 保存 mock 相关的业务代码，代码组织推荐与 api 模块保持一致，一一对应

router

• 保存路由配置的业务代码
• router/basic-routes 目录下保存 basic-layout 布局对应的路由
• router/blank-routes 目录下保存 blank-layout 布局对应的路由

stores

• 保存 Pinia Store 相关的业务代码
• stores/modules 目录下保存每个 Store，最终在 stores/index.ts 文件中导出

types

• 保存全局通用的业务类型定义

utils

• 保存全局通用的业务工具函数

views

• 保存所有的视图文件
• 视图文件建议以模块划分
• 每个模块下的静态资源统一放到该模块的 assets 目录下

pro-components

这个包保存了所有的通用组件，这些组件都是 业务无关 的，每个组件的用法和属性含义都有详细注释。

Ellipsis 组件

• 该组件用于提供文本溢出折叠的功能

PageWrapper

• 该组件用于简单包裹视图内容

ProEmpty

• 该组件用于 Empty 状态展示，在 ant-design-vue Empty 组件基础上做了一些扩展

ProLayout

• 该组件用于业务系统布局，封装了中后台管理系统中常用的布局

ProSearch

• 该组件用于检索表单，可用于 List、Table 等需要提供检索的场景

ProSelect

• 该组件用于提供远程查询选择、触底继续加载等额外功能

ProTable

• 该组件提供了页面级的 Table 组件封装，包含检索表单、工具栏、Table 内容

SvgIcon

• 该组件封装了 SVG 雪碧图的使用，需要与 svg-sprite-loader 插件配合

utils

这个包保存了各类的工具函数和工具对象。

axios plus

• 对 Axios 进行了二次封装。
• 封装了 token 刷新 的逻辑
• 提供了 beforeRequest, afterResponse, refreshToken, onRequestError 和 onResponseError 钩子

其他

• console.ts 封装了日志打印的函数
• patterns.ts 提供了一些通用的正则表达式
• utils.ts 提供了一些其他的工具函数

hooks

这个包保存了通用的 hooks。

use-auto-trig-collapse

• 该 hook 用于监听指定元素 (target) 的 resize 事件和宽度，以设置是否折叠
• 使用该 hook 时，默认监听的元素为 window

use-controllable-value

• 该 hook 用于将指定属性转为支持非受控的属性
• 常用于将 prop 里的属性封装为 v-model 属性

use-request

• 该 hook 封装了 axios 请求的常用逻辑，如 loading 处理、error 处理等