codewave-openclaw-installer 1.0.0

package/skills/smart-customer-service/docs/codewave/20./345/272/224/347/224/250/345/274/200/345/217/221/10./351/241/265/351/235/242/350/256/276/350/256/241/10./351/241/265/351/235/242IDE/344/273/213/347/273/215.md

@@ -0,0 +1,320 @@
+# 页面IDE介绍
+
+## 1. 功能概述
+
+CodeWave智能开发平台支持可视化的页面设计，页面IDE是编辑页面视图的主要界面，开发者可将页面组件拖拽到画布，构建应用页面，以满足应用的交互需求。
+
+<img src="../assets/ymIDE_0522_1753_1.png" alt="0" style="" />
+
+## 2. 功能介绍
+
+### 2.1 功能入口
+
+在IDE界面，单击界面最左侧的“页面”按钮即可进入页面IDE。
+
+<img src="../assets/ymIDE_0522_1753_2.png" alt="0" style="" />
+
+### 2.2 页面
+
+页面目录包含所有PC端、H5端的页面及相关功能入口。
+
+<img src="../assets/ymIDE_0522_1753_3.png" alt="0" style="" />
+
+1. 可点击目录树右上方“搜索”按钮，通过输入页面名、逻辑名或变量名来快速定位到所需的页面。
+
+   <img src="../assets/ymIDE_0522_1753_4.png" alt="0" style="" />
+2. 可点击目录树右上方“加号”按钮，添加PC/H5端、页面、前端全局变量。
+
+   <img src="../assets/yemianIDEjieshao_202409111411_1.png" class="imgStyle" style="" />
+
+
+#### 应用端
+
+CodeWave智能开发平台支持通过可视化的方式搭建PC端、H5端的应用。在应用可视化开发界面，每个应用端可以独立添加页面、事件和前端全局变量，并且能够共享服务端逻辑和数据。关于应用端的详细介绍请参见[端介绍](../10.页面设计/13.端介绍.md)。
+
+![0](../assets/ymIDE_0522_1753_6.png)
+
+#### 页面
+
+页面是指应用中的用户界面，即用户与应用进行交互的区域。开发者可以通过可视化工具设置页面布局、设计组件样式、定义交互行为等操作。这些页面通常包括各种组件，如表单、按钮、文本、数据表格等，用于展示信息、接收用户输入或执行特定功能。关于页面的详细介绍请参见：[页面和子页面-页面](../10.页面设计/12.页面和子页面.md)。
+
+![0](../assets/ymIDE_0522_1753_7.png)
+
+#### 事件逻辑
+
+事件逻辑
+事件逻辑是组件、页面或应用端下的某个事件对应的逻辑，由组件、页面或应用的使用过程中某个可被用户感知的事件触发，如应用端事件：调用服务端逻辑后事件、页面切换前事件等。详情可参见：[事件逻辑](../15.逻辑功能实现/10.逻辑IDE/15.逻辑分类/40.事件逻辑.md)。
+
+<img src="../assets/ymIDE_0522_1753_21.png" alt="0" style="" />
+
+#### 前端全局变量
+
+前端全局变量指的是在前端（通常是指浏览器端）定义的变量，其作用域是整个应用。前端全局变量可以在应用中任何可以使用变量的地方被访问和修改。在应用开发中，前端全局变量可以用于存储需要在整个应用中共享的数据，例如用户信息、全局状态等。详情可参见：[前端全局变量](../../20.应用开发/10.页面设计/50.前端全局变量.md)
+
+<img src="../assets/ymIDE_0522_1753_22.png" alt="0" style="" />
+
+#### 业务组件
+
+业务组件是指在某业务领域下，带有该业务领域的属性或者数据的组件。开发者可以根据CodeWave智能开发平台提供的通用基础组件，通过可视化拖拽的方式自行构建具有业务特性或数据的业务组件，包括设置组件的样式、交互逻辑、数据源、以及可以暴露出的属性、事件、逻辑等。详情可参见：[什么是业务组件](../../20.应用开发/10.页面设计/34.业务组件/010.什么是业务组件.md)。
+
+<img src="../assets/ymIDE_0522_1753_23.png" alt="0" style="" />
+
+### 2.3 结构树
+
+用于展示单个页面下的组件树结构。
+
+<img src="../assets/IDE_202505281350_1.png" alt="0" class="imgStyle" style="width:300px" />
+
+1.  单击结构树目录即可选中对应组件。
+
+    <img src="../assets/IDE_202505281350_2.png" class="imgStyle" style="" />
+
+2.  结构树中的组件允许创建副本、剪切、复制、粘贴、删除等操作：
+
+    <img src="../assets/IDE_202505281350_3.png" class="imgStyle" style="" />
+
+    - 复制样式：复制组件的样式，允许粘贴到同类型组件，实现样式复用。
+    - 粘贴样式：在已复制同类型组件样式的前提下，为该组件复用复制的组件样式。
+    - 创建副本：创建副本是指在画布中对现有组件进行复制，以便在应用中重复使用或对其进行修改而不影响原始组件。
+    - 剪切：剪切是指将现有组件从一个位置移动到另一个位置，通常与粘贴操作配合使用。
+    - 复制：复制是指创建选定组件的副本，并可以将其放置在其他位置，通常与粘贴操作配合使用。
+    - 粘贴：粘贴是指将之前复制或剪切的组件粘贴到新的位置。
+    - 删除：删除是指将应用中的特定组件从页面中移除。
+    - 操作记录：用于[多人协作](../../30.应用生命周期管理/120.多人协作开发/10.多人协作概念介绍.md)时，查看该内容最近的一次操作分支推送记录，包含提交人、提交说明、提交时间等信息。
+
+3.  组件节点允许拖拽，用以改变组件所在的层级。拖拽过程中鼠标位置展示拖拽放置位置的操作提示，画布中同步选中放置位置：
+
+    <img src="../assets/IDE_202505281350_4.gif" class="imgStyle" style="" />
+
+### 2.4 画布
+
+“画布”是指用于布局和放置用户界面元素（如文本、图片、按钮等）的工作区域。这是开发者用来设计页面布局的主要区域，开发者可以在上面放置和排列不同的组件以构建应用界面。
+
+#### 基础操作
+
+画布内的组件允许进行细粒度的操作：创建副本、删除、复制、剪切、拖拽等。
+
+<img src="../assets/ymIDE_0522_1753_29.png" alt="0" style="" />
+
+* 创建副本：创建副本是指在画布中对现有组件进行复制，以便在应用程序中重复使用或对其进行修改而不影响原始组件。
+* 删除：删除是指将应用中的特定组件从页面中移除。
+* 复制：复制是指创建选定组件的副本，并可以将其放置在其他位置，通常与粘贴操作配合使用。
+* 剪切：剪切是指将现有组件从一个位置移动到另一个位置，通常与粘贴操作配合使用。
+* 粘贴：粘贴是指将之前复制或剪切的组件粘贴到新的位置。
+* 拖拽：拖拽是指通过鼠标将组件从组件面板或画布的一个位置拖曳到画布的另一个位置，以实现组件的布局或重新定位。拖拽过程中鼠标位置展示拖拽放置位置的操作提示，结构树中同步选中放置位置。
+
+#### 辅助功能
+
+<img src="../assets/ymIDE_0522_1753_30.png" alt="0" style="" />
+
+##### AI智能助手
+
+平台3.7及以上版本IDE支持使用自然语言生成UI。编辑页面时，通过与AI智能助手对话，使用自然语言描述页面需求，AI解读后生成页面元素，可进行组件的创建/修改/删除（包含组件属性、样式与逻辑实现等）。详情请参见：[自然语言生成UI](../../25.智能开发/010.自然语言生成UI.md)。
+
+##### 快捷预览
+
+平台支持快捷预览当前页面效果。
+
+<img src="../assets/ymIDE_0522_1753_31.png" alt="0" style="" />
+
+1. 预览页面所在的应用需发布过，才可进行页面预览。
+2. 老版本应用升级后，需要重新发布，才可进行页面预览。
+3. 预览父页面，页面下的所有子页面都更新。
+4. 预览父页面，如果父页面下有子页面，则需二次确认：仅发布当前页面，或同时发布子页面。
+5. 预览子页面，当前子页面及其父页面更新，其他子页面不更新。
+6. 预览仅更新该页面及该页面下的所有内容，包括子页面、事件等。
+7. 若修改数据、全局逻辑、流程等内容，需要点击IDE上方导航栏中“预览”按钮，全量更新后方可查看修改后内容。
+
+   <img src="../assets/ymIDE_0522_1753_32.png" alt="0" style="" />
+
+##### 开启设备模式
+
+开启设备模式指的是模拟不同设备的屏幕尺寸和分辨率，以便在设计界面时查看在不同设备上的显示效果。
+
+<img src="../assets/ymIDE_0522_1753_33.gif" alt="0" style="" />
+
+##### 鼠标圈选
+
+鼠标圈选功能允许开发者使用鼠标在画布上创建一个选取区域，以便一次性选择多个组件。此外，也可以在页面或左侧页面结构中使用Shift+鼠标点击或Ctrl/Command+鼠标点击进行连续多选或非连续多选，从而实现一次性选择多个组件。常用于需要将页面的多个组件复制到另一个页面进行复用，或者需要在页面中多个组件上设置相同的属性等场景。
+
+使用鼠标圈选功能选中多个组件：
+
+操作步骤
+
+1. 在画布的辅助功能区点击“鼠标圈选”按钮。
+2. 在页面画布上点击鼠标左键，并按住不放。
+3. 拖动鼠标以创建一个矩形选取区域，框住需要选择的多个组件。
+4. 释放鼠标左键，完成圈选操作。
+5. 选中的组件将会被矩形线框圈选，表示它们已经被选中。
+6. 已选中的多个组件可进行复制、剪切等快捷操作，也可在右侧属性中统一设置多个组件的通用属性或通用样式。
+   
+操作演示
+
+<img src="../assets/ymIDE_0522_1753_34.gif" alt="0" style="" />
+
+
+选中的**多个组件**支持生成横向线性布局、纵向线性布局、自由布局，以及复制、粘贴、剪切和删除等操作。
+
+<img src="../assets/ymIDE_0522_1753_35.gif" alt="0" style="" />
+
+<details>
+    <summary title="点击查看：**多个组件**操作说明">
+        点击查看：“多个组件”操作说明
+    </summary>
+
+- **生成布局**：
+
+  - 生成横向线性布局：当选择多个组件后，点击“多个组件”上方操作工具条内的“生成横向线性布局” 按钮，系统为当前多选组件其外层嵌套一个线性布局容器，布局内组件以横向保持对齐。
+
+    <img src="../assets/ymIDE_0522_1753_36.gif" alt="0" style="" />
+
+  - 生成纵向线性布局：当选择多个组件后，点击“多个组件”上方操作工具条内的“生成纵向线性布局” 按钮，系统为当前多选组件其外层嵌套一个线性布局容器，布局内组件以纵向保持对齐。
+
+    <img src="../assets/ymIDE_0522_1753_37.gif" alt="0" style="" />
+
+  - 生成自由布局：当选择多个组件后，点击“多个组件”上方操作工具条内的“生成自由布局” 按钮，系统会基于当前多选组件的相对位置，为其外层嵌套一个自由布局容器，该容器将紧密包裹所选多个组件的最外层边缘。
+
+    <img src="../assets/ymIDE_0522_1753_38.gif" alt="0" style="" />
+
+  - 生成横纵向布局后，可在属性面板中的内容间隙调整配置组件（一级组件）间距，间距可自定义也可自行在下拉框中选择，默认为16px。
+
+    <img src="../assets/ymIDE_0522_1753_40.png" alt="0" style="" />
+
+  - 生成横纵向布局时，组件的排列顺序根据当前页面中组件相对XY轴位置计算。
+
+    * 生成横向布局时，根据x轴值的大小进行排列，如遇到X轴值相等，则随机排列。
+    * 生成纵向布局时，根据y轴值的大小进行排列，如遇到Y轴值相等，则随机排列。
+    * 排列完成后，调整左侧结构树相对位置关系为当前排列的关系。
+
+- **复制**：选中多个组件后，通过复制功能可以复制这些组件的内容和属性，使其在页面上另行出现。通常在重复使用相似或相同组件的情况下使用，比如创建多个类似的表单或者列表项。
+
+- **剪切**：选中多个组件后，通过剪切功能可以将这些组件从原位置移除，并在需要的位置粘贴。通常在需要移动一组组件到其他位置时使用，比如对页面布局进行重新调整。
+
+</details>
+
+
+##### 适应屏幕
+
+用于调整画布内容缩放比例，点击适应屏幕按钮，CodeWave智能开发平台会根据屏幕大小自动调整画布内容缩放比例以适应当前屏幕的大小。
+
+<img src="../assets/ymIDE_0522_1753_41.gif" alt="0" style="" />
+
+##### 原始尺寸
+
+用于恢复画布内容缩放比例至1：1即100%比例。
+
+<img src="../assets/ymIDE_0522_1753_42.gif" alt="0" style="" />
+
+##### 调整比例
+
+用于根据指定比例对画布内容进行放大或缩小显示。可通过选择缩放比例值或点击减号（-）或加号（+）按钮进行调整。
+
+<img src="../assets/ymIDE_0522_1753_43.gif" alt="0" style="" />
+
+### 2.5 组件/属性面板
+
+#### 2.5.1 组件面板
+
+CodeWave智能开发平台预置了一些基础组件，开发者可以通过简单的拖拽操作，从组件面板将这些组件直接拖拽至页面画布上，完成对页面的构建。
+
+<img src="../assets/ymIDE_0522_1753_44.png" alt="0" style="" />
+
+##### 搜索组件
+
+组件面板支持搜索**基础**或**扩展**组件，搜索到的基础组件和扩展组件可直接拖拽到画布使用。此外，还支持搜索来自资产中心、资产市场的依赖库资产，来自资产中心、资产市场的依赖库资产，需要**导入**至应用后才可使用相关组件。
+
+搜索基础组件：
+
+<img src="../assets/yemianIDEjieshao_202409111440_1.png" class="imgStyle" style="" />
+
+搜索扩展组件：
+
+> 在平台中，通过依赖库引入的组件会显示在扩展组件面板区域。
+>
+>依赖库相关文档：[依赖库](../../20.应用开发/30.资产复用/30.依赖库.md)、[资产市场](../../20.应用开发/30.资产复用/50.资产市场.md)、[前端依赖库开发指南](../../40.扩展与集成/10.扩展开发方式/20.前端扩展开发/10.前端扩展开发概述.md)。
+
+<img src="../assets/yemianIDEjieshao_202409111440_2.png" class="imgStyle" style="" />
+
+搜索资产组件：
+
+<img src="../assets/ymIDE_0522_1753_47.gif" alt="0" style="" />
+
+##### 自定义组件面板
+
+页面组件面板支持管理，支持调整基础组件及扩展组件在当前应用中的显示、隐藏。详情可参见：[自定义组件面板](../../20.应用开发/10.页面设计/16.自定义组件面板.md)。
+
+功能入口：点击组件面板右上角的设置图标，进入到“自定义组件面板”界面。
+
+<img src="../assets/yemianIDEjieshao_202409111411_2.png" class="imgStyle" style="" />
+
+#### 2.5.2 属性面板
+
+开发者可以在属性面板对页面或应用中的各种组件进行属性、事件和样式的具体设置。通过属性面板，开发者可以修改组件的外观和行为，包括但不限于文本内容、颜色、尺寸、位置、交互事件等。详情可参见[各组件使用文档](../../20.应用开发/10.页面设计/20.PC端Vue2组件说明（默认）/01.布局/020.线性布局.md)及[页面属性及事件](../../20.应用开发/10.页面设计/11.页面属性及事件.md)。
+
+此外，属性面板还提供了复制组件名称、查看最近一次该组件的操作记录以及批量设置下级组件属性等功能。开发者可以快速复制一个组件的名称来用于其他设置，或者一次性对多个组件进行相似属性的批量调整（如开启批量设置下级组件后，可将该组件的下级组件的文字颜色统一设为红色）。
+
+<div class="highlight">
+
+什么是下级组件？
+
+组件的下级组件是指在应用界面组件内部使用的子组件。这些子组件可以被嵌套在父级组件内部，以实现更复杂的布局和功能。
+
+</div>
+
+<img src="../assets/yemianIDEjieshao_202409111411_3.png" class="imgStyle" style="" />
+
+#### 2.5.3 其他说明
+
+组件/属性面板可展开或收起。
+
+<img src="../assets/ymIDE_0522_1753_49.gif" alt="0" style="" />
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">小白</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2024年09月11日</span>
+</div>
+
+
+<style>
+.yellowBlock {
+    /* color: #FFFFFF; */
+    border-left-width: 0.5rem;
+    border-left-style: solid;
+    padding: 0.1rem 1.5rem;
+    margin:1rem 0;
+    background-color: #fcf5e1;
+    border-color: #eaaa08;
+}
+</style>
+<style>
+ .highlight {
+      border: 1px solid #679CF8; /* 添加边框 */
+      border-radius: 6px;
+      background-color: #F8FCFF; /* 添加底色 */
+      padding: 10px 20px 10px 20px;
+      margin-bottom:20px;
+      margin-top:20px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+</style>
+
+<style>
+/* 折叠块加边框、背景色、边距 */
+  details {
+      border: 1px solid #679CF8; /* 添加边框 */
+      border-radius: 6px;
+      background-color: #F8FCFF; /* 添加底色 */
+      padding: 10px 40px 10px 40px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  /* 折叠块标题不需要内边距 */
+  details summary {  
+    margin: 0 0 0 -20px;
+    font-weight: bold;
+    color: #679CF8;
+    cursor: pointer;
+  }
+  </style>

package/skills/smart-customer-service/docs/codewave/20./345/272/224/347/224/250/345/274/200/345/217/221/10./351/241/265/351/235/242/350/256/276/350/256/241/11./351/241/265/351/235/242/345/261/236/346/200/247/345/217/212/344/272/213/344/273/266.md

@@ -0,0 +1,165 @@
+# 页面属性及事件
+
+## 1. 功能概述
+
+在CodeWave智能开发平台中，页面属性通常包括页面名称、标题、面包屑等，事件则涵盖用户交互、数据处理、页面导航等功能。通过页面属性，可以配置页面的基本信息，例如配置页面标题，而事件可以用来在不同的时机处理页面任务，例如在页面进入时、离开后执行某些特定操作。
+
+<img src="../assets/yemianshuxingjishijian_202407301139_1.png" class="imgStyle" style="" />
+
+## 2. 功能介绍
+
+### 2.1 页面属性
+
+#### 名称
+
+页面的名称
+
+<img src="../assets/yemianshuxingjishijian_202407301139_2.png" class="imgStyle" style="" />
+
+支持修改，以字母开头，字母、数字或“_”组成。
+
+<img src="../assets/yemianshuxingjishijian_202407301139_3.png" class="imgStyle" style="" />
+
+支持一键复制页面名称。
+
+<img src="../assets/yemianshuxingjishijian_202407301139_4.png" class="imgStyle" style="" />
+
+#### 标题
+
+页面的标题，可添加文本用于描述页面内容，显示在页面左侧列表中，用于简要介绍页面的主题或内容。
+
+<img src="../assets/yemianshuxingjishijian_202407301139_5.png" class="imgStyle" style="" />
+
+可用于配置应用的浏览器页面标签：
+
+<img src="../assets/yemianshuxingjishijian_202407301139_6.png" class="imgStyle" style="" />
+
+<div class="highlight">
+
+**使用“标题”配置应用的浏览器页面标签**
+
+1.  点击IDE页面右上方“更多”按钮，选择“自定义主题样式”选项。
+
+    <img src="../assets/yemianshuxingjishijian_202407301139_7.png" class="imgStyle" style="" />
+
+1.  选择所需应用端，如PC端。
+
+    <img src="../assets/yemianshuxingjishijian_202407301139_8.png" class="imgStyle" style="" />
+
+1.  设置标签名称，点击变量，变量自动填入标签页名称。设置完成后，点击“保存并应用”按钮即可。
+
+    <img src="../assets/yemianshuxingjishijian_202407301139_9.png" class="imgStyle" style="" />
+
+1.  发布应用后，可看到如下效果。
+
+    <img src="../assets/yemianshuxingjishijian_202407301139_10.png" class="imgStyle" style="" />
+
+</div>
+
+#### 面包屑
+
+面包屑用来显示当前页面在应用中的位置，以一种层级结构展示用户的访问路径，例如 "**总览页 > 数据录入页**"。需配合面包屑组件的“自动生成”功能使用。具体如何设置自动面包屑请参见文档：[面包屑-示例（设置自动面包屑）](../../20.应用开发/10.页面设计/20.PC端Vue2组件说明（默认）/20.导航/030.面包屑.md)。
+
+<img src="../assets/yemianshuxingjishijian_202407301139_11.png" class="imgStyle" style="" />
+
+#### 权限控制
+
+<img src="../assets/yemianshuxingjishijian_202407301139_12.png" class="imgStyle" style="" />
+
+页面权限控制用以限制页面的访问权，可以通过验证用户的身份和权限来确定用户是否有权访问特定页面。当未导入功能权限模块时，默认为禁选状态。有关功能权限模块的导入和使用请参见文档：[权限模块配置](../../20.应用开发/10.页面设计/35.权限模块/005.权限模块配置.md)。
+
+<img src="../assets/yemianshuxingjishijian_202407301139_13.png" class="imgStyle" style="" />
+
+### 2.2 页面事件
+
+选中对应应用页面后，支持在IDE界面最右侧查看或添加页面事件，也支持在对应页面目录中的事件逻辑文件夹中查看或编辑已添加的页面事件。
+
+<img src="../assets/yemianshuxingjishijian_202407301139_14.png" class="imgStyle" style="" />
+
+PC端和H5端页面可调用的事件存在部分差异，如下：
+
+|       | PC 端页面可调用 | H5 端页面可调用 |
+| :---: | :-------: | :-------: |
+|  进入时  |     √     |     √     |
+|  进入后  |     √     |     √     |
+|  更新时  |     √     |     √     |
+|  离开后  |     √     |     √     |
+| 键盘按下时 |     √     |           |
+| 键盘松开时 |     √     |           |
+
+#### 进入时
+
+逻辑概述：页面开始创建时触发。
+
+常见应用场景：初始化页面数据、加载初始内容。
+
+#### 进入后
+
+逻辑概述：页面创建完毕、挂载成功时触发。
+
+常见应用场景：执行页面动画效果、请求远程数据、初始化页面交互功能。
+
+#### 更新时
+
+逻辑概述：页面数据更新时触发。
+
+常见应用场景：实时展示数据变化、响应用户交互操作、更新页面状态。
+
+#### 离开后
+
+逻辑概述：离开页面时触发。
+
+常见应用场景：保存用户操作数据、清除页面状态、执行清理操作。
+
+#### 键盘按下时
+
+逻辑概述：当用户按下键盘上的任意键时触发。
+
+输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+- event：按键按下的信息，包含按下的键的字符、键码等信息，数据类型为KeyboardEvent数据结构。
+
+  <img src="../assets/yemianshuxingjishijian_202407301139_15.png" class="imgStyle" style="" />
+
+常见应用场景：实时搜索、快捷键操作、表单输入验证。
+
+#### 键盘松开时
+
+逻辑概述：当用户松开键盘上的按键时触发。
+
+输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+- event：按键松开的信息，包含松开的键的字符、键码等信息，数据类型为KeyboardEvent数据结构。
+
+  <img src="../assets/yemianshuxingjishijian_202407301139_15.png" class="imgStyle" style="" />
+
+常见应用场景：实时搜索、实时输入验证、交互反馈。
+
+<div class="highlight">
+
+**补充说明**
+
+键盘按下或松开时的event属性通常配合 [系统逻辑-compareKeyboardInput](../../20.应用开发/15.逻辑功能实现/10.逻辑IDE/15.逻辑分类/60.系统逻辑.md) 使用，用于比较应用用户的键盘输入与目标键位是否一致。
+
+<img src="../assets/yemianshuxingjishijian_202407301139_17.png" class="imgStyle" style="" />
+
+</div>
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">小白</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2024年07月30日</span>
+</div>
+
+<style>
+ .highlight {
+      border: 1px solid #679CF8; /* 添加边框 */
+      border-radius: 6px;
+      background-color: #F8FCFF; /* 添加底色 */
+      padding: 10px 20px 10px 20px;
+      margin-bottom:20px;
+      margin-top:20px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+</style>         

package/skills/smart-customer-service/docs/codewave/20./345/272/224/347/224/250/345/274/200/345/217/221/10./351/241/265/351/235/242/350/256/276/350/256/241/12./351/241/265/351/235/242/345/222/214/345/255/220/351/241/265/351/235/242.md

@@ -0,0 +1,165 @@
+
+# 页面和子页面
+
+## 1. 功能介绍
+
+### 页面
+
+页面是指应用中的用户界面，即用户与应用进行交互的区域。开发者可以通过可视化工具设置页面布局、设计组件样式、定义交互行为等操作。这些页面通常包括各种组件，如表单、按钮、文本、数据表格等，用于展示信息、接收用户输入或执行特定功能。
+
+<img src="../assets/ymIDE_0522_1753_7.png" alt="0" style="" />
+
+#### 页面分类
+
+*   PC端页面：PC端页面是指适用于桌面端的页面，通常具有更大的显示区域和更丰富的交互功能。这类页面通常用于后台管理系统、数据展示、复杂表单等。
+*   H5端页面：H5页面是指适用于移动端的页面，通常采用响应式设计，能够在手机和平板等移动设备上良好展示。这类页面通常包括移动端的数据展示、表单、活动页面等。
+
+双击页面目录可进入页面画布构建应用页面。
+
+<img src="../assets/ymIDE_0522_1753_8.png" alt="0" style="" />
+
+#### 页面操作
+
+页面支持添加子页面、添加逻辑、添加输入参数、添加局部变量、快捷预览页面等操作。
+
+<img src="../assets/yemian_202511211627_1.png" class="imgStyle" style="width:300px" />
+
+##### 添加子页面
+
+平台支持为页面添加子页面。子页面是指一个独立的页面或页面片段，它可以在主页面内部或独立打开，用于展示特定的内容或功能。有关子页面的详细介绍请参见下文：[子页面](#子页面)。
+
+##### 添加逻辑
+
+平台支持开发者自行添加作用于当前页面的逻辑。关于自定义页面逻辑的详细介绍请参见[页面逻辑](../15.逻辑功能实现/10.逻辑IDE/15.逻辑分类/30.页面逻辑.md)。
+
+##### 添加输入参数
+
+平台支持为页面添加输入参数。输入参数用来作为页面间的数据连接，当页面之间存在关系时，可通过输入参数将数据传输。例如，进入个人信息页面，其中输入参数可用于存储ID标识以作为数据查询的筛选条件。可以在跳转到页面时设置这些参数，并在跳转完成后获取参数值，然后进行相应的处理。
+
+在跳转页面时设置页面参数：
+
+<img src="../assets/ymIDE_0522_1753_12.png" alt="0" style="" />
+
+在进入时逻辑中获取输入参数并进行相应处理：
+
+<img src="../assets/ymIDE_0522_1753_13.png" alt="0" style="" />
+
+##### 添加局部变量
+
+平台支持为页面添加的局部变量，局部变量是限定在某一页面作用域内的变量。
+
+<img src="../assets/ymIDE_0522_1753_14.png" alt="0" style="" />
+
+在页面添加的局部变量支持在当前页面任何可以使用变量的位置使用。例如，在页面逻辑中使用：
+
+<img src="../assets/ymIDE_0522_1753_15.png" alt="0" style="" />
+
+##### 添加文件夹
+
+<img src="../assets/yemian_202511211627_2.png" class="imgStyle" style="width:300px" />
+
+平台支持为页面添加文件夹，文件夹中可添加页面逻辑和局部变量，方便按业务模块归类管理，提升页面结构清晰度与维护效率。
+
+- 若逻辑或局部变量在文件夹下，调用时会同步展示文件夹层级目录。
+
+  <img src="../assets/yemian_202511211627_3.png" class="imgStyle" style="width:300px" />
+
+- 若删除文件夹，支持同时删除逻辑、变量或仅删除文件夹，仅删除文件夹时文件夹内的逻辑、变量将自动迁移至当前页面目录下，确保内容安全保留。
+
+  <img src="../assets/yemian_202511211627_4.png" class="imgStyle" style="width:300px" />
+
+##### 设为首页/默认跳转页
+
+**首页**是应用默认展示的第一个页面。平台支将应用中的一级页面设置为首页，且一个应用端只能存在一个首页。
+**默认跳转页**则是在特定条件下应用自动引导用户前往的页面。它可以是首页的子页面，也可以是其他页面的子页面。各页面的子页面均可被设置为默认跳转页。例如，页面 B 是页面 A 的子页面。当用户想要跳转至页面 A 时，如果页面 B 被设置为针对页面 A 的默认跳转页，那么应用不会直接显示页面 A，而是自动将用户引导至页面 B 。
+
+一级页面设为首页后，首页标识会在页面列表中显示：
+
+<img src="../assets/ymIDE_0522_1753_16.png" alt="0" style="" />
+
+子页面设置为默认跳转页面后，默认跳转页标识会在页面列表中显示：
+
+<img src="../assets/ymIDE_0522_1753_17.png" alt="0" style="" />
+
+##### 快捷预览页面
+
+平台支持页面维度发布，可以快捷预览当前页面效果。
+
+1.  预览页面所在的应用需发布过，才可进行页面预览。
+2.  老版本应用升级后，需要重新发布，才可进行页面预览。
+3.  预览父页面，页面下的所有子页面都更新。
+4.  预览父页面，如果父页面下有子页面，则需二次确认：仅发布当前页面，或同时发布子页面。
+5.  预览子页面，当前子页面及其父页面更新，其他子页面不更新。
+6.  预览仅更新该页面及该页面下的所有内容，包括子页面、事件等。
+7.  若修改数据、全局逻辑、流程等内容，需要点击IDE上方导航栏中“预览”按钮，全量更新后方可查看修改后内容。
+
+<img src="../assets/ymIDE_0522_1753_18.png" alt="0" style="" />
+
+##### 查找引用
+
+查找该页面在哪里被引用。查找结果将在页面编辑区下方展示，如下：
+
+<img src="../assets/ymIDE_0522_1753_19.gif" alt="0" style="" />
+
+##### 重命名
+
+将该页面重命名。
+
+##### 剪切
+
+将该页面剪切，可粘贴至其他应用或页面。
+
+##### 复制
+
+创建页面的副本，该副本包含与原始页面相同的逻辑和功能。复制后的页面可以被粘贴到其他应用或页面中。
+
+##### 粘贴
+
+将复制的内容粘贴至该页面，默认为置灰状态，无法点击，只有在复制了当前或其他页面下的变量、逻辑时，才能使用，如将从其他页面复制的变量粘贴至该页面：
+
+<img src="../assets/ymIDE_0522_1753_20.png" alt="0" style="" />
+
+##### 删除
+
+将该页面删除。如果该页面内嵌套有子页面，当执行删除页面操作时，该操作会包括将主页面及其内嵌的所有子页面一并移除。
+
+#### 页面预警
+
+双击页面目录，进入页面画布时，平台会自动检测当前页面体量，当页面过大时，右上角会弹出提示“建议对当前页面内容进行拆分设计”。
+
+<img src="../assets/yemianheziyemian_202408121818_1.png" class="imgStyle" style="" />
+
+
+### 子页面
+
+子页面是指一个独立的页面或页面片段，它可以在主页面内部或独立打开，用于展示特定的内容或功能。
+
+<img src="../assets/ymIDE_0522_1753_10.png" alt="0" style="" />
+
+子页面通常包含自己的页面交互，可以独立加载和展示。平台中的子页面需要通过父级页面内添加的子页面容器呈现。子页面容器是指用于展示子页面内容的定位容器，可自定义拖动位置，每个页面生成的时候均会自带一个子页面容器。
+
+> 子页面容器组件的具体使用方式，请参见：[子页面容器](../10.页面设计/20.PC端Vue2组件说明（默认）/30.容器/01.子页面容器.md)。
+
+<img src="../assets/ymIDE_0522_1753_11.png" alt="0" style="" />
+
+## 2. 补充说明
+
+1.  主页面与子页面的关系：在应用中，通常会有一个主页面，而子页面可以通过 [子页面容器](../10.页面设计/20.PC端Vue2组件说明（默认）/30.容器/01.子页面容器.md) 嵌入到主页面中，在这个容器组件内展示子页面的内容。这种方式使得应用可以在不同的页面之间进行切换，同时保持一些共享的元素（例如导航栏、页眉或页脚）不变。
+2.  主页面和子页面间数据的传递：在平台中，主页面和子页面之间可以通过 [前端全局变量](../10.页面设计/50.前端全局变量.md) 进行数据传递和交互。
+3.  关于如何创建页面及子页面请参见：[创建页面及子页面](../10.页面设计/15.创建页面及子页面.md)。
+
+<style>
+  h4 {
+    font-size: 18px;
+  }
+  h5,h6 {
+    font-size: 16px;
+  }
+</style>
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">小白</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2024年08月12日</span>
+</div>