feat(document): add app-preview & resouce-management doc

betterdancing · betterdancing · commit cab32a4b28bb · 2025-10-28T18:14:44.000-07:00
diff --git a/docs/advanced-features/model-driven.md b/docs/advanced-features/model-driven.md
@@ -0,0 +1,44 @@
+# 资源管理
+
+> 资源管理插件可以管理该应用下的静态资源，包括各种图片图标等，可以新增分类，可以新增资源URL链接，可以上传资源，以及对资源的增删操作及分类的增删改操作
+
+
+### 新增分类
+
+![新增分类](./imgs/addResourcesGroup.png)
+
+分类即对资源类型进行分组管理，如基础图标库，XXX模块资源库，只需点击新增分类图标，然后填入名称、描述，点击保存即可完成新增操作
+
+### 新增资源
+
+![新增资源](./imgs/addResources.png)
+点击分类打开分类管理面板，在该面板点击添加资源按钮，在弹窗里可以选择通过URL添加和上传，通过URL添加必须输入资源名称和资源URL，资源名称和URL唯一，已添加的资源列表可以随时点击行进行操作调整，添加足够的资源并确定无误后，点击确定批量添加资源
+
+### 删除、复制资源
+
+在资源右上角的more-icon处hover会弹出复制和删除的操作，复制会复制该资源的URL，删除则需要二次确认方可删除
+
+![删除或复制资源](./imgs/resourcedelOrCopy.png)
+
+### 批量操作资源
+
+点击批量操作，会在该按钮左侧弹出可以进行的批量操作，目前只有批量删除功能，资源列表中的内容变为可勾选，勾选需要操作的资源后，点击删除即可完成批量删除（需要二次确认）
+
+![批量操作资源](./imgs/batchResourceAction.png)
+
+### 编辑资源分类
+
+在资源分类列表上hover会出现齿轮的图标，点击即可编辑分类信息，编辑完成后点击保存即可完成修改
+
+![编辑资源分类](./imgs/resourcegroupUpdate.png)
+
+#### 使用资源
+
+我们在图片的物料中内置了选择资源的组件 SourceSelectConfigurator，只要配置了这个Configurator的组件都可以进行资源选择并绑定
+
+![使用资源](./imgs/resourceBind.gif)
+
+#### 其他组件使用资源
+
+如果需要在其他组件或自定义组件中使用资源，只需要配置bundle.json中相关的属性即可
+![其他组件使用资源](./imgs/modifyBundleForResourceBind.png)
diff --git a/docs/basic-features/page-app-and-block-preview.md b/docs/basic-features/page-app-and-block-preview.md
@@ -6,7 +6,7 @@
 
 ### 页面/区块预览入口
 
-![Alt text](./imgs/preview-btn.png)
+![Alt text](./imgs/preview-popover-page.png)
 
 ### 示例
 
@@ -18,8 +18,27 @@
 
 ![Alt text](./imgs/preview.png)
 
+
 页面/区块预览界面除了帮助我们直观的看到整体页面结构以及进行交互动作外，还可以提供其他功能验证
 - 切换设备宽度
 - 国际化语言
 - state状态响应式
-- 表单验证提交
+- 表单验证提交
+
+### 应用预览入口
+
+![Alt text](./imgs/preview-popover-app.png)
+
+### 示例
+
+画布上的页面结构
+
+![Alt text](./imgs/preview-app-pre.png)
+
+预览页的页面效果
+
+![Alt text](./imgs/preview-app.png)
+
+应用预览界面除了具备 页面/区块预览界面 的交互和验证功能外，还提供了
+- 手动路由切换
+- 路由功能验证
diff --git a/docs/basic-features/resources-management.md b/docs/basic-features/resources-management.md
@@ -0,0 +1,44 @@
+# 资源管理
+
+> 资源管理插件可以管理该应用下的静态资源，包括各种图片图标等，可以新增分类，可以新增资源URL链接，可以上传资源，以及对资源的增删操作及分类的增删改操作
+
+
+### 新增分类
+
+![新增分类](./imgs/addResourcesGroup.png)
+
+分类即对资源类型进行分组管理，如基础图标库，XXX模块资源库，只需点击新增分类图标，然后填入名称、描述，点击保存即可完成新增操作
+
+### 新增资源
+
+![新增资源](./imgs/addResources.png)
+点击分类打开分类管理面板，在该面板点击添加资源按钮，在弹窗里可以选择通过URL添加和上传，通过URL添加必须输入资源名称和资源URL，资源名称和URL唯一，已添加的资源列表可以随时点击行进行操作调整，添加足够的资源并确定无误后，点击确定批量添加资源
+
+### 删除、复制资源
+
+在资源右上角的more-icon处hover会弹出复制和删除的操作，复制会复制该资源的URL，删除则需要二次确认方可删除
+
+![删除或复制资源](./imgs/resourcedelOrCopy.png)
+
+### 批量操作资源
+
+点击批量操作，会在该按钮左侧弹出可以进行的批量操作，目前只有批量删除功能，资源列表中的内容变为可勾选，勾选需要操作的资源后，点击删除即可完成批量删除（需要二次确认）
+
+![批量操作资源](./imgs/batchResourceAction.png)
+
+### 编辑资源分类
+
+在资源分类列表上hover会出现齿轮的图标，点击即可编辑分类信息，编辑完成后点击保存即可完成修改
+
+![编辑资源分类](./imgs/resourcegroupUpdate.png)
+
+#### 使用资源
+
+我们在图片的物料中内置了选择资源的组件 SourceSelectConfigurator，只要配置了这个Configurator的组件都可以进行资源选择并绑定
+
+![使用资源](./imgs/resourceBind.gif)
+
+#### 其他组件使用资源
+
+如果需要在其他组件或自定义组件中使用资源，只需要配置bundle.json中相关的属性即可
+![其他组件使用资源](./imgs/modifyBundleForResourceBind.png)
diff --git a/docs/catalog.json b/docs/catalog.json
@@ -26,7 +26,14 @@
             { "title": "行内样式绑定状态变量", "name": "inline-style-variable-binding.md" },
             { "title": "查看大纲树", "name": "outline-tree.md" },
             { "title": "国际化", "name": "internationalization.md" },
-            { "title": "页面和区块预览", "name": "page-and-block-preview.md" }
+            {
+              "title": "资源管理",
+              "name": "resources-management.md"
+            },
+            {
+              "title": "页面、应用和区块预览",
+              "name": "page-app-and-block-preview.md"
+            }
           ]
         },
         {
@@ -36,6 +43,10 @@
             { "title": "区块管理", "name": "block-management.md" },
             { "title": "使用JS面板和事件绑定", "name": "js-panel-and-event-binding.md" },
             { "title": "使用工具类方法 utils", "name": "using-utils-methods.md" },
+            {
+              "title": "模型驱动",
+              "name": "model-driven.md"
+            },
             { "title": "高级面板设置", "name": "advanced-panel-settings.md" },
             { "title": "如何使用插槽", "name": "how-to-use-slots.md" },
             { "title": "循环渲染", "name": "loop-rendering.md" },
@@ -95,7 +106,10 @@
           "title": "解决方案",
           "name": "solutions",
           "articles": [
-            {"title": "前端及Java服务端docker部署", "name": "front-backend-docker-deployment.md"},
+            {
+              "title": "前端及Java服务端docker部署",
+              "name": "front-backend-docker-deployment.md"
+            },
             { "title": "Java服务端部署", "name": "server-deployment-solution-java.md" },
             { "title": "Node.js服务端部署", "name": "server-deployment-solution.md" },
             { "title": "区块发布方案(Node.js服务端)", "name": "block-release-solution.md" },
