Merge pull request #17 from tezignlab/main

change authorize doc
tezignlab · Dec 1, 2023 · e8341df · e8341df
2 parents 870c58d + f99b964
commit e8341df
Show file tree

Hide file tree

Showing 25 changed files with 264 additions and 160 deletions.
diff --git a/changelog/2022-05-25-asset-selector-v1.2.0/index.md b/changelog/2022-05-25-asset-selector-v1.2.0/index.md
@@ -205,7 +205,7 @@ iframe.contentWindow.postMessage(
         { id: 'image', limit: 5 },
         { id: 'audio', limit: 9, sizeLimit: 10 * Math.pow(1024, 2) },
       ],
-      filterCode: 'open-component-search-001',
+      filterCode: 'open-component-search-003',
       formatLimit: 5,
       sizeLimit: 10 * Math.pow(1024, 2), // 只能选择<=10MB素材
     },

diff --git a/docs/frontend/asset-selector/config.md b/docs/frontend/asset-selector/config.md
@@ -61,7 +61,7 @@ iframe.contentWindow.postMessage(
           sizeLimit: 10 * 1024 ** 2, //只能选择<=10MB的音频
         },
       ],
-      filterCode: 'open-component-search-001',
+      filterCode: 'open-component-search-003',
       formatLimit: 5,
       sizeLimit: 10 * Math.pow(1024, 2), // 只能选择<=10MB素材
       groupId: 123456,
@@ -76,5 +76,5 @@ iframe.contentWindow.postMessage(
 - 支持将素材组内的素材全部添加到列表中。查询组内数量上限为 1000
 - 关于选组添加的校验限制说明：
 
-* 如果限制总数量或大小，未满足的情况下，整组素材将不被选择
-* 如果限制了具体格式数量或大小，只要存在未满足的情况下，整组素材将不被选择
+  - 如果限制总数量或大小，未满足的情况下，整组素材将不被选择
+  - 如果限制了具体格式数量或大小，只要存在未满足的情况下，整组素材将不被选择
diff --git a/docs/frontend/asset-selector/events/component.md b/docs/frontend/asset-selector/events/component.md
@@ -4,7 +4,51 @@ sidebar_position: 5
 
 # 组件事件
 
-## 数据结构
+选择器还支持其他相关的事件，来辅助接入方更好的控制选择器的行为。
+
+## 选择更新
+
+触发时机是用户选择素材更新的时候。
+
+### 数据结构
+
+```typescript
+interface SelectionChangeEvent {
+  // 事件标识
+  type: 'tezign-selector-selection-change';
+  data: ConfirmData; // 同tezgin-selector-confirm-btn的数据结构（查看权限）
+}
+```
+
+## 清空素材
+
+清空用户所选素材
+
+### 数据结构
+
+```typescript
+interface ClearEvent {
+  // 事件标识
+  type: 'tezign-selector-clear';
+}
+```
+
+## 重置数据
+
+重置整个 iframe 数据。重置内部包括用户所选素材、搜索关键字、筛选项等。
+
+### 数据结构
+
+```typescript
+interface ResetEvent {
+  // 事件标识
+  type: 'tezign-selector-reset';
+}
+```
+
+## 支持额外扩展底部操作组件栏
+
+### 数据结构
 
 ```typescript
 interface EventComponent {
@@ -22,7 +66,7 @@ enum ECompType {
 }
 ```
 
-## 例子
+### 例子
 
 ```javascript
 // 配置checkbox到底部操作栏

diff --git a/docs/frontend/asset-selector/events/confirm.md b/docs/frontend/asset-selector/events/confirm.md
@@ -4,7 +4,7 @@ sidebar_position: 4
 
 # 确认按钮点击
 
-选择素材后，点击页面「确认」按钮，素材选择器会使用 postMessage 把所有选择的素材的对象数组在您的页面中返回，该响应数组包含 DAM 的所有资产信息。
+选择素材后，点击页面「确认」按钮，素材选择器会使用 `postMessage` 把所有选择的素材以对象数组在您的页面中返回，该响应数组包含 DAM 的相关资产信息。
 
 ## 数据结构
 

diff --git a/docs/frontend/asset-selector/events/index.md b/docs/frontend/asset-selector/events/index.md
@@ -4,4 +4,4 @@ sidebar_position: 7
 
 # 事件
 
-事件会通过`postMessage`来发送，接入方监听 Window 对象的`message`事件，按需处理相应的事件。
+事件会通过 `postMessage` 来发送，接入方监听 Window 对象的 `message` 事件，按需处理相应的事件。
diff --git a/docs/frontend/asset-selector/events/selection-change.md b/docs/frontend/asset-selector/events/selection-change.md
diff --git a/docs/frontend/asset-selector/getting-started.mdx b/docs/frontend/asset-selector/getting-started.mdx
@@ -3,7 +3,13 @@ sidebar_position: 2
 title: 快速开始
 ---
 
-你需要将素材选择器的链接用 iframe 嵌入你的系统，你的代码和组件会基于[postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)来进行通信交互数据。
+import Link from '@docusaurus/Link';
+
+在开始接入前，你需要先完成 <Link to="/docs/frontend/common/authorize">授权</Link>。
+
+素材选择器的链接通过 iframe 嵌入你的系统，你的代码和组件会基于 [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) 来进行通信交互数据。
+
+素材选择器链接是： `{domain}/dam_enterprise/material_selector`。 其中 `domain` 为客户内容中台的域名。
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
@@ -16,14 +22,14 @@ import TabItem from '@theme/TabItem';
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
-    <title>素材选择器父页面</title>
+    <title>素材上传父页面</title>
   </head>
   <body>
     <script>
       const receiveMessage = (event) => {
         const iframe = document.getElementById('iframe');
         if (!iframe || event.source !== iframe.contentWindow) {
-          // 判断是否为当前iframe发出的消息
+          // 判断是否为当前 iframe 发出的消息
           return;
         }
 
@@ -41,7 +47,7 @@ import TabItem from '@theme/TabItem';
                   { id: 'image', limit: 5 },
                   { id: 'audio', limit: 9 },
                 ],
-                filterCode: 'open-component-search-001',
+                filterCode: 'open-component-search-003',
                 formatLimit: 5,
               },
             },
@@ -99,7 +105,7 @@ export default function App() {
               { id: 'image', limit: 5 },
               { id: 'audio', limit: 9 },
             ],
-            filterCode: 'open-component-search-001',
+            filterCode: 'open-component-search-003',
             formatLimit: 5,
           },
         },

diff --git a/docs/frontend/asset-selector/index.md b/docs/frontend/asset-selector/index.md
@@ -4,8 +4,10 @@ sidebar_position: 1
 
 # 简介
 
-素材选择器是将资产从 内容中台获取到 Web 应用程序的最简单的解决方案。
-它使用 iframe 的方式允许开发人员添加对从内容中台 选择和导入资产的支持，而无需担心与素材选择器相关的复杂性：UI 设计、身份验证、API 请求等。
+素材选择器是将资产从内容中台获取到 Web 应用程序的最简单的解决方案。
+
+它支持从内容中台选择资产，而无需担心与素材选择器相关的复杂性：UI 设计、身份验证、API 请求等。开发人员通过 iframe 的方式来与素材选择器进行交互。
+
 企业可根据不同业务场景通过自定义筛选项及筛选项默认值模板来高效便捷的查询、过滤（通过智能过滤器、元属性、标签、关键字和自定义过滤筛选项）、排序和选择 DAM 中数据资产，然后将它们导入另一个应用程序。
 
 ![preview](img/material-selector.png)
diff --git a/docs/frontend/asset-selector/ui.md b/docs/frontend/asset-selector/ui.md
@@ -6,7 +6,7 @@ sidebar_position: 6
 
 :::info
 
-请在响应`tezign-selector-page-ready`事件时候，在通过`tezign-material-selector`命令传入配置数据之前使用`tezign-selector-ui`命令，避免出现 UI 抖动问题。
+请在响应 `tezign-selector-page-ready` 事件时候，再通过 `tezign-material-selector` 命令传入配置数据之前使用 `tezign-selector-ui` 命令，避免出现 UI 抖动问题。
 
 :::
 

diff --git a/docs/frontend/asset-uploader/authorize.md b/docs/frontend/asset-uploader/authorize.md
diff --git a/docs/frontend/asset-uploader/events/cancel.md b/docs/frontend/asset-uploader/events/cancel.md
@@ -4,6 +4,8 @@ sidebar_position: 2
 
 # 取消上传
 
+上传取消的时候，触发的相对应事件。
+
 ## 数据结构
 
 ```typescript

diff --git a/docs/frontend/asset-uploader/events/confirm.md b/docs/frontend/asset-uploader/events/confirm.md
@@ -2,7 +2,7 @@
 sidebar_position: 3
 ---
 
-# 确定
+# 确定按钮点击
 
 iframe 页面确定按钮被点击，成功上传的文件数据会在该事件中被返回。
 

diff --git a/docs/frontend/asset-uploader/events/index.md b/docs/frontend/asset-uploader/events/index.md
@@ -4,4 +4,4 @@ sidebar_position: 5
 
 # 事件
 
-事件会通过`postMessage`来发送，接入方监听 Window 对象的`message`事件，按需处理相应的事件。
+事件会通过 `postMessage` 来发送，接入方监听 Window 对象的 `message` 事件，按需处理相应的事件。
diff --git a/docs/frontend/asset-uploader/events/transfer.md b/docs/frontend/asset-uploader/events/transfer.md
@@ -4,7 +4,7 @@ sidebar_position: 6
 
 # 上传 File 文件
 
-支持通过 postMessage 的方式来上传文件。
+支持通过 `postMessage` 的方式来上传文件。
 
 ## 数据结构
 

diff --git a/docs/frontend/asset-uploader/getting-started.mdx b/docs/frontend/asset-uploader/getting-started.mdx
@@ -4,7 +4,13 @@ sidebar_position: 2
 
 # 快速开始
 
-你需要将素材上传组件的链接用 iframe 嵌入你的系统，你的代码和素材上传组件会基于[postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)来进行通信交互数据。
+import Link from '@docusaurus/Link';
+
+在开始接入前，你需要先完成 <Link to="/docs/frontend/common/authorize">授权</Link>。
+
+素材上传组件的链接通过 iframe 嵌入你的系统，你的代码和组件会基于 [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) 来进行通信交互数据。
+
+素材上传组件链接是： `{domain}/dam_enterprise/asset-uploader`。 其中 `domain` 为客户内容中台的域名。
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
@@ -127,4 +133,4 @@ export default () => {
   </TabItem>
 </Tabs>
 
-上传完成后，点击页面弹窗「确认」按钮，上传 iframe 会使用 postMssage 把所有上传成功的文件数组在您的页面中返回（此数组对应示例中的 event.data.files），该响应数组包含 DAM 的所有资产信息。
+上传完成后，点击页面弹窗「确认」按钮，上传 iframe 会使用 `postMessage` 把所有上传成功的文件数组在您的页面中返回（此数组对应示例中的 `event.data.files`），该响应数组包含 DAM 的所有资产信息。
diff --git a/docs/frontend/asset-uploader/index.md b/docs/frontend/asset-uploader/index.md
@@ -4,7 +4,7 @@ sidebar_position: 1
 
 # 简介
 
-素材上传组件是将资产从本地上传到内容中台的最简单的解决方案。
+素材上传组件是将资产从外部上传到内容中台的最简单的 Web 解决方案。
 
 ![intro1](img/intro1.png)
 

diff --git a/docs/frontend/asset-uploader/ui.md b/docs/frontend/asset-uploader/ui.md
@@ -4,7 +4,7 @@ sidebar_position: 4
 
 # UI 配置
 
-我们可以向素材上传组件传递 UI 配置实现对 UI 进行调整。
+我们可以向素材上传组件传递 UI 配置实现对 UI 调整。
 
 ## 数据结构
 

diff --git a/docs/frontend/common/_category_.json b/docs/frontend/common/_category_.json
@@ -0,0 +1,9 @@
+{
+  "label": "通用流程",
+  "position": 1,
+  "link": {
+    "type": "generated-index",
+    "slug": "/category/common",
+    "description": "xx"
+  }
+}