# wonderland

**Repository Path**: coke-code/wonderland

## Basic Information

- **Project Name**: wonderland
- **Description**: react18 + vite + antd5  template
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-28
- **Last Updated**: 2022-12-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# REACT后台开发模板

## 项目简介

后台通用业务开发模板

### 依赖版本

- React@18.2.0
- Antd@5.0.2
- React-router-dom@6.4.3
- Axios@1.2.0
- Vite@3.2.3

## 风格规范

### 命名

#### 文件及目录

大驼峰命名组件（component）和页面（page）以及布局（layout），其他文件通常用小驼峰
通常除了`index`文件外其余文件及文件名都采用大驼峰命名法

#### TS 规范

遵循选型中 eslint 配置，使用 Airbnb 规范
代码注释规范，采用 jsdoc: <https://jsdoc.app/>

#### 样式规范

CSS 的命名，采用 BEM 命名规范，可以有效的避免组件间样式的相互污染，减少嵌套层级。具体规则如下：

BEM 使用分隔符将类名区隔成三个部分：
[prefix]-[block]__[element]--[modifier]

- prefix：全局的前缀，这里指代表 tdesign 的前缀，也就是 t-
- Block(块) ：组件的最外层父元素，这个类包含最通用和可重用的功能。
- Element(元素) ：组件内可包含一个或多个元素，元素为块添加了新功能。无需重置任何属性。
- Modifier(修饰类) ：块或元素都可以通过修饰词来表示为变体。

#### Git 提交规范

使用 angular 提交规范：

<https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#commits>

feat 与 fix 提交将被用于生成 changelog

- feat：新功能
- fix：修补 bug
- docs：文档类变动
- style：样式
- refactor：重构
- test：增加测试
- chore：构建过程或辅助工具的变动

## 主要功能

### 路由权限

常见的权限系统分为两类：

1. 前端固定路由表和权限配置，由后端提供用户权限标识（静态遍历）
2. 后端提供权限和路由信息结构接口，动态生成权限和菜单（动态生成）

采用后端返回角色所包含的权限，前端进行控制方案（`静态遍历`）。此方案不会带来过于复杂的系统涉及，且适合绝大多数场景。

#### 工作方式

登录返回当前角色id`role`，前端调用接口获取当前角色的所有`access`

```typescript
//login
interface ILogin{
  id: number
  name: string
  role: id
  slogan: string
  avatar: string
  lastIn: number
}

// access
interface IAccess {
  id: number
  parentId: number
  name: string
  key: string
  view?: string[]
  action?: string[]
}
```

1. `router/dictionary`是静态前端路由配置的字典，每次新增页面需要在此配置`对应组件`和`路由地址`，以及**最关键**的路由唯一表示`key`。
2. 后端返回`扁平`权限数组，数组包含`唯一标识`字符串`key`，`操作`字符串数组`action`，`视图`字符串数组`view`。下面关于这几个名词的解释：

- `key` 后端返回的`key`与`字典路由`中的`key`属于一一对应关系，用于建立对应关系和匹配
- `action` 当前路由视图中展示但禁止操作的按钮或交互
- `view` 当前路由视图中动态的元素的阅读权限

#### 路由方法

- `findRouteBySearch` 通过`key`或`path`搜索`字典`中的路由
- `getRouteByAccess` 将`access`转换成系统中的权限路由

#### hook

**useAccess**：获取当前路由的交互操作`action`及动态元素`view`的权限控制

```typescript
  interface IAccess {
    action?: string[]
    view?: string[]
  }
  const access:IAccess = useAccess()
```