代码编辑器组件

概述

CodeEditor 是基于 CodeMirror 6 的代码编辑器组件，支持多种编程语言语法高亮、自动补全、代码折叠等功能，主题自动跟随系统明暗模式。

组件路径：web/apps/web-ele/src/components/zq-form/code-editor/

组件名称：CodeEditor

功能特性

• 多语言支持：JavaScript、TypeScript、Python、SQL、JSON、HTML、CSS、Markdown、XML、YAML
• 语法高亮：基于 CodeMirror 语言包
• 主题切换：支持 light/dark/auto（跟随系统）
• 代码折叠：支持折叠代码块
• 括号匹配：自动高亮匹配的括号
• 自动补全：基于语言的智能补全
• 行号显示：可配置显示/隐藏
• 自动换行：可配置启用/禁用
• 历史记录：支持撤销/重做

Props

属性	类型	默认值	说明
modelValue	string	''	代码内容
language	CodeLanguage	'javascript'	语言类型
theme	'light' | 'dark' | 'auto'	'auto'	主题
readonly	boolean	false	是否只读
disabled	boolean	false	是否禁用
height	number | string	'auto'	高度
minHeight	number | string	'100px'	最小高度
maxHeight	number | string	-	最大高度
placeholder	string	-	占位符
tabSize	number	2	Tab 缩进大小
lineNumbers	boolean	true	是否显示行号
lineWrapping	boolean	false	是否自动换行
foldGutter	boolean	true	是否显示代码折叠
highlightActiveLine	boolean	true	是否高亮当前行
bracketMatching	boolean	true	是否显示括号匹配
autocompletion	boolean	true	是否启用自动补全
indentGuide	boolean	true	是否显示缩进指南

支持的语言

type CodeLanguage =
  | 'javascript'
  | 'typescript'
  | 'python'
  | 'sql'
  | 'json'
  | 'html'
  | 'css'
  | 'markdown'
  | 'xml'
  | 'yaml';

Events

事件	参数	说明
update:modelValue	string	代码内容更新
change	string	代码内容变化
focus	-	编辑器获得焦点
blur	-	编辑器失去焦点
ready	EditorView	编辑器初始化完成

Expose 方法

方法	参数	返回值	说明
getView()	-	EditorView | null	获取 CodeMirror EditorView 实例
focus()	-	void	聚焦编辑器
getValue()	-	string	获取代码内容
setValue(value)	string	void	设置代码内容
format()	-	void	格式化代码（仅支持 JSON）

使用示例

基础用法

<template>
  <CodeEditor v-model="code" language="javascript" />
</template>

<script setup>
import { ref } from 'vue';

const code = ref('console.log("Hello World");');
</script>

JSON 编辑器

<template>
  <CodeEditor
    ref="editorRef"
    v-model="jsonCode"
    language="json"
    :height="300"
    placeholder="请输入 JSON 数据"
  />
  <button @click="formatJson">格式化</button>
</template>

<script setup>
import { ref } from 'vue';

const editorRef = ref();
const jsonCode = ref('{"name":"test","value":123}');

function formatJson() {
  editorRef.value?.format();
}
</script>

SQL 编辑器

<template>
  <CodeEditor
    v-model="sql"
    language="sql"
    :height="200"
    :line-wrapping="true"
    placeholder="请输入 SQL 语句"
  />
</template>

<script setup>
import { ref } from 'vue';

const sql = ref('SELECT * FROM users WHERE status = 1');
</script>

只读模式

<template>
  <CodeEditor
    :model-value="readonlyCode"
    language="python"
    :readonly="true"
    :height="150"
  />
</template>

<script setup>
const readonlyCode = `def hello():
    print("Hello, World!")

hello()`;
</script>

自定义配置

<template>
  <CodeEditor
    v-model="code"
    language="typescript"
    theme="dark"
    :height="400"
    :tab-size="4"
    :line-numbers="true"
    :fold-gutter="true"
    :bracket-matching="true"
    :autocompletion="true"
    @ready="handleReady"
    @change="handleChange"
  />
</template>

<script setup>
import { ref } from 'vue';

const code = ref('');

function handleReady(view) {
  console.log('编辑器已就绪', view);
}

function handleChange(value) {
  console.log('代码已变更', value);
}
</script>

与表单设计器集成

在表单设计器中，该组件作为 code-editor 类型的表单项使用：

{
  "type": "code-editor",
  "field": "sqlQuery",
  "label": "SQL 查询",
  "props": {
    "language": "sql",
    "height": 200,
    "placeholder": "请输入 SQL 语句"
  }
}

技术实现

• 基于 CodeMirror 6 构建
• 使用 Compartment 实现配置动态更新
• 语言包按需加载，减少初始包体积
• 主题通过 @codemirror/theme-one-dark 实现暗色模式