feat: 添加可视化配置器详细设计

- 新增可视化配置器架构设计（品牌配置区、布局配置区、模板选择区）
- 新增交互设计（拖拽交互、实时预览、智能提示、快捷操作）
- 新增配置器组件设计（Logo上传、颜色选择器、模块顺序、模板选择）
- 新增配置器技术实现（前端技术栈、状态管理、预览渲染、配置导出）
- 更新开发优先级，将可视化配置器核心功能提升为P0

docs/plans/2026-03-07-ui-customization-design.md

@@ -66,7 +66,88 @@ UI模版定制功能分为三个核心模块：
 
 ---
 
-## 五、数据流设计
+## 五、可视化配置器设计
+
+### 5.1 配置器架构
+
+可视化配置器采用组件化架构，分为三个核心区域：
+
+**品牌配置区**：左侧面板提供品牌元素的上传和设置，包括Logo上传组件（支持拖拽上传、实时预览、自动裁剪）、颜色选择器组件（提供色板、自定义颜色、RGB/HEX输入）、背景图上传组件（支持多图上传、轮播设置）、品牌信息输入（品牌名称、Slogan）。所有组件都支持实时预览，配置立即反映在右侧预览区。
+
+**布局配置区**：中间面板提供布局调整功能，包括模块顺序组件（拖拽排序、分组管理、搜索过滤）、模块开关组件（开关控制、批量操作、保存提示）、首页布局组件（布局类型选择、快捷入口配置、轮播图设置）、导航菜单组件（菜单树形展示、添加/编辑/删除、图标选择）。布局调整支持撤销/重做，防止误操作。
+
+**模板选择区**：右侧面板提供模板浏览和选择功能，包括模板网格组件（缩略图展示、类型筛选、收藏标记）、模板详情组件（大图预览、功能说明、一键应用）、模板对比组件（并排对比、差异高亮、切换建议）。模板选择支持快速切换，无需重新配置品牌元素。
+
+### 5.2 交互设计
+
+**拖拽交互**：模块顺序调整使用原生HTML5拖拽API，提供视觉反馈（拖拽时高亮、放置时动画、冲突时提示）。拖拽支持跨区域移动，可以隐藏的模块拖到显示区域，或反之。拖拽过程中显示放置指示器，明确可放置位置。
+
+**实时预览**：所有配置变更都实时反映在预览区，包括Logo更换、颜色调整、布局变更、模板切换。预览区模拟真实页面结构，展示不同设备尺寸（手机、平板、桌面）的效果。预览支持全屏模式，方便查看整体效果。
+
+**智能提示**：配置器提供上下文相关的提示和建议，包括品牌一致性提示（颜色搭配建议、Logo尺寸建议）、布局优化提示（模块分组建议、隐藏建议）、模板推荐提示（根据行业推荐模板）。提示以气泡形式展示，点击可展开详细说明。
+
+**快捷操作**：提供常用操作的快捷入口，包括一键重置（恢复默认配置）、一键预览（全屏预览）、一键保存（保存配置）、一键发布（发布配置到生产环境）。快捷操作支持键盘快捷键，提升操作效率。
+
+### 5.3 配置器组件
+
+**Logo上传组件**：
+- 支持拖拽上传和点击上传
+- 实时预览Logo效果
+- 自动生成多种尺寸缩略图
+- 支持Logo裁剪和旋转
+- 提供Logo尺寸建议和最佳实践提示
+
+**颜色选择器组件**：
+- 提供预设色板（包含流行配色方案）
+- 支持自定义颜色输入（RGB/HEX格式）
+- 实时显示颜色对比效果
+- 支持颜色历史记录（最近使用的颜色）
+- 提供颜色搭配建议（基于色彩理论）
+
+**模块顺序组件**：
+- 拖拽式排序界面
+- 支持模块分组管理
+- 提供搜索和过滤功能
+- 支持批量操作（全选、反选、批量隐藏）
+- 显示模块依赖关系提示
+
+**模板选择组件**：
+- 网格式模板展示（响应式布局）
+- 支持模板类型筛选（简约/运动/科技/高端）
+- 显示模板缩略图和预览图
+- 支持模板收藏和快速切换
+- 提供模板应用前的确认对话框
+
+### 5.4 配置器技术实现
+
+**前端技术栈**：
+- 框架：Vue 3 / React 18
+- 拖拽库：Vue Draggable / React DnD
+- 颜色选择器：vue-color-picker / react-color
+- 预览组件：iframe沙箱或虚拟DOM渲染
+- 状态管理：Pinia / Redux
+
+**配置器状态管理**：
+- 使用响应式状态存储当前配置
+- 配置变更自动触发预览更新
+- 支持配置快照和恢复
+- 实现撤销/重做功能栈
+
+**预览渲染机制**：
+- 使用虚拟DOM模拟页面渲染
+- 注入CSS变量和布局配置
+- 支持多设备尺寸预览切换
+- 预览更新使用防抖优化性能
+
+**配置导出功能**：
+- 支持导出当前配置为JSON文件
+- 支持导入配置文件恢复配置
+- 导出配置包含版本信息和元数据
+- 支持配置分享和备份
+
+---
+
+## 六、数据流设计
 
 UI模版定制功能的数据流分为三个主要流程：
 
@@ -115,16 +196,20 @@ UI模版定制功能需要以下测试用例来确保质量：
 ### 8.1 开发优先级
 
 **P0（必须实现）**：
+- 可视化配置器核心功能（品牌配置区、布局配置区、模板选择区）
 - 品牌定制基础功能（Logo上传、颜色设置）
 - 布局调整基础功能（模块顺序、模块隐藏）
 - 配置保存和加载机制
 - 预设模板基础功能（模板选择、模板应用）
+- 实时预览功能
+- 拖拽交互和快捷操作
 
 **P1（重要实现）**：
 - 配置历史和回滚功能
-- 实时预览功能
 - 模板收藏功能
 - 配置缓存机制
+- 配置导出和导入功能
+- 智能提示和建议
 
 **P2（可选实现）**：
 - 自定义CSS覆盖