# hgyc-mom-web

**Repository Path**: zilla/hgyc-mom-web

## Basic Information

- **Project Name**: hgyc-mom-web
- **Description**: 生产运营系统前端代码
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 13
- **Created**: 2025-11-19
- **Last Updated**: 2025-11-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 特性
- 使用 React 18 hooks 进行构建。
- 基于 Vite 进行快速开发和热模块替换。
- 集成 Ant Design，提供丰富的 UI 组件和设计模式。
- 使用 TypeScript 编写，提供类型安全性和更好的开发体验。
- 响应式设计，适应各种屏幕尺寸和设备。
- 灵活的路由配置，支持多级嵌套路由。
- 集成权限管理，根据用户角色控制页面访问权限。
- 集成国际化支持，轻松切换多语言。
- 集成常见的后台管理功能，如用户管理、角色管理、权限管理等。
- 可定制的主题和样式，以满足您的品牌需求。
- 基于 MSW 和 Faker.js 的Mock方案
- 使用 Zustand 进行状态管理
- 使用 React-Query 进行数据获取
- 使用 react-syntax-highlighter 实现代码显示

## 快速开始

### 获取项目代码

```bash
git clone https://gitee.com/fs-hgyc/hgyc-mom-web
```

### 安装依赖

在项目根目录下运行以下命令安装项目依赖：

```bash
pnpm install
```

### 启动开发服务器

运行以下命令以启动开发服务器：

```bash
pnpm dev
```

访问 [http://localhost:3001](http://localhost:3001) 查看您的应用程序。

### 构建生产版本

运行以下命令以构建生产版本：

```bash
pnpm build
```

构建后的文件将位于 `dist` 目录中。

## 容器化部署

### 构建镜像并运行容器
#### 构建镜像
在终端中进入项目根目录，并执行以下命令来构建 Docker 镜像:
```
docker build -t your-image-name .
```
确保将 `your-image-name` 替换为你自己的镜像名称

#### 运行容器
使用以下命令在 Docker 容器中运行你的应用：
```
docker run -p 3001:80 your-image-name
```
这将在容器的端口 `80` (暴露在`Dockerfile`中) 上运行你的应用，并将其映射到你主机的端口 `3001` 上。

现在，你可以通过访问 http://localhost:3001 来查看部署的应用。


### 使用docker-compose.yaml
在终端中进入项目根目录，并执行以下命令来启动 Docker Compose：
```
docker-compose up -d
```
Docker Compose 根据`docker-compose.yaml`定义的配置构建镜像并在后台运行容器.

容器运行成功后，同样可以通过访问 http://localhost:3001来查看部署的应用。

参考[.commitlint.config.js](./commitlint.config.js)

- `feat` 新功能
- `fix` 修复bug
- `docs` 文档注释
- `style` 代码格式(不影响代码运行的变动)
- `refactor` 重构
- `perf` 性能优化
- `revert` 回滚commit
- `test` 测试相关
- `chore` 构建过程或辅助工具的变动
- `ci` 修改CI配置、脚本
- `types` 类型定义文件修改
- `wip` 开发中

## 使用组件
- `lodash` Lodash 是一个流行的 JavaScript 工具库，提供了丰富的函数来简化数据操作，包括数组、对象、字符串等处理
- `pinyin-pro` 将中文转换成拼音，在菜单搜索时可以直接使用拼音模糊搜索
- `CodeMirror` 代码输入控件，有代码提示
```shell
npm install @uiw/react-codemirror
npm install @codemirror/lang-sql

//使用
import CodeMirror from '@uiw/react-codemirror';
import { sql } from '@codemirror/lang-sql';

<CodeMirror
  value={sqlCode}
  height="200px"
  extensions={[sql()]}
  onChange={(value) => setSqlCode(value)}
/>
```
- `react-full-screen` 组件全屏工具

## 配置
1. 全局样式配置
```
src/store/settingStore.ts
```

## 图标
* 图标库查询 https://www.react-icons.com/#browse-icons

图标库： react-icons

## 自定义组件
### 1. 颜色下来选择器
```tsx
//参考例子： /pages/management/system/dict/DictItem.tsx
<ColorPickerFormItem
  label="颜色"
  name="color"
  rules={[{ required: true, message: "请选择颜色" }]}
/>
```
### 2. 表格字典Tag
```tsx
//在定义column时添加render，dictionaryCode为字典编码
{
  title: "类型",
  dataIndex: "type",
  key: "type",
  width: 60,
  render: (_, record) => <DictionaryTag dictCode="menu_type" value={record.type} />,
}
```

## 自定义hooks
### 1. useDictionary
```tsx
import useDictionary from "@/hooks/system/useDictionary";

//使用字典下拉
const menuType = useDictionary("menu_type");
<Select placeholder="请选择类型">
  {colorOptions.map((option) => (
    <Select.Option key={option.value} value={option.value}>
      {option.label}
    </Select.Option>
  ))}
</Select>

//表格中使用
import TableDictTag from "@/components/grid/TableDictTag";

render:(_, record) => (
    <TableDictTag dictCode="system_status" value={record.status}/>
)
```

### 2. useAuth
```tsx
import useAuth from "@/hooks/system/useAuth";

const { hasPermission } = useAuth();

// 使用示例
<div>
  {hasPermission(['mes:md:mditem:add']) && (
    <Button type="primary" onClick={handleAdd}>新增</Button>
  )}
</div>

```