---
hero:
  title: lambo
  description: 致力于提升前端开发效率与规范（开发前请先阅读开发流程）
  actions:
    - text: 快速上手
      link: /bizs
# features:
#   - title: biz
#     emoji: 🍑
#     description: 业务库
#   - title: hooks
#     emoji: 💎
#     description: hooks
#   - title: func
#     emoji: 🌈
#     description: 常用函数库
#   - title: meta
#     emoji: ☀️
#     description: 原子组件库
#   - title: constants
#     emoji: 🈶️
#     description: 静态定义库
#   - title: request
#     emoji: 🥣
#     description: 网络请求库
#   - title: types
#     emoji: 🈸
#     description: typescript 声明库
#   - title: material
#     emoji: 🥱
#     description: 物料库
#   - title: cli
#     emoji: 🐔
#     description: 脚手架
---

## 开发流程

### 1. 确定需求

从 gitlab 上的 [issue](http://10.0.0.88/web-project/zhst-lambo/boards) 模块找到对应的需求。将 Assignee 负责人指派为自己（如果多人协同开发可以将需求拆分为多个需求，分别指派），然后将 Labels 标签改为 doing 状态。（截止日期选填）

> issuse 命名规则：@zhst/{包名} - {模块名}，然后在详情页描述对应需求。

### 2. 创建 git 分支

按照 git flow 规范从 [master](http://10.0.0.88/web-project/zhst-lambo) 上创建分支, 分支的命名规则参考：

1. feat/XXX: 需求新增
2. hotfix/XXX: bug 修复

### 3. 开始开发

进入项目文件夹，在 packages 下找到对应的 npm 包, 然后在 src 目录下按已有的格式进行开发，如果是功能变更就找到对应的页面进行修改

### 4. 提交代码，并提交 mr 到 develop 分支

完成开发后，给代码提交 commit，格式参考 ${行为}(${影响范围}): ${变更内容}， 例如：

> feat(package.json): 修改版本号
> fix(app.ts): 修改环境变量

对应的变更会在最终的 npm 包版本号体现：a.b.c - a 对应重构（一般用不上） - b 对应 feat（功能新增） - c 对应 hotfix（一般是 bug 修复）

push 完代码之后，在 gitlab 上提交一个 mr 到 develop 分支，指定给对应的人员审核（@江志雄），合并成功之后，将 [issue](http://10.0.0.88/web-project/zhst-lambo/boards) 对应的 Labels 状态改为 waittingPublish。

### 5. 发布成功

发布成功之后，会有两个行为：

1. 在钉钉群通知发布成功。
2. 生成线上预览[说明文档](http://10.0.0.204:30080)

一旦触发了钉钉通知，则需要去到 [issue](http://10.0.0.88/web-project/zhst-lambo/boards) 板块将对应的需求 **close** 掉。

这就是 npm 包整个开发链路。

## 目录结构

<Tree>
  <ul>
    <li>
      docs
      <small>全局文档</small>
      <ul>
        <li>
          index.md
          <small>这是首页文档</small>
        </li>
      </ul>
    </li>
    <li>
      packages
      <small>组件包目录</small>
      <ul>
        <li>
          biz
          <small>业务组件</small>
        </li>
        <li>
          func
          <small>函数库</small>
        </li>
        <li>
          hooks
          <small>hooks</small>
        </li>
        <li>
          constants
          <small>静态枚举值定义</small>
        </li>
        <li>
          meta
          <small>元组件</small>
        </li>
        <li>
          request
          <small>请求库</small>
        </li>
        <li>
          types
          <small>类型定义库</small>
        </li>
        <li>
          material
          <small>物料库</small>
        </li>
        <li>
          cli
          <small>脚手架</small>
        </li>
      </ul>
    </li>
    <li>
      src
      <small>这是 src 文件夹</small>
      <ul>
        <li>
          index.md
          <small>这是 index.md</small>
        </li>
      </ul>
    </li>
    <li>
      .dumirc.ts
      <small>文档配置</small>
    </li>
    <li>
      package.json
      <small>这是 package.json</small>
    </li>
  </ul>
</Tree>

## 本文档食用说明

目前在进行中的项目为：@zhst/bizs、@zhst/hooks、@zhst/meta、@zhst/func..

bizs: 基于@zhst/hooks、@zhst/meta、@zhst/func 开发，基本贴近于业务。<Badge>doing</Badge>

meta：基于 antd 开发，作为公司的定制化原子组件。<Badge>doing</Badge>

hooks：基于 ahooks、@zhst/func 定制化二次开发。<Badge>doing</Badge>

func：基于 lodash-es 定制化二次开发 (由于 utils 包名被使用了)<Badge>doing</Badge>

## 后续构思

想做一个，基于智慧视通开发场景和业务场景的前端技术流程化方案，希望它能渗透到整个研发的所有流程中。

比如：代码规范、git 提交规范、物料库、基于 electron 的前端工具客户端（可集成物料库、图片上传小工具）、api 自动生成...

:::info{title=@zhst/lint}
lint 工具库，包含：eslint-config、eslint-plugin、commit-lint
:::

:::info{title=@zhst/metarial}
物料库，可以直接通过 clone npm 仓库的形式生成模板页面，页面没有任何依赖，一个页面就是一个项目。
:::

:::info{title=@zhst/app}
基于 electron 的前端客户端工具，初期功能构思方案有：文件上传、git 仓库管理、物料库可视化页面一键生成
:::

:::info{title=@zhst/autoapi}
接口一键生成工具
:::

:::info{title=@types/zhst}
类型定义库
:::

:::info{title=@zhst/constants}
静态变量枚举库
:::

:::info{title=@zhst/cli}
基于物料库的脚手架，可以直接通过可视化界面搭建项目，偏向于 lowcode+ 思维
:::