---
group:
    title: 项目开发规范
    order: 13
title: 2.使用说明
---

### 关于通用工具、组件等用法更新说明

> Ant Design：6.x 组件库当前使用 6.x 版本，如需查看官方文档，可访问[组件总览](https://ant.design/components/overview-cn/)。



### 通用组件包更新文档 [查看](/guide/update)

### 项目目录结构说明
```
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md  // 使用说明
├── README.zh-CN.md
├── config    // umi配置
│   ├── config.ts
│   ├── defaultSettings.ts // 默认配置项
│   ├── oneapi.json
│   ├── proxy.ts   // 代理配置
│   └── routes     // 路由
├── jest.config.ts
├── jsconfig.json
├── mock
│   ├── listTableList.ts
│   ├── notices.ts
│   ├── project
│   ├── requestRecord.mock.js
│   ├── route.ts
│   └── user.ts
├── package.json
├── pnpm-lock.yaml
├── public
│   ├── CNAME
│   ├── favicon.ico
│   ├── icons
│   └── scripts
├── src
│   ├── access.ts  // 权限配置
│   ├── app.tsx    // 启动运行主入口
│   ├── assets    // 资源文件
│   ├── components  // 业务组件目录
│   │          
│   ├─data  // 通用配置数据文件
│       │      city.data.js      // 全国城市级数据
│       │      common.use.js     // 常用操作文档提示、基础页码配置
│       │      func.code.js      // 功能权限（按钮、页面）配置代码
│       │      general.config.js //  一些排版等基本配置值项
│       │      index.js
│   ├── global.less
│   ├── global.tsx
│   ├── layouts       // 页面布局结构文件
│   ├── locales // 语言包
│   ├── manifest.json
│   ├── pages
│   ├── requestErrorConfig.ts
│   ├── service-worker.js
│   ├── services
│   ├── theme                 // 主题配置
│       ├──  genCssHook
│       ├──  globalStyles     // 全局样式
│       ├──  tokenConfig      // 重写全局样式变量
│       └──  utils            // TinyColor颜色值工具类：设置透明度等
│   ├── typings.d.ts
│   └── utils  // 工具类
├── tests
│   └── setupTests.jsx
├── tsconfig.json
└── types
    ├── cache
    └── index.d.ts
```
 

## 项目启动命令

###  启动项目
```bash
yarn start
yarn start:no-mock // 使用代理启动,需要对应修改 /config/config.js 的proxy
```

### 打包编译

```bash
npm run build  // 打包到根目录（暂不使用）
npm run build:sub // 打包到指定目录(以命令行配置的 Build_PATH 为准）
```



🔥 关于按钮组功能权限用法：使用方法`checkFuncPermission`，由原来的'disabled'配置有权限返回值由原来的false变成true，配置替换到`isHide`

  ```
      // 筛选栏按钮组
      // funcPermissionCodes来源于common
      import { checkFuncPermission } from '@/utils/utils';
      const controlBtn = [
        {
          code: 'codeBtnCreate', // 新增 直接配置code可不用配置 name 与 icon
          // disabled: !checkFuncPermission(funcPermissionCodes, 'codeBtnCreate'), // (旧用法)是否禁用，返回是则置反
          isHide: checkFuncPermission(funcPermissionCodes, 'codeBtnCreate'), // (新用法)是否有权限，返回是则显示，返回否则隐藏
          fn: () => handleControlType('add'),
        },
      ];
  ```