docs: improve component-development doc (#335)

Author: kongshan-zhuyu

docs/guide/componentDev.md

@@ -7,84 +7,82 @@ group: 研发
 
 ### 几点规范
 
--   组件 API 变量命名规范，尽量采用驼峰式、可语义化的变量名
--   组件内部 CSS 命名规范，在采用 [BEM](https://dtstack.yuque.com/rd-center/sm6war/clgpb7) 规范的基础上，使用 dt-react-component 标识性前缀 **dtc-**
+-   命名规范：组件的名称应该使用大驼峰命名法，且尽量使用有意义的名字，并且应该与文件名相同。
+-   文件组织规范：组件应该被放置在 src 目录中，每个组件应该有自己的文件夹，并使用 index.js 文件作为入口。
+-   类型规范：所有的变量和函数都应该有明确的类型声明，特别是对于需要传递给子组件的 props 和组件状态 state 的类型。
+-   测试规范：编写测试代码是开发组件的必要步骤。使用 Jest 和 @testing-library/react 进行组件测试，确保组件的质量和可靠性。
+-   CSS 命名规范：在采用 [BEM](https://dtstack.yuque.com/rd-center/sm6war/clgpb7) 规范的基础上，使用 dt-react-component 标识性前缀 `dtc-`。
+-   组件化开发思维：React 的核心概念就是组件化开发思想，因此在开发过程中要遵循这个原则。将代码拆分成小的可重用组件，并尽可能减少代码的重复性。
+-   文档规范：遵循简洁、易用的原则，开发对应的文档示例，确保每个示例不会耦合太多的 API。
 
 **如有其他问题后续可以补充**
 
 ### 目录结构
 
 ```plain
 dt-react-component
-├── CHANGELOG.md
-├── README.md
-├── commitlint.config.js
-├── jest.config.js
-├── lib // 编译输出文件
-├── package-lock.json
-├── package.json
-├── scripts // 脚本文件
-│   └── release.sh
-├── setupTests.js
-├── .storybook // storybook 配置文件夹
-├── src
-│   ├── components // 组件文件夹
-│   │   ├── circle
-│   │   ├── goBack
-│   │   ├── index.tsx
-│   │   ├── slidePane
-│   │   └── utils // 组件内部引用的工具类文件
-│   ├── stories // 组件文档文件夹
-│   │   ├── circle.stories.tsx
-│   │   ├── components
-│   │   ├── func
-│   │   ├── goBack.stories.tsx
-│   │   ├── index.stories.tsx
-│   │   ├── slidePane.stories.tsx
-│   │   ├── style // 文档样式
-│   └── styles // 组件总样式
-│       └── index.scss
-├── storybook-static // 输出静态资源
-├── storyshots.test.js
-├── tsconfig.build.json // tsc 编译配置
-└── tsconfig.json
+├─.dumirc.ts                    --> dumi 的配置文件
+├─.editorconfig                 --> 编辑器配置文件，可以约定项目中使用的代码风格、缩进等等规则
+├─.eslintrc.js
+├─.fatherrc.ts                  --> father-build 的配置文件
+├─.prettierignore
+├─.prettierrc.js
+├─.stylelintignore
+├─.stylelintrc
+├─CHANGELOG.md
+├─LICENSE
+├─README-zh_CN.md
+├─README.md
+├─jest.config.js                --> jest配置文件
+├─package.json
+├─pnpm-lock.yaml
+├─tsconfig.json                 --> TypeScript 的配置文件
+├─tests                         --> jest配置相关的文件
+|   ├─fileTransformer.js
+|   ├─setupTests.js
+|   └styleMock.js
+├─src                           --> 组件源码
+|  ├─index.ts                   --> 组件主入口
+|  ├─utils
+|  |   ├─antdProps.ts           --> antd的一些props
+|  |   ├─copy.tsx               --> Copy工具类
+|  |   ├─index.ts               --> 公共方法主入口
+|  |   ├─interface.ts           --> 公共的类型定义
+|  |   └__tests__
+|  ├─useList                    --> 单个组件目录
+|  |    ├─index.md              --> 组件说明文档
+|  |    ├─index.ts              --> 单个组件的源码
+|  |    ├─demos                 --> 不同场景的示例
+|  |    └__tests__              --> 单元测试
+├─docs                          --> 文档目录
+|  ├─index.md
+|  ├─guide
+|  |   ├─CONTRIBUTING.md        --> 贡献指南
+|  |   ├─componentDev.md        --> 组件开发
+|  |   ├─index.md               --> 快速上手
+|  |   └updateLog.md            --> 更新日志
+└.dumi                          --> dumi的配置文件
 
 ```
 
 ### 开发流程
 
-在基于规范基础上开始组件开发，src 文件夹是我们开发中最关心的文件  
-主要步骤大致如下：
+在你 clone 了 dt-react-component 的代码并且使用 pnpm install 安装完依赖后，你还可以运行下面几个常用的命令：
 
--   src/components 业务组件逻辑、组件样式、测试文件编写等
--   src/components/组件名/style.scss **便于 css 按需支持,组件内部样式统一名称为 style.scss**
--   src/stories 组件文档介绍以及动态演示效果编写
--   src/styles 将组件样式文件统一引入，便于统一编译样式文件
-
-**注意点：** 组件内部如需要引用图片资源，目前采用 **base64** 编码后引用
-
-### 组件编译
-
-```plain
-npm run compile
-输出 lib 文件夹
-```
+-   `pnpm dev` 使用 Dumi 工具启动项目的开发模式
+-   `pnpm build` 使用 Father 打包项目
+-   `pnpm docs:build` 使用 Dumi 构建生成文档网站
+-   `pnpm lint` 检查代码风格
+-   `pnpm prepublishOnly` 在发布前运行 father doctor 检查项目配置，并运行 npm run build 进行打包
+-   `pnpm deploy` 先执行 npm run docs:build 构建文档网站，再使用 gh-pages 将构建后的文档部署到 GitHub Pages 上
 
 ### 组件可用性、稳定性测试
 
-在 publish npm 或者私有仓库之前，进行几个增加组件正确性的测试
+在 publish 仓库之前，进行几个增加组件正确性的测试
 
--   npm link，本地项目测试效果
--   npm run test
+-   `pnpm link`
+-   `pnpm test`
 
 ### Tag 以及 CHANGELOG
 
-```plain
-npm run release
-```
-
-参考[版本管理](https://dtstack.yuque.com/rd-center/sm6war/cmdl2z)
-
-### 组件发布
-
-具体可参考[语雀链接](https://dtstack.yuque.com/rd-center/sm6war/ntmwtb)
+-   `pnpm release`