# code-pen-clone

**Repository Path**: jiangrunyu/code-pen-clone

## Basic Information

- **Project Name**: code-pen-clone
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-15
- **Last Updated**: 2025-04-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端在线代码编辑器

一个基于Vue 3和Monaco Editor的前端在线代码编辑器，支持HTML、CSS和JavaScript代码的实时编辑和预览。

## 功能特点

- 基于Monaco Editor（VS Code的编辑器核心）提供专业的代码编辑体验
- 支持HTML、CSS和JavaScript的实时预览
- 选项卡式设计，便于切换不同代码类型
- 代码高亮和语法检查
- 响应式布局设计
- 加载状态和错误提示

## 项目结构

```
src/
├── components/
│   └── codeEditor/
│       ├── components/
│       │   ├── codeBox.vue      # 代码编辑器组件
│       │   └── previewBox.vue   # 代码预览组件
│       └── index.vue            # 主容器组件
```

## 实现过程记录

### 1. 创建预览组件

首先创建了一个预览组件（previewBox.vue），用于在iframe中实时渲染代码：

- 使用iframe作为渲染容器，确保代码在独立环境中运行
- 通过Blob和URL.createObjectURL创建临时URL，避免跨域问题
- 添加加载和错误状态提示，提升用户体验
- 实现代码错误捕获和展示功能

**测试结果**：预览组件可以正确接收HTML、CSS和JavaScript代码，并在iframe中渲染。加载动画和错误提示功能正常工作。

### 2. 修改主容器组件

对主容器组件（index.vue）进行修改，添加了选项卡切换功能，并整合预览组件：

- 添加HTML、CSS和JavaScript选项卡
- 实现选项卡切换逻辑
- 集成预览组件到右侧区域
- 提供默认代码模板

**测试结果**：选项卡切换功能正常，可以在不同代码类型间切换。默认代码模板正确显示在编辑器中。

### 3. 实现编辑器与预览的双向绑定

修改代码编辑器组件（codeBox.vue），添加代码更新事件：

- 添加onDidChangeModelContent事件监听
- 实现代码双向绑定
- 优化代码赋值逻辑，避免循环更新

**测试结果**：编辑器中的代码变更会实时更新到预览区域，实现了实时预览功能。编辑、切换选项卡、预览功能均正常工作。

### 4. 添加运行按钮功能

实现"运行"按钮的实际功能，使其可以强制刷新预览：

- 通过时间戳属性触发预览组件的更新
- 优化刷新机制，确保预览内容最新

**测试结果**：点击"运行"按钮后，预览区域会刷新显示最新代码的运行结果，即使代码没有变化。

### 5. 添加控制台输出捕获功能

添加控制台输出捕获和显示功能，使预览中的console输出能够显示在界面上：

- 重写iframe中的console方法
- 使用postMessage实现跨iframe通信
- 添加控制台输出面板和日志展示
- 支持不同类型的日志（log、error、warn、info）

**测试结果**：在预览代码中使用console.log等方法输出的内容会显示在控制台面板中，支持切换显示/隐藏控制台面板。

### 6. 添加响应式预览功能

添加设备预览模式切换功能，使用户可以在不同设备尺寸间切换：

- 实现响应式、桌面端、平板、手机等多种预览模式
- 添加设备选择工具栏
- 按照不同设备尺寸调整预览区域大小

**测试结果**：可以切换不同设备预览模式，预览效果会根据设备尺寸调整，方便测试响应式设计。

### 7. 优化页签样式和布局

根据用户反馈，对页签样式进行了调整：

- 将页签从顶部中间移至顶部左侧
- 修改页签样式为文件选项卡形式，更符合代码编辑器风格
- 为每种文件类型添加特定图标，提升辨识度
- 使用实际文件名（index.html、style.css、main.js）作为选项卡标题

**测试结果**：新的页签样式更贴近主流代码编辑器（如VS Code）的UI风格，提升了用户体验。

### 8. 简化预览功能

为了提高易用性，简化了预览功能：

- 移除了响应式预览和设备尺寸切换功能
- 采用单一预览模式，使界面更简洁
- 保留了控制台输出功能，以便调试代码

**测试结果**：简化后的预览更加直观，减少了界面复杂度，用户可以专注于代码编写和基本预览功能。

### 9. 添加预览控制功能

根据用户需求，添加了预览控制功能：

- 添加预览工具栏，包含自动刷新开关和手动刷新按钮
- 实现自动刷新开关，控制代码变更时是否自动更新预览
- 添加手动刷新按钮，允许用户手动触发预览刷新
- 优化预览刷新逻辑，减少不必要的刷新

**测试结果**：用户可以控制预览的刷新行为，关闭自动刷新后，需手动点击刷新按钮更新预览，提升了用户体验和性能。

## 待完善的功能

- 代码导入/导出功能
- 代码保存至本地或云端
- 多文件支持
- 自定义主题
- 分享代码功能
- 响应式设计优化，适配移动设备

## 使用说明

1. 在左侧编辑器中编写HTML、CSS或JavaScript代码
2. 通过顶部选项卡切换不同的代码类型
3. 右侧区域会实时显示代码运行效果
4. 点击"运行"按钮强制刷新预览
5. 使用预览区域顶部的开关控制是否自动刷新预览
6. 关闭自动刷新后，可通过刷新按钮手动更新预览
7. 通过控制台按钮查看代码运行过程中的console输出

## 技术栈

- Vue 3
- Monaco Editor
- JavaScript/CSS/HTML

## 安装

```bash
# 使用 pnpm 安装依赖
pnpm install
```

## 开发

```bash
# 启动开发服务器
pnpm dev
```

## 构建

```bash
# 构建生产版本
pnpm build
```

## 预览

```bash
# 预览构建后的应用
pnpm preview
```

## 使用指南

1. **选择编辑模式**：在顶部导航栏选择 HTML/CSS/JS 或 Vue 组件编辑模式。
2. **编写代码**：在相应的面板中编写代码。
3. **实时预览**：代码变更将自动在预览面板中显示。
4. **调整布局**：通过拖动分隔线调整各个面板的大小。
5. **自定义设置**：点击顶部的设置按钮，可以调整编辑器主题和字体大小等。

## 开源协议

MIT