前端概述

中后台前端使用了分离式开发，前端可独立于后端进行，如需单独使用 DuxRefine 请查看对应开发文档，该教程是针对配合 Dux Next 后端的接口进行开发。

开发前请确保您有基础的前端部署和 react、ts 开发知识，并且经过 示例应用 教程，对 Dux Next 前端架构有了初步的了解。

前端目录为项目目录中的 web 目录，保证统一性请勿移动目录，并且编译后的文件在 public/manage 目录中。

前端架构

前端采用 Refine 企业级前端框架作为基础，并在此基础上开发了针对 TDesign React 的桥接整合，提升稳定性与易开发性，同时为使用者提供了优秀的交互界面。

前端资源

前端资源使用了 refine 的资源，并在此之上进行了封装，资源可以自动绑定一个 资源名 并且利用资源生成多级菜单和生成后台访问的 api 地址，可在资源对应的页面组件中轻松访问 api 数据。

扩展增强

为了简化开发，前端框架中封装了常用的表格、列表、弹窗表单、表单页面和图表等组件，避免重复的代码编写。

目录架构

为了方便与 Dux Next 后端保持一致的架构前端架构也采用应用式架构的目录结构。

.
├── pages # 页面文件
│   └── manage # 管理模块
│       ├── admin # admin 管理层
│       │   ├── role # 角色
│       │   └── user # 用户
│       ├── store # store 管理层
│       │   ├── role # 角色
│       │   └── user # 用户
│       └── index.tsx # 模块配置
│   └── content # 内容模块
│       ├── admin # admin 管理层
│       │   ├── category # 分类页面
│       │   └── article # 文章页面
│       ├── store # store 管理层
│       │   ├── category # 分类页面
│       │   └── article # 文章页面
│       └── index.tsx # 模块配置
代码调试
独立部署