组件测试器

开发调试与 UI 验证的"试验场"，集中展示、测试和验证应用中各种 UI 组件的表现。

功能要点

• 组件展示 — 集中展示各类 UI 组件（包括自定义组件和 Element Plus 组件）的使用示例，快速了解组件能力。
• 交互测试 — 手动测试组件的交互行为和边界情况，确保功能正确性。
• 主题验证 — 验证应用在不同主题（亮色/暗色）下的颜色、样式和布局是否一致。
• 性能基准 — 内置存储性能测试方案，对比不同序列化/读写策略的耗时差异。
• 窗口分离体系演示 — 真实体验 useDetachable 与 useDetachedManager 的协同工作流程。

快速上手

1. 在侧边栏找到 组件测试器 图标（烧瓶图标），点击进入。
2. 默认打开 原生元素 标签页，可以查看标题、文本、按钮、输入框等 HTML 原生元素在当前主题下的样式效果。
3. 依次切换其他标签页，逐一测试各类组件的功能和外观。
4. 在 消息提示 标签页中，点击各按钮可触发不同类型的消息弹窗和通知。
5. 在 存储性能测试 标签页中，点击 运行全部方案 即可对比六种不同存储策略的性能数据。

功能详解

原生元素

展示所有 HTML 原生标签在当前主题下的样式表现，包括：

• 标题层级 h1 ~ h6
• 文本元素（段落、加粗、斜体、链接、代码块、引用块等）
• 按钮（默认/主要/成功/圆角/禁用/不同尺寸）
• 输入框（文本、密码、数字、邮箱、日期、颜色选择、文件、范围滑块）
• 选择元素（下拉框、文本域）
• 复选框与单选框（含选中状态、禁用状态）
• 列表（有序/无序/描述列表）
• 表格、详情折叠、进度条、字段集

用途：快速查看全局样式是否统一、浏览器默认样式是否被正确覆盖。

ElementPlus 组件

展示 Element Plus 官方组件的完整使用示例，包括：

• Button（类型、朴素、圆角、圆形、禁用、加载、尺寸）
• Input（清除按钮、图标、密码、文本域）
• Select（单选、可清空、多选）
• Switch、Radio、Checkbox（含按钮样式）
• DatePicker（日期、日期时间、日期范围）
• Slider（含输入框、范围模式）
• Tag、Progress（含环形、仪表盘）、Badge
• Card（自定义 InfoCard 与原生 el-card 对比）
• Collapse、Timeline、Table、Pagination、Steps
• Dialog（BaseDialog 与 el-dialog 对比）、Drawer
• Popconfirm、Tooltip、Popover、Tree、Loading、Skeleton、Empty、Result

提示：部分组件（如 Dialog）展示了自定义封装（BaseDialog）与原生组件（el-dialog）的对比，便于评估封装效果。

窗口分离与同步

演示 窗口分离体系 的核心能力：

• 同步数据演示 — 点击"分离组件到新窗口"后，组件会在悬浮窗中运行；在悬浮窗中修改计数器、文本、深度对象等数据，主窗口的预览卡片会实时同步更新。
• 远程 Action (RPC) — 分离窗口可通过 Action 机制触发主窗口的逻辑（如弹出通知），实现跨窗口通信。
• 布局预览 — 展示 ComponentHeader 在 top、bottom、left、right 四种位置下的样式与拖拽分离效果。

消息提示

测试全局消息反馈系统的各项功能：

类别	说明
ElMessage	Element Plus 标准消息提示（成功/信息/警告/错误），含 HTML 内容、可关闭、居中、分组、长文本
CustomMessage	项目封装的 customMessage，自动避开自定义标题栏的 offset
ElNotification	通知弹窗（支持四个角落位置、不自动关闭、HTML 内容、长文本）
ElMessageBox	消息弹框（Alert / Confirm / Prompt），含自定义图标、HTML 内容、长文本
通知系统	使用 useNotification 的持久化消息系统，支持通知中心面板、全部标记已读、清空历史

场景：开发者在添加新的消息提示时，可在此验证其在不同场景下的表现。

主题色板

动态展示当前主题下的所有 CSS 颜色变量：

• 主题色系 — Primary / Success / Warning / Danger / Info 各 9 级 Light 变体
• 文本颜色 — Primary / Regular / Secondary / Placeholder
• 边框颜色 — Darker / Dark / Base / Light / Lighter
• 填充颜色 — Darker / Dark / Base / Light / Lighter
• 背景颜色 — Base / Page / Overlay
• 遮罩颜色 — Mask / Extra Light

注意：切换主题（亮色/暗色）后色板会自动刷新，可用于验证主题色彩系统的一致性。

文档查看器

验证 DocumentViewer 组件对不同内容类型的渲染能力：

• Markdown 预览 — 从字符串渲染带代码块、引用、列表等内容的 Markdown
• JSON 源码视图 — 展示 JSON 格式化后的源码（带编辑器引擎切换）
• 纯文本视图 — 简单文本文件预览
• 二进制文件占位符 — 遇到不可渲染的二进制格式时优雅降级
• 空内容 — 空白文件的状态展示
• 文件不存在 — 模拟加载失败时的错误提示

存储性能测试

对比六种不同序列化与读写策略的性能差异，适用于评估聊天记录等大数据的持久化方案：

方案	描述	关键差异
A	Vec<u8> + 美化 JSON	传统 IPC 方式，有数据膨胀
B	文本直传 + 紧凑 JSON	零膨胀，String 直传
C	伪二进制 (Vec<u8>)	读取时经历额外解码
D	直传写入 + 二进制读取	读取端零膨胀
E	增量更新 (JSON Patch)	只传输变更部分，网络友好
F	生产环境模拟 (plugin-fs)	模拟实际业务中的数据清洗 + 标准通道

操作：调整"消息数量"和"单条长度"后点击"运行全部方案"，结果以表格展示各方案的耗时对比，并标注相对基准的百分比差异。

下载测试

测试文件下载流程与拖放功能：

• 下载模式 — 支持"自动（静默）"和"手动（另存为）"两种模式
• 预设测试 — 快速测试文本、JSON、图片和 10MB 大文件下载
• 拖放测试 — 将文件拖入 DropZone 区域后，可重新下载该文件
• 下载历史 — 右侧面板展示 DownloadManager 的历史记录

高级用法

验证新组件的主题兼容性

当你开发了一个新的自定义组件，不确定它在暗色模式和透明度设置下是否兼容，可以：

1. 将新组件临时添加到 原生元素 或 ElementPlus 组件 标签页中。
2. 点击右上角的主题切换，观察组件在暗色模式下的表现。
3. 在设置中调整"界面质感"（透明度、模糊强度），确认组件能正确响应变化。

评估存储方案

在开发涉及大量数据持久化的功能（如聊天记录存档）时：

1. 进入 存储性能测试 标签页。
2. 调整"消息数量"和"单条长度（KB）"来模拟真实数据规模。
3. 点击"运行全部方案"，从结果表格中找出总耗时最低和文件体积最小的方案。
4. 展开方案行查看详细步骤，定位性能瓶颈。

调试窗口分离逻辑

如果发现某个可分离组件在分离后状态不同步：

1. 进入 窗口分离与同步 标签页。
2. 点击"分离组件到新窗口"，在悬浮窗中修改同步数据。
3. 观察主窗口的预览卡片是否实时更新；如果未更新，检查 useStateSyncEngine 的 stateKey 和 autoPush 配置。
4. 点击"触发主窗口通知"验证跨窗口 Action (RPC) 是否正常工作。

常见问题

为什么点击按钮没有弹出消息提示？

某些消息测试（如 ElMessage）默认会自动关闭。如果网络卡顿或操作过快可能错过显示。可以尝试：

• 点击 可关闭消息 按钮（设置了 duration: 0，不会自动关闭）
• 检查浏览器/应用是否处于焦点状态

存储性能测试的"预计大小"和实际文件大小不一致？

"预计大小"是基于消息数量 × 单条长度的粗略估算，实际数据因 JSON 序列化后的字段名称、嵌套结构等因素会有所差异。最终以结果表中的"文件大小"列显示为准。

文档查看器测试中的"文件不存在"显示空白？

这是正常行为。DocumentViewer 在检测到文件无法读取时会显示友好的错误提示。如果你的测试文件路径有效但依然显示空白，请检查路径中的文件名和扩展名是否正确。

窗口分离后，修改数据主窗口没有同步？

请确认：

• 分离窗口的 stateKey 与主窗口的 useStateSyncEngine 配置一致（默认为 component-tester:sync-demo-data）。
• autoPush 和 autoReceive 都设置为 true。
• 深度嵌套的对象（如 nested.b.c）修改后会通过 requestUpdateSyncData 触发 Action 同步。

下载测试中的"自动模式"和"手动模式"有什么区别？

• 自动模式：将文件保存到设置的默认下载目录，无需用户确认。
• 手动模式：弹出原生系统"另存为"对话框，让用户选择保存位置和文件名。两者在下载历史中都会记录。