# IWS-BATCH

**Repository Path**: limengkeweb/iws-batch

## Basic Information

- **Project Name**: IWS-BATCH
- **Description**: 初始化
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-03
- **Last Updated**: 2024-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端 React console 模板工程【子应用/独立应用】

**NOTE: 项目创建后，务必全局搜索 // TODO: 查看需要待修改的地方**

### 0. 简介

- 基于[飞冰 v2](https://v2.ice.work) 框架
- 技术栈：React + TypeScript + Less
- 使用 [pnpm](https://pnpm.io) 管理依赖，使用前请先全局安装（**使用8.x版本**）
- 使用的三方库
  - 微前端：[icestark](https://github.com/ice-lab/icestark)
  - 组件库：[Ant Design v4](https://4x.ant.design/index-cn)、[@ant-design/pro-form](https://procomponents.ant.design/components/form)、[@bud-fe/react-pc-ui](https://react-pc-ui.pages.dev/)
  - 网络请求：[@bud-fe/request](https://www.npmjs.com/package/@bud-fe/request)
  - Hooks：[ahooks](https://ahooks.js.org/)
  - 代码规约：[@bud-fe/f2elint](https://www.npmjs.com/package/@bud-fe/f2elint)
- 若需配置 [ARMS 监控](https://help.aliyun.com/document_detail/58652.html)，请在 `src/arms.ts` 中配置 `pid`

### 1. 快速开始

```bash
# 安装依赖
$ pnpm i

# 启动服务
$ pnpm start # visit http://localhost:8801

# 快速创建模版页面/模版组件/模版model
$ pnpm run new
```

### 2. 特性说明

#### 配置本地调试的 baseURL

修改 `src/config.ts` 中 `config.local.baseURL` 即可。默认为 `https://api-gateway-dev.ab-inbev.cn` 。

#### 样式方案

使用 `less` 开发，组件库使用 [Ant Design](https://4x.ant.design/)、[ProComponents](https://procomponents.ant.design/)

- 全局样式：统一定义在 `src/global.less`。`antd` 组件默认样式需要全局覆盖时，在此处定义
- 局部样式：使用 CSS Modules ，页面/组件的样式文件名约定为 `xxx.module.less`。详见 [样式方案](https://v2.ice.work/docs/guide/basic/style)
- `src/styles/variables.less` 定义了一些通用的尺寸、颜色的 less 变量。**已自动导入，直接使用 less 变量即可**
- `src/styles/mixins.less` 定义了一些常用的 mixin。**已自动导入，直接使用即可**

#### 数据请求

~~使用飞冰的[数据请求](https://v2.ice.work/docs/guide/basic/request)方案。~~ 所有的接口请求都收口定义在 `src/services` 下，可以按业务维度创建文件。使用代码参考 `src/services/system/index.ts`

#### 状态管理

全局应用状态使用飞冰的[状态管理](https://v2.ice.work/docs/guide/basic/store)方案。不使用页面级状态。

#### 微前端

默认配置成子应用。若需要作为独立应用运行，请搜索 `TODO:` 相关注释，删除相关代码

#### 权限管理

使用飞冰的[权限管理](https://v2.ice.work/docs/guide/advanced/auth)方案。

- 页面/菜单权限：参考 `src/app.tsx` 、 `src/routes.ts` 、 `src/layouts/basic-layout/menu-config.ts`
- 按钮/操作权限：参考 `src/app.tsx` 、`src/pages/welcome`

**NOTE: 本地开放环境默认放开所有的页面/菜单、按钮/操作权限。若需修改见 `src/routes.ts` 、 `src/layouts/basic-layout/index.tsx` 和 `src/components/auth/index.tsx` 中的 `TODO:` 相关注释**

#### 代码规约

在飞冰的[代码质量保障](https://v2.ice.work/docs/guide/advanced/quality)方案上，并做了部分修改和扩展（[@bud-fe/f2elint](https://www.npmjs.com/package/@bud-fe/f2elint)）。添加了 `husky` 、 `lint-staged` 。

在每次 `git commit` 的时候会做三件事情：

1. 使用 `prettier` 格式化本次 commit 的代码；
2. `eslint` 校验
3. `stylelint` 校验
4. `commitlint` 校验 （[commit message 规则](http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html%EF%BC%89)）

#### 命名规范

一律使用 `kebab-case` 的形式，即形如 `login-wrapper`

### 3. 项目结构

```
src
├── app.tsx
├── assets // 本地资源文件
├── components // 公共组件
├── config.ts // ice 规定的全局配置。目前主要配置 API 环境
├── constants // 公共常量
├── global.less // 全局样式
├── hooks // 自定义 hooks
├── layouts // 公用的布局组件
│   └── basic-layout
├── models // ice 规定的状态管理 model
│   └── user.ts
├── pages // 页面
├── routes.ts // ice 规定的路由配置
├── services // 根据业务领域封装的 API 请求
│   ├── system.ts // 用户相关API
│   └── demo.ts // 示例代码
├── store.ts // ice 规定的状态管理 store
├── styles
│   ├── index.less
│   ├── mixins.less // 常用的mixin
│   └── variables.less // 常用的less变量
├── typings.d.ts // 全局申明的类型
└── utils
    ├── request.ts // 初始化@bud-fe/request的request实例
    └── tools.tsx // 工具函数
```