@cmstops/pro-compo 3.9.2 → 3.10.5-nanning.2

package/README.md

@@ -1,107 +1,134 @@
-# Arco 物料项目
+# 智媒管家业务组件库
 
-[物料平台文档中心](https://arco.design/docs/material/guide)
+> 快速上手：[传送门](/docs/get-start.md)
 
-## 快速开始
+## 模块介绍
 
-**在 `npm run dev` 前，请运行 `npm run add:component -- ComponentName` 创建第一个组件，否则 dev 将会因缺少 Story 入口而报错。**
+业务组件库基于 Vue3 + Storybook 搭建，结合 ArcoDesgin，包含智媒管家平台核心业务相关组件
 
-```
-# 添加组件
-npm run add:component -- YourComponentName
+## 版本规范
 
-# 开发
-npm run dev
+关于版本，这里需要提一下
 
-# 构建
-npm run build
+按理论来讲业务组件的版本和产品的版本不应该有强关联（即产品的版本是 3.0，业务组件可以是 1.0）
+但是因为产品的买家（即甲方爸爸）使用的产品可能是 3.1、3.2、3.3...，并且会有强定制的情况
 
-# 发布前预览
-npm run prepublishOnly && arco preview
+所以这里我们需要有一个约定，以便研发人员更好的溯源 & 协作 & 维护～
 
-# 发布至物料平台（需先发布 NPM 包）
-arco sync
-```
+当前约定如下：
+
+| 分支类型     | 分支名称                     | 描述                             | 使用位置      | 版本号规则                   |
+| ------------ | ---------------------------- | -------------------------------- | ------------- | ---------------------------- |
+| **主分支**   | 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            |
+
+> 所谓 "可以上线"，有两种情况：
+>
+> 1. 是指当前产品发布计划中是否有该功能，如果有，则可以合并至 main，否则不可以
+> 2. 该功能是所有版本通用的功能，无论产品版本是多少，都可以合并至 main
+
+### 版本发布示例
 
+假设当前产品版本是 3.2.0
+此时：
 
-## 提供 Demo
+- 主分支 main 版本号为 3.2.0-rc.0
+- 版本分支 release/v3.2.0 版本号为 3.2.0-stable.0
+- 开发分支 develop 版本号为 3.2.0-alpha.0
 
-Demo 目录位于 `src/demo`。你可以在此目录中加入多个 Demo，它们将被展示在物料平台的预览页。在 `src/demo/index.js` 中，通过 JSDoc 的语法提供物料及各个 Demo 的相关信息。
+#### 示例 1：当前版本 bug 修复 A 功能和 B 功能
 
-```javascript
-// src/demo/index.js
+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** 交付线上
 
-/**
- * @file
- * @title 组件名
- * @memberOf 组件类型，例如：数据输入
- * @description 描述你的组件。
- */
+> 注意：第二步第三步可以分开 publish，也可以都合并到 develop 之后再 publish，因为两个 bug 不一定是同一个人修复，所以会有个先后顺序
+> 但是尽量 rc 和 stable 尽量统一发布，减少版本号的迭代，方便维护和问题追溯
 
-/**
- * @title 基本用法
- * @description 描述你的例子
- */
-import Basic from './basic.vue';
+功能分支走向图：
 
-export const BasicDemo = () => Basic;
+```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]
 ```
 
-## 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,
-},
+#### 示例 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]
 ```
 
-### 扩展 TEMPLATE.md
+> 注意：如果是低版本的问题，尽可能的在出问题的版本处理，然后逐层向上合并（如果新版本已经修复并且代码改动较多，有冲突时，解决冲突并保留新版本原逻辑即可）
+> **如果按照社区常见的版本迭代规则，bug 的解决应该是在最新版本，旧版本的代码是不会改动的。**  
+> **但是实际我们自己的业务场景必须低版本也要能解决，为了尽量不去重复写代码，只能去手动的维护一下该操作。**
 
-`TEMPLATE.md` 是用于自动文档生成的模板，你可以修改此文件添加更多组件的使用帮助信息，但请不要删除其原有的内容，否则可能导致内容替换失败。
+#### 示例 3：新版本 release/v3.3.0 功能 D 开发
 
-```markdown
-// TEMPLATE.md
----
-file: index
----
+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
 
-# TooltipButton
+功能分支走向图：
 
-## 属性/Props
+```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 开发
 
-### OtherProps
+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
 
-在这里你可以书写更多组件帮助文档。
+> 业务组件库这个项目和其他模块的不同之处在于，如果这里说是新功能
+> 一般是指又抽离出了一个产品的核心业务，而这个核心业务与产品的 **版本** 关联性不强，所有版本均可使用的这种功能
 
-## Demos
+功能分支走向图：
 
-%%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]
 ```
 
-## 测试
+#### 示例 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,11 +4529,13 @@
 }
 .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;
 }
@@ -4543,6 +4545,10 @@
   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;
@@ -4554,7 +4560,7 @@
 .resource-list .list-item-grid {
   display: grid;
   grid-gap: 20px;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 }
 .resource-list .list-content {
   margin-top: 30px;
@@ -4597,7 +4603,8 @@
 }
 .resource-list .list-filter-wrapper .list-filter-tags {
   display: flex;
-  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10px;
   margin-top: 10px;
 }
 .resource-list .list-filter-wrapper .list-filter-tags .list-filter-tag {
@@ -4618,16 +4625,41 @@
   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;
@@ -4641,6 +4673,10 @@
   height: 16px;
   background-color: #4886ff;
 }
+.resource-select-wrap {
+  width: 100%;
+  height: 100%;
+}
 .resource-select-modal-body {
   height: 80vh;
   padding: 0;
@@ -4669,6 +4705,11 @@
 .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;
@@ -4701,6 +4742,33 @@
   border: none;
   outline: none;
 }
+.iframe-container-pc {
+  position: relative;
+  height: 95vh;
+  overflow: hidden;
+  aspect-ratio: 1920 / 1080;
+}
+.iframe-container-pc img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.iframe-container-pc .iframe-content-pc {
+  position: absolute;
+  top: 70px;
+  left: 56px;
+  width: calc(100% - 106px);
+  height: calc(100% - 140px);
+  overflow: hidden;
+  background-color: white;
+  border-radius: 15px;
+}
+.iframe-container-pc iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+}
 .doc-preview-container {
   position: fixed;
   top: 0;
@@ -4818,6 +4886,27 @@
   font-size: 20px;
   cursor: pointer;
 }
+.v-bottom {
+  position: absolute;
+  bottom: 24px;
+  left: 100%;
+  z-index: 999;
+  width: 100%;
+  color: #fff;
+  font-size: 12px;
+  transform: translateX(-60%);
+}
+.v-bottom span {
+  width: 120px;
+  height: 42px;
+  margin-right: 16px;
+  padding: 10px 16px;
+  font-size: 12px;
+  background: rgba(216, 216, 216, 0.05);
+  background-color: #00000068;
+  border-radius: 6px;
+  opacity: 1;
+}
 .doc-diff-panel-wrap {
   box-sizing: border-box;
   width: 100% !important;
@@ -4925,6 +5014,10 @@
 .doc-history-drawer .arco-drawer-footer {
   text-align: left;
 }
+.doc-history-modal-wrap {
+  height: 70vh;
+  padding: 0;
+}
 .video-thumb {
   display: flex;
   flex-direction: column;