@tuoyuan/code-editor 1.0.0 → 1.1.0

package/README.md

@@ -1,178 +1,176 @@
 # @tuoyuan/code-editor
 
-基于 Monaco Editor 的 Vue3 代码编辑器组件，支持多种编程语言的代码高亮、格式化和压缩功能。
-
-## ✨ 特性
-
-- 🎨 **多语言支持**：JavaScript、JSON、SQL
-- 🌈 **语法高亮**：Monaco Editor 内置语法高亮
-- 📝 **代码格式化**：使用 js-beautify 和 sql-formatter
-- 🗜️ **代码压缩**：一键压缩代码
-- 🎯 **TypeScript 支持**：完整的类型定义
-- 🌓 **主题切换**：浅色、深色、高对比度主题
-- 💾 **保存功能**：支持保存事件和 Ctrl+S 快捷键
-- 📊 **状态栏**：显示光标位置、行数、字符数等统计信息
-- 📋 **复制代码**：一键复制编辑器内容
-- 💿 **下载代码**：导出为文件
-- 🖥️ **全屏模式**：支持全屏编辑，ESC 退出
-- 🔧 **零配置**：内置 Worker 配置，无需额外设置
-- 📦 **轻量级封装**：参考了 devops-platform 和 dashboard-manage.web 的最佳实践
+基于 Monaco Editor 的 Vue 3 代码编辑器组件库，提供三个独立的语言编辑器组件。
+
+## 特性
+
+- 🎨 基于 Monaco Editor（VS Code 编辑器核心）
+- 🌈 支持三种主题：浅色、深色、高对比度
+- 📝 三个独立编辑器：JavascriptEditor、JsonEditor、SqlEditor
+- ✨ 代码格式化和压缩功能
+- 🔧 完全可定制的编辑器选项
+- 📦 开箱即用，无需额外配置
+- 💪 完整的 TypeScript 支持
 
 ## 安装
 
 ```bash
-npm install @tuoyuan/code-editor monaco-editor
-# or
-pnpm add @tuoyuan/code-editor monaco-editor
-# or
-yarn add @tuoyuan/code-editor monaco-editor
+npm install @tuoyuan/code-editor
 ```
 
-## 📖 使用
+## 组件介绍
+
+本组件库提供三个完全独立的编辑器组件，每个组件专注于一种编程语言：
 
-### 基本用法
+- **JavascriptEditor** - JavaScript 代码编辑器
+- **JsonEditor** - JSON 数据编辑器（带验证功能）
+- **SqlEditor** - SQL 查询编辑器
+
+## 快速开始
+
+### JavaScript 编辑器
 
 ```vue
 <template>
-  <CodeEditor
-    v-model="code"
-    language="javascript"
-    height="400px"
-  />
+  <JavascriptEditor v-model="jsCode" height="500px" />
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue'
-import { CodeEditor } from '@tuoyuan/code-editor'
+import { JavascriptEditor } from '@tuoyuan/code-editor'
 import '@tuoyuan/code-editor/dist/style.css'
 
-const code = ref('console.log("Hello World")')
+const jsCode = ref('console.log("Hello World")')
 </script>
 ```
 
-### 完整示例（带所有功能）
+### JSON 编辑器
 
 ```vue
 <template>
-  <div>
-    <!-- 外部操作按钮 -->
-    <div style="margin-bottom: 10px;">
-      <button @click="copyCode">复制代码</button>
-      <button @click="downloadCode">下载代码</button>
-      <button @click="toggleFullscreen">全屏</button>
-    </div>
-
-    <!-- 代码编辑器 -->
-    <CodeEditor
-      ref="editorRef"
-      v-model="code"
-      v-model:language="language"
-      v-model:theme="theme"
-      height="500px"
-      :show-toolbar="true"
-      @change="onChange"
-      @save="onSave"
-      @format="onFormat"
-      @minify="onMinify"
-      @copy="onCopy"
-      @download="onDownload"
-      @fullscreen="onFullscreenChange"
-    />
-  </div>
+  <JsonEditor v-model="jsonCode" height="500px" />
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue'
-import { CodeEditor } from '@tuoyuan/code-editor'
-import type { CodeEditorInstance } from '@tuoyuan/code-editor'
+import { JsonEditor } from '@tuoyuan/code-editor'
 import '@tuoyuan/code-editor/dist/style.css'
 
-const editorRef = ref<CodeEditorInstance>()
-const code = ref('console.log("Hello World")')
-const language = ref<'javascript' | 'json' | 'sql'>('javascript')
-const theme = ref<'vs' | 'vs-dark' | 'hc-black'>('vs')
-
-// 复制代码
-const copyCode = async () => {
-  const success = await editorRef.value?.copyCode()
-  if (success) {
-    alert('代码已复制')
-  }
-}
-
-// 下载代码
-const downloadCode = () => {
-  editorRef.value?.downloadCode('my-code.js')
-}
-
-// 切换全屏
-const toggleFullscreen = () => {
-  editorRef.value?.toggleFullscreen()
-}
-
-// 事件处理
-const onChange = (value: string) => {
-  console.log('代码变化:', value)
-}
-
-const onSave = (value: string) => {
-  console.log('保存代码:', value)
-  // 在这里处理保存逻辑，如保存到服务器
-}
+const jsonCode = ref('{"name": "example"}')
+</script>
+```
 
-const onFormat = (value: string) => {
-  console.log('格式化完成')
-}
+### SQL 编辑器
 
-const onMinify = (value: string) => {
-  console.log('压缩完成')
-}
-
-const onCopy = (value: string) => {
-  console.log('代码已复制')
-}
+```vue
+<template>
+  <SqlEditor v-model="sqlCode" height="500px" />
+</template>
 
-const onDownload = (value: string) => {
-  console.log('代码已下载')
-}
+<script setup>
+import { ref } from 'vue'
+import { SqlEditor } from '@tuoyuan/code-editor'
+import '@tuoyuan/code-editor/dist/style.css'
 
-const onFullscreenChange = (isFullscreen: boolean) => {
-  console.log('全屏状态:', isFullscreen)
-}
+const sqlCode = ref('SELECT * FROM users')
 </script>
 ```
 
-### 语言和主题切换
+## API 文档
+
+### 通用 Props（所有编辑器组件都支持）
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `modelValue` | `string` | `''` | 编辑器内容（v-model） |
+| `theme` | `'vs' \| 'vs-dark' \| 'hc-black'` | `'vs-dark'` | 编辑器主题（浅色/暗黑/高对比度） |
+| `height` | `string` | `'400px'` | 编辑器高度 |
+| `readonly` | `boolean` | `false` | 是否只读 |
+| `showToolbar` | `boolean` | `true` | 是否显示工具栏 |
+| `options` | `editor.IStandaloneEditorConstructionOptions` | `{}` | Monaco Editor 原生配置 |
+
+### 通用 Events（所有编辑器组件都支持）
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| `update:modelValue` | `(value: string)` | 内容变化时触发 |
+| `change` | `(value: string)` | 内容变化时触发 |
+| `blur` | `(value: string)` | 失去焦点时触发 |
+| `format` | `(value: string)` | 格式化代码后触发 |
+| `minify` | `(value: string)` | 压缩代码后触发 |
+| `save` | `(value: string)` | 保存代码时触发（Ctrl+S） |
+
+### JavascriptEditor 专属方法
+
+通过模板引用可以访问以下方法：
+
+| 方法名 | 参数 | 返回值 | 说明 |
+|--------|------|--------|------|
+| `formatJavascript()` | - | `void` | 格式化 JavaScript 代码 |
+| `minifyJavascript()` | - | `void` | 压缩 JavaScript 代码 |
+| `saveJavascript()` | - | `void` | 触发保存事件 |
+| `getValue()` | - | `string` | 获取编辑器内容 |
+| `setValue(value)` | `value: string` | `void` | 设置编辑器内容 |
+| `refresh()` | - | `void` | 刷新编辑器布局 |
+| `editor` | - | `IStandaloneCodeEditor` | Monaco Editor 实例 |
+
+### JsonEditor 专属方法
+
+| 方法名 | 参数 | 返回值 | 说明 |
+|--------|------|--------|------|
+| `formatJson()` | - | `void` | 格式化 JSON 代码 |
+| `minifyJson()` | - | `void` | 压缩 JSON 代码 |
+| `validateJson()` | - | `boolean` | 验证 JSON 格式 |
+| `saveJson()` | - | `void` | 触发保存事件 |
+| `getValue()` | - | `string` | 获取编辑器内容 |
+| `setValue(value)` | `value: string` | `void` | 设置编辑器内容 |
+| `refresh()` | - | `void` | 刷新编辑器布局 |
+| `editor` | - | `IStandaloneCodeEditor` | Monaco Editor 实例 |
+
+**JsonEditor 专属事件：**
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| `validate` | `(isValid: boolean, error?: string)` | JSON 验证时触发 |
+
+### SqlEditor 专属方法
+
+| 方法名 | 参数 | 返回值 | 说明 |
+|--------|------|--------|------|
+| `formatSql()` | - | `void` | 格式化 SQL 代码 |
+| `minifySql()` | - | `void` | 压缩 SQL 代码 |
+| `saveSql()` | - | `void` | 触发保存事件 |
+| `getValue()` | - | `string` | 获取编辑器内容 |
+| `setValue(value)` | `value: string` | `void` | 设置编辑器内容 |
+| `refresh()` | - | `void` | 刷新编辑器布局 |
+| `editor` | - | `IStandaloneCodeEditor` | Monaco Editor 实例 |
+
+## 使用示例
+
+### 基础用法
 
 ```vue
 <template>
-  <CodeEditor
-    v-model="code"
-    v-model:language="currentLanguage"
-    v-model:theme="currentTheme"
-    height="400px"
-  />
+  <div>
+    <h2>JavaScript 编辑器</h2>
+    <JavascriptEditor v-model="jsCode" theme="vs-dark" height="400px" />
+    
+    <h2>JSON 编辑器</h2>
+    <JsonEditor v-model="jsonCode" theme="vs" height="400px" />
+    
+    <h2>SQL 编辑器</h2>
+    <SqlEditor v-model="sqlCode" theme="vs" height="400px" />
+  </div>
 </template>
 
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-import { CodeEditor } from '@tuoyuan/code-editor'
+<script setup>
+import { ref } from 'vue'
+import { JavascriptEditor, JsonEditor, SqlEditor } from '@tuoyuan/code-editor'
 import '@tuoyuan/code-editor/dist/style.css'
 
-const code = ref('')
-const currentLanguage = ref<'javascript' | 'json' | 'sql'>('javascript')
-const currentTheme = ref<'vs' | 'vs-dark' | 'hc-black'>('vs-dark')
-
-// 监听语言变化
-watch(currentLanguage, (newLang) => {
-  console.log('语言已切换为:', newLang)
-  // 可以根据语言加载不同的代码模板
-})
-
-// 监听主题变化
-watch(currentTheme, (newTheme) => {
-  console.log('主题已切换为:', newTheme)
-})
+const jsCode = ref('function hello() {\n  console.log("Hello")\n}')
+const jsonCode = ref('{"name": "张三", "age": 25}')
+const sqlCode = ref('SELECT * FROM users WHERE age > 18')
 </script>
 ```
 
@@ -180,326 +178,395 @@ watch(currentTheme, (newTheme) => {
 
 ```vue
 <template>
-  <CodeEditor
+  <JavascriptEditor
     v-model="code"
-    language="javascript"
     :readonly="true"
-    :show-toolbar="false"
   />
 </template>
+```
 
-<script setup lang="ts">
-import { ref } from 'vue'
-import { CodeEditor } from '@tuoyuan/code-editor'
-import '@tuoyuan/code-editor/dist/style.css'
+### 隐藏工具栏
 
-const code = ref('console.log("只读模式")')
-</script>
+```vue
+<template>
+  <SqlEditor
+    v-model="code"
+    :show-toolbar="false"
+  />
+</template>
 ```
 
-## 📋 API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| modelValue | 代码内容（支持 v-model） | `string` | `''` |
-| language | 编程语言（支持 v-model:language） | `'javascript' \| 'json' \| 'sql'` | `'javascript'` |
-| theme | 编辑器主题（支持 v-model:theme） | `'vs' \| 'vs-dark' \| 'hc-black'` | `'vs'` |
-| height | 编辑器高度 | `string` | `'400px'` |
-| readonly | 只读模式 | `boolean` | `false` |
-| showToolbar | 显示工具栏（包含语言/主题选择器、格式化、压缩按钮） | `boolean` | `true` |
-| options | Monaco Editor 原生配置项 | `editor.IStandaloneEditorConstructionOptions` | `{}` |
-
-**主题说明：**
-- `vs`：浅色主题（白色背景）
-- `vs-dark`：深色主题（黑色背景）
-- `hc-black`：高对比度主题（无障碍模式）
-
-### Events
-
-| 事件名 | 说明 | 回调参数 | 触发时机 |
-| --- | --- | --- | --- |
-| update:modelValue | 代码内容变化（v-model） | `(value: string) => void` | 每次编辑时 |
-| update:language | 语言变化（v-model:language） | `(language: string) => void` | 切换语言时 |
-| update:theme | 主题变化（v-model:theme） | `(theme: string) => void` | 切换主题时 |
-| change | 代码内容变化 | `(value: string) => void` | 每次编辑时 |
-| blur | 编辑器失焦 | `(value: string) => void` | 失去焦点时 |
-| save | 保存代码 | `(value: string) => void` | 点击保存按钮或按下 Ctrl+S |
-| format | 格式化完成 | `(value: string) => void` | 点击格式化按钮后 |
-| minify | 压缩完成 | `(value: string) => void` | 点击压缩按钮后 |
-| copy | 复制代码 | `(value: string) => void` | 调用 copyCode 方法时 |
-| download | 下载代码 | `(value: string) => void` | 调用 downloadCode 方法时 |
-| fullscreen | 全屏状态变化 | `(isFullscreen: boolean) => void` | 进入/退出全屏时 |
-
-### Methods（实例方法）
-
-通过 ref 可以调用组件的实例方法：
+### 主题配置
+
+组件支持三种主题：`vs`（浅色）、`vs-dark`（暗黑）、`hc-black`（高对比度），默认使用暗黑主题。
 
 ```vue
 <template>
-  <CodeEditor ref="editorRef" v-model="code" />
+  <div>
+    <!-- 使用默认暗黑主题 -->
+    <JavascriptEditor v-model="code1" />
+    
+    <!-- 指定浅色主题 -->
+    <JsonEditor v-model="code2" theme="vs" />
+    
+    <!-- 指定高对比度主题 -->
+    <SqlEditor v-model="code3" theme="hc-black" />
+    
+    <!-- 通过变量动态控制主题 -->
+    <button @click="toggleTheme">切换主题</button>
+    <JavascriptEditor v-model="code4" :theme="currentTheme" />
+  </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue'
-import { CodeEditor } from '@tuoyuan/code-editor'
-import type { CodeEditorInstance } from '@tuoyuan/code-editor'
+import { JavascriptEditor, JsonEditor, SqlEditor } from '@tuoyuan/code-editor'
 import '@tuoyuan/code-editor/dist/style.css'
 
-const editorRef = ref<CodeEditorInstance>()
+const code1 = ref('')
+const code2 = ref('')
+const code3 = ref('')
+const code4 = ref('')
+const currentTheme = ref('vs-dark')
+
+const toggleTheme = () => {
+  currentTheme.value = currentTheme.value === 'vs' ? 'vs-dark' : 'vs'
+}
 </script>
 ```
 
-**可用方法列表：**
+### 使用编辑器方法
 
-| 方法名 | 说明 | 参数 | 返回值 |
-| --- | --- | --- | --- |
-| `format()` | 格式化代码 | - | `void` |
-| `minify()` | 压缩代码 | - | `void` |
-| `getValue()` | 获取编辑器内容 | - | `string` |
-| `setValue(value)` | 设置编辑器内容 | `value: string` | `void` |
-| `refresh()` | 刷新编辑器布局 | - | `void` |
-| `copyCode()` | 复制代码到剪贴板 | - | `Promise<boolean>` |
-| `downloadCode(filename?)` | 下载代码为文件 | `filename?: string` | `void` |
-| `toggleFullscreen()` | 切换全屏状态 | - | `void` |
-| `enterFullscreen()` | 进入全屏模式 | - | `void` |
-| `exitFullscreen()` | 退出全屏模式 | - | `void` |
-| `editor` | 获取 Monaco Editor 实例 | - | `editor.IStandaloneCodeEditor` |
+```vue
+<template>
+  <div>
+    <button @click="formatCode">格式化代码</button>
+    <button @click="minifyCode">压缩代码</button>
+    <button @click="saveCode">保存代码</button>
+    
+    <JavascriptEditor ref="jsEditorRef" v-model="jsCode" />
+  </div>
+</template>
 
-**方法示例：**
+<script setup>
+import { ref } from 'vue'
+import { JavascriptEditor } from '@tuoyuan/code-editor'
+import '@tuoyuan/code-editor/dist/style.css'
 
-```typescript
-// 格式化代码
-editorRef.value?.format()
+const jsEditorRef = ref()
+const jsCode = ref('console.log("Hello")')
 
-// 压缩代码
-editorRef.value?.minify()
+const formatCode = () => {
+  jsEditorRef.value.formatJavascript()
+}
 
-// 获取代码内容
-const code = editorRef.value?.getValue()
+const minifyCode = () => {
+  jsEditorRef.value.minifyJavascript()
+}
+
+const saveCode = () => {
+  jsEditorRef.value.saveJavascript()
+}
+</script>
+```
 
-// 设置代码内容
-editorRef.value?.setValue('console.log("new code")')
+### JSON 验证
 
-// 复制代码
-const success = await editorRef.value?.copyCode()
+JsonEditor 组件提供了独特的 JSON 验证功能：
 
-// 下载代码（自动根据语言生成文件名）
-editorRef.value?.downloadCode()
+```vue
+<template>
+  <div>
+    <button @click="validateJsonData">验证 JSON</button>
+    <JsonEditor 
+      ref="jsonEditorRef" 
+      v-model="jsonCode"
+      @validate="handleValidate"
+    />
+  </div>
+</template>
 
-// 下载代码（指定文件名）
-editorRef.value?.downloadCode('my-script.js')
+<script setup>
+import { ref } from 'vue'
+import { JsonEditor } from '@tuoyuan/code-editor'
+import '@tuoyuan/code-editor/dist/style.css'
 
-// 全屏相关
-editorRef.value?.toggleFullscreen()  // 切换全屏
-editorRef.value?.enterFullscreen()   // 进入全屏
-editorRef.value?.exitFullscreen()    // 退出全屏
+const jsonEditorRef = ref()
+const jsonCode = ref('{"name": "example"}')
 
-// 刷新布局（在容器大小变化时使用）
-editorRef.value?.refresh()
+const validateJsonData = () => {
+  const isValid = jsonEditorRef.value.validateJson()
+  console.log('JSON 是否有效:', isValid)
+}
 
-// 获取原生 Monaco Editor 实例
-const monacoEditor = editorRef.value?.editor
+const handleValidate = (isValid, error) => {
+  if (!isValid) {
+    console.error('JSON 验证失败:', error)
+  } else {
+    console.log('JSON 验证成功')
+  }
+}
+</script>
 ```
 
-## ⚙️ 配置
-
-### 样式导入
+### 监听事件
 
-**必须**导入组件样式才能正常显示：
+```vue
+<template>
+  <JavascriptEditor
+    v-model="code"
+    @change="handleChange"
+    @save="handleSave"
+    @format="handleFormat"
+    @minify="handleMinify"
+  />
+</template>
 
-```typescript
+<script setup>
+import { ref } from 'vue'
+import { JavascriptEditor } from '@tuoyuan/code-editor'
 import '@tuoyuan/code-editor/dist/style.css'
-```
 
-### Vite 配置（可选）
+const code = ref('')
 
-如果在使用 Vite 时遇到构建问题，可以在 `vite.config.ts` 中添加以下配置：
+const handleChange = (value) => {
+  console.log('代码已修改:', value)
+}
 
-```typescript
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-
-export default defineConfig({
-  plugins: [vue()],
-  optimizeDeps: {
-    exclude: ['monaco-editor'], // 排除 Monaco Editor 的预构建
-  },
-})
+const handleSave = (value) => {
+  console.log('保存代码:', value)
+  // 这里可以发送到服务器
+}
+
+const handleFormat = (value) => {
+  console.log('代码已格式化:', value)
+}
+
+const handleMinify = (value) => {
+  console.log('代码已压缩:', value)
+}
+</script>
 ```
 
-**注意：** 本组件已经内置了 Monaco Editor 的 Worker 配置，**无需额外配置**，开箱即用！
+### 自定义 Monaco Editor 配置
 
-## 🎨 功能详解
+```vue
+<template>
+  <SqlEditor
+    v-model="code"
+    :options="editorOptions"
+  />
+</template>
 
-### 工具栏
+<script setup>
+import { ref } from 'vue'
+import { SqlEditor } from '@tuoyuan/code-editor'
+import '@tuoyuan/code-editor/dist/style.css'
 
-组件内置工具栏包含以下功能：
+const code = ref('')
 
-**左侧：**
-- **语言选择器**：下拉框切换 JavaScript / JSON / SQL
-- **主题选择器**：下拉框切换 浅色 / 深色 / 高对比度
+const editorOptions = {
+  fontSize: 16,
+  lineHeight: 24,
+  minimap: { enabled: true },
+  wordWrap: 'on',
+}
+</script>
+```
 
-**右侧：**
-- **美化代码按钮**：格式化当前代码
-- **压缩代码按钮**：压缩当前代码（移除空格和换行）
+### 本地存储集成
 
-### 状态栏
+```vue
+<template>
+  <div>
+    <JavascriptEditor
+      v-model="jsCode"
+      v-model:theme="jsTheme"
+      @change="saveJsToLocalStorage"
+    />
+    
+    <JsonEditor
+      v-model="jsonCode"
+      v-model:theme="jsonTheme"
+      @change="saveJsonToLocalStorage"
+    />
+  </div>
+</template>
 
-编辑器底部状态栏显示以下信息：
+<script setup>
+import { ref, onMounted } from 'vue'
+import { JavascriptEditor, JsonEditor } from '@tuoyuan/code-editor'
+import '@tuoyuan/code-editor/dist/style.css'
 
-**左侧：**
-- 当前光标位置（行号、列号）
-- 总行数
-- 总字符数
+const jsCode = ref('')
+const jsTheme = ref('vs')
+const jsonCode = ref('')
+const jsonTheme = ref('vs')
+
+onMounted(() => {
+  // 从本地存储加载
+  jsCode.value = localStorage.getItem('jsCode') || ''
+  jsTheme.value = localStorage.getItem('jsTheme') || 'vs'
+  jsonCode.value = localStorage.getItem('jsonCode') || ''
+  jsonTheme.value = localStorage.getItem('jsonTheme') || 'vs'
+})
 
-**右侧：**
-- 保存按钮（支持 Ctrl+S 快捷键）
-- 当前语言
-- 编码格式（UTF-8）
+const saveJsToLocalStorage = (value) => {
+  localStorage.setItem('jsCode', value)
+  localStorage.setItem('jsTheme', jsTheme.value)
+}
 
-### 代码格式化
+const saveJsonToLocalStorage = (value) => {
+  localStorage.setItem('jsonCode', value)
+  localStorage.setItem('jsonTheme', jsonTheme.value)
+}
+</script>
+```
 
-支持以下语言的代码格式化：
+## TypeScript 支持
 
-- **JavaScript**：使用 `js-beautify`，支持缩进、换行等配置
-- **JSON**：使用 `js-beautify`，自动格式化 JSON 结构
-- **SQL**：使用 `sql-formatter`，格式化 SQL 语句
+组件完全支持 TypeScript，提供完整的类型定义：
 
-### 快捷键
+```typescript
+import { ref } from 'vue'
+import { 
+  JavascriptEditor, 
+  JsonEditor, 
+  SqlEditor 
+} from '@tuoyuan/code-editor'
+import type { 
+  JavascriptEditorInstance, 
+  JsonEditorInstance, 
+  SqlEditorInstance,
+  EditorTheme 
+} from '@tuoyuan/code-editor'
+
+const jsEditorRef = ref<JavascriptEditorInstance>()
+const jsonEditorRef = ref<JsonEditorInstance>()
+const sqlEditorRef = ref<SqlEditorInstance>()
+const theme = ref<EditorTheme>('vs-dark')
+```
 
-| 快捷键 | 功能 |
-| --- | --- |
-| `Ctrl + S` / `Cmd + S` | 保存代码（触发 save 事件） |
-| `ESC` | 退出全屏模式 |
+## 键盘快捷键
 
-### 全屏模式
+- `Ctrl+S` / `Cmd+S`: 保存代码（触发对应的 save 事件）
 
-- 调用 `toggleFullscreen()` 或 `enterFullscreen()` 进入全屏
-- 全屏时编辑器会覆盖整个屏幕（`position: fixed`, `z-index: 9999`）
-- 按 `ESC` 键或调用 `exitFullscreen()` 退出全屏
-- 进入/退出全屏时会自动刷新编辑器布局
+## 代码格式化
 
-## 💡 常见问题
+每个编辑器使用不同的格式化工具：
 
-### 1. Monaco Editor Worker 错误？
+- **JavascriptEditor**: 使用 `js-beautify` 进行格式化
+- **JsonEditor**: 使用 `js-beautify` 进行格式化
+- **SqlEditor**: 使用 `sql-formatter` 进行格式化
 
-本组件已经内置了 Worker 配置，**无需额外配置**。如果仍然看到 worker 相关警告，可以忽略，不影响功能使用。
+## 组件特点对比
 
-### 2. 如何自定义编辑器配置？
+| 特性 | JavascriptEditor | JsonEditor | SqlEditor |
+|------|------------------|------------|-----------|
+| 语言高亮 | ✅ | ✅ | ✅ |
+| 代码格式化 | ✅ | ✅ | ✅ |
+| 代码压缩 | ✅ | ✅ | ✅ |
+| 格式验证 | ❌ | ✅ | ❌ |
+| 主题支持 | ✅ 3种主题 | ✅ 3种主题 | ✅ 3种主题 |
+| 默认主题 | 暗黑 | 暗黑 | 暗黑 |
+| 语言标签颜色 | 黄色 | 蓝色 | 橙色 |
 
-可以通过 `options` 属性传入 Monaco Editor 的原生配置：
+## 浏览器兼容性
 
-```vue
-<CodeEditor
-  v-model="code"
-  :options="{
-    fontSize: 16,
-    lineHeight: 24,
-    minimap: { enabled: true },
-    wordWrap: 'on'
-  }"
-/>
-```
+- Chrome >= 90
+- Firefox >= 88
+- Safari >= 14
+- Edge >= 90
 
-完整配置项参考：[Monaco Editor API](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html)
+## 常见问题
 
-### 3. 如何监听代码变化？
+### 1. 编辑器高度不正确
 
-有两种方式：
+确保编辑器的父容器有明确的高度，或者设置 `height` prop：
 
 ```vue
-<!-- 方式1: v-model -->
-<CodeEditor v-model="code" />
-
-<!-- 方式2: @change 事件 -->
-<CodeEditor @change="handleChange" />
+<JavascriptEditor height="500px" v-model="code" />
 ```
 
-### 4. 如何实现代码保存功能？
+### 2. 如何访问 Monaco Editor 实例？
 
-监听 `save` 事件，在回调中实现保存逻辑：
+通过模板引用访问 `editor` 属性：
 
 ```vue
-<CodeEditor @save="handleSave" />
+<template>
+  <JavascriptEditor ref="editorRef" v-model="code" />
+</template>
 
 <script setup>
-const handleSave = async (code) => {
-  // 保存到服务器
-  await api.saveCode(code)
-  message.success('保存成功')
-}
+import { ref, onMounted } from 'vue'
+
+const editorRef = ref()
+
+onMounted(() => {
+  // 访问 Monaco Editor 实例
+  const monacoInstance = editorRef.value.editor
+  console.log(monacoInstance)
+})
 </script>
 ```
 
-### 5. 如何设置编辑器的初始语言和主题？
+### 3. 如何禁用某些编辑器功能？
+
+通过 `options` prop 传递 Monaco Editor 配置：
 
 ```vue
-<CodeEditor
+<SqlEditor
   v-model="code"
-  language="sql"
-  theme="vs-dark"
+  :options="{
+    minimap: { enabled: false },
+    lineNumbers: 'off',
+    folding: false
+  }"
 />
 ```
 
-### 6. 复制和下载功能如何使用？
+### 4. Worker 错误如何处理？
 
-这些功能需要通过 ref 调用：
+组件已经内置了 Worker 配置，无需额外设置。如果遇到问题，请确保：
 
-```vue
-<template>
-  <CodeEditor ref="editorRef" v-model="code" />
-  <button @click="editorRef?.copyCode()">复制</button>
-  <button @click="editorRef?.downloadCode('script.js')">下载</button>
-</template>
-```
+1. 正确引入了样式文件 `@tuoyuan/code-editor/dist/style.css`
+2. 使用的是现代浏览器
+3. 项目构建工具正确处理了静态资源
 
-### 7. 如何隐藏工具栏？
+### 5. 三个编辑器可以同时使用吗？
 
-设置 `show-toolbar` 为 `false`：
+可以。三个编辑器组件是完全独立的，可以在同一页面中同时使用：
 
 ```vue
-<CodeEditor :show-toolbar="false" />
+<template>
+  <div>
+    <JavascriptEditor v-model="jsCode" />
+    <JsonEditor v-model="jsonCode" />
+    <SqlEditor v-model="sqlCode" />
+  </div>
+</template>
 ```
 
-## 🏗️ 设计参考
-
-本组件参考了以下项目的实现：
-
-1. **devops-platform** (`/src/components/code-editor/`) - Monaco Editor 基础实现
-2. **dashboard-manage.web** (`/src/components/common/Codemirror*`) - UI 设计和功能交互
-
-结合了两者的优点：
-- 使用 Monaco Editor 提供强大的编辑器功能和更好的性能
-- 参考 Codemirror 组件的 UI 设计和用户交互体验
-- 内置 Worker 配置，零配置即可使用
-
-## 📝 版本历史
+### 6. 如何区分不同编辑器的方法？
 
-### 1.0.0 (2024-12)
-- ✅ 初始版本发布
-- ✅ 支持 JavaScript、JSON、SQL 语言
-- ✅ 支持代码高亮、格式化、压缩
-- ✅ 内置工具栏（语言/主题选择器、格式化、压缩）
-- ✅ 底部状态栏（光标位置、统计信息、保存按钮）
-- ✅ 支持主题切换（浅色、深色、高对比度）
-- ✅ 支持复制、下载、全屏功能
-- ✅ 支持 Ctrl+S 保存快捷键
-- ✅ 完整的 TypeScript 类型定义
-- ✅ 内置 Monaco Editor Worker 配置
+每个编辑器都有专属的方法名，避免混淆：
 
-## 📄 License
+- JavaScript: `formatJavascript()`, `minifyJavascript()`, `saveJavascript()`
+- JSON: `formatJson()`, `minifyJson()`, `saveJson()`, `validateJson()`
+- SQL: `formatSql()`, `minifySql()`, `saveSql()`
 
-ISC
+## 许可证
 
-## 🤝 贡献
+MIT
 
-欢迎提交 Issue 和 Pull Request！
+## 更新日志
 
-## 🔗 相关链接
+### 1.0.0 (2024-01-01)
 
-- [Monaco Editor 官方文档](https://microsoft.github.io/monaco-editor/)
-- [Monaco Editor API](https://microsoft.github.io/monaco-editor/api/index.html)
-- [js-beautify](https://github.com/beautify-web/js-beautify)
-- [sql-formatter](https://github.com/sql-formatter-org/sql-formatter)
+- 🎉 首次发布
+- ✨ 提供三个独立编辑器组件：JavascriptEditor、JsonEditor、SqlEditor
+- 🎨 支持三种主题切换
+- 📝 代码格式化和压缩功能
+- 🔍 JSON 格式验证功能
+- 🔧 完整的 TypeScript 支持
+- 📦 开箱即用的 Worker 配置