BizCodeEditor 代码编辑器

基于 CodeMirror 6 的代码编辑器：JSON / SQL / JavaScript / YAML 语法高亮、行号、只读、自动换行、缩进宽度、one-dark 暗色主题、JSON 一键格式化。

规则引擎表达式、低代码平台脚本、SQL 查询控制台、系统参数 JSON 配置等场景；与 BizJsonViewer（只读展示）互补。CodeMirror 系包为可选 peer 依赖——首次挂载动态 import，未安装时组件内显示安装指引：

npm i codemirror @codemirror/lang-json @codemirror/lang-sql @codemirror/lang-javascript @codemirror/lang-yaml @codemirror/theme-one-dark

按语言最小化安装即可（只用 JSON 时装 codemirror + @codemirror/lang-json）；@codemirror/theme-one-dark 仅 dark 模式需要。

基础用法

编辑器加载中…

内容随输入实时同步（v-model）

JSON 系统参数编辑：v-model 实时同步，language="json" 启用语法高亮与括号折叠。

<script setup lang="ts">
/** 基础用法：JSON 参数编辑（v-model + change 同步），需安装 codemirror 系可选 peer */
import { ref } from 'vue'
import { BizCodeEditor } from 'vue3-ep-biz-lib'

const code = ref(`{
  "appName": "数据中台",
  "retry": { "max": 3, "backoffMs": 500 },
  "features": ["audit", "cache"]
}`)

const onChange = (value: string): void => {
  console.log('change', value)
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 8px">
    <BizCodeEditor v-model="code" language="json" :height="200" @change="onChange" />
    <div style="font-size: 12px; color: var(--el-text-color-secondary)">内容随输入实时同步（v-model）</div>
  </div>
</template>

显示代码

SQL 只读与 JSON 格式化

编辑器加载中…

编辑器加载中…

readonly 只读展示固化查询（光标交互禁用、line-wrap 关闭长行不折叠）；expose 的 format() 对 JSON 一键美化，缩进取 tab-size。

<script setup lang="ts">
/** SQL 只读与 JSON 格式化：readonly 展示查询语句；format 一键美化（缩进取 tab-size） */
import { ref } from 'vue'
import { BizButton, BizCodeEditor } from 'vue3-ep-biz-lib'

const sql = ref(`-- 只读态：报表平台固化查询，禁止修改
SELECT dept, COUNT(*) AS total, SUM(amount) AS gmv
FROM biz_order
WHERE created_at >= '2026-09-01'
  AND status = 'PAID'
GROUP BY dept
ORDER BY gmv DESC;`)

const json = ref(`{"env":"prod","limit":500,"tags":["core","paid"],"timeout":30}`)
const editorRef = ref<{ format: () => boolean } | null>(null)
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <BizCodeEditor v-model="sql" language="sql" readonly :height="170" :line-wrap="false" />

    <div style="display: flex; flex-direction: column; gap: 8px">
      <BizButton size="small" style="align-self: flex-start" @click="editorRef?.format()">格式化 JSON</BizButton>
      <BizCodeEditor ref="editorRef" v-model="json" language="json" :height="150" :tab-size="2" />
    </div>
  </div>
</template>

显示代码

程序化读写

编辑器加载中…

setValue / getValue 经组件 ref 完成程序化读写；外部 v-model 变更也会同步进编辑器（内容一致时跳过）。

<script setup lang="ts">
/** 程序化读写：setValue / getValue expose——重置示例、读取长度均经组件实例完成 */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizCodeEditor } from 'vue3-ep-biz-lib'
import type { BizCodeEditorInstance } from 'vue3-ep-biz-lib'

const editor = ref<BizCodeEditorInstance | null>(null)

const SAMPLE = `{
  "env": "prod",
  "limit": 500,
  "tags": ["core", "paid"]
}`

const code = ref(SAMPLE)

const reset = (): void => {
  editor.value?.setValue(SAMPLE)
}

const readLength = (): void => {
  const text = editor.value?.getValue() ?? ''
  ElMessage.info(`当前内容 ${text.length} 字符 / ${text.split('\n').length} 行`)
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 8px">
    <div style="display: flex; gap: 8px">
      <ElButton size="small" @click="reset">重置示例</ElButton>
      <ElButton size="small" @click="readLength">读取内容</ElButton>
    </div>
    <BizCodeEditor ref="editor" v-model="code" language="json" :height="170" />
  </div>
</template>

显示代码

缩进与换行

tab-size=2，自动换行开启（长行折叠）

编辑器加载中…

tab-size=4，自动换行关闭（长行横向滚动）

编辑器加载中…

tab-size 2 对 4 对比；line-wrap 关闭后长行横向滚动（URL 等单行内容不折叠）。

<script setup lang="ts">
/** 缩进与换行：tab-size 2 对 4、line-wrap 关闭后长行横向滚动 */
import { ref } from 'vue'
import { BizCodeEditor } from 'vue3-ep-biz-lib'

const compact = ref(`server:
  host: 0.0.0.0
  port: 8080
logging:
  level: info`)

const wide = ref(`database:
    url: jdbc:mysql://prod-db.internal:3306/biz_order?useSSL=true&serverTimezone=Asia/Shanghai&characterEncoding=utf8
    pool:
        maxActive: 50
        maxWait: 30000`)
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <div style="display: flex; flex-direction: column; gap: 6px">
      <span style="font-size: 12px; color: var(--el-text-color-secondary)">tab-size=2，自动换行开启（长行折叠）</span>
      <BizCodeEditor v-model="compact" language="yaml" :tab-size="2" :height="130" />
    </div>
    <div style="display: flex; flex-direction: column; gap: 6px">
      <span style="font-size: 12px; color: var(--el-text-color-secondary)">tab-size=4，自动换行关闭（长行横向滚动）</span>
      <BizCodeEditor v-model="wide" language="yaml" :tab-size="4" :line-wrap="false" :height="130" />
    </div>
  </div>
</template>

显示代码

事件流

编辑器加载中…

在编辑器中输入 / 切换焦点，事件在此打点…

ready / change / focus / blur 事件打点——适合做「配置已修改未保存」的脏检查提醒。

<script setup lang="ts">
/** 事件流：ready / change / focus / blur 打点展示（最近 6 条，最新在上） */
import { ref } from 'vue'
import { BizCodeEditor } from 'vue3-ep-biz-lib'

interface EventLog {
  time: string
  name: string
  detail: string
}

const logs = ref<EventLog[]>([])

const push = (name: string, detail = ''): void => {
  const now = new Date()
  const time = `${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}.${String(now.getMilliseconds()).padStart(3, '0')}`
  logs.value = [{ time, name, detail }, ...logs.value].slice(0, 6)
}

const code = ref('{\n  "editable": true\n}')
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 8px">
    <BizCodeEditor
      v-model="code"
      language="json"
      :height="150"
      @ready="push('ready', '依赖加载完成')"
      @change="(value: string) => push('change', `${value.length} 字符`)"
      @focus="push('focus')"
      @blur="push('blur')"
    />
    <div
      style="
        border: 1px solid var(--el-border-color-lighter);
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 12px;
        min-height: 132px;
        color: var(--el-text-color-regular);
      "
    >
      <div v-if="logs.length === 0" style="color: var(--el-text-color-placeholder)">在编辑器中输入 / 切换焦点，事件在此打点…</div>
      <div v-for="log in logs" :key="log.time + log.name" style="display: flex; gap: 12px; line-height: 22px">
        <span style="color: var(--el-text-color-secondary); font-variant-numeric: tabular-nums">{{ log.time }}</span>
        <span style="color: var(--el-color-primary); min-width: 56px">{{ log.name }}</span>
        <span>{{ log.detail }}</span>
      </div>
    </div>
  </div>
</template>

显示代码

暗色主题与多语言

编辑器加载中…

编辑器加载中…

dark 启用 one-dark；JavaScript / YAML 等语言按需加载对应语法包。

<script setup lang="ts">
/** 暗色主题与 YAML：dark 启用 one-dark（未安装时回退亮色）；脚本 / 配置多语言高亮 */
import { ref } from 'vue'
import { BizCodeEditor } from 'vue3-ep-biz-lib'

const script = ref(`// 告警规则脚本：返回 true 触发告警
function evaluate(ctx) {
  const ratio = ctx.failed / Math.max(ctx.total, 1)
  return ratio > 0.05 || ctx.latencyP99 > 800
}`)

const yaml = ref(`# 部署描述
image: registry.local/biz-api:1.8.2
replicas: 3
resources:
  cpu: "2"
  memory: 4Gi
env:
  - name: TZ
    value: Asia/Shanghai`)
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <BizCodeEditor v-model="script" language="javascript" dark :height="160" />
    <BizCodeEditor v-model="yaml" language="yaml" :height="190" />
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
model-value / v-model	string	''	代码内容
language	'text' | 'json' | 'sql' | 'javascript' | 'yaml'	'text'	语言 / 语法高亮
readonly	boolean	false	只读（含光标交互禁用）
height	number | string	240	编辑器高度（数字按 px）
dark	boolean	false	暗色主题（one-dark；未安装对应包时回退亮色并告警）
tab-size	number	2	缩进空格数（同时作为 JSON 格式化缩进）
line-wrap	boolean	true	是否自动换行（长行折叠）

Events

事件名	参数	说明
change	(value: string)	内容变更（含格式化 / 程序化写入）
update:model-value	(value: string)	v-model 更新
focus / blur	—	编辑器聚焦 / 失焦
ready	—	依赖加载完成、编辑器就绪后触发一次

Expose

属性/方法	说明
focus	聚焦编辑器
format	() => boolean JSON 一键格式化（其他语言提示不支持，语法错误返回 false）
getValue	() => string 当前代码内容
setValue	(value: string) => void 程序化写入代码内容