qiming/qiming-vite-plugin-design-mode/examples/demo

Design Mode Demo

这是一个完整的示例项目，展示了 @xagi/vite-plugin-design-mode 的所有功能。

功能演示

1. 样式编辑

• 点击任意元素查看编辑面板
• 实时修改 Tailwind CSS 类
• 自动保存到源文件

2. 内容编辑

• 双击文本元素进入编辑模式
• 修改后自动更新源代码
• 支持纯文本内容

3. Iframe 支持

• 在 iframe 中自动隐藏 UI
• 通过 postMessage 通信
• 支持外部设计面板控制

快速开始

# 安装依赖
npm install

# 启动开发服务器
npm run dev

访问 http://localhost:5175 查看演示。

使用说明

1. 启用设计模式：点击右下角的 "Design Mode" 开关
2. 选择元素：点击页面上的任意元素
3. 修改样式：使用右侧面板修改背景、文字颜色、内边距等
4. 编辑内容：双击文本元素直接编辑
5. 查看源码：所有修改会自动保存到对应的 .tsx 文件

页面说明

• Home: 主页，展示核心功能卡片和可编辑示例
• Features: 详细功能展示，包含各种可编辑元素
• Iframe Demo: 演示 iframe 集成和通信机制

技术栈

• React 18
• TypeScript
• Vite 6
• Tailwind CSS 4
• Radix UI
• @xagi/vite-plugin-design-mode

注意事项

• 仅支持静态字符串 className 的修改
• 内容编辑仅支持纯文本节点
• 所有修改会直接写入源文件，建议使用版本控制