62 lines
1.4 KiB
Markdown
62 lines
1.4 KiB
Markdown
# Design Mode Demo
|
|
|
|
这是一个完整的示例项目，展示了 `@xagi/vite-plugin-design-mode` 的所有功能。
|
|
|
|
## 功能演示
|
|
|
|
### 1. 样式编辑
|
|
- 点击任意元素查看编辑面板
|
|
- 实时修改 Tailwind CSS 类
|
|
- 自动保存到源文件
|
|
|
|
### 2. 内容编辑
|
|
- 双击文本元素进入编辑模式
|
|
- 修改后自动更新源代码
|
|
- 支持纯文本内容
|
|
|
|
### 3. Iframe 支持
|
|
- 在 iframe 中自动隐藏 UI
|
|
- 通过 postMessage 通信
|
|
- 支持外部设计面板控制
|
|
|
|
## 快速开始
|
|
|
|
```bash
|
|
# 安装依赖
|
|
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 的修改
|
|
- 内容编辑仅支持纯文本节点
|
|
- 所有修改会直接写入源文件，建议使用版本控制
|