@cmstops/pro-compo 3.9.1-rc.6 → 3.9.1-stable.0

package/README.md

@@ -1,134 +1,107 @@
-# 智媒管家业务组件库
+# Arco 物料项目
 
-> 快速上手：[传送门](/docs/get-start.md)
+[物料平台文档中心](https://arco.design/docs/material/guide)
 
-## 模块介绍
+## 快速开始
 
-业务组件库基于 Vue3 + Storybook 搭建，结合 ArcoDesgin，包含智媒管家平台核心业务相关组件
+**在 `npm run dev` 前，请运行 `npm run add:component -- ComponentName` 创建第一个组件，否则 dev 将会因缺少 Story 入口而报错。**
 
-## 版本规范
-
-关于版本，这里需要提一下
-
-按理论来讲业务组件的版本和产品的版本不应该有强关联（即产品的版本是 3.0，业务组件可以是 1.0）
-但是因为产品的买家（即甲方爸爸）使用的产品可能是 3.1、3.2、3.3...，并且会有强定制的情况
-
-所以这里我们需要有一个约定，以便研发人员更好的溯源 & 协作 & 维护～
+```
+# 添加组件
+npm run add:component -- YourComponentName
 
-当前约定如下：
+# 开发
+npm run dev
 
-| 分支类型     | 分支名称                     | 描述                             | 使用位置      | 版本号规则                   |
-| ------------ | ---------------------------- | -------------------------------- | ------------- | ---------------------------- |
-| **主分支**   | main                         | 研发自测完毕并 _可以上线_ 的需求 | 预发布环境    | x.x.x-**rc**.y               |
-| **版本分支** | release/xxx                  | 经过完整测试的需求               | 线上/项目环境 | x.x.x-**stable**.y           |
-| **定制分支** | release/xxx-{{project.name}} | 经过测试的 _定制_ 需求           | 项目环境      | x.x.x-**{{project.name}}**.y |
-| **开发分支** | develop                      | 研发自测完毕的需求               | 测试环境      | x.x.x-**alpha**.y            |
+# 构建
+npm run build
 
-> 所谓 "可以上线"，有两种情况：
->
-> 1. 是指当前产品发布计划中是否有该功能，如果有，则可以合并至 main，否则不可以
-> 2. 该功能是所有版本通用的功能，无论产品版本是多少，都可以合并至 main
+# 发布前预览
+npm run prepublishOnly && arco preview
 
-### 版本发布示例
+# 发布至物料平台（需先发布 NPM 包）
+arco sync
+```
 
-假设当前产品版本是 3.2.0
-此时：
 
-- 主分支 main 版本号为 3.2.0-rc.0
-- 版本分支 release/v3.2.0 版本号为 3.2.0-stable.0
-- 开发分支 develop 版本号为 3.2.0-alpha.0
+## 提供 Demo
 
-#### 示例 1：当前版本 bug 修复 A 功能和 B 功能
+Demo 目录位于 `src/demo`。你可以在此目录中加入多个 Demo，它们将被展示在物料平台的预览页。在 `src/demo/index.js` 中，通过 JSDoc 的语法提供物料及各个 Demo 的相关信息。
 
-1. 第一步：基于 release/v3.2.0 版本切出：hotfix/v3.2.0-A，hotfix/v3.2.0-B
-2. 第二步：bug-A 修复后，将 hotfix/v3.2.0-A 合并至 develop 自测并发布 3.2.0-alpha.**1**
-3. 第三步：bug-B 修复后，将 hotfix/v3.2.0-B 合并至 develop 自测并发布 3.2.0-alpha.**2**
-4. 第四步：自测完毕后，将 hotfix/v3.2.0-A & hotfix/v3.2.0-B 合并至 main 并发布 3.2.0-rc.**1** 交付测试
-5. 第五步：测试完毕后，将 hotfix/v3.2.0-A & hotfix/v3.2.0-B 合并至 release/v3.2.0 并发布 3.2.0-stable.**1** 交付线上
+```javascript
+// src/demo/index.js
 
-> 注意：第二步第三步可以分开 publish，也可以都合并到 develop 之后再 publish，因为两个 bug 不一定是同一个人修复，所以会有个先后顺序
-> 但是尽量 rc 和 stable 尽量统一发布，减少版本号的迭代，方便维护和问题追溯
+/**
+ * @file
+ * @title 组件名
+ * @memberOf 组件类型，例如：数据输入
+ * @description 描述你的组件。
+ */
 
-功能分支走向图：
+/**
+ * @title 基本用法
+ * @description 描述你的例子
+ */
+import Basic from './basic.vue';
 
-```mermaid
-graph TD
-    A[release/v3.2.0] --> B[hotfix/v3.2.0-A]
-    A --> C[hotfix/v3.2.0-B]
-    B --> D[develop 3.2.0-alpha.1]
-    C --> E[develop 3.2.0-alpha.2]
-    D --> F[main 3.2.0-rc.1]
-    E --> F
-    F --> G[release/v3.2.0 3.2.0-stable.1]
+export const BasicDemo = () => Basic;
 ```
 
-#### 示例 2：历史版本 release/v3.0.0 bug 修复 C 功能
-
-1. 第一步：基于 release/v3.0.0 版本分支切出：hotfix/v3.0.0-C
-2. 第二步：bug-C 修复后，将 hotfix/v3.0.0-C 合并至 develop 自测，并发布 3.2.0-alpha.**3**
-3. 第三步：自测完毕后，将 hotfix/v3.0.0-C 合并至 main 并发布 3.2.0-rc.**2** 交付测试
-4. 第四步：测试完毕后，将 hotfix/v3.0.0-C 合并至 release/v3.0.0、release/v3.0.0、release/v3.1.0、release/v3.2.0；并发布：3.0.0-stable.x、3.1.0-stable.y、3.2.0-stable.**2**
-
-功能分支走向图：
-
-```mermaid
-graph TD
-    A[release/v3.0.0] --> B[hotfix/v3.0.0-C]
-    B --> C[develop 3.2.0-alpha.3]
-    C --> D[main 3.2.0-rc.2]
-    D --> E[release/v3.0.0 3.0.0-stable.x]
-    D --> F[release/v3.1.0 3.1.0-stable.y]
-    D --> G[release/v3.2.0 3.2.0-stable.2]
+## API 文档
+
+**为了帮助他人更好地使用你的组件，请提供详细的 API 文档。**
+
+### 书写注释
+
+我们使用了 [Vue Styleguidist](https://vue-styleguidist.github.io/) 来提取组件 Props 的注释，然后自动生成组件的 API 文档。为此，如果你想对外暴露一个 Property，请参照Vue Styleguidist 的规则书写注释：
+
+```vue
+// ✅ 可以被正确提取的注释
+props: {
+  /**
+   * 提示文字
+   */
+  tip: String,
+  /**
+   * 按钮组件Props
+   */
+  buttonProps: {
+    // 如果使用PropType，请使用对象的形式定义
+    type: Object as PropType<Record<string, any>>,
+  },
+},
+
+// ❌ 没有书写注释的属性会被忽略
+props: {
+  disabled: Boolean,
+},
 ```
 
-> 注意：如果是低版本的问题，尽可能的在出问题的版本处理，然后逐层向上合并（如果新版本已经修复并且代码改动较多，有冲突时，解决冲突并保留新版本原逻辑即可）
-> **如果按照社区常见的版本迭代规则，bug 的解决应该是在最新版本，旧版本的代码是不会改动的。**  
-> **但是实际我们自己的业务场景必须低版本也要能解决，为了尽量不去重复写代码，只能去手动的维护一下该操作。**
+### 扩展 TEMPLATE.md
 
-#### 示例 3：新版本 release/v3.3.0 功能 D 开发
+`TEMPLATE.md` 是用于自动文档生成的模板，你可以修改此文件添加更多组件的使用帮助信息，但请不要删除其原有的内容，否则可能导致内容替换失败。
 
-1. 第一步：基于 release/v3.2.0 版本切出：feature/v3.3.0-D
-2. 第二步：Feat-D 开发完毕后，将 feature/v3.3.0-D 合并至 develop 自测，并发布 3.3.0-alpha.**0**
-3. 第三步：自测完毕后，将 feature/v3.3.0-D 合并至 main，并发布 3.3.0-rc.**0**
-4. 第四步：测试完毕后，基于 release/v3.2.0 切出 release/v3.3.0，将 feature/v3.3.0-D 合并至 release/v3.3.0
+```markdown
+// TEMPLATE.md
+---
+file: index
+---
 
-功能分支走向图：
+# TooltipButton
 
-```mermaid
-graph TD
-    A[release/v3.2.0] --> B[feature/v3.3.0-D]
-    B --> C[develop 3.3.0-alpha.0]
-    C --> D[main 3.3.0-rc.0]
-    A --> E[release/v3.3.0]
-    D --> E
-```
+## 属性/Props
 
-#### 示例 4：通用功能 E 开发
+%%Props%%
 
-1. 第一步：基于最早版本 release/v3.0.0 切出：feature/v3.0.0-E
-2. 第二步：Feat-E 开发完毕后，将 feature/v3.0.0-E 合并至 develop 自测，并发布 3.3.0-alpha.**1**
-3. 第三步：自测完毕后，将 feature/v3.0.0-E 合并至 main，并发布 3.3.0-rc.**1**
-4. 第四步：测试完毕后，将 feature/v3.0.0-E 合并至 release/v3.0.0、releaes/v3.1.0、release/v3.2.0、release/v3.3.0
+### OtherProps
 
-> 业务组件库这个项目和其他模块的不同之处在于，如果这里说是新功能
-> 一般是指又抽离出了一个产品的核心业务，而这个核心业务与产品的 **版本** 关联性不强，所有版本均可使用的这种功能
+在这里你可以书写更多组件帮助文档。
 
-功能分支走向图：
+## Demos
 
-```mermaid
-graph TD
-    A[release/v3.0.0] --> B[feature/v3.0.0-E]
-    B --> C[develop 3.3.0-alpha.1]
-    C --> D[main 3.3.0-rc.1]
-    D --> E[release/v3.0.0]
-    D --> F[release/v3.1.0]
-    D --> G[release/v3.2.0]
-    D --> H[release/v3.3.0]
+%%Demos%%
 ```
 
-#### 示例 5：3.1.0 版本 _G_ 项目定制 功能 F 开发
-
-1. 第一步：基于 release/v3.1.0 切出：feature/v3.1.0-G-F
-2. 第二步：Feat-F 开发完毕后，基于 release/v3.1.0 切出 release/v3.1.0-G，将 feature/v3.1.0-G-F 合并至 release/v3.1.0-G，并发布 3.1.0-G.**0**
+## 测试
 
-> 注意：如果有项目有定制，后续的任何通用更新不会覆盖该版本，所以在定制之前需和产品 **再三确认**
+测试目录位于 `src/__test__`。你可以在 `index.test.tsx` 中编写你的测试用例，在 `demo.test.tsx` 中可以进行基于 Demo 的快照测试。

package/dist/index.css

@@ -4529,13 +4529,11 @@
 }
 .resource-list-footer,
 .resource-list-header,
-.resource-list-content .resource-list-content-empty,
 .resource-list-content .arco-scrollbar-container {
   padding: 0 40px;
 }
 .resource-list-footer {
   display: flex;
-  flex-wrap: wrap;
   justify-content: space-between;
   padding-bottom: 20px;
 }
@@ -4545,10 +4543,6 @@
   gap: 10px;
   align-items: center;
   justify-content: flex-end;
-  margin-top: 10px;
-}
-.resource-list-footer .footer-right .list-selected-wrapper {
-  font-size: 12px;
 }
 .resource-list-content-loading {
   display: flex;
@@ -4560,7 +4554,7 @@
 .resource-list .list-item-grid {
   display: grid;
   grid-gap: 20px;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  grid-template-columns: repeat(5, 1fr);
 }
 .resource-list .list-content {
   margin-top: 30px;
@@ -4603,8 +4597,7 @@
 }
 .resource-list .list-filter-wrapper .list-filter-tags {
   display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
+  justify-content: space-between;
   margin-top: 10px;
 }
 .resource-list .list-filter-wrapper .list-filter-tags .list-filter-tag {
@@ -4625,41 +4618,16 @@
   justify-content: space-between;
 }
 .resource-list .list-filter-wrapper .list-filter .filter-list {
-  position: relative;
-  /** 给 popup 一个参考 */
   display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
 }
 .resource-list .list-filter-wrapper .list-filter .filter-list .filter-item {
   width: 100px;
-  margin-right: 10px;
-}
-.resource-list .list-filter-wrapper .list-filter .filter-list .arco-trigger-popup {
-  z-index: 100000 !important;
 }
 .resource-list .list-filter-wrapper .list-filter .arco-input-prepend {
   padding: 0;
 }
-.resource-list .list-filter-wrapper .list-filter .more-btn {
-  position: relative;
-  /** 给 poperjs 一个参考 */
-}
-.resource-list .list-filter-wrapper .list-filter .more-btn .filter-pannel {
-  inset: 40px auto auto auto !important;
-}
-.resource-list .list-filter-wrapper .filter-extra {
-  display: flex;
-  gap: 10px;
-}
-.resource-list .list-filter-wrapper .filter-pannel {
-  z-index: 100000;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 10px;
-  background-color: #fff;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
 .resource-list .title {
   display: flex;
   gap: 8px;
@@ -4673,10 +4641,6 @@
   height: 16px;
   background-color: #4886ff;
 }
-.resource-select-wrap {
-  width: 100%;
-  height: 100%;
-}
 .resource-select-modal-body {
   height: 80vh;
   padding: 0;
@@ -4705,11 +4669,6 @@
 .resource-select-container .resource-select-header .arco-tabs-content {
   display: none !important;
 }
-.resource-select-container .resource-list-content .resource-list-content-empty {
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-}
 .iframe-container {
   position: relative;
   height: 95vh;