# react-store-admin

**Repository Path**: jsfront/react-store-admin

## Basic Information

- **Project Name**: react-store-admin
- **Description**: 一款商城管理系统
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 15
- **Forks**: 6
- **Created**: 2021-06-23
- **Last Updated**: 2023-05-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React + Typescript + craco
商城管理后台

[comment]: <> (- [Admin - 在线预览]&#40;http://demo.vyan.top/vue3-store-admin/&#41;)

[comment]: <> (- [H5 - 在线预览]&#40;http://demo.vyan.top/vue3-store-h5/&#41;)
- [产品原型](https://www.xiaopiu.com/web/byId?type=project&id=5b08d8e6f57b373a03dd5d67)
- [接口文档地址](http://139.198.172.231:8490/api/api.html)
- [react-store-admin - 任务看板](https://gitee.com/jsfront/react-store-admin/board)
- [React-store-admin](https://gitee.com/jsfront/react-store-admin)
- [API-store-server](https://gitee.com/jsfront/store-server)

## 技术栈

技术 | 说明 | 官网
----|----|----
craco | 前端开发与构建工具 | [https://github.com/gsoft-inc/craco](https://github.com/gsoft-inc/craco)
React | 用于构建用户界面的JavaScript库 | [https://react.docschina.org/](https://react.docschina.org/docs/getting-started.html)
React router | 官方的路由管理器 | [http://react-guide.github.io/react-router-cn/](http://react-guide.github.io/react-router-cn/)
React Hooks | React状态管理 | [https://react.docschina.org/docs/hooks-intro.html](https://react.docschina.org/docs/hooks-intro.html)
ahooks | 一个React Hooks库 | [https://ahooks.js.org/zh-CN/](https://ahooks.js.org/zh-CN/)
Mobx | 简单、可扩展的React状态管理 | [https://cn.mobx.js.org/](https://cn.mobx.js.org/)
Axios | 基于promise 的HTTP 库 | [https://github.com/axios/axios](https://github.com/axios/axios)
Ant Design | 前端UI组件库 | [https://2x.antdv.com/](https://2x.antdv.com/)
Mockjs | 生成数据 | [http://mockjs.com/](http://mockjs.com/)
SCSS | CSS预处理器 | [https://sass-lang.com/](https://sass-lang.com/)
Dayjs | 代替Momentjs日期库 | [https://dayjs.gitee.io/zh-CN/](https://dayjs.gitee.io/zh-CN/)
@icon-park/react | 字节图标库 *1 | [https://iconpark.oceanengine.com/](https://iconpark.oceanengine.com/)

*1. `icon-park/react`使用方法 | [https://github.com/bytedance/IconPark/tree/master/packages/react](https://github.com/bytedance/IconPark/tree/master/packages/react)


### 开发工具

#### Windows

名称 | 工具 | 官网
----|----|----
VScode | 主开发工具 | [https://code.visualstudio.com/](https://code.visualstudio.com/)
Webstorm | 辅开发工具 | [https://www.jetbrains.com/webstorm/](https://www.jetbrains.com/webstorm/)
Atom | 源码阅读工具 | [https://atom.io/](https://atom.io/)
Cmder | Cmd替代工具[windows] | [https://cmder.net/](https://cmder.net/)
Notepad2 | 临时单文件编辑[windows] | [http://www.flos-freeware.ch/notepad2.html](http://www.flos-freeware.ch/notepad2.html)
Chrome | 调试工具 | [https://www.google.com/intl/zh-CN/chrome/](https://www.google.com/intl/zh-CN/chrome/)

#### Mac

名称 | 工具 | 官网
----|----|----
Iterm2 | Mac OS终端利器[Mac] | [https://iterm2.com/](https://iterm2.com/)


## 文件结构

```javascript
├─dist           // 上线发布目录
├─public         // 公共资源目录
└─/
   ├─api           // 所有请求方法
   ├─assets        // 资源目录
   ├─components    // 全局组件
   ├─config        // 全局配置
   ├─hooks         //
   ├─interface     // 全局Interface
   ├─layouts       // 布局文件
   ├─model         //
   ├─router        // 路由
   ├─store         // Mobx
   ├─styles        // CSS
   ├─typings       //
   ├─utils         // 公共方法目录
   └─views         // 页面
       ├─common       // 常用操作
       ├─dashboard    // 首页
       ├─login        // 登录
       ├─order        // 订单管理
       ├─error        // 404, 403
       ├─product      // 商品管理
       ├─system       // 系统设置
       └─user         // 用户设置
```

需要注意的点：

- `@/components`已做批量绑定全局组件处理
- `@/config/app.js`：所有后期不会变化的数据
- `@/layout` 登录之后整个页面的组件放置处，比如头部导航`@/layout/Header`，左侧菜单`@/layout/Sider`，中间主区域的
- `@/layout/Content`等，

```javascript

const pre = '/index/'
export default [
 {
   path: '/',
   component: Layout,
   redirect: { name: 'dashboard' },
   children: [
     {
       path: `/dashboard`,
       name: 'dashboard',
       title: '公告板',
       component: () => import('@/views/dashboard/index'),
     }
   ]
 }
]
```
- `router`
  空路由的处理
```javascript
export default [
 {
   path: '/404',
   component: () => import('@/views/other/404'),
   hidden: true
 },
 {
   path: '*',
   redirect: '/404',
   hidden: true
 }
]
```

- `store` 不建议把所有的数据都放到store中来管理，无跨组件单路由数据就在当前路由处理。
- `styles` 为了方便全局引入相关的scss变量，，此项目中引入了：`_variables.scss, mixins.scss`方便全局内直接引用文件中的变量。
- `utils` 是所有公共方法集合，基本为业务无关方法。
- `views` 所有routes对应页面集合

### 开发约定
除了eslint之外的约定(若第三方参数违反约定，可以单行关闭`/*eslint-disable */`)：

- 根据前面的阐述，全局组件的增加，只要`@/components`中按驼峰式命名填加，其它的文件不用修改。
- views中超过2个语义的文件夹用中划线连接，`components`文件中单词用驼峰式，且首字母大写，文件名小写字母为路由映射文件，大写字母为组件引用文件。
- 所有组件名、css相关属性起始字母app，比如`<app-view />`就单一组件名称，`<div class="app-login"/>`为login容器，备选名称为：`ui`。

### 待开发的

#### 1. 一期

##### 1.1 登录

- [x] 根据token登录
- [x] 获取登录图形验证码
- [x] 获取当前用户信息
- [x] 过期刷新token
- [x] Dashboard 信息展示（订单统计信息，模块新闻显示）

##### 1.2 角色权限

- [ ] 角色管理
- [ ] 角色菜单管理
- [ ] 角色菜单显示控制

##### 1.3 订单管理

- [ ] 订单列表
- [ ] 订单查询
- [ ] 发货管理
- [ ] 售后管理
- [ ] 评价管理
- [ ] 配送管理
- [ ] 订单设置

##### 1.4 设置

- [ ] 个人信息管理
- [ ] 修改密码

##### 1.5 商品管理

- [ ] 商品列表
- [ ] 商品分类

#### 2. 二期

##### 2.1 店铺管理

- [ ] 店铺概况
- [ ] 店铺装修
- [ ] 广告管理

##### 2.2 会员管理

- [ ] 会员统计
- [ ] 会员列表
- [ ] 会员卡管理

##### 2.3 系统设置

- [ ] 店铺信息管理
- [ ] 管理员信息管理
- [ ] 床铺、交易等信息设置

#### 3. 三期

##### 3.1 营销管理

- [ ] 秒杀管理
- [ ] 优惠券管理
- [ ] 拼图管理