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/19./347/273/204/344/273/266/345/217/257/350/256/277/351/227/256/345/261/236/346/200/247.md

@@ -0,0 +1,224 @@
+# 组件可访问属性
+
+## 1. 功能概述
+
+组件的可访问属性是指在逻辑或表达式的可视化编辑面板中能够直接被访问和操作的组件属性。它们不仅为开发者提供了直观的界面操作方式，并支持在逻辑层面对组件的属性进行获取和设置操作。
+
+组件的可访问属性能够减少组件或组件之间交互的中间环节，无需额外的中间变量或事件逻辑。以下我们通过一个简单的示例来论证这一点：
+
+- 用户A为选择器的选中值属性绑定变量，通过读取变量来获取选中值；
+- 选择器的可访问属性包括选中值，用户B直接读取选择器的可访问属性来获取选中值。
+
+在编写表达式或使用前端逻辑时，通过“变量或常量“即可使用当前页面下任意组件的可访问属性：
+
+<img src="../assets/zjkfwsx_202407081720_1.png" class="imgStyle" style="width:750px;" />
+
+## 2. 使用场景
+
+组件可访问属性支持灵活的获取（get）和设置（set）操作，常用于以下几种场景：
+
+- 在逻辑中获取可访问性属性的值（get）
+
+    例如在事件逻辑中获取数据表格的数据源并赋值给局部变量，即数据表格的可访问属性data（数据）赋值给局部变量。
+
+    <img src="../assets/zjkfwsx_202407081720_2.png" class="imgStyle" style="width:500px;" />
+
+- 在逻辑中为可访问性属性赋值（set）
+
+    例如在事件逻辑中将数据表格设置为禁用，即数据表格的可访问属性disabled（禁用）赋值为true。
+
+    <img src="../assets/zjkfwsx_202407081720_3.png" class="imgStyle" style="width:500px;" />
+
+- 在编辑表达式中获取可访问属性的值（get）
+
+    例如表单项from\_item\_3的显示条件为表单项from\_item\_1和表单项from\_item\_2均显示，即编辑from\_item\_3“显示条件”属性的表达式为from\_item\_1和from\_item\_2的可访问属性\_if（显示条件）均为true。
+
+    <img src="../assets/zjkfwsx_202407081720_4.png" class="imgStyle" style="width:500px;" />
+
+- 在组件的数据源中监听可访问属性的变化（get）
+
+    前提条件：组件的数据源通过调用逻辑获取数据，支持reload。
+
+    例如监听数据表格自动刷新的条件是选择器选中值的变化，即编辑数据表格“数据源”属性的监听变量为选择器的可访问属性value（选中值）。
+
+    <img src="../assets/zjkfwsx_202407081720_5.png" class="imgStyle" style="width:500px;" />
+
+<div class="details">
+
+具体使用场景请参考：[如何实现组件间数据联动展示](../../80.常见场景案例/40.组件场景/30.表单场景/080.如何实现组件间数据联动展示.md)
+
+</div>
+
+## 3. 操作示例
+
+### 3.1 动态显示表单项
+
+#### 3.1.1 场景描述
+
+已有表单如下图，要求选择“驳回”时显示驳回理由对应的表单项。
+
+#### 3.1.2 准备工作
+
+搭建表单，表单项分别包含单选组和多行输入组件。为单选组添加两个单选项，修改单选项的文本和“选项值”属性为通过和驳回。
+
+<img src="../assets/zjkfwsx_202407081720_6.png" class="imgStyle" style="" />
+
+#### 3.1.3 具体操作
+
+编辑驳回理由对应表单项的“显示条件”属性的表达式，要求“单选组的可访问属性value（选中值）等于驳回”为true时显示。
+
+<img src="../assets/zjkfwsx_202407081720_7.png" class="imgStyle" style="" />
+
+<img src="../assets/zjkfwsx_202407081720_8.png" class="imgStyle" style="" />
+
+#### 3.1.4 效果展示
+
+<img src="../assets/zjkfwsx_202407081720_9.gif" class="imgStyle" style="width:450px;" />
+
+### 3.2 动态计算表格数据总和
+
+#### 3.2.1 场景描述
+
+已有商品实体数据（下图左），要求选择商品并添加到数据表格（下图右），手动输入商品单价和数量后动态计算所有商品的总金额。
+
+<img src="../assets/zjkfwsx_202407081720_10.png" class="imgStyle" style="" />
+
+#### 3.2.2 准备工作
+
+1.  创建数据结构用于记录商品名称、商品单价、商品数量。如下图数据结构ProductStructure。
+
+    <img src="../assets/zjkfwsx_202407081720_11.png" class="imgStyle" style="" />
+
+1.  创建List类型局部变量作为数据表格的数据源，数据表格中包含数字输入框用于输入商品单价和商品数量。
+
+    <img src="../assets/zjkfwsx_202407081720_12.png" class="imgStyle" style="" />
+
+1.  选择器的数据源为查询商品实体的服务端逻辑，值字段为商品名称。该选择器选择的商品作为数据表格中添加的商品。
+
+    <img src="../assets/zjkfwsx_202407081720_13.png" class="imgStyle" style="" />
+
+1.  下图数字输入用于展示手动输入商品单价和数量后动态计算的总金额，状态为“禁用”。
+
+    <img src="../assets/zjkfwsx_202407081720_14.png" class="imgStyle" style="" />
+
+#### 3.2.3 具体操作
+
+1.  为添加商品的按钮添加点击事件。在事件中完成如下逻辑：
+
+    1.  判断选择器的选中值不为空。使用内置函数HasValue判断选择器的可访问属性value（选中值）为有效值。
+    2.  判断分支为yes时，将选择的商品加入到数据表格。使用内置Add向作为表格数据源的局部变量添加数据项。
+    3.  新建数据类型为ProductStructure的数据项，数据结构下的商品名称属性初始化为选择器选中的商品名称，即选择器的可访问属性value（选中值）。
+    4.  为避免选择器改变选择后更改可访问属性的状态，在初始化数据结构下的商品名称前先使用内置函数Clone选择器的可访问属性value（选中值）。
+
+    <img src="../assets/zjkfwsx_202407081720_15.png" class="imgStyle" style="" />
+
+1.  编辑数字输入“值”属性的表达式，“值”属性即所有商品的总金额。
+
+    1.  获取每个商品的金额列表。使用内置函数Transform转化表格数据为金额列表，表格数据为可访问属性data（数据），列表每一项的金额通过计算所得，计算公式为 item.商品单价\* item.商品数量。
+    2.  计算所有商品的总金额。使用内置函数Sum求得每个商品的总金额的和。
+
+    <img src="../assets/zjkfwsx_202407081720_16.png" class="imgStyle" style="" />
+
+    <img src="../assets/zjkfwsx_202407081720_17.png" class="imgStyle" style="" />
+
+1.  （可选）当需要存储总金额时，使用数字输入组件的可访问属性value（值）即可。
+
+    <img src="../assets/zjkfwsx_202407081720_18.png" class="imgStyle" style="width:450px;" />
+
+#### 3.2.4 效果展示
+
+<img src="../assets/zjkfwsx_202407081720_19.gif" class="imgStyle" style="" />
+
+## 4. FAQ
+
+### 4.1 仅允许通过赋值表达式设置（set）可访问属性
+
+可访问属性的值需要手动修改时，仅限于使用“赋值”组件改变可访问属性的值。
+
+<img src="../assets/zjkfwsx_202407081720_20.png" class="imgStyle" style="width:750px;" />
+
+#### 问题描述
+
+考虑到依赖库扩展组件对可访问属性的实现方式不一，设置复合类型内部值可能对组件状态变化有各种情形，目前设置（set）可访问属性的方式仅开放赋值这一个入口。
+
+例如尝试使用内置函数Add为多选组List类型的可访问属性value（选中值）添加选中项，组件选中状态并不会响应其效果。
+
+<img src="../assets/zjkfwsx_202407081720_21.png" class="imgStyle" style="width:450px;" />
+
+#### 解决方案
+
+##### 方案一：借助中间变量为可访问属性赋值。
+
+1.  创建变量，修改变量的值。
+
+    <img src="../assets/zjkfwsx_202407081720_22.png" class="imgStyle" style="" />
+
+1.  将变量赋值给可访问属性。
+
+    <img src="../assets/zjkfwsx_202407081720_23.png" class="imgStyle" style="" />
+
+##### 方案二：为属性绑定变量，通过修改变量的方式动态更新可访问属性。
+
+<div class="details">
+
+该解决方案适用于组件在属性面板中的属性与可访问属性对齐的情况。例如：
+
+- 选择器：可访问属性value（选中值）与属性面板中的“选中值”属性对齐。
+
+    <img src="../assets/zjkfwsx_202407081720_24.png" class="imgStyle" style="width:450px;" />
+
+    <img src="../assets/zjkfwsx_202407081720_25.png" class="imgStyle" style="width:450px;" />
+
+- 步骤条：可访问属性value（当前步骤）与属性面板中的“当前步骤”属性对齐。
+
+    <img src="../assets/zjkfwsx_202407081720_26.png" class="imgStyle" style="width:450px;" />
+
+    <img src="../assets/zjkfwsx_202407081720_27.png" class="imgStyle" style="width:450px;" />
+
+
+</div>
+
+1.  找到与可访问属性对齐的组件属性，绑定变量。
+
+    <img src="../assets/zjkfwsx_202407081720_28.png" class="imgStyle" style="" />
+
+1.  修改变量的值。
+
+    <img src="../assets/zjkfwsx_202407081720_29.png" class="imgStyle" style="" />
+
+### 4.2 属性绑定值后其可访问属性的设置（set）操作被禁止
+
+一旦属性被绑定到变量或表达式，则无法通过赋值表达式来修改与其对齐的可访问属性的值。
+
+#### 问题描述
+
+为了防止属性面板中属性在绑定变量或编辑表达式后与其对齐的可访问属性相互干扰、赋值时序不确定，IDE 禁止绑定变量或表达式与在逻辑中赋值行为同时出现。若上述行为同时出现，将提示报错：“页面组件：属性已动态绑定，不支持赋值操作”。
+
+<img src="../assets/zjkfwsx_202407081720_30.png" class="imgStyle" style="" />
+
+<img src="../assets/zjkfwsx_202407081720_31.png" class="imgStyle" style="" />
+
+#### 解决方案
+
+若属性绑定变量或表达式中包含变量，均可通过为变量赋值来实现可访问属性的动态更新。
+
+<img src="../assets/zjkfwsx_202407081720_32.png" class="imgStyle" style="width:650px;" />
+
+<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月08日</span>
+</div>
+                
+<style>
+ .details {
+      border: 1px solid #679CF8; /* 添加边框 */
+      border-radius: 6px;
+      background-color: #F8FCFF; /* 添加底色 */
+      padding: 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/19./347/273/204/344/273/266/345/261/236/346/200/247/347/261/273/345/236/213.md

@@ -0,0 +1,71 @@
+# 组件属性类型
+
+## 1. 功能概述
+
+页面组件的大多数属性支持编辑表达式，在开启编辑表达式界面中，可以通过拖入变量或其他逻辑组件构成的表达式来为属性实现内容的动态展示。
+
+编辑表达式的详细介绍请参考：[组件通用属性说明](../10.页面设计/17.组件通用属性说明.md)。
+
+发布后的应用中，传入的值和组件属性本身要求不匹配时，很容易发生错误。为了避免这类情况发生，IDE做了组件属性的类型提示和类型检查。具体表现在：
+
+* 在开启编辑表达式时，应用能够提示属性的数据类型。
+* 在编辑表达式后，应用能够对拖入变量或其他表达式返回结果的数据类型进行检查。
+
+## 2. 功能介绍
+
+### 2.1 数据类型提示
+
+1. 为页面组件的属性开启编辑表达式。
+
+   <img src="../assets/zjsx_0603_2036_1.jpg" style="border: 1px solid #ccc;" />
+2. 鼠标悬浮于表达式框上，即可提示属性的数据类型。
+
+   <img src="../assets/zjsx_0603_2036_2.png" style="border: 1px solid #ccc;" />
+
+### 2.2 数据类型检查
+
+1. 在开启编辑表达时或点击表达式框后，进入编辑表达式界面。
+
+   <img src="../assets/zjsx_0603_2036_3.png" style="border: 1px solid #ccc;" />
+2. 拖入变量或其他逻辑组件构成的表达式后，若变量或表达式结果的数据类型与属性的数据类型不一致，应用即提示问题。问题格式为“页面组件：属性类型不一致！接受类型：xxx，传入类型：xxx。“
+
+   <img src="../assets/zjsx_0603_2036_4.jpg" style="border: 1px solid #ccc;" />
+
+### 2.3 常见属性数据类型
+
+以下使用“V”表示各组件绑定数据源后“值字段”对应的数据类型，或添加子选项时子选项“值”属性的数据类型。以选择器为例：
+为选择器绑定数据源时，若选择器的“值字段”为 ICAPUser.id，V为Integer类型；若选择器的“值字段”为 ICAPUser.userName，V为String类型。为选择器添加选项时，选择项的“值”属性的数据类型即为V。
+
+* 数据表格——“单选值”属性：V。
+* 数据表格——“多选值”属性：`List<V>`。
+* 数据表格-表格配置列——“值”属性：`List<V>`。
+* 数据列表 / 选择器 / 树形视图——“选中值”属性：`V`或`List<V>`，取决于“可多选”属性是否开启。
+* 日历——“选中值”属性：`Date类型`。
+* 数字输入 / 评分——“值”属性：`Decimal类型`（`Integer类型`也可以传入）。
+* 单选组——“选中值”属性：V。
+* 开关——“值”属性：`Boolean类型`。
+* 多选组——“选中值”属性：`List<V>`。
+* 滑块——“滑块值”属性：`Decimal类型`或`Array<Decimal>`。`Array<Decimal>`表示“双滑块”属性开启时的两个滑块值，即`List<Decimal>`。
+* 文件上传——“值”属性：通过转换器控制；并受“多文件上传”属性影响，决定是否体现为`List`。
+* 图片展示——“地址”属性：通过转换器控制。
+* 步骤条——“当前步骤”属性：`Integer类型`。
+* 翻页器——“当前页数”属性：`Integer类型`。
+* 翻页器——“默认每页条数”属性：`Integer类型`。
+* 日期选择 / 日期时间选择——“值”属性：通过转换器控制，具体说明请参考[日期选择](../../20.应用开发/10.页面设计/20.PC端Vue2组件说明（默认）/70.选择器/200.日期选择.md)-“转换器”属性。
+* 时间选择——“值”属性：`Time类型`。
+* 未开启编辑表达式时通过开关控制的属性——编辑表达式时数据类型均为`Boolean类型`。例如选择器的“弹出状态”属性。
+
+## 3. 补充说明
+
+部分属性支持隐式`ToString`机制：
+
+为了减少需要用户在编辑表达式时手动`ToString`的操作，部分属性在开启编辑表达式时，提示数据类型为`String`，实际上可以为任何数据类型并在展示时由应用自动转化为文本。例如文本组件的“文本”属性、选择器的“占位符”属性。
+
+<img src="../assets/zjsx_0603_2036_5.png" style="border: 1px solid #ccc;" />
+
+<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年06月03日</span>
+</div>

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/19./347/273/204/344/273/266/346/270/205/345/215/225.md

@@ -0,0 +1,261 @@
+# 页面组件清单
+
+## PC端Vue2组件
+
+| 组件名 | 组件简介 |
+|--------|----------|
+| [线性布局](../10.页面设计/20.PC端Vue2组件说明（默认）/01.布局/020.线性布局.md) | 线性布局可以水平或垂直方式来排列界面中的组件，让布局内的组件间有一定的横向或者纵向间隔，并将组件排列到一条直线上。多用于横向或竖向的排布 |
+| [栅格布局](../10.页面设计/20.PC端Vue2组件说明（默认）/01.布局/030.栅格布局.md) | 栅格布局是基于行和列来划分页面区域的布局方式，可以将页面分割成多个网格，用于构建灵活且响应式的页面布局 |
+| [分栏布局](../10.页面设计/20.PC端Vue2组件说明（默认）/01.布局/040.分栏布局.md) | 分栏布局将页面分为左右或上下多个部分，适合搭建左右或上下结构的页面，例如左侧菜单右侧内容的页面布局 |
+| [自由布局](../10.页面设计/20.PC端Vue2组件说明（默认）/01.布局/050.自由布局.md) | 自由布局允许组件在容器中自由定位，可以任意拖拽组件位置，适合对页面布局有较高自由度要求的场景 |
+| [面包屑](../10.页面设计/20.PC端Vue2组件说明（默认）/20.导航/030.面包屑.md) | 面包屑用于显示当前页面在应用中的位置，以一种层级结构展示用户的访问路径，帮助用户了解当前位置 |
+| [侧边栏](../10.页面设计/20.PC端Vue2组件说明（默认）/20.导航/040.侧边栏.md) | 侧边栏用于展示页面导航菜单，通常位于页面左侧或右侧，可以折叠展开，节省页面空间 |
+| [导航栏](../10.页面设计/20.PC端Vue2组件说明（默认）/20.导航/050.导航栏.md) | 导航栏用于展示页面导航菜单，通常位于页面顶部，提供主要功能入口的导航 |
+| [下拉菜单](../10.页面设计/20.PC端Vue2组件说明（默认）/20.导航/060.下拉菜单.md) | 下拉菜单将多个选项收纳在一个菜单中，点击后展开，节省页面空间，常用于导航或功能选择 |
+| [目录](../10.页面设计/20.PC端Vue2组件说明（默认）/20.导航/070.目录.md) | 目录组件用于展示页面内容的结构，点击目录项可快速定位到页面对应内容区域 |
+| [锚点](../10.页面设计/20.PC端Vue2组件说明（默认）/20.导航/080.锚点.md) | 锚点用于页面内快速定位，点击锚点可跳转到页面中对应的锚点目标位置 |
+| [子页面容器](../10.页面设计/20.PC端Vue2组件说明（默认）/30.容器/01.子页面容器.md) | 子页面容器用于嵌套子页面，在一个页面中展示另一个页面的内容，实现页面复用 |
+| [Iframe](../10.页面设计/20.PC端Vue2组件说明（默认）/30.容器/02.Iframe.md) | Iframe组件用于在页面中嵌入其他网页或应用，实现跨域内容的展示 |
+| [面板](../10.页面设计/20.PC端Vue2组件说明（默认）/30.容器/03.面板.md) | 面板用于将相关内容组织在一起，提供标题、内容区域，常用于内容分组展示 |
+| [折叠面板](../10.页面设计/20.PC端Vue2组件说明（默认）/30.容器/04.折叠面板.md) | 折叠面板允许用户在多个内容块之间切换，可以折叠或展开内容，节省页面空间 |
+| [卡片](../10.页面设计/20.PC端Vue2组件说明（默认）/30.容器/05.卡片.md) | 卡片用于展示简洁的信息片段，通常包含标题、图像、文本等元素，适合信息聚合展示 |
+| [文本](../10.页面设计/20.PC端Vue2组件说明（默认）/40.展示/050.文本.md) | 文本组件用于展示静态或动态的文字内容，支持富文本格式 |
+| [链接](../10.页面设计/20.PC端Vue2组件说明（默认）/40.展示/060.链接.md) | 链接组件用于创建可点击的超链接，可以跳转到页面或执行特定操作 |
+| [按钮](../10.页面设计/20.PC端Vue2组件说明（默认）/40.展示/061.按钮.md) | 按钮用于触发特定操作，支持多种样式和状态，是交互的重要组件 |
+| [图标](../10.页面设计/20.PC端Vue2组件说明（默认）/40.展示/062.图标.md) | 图标用于展示各种符号和图形，增强界面的视觉效果和可读性 |
+| [画廊](../10.页面设计/20.PC端Vue2组件说明（默认）/40.展示/063.画廊.md) | 画廊用于展示多张图片，支持图片浏览、切换等操作 |
+| [标签](../10.页面设计/20.PC端Vue2组件说明（默认）/40.展示/065.标签.md) | 标签用于标记和分类内容，通常以小标签形式展示分类或关键词 |
+| [徽章](../10.页面设计/20.PC端Vue2组件说明（默认）/40.展示/070.徽章.md) | 徽章用于展示提示信息，如数字、状态等，通常显示在图标或文本旁边 |
+| [幻灯片](../10.页面设计/20.PC端Vue2组件说明（默认）/40.展示/080.幻灯片.md) | 幻灯片用于展示多张图片或内容的轮播效果，支持自动播放和手动切换 |
+| [详情列表](../10.页面设计/20.PC端Vue2组件说明（默认）/40.展示/090.详情列表.md) | 详情列表用于展示具有标题和内容的列表项，适合展示详细信息 |
+| [图片展示](../10.页面设计/20.PC端Vue2组件说明（默认）/40.展示/100.图片展示.md) | 图片展示组件用于展示图片，支持多种展示方式和交互效果 |
+| [公告](../10.页面设计/20.PC端Vue2组件说明（默认）/40.展示/110.公告.md) | 公告用于展示重要通知或信息，通常以醒目的方式展示在页面中 |
+| [计时器](../10.页面设计/20.PC端Vue2组件说明（默认）/40.展示/120.计时器.md) | 计时器用于显示时间倒计时或计时功能，支持多种计时模式 |
+| [分隔线](../10.页面设计/20.PC端Vue2组件说明（默认）/40.展示/130.分隔线.md) | 分隔线用于在内容之间添加分隔，增强页面结构的清晰度 |
+| [时间线](../10.页面设计/20.PC端Vue2组件说明（默认）/40.展示/140.时间线.md) | 时间线用于展示按时间顺序排列的事件或流程，常用于展示历史记录 |
+| [数据表格](../10.页面设计/20.PC端Vue2组件说明（默认）/50.表格/100.数据表格.md) | 数据表格用于展示和管理大量结构化数据，支持排序、筛选、编辑等操作 |
+| [组件列表](../10.页面设计/20.PC端Vue2组件说明（默认）/50.表格/100.组件列表.md) | 组件列表用于展示多个组件的列表形式，支持多种布局方式 |
+| [数据列表](../10.页面设计/20.PC端Vue2组件说明（默认）/50.表格/105.数据列表.md) | 数据列表用于展示结构化数据的列表形式，适合展示条目信息 |
+| [数据网格](../10.页面设计/20.PC端Vue2组件说明（默认）/50.表格/120.数据网格.md) | 数据网格用于展示复杂的数据结构，支持多维度数据展示 |
+| [日历](../10.页面设计/20.PC端Vue2组件说明（默认）/50.表格/90.日历.md) | 日历用于展示日期信息，支持日期选择和事件标记 |
+| [表单](../10.页面设计/20.PC端Vue2组件说明（默认）/60.表单/010.表单.md) | 表单用于收集用户输入数据，是数据录入的重要组件 |
+| [单行输入](../10.页面设计/20.PC端Vue2组件说明（默认）/60.表单/068.单行输入.md) | 单行输入用于收集用户的单行文本输入，如姓名、标题等 |
+| [数字输入](../10.页面设计/20.PC端Vue2组件说明（默认）/60.表单/078.数字输入.md) | 数字输入用于收集用户的数字输入，支持数字格式验证 |
+| [多行输入](../10.页面设计/20.PC端Vue2组件说明（默认）/60.表单/088.多行输入.md) | 多行输入用于收集用户的多行文本输入，如描述、备注等 |
+| [单选组](../10.页面设计/20.PC端Vue2组件说明（默认）/60.表单/098.单选组.md) | 单选组用于让用户从多个选项中选择一项，确保只能选择一个选项 |
+| [开关](../10.页面设计/20.PC端Vue2组件说明（默认）/60.表单/108.开关.md) | 开关用于切换选项的开启或关闭状态，提供直观的开关效果 |
+| [多选组](../10.页面设计/20.PC端Vue2组件说明（默认）/60.表单/118.多选组.md) | 多选组用于让用户从多个选项中选择多个选项，支持多选操作 |
+| [胶囊](../10.页面设计/20.PC端Vue2组件说明（默认）/60.表单/128.胶囊.md) | 胶囊组件用于展示选项或标签，支持选择和取消选择操作 |
+| [评分](../10.页面设计/20.PC端Vue2组件说明（默认）/60.表单/138.评分.md) | 评分用于收集用户对内容的评分，通常以星星形式展示 |
+| [滑块](../10.页面设计/20.PC端Vue2组件说明（默认）/60.表单/148.滑块.md) | 滑块用于让用户通过拖拽选择数值范围，提供直观的数值选择方式 |
+| [文件上传](../10.页面设计/20.PC端Vue2组件说明（默认）/60.表单/158.文件上传.md) | 文件上传用于让用户上传文件，支持多种文件格式和大小限制 |
+| [验证器](../10.页面设计/20.PC端Vue2组件说明（默认）/60.表单/160.验证器.md) | 验证器用于对表单数据进行验证，确保数据的合法性和完整性 |
+| [选项卡](../10.页面设计/20.PC端Vue2组件说明（默认）/70.选择器/160.选项卡.md) | 选项卡用于在多个内容面板之间切换，节省页面空间，组织相关内容 |
+| [步骤条](../10.页面设计/20.PC端Vue2组件说明（默认）/70.选择器/170.步骤条.md) | 步骤条用于展示任务的完成步骤，指示当前进度和后续步骤 |
+| [翻页器](../10.页面设计/20.PC端Vue2组件说明（默认）/70.选择器/172.翻页器.md) | 翻页器用于在多页内容之间切换，支持前后翻页和跳转到指定页 |
+| [选择器](../10.页面设计/20.PC端Vue2组件说明（默认）/70.选择器/173.选择器.md) | 选择器用于让用户从预定义选项中选择一个或多个值，支持单选和多选 |
+| [级联选择](../10.页面设计/20.PC端Vue2组件说明（默认）/70.选择器/175.级联选择.md) | 级联选择用于处理多层级关联数据的选择，如省市区选择 |
+| [地区选择](../10.页面设计/20.PC端Vue2组件说明（默认）/70.选择器/179.地区选择.md) | 地区选择用于选择地理位置信息，通常包含省市区等多级结构 |
+| [树形视图](../10.页面设计/20.PC端Vue2组件说明（默认）/70.选择器/185.树形视图.md) | 树形视图用于展示层级结构数据，支持展开和折叠节点 |
+| [穿梭框](../10.页面设计/20.PC端Vue2组件说明（默认）/70.选择器/190.穿梭框.md) | 穿梭框用于在两个列表之间移动选项，常用于权限分配等场景 |
+| [日期选择](../10.页面设计/20.PC端Vue2组件说明（默认）/70.选择器/200.日期选择.md) | 日期选择用于让用户选择特定日期，支持多种日期格式 |
+| [时间选择](../10.页面设计/20.PC端Vue2组件说明（默认）/70.选择器/210.时间选择.md) | 时间选择用于让用户选择特定时间，支持小时和分钟选择 |
+| [日期时间选择](../10.页面设计/20.PC端Vue2组件说明（默认）/70.选择器/220.日期时间选择.md) | 日期时间选择用于让用户选择特定的日期和时间组合 |
+| [树选择](../10.页面设计/20.PC端Vue2组件说明（默认）/70.选择器/230.树选择.md) | 树选择用于在树形结构中选择节点，结合了树形视图和选择器的功能 |
+| [线形进度条](../10.页面设计/20.PC端Vue2组件说明（默认）/80.图表/198.线形进度条.md) | 线形进度条用于展示任务完成进度，以水平线形方式显示进度 |
+| [圆形进度条](../10.页面设计/20.PC端Vue2组件说明（默认）/80.图表/199.圆形进度条.md) | 圆形进度条用于展示任务完成进度，以圆形方式显示进度 |
+| [弹出框](../10.页面设计/20.PC端Vue2组件说明（默认）/90.反馈/100.弹出框.md) | 弹出框用于展示提示信息或获取用户确认，以弹出方式显示内容 |
+| [弹窗](../10.页面设计/20.PC端Vue2组件说明（默认）/90.反馈/210.弹窗.md) | 弹窗用于展示额外内容或执行特定操作，以浮动窗口形式显示 |
+| [抽屉](../10.页面设计/20.PC端Vue2组件说明（默认）/90.反馈/220.抽屉.md) | 抽屉从页面边缘滑出，用于展示附加内容或操作面板 |
+| [弹出消息](../10.页面设计/20.PC端Vue2组件说明（默认）/90.反馈/223.弹出消息.md) | 弹出消息用于展示通知或提示信息，通常短暂显示后自动消失 |
+| [水印](../10.页面设计/20.PC端Vue2组件说明（默认）/93.特效/05.水印.md) | 水印用于在页面上添加水印效果，保护内容版权或标识状态 |
+| [复制](../10.页面设计/20.PC端Vue2组件说明（默认）/93.特效/10.复制.md) | 复制组件用于复制文本或数据到剪贴板，提供便捷的复制功能 |
+
+## H5端Vue2组件
+
+| 组件名 | 组件简介 |
+|--------|----------|
+| [栅格布局](../10.页面设计/22.H5端Vue2组件说明（默认）/10.布局/010.栅格布局.md) | 栅格布局是H5端用于构建灵活页面布局的组件，基于行和列来划分页面区域 |
+| [线性布局](../10.页面设计/22.H5端Vue2组件说明（默认）/10.布局/020.线性布局.md) | 线性布局可以水平或垂直方式来排列界面中的组件，适合H5端的线性排布需求 |
+| [下拉菜单](../10.页面设计/22.H5端Vue2组件说明（默认）/20.导航/010.下拉菜单.md) | 下拉菜单用于H5端的导航功能，将多个选项收纳在一个菜单中 |
+| [侧边导航](../10.页面设计/22.H5端Vue2组件说明（默认）/20.导航/020.侧边导航.md) | 侧边导航用于H5端的侧边栏导航功能，适合移动端导航场景 |
+| [标签栏](../10.页面设计/22.H5端Vue2组件说明（默认）/20.导航/030.标签栏.md) | 标签栏用于H5端的底部标签导航，提供主要功能入口的快速切换 |
+| [锚点](../10.页面设计/22.H5端Vue2组件说明（默认）/20.导航/040.锚点.md) | 锚点用于H5端页面内快速定位，点击锚点可跳转到页面对应内容区域 |
+| [子页面容器](../10.页面设计/22.H5端Vue2组件说明（默认）/30.容器/010.子页面容器.md) | 子页面容器用于H5端嵌套子页面，在一个页面中展示另一个页面的内容 |
+| [Iframe](../10.页面设计/22.H5端Vue2组件说明（默认）/30.容器/015.Iframe.md) | Iframe组件用于H5端在页面中嵌入其他网页或应用 |
+| [折叠面板](../10.页面设计/22.H5端Vue2组件说明（默认）/30.容器/030.折叠面板.md) | 折叠面板用于H5端内容的折叠展示，节省页面空间 |
+| [卡片](../10.页面设计/22.H5端Vue2组件说明（默认）/30.容器/040.卡片.md) | 卡片用于H5端展示简洁的信息片段，适合移动端信息展示 |
+| [滑动条](../10.页面设计/22.H5端Vue2组件说明（默认）/30.容器/050.滑动条.md) | 滑动条用于H5端内容的横向滑动展示，适合展示多个项目 |
+| [分隔线](../10.页面设计/22.H5端Vue2组件说明（默认）/40.展示/010.分隔线.md) | 分隔线用于H5端在内容之间添加分隔，增强页面结构的清晰度 |
+| [单元格组](../10.页面设计/22.H5端Vue2组件说明（默认）/40.展示/020.单元格组.md) | 单元格组用于H5端展示列表形式的内容，常用于移动端列表展示 |
+| [按钮](../10.页面设计/22.H5端Vue2组件说明（默认）/40.展示/030.按钮.md) | 按钮用于H5端触发特定操作，适配移动端的交互方式 |
+| [图片展示](../10.页面设计/22.H5端Vue2组件说明（默认）/40.展示/040.图片展示.md) | 图片展示组件用于H5端展示图片，适配移动端图片显示 |
+| [幻灯片](../10.页面设计/22.H5端Vue2组件说明（默认）/40.展示/050.幻灯片.md) | 幻灯片用于H5端展示多张图片的轮播效果，支持移动端滑动操作 |
+| [文本](../10.页面设计/22.H5端Vue2组件说明（默认）/40.展示/060.文本.md) | 文本组件用于H5端展示静态或动态的文字内容，适配移动端显示 |
+| [链接](../10.页面设计/22.H5端Vue2组件说明（默认）/40.展示/070.链接.md) | 链接组件用于H5端创建可点击的超链接，适配移动端链接交互 |
+| [徽标](../10.页面设计/22.H5端Vue2组件说明（默认）/40.展示/080.徽标.md) | 徽标用于H5端展示提示信息，如数字、状态等，适配移动端显示 |
+| [通知栏](../10.页面设计/22.H5端Vue2组件说明（默认）/40.展示/090.通知栏.md) | 通知栏用于H5端展示重要通知或信息，通常以顶部横幅形式展示 |
+| [步骤条](../10.页面设计/22.H5端Vue2组件说明（默认）/40.展示/100.步骤条.md) | 步骤条用于H5端展示任务的完成步骤，指示当前进度和后续步骤 |
+| [计时器](../10.页面设计/22.H5端Vue2组件说明（默认）/40.展示/110.计时器.md) | 计时器用于H5端显示时间倒计时或计时功能，适配移动端显示 |
+| [图标](../10.页面设计/22.H5端Vue2组件说明（默认）/40.展示/120.图标.md) | 图标用于H5端展示各种符号和图形，适配移动端图标显示 |
+| [标签](../10.页面设计/22.H5端Vue2组件说明（默认）/40.展示/130.标签.md) | 标签用于H5端标记和分类内容，通常以小标签形式展示分类或关键词 |
+| [环形进度条](../10.页面设计/22.H5端Vue2组件说明（默认）/40.展示/140.环形进度条.md) | 环形进度条用于H5端展示任务完成进度，以圆形方式显示进度 |
+| [进度条](../10.页面设计/22.H5端Vue2组件说明（默认）/40.展示/150.进度条.md) | 进度条用于H5端展示任务完成进度，以线形方式显示进度 |
+| [画廊](../10.页面设计/22.H5端Vue2组件说明（默认）/40.展示/160.画廊.md) | 画廊用于H5端展示多张图片，支持移动端的图片浏览操作 |
+| [评分](../10.页面设计/22.H5端Vue2组件说明（默认）/40.展示/170.评分.md) | 评分用于H5端收集用户对内容的评分，适配移动端的评分交互 |
+| [滑块](../10.页面设计/22.H5端Vue2组件说明（默认）/40.展示/180.滑块.md) | 滑块用于H5端让用户通过拖拽选择数值范围，适配移动端滑动操作 |
+| [数据列表](../10.页面设计/22.H5端Vue2组件说明（默认）/50.表格/10.数据列表.md) | 数据列表用于H5端展示结构化数据的列表形式，适配移动端数据展示 |
+| [组件列表](../10.页面设计/22.H5端Vue2组件说明（默认）/50.表格/20.组件列表.md) | 组件列表用于H5端展示多个组件的列表形式，适配移动端展示 |
+| [数据网格](../10.页面设计/22.H5端Vue2组件说明（默认）/50.表格/30.数据网格.md) | 数据网格用于H5端展示复杂的数据结构，适配移动端数据展示 |
+| [表单](../10.页面设计/22.H5端Vue2组件说明（默认）/60.表单/10.表单.md) | 表单用于H5端收集用户输入数据，适配移动端的表单交互 |
+| [胶囊](../10.页面设计/22.H5端Vue2组件说明（默认）/60.表单/110.胶囊.md) | 胶囊组件用于H5端展示选项或标签，适配移动端的标签选择 |
+| [单行输入](../10.页面设计/22.H5端Vue2组件说明（默认）/60.表单/20.单行输入.md) | 单行输入用于H5端收集用户的单行文本输入，适配移动端输入体验 |
+| [多行输入](../10.页面设计/22.H5端Vue2组件说明（默认）/60.表单/30.多行输入.md) | 多行输入用于H5端收集用户的多行文本输入，适配移动端输入体验 |
+| [搜索框](../10.页面设计/22.H5端Vue2组件说明（默认）/60.表单/40.搜索框.md) | 搜索框用于H5端的搜索功能，提供移动端的搜索交互体验 |
+| [单选组](../10.页面设计/22.H5端Vue2组件说明（默认）/60.表单/50.单选组.md) | 单选组用于H5端让用户从多个选项中选择一项，适配移动端单选操作 |
+| [开关](../10.页面设计/22.H5端Vue2组件说明（默认）/60.表单/60.开关.md) | 开关用于H5端切换选项的开启或关闭状态，适配移动端开关操作 |
+| [多选组](../10.页面设计/22.H5端Vue2组件说明（默认）/60.表单/70.多选组.md) | 多选组用于H5端让用户从多个选项中选择多个选项，适配移动端多选操作 |
+| [数字输入](../10.页面设计/22.H5端Vue2组件说明（默认）/60.表单/80.数字输入.md) | 数字输入用于H5端收集用户的数字输入，适配移动端数字输入体验 |
+| [文件上传](../10.页面设计/22.H5端Vue2组件说明（默认）/60.表单/90.文件上传.md) | 文件上传用于H5端让用户上传文件，适配移动端文件上传操作 |
+| [选项卡](../10.页面设计/22.H5端Vue2组件说明（默认）/70.选择器/10.选项卡.md) | 选项卡用于H5端在多个内容面板之间切换，适配移动端标签切换 |
+| [选择器](../10.页面设计/22.H5端Vue2组件说明（默认）/70.选择器/20.选择器.md) | 选择器用于H5端让用户从预定义选项中选择值，适配移动端选择操作 |
+| [地区选择](../10.页面设计/22.H5端Vue2组件说明（默认）/70.选择器/30.地区选择.md) | 地区选择用于H5端选择地理位置信息，适配移动端地区选择操作 |
+| [级联选择](../10.页面设计/22.H5端Vue2组件说明（默认）/70.选择器/40.级联选择.md) | 级联选择用于H5端处理多层级关联数据的选择，适配移动端级联选择 |
+| [时间选择](../10.页面设计/22.H5端Vue2组件说明（默认）/70.选择器/50.时间选择.md) | 时间选择用于H5端让用户选择特定时间，适配移动端时间选择 |
+| [日期选择](../10.页面设计/22.H5端Vue2组件说明（默认）/70.选择器/60.日期选择.md) | 日期选择用于H5端让用户选择特定日期，适配移动端日期选择 |
+| [弹出框](../10.页面设计/22.H5端Vue2组件说明（默认）/80.反馈/10.弹出框.md) | 弹出框用于H5端展示提示信息或获取用户确认，适配移动端弹窗交互 |
+| [弹窗](../10.页面设计/22.H5端Vue2组件说明（默认）/80.反馈/20.弹窗.md) | 弹窗用于H5端展示额外内容或执行特定操作，适配移动端弹窗交互 |
+| [抽屉](../10.页面设计/22.H5端Vue2组件说明（默认）/80.反馈/25.抽屉.md) | 抽屉用于H5端从页面边缘滑出，展示附加内容或操作面板 |
+| [弹出消息](../10.页面设计/22.H5端Vue2组件说明（默认）/80.反馈/30.弹出消息.md) | 弹出消息用于H5端展示通知或提示信息，适配移动端消息展示 |
+| [复制](../10.页面设计/22.H5端Vue2组件说明（默认）/90.特效/10.复制.md) | 复制组件用于H5端复制文本或数据到剪贴板，提供移动端的复制功能 |
+
+## PC端Vue3组件
+
+| 组件名 | 组件简介 |
+|--------|----------|
+| [线性布局](../10.页面设计/26.PC端Vue3组件说明/10.布局/10.线性布局.md) | 线性布局可以水平或垂直方式来排列界面中的组件，让布局内的组件间有一定的横向或者纵向间隔 |
+| [自由布局](../10.页面设计/26.PC端Vue3组件说明/10.布局/20.自由布局.md) | 自由布局允许组件在容器中自由定位，可以任意拖拽组件位置，适合对页面布局有较高自由度要求的场景 |
+| [栅格布局](../10.页面设计/26.PC端Vue3组件说明/10.布局/30.栅格布局.md) | 栅格布局是基于行和列来划分页面区域的布局方式，可以将页面分割成多个网格，用于构建灵活且响应式的页面布局 |
+| [分栏布局](../10.页面设计/26.PC端Vue3组件说明/10.布局/40.分栏布局.md) | 分栏布局将页面分为左右或上下多个部分，适合搭建左右或上下结构的页面，例如左侧菜单右侧内容的页面布局 |
+| [固钉](../10.页面设计/26.PC端Vue3组件说明/20.导航/10.固钉.md) | 固钉用于将内容固定在页面的某个位置，当页面滚动时该内容保持固定，常用于导航或重要信息展示 |
+| [回到顶部](../10.页面设计/26.PC端Vue3组件说明/20.导航/20.回到顶部.md) | 回到顶部用于快速返回页面顶部，提升长页面的浏览体验 |
+| [页头](../10.页面设计/26.PC端Vue3组件说明/20.导航/30.页头.md) | 页头用于展示页面的标题、面包屑和操作按钮，是页面的重要组成部分 |
+| [步骤条](../10.页面设计/26.PC端Vue3组件说明/20.导航/40.步骤条.md) | 步骤条用于展示任务的完成步骤，指示当前进度和后续步骤 |
+| [面包屑](../10.页面设计/26.PC端Vue3组件说明/20.导航/50.面包屑.md) | 面包屑用于显示当前页面在应用中的位置，以一种层级结构展示用户的访问路径 |
+| [下拉下单](../10.页面设计/26.PC端Vue3组件说明/20.导航/60.下拉下单.md) | 下拉下单将多个选项收纳在一个菜单中，点击后展开，节省页面空间，常用于导航或功能选择 |
+| [导航菜单](../10.页面设计/26.PC端Vue3组件说明/20.导航/70.导航菜单.md) | 导航菜单用于展示页面导航结构，支持多级菜单，提供清晰的导航路径 |
+| [翻页器](../10.页面设计/26.PC端Vue3组件说明/20.导航/80.翻页器.md) | 翻页器用于在多页内容之间切换，支持前后翻页和跳转到指定页 |
+| [滚动条](../10.页面设计/26.PC端Vue3组件说明/20.导航/90.滚动条.md) | 滚动条用于在内容超出容器时提供滚动功能，支持自定义样式 |
+| [卡片](../10.页面设计/26.PC端Vue3组件说明/30.容器/10.卡片.md) | 卡片用于展示简洁的信息片段，通常包含标题、图像、文本等元素，适合信息聚合展示 |
+| [Iframe](../10.页面设计/26.PC端Vue3组件说明/30.容器/20.Iframe.md) | Iframe组件用于在页面中嵌入其他网页或应用，实现跨域内容的展示 |
+| [子页面容器](../10.页面设计/26.PC端Vue3组件说明/30.容器/30.子页面容器.md) | 子页面容器用于嵌套子页面，在一个页面中展示另一个页面的内容，实现页面复用 |
+| [折叠面板](../10.页面设计/26.PC端Vue3组件说明/30.容器/40.折叠面板.md) | 折叠面板允许用户在多个内容块之间切换，可以折叠或展开内容，节省页面空间 |
+| [公告](../10.页面设计/26.PC端Vue3组件说明/40.展示/10.公告.md) | 公告用于展示重要通知或信息，通常以醒目的方式展示在页面中 |
+| [时间线](../10.页面设计/26.PC端Vue3组件说明/40.展示/100.时间线.md) | 时间线用于展示按时间顺序排列的事件或流程，常用于展示历史记录 |
+| [分割线](../10.页面设计/26.PC端Vue3组件说明/40.展示/110.分割线.md) | 分割线用于在内容之间添加分隔，增强页面结构的清晰度 |
+| [锚点](../10.页面设计/26.PC端Vue3组件说明/40.展示/115.锚点.md) | 锚点用于页面内快速定位，点击锚点可跳转到页面中对应的锚点目标位置 |
+| [结果](../10.页面设计/26.PC端Vue3组件说明/40.展示/120.结果.md) | 结果用于展示操作结果页面，如成功、失败、错误等状态的结果展示 |
+| [链接](../10.页面设计/26.PC端Vue3组件说明/40.展示/130.链接.md) | 链接组件用于创建可点击的超链接，可以跳转到页面或执行特定操作 |
+| [按钮](../10.页面设计/26.PC端Vue3组件说明/40.展示/20.按钮.md) | 按钮用于触发特定操作，支持多种样式和状态，是交互的重要组件 |
+| [文本](../10.页面设计/26.PC端Vue3组件说明/40.展示/30.文本.md) | 文本组件用于展示静态或动态的文字内容，支持富文本格式 |
+| [走马灯](../10.页面设计/26.PC端Vue3组件说明/40.展示/40.走马灯.md) | 走马灯用于展示滚动的文字或图片内容，支持多种滚动效果 |
+| [图标](../10.页面设计/26.PC端Vue3组件说明/40.展示/50.图标.md) | 图标用于展示各种符号和图形，增强界面的视觉效果和可读性 |
+| [标签](../10.页面设计/26.PC端Vue3组件说明/40.展示/60.标签.md) | 标签用于标记和分类内容，通常以小标签形式展示分类或关键词 |
+| [徽章](../10.页面设计/26.PC端Vue3组件说明/40.展示/70.徽章.md) | 徽章用于展示提示信息，如数字、状态等，通常显示在图标或文本旁边 |
+| [描述列表](../10.页面设计/26.PC端Vue3组件说明/40.展示/80.描述列表.md) | 描述列表用于展示术语和描述的配对关系，适合展示属性信息 |
+| [图片](../10.页面设计/26.PC端Vue3组件说明/40.展示/90.图片.md) | 图片用于展示图像内容，支持多种展示方式和交互效果 |
+| [数据表格](../10.页面设计/26.PC端Vue3组件说明/50.表格/10.数据表格.md) | 数据表格用于展示和管理大量结构化数据，支持排序、筛选、编辑等操作 |
+| [日历](../10.页面设计/26.PC端Vue3组件说明/50.表格/20.日历.md) | 日历用于展示日期信息，支持日期选择和事件标记 |
+| [组件列表](../10.页面设计/26.PC端Vue3组件说明/50.表格/30.组件列表.md) | 组件列表用于展示多个组件的列表形式，支持多种布局方式 |
+| [表单](../10.页面设计/26.PC端Vue3组件说明/60.表单/10.表单.md) | 表单用于收集用户输入数据，是数据录入的重要组件 |
+| [数字输入框](../10.页面设计/26.PC端Vue3组件说明/60.表单/100.数字输入框.md) | 数字输入框用于收集用户的数字输入，支持数字格式验证和数值范围控制 |
+| [标签输入框](../10.页面设计/26.PC端Vue3组件说明/60.表单/110.标签输入框.md) | 标签输入框用于输入和管理标签，支持标签的添加、删除和编辑 |
+| [滑块](../10.页面设计/26.PC端Vue3组件说明/60.表单/120.滑块.md) | 滑块用于让用户通过拖拽选择数值范围，提供直观的数值选择方式 |
+| [输入框](../10.页面设计/26.PC端Vue3组件说明/60.表单/20.输入框.md) | 输入框用于收集用户的文本输入，支持单行和多行输入模式 |
+| [提及](../10.页面设计/26.PC端Vue3组件说明/60.表单/30.提及.md) | 提及组件用于在输入框中提及用户或内容，支持自动补全和提示 |
+| [单选组](../10.页面设计/26.PC端Vue3组件说明/60.表单/40.单选组.md) | 单选组用于让用户从多个选项中选择一项，确保只能选择一个选项 |
+| [开关](../10.页面设计/26.PC端Vue3组件说明/60.表单/50.开关.md) | 开关用于切换选项的开启或关闭状态，提供直观的开关效果 |
+| [多选组](../10.页面设计/26.PC端Vue3组件说明/60.表单/60.多选组.md) | 多选组用于让用户从多个选项中选择多个选项，支持多选操作 |
+| [评分](../10.页面设计/26.PC端Vue3组件说明/60.表单/70.评分.md) | 评分用于收集用户对内容的评分，通常以星星形式展示 |
+| [时间选择](../10.页面设计/26.PC端Vue3组件说明/60.表单/80.时间选择.md) | 时间选择用于让用户选择特定时间，支持小时和分钟选择 |
+| [上传](../10.页面设计/26.PC端Vue3组件说明/60.表单/90.上传.md) | 上传用于让用户上传文件，支持多种文件格式和大小限制 |
+| [选项卡](../10.页面设计/26.PC端Vue3组件说明/70.选择器/10.选项卡.md) | 选项卡用于在多个内容面板之间切换，节省页面空间，组织相关内容 |
+| [级联选择器](../10.页面设计/26.PC端Vue3组件说明/70.选择器/20.级联选择器.md) | 级联选择器用于处理多层级关联数据的选择，如省市区选择 |
+| [选择器](../10.页面设计/26.PC端Vue3组件说明/70.选择器/30.选择器.md) | 选择器用于让用户从预定义选项中选择一个或多个值，支持单选和多选 |
+| [日期选择器](../10.页面设计/26.PC端Vue3组件说明/70.选择器/40.日期选择器.md) | 日期选择器用于让用户选择特定日期，支持多种日期格式 |
+| [树形选择](../10.页面设计/26.PC端Vue3组件说明/70.选择器/50.树形选择.md) | 树形选择用于在树形结构中选择节点，结合了树形视图和选择器的功能 |
+| [树形视图](../10.页面设计/26.PC端Vue3组件说明/70.选择器/60.树形视图.md) | 树形视图用于展示层级结构数据，支持展开和折叠节点 |
+| [时间选择器](../10.页面设计/26.PC端Vue3组件说明/70.选择器/70.时间选择器.md) | 时间选择器用于让用户选择特定时间，支持多种时间格式 |
+| [穿梭框](../10.页面设计/26.PC端Vue3组件说明/70.选择器/80.穿梭框.md) | 穿梭框用于在两个列表之间移动选项，常用于权限分配等场景 |
+| [对话框](../10.页面设计/26.PC端Vue3组件说明/80.反馈/10.对话框.md) | 对话框用于展示提示信息或获取用户确认，以弹出对话框形式显示内容 |
+| [弹框](../10.页面设计/26.PC端Vue3组件说明/80.反馈/20.弹框.md) | 弹框用于展示额外内容或执行特定操作，以浮动窗口形式显示 |
+| [抽屉](../10.页面设计/26.PC端Vue3组件说明/80.反馈/30.抽屉.md) | 抽屉从页面边缘滑出，用于展示附加内容或操作面板 |
+| [弹出消息](../10.页面设计/26.PC端Vue3组件说明/80.反馈/40.弹出消息.md) | 弹出消息用于展示通知或提示信息，通常短暂显示后自动消失 |
+| [通知](../10.页面设计/26.PC端Vue3组件说明/80.反馈/50.通知.md) | 通知用于展示系统通知信息，通常在页面角落以通知框形式展示 |
+| [弹出框](../10.页面设计/26.PC端Vue3组件说明/80.反馈/60.弹出框.md) | 弹出框用于展示提示信息或工具提示，以弹出框形式显示补充信息 |
+| [Loading加载](../10.页面设计/26.PC端Vue3组件说明/80.反馈/70.Loading加载.md) | Loading加载用于展示加载状态，告知用户当前操作正在处理中 |
+| [文字提示](../10.页面设计/26.PC端Vue3组件说明/80.反馈/80.文字提示.md) | 文字提示用于展示额外的说明信息，当用户悬停或点击时显示提示内容 |
+| [进度条](../10.页面设计/26.PC端Vue3组件说明/80.反馈/90.进度条.md) | 进度条用于展示任务完成进度，以线形或圆形方式显示进度 |
+| [水印](../10.页面设计/26.PC端Vue3组件说明/90.特效/10.水印.md) | 水印用于在页面上添加水印效果，保护内容版权或标识状态 |
+
+## H5端Vue3组件
+
+| 组件名 | 组件简介 |
+|--------|----------|
+| [线性布局](../10.页面设计/28.H5端Vue3组件说明/010.布局/010.线性布局.md) | 线性布局可以水平或垂直方式来排列界面中的组件，适合H5端的线性排布需求 |
+| [栅格布局](../10.页面设计/28.H5端Vue3组件说明/010.布局/030.栅格布局.md) | 栅格布局是H5端用于构建灵活页面布局的组件，基于行和列来划分页面区域 |
+| [下拉菜单](../10.页面设计/28.H5端Vue3组件说明/020.导航/010.下拉菜单.md) | 下拉菜单用于H5端的导航功能，将多个选项收纳在一个菜单中 |
+| [侧边导航](../10.页面设计/28.H5端Vue3组件说明/020.导航/020.侧边导航.md) | 侧边导航用于H5端的侧边栏导航功能，适合移动端导航场景 |
+| [步骤条](../10.页面设计/28.H5端Vue3组件说明/020.导航/030.步骤条.md) | 步骤条用于H5端展示任务的完成步骤，指示当前进度和后续步骤 |
+| [返回顶部](../10.页面设计/28.H5端Vue3组件说明/020.导航/040.返回顶部.md) | 返回顶部用于H5端快速返回页面顶部，提升长页面的浏览体验 |
+| [标签栏](../10.页面设计/28.H5端Vue3组件说明/020.导航/050.标签栏.md) | 标签栏用于H5端的底部标签导航，提供主要功能入口的快速切换 |
+| [导航栏](../10.页面设计/28.H5端Vue3组件说明/020.导航/060.导航栏.md) | 导航栏用于H5端的顶部导航功能，提供页面标题和操作按钮 |
+| [索引栏](../10.页面设计/28.H5端Vue3组件说明/020.导航/070.索引栏.md) | 索引栏用于H5端快速索引定位，通常与列表组件配合使用 |
+| [动作栏](../10.页面设计/28.H5端Vue3组件说明/020.导航/080.动作栏.md) | 动作栏用于H5端展示操作按钮，通常位于页面底部 |
+| [子页面容器](../10.页面设计/28.H5端Vue3组件说明/030.容器/010.子页面容器.md) | 子页面容器用于H5端嵌套子页面，在一个页面中展示另一个页面的内容 |
+| [Iframe](../10.页面设计/28.H5端Vue3组件说明/030.容器/020.Iframe.md) | Iframe组件用于H5端在页面中嵌入其他网页或应用 |
+| [折叠面板](../10.页面设计/28.H5端Vue3组件说明/030.容器/030.折叠面板.md) | 折叠面板用于H5端内容的折叠展示，节省页面空间 |
+| [按钮](../10.页面设计/28.H5端Vue3组件说明/040.展示/010.按钮.md) | 按钮用于H5端触发特定操作，适配移动端的交互方式 |
+| [单元格组](../10.页面设计/28.H5端Vue3组件说明/040.展示/020.单元格组.md) | 单元格组用于H5端展示列表形式的内容，常用于移动端列表展示 |
+| [图片](../10.页面设计/28.H5端Vue3组件说明/040.展示/030.图片.md) | 图片用于H5端展示图像内容，适配移动端图片显示 |
+| [通知栏](../10.页面设计/28.H5端Vue3组件说明/040.展示/040.通知栏.md) | 通知栏用于H5端展示重要通知或信息，通常以顶部横幅形式展示 |
+| [进度条](../10.页面设计/28.H5端Vue3组件说明/040.展示/050.进度条.md) | 进度条用于H5端展示任务完成进度，以线形方式显示进度 |
+| [骨架屏](../10.页面设计/28.H5端Vue3组件说明/040.展示/060.骨架屏.md) | 骨架屏用于H5端在内容加载时展示占位元素，提升用户体验 |
+| [轮播图](../10.页面设计/28.H5端Vue3组件说明/040.展示/070.轮播图.md) | 轮播图用于H5端展示多张图片的轮播效果，支持移动端滑动操作 |
+| [文本](../10.页面设计/28.H5端Vue3组件说明/040.展示/080.文本.md) | 文本组件用于H5端展示静态或动态的文字内容，适配移动端显示 |
+| [文本省略](../10.页面设计/28.H5端Vue3组件说明/040.展示/090.文本省略.md) | 文本省略用于H5端处理过长文本的显示，支持多行文本省略 |
+| [倒计时](../10.页面设计/28.H5端Vue3组件说明/040.展示/110.倒计时.md) | 倒计时用于H5端显示时间倒计时功能，适配移动端显示 |
+| [图标](../10.页面设计/28.H5端Vue3组件说明/040.展示/120.图标.md) | 图标用于H5端展示各种符号和图形，适配移动端图标显示 |
+| [标签](../10.页面设计/28.H5端Vue3组件说明/040.展示/130.标签.md) | 标签用于H5端标记和分类内容，通常以小标签形式展示分类或关键词 |
+| [徽章](../10.页面设计/28.H5端Vue3组件说明/040.展示/140.徽章.md) | 徽章用于H5端展示提示信息，如数字、状态等，适配移动端显示 |
+| [分割线](../10.页面设计/28.H5端Vue3组件说明/040.展示/150.分割线.md) | 分割线用于H5端在内容之间添加分隔，增强页面结构的清晰度 |
+| [空状态](../10.页面设计/28.H5端Vue3组件说明/040.展示/160.空状态.md) | 空状态用于H5端在无数据时展示提示信息，提升用户体验 |
+| [环形进度条](../10.页面设计/28.H5端Vue3组件说明/040.展示/170.环形进度条.md) | 环形进度条用于H5端展示任务完成进度，以圆形方式显示进度 |
+| [列表](../10.页面设计/28.H5端Vue3组件说明/050.表格/010.列表.md) | 列表用于H5端展示数据列表，支持多种列表项布局方式 |
+| [表单](../10.页面设计/28.H5端Vue3组件说明/060.表单/010.表单.md) | 表单用于H5端收集用户输入数据，适配移动端的表单交互 |
+| [签名](../10.页面设计/28.H5端Vue3组件说明/060.表单/020.签名.md) | 签名用于H5端收集用户手写签名，适配移动端触屏签名操作 |
+| [滑块](../10.页面设计/28.H5端Vue3组件说明/060.表单/030.滑块.md) | 滑块用于H5端让用户通过拖拽选择数值范围，适配移动端滑动操作 |
+| [步进器](../10.页面设计/28.H5端Vue3组件说明/060.表单/040.步进器.md) | 步进器用于H5端让用户通过按钮增加或减少数值，适配移动端数值输入 |
+| [开关](../10.页面设计/28.H5端Vue3组件说明/060.表单/050.开关.md) | 开关用于H5端切换选项的开启或关闭状态，适配移动端开关操作 |
+| [复选框组](../10.页面设计/28.H5端Vue3组件说明/060.表单/060.复选框组.md) | 复选框组用于H5端让用户从多个选项中选择多个选项，适配移动端多选操作 |
+| [输入框](../10.页面设计/28.H5端Vue3组件说明/060.表单/070.输入框.md) | 输入框用于H5端收集用户的文本输入，适配移动端输入体验 |
+| [单选组](../10.页面设计/28.H5端Vue3组件说明/060.表单/080.单选组.md) | 单选组用于H5端让用户从多个选项中选择一项，适配移动端单选操作 |
+| [搜索框](../10.页面设计/28.H5端Vue3组件说明/060.表单/090.搜索框.md) | 搜索框用于H5端的搜索功能，提供移动端的搜索交互体验 |
+| [上传](../10.页面设计/28.H5端Vue3组件说明/060.表单/100.上传.md) | 上传用于H5端让用户上传文件，适配移动端文件上传操作 |
+| [评分](../10.页面设计/28.H5端Vue3组件说明/060.表单/110.评分.md) | 评分用于H5端收集用户对内容的评分，适配移动端的评分交互 |
+| [日历](../10.页面设计/28.H5端Vue3组件说明/070.选择器/010.日历.md) | 日历用于H5端展示日期信息，支持日期选择和事件标记 |
+| [日期选择器](../10.页面设计/28.H5端Vue3组件说明/070.选择器/020.日期选择器.md) | 日期选择器用于H5端让用户选择特定日期，适配移动端日期选择 |
+| [选择器](../10.页面设计/28.H5端Vue3组件说明/070.选择器/030.选择器.md) | 选择器用于H5端让用户从预定义选项中选择值，适配移动端选择操作 |
+| [选项卡](../10.页面设计/28.H5端Vue3组件说明/070.选择器/040.选项卡.md) | 选项卡用于H5端在多个内容面板之间切换，适配移动端标签切换 |
+| [时间选择器](../10.页面设计/28.H5端Vue3组件说明/070.选择器/050.时间选择器.md) | 时间选择器用于H5端让用户选择特定时间，适配移动端时间选择 |
+| [分类选择](../10.页面设计/28.H5端Vue3组件说明/070.选择器/060分类选择.md) | 分类选择用于H5端进行分类选择操作，适配移动端分类选择场景 |
+| [级联选择器](../10.页面设计/28.H5端Vue3组件说明/070.选择器/070.级联选择器.md) | 级联选择器用于H5端处理多层级关联数据的选择，适配移动端级联选择 |
+| [对话框](../10.页面设计/28.H5端Vue3组件说明/080.反馈.md/010.对话框.md) | 对话框用于H5端展示提示信息或获取用户确认，适配移动端弹窗交互 |
+| [加载中](../10.页面设计/28.H5端Vue3组件说明/080.反馈.md/020.加载中.md) | 加载中用于H5端展示加载状态，告知用户当前操作正在处理中 |
+| [消息通知](../10.页面设计/28.H5端Vue3组件说明/080.反馈.md/030.消息通知.md) | 消息通知用于H5端展示系统通知信息，适配移动端通知展示 |
+| [气泡弹出框](../10.页面设计/28.H5端Vue3组件说明/080.反馈.md/040.气泡弹出框.md) | 气泡弹出框用于H5端展示提示信息或工具提示，以气泡形式显示补充信息 |
+| [下拉刷新](../10.页面设计/28.H5端Vue3组件说明/080.反馈.md/050.下拉刷新.md) | 下拉刷新用于H5端通过下拉手势刷新页面内容，适配移动端刷新操作 |
+| [滑动单元格](../10.页面设计/28.H5端Vue3组件说明/080.反馈.md/060.滑动单元格.md) | 滑动单元格用于H5端列表项的滑动操作，支持滑动显示额外操作 |
+| [轻提示](../10.页面设计/28.H5端Vue3组件说明/080.反馈.md/070.轻提示.md) | 轻提示用于H5端展示简短的提示信息，通常短暂显示后自动消失 |
+| [动作面板](../10.页面设计/28.H5端Vue3组件说明/080.反馈.md/080.动作面板.md) | 动作面板用于H5端展示操作选项面板，适配移动端操作选择 |
+| [弹出层](../10.页面设计/28.H5端Vue3组件说明/080.反馈.md/090.弹出层.md) | 弹出层用于H5端展示浮层内容，支持多种弹出方向和交互方式 |