# onemenu-admin

**Repository Path**: xfc03/onemenu-admin

## Basic Information

- **Project Name**: onemenu-admin
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-18
- **Last Updated**: 2026-02-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React 项目模板

## 🔧 注意事项(重要)

1. 修改 `package.json` 中的 `name` 为项目名称
2. 按需修改环境变量文件：
   - `.env.development` - 开发环境
   - `.env.test` - 测试环境
   - `.env.production` - 生产环境
3. 修改constant目录下的index.ts文件中的值,测试环境项目都会部署到同一个域名下,防止缓存信息相互冲突
   - `TOKEN_NAME` - 替换当前项目的Token名称
   - `LOCAL_NAME` - 替换LocalStorage存储名称(建议使用`项目名称+存储名称`,如`gymgoer-local`,若未使用可以不用管或移除)
   - `SESSION_NAME` - 替换SessionStorage存储名称(建议使用`项目名称+存储名称`如`gymgoer-session`,若未使用可以不用管或移除)
4. 若客户需要源代码,请移除upload.js文件,无需将此文件上传至客户仓库

## 📦 环境要求

- Node.js: v18+ (推荐 v22.2.0,该项目模板基于此版本构建)
- 包管理器: pnpm (推荐)

## 🚨 提交规范

项目使用 `husky + lint-staged` 进行提交格式检查。
具体规范参见 [commitlint](https://github.com/conventional-changelog/commitlint/#what-is-commitlint)。

## 🚀 技术栈

- **核心框架**: React 19 + TypeScript
- **UI 组件库**: Ant Design 5
- **状态管理**: Zustand
- **路由**: React Router DOM 7
- **HTTP 客户端**: Axios
- **构建工具**: Vite
- **代码规范**: ESLint + Prettier
- **工具库**:
  - `ahooks` - React Hooks 库
  - `dayjs` - 日期处理
  - `classnames` - className 组合
  - `react-image-crop` - 图片裁剪
  - `use-clipboard-copy` - 剪贴板操作
  - `react-infinite-scroll-component` - 无限滚动

## 🛠️ 脚本命令

| 命令                | 说明                 |
| ------------------- | -------------------- |
| `pnpm dev`          | 开发模式启动         |
| `pnpm test`         | 测试模式启动         |
| `pnpm start`        | 生产模式启动         |
| `pnpm build:test`   | 构建测试环境包       |
| `pnpm build:prod`   | 构建生产环境包       |
| `pnpm preview:test` | 构建测试环境包并预览 |
| `pnpm preview:prod` | 构建生产环境包并预览 |
| `pnpm deploy:test`  | 构建测试包并上传     |
| `pnpm lint`         | 运行 ESLint 检查     |
| `pnpm format`       | 格式化文件           |

## 📂 目录结构

```
demo/
├── .husky/ husky脚本
│ └── commit-msg - git commit规范验证
├── .vscode/ VS Code 配置
│ └── setting.json - 用户设置
├── public/  公共资源
├── src/ 源代码目录
│ ├── api/ API 接口
│ ├── assets/ 静态资源
│ ├── components/ 公共组件
│ ├── constant/ 常量管理
│ ├── enums/ 枚举值管理
│ ├── hooks/ hooks管理
│ ├── layout/ 布局管理
│ ├── routes/ 路由管理
│ ├── service/ 服务管理
│ ├── store/ 状态管理
│ ├── styles/ 全局样式
│ ├── theme/ 全局样式
│ ├── types/ 基础类型、泛型工具
│ ├── utils/ 工具函数
│ ├── views/ 页面组件
│ ├── App.tsx 根组件
│ └── main.tsx 应用入口
├── .editorconfig 跨编辑器代码格式化统一配置
├── .env.development 开发环境配置
├── .env.test 测试环境配置
├── .env.production 生产环境配置
├── commitlint.config.js 提交规范配置
├── eslint.config.js ESLint配置
├── .prettierrc Prettier配置
├── upload.js 测试环境上传脚本配置
├── package.json 项目配置
└── vite.config.ts Vite配置
```

## ⚙️ 配置文件

- `vite.config.ts` - Vite 配置
- `eslint.config.js` - ESLint 规则
- `.prettierrc` - 代码格式化配置
- `upload.js` - 测试环境上传脚本

## 📱 屏幕适配方案

项目使用 **rem 适配方案**实现屏幕分辨率自适应，确保 Ant Design 组件和项目中的样式能够随屏幕分辨率等比缩放。

### 方案概述

- **适配方式**: rem 单位 + 动态根元素 font-size
- **设计稿基准**: 1920px（可在 `src/utils/rem-adapter.ts` 中修改）
- **转换工具**: PostCSS (postcss-pxtorem) + Vite 插件 + 运行时适配器
- **适配范围**: SCSS 样式、内联样式、Ant Design 组件

### 实现原理

1. **动态根元素 font-size**

   - 根据屏幕宽度动态设置 `html` 元素的 `font-size`
   - 屏幕越大，`font-size` 越大，所有使用 `rem` 的元素等比放大
   - 缩放范围：50% - 200%（可在 `rem-adapter.ts` 中调整）

2. **SCSS 样式转换**

   - PostCSS 自动将 SCSS 文件中的 `px` 转换为 `rem`
   - 配置见 `postcss.config.js`

3. **内联样式转换**

   - **编译时**: Vite 插件自动转换 JSX 中的数字 px 值
   - **运行时**: MutationObserver 监听 DOM 变化，处理动态添加的样式

4. **Ant Design 组件适配**
   - 通过 `ConfigProvider` 配置 Token
   - 通过 `antd.scss` 覆盖组件样式，使用 `rem` 单位

### 配置文件

#### 1. PostCSS 配置 (`postcss.config.js`)

```javascript
{
  plugins: {
    "postcss-pxtorem": {
      rootValue: 16,        // 基准值，1rem = 16px
      unitPrecision: 5,     // rem 的小数位数
      propList: ["*"],      // 转换所有属性
      selectorBlackList: [".ant-"], // 排除 antd 类名
      replace: true,
      mediaQuery: false,
      minPixelValue: 1
    }
  }
}
```

#### 2. rem 适配器 (`src/utils/rem-adapter.ts`)

- `initRemAdapter()`: 初始化 rem 适配，动态设置根元素 font-size
- 设计稿基准宽度：`DESIGN_WIDTH = 1920`
- 基准字体大小：`BASE_FONT_SIZE = 16`

#### 3. 内联样式适配

- **Vite 插件** (`vite-plugin-auto-rem.ts`): 编译时转换
- **运行时适配器** (`src/utils/inline-style-rem-adapter.ts`): 运行时处理动态样式
- **工具函数** (`src/utils/px-to-rem.ts`): 手动转换工具

### 使用方法

#### 自动转换（推荐）

**SCSS 文件**：

```scss
.container {
  width: 100px;  // 自动转换为 6.25rem
  margin-top: 16px; // 自动转换为 1rem
}
```

**内联样式**：

```tsx
// 编译时自动转换
<div style={{ width: 100, marginTop: 16 }} />
// 转换为：<div style={{ width: "6.25rem", marginTop: "1rem" }} />
```

#### 手动转换（复杂情况）

```tsx
import { pxToRem } from "@/utils/px-to-rem";

<div style={{ width: pxToRem(100), marginTop: pxToRem(16) }} />
```

### 调整配置

#### 修改设计稿基准宽度

编辑 `src/utils/rem-adapter.ts`：

```typescript
const DESIGN_WIDTH = 1920; // 改为你的设计稿宽度
```

#### 修改缩放范围

编辑 `src/utils/rem-adapter.ts`：

```typescript
const minFontSize = BASE_FONT_SIZE * 0.5; // 最小 50%
const maxFontSize = BASE_FONT_SIZE * 2;   // 最大 200%
```

#### 排除特定样式不转换

在 `postcss.config.js` 中配置 `selectorBlackList`：

```javascript
selectorBlackList: [".ant-", ".no-rem"] // 排除 .ant- 和 .no-rem 类名
```

### 注意事项

1. **Ant Design 组件**: 已通过 `antd.scss` 手动处理，使用 `rem` 单位覆盖默认样式
2. **复杂内联样式**: Vite 插件可能无法处理所有复杂情况，建议使用 `pxToRem()` 工具函数
3. **媒体查询**: PostCSS 配置中 `mediaQuery: false`，媒体查询中的 px 不会被转换
4. **最小转换值**: 小于 `minPixelValue` (1px) 的值不会被转换
5. **Sass 语法**: 项目使用 `@use` 替代已弃用的 `@import` 语法

### 相关文件

- `postcss.config.js` - PostCSS 配置
- `vite-plugin-auto-rem.ts` - Vite 插件（内联样式转换）
- `src/utils/rem-adapter.ts` - rem 适配器
- `src/utils/inline-style-rem-adapter.ts` - 运行时内联样式适配器
- `src/utils/px-to-rem.ts` - px 转 rem 工具函数
- `src/styles/antd.scss` - Ant Design 样式覆盖
- `src/theme/index.tsx` - Ant Design Token 配置

## 🔗 相关文档

- [React 文档](https://react.dev)
- [Ant Design 文档](https://ant.design)
- [Zustand 文档](https://zustand-demo.pmnd.rs)
- [Vite 文档](https://vitejs.dev)