@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/base/AiSkillEditor.vue

@@ -0,0 +1,2125 @@
+<template>
+  <div class="ai-skill-editor">
+    <div class="editor-header" v-if="!isFullscreen">
+      <span class="editor-title">{{ componentTitle }} ：</span>
+      <span class="editor-header-right">
+        <el-button-group class="mode-btn-group" v-if="!isDetailMode">
+          <el-button size="small" :type="editorMode === 'edit' ? 'primary' : 'default'" @click="setEditorMode('edit')">编辑</el-button>
+          <el-button size="small" :type="editorMode === 'split' ? 'primary' : 'default'" @click="setEditorMode('split')">分屏</el-button>
+          <el-button size="small" :type="editorMode === 'preview' ? 'primary' : 'default'" @click="setEditorMode('preview')">预览</el-button>
+        </el-button-group>
+        <el-button v-if="!isDetailMode && isSingleSave" size="small" type="primary" :loading="saving" @click="saveContent">保存</el-button>
+        <el-button type="primary" link size="small" class="fullscreen-btn" @click="toggleFullscreen">
+          <i class="el-icon-full-screen"></i> 全屏
+        </el-button>
+      </span>
+    </div>
+    <div :class="['editor-wrap', { 'is-fullscreen': isFullscreen }]">
+      <div class="editor-header editor-header--inner" v-if="isFullscreen">
+        <span class="editor-title">{{ componentTitle }} ：</span>
+        <span class="editor-header-right">
+          <el-button-group class="mode-btn-group" v-if="!isDetailMode">
+            <el-button size="small" :type="editorMode === 'edit' ? 'primary' : 'default'" @click="setEditorMode('edit')">编辑</el-button>
+            <el-button size="small" :type="editorMode === 'split' ? 'primary' : 'default'" @click="setEditorMode('split')">分屏</el-button>
+            <el-button size="small" :type="editorMode === 'preview' ? 'primary' : 'default'" @click="setEditorMode('preview')">预览</el-button>
+          </el-button-group>
+          <el-button v-if="!isDetailMode && isSingleSave" size="small" type="primary" :loading="saving" @click="saveContent">保存</el-button>
+          <el-button type="primary" link size="small" class="fullscreen-btn" @click="toggleFullscreen">
+            <i class="epx-icon-compress"></i> 退出
+          </el-button>
+        </span>
+      </div>
+      <div class="editor-container" :class="['mode-' + (isDetailMode ? 'preview' : editorMode)]">
+        <div class="editor-pane editor-pane--input">
+          <textarea ref="textarea"></textarea>
+        </div>
+        <div class="editor-pane editor-pane--preview" ref="previewPane" @scroll="handlePreviewScroll">
+          <div class="markdown-preview markdown" ref="preview"></div>
+        </div>
+      </div>
+      <div class="editor-fx-icon">
+        <i class="epx-icon-bianliang"></i>
+      </div>
+    </div>
+
+    <!-- 快捷插入弹窗 -->
+    <!-- 流程节点场景下编辑器嵌套在外层弹窗中，需 append-to-body 让遮罩/层级正确，避免被遮罩盖住；原技能编辑器(无动态参数)保持原行为 -->
+    <el-dialog
+      title="快捷插入"
+      v-model="quickInsertVisible"
+      width="860px"
+      :append-to-body="hasDynamicParam"
+      :close-on-click-modal="false"
+      class="quick-insert-dialog"
+      @close="onDialogClose"
+    >
+      <el-tabs v-model="quickInsertTab" class="quick-insert-tabs">
+        <!-- 动态参数 -->
+        <el-tab-pane v-if="hasDynamicParam" label="动态参数" name="dynamicParam">
+          <div class="dynamic-param-pane">
+            <el-tree
+              :data="globalParamsData"
+              node-key="code"
+              :props="{ label: 'text', children: 'children' }"
+              @node-click="insertDynamicParam"
+            >
+              <template #default="{ node, data }">
+                <span class="custom-tree-node">
+                  <span v-if="data.leaf" class="param-leaf-mark">{x}</span>
+                  <span :title="node.label">{{ node.label }}</span>
+                </span>
+              </template>
+            </el-tree>
+          </div>
+        </el-tab-pane>
+
+        <!-- 公式 -->
+        <el-tab-pane v-if="showFormula" label="公式" name="formula">
+          <div class="formula-pane">
+            <p class="formula-pane__tip">使用公式编辑器构造表达式，插入后以表达式文本形式保存在提示词中（插入后不可再次点开编辑）。</p>
+            <el-button type="primary" icon="el-icon-edit-outline" @click="openFormulaEditor">打开公式编辑器</el-button>
+          </div>
+        </el-tab-pane>
+
+        <!-- 提示词函数 -->
+        <el-tab-pane label="提示词函数" name="function">
+          <el-table
+            :data="functionList"
+            height="380"
+          >
+            <el-table-column type="index" label="序号" width="70" align="center" />
+            <el-table-column label="操作" width="80" align="center">
+              <template v-slot="scope">
+                <el-link type="primary" :underline="false" @click="insertFunction(scope.row)">选择</el-link>
+              </template>
+            </el-table-column>
+            <el-table-column prop="NAME" label="函数名称" min-width="200" show-overflow-tooltip />
+          </el-table>
+        </el-tab-pane>
+
+        <!-- 提示词模板 -->
+        <el-tab-pane label="提示词模板" name="template">
+          <el-table
+            :data="templateList"
+            height="380"
+          >
+            <el-table-column type="index" label="序号" width="70" align="center" />
+            <el-table-column label="操作" width="80" align="center">
+              <template v-slot="scope">
+                <el-link type="primary" :underline="false" @click="insertTemplate(scope.row)">选择</el-link>
+              </template>
+            </el-table-column>
+            <el-table-column prop="TITLE" label="模板名称" min-width="200" show-overflow-tooltip />
+          </el-table>
+        </el-tab-pane>
+
+        <!-- 对象接口 -->
+        <el-tab-pane label="对象接口" name="interface">
+          <el-tabs v-model="apiActiveTab" class="inner-tabs" @tab-click="handleApiTabChange">
+            <!-- 通用接口 -->
+            <el-tab-pane label="通用接口" name="frame">
+              <el-table
+                :data="frameApiList"
+                height="330"
+              >
+                <el-table-column type="index" label="序号" width="70" align="center" />
+                <el-table-column label="操作" width="140" align="center">
+                  <template v-slot="scope">
+                    <el-link type="primary" :underline="false" @click="insertFrameApi(scope.row)">选择</el-link>
+                    <el-link type="success" :underline="false" style="margin-left: 8px" @click="insertFrameApiName(scope.row)">选择工具名</el-link>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="LABEL" label="接口名称" min-width="140" show-overflow-tooltip />
+                <el-table-column prop="NAME" label="接口命令" width="120" show-overflow-tooltip />
+                <el-table-column prop="ENTITY#" label="所属对象" width="120" show-overflow-tooltip />
+                <el-table-column prop="PARAM_EXPLAIN" label="接口说明" min-width="220" show-overflow-tooltip />
+              </el-table>
+              <el-pagination
+                v-if="frameApiTotal > frameApiPageSize"
+                v-model:current-page="frameApiCurrentPage"
+                :page-size="frameApiPageSize"
+                layout="total, prev, pager, next"
+                :total="frameApiTotal"
+                @current-change="handleFrameApiPageChange"
+                style="margin-top: 10px; text-align: right;"
+              />
+            </el-tab-pane>
+
+            <!-- 对象接口 -->
+            <el-tab-pane label="对象接口" name="entity">
+              <div class="tab-filter">
+                <label>选择对象：</label>
+                <epx-object
+                  v-model="selectedEntity"
+                  :fieldConfigs="{
+                    attriLabel: '',
+                    codeKey: 'FM_ENTITY',
+                    state: 'EDIT',
+                    placeholder: '请选择对象',
+                    isMultiple: '0'
+                  }"
+                  @change="handleEntityChange"
+                />
+              </div>
+              <el-table
+                v-if="selectedEntity"
+                :data="apiList"
+                height="330"
+              >
+                <el-table-column type="index" label="序号" width="70" align="center" />
+                <el-table-column label="操作" width="140" align="center">
+                  <template v-slot="scope">
+                    <el-link type="primary" :underline="false" @click="insertApi(scope.row)">选择</el-link>
+                    <el-link type="success" :underline="false" style="margin-left: 8px" @click="insertApiName(scope.row)">选择工具名</el-link>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="LABEL" label="接口名称" min-width="140" show-overflow-tooltip />
+                <el-table-column prop="NAME" label="接口命令" width="120" show-overflow-tooltip />
+                <el-table-column prop="PARAM_EXPLAIN" label="接口说明" min-width="220" show-overflow-tooltip />
+              </el-table>
+              <div v-else class="empty-tip">
+                <i class="el-icon-info"></i>
+                <p>请先选择对象</p>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </el-tab-pane>
+
+        <!-- 外部接口 -->
+        <el-tab-pane label="外部接口" name="external">
+          <el-table
+            :data="externalApiList"
+            height="380"
+          >
+            <el-table-column type="index" label="序号" width="70" align="center" />
+            <el-table-column label="操作" width="140" align="center">
+              <template v-slot="scope">
+                <el-link type="primary" :underline="false" @click="insertExternalApi(scope.row)">选择</el-link>
+                <el-link type="success" :underline="false" style="margin-left: 8px" @click="insertExternalApiName(scope.row)">选择工具名</el-link>
+              </template>
+            </el-table-column>
+            <el-table-column prop="NAME" label="接口名称" min-width="180" show-overflow-tooltip />
+            <el-table-column prop="NOTICE" label="接口说明" min-width="300" show-overflow-tooltip />
+          </el-table>
+          <el-pagination
+            v-if="externalApiTotal > externalApiPageSize"
+            v-model:current-page="externalApiCurrentPage"
+            :page-size="externalApiPageSize"
+            layout="total, prev, pager, next"
+            :total="externalApiTotal"
+            @current-change="handleExternalApiPageChange"
+            style="margin-top: 10px; text-align: right;"
+          />
+        </el-tab-pane>
+
+        <!-- 内置工具 -->
+        <el-tab-pane label="内置工具" name="systool">
+          <el-table
+            :data="sysToolList"
+            height="380"
+          >
+            <el-table-column type="index" label="序号" width="70" align="center" />
+            <el-table-column label="操作" width="140" align="center">
+              <template v-slot="scope">
+                <el-link type="primary" :underline="false" @click="insertSysTool(scope.row)">选择</el-link>
+                <el-link type="success" :underline="false" style="margin-left: 8px" @click="insertSysToolName(scope.row)">选择工具名</el-link>
+              </template>
+            </el-table-column>
+            <el-table-column prop="NAME" label="名称" min-width="140" show-overflow-tooltip />
+            <el-table-column prop="CODE" label="工具标识" width="160" show-overflow-tooltip />
+            <el-table-column prop="DESC" label="工具描述" min-width="220" show-overflow-tooltip />
+          </el-table>
+          <el-pagination
+            v-if="sysToolTotal > sysToolPageSize"
+            v-model:current-page="sysToolCurrentPage"
+            :page-size="sysToolPageSize"
+            layout="total, prev, pager, next"
+            :total="sysToolTotal"
+            @current-change="handleSysToolPageChange"
+            style="margin-top: 10px; text-align: right;"
+          />
+        </el-tab-pane>
+
+        <!-- 子智能体 -->
+        <el-tab-pane label="子智能体" name="subagent">
+          <el-table
+            :data="subAgentList"
+            height="380"
+          >
+            <el-table-column type="index" label="序号" width="70" align="center" />
+            <el-table-column label="操作" width="140" align="center">
+              <template v-slot="scope">
+                <el-link type="primary" :underline="false" @click="insertSubAgent(scope.row)">选择</el-link>
+                <el-link type="success" :underline="false" style="margin-left: 8px" @click="insertSubAgentName(scope.row)">选择工具名</el-link>
+              </template>
+            </el-table-column>
+            <el-table-column prop="NAME" label="应用名称" min-width="140" show-overflow-tooltip />
+            <el-table-column prop="CODE" label="应用编号" width="120" show-overflow-tooltip />
+            <el-table-column prop="NOTE" label="应用简介" min-width="220" show-overflow-tooltip />
+          </el-table>
+          <el-pagination
+            v-if="subAgentTotal > subAgentPageSize"
+            v-model:current-page="subAgentCurrentPage"
+            :page-size="subAgentPageSize"
+            layout="total, prev, pager, next"
+            :total="subAgentTotal"
+            @current-change="handleSubAgentPageChange"
+            style="margin-top: 10px; text-align: right;"
+          />
+        </el-tab-pane>
+
+        <!-- 技能（仅单个保存模式下可用） -->
+        <el-tab-pane v-if="isSingleSave" label="技能" name="skill">
+          <el-tabs v-model="skillActiveTab" class="inner-tabs" @tab-click="handleSkillTabChange">
+            <el-tab-pane label="系统技能" name="system">
+              <el-table
+                :data="skillList"
+                height="330"
+              >
+                <el-table-column type="index" label="序号" width="70" align="center" />
+                <el-table-column label="操作" width="80" align="center">
+                  <template v-slot="scope">
+                    <el-link type="primary" :underline="false" @click="insertSkill(scope.row)">选择</el-link>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="NAME" label="技能名称" min-width="160" show-overflow-tooltip />
+                <el-table-column prop="CODE" label="技能编号" width="160" show-overflow-tooltip />
+                <el-table-column prop="DESC" label="技能描述" min-width="220" show-overflow-tooltip />
+              </el-table>
+              <el-pagination
+                v-if="skillTotal > skillPageSize"
+                v-model:current-page="skillCurrentPage"
+                :page-size="skillPageSize"
+                layout="total, prev, pager, next"
+                :total="skillTotal"
+                @current-change="handleSkillPageChange"
+                style="margin-top: 10px; text-align: right;"
+              />
+            </el-tab-pane>
+            <el-tab-pane label="平台技能" name="platform">
+              <el-table
+                :data="skillList"
+                height="330"
+              >
+                <el-table-column type="index" label="序号" width="70" align="center" />
+                <el-table-column label="操作" width="80" align="center">
+                  <template v-slot="scope">
+                    <el-link type="primary" :underline="false" @click="insertSkill(scope.row)">选择</el-link>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="NAME" label="技能名称" min-width="160" show-overflow-tooltip />
+                <el-table-column prop="CODE" label="技能编号" width="160" show-overflow-tooltip />
+                <el-table-column prop="DESC" label="技能描述" min-width="220" show-overflow-tooltip />
+              </el-table>
+              <el-pagination
+                v-if="skillTotal > skillPageSize"
+                v-model:current-page="skillCurrentPage"
+                :page-size="skillPageSize"
+                layout="total, prev, pager, next"
+                :total="skillTotal"
+                @current-change="handleSkillPageChange"
+                style="margin-top: 10px; text-align: right;"
+              />
+            </el-tab-pane>
+          </el-tabs>
+        </el-tab-pane>
+
+        <!-- 配置文档（树形，点击文档节点作为工具插入） -->
+        <el-tab-pane label="配置文档" name="configDoc">
+          <div class="config-doc-pane">
+            <el-input
+              v-model="docFilterText"
+              size="small"
+              clearable
+              prefix-icon="el-icon-search"
+              placeholder="输入文档名称过滤"
+              class="config-doc-pane__filter"
+            />
+            <div class="config-doc-pane__tree">
+              <el-tree
+                ref="docTree"
+                :data="docTree"
+                node-key="id"
+                :props="{ label: 'text', children: 'children' }"
+                :filter-node-method="filterDocNode"
+                :expand-on-click-node="true"
+                @node-click="onDocNodeClick"
+              >
+                <template #default="{ node, data }">
+                  <span class="config-doc-node">
+                    <i :class="data.leaf ? 'el-icon-document' : 'el-icon-folder'"></i>
+                    <span :title="node.label">{{ node.label }}</span>
+                  </span>
+                </template>
+              </el-tree>
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+
+    <!-- 公式编辑器（隐藏触发，通过 setting() 唤起弹窗）-->
+    <epx-rule
+      v-if="showFormula"
+      :key="ruleInfo"
+      ref="rule"
+      style="display: none;"
+      :model-value="ruleInfo"
+      @update:model-value="onFormulaChange"
+      :selfStyle="false"
+      :fieldConfigs="{ attriName: 'value', attriLabel: '公式', dataType: 'rule', rows: 2, state: 'EDIT' }"
+      :variableList="[]"
+      :functionList="formulaLibrary"
+      :extendVariable="globalParamsData"
+    >
+      <span></span>
+    </epx-rule>
+  </div>
+</template>
+
+<script>
+import { component } from '@epxing/core/src/mixins'
+import 'highlight.js/styles/base16/atelier-forest.min.css'
+import { loadMarkdownDeps, escapeFallback } from '@epxing/components/src/ai-chat-page/markdown'
+
+// 给块级元素注入源码行号（0 基），供分屏滚动「按行」精确联动
+function injectSourceLine (tokens, idx, options, _env, slf) {
+  const token = tokens[idx]
+  if (token.map && token.nesting >= 0) {
+    token.attrSet('data-source-line', String(token.map[0]))
+  }
+  return slf.renderToken(tokens, idx, options)
+}
+
+// markdown-it / hljs 懒加载：库到达前 md 为 null，renderMd() 兜底转义纯文本，库就绪后重建实例并重渲染预览
+let md = null
+function buildMd (markdownit, hljs) {
+  const md = markdownit({
+    highlight (str, lang) {
+      if (lang && hljs.getLanguage(lang)) {
+        try {
+          return '<pre><code class="hljs">' +
+            hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
+            '</code></pre>'
+        } catch (__) {}
+      }
+      return '<pre><code class="hljs">' + md.utils.escapeHtml(str) + '</code></pre>'
+    }
+  })
+
+  md.renderer.rules.link_open = function (tokens, idx, options, _env, self) {
+    if (tokens[idx].attrIndex('target') === -1) {
+      tokens[idx].attrPush(['target', '_blank'])
+      tokens[idx].attrPush(['rel', 'noopener noreferrer'])
+    }
+    return self.renderToken(tokens, idx, options)
+  }
+
+  md.renderer.rules.paragraph_open = injectSourceLine
+  md.renderer.rules.heading_open = injectSourceLine
+  md.renderer.rules.blockquote_open = injectSourceLine
+  md.renderer.rules.bullet_list_open = injectSourceLine
+  md.renderer.rules.ordered_list_open = injectSourceLine
+  md.renderer.rules.list_item_open = injectSourceLine
+  md.renderer.rules.table_open = injectSourceLine
+  md.renderer.rules.hr = injectSourceLine
+
+  return md
+}
+
+function renderMd (text) {
+  return md ? md.render(text) : escapeFallback(text)
+}
+
+export default {
+  name: 'epx-base-ai-skill-editor',
+  mixins: [component],
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    formData: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    // 关联的 agent id，用于加载工具列表
+    agentId: {
+      type: String,
+      default: ''
+    },
+    pageType: String,
+    // 单个保存模式：显示保存按钮，点击后保存当前内容
+    singleSave: {
+      type: Boolean,
+      default: false
+    },
+    // 动态参数树（流程节点变量等）。传入后快捷插入弹窗显示「动态参数」tab，预览中将 {{code}} 渲染为参数标签
+    globalParamsData: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    // 是否启用「公式」插入（复用 epx-rule）
+    showFormula: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    // 组件标题：优先使用 prop title，其次使用 $configs.attriLabel，最后使用 compTitle
+    componentTitle () {
+      return this.title || this.$configs.attriLabel || this.compTitle || '技能编辑器'
+    },
+    // 组件类型：从 $configs 获取
+    componentType () {
+      return this.$configs.componentType || this.pageType
+    },
+    // 是否为详情/只读模式
+    isDetailMode () {
+      return this.componentType === 'DETAIL' || this.componentType === 'READONLY'
+    },
+    // 是否启用单个保存模式：优先 prop，其次 $configs 配置
+    isSingleSave () {
+      return this.singleSave || this.$configs.singleSave === true
+    },
+    // 是否有可插入的动态参数
+    hasDynamicParam () {
+      return Array.isArray(this.globalParamsData) && this.globalParamsData.length > 0
+    },
+    // 动态参数 code -> 显示名 映射（用于预览渲染）
+    paramNameMap () {
+      const map = {}
+      const walk = (list) => {
+        (list || []).forEach(node => {
+          if (node.code) map[node.code] = node.text
+          if (node.children && node.children.length) walk(node.children)
+        })
+      }
+      walk(this.globalParamsData)
+      return map
+    }
+  },
+  data () {
+    return {
+      editor: null,
+      hasContent: false,
+      isFullscreen: false,
+      editorMode: 'split', // edit | split | preview
+      saving: false, // 保存中状态
+      contentChanged: false, // 内容是否已修改
+      lastSavedContent: '', // 上次保存的内容
+      // 快捷插入弹窗
+      quickInsertVisible: false,
+      quickInsertTab: 'function',
+      // 记录触发 / 时的光标位置，用于插入后删除 /
+      slashCursor: null,
+      // 提示词函数
+      functionList: [],
+      // 提示词模板
+      templateList: [],
+      // 对象接口
+      apiActiveTab: 'frame',
+      selectedEntity: null,
+      apiList: [],
+      apiTotal: 0,
+      // 通用接口
+      frameApiList: [],
+      frameApiTotal: 0,
+      frameApiCurrentPage: 1,
+      frameApiPageSize: 10,
+      // 外部接口
+      externalApiList: [],
+      externalApiTotal: 0,
+      externalApiCurrentPage: 1,
+      externalApiPageSize: 10,
+      // 子智能体
+      subAgentList: [],
+      subAgentTotal: 0,
+      subAgentCurrentPage: 1,
+      subAgentPageSize: 10,
+      // 内置工具
+      sysToolList: [],
+      sysToolTotal: 0,
+      sysToolCurrentPage: 1,
+      sysToolPageSize: 10,
+      // 技能
+      skillActiveTab: 'system',
+      skillList: [],
+      skillTotal: 0,
+      skillCurrentPage: 1,
+      skillPageSize: 10,
+      // 配置文档（树形）
+      docTree: [],
+      docFilterText: '',
+      // 公式（epx-rule）
+      ruleInfo: '',
+      formulaLibrary: [],
+      formulaCursor: null,
+      mdReady: false
+    }
+  },
+  created () {
+    loadMarkdownDeps().then(d => {
+      if (!md) md = buildMd(d.markdownit, d.hljs)
+      this.mdReady = true
+      // 库就绪前预览用的是转义纯文本兜底，就绪后用当前内容重新渲染一次
+      this.updatePreview(this.editor ? this.editor.getValue() : (this.value || ''))
+    })
+  },
+  watch: {
+    // 外部 value prop 变化时同步
+    value (val) {
+      if (this.editor && !this._emitting && val !== this.editor.getValue()) {
+        this.editor.setValue(val || '')
+        this.hasContent = (val || '').length > 0
+      }
+    },
+    // formData 变化时，从 updateField 字段同步到编辑器
+    formData: {
+      deep: true,
+      handler (val) {
+        if (!this.editor || this._emitting) return
+        const field = this.$configs.updateField || this.$configs.fieldKey
+        if (!field) return
+        const newVal = (val && val[field]) || ''
+        if (newVal !== this.editor.getValue()) {
+          this.editor.setValue(newVal)
+          this.hasContent = newVal.length > 0
+        }
+      }
+    },
+    // 配置文档树过滤
+    docFilterText (val) {
+      if (this.$refs.docTree) this.$refs.docTree.filter(val)
+    }
+  },
+  mounted () {
+    this.initEditor()
+    this.loadFunctionList()
+    this.loadTemplateList()
+    this.loadFrameApiList()
+    this.loadExternalApiList()
+    this.loadSubAgentList()
+    this.loadSysToolList()
+    if (this.isSingleSave) this.loadSkillList()
+    if (this.showFormula) this.loadFormulaLibrary()
+    this.loadDocTree()
+  },
+  beforeUnmount () {
+    clearTimeout(this._scrollLockTimer)
+    window.removeEventListener('resize', this.invalidateAnchorCache)
+    if (this.editor) {
+      this.editor.toTextArea()
+      this.editor = null
+    }
+  },
+  methods: {
+    // ─── 初始化编辑器 ────────────────────────────────────────────
+    initEditor () {
+      require.ensure([], () => {
+        const CodeMirror = require('codemirror')
+        globalThis.codemirror = CodeMirror
+        require('codemirror/lib/codemirror.css')
+        require('codemirror/mode/markdown/markdown.js')
+        require('codemirror/addon/display/placeholder.js')
+
+        this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
+          mode: 'markdown',
+          lineWrapping: true,
+          lineNumbers: false,
+          autofocus: false,
+          inputStyle: 'contenteditable',
+          placeholder: '输入 "/" 可快捷插入工具和函数'
+        })
+
+        // 设置初始值：优先从 formData[updateField] 取，其次 value prop
+        const field = this.$configs.updateField || this.$configs.fieldKey
+        const initialValue = (field && this.formData && this.formData[field]) || this.value || ''
+        if (initialValue) {
+          this.editor.setValue(initialValue)
+          this.hasContent = true
+        }
+        // 记录初始内容
+        this.lastSavedContent = this.editor.getValue()
+
+        // 监听输入，检测 /
+        this.editor.on('change', (editor, change) => {
+          const val = editor.getValue()
+          this.hasContent = val.length > 0
+          this.contentChanged = val !== this.lastSavedContent
+
+          this.emitChange(val)
+          this.updatePreview(val)
+
+          // 检测输入了 /
+          if (change.origin === '+input' && change.text && change.text[0] === '/') {
+            // 记录 / 的位置
+            this.slashCursor = {
+              line: change.from.line,
+              ch: change.from.ch
+            }
+            this.$nextTick(() => {
+              this.openQuickInsert()
+            })
+          }
+        })
+
+        // 单个保存模式：失去焦点时若内容有修改则自动保存（静默），作为忘记保存的兜底
+        if (this.isSingleSave) {
+          this.editor.on('blur', () => {
+            if (this.contentChanged && !this.saving) {
+              this.saveContent(true)
+            }
+          })
+        }
+
+        // 分屏模式：编辑区滚动时联动预览区；窗口尺寸变化时预览锚点需重建
+        this.editor.on('scroll', this.handleEditorScroll)
+        window.addEventListener('resize', this.invalidateAnchorCache)
+
+        // 初始化预览
+        this.updatePreview(this.editor.getValue())
+        // 在弹窗/动画容器内挂载时，刷新布局以正确计算尺寸
+        this.$nextTick(() => {
+          if (this.editor) this.editor.refresh()
+        })
+      }, (err) => {
+        console.error('CodeMirror load error', err)
+      }, 'codemirror')
+    },
+
+    // 保存（点击保存按钮触发；silent=true 时为失焦自动保存，不弹成功提示）
+    saveContent (silent = false) {
+      const field = this.$configs.updateField || this.$configs.fieldKey
+      if (!field || !this.$metaId || !this.formData.ID) {
+        if (!silent) this.$message.warning('保存配置不完整')
+        return
+      }
+
+      const value = this.editor ? this.editor.getValue() : ''
+      this.saving = true
+      this.$http.save({
+        action: 'update',
+        entityId: this.$metaId,
+        bean: {
+          ID: this.formData.ID,
+          [field]: value
+        }
+      }).then(() => {
+        this.lastSavedContent = value
+        this.contentChanged = false
+        // 保存成功后再把内容同步给父级（singleSave 模式下平时不实时传播）
+        this.emitChange(value, true)
+        if (!silent) this.$message.success('保存成功')
+      }).catch(err => {
+        this.$message.error(err.message || '保存失败')
+      }).finally(() => {
+        this.saving = false
+      })
+    },
+
+    // ─── 全屏切换 ────────────────────────────────────────────────
+    // --- emit change with formData
+    // singleSave 模式：编辑过程中不向父级实时传播（避免外层表单实时写回/保存），
+    // 仅在保存成功后通过 force=true 显式同步一次
+    emitChange (val, force = false) {
+      if (this.isSingleSave && !force) return
+      this._emitting = true
+      const field = this.$configs.updateField || this.$configs.fieldKey
+      if (field) {
+        this.$emit('change', { ...this.formData, [field]: val })
+      } else {
+        this.$emit('change', val)
+      }
+      this.$emit('input', val)
+      this.$nextTick(() => { this._emitting = false })
+    },
+
+    toggleFullscreen () {
+      this.isFullscreen = !this.isFullscreen
+      this.invalidateAnchorCache()
+      this.$nextTick(() => {
+        if (this.editor) this.editor.refresh()
+      })
+    },
+
+    // ─── 编辑模式切换 ────────────────────────────────────────────────
+    setEditorMode (mode) {
+      this.editorMode = mode
+      this.invalidateAnchorCache()
+      this.$nextTick(() => {
+        if (this.editor) this.editor.refresh()
+      })
+    },
+
+    // ─── 分屏滚动联动（按源码行号精确对齐） ──────────────────────────
+    handleEditorScroll () {
+      this.syncScroll('editor')
+    },
+
+    handlePreviewScroll () {
+      this.syncScroll('preview')
+    },
+
+    invalidateAnchorCache () {
+      this._anchorCache = null
+    },
+
+    // 用带来源标记的短时锁，避免左右互相触发形成回环
+    syncScroll (source) {
+      if (this.isDetailMode || this.editorMode !== 'split' || !this.editor) return
+      const previewEl = this.$refs.previewPane
+      if (!previewEl) return
+      if (this._scrollLock && this._scrollLock !== source) return
+      this._scrollLock = source
+
+      if (source === 'editor') this.syncPreviewFromEditor(previewEl)
+      else this.syncEditorFromPreview(previewEl)
+
+      clearTimeout(this._scrollLockTimer)
+      this._scrollLockTimer = setTimeout(() => { this._scrollLock = null }, 60)
+    },
+
+    // 编辑区 → 预览区：取编辑区顶部对应的源码行，插值到预览区对应锚点位置
+    syncPreviewFromEditor (previewEl) {
+      const anchors = this.buildScrollAnchors(previewEl)
+      const line = this.editorLineAtPixel(this.editor.getScrollInfo().top)
+      const { before, after } = this.bracketAnchors(anchors, line, 'line')
+      const span = after.line - before.line
+      const frac = span > 0 ? (line - before.line) / span : 0
+      previewEl.scrollTop = before.top + frac * (after.top - before.top)
+    },
+
+    // 预览区 → 编辑区：取预览区顶部对应的源码行，换算回编辑区像素
+    syncEditorFromPreview (previewEl) {
+      const anchors = this.buildScrollAnchors(previewEl)
+      const top = previewEl.scrollTop
+      const { before, after } = this.bracketAnchors(anchors, top, 'top')
+      const span = after.top - before.top
+      const frac = span > 0 ? (top - before.top) / span : 0
+      const line = before.line + frac * (after.line - before.line)
+      this.editor.scrollTo(null, this.editorPixelAtLine(line))
+    },
+
+    // 构建预览区锚点：[{ line(编辑器行号), top(内容内绝对像素) }]，含首尾哨兵；带缓存
+    buildScrollAnchors (previewEl) {
+      if (this._anchorCache) return this._anchorCache
+      const offset = this._previewLineOffset || 0
+      const containerTop = previewEl.getBoundingClientRect().top
+      const anchors = [{ line: offset, top: 0 }]
+      const contentEl = this.$refs.preview
+      if (contentEl) {
+        const nodes = contentEl.querySelectorAll('[data-source-line]')
+        for (let i = 0; i < nodes.length; i++) {
+          const line = parseInt(nodes[i].getAttribute('data-source-line'), 10)
+          if (isNaN(line)) continue
+          const top = nodes[i].getBoundingClientRect().top - containerTop + previewEl.scrollTop
+          anchors.push({ line: line + offset, top })
+        }
+      }
+      anchors.push({ line: this.editor.lineCount(), top: previewEl.scrollHeight })
+      this._anchorCache = anchors
+      return anchors
+    },
+
+    // 在锚点数组里按 key(line/top) 找到夹住 value 的前后两个锚点
+    bracketAnchors (anchors, value, key) {
+      let before = anchors[0]
+      let after = anchors[anchors.length - 1]
+      for (let i = 0; i < anchors.length; i++) {
+        if (anchors[i][key] <= value) {
+          before = anchors[i]
+        } else {
+          after = anchors[i]
+          break
+        }
+      }
+      return { before, after }
+    },
+
+    // 编辑区局部像素 → 分数行号
+    editorLineAtPixel (px) {
+      const lineCount = this.editor.lineCount()
+      const line = this.editor.lineAtHeight(px, 'local')
+      const top = this.editor.heightAtLine(line, 'local')
+      const bottom = this.editor.heightAtLine(Math.min(line + 1, lineCount), 'local')
+      const frac = bottom > top ? (px - top) / (bottom - top) : 0
+      return line + Math.max(0, Math.min(1, frac))
+    },
+
+    // 分数行号 → 编辑区局部像素
+    editorPixelAtLine (line) {
+      const lineCount = this.editor.lineCount()
+      const intLine = Math.max(0, Math.min(Math.floor(line), lineCount - 1))
+      const top = this.editor.heightAtLine(intLine, 'local')
+      const bottom = this.editor.heightAtLine(Math.min(intLine + 1, lineCount), 'local')
+      return top + (line - intLine) * (bottom - top)
+    },
+
+    // ─── 更新预览 ────────────────────────────────────────────────────
+    updatePreview (val) {
+      if (!this.$refs.preview) return
+
+      const processed = val || ''
+
+      // 检测并剥离 frontmatter（预览中不显示，仅用于解析 tools 映射）
+      const fmMatch = processed.match(/^\n*---\n([\s\S]*?)\n---(?:\n|$)/)
+      let contentWithoutFm = processed
+      let toolsMap = {} // id -> name 映射
+
+      if (fmMatch) {
+        toolsMap = this.parseFrontmatterToolsMap(fmMatch[1])
+        contentWithoutFm = processed.slice(fmMatch[0].length)
+      }
+
+      // 记录 frontmatter 占用的行数：预览行号(0 基，剥离 frontmatter 后)加此偏移即编辑器行号
+      this._previewLineOffset = fmMatch ? (fmMatch[0].match(/\n/g) || []).length : 0
+      // 内容变化后预览锚点失效，下次滚动时重建
+      this.invalidateAnchorCache()
+
+      // 先把自定义标签替换成占位符（避免被 markdown 处理）
+      // 处理 tool-card 标签（只需要 id）
+      contentWithoutFm = contentWithoutFm.replace(/<tool-card\s+id="([^"]+)"\s*\/?>/gi, (match, id) => {
+        return `[[TOOL_CARD:${id}]]`
+      })
+
+      // 处理 tool-name 标签（只需要 id）
+      contentWithoutFm = contentWithoutFm.replace(/<tool-name\s+id="([^"]+)"\s*\/?>/gi, (match, id) => {
+        return `[[TOOL_NAME:${id}]]`
+      })
+
+      // 处理 doc-name 标签（配置文档，支持单/双引号）
+      contentWithoutFm = contentWithoutFm.replace(/<doc-name\s+id=["']([^"']*)["']\s*\/?>/gi, (match, id) => {
+        return `[[DOC_NAME:${id}]]`
+      })
+
+      // 处理 #{xxx()} 函数引用
+      contentWithoutFm = contentWithoutFm.replace(/#\{([^}]+)\}/g, (match, func) => {
+        return `[[FUNC:${func}]]`
+      })
+
+      // 处理 {{code}} 动态参数（仅在传入了 globalParamsData 时）
+      if (this.hasDynamicParam) {
+        contentWithoutFm = contentWithoutFm.replace(/\{\{([^{}]+)\}\}/g, (match, code) => {
+          return `[[PARAM:${code.trim()}]]`
+        })
+      }
+
+      // 渲染 markdown
+      let html = renderMd(contentWithoutFm)
+
+      // 把占位符替换成最终的 HTML 标签，从 toolsMap 获取 name
+      html = html.replace(/\[\[TOOL_CARD:([^\]]+)\]\]/g, (match, id) => {
+        const displayName = toolsMap[id] || id || ''
+        return `<span class="tool-tag tool-tag--card">${displayName}</span>`
+      })
+
+      html = html.replace(/\[\[TOOL_NAME:([^\]]+)\]\]/g, (match, id) => {
+        const displayName = toolsMap[id] || id || ''
+        return `<span class="tool-tag tool-tag--name">${displayName}</span>`
+      })
+
+      html = html.replace(/\[\[DOC_NAME:([^\]]*)\]\]/g, (match, id) => {
+        const displayName = toolsMap[id] || id || ''
+        return `<span class="tool-tag tool-tag--doc">${displayName}</span>`
+      })
+
+      html = html.replace(/\[\[FUNC:([^\]]+)\]\]/g, (match, func) => {
+        const funcName = func.replace(/\(\)$/, '').replace(/\(.*\)$/, '')
+        return `<span class="tool-tag tool-tag--func">${funcName}</span>`
+      })
+
+      html = html.replace(/\[\[PARAM:([^\]]+)\]\]/g, (match, code) => {
+        const displayName = this.paramNameMap[code] || code
+        return `<span class="tool-tag tool-tag--param">${displayName}</span>`
+      })
+
+      this.$refs.preview.innerHTML = html
+    },
+
+    // 解析 frontmatter 中所有区块（tools/docs）的 id -> name 映射
+    parseFrontmatterToolsMap (fmContent) {
+      const toolsMap = {}
+      let current = null
+      fmContent.split('\n').forEach(line => {
+        const idMatch = line.match(/^\s*-\s+id:\s*(.+)$/)
+        const nameMatch = line.match(/^\s+name:\s*(.+)$/)
+
+        if (idMatch) {
+          current = { id: idMatch[1].trim() }
+        } else if (current && nameMatch) {
+          toolsMap[current.id] = nameMatch[1].trim()
+          current = null
+        }
+      })
+      return toolsMap
+    },
+
+    // ─── 快捷插入弹窗 ────────────────────────────────────────────
+    openQuickInsert () {
+      this.quickInsertVisible = true
+      // 流程节点场景下优先展示动态参数
+      this.quickInsertTab = this.hasDynamicParam ? 'dynamicParam' : 'function'
+    },
+
+    onDialogClose () {
+      // 弹窗关闭时，如果没有插入内容，删除触发的 /
+      if (this.slashCursor && this.editor) {
+        const from = this.slashCursor
+        const to = { line: from.line, ch: from.ch + 1 }
+        // 检查该位置是否还是 /
+        const ch = this.editor.getRange(from, to)
+        if (ch === '/') {
+          this.editor.replaceRange('', from, to)
+        }
+      }
+      this.slashCursor = null
+      this.editor && this.editor.focus()
+    },
+
+    // --- 删除触发 / 并关闭弹窗
+    closeAndCleanSlash () {
+      if (this.slashCursor && this.editor) {
+        const from = this.slashCursor
+        const to = { line: from.line, ch: from.ch + 1 }
+        const ch = this.editor.getRange(from, to)
+        if (ch === '/') {
+          this.editor.replaceRange('', from, to)
+        }
+      }
+      this.slashCursor = null
+      this.quickInsertVisible = false
+    },
+
+    // --- 解析 frontmatter，返回 { hasFrontmatter, tools, docs, fmLength }
+    // 支持 tools（工具）与 docs（配置文档）多个区块
+    parseFrontmatter () {
+      const value = this.editor.getValue()
+      // 支持开头有换行符的情况
+      const fmMatch = value.match(/^\n*---\n([\s\S]*?)\n---\n*/)
+      if (!fmMatch) {
+        return { hasFrontmatter: false, tools: [], docs: [], fmLength: 0 }
+      }
+      const fmText = fmMatch[1]
+      const fmLength = fmMatch[0].length
+      const sections = { tools: [], docs: [] }
+      let section = null
+      let current = null
+      fmText.split('\n').forEach(line => {
+        // 顶层区块名：tools: / docs:（无缩进）
+        const sectionMatch = line.match(/^([A-Za-z_]\w*):\s*$/)
+        if (sectionMatch) {
+          section = sectionMatch[1]
+          if (!sections[section]) sections[section] = []
+          current = null
+          return
+        }
+        // 列表项起始：  - id: xxx
+        const idMatch = line.match(/^\s*-\s+id:\s*(.+)$/)
+        if (idMatch && section) {
+          current = { id: idMatch[1].trim() }
+          sections[section].push(current)
+          return
+        }
+        // 列表项子字段：    key: value
+        if (current && section) {
+          const kv = line.match(/^\s+([A-Za-z_]\w*):\s*(.*)$/)
+          if (kv) current[kv[1]] = kv[2].trim()
+        }
+      })
+      return { hasFrontmatter: true, tools: sections.tools || [], docs: sections.docs || [], fmLength }
+    },
+
+    // --- 生成 frontmatter 文本（标准 YAML 格式，列表项前两个空格缩进）
+    buildFrontmatter (tools, docs) {
+      const hasTools = tools && tools.length > 0
+      const hasDocs = docs && docs.length > 0
+      if (!hasTools && !hasDocs) return ''
+      let fm = '---\n'
+      if (hasTools) {
+        fm += 'tools:\n'
+        tools.forEach(t => {
+          fm += `  - id: ${t.id}\n`
+          fm += `    type: ${t.type}\n`
+          fm += `    name: ${t.name}\n`
+          if (t.meta) fm += `    meta: ${t.meta}\n`
+        })
+      }
+      if (hasDocs) {
+        fm += 'docs:\n'
+        docs.forEach(d => {
+          fm += `  - id: ${d.id}\n`
+          fm += `    name: ${d.name}\n`
+        })
+      }
+      fm += '---\n'
+      return fm
+    },
+
+    // --- 将工具写入 frontmatter 并在光标处插入 tool-card 标签
+    insertTool (toolEntry) {
+      if (!this.editor) return
+      this.closeAndCleanSlash()
+
+      const { hasFrontmatter, tools, docs, fmLength } = this.parseFrontmatter()
+      const value = this.editor.getValue()
+
+      // 避免重复插入相同 id
+      const exists = tools.some(t => t.id === toolEntry.id)
+      if (!exists) tools.push(toolEntry)
+
+      const newFm = this.buildFrontmatter(tools, docs)
+      const newValue = hasFrontmatter
+        ? newFm + value.slice(fmLength)
+        : newFm + value
+
+      // 计算光标行偏移（frontmatter 行数变化）
+      const cursor = this.editor.getCursor()
+      const fmLineCount = newFm.split('\n').length - 1
+      const oldFmLineCount = hasFrontmatter
+        ? value.slice(0, fmLength).split('\n').length - 1
+        : 0
+      const lineDelta = fmLineCount - oldFmLineCount
+
+      this.editor.setValue(newValue)
+
+      // 恢复光标并插入 tool-card 标签（不带 name）
+      const newLine = Math.max(0, cursor.line + lineDelta)
+      this.editor.setCursor({ line: newLine, ch: cursor.ch })
+      const tagCursor = this.editor.getCursor()
+      const tag = `<tool-card id="${toolEntry.id}" />`
+      this.editor.replaceRange(tag, tagCursor)
+      this.editor.setCursor({ line: tagCursor.line, ch: tagCursor.ch + tag.length })
+      this.editor.focus()
+
+      const val = this.editor.getValue()
+      this.emitChange(val)
+      this.updatePreview(val)
+    },
+
+    // --- 将工具写入 frontmatter 并在光标处插入 tool-name 标签
+    insertToolName (toolEntry) {
+      if (!this.editor) return
+      this.closeAndCleanSlash()
+
+      const { hasFrontmatter, tools, docs, fmLength } = this.parseFrontmatter()
+      const value = this.editor.getValue()
+
+      // 避免重复插入相同 id
+      const exists = tools.some(t => t.id === toolEntry.id)
+      if (!exists) tools.push(toolEntry)
+
+      const newFm = this.buildFrontmatter(tools, docs)
+      const newValue = hasFrontmatter
+        ? newFm + value.slice(fmLength)
+        : newFm + value
+
+      // 计算光标行偏移（frontmatter 行数变化）
+      const cursor = this.editor.getCursor()
+      const fmLineCount = newFm.split('\n').length - 1
+      const oldFmLineCount = hasFrontmatter
+        ? value.slice(0, fmLength).split('\n').length - 1
+        : 0
+      const lineDelta = fmLineCount - oldFmLineCount
+
+      this.editor.setValue(newValue)
+
+      // 恢复光标并插入 tool-name 标签（不带 name）
+      const newLine = Math.max(0, cursor.line + lineDelta)
+      this.editor.setCursor({ line: newLine, ch: cursor.ch })
+      const tagCursor = this.editor.getCursor()
+      const tag = `<tool-name id="${toolEntry.id}" />`
+      this.editor.replaceRange(tag, tagCursor)
+      this.editor.setCursor({ line: tagCursor.line, ch: tagCursor.ch + tag.length })
+      this.editor.focus()
+
+      const val = this.editor.getValue()
+      this.emitChange(val)
+      this.updatePreview(val)
+    },
+
+    // --- 插入函数：生成 {{ code }} 格式文本
+    insertFunction (item) {
+      if (!this.editor) return
+      this.closeAndCleanSlash()
+      const cursor = this.editor.getCursor()
+      const code = item.FUNC_VAR || item.METHOD || item.CODE || item.NAME
+      const text = `#{${code}()}`
+      this.editor.replaceRange(text, cursor)
+      this.editor.focus()
+      this.editor.setCursor({ line: cursor.line, ch: cursor.ch + text.length })
+      const val = this.editor.getValue()
+      this.emitChange(val)
+    },
+
+    // --- 插入模板（直接插入内容文本）
+    insertTemplate (item) {
+      if (!this.editor) return
+      this.closeAndCleanSlash()
+      const cursor = this.editor.getCursor()
+      this.editor.replaceRange(item.CONTENT || item.TITLE, cursor)
+      this.editor.focus()
+      const val = this.editor.getValue()
+      this.emitChange(val)
+    },
+
+    // --- 插入对象接口
+    insertApi (item) {
+      const entityId = item.ENTITY || (this.selectedEntity && (this.selectedEntity.id || this.selectedEntity))
+      this.insertTool({
+        id: `${entityId}:${item.ID}`,
+        type: 'function',
+        name: this.buildApiToolName(item),
+        meta: entityId || undefined
+      })
+    },
+
+    // --- 插入外部接口
+    insertExternalApi (item) {
+      this.insertTool({
+        id: item.ID,
+        type: 'api',
+        name: item.NAME
+      })
+    },
+
+    // --- 插入子智能体
+    insertSubAgent (item) {
+      this.insertTool({
+        id: item.ID,
+        type: 'subagent',
+        name: item.NAME
+      })
+    },
+
+    // --- 插入通用接口名称
+    insertFrameApiName (item) {
+      this.insertToolName({
+        id: `${item.ENTITY}:${item.ID}`,
+        type: 'function',
+        name: this.buildApiToolName(item),
+        meta: item.ENTITY || undefined
+      })
+    },
+
+    // --- 插入对象接口名称
+    insertApiName (item) {
+      const entityId = item.ENTITY || (this.selectedEntity && (this.selectedEntity.id || this.selectedEntity))
+      this.insertToolName({
+        id: `${entityId}:${item.ID}`,
+        type: 'function',
+        name: this.buildApiToolName(item),
+        meta: entityId || undefined
+      })
+    },
+
+    // 构造对象接口的工具名：对象名_接口名（防止重名）
+    buildApiToolName (item) {
+      const entityName = item['ENTITY#'] || (this.selectedEntity && this.selectedEntity.name) || ''
+      const apiName = item.LABEL || item.NAME || ''
+      return entityName ? `${entityName}_${apiName}` : apiName
+    },
+
+    // --- 插入外部接口名称
+    insertExternalApiName (item) {
+      this.insertToolName({
+        id: item.ID,
+        type: 'api',
+        name: item.NAME
+      })
+    },
+
+    // --- 插入子智能体名称
+    insertSubAgentName (item) {
+      this.insertToolName({
+        id: item.ID,
+        type: 'subagent',
+        name: item.NAME
+      })
+    },
+
+    // --- 插入内置工具
+    insertSysTool (item) {
+      this.insertTool({
+        id: item.CODE,
+        type: 'sys_tool',
+        name: item.NAME
+      })
+    },
+
+    // --- 插入内置工具名称
+    insertSysToolName (item) {
+      this.insertToolName({
+        id: item.CODE,
+        type: 'sys_tool',
+        name: item.NAME
+      })
+    },
+
+    // ─── 动态参数 ────────────────────────────────────────────────
+    // 插入动态参数：以 {{code}} 文本插入到光标处
+    insertDynamicParam (node) {
+      if (!node || !node.leaf) return
+      this.insertTextAtSlash(`{{${node.code}}}`)
+    },
+
+    // 删除触发的 / 后，在该位置插入纯文本
+    insertTextAtSlash (text) {
+      if (!this.editor) return
+      this.closeAndCleanSlash()
+      const cursor = this.editor.getCursor()
+      this.editor.replaceRange(text, cursor)
+      this.editor.setCursor({ line: cursor.line, ch: cursor.ch + text.length })
+      this.editor.focus()
+      const val = this.editor.getValue()
+      this.emitChange(val)
+      this.updatePreview(val)
+    },
+
+    // ─── 公式 ────────────────────────────────────────────────────
+    loadFormulaLibrary () {
+      this.$http.$request({
+        action: 'getDesignFunction',
+        entityId: 'FM_EL_DESIGN',
+        node: 'root',
+        systemId: this.SYSTEM,
+        enable: '1'
+      }).then(data => {
+        this.formulaLibrary = data
+      }).catch(() => {})
+    },
+
+    // 打开公式编辑器（先清掉触发的 / 并记录插入位置）
+    openFormulaEditor () {
+      if (!this.editor) return
+      this.closeAndCleanSlash()
+      this.formulaCursor = this.editor.getCursor()
+      this.ruleInfo = '{}'
+      this.$nextTick(() => {
+        if (this.$refs.rule) this.$refs.rule.setting()
+      })
+    },
+
+    // 公式确认：插入表达式文本（与原编辑器存储格式保持一致）
+    // val 来自 epx-rule 的 update:model-value（仅在用户点击确认时触发，不受本组件自身重置 ruleInfo 影响）
+    onFormulaChange (val) {
+      this.ruleInfo = val
+      let param = {}
+      try {
+        param = JSON.parse(val)
+      } catch (error) {
+        param = { el: val }
+      }
+      const text = param.el || ''
+      this.ruleInfo = ''
+      if (!text || !this.editor) {
+        this.formulaCursor = null
+        return
+      }
+      const cursor = this.formulaCursor || this.editor.getCursor()
+      this.editor.replaceRange(text, cursor)
+      this.editor.setCursor({ line: cursor.line, ch: cursor.ch + text.length })
+      this.editor.focus()
+      this.formulaCursor = null
+      const newVal = this.editor.getValue()
+      this.emitChange(newVal)
+      this.updatePreview(newVal)
+    },
+
+    // ─── 数据加载 ────────────────────────────────────────────────
+    loadFunctionList () {
+      Promise.all([
+        this.$http.$post({
+          action: 'list',
+          entityId: 'FM_FUNCTION',
+          'scope.TYPE': 'AI_FUN'
+        }),
+        this.$http.$post({
+          action: 'list',
+          entityId: 'FM_AI_FUNCTION',
+          'scope.ENABLE#not': '0',
+          'scope.TYPE': 'static_var'
+        })
+      ]).then(([fnData, varData]) => {
+        this.functionList = [
+          ...(fnData.entitys || []),
+          ...(varData.entitys || [])
+        ]
+      }).catch(() => {})
+    },
+
+    loadTemplateList () {
+      this.$http.list({
+        entityId: 'FM_AI_PROMPT',
+        'scope.IS_COMMON_USE': '1'
+      }).then(data => {
+        this.templateList = data.entitys || []
+      }).catch(() => {})
+    },
+
+    // 标签页切换
+    handleApiTabChange (tab) {
+      if (tab.name === 'frame' && this.frameApiList.length === 0) {
+        this.loadFrameApiList()
+      }
+    },
+
+    // 加载通用接口列表
+    loadFrameApiList () {
+      this.$http.list({
+        action: 'list',
+        entityId: 'FM_ENTITY_API',
+        page: this.frameApiCurrentPage,
+        limit: this.frameApiPageSize,
+        'scope.FRAME_API': '1',
+        columnFieldNames: 'ID,ENTITY,ENTITY#,NAME,LABEL#,PARAM_EXPLAIN,FRAME_API'
+      }).then(data => {
+        this.frameApiList = data.entitys || []
+        this.frameApiTotal = data.total || 0
+      }).catch(() => {})
+    },
+
+    // 通用接口分页切换
+    handleFrameApiPageChange (page) {
+      this.frameApiCurrentPage = page
+      this.loadFrameApiList()
+    },
+
+    // 插入通用接口
+    insertFrameApi (item) {
+      this.insertTool({
+        id: `${item.ENTITY}:${item.ID}`,
+        type: 'function',
+        name: this.buildApiToolName(item),
+        meta: item.ENTITY || undefined
+      })
+    },
+
+    handleEntityChange (value) {
+      this.selectedEntity = value
+      this.loadApiList()
+    },
+
+    loadApiList () {
+      if (!this.selectedEntity) {
+        this.apiList = []
+        this.apiTotal = 0
+        return
+      }
+      const entityId = this.selectedEntity.id || this.selectedEntity
+      this.$http.list({
+        action: 'getEntityAllApi',
+        entityId: 'FM_ENTITY_API',
+        metaId: entityId,
+        columnFieldNames: 'ID,ENTITY#,NAME,LABEL#,PARAM_EXPLAIN'
+      }).then(data => {
+        this.apiList = data.entitys || []
+        this.apiTotal = data.entitys ? data.entitys.length : 0
+      }).catch(() => {})
+    },
+
+    loadExternalApiList () {
+      this.$http.list({
+        action: 'list',
+        entityId: 'FM_API_IN',
+        page: this.externalApiCurrentPage,
+        limit: this.externalApiPageSize,
+        columnFieldNames: 'ID,NAME#,URL,NOTICE,METHOD'
+      }).then(data => {
+        this.externalApiList = data.entitys || []
+        this.externalApiTotal = data.total || 0
+      }).catch(() => {})
+    },
+
+    handleExternalApiPageChange (page) {
+      this.externalApiCurrentPage = page
+      this.loadExternalApiList()
+    },
+
+    loadSubAgentList () {
+      this.$http.list({
+        action: 'list',
+        entityId: 'FM_SERVICE',
+        page: this.subAgentCurrentPage,
+        limit: this.subAgentPageSize,
+        'scope.TYPE': 'agent',
+        columnFieldNames: 'ID,NAME#,CODE,NOTE,IMAGE'
+      }).then(data => {
+        this.subAgentList = data.entitys || []
+        this.subAgentTotal = data.total || 0
+      }).catch(() => {})
+    },
+
+    handleSubAgentPageChange (page) {
+      this.subAgentCurrentPage = page
+      this.loadSubAgentList()
+    },
+
+    // ─── 内置工具 ────────────────────────────────────────────────
+    loadSysToolList () {
+      this.$http.list({
+        action: 'list',
+        entityId: 'FM_AI_SYS_TOOL',
+        page: this.sysToolCurrentPage,
+        limit: this.sysToolPageSize,
+        'scope.ENABLE': '1',
+        columnFieldNames: 'ID,NAME,CODE,DESC,ENABLE'
+      }).then(data => {
+        this.sysToolList = data.entitys || []
+        this.sysToolTotal = data.total || 0
+      }).catch(() => {})
+    },
+
+    handleSysToolPageChange (page) {
+      this.sysToolCurrentPage = page
+      this.loadSysToolList()
+    },
+
+    // ─── 技能 ────────────────────────────────────────────────────
+    loadSkillList () {
+      const params = {
+        action: 'list',
+        entityId: 'FM_AI_SKILL',
+        page: this.skillCurrentPage,
+        limit: this.skillPageSize,
+        'scope.STATUS': '1',
+        columnFieldNames: 'ID,NAME#,CODE,DESC,STATUS'
+      }
+      if (this.skillActiveTab === 'platform') {
+        params['scope.SYSTEM|CODE'] = window.BASE_SYSTEM_ID
+      } else {
+        params['scope.SYSTEM'] = this.SYSTEM
+      }
+      this.$http.list(params).then(data => {
+        this.skillList = data.entitys || []
+        this.skillTotal = data.total || 0
+      }).catch(() => {})
+    },
+
+    handleSkillTabChange () {
+      this.skillCurrentPage = 1
+      this.loadSkillList()
+    },
+
+    handleSkillPageChange (page) {
+      this.skillCurrentPage = page
+      this.loadSkillList()
+    },
+
+    // 插入技能：以 `技能编号` 形式插入到光标处
+    insertSkill (item) {
+      if (!this.editor) return
+      this.closeAndCleanSlash()
+      const code = item.CODE || item.NAME
+      const text = '`' + code + '`'
+      const cursor = this.editor.getCursor()
+      this.editor.replaceRange(text, cursor)
+      this.editor.focus()
+      this.editor.setCursor({ line: cursor.line, ch: cursor.ch + text.length })
+      const val = this.editor.getValue()
+      this.emitChange(val)
+      this.updatePreview(val)
+    },
+
+    // ─── 配置文档（树形） ─────────────────────────────────────────
+    loadDocTree () {
+      this.$http.$post({
+        action: 'getTree',
+        entityId: 'FM_AI_DOC',
+        up_field: 'UP',
+        scopeParams: JSON.stringify([]),
+        node: 'root',
+        order_field: '',
+        order_mode: ''
+      }).then(data => {
+        this.docTree = data || []
+      }).catch(() => {})
+    },
+
+    filterDocNode (value, data) {
+      if (!value) return true
+      return (data.text || data.title || '').indexOf(value) !== -1
+    },
+
+    // 点击树节点：叶子节点(文档)作为工具插入；目录节点由 el-tree 自动展开
+    onDocNodeClick (data) {
+      if (data.leaf) this.insertDoc(data)
+    },
+
+    // 插入配置文档：写入 frontmatter 的 docs 区块，并在光标处插入 doc-name 标签
+    insertDoc (item) {
+      if (!this.editor) return
+      this.closeAndCleanSlash()
+      const docEntry = {
+        id: item.ID || item.id,
+        name: item.TITLE || item.text || item.title || ''
+      }
+
+      const { hasFrontmatter, tools, docs, fmLength } = this.parseFrontmatter()
+      const value = this.editor.getValue()
+
+      // 避免重复写入相同 id
+      const exists = docs.some(d => d.id === docEntry.id)
+      if (!exists) docs.push(docEntry)
+
+      const newFm = this.buildFrontmatter(tools, docs)
+      const newValue = hasFrontmatter
+        ? newFm + value.slice(fmLength)
+        : newFm + value
+
+      // 计算光标行偏移（frontmatter 行数变化）
+      const cursor = this.editor.getCursor()
+      const fmLineCount = newFm.split('\n').length - 1
+      const oldFmLineCount = hasFrontmatter
+        ? value.slice(0, fmLength).split('\n').length - 1
+        : 0
+      const lineDelta = fmLineCount - oldFmLineCount
+
+      this.editor.setValue(newValue)
+
+      // 恢复光标并插入 doc-name 标签
+      const newLine = Math.max(0, cursor.line + lineDelta)
+      this.editor.setCursor({ line: newLine, ch: cursor.ch })
+      const tagCursor = this.editor.getCursor()
+      const tag = `<doc-name id="${docEntry.id}" />`
+      this.editor.replaceRange(tag, tagCursor)
+      this.editor.setCursor({ line: tagCursor.line, ch: tagCursor.ch + tag.length })
+      this.editor.focus()
+
+      const val = this.editor.getValue()
+      this.emitChange(val)
+      this.updatePreview(val)
+    },
+
+    // ─── 对外暴露：获取内容 ──────────────────────────────────────
+    getValue () {
+      //
+      return this.editor ? this.editor.getValue() : ''
+    },
+
+    setValue (val) {
+      if (this.editor) {
+        this.editor.setValue(val || '')
+        this.hasContent = (val || '').length > 0
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ai-skill-editor {
+  display: flex;
+  flex-direction: column;
+  background: var(--epx-bg-card);
+  overflow: hidden;
+  border-radius: var(--epx-radius-l);
+}
+
+.editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  height: auto;
+  border-bottom: none;
+  background: transparent;
+  flex-shrink: 0;
+}
+
+.editor-title {
+  font-size: var(--epx-font-size-base);
+  font-weight: 400;
+  color: var(--epx-text);
+}
+
+.editor-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.editor-header--inner {
+  flex-shrink: 0;
+}
+
+.editor-wrap {
+  position: relative;
+  flex: 1;
+  min-height: 300px;
+  display: flex;
+  flex-direction: column;
+
+  &.is-fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    background: var(--epx-bg-card);
+    display: flex;
+    flex-direction: column;
+
+    .editor-container {
+      flex: 1;
+      overflow: hidden;
+    }
+
+    .mode-split {
+      margin: 8px;
+    }
+
+    .editor-pane--input,
+    .editor-pane--preview {
+      margin: 8px;
+    }
+
+     :deep(.CodeMirror) {
+      height: 100%;
+    }
+  }
+}
+
+.editor-container {
+  display: flex;
+  flex: 1;
+  min-height: 300px;
+  overflow: hidden;
+}
+
+.editor-pane {
+  flex: 1;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.editor-pane--input {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--epx-border);
+  border-radius: var(--epx-radius-base);
+  margin: 8px 8px 8px 8px;
+
+   :deep(.CodeMirror) {
+    height: 100%;
+    min-height: 300px;
+    font-size: var(--epx-font-size-base);
+    line-height: 1.8;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    padding: 0 16px 16px 16px;
+    box-sizing: border-box;
+    border: none;
+  }
+
+   :deep(.CodeMirror-scroll) {
+    padding-top: 0;
+  }
+
+   :deep(.CodeMirror-placeholder) {
+    color: var(--epx-text-secondary);
+    padding-left: 0;
+  }
+}
+
+.editor-pane--preview {
+  border: 1px solid var(--epx-border);
+  border-radius: var(--epx-radius-base);
+  margin: 8px 8px 8px 8px;
+  overflow-y: auto;
+}
+
+// 编辑模式：只显示编辑区
+.mode-edit .editor-pane--preview {
+  display: none;
+  border: none;
+  margin: 0;
+}
+
+// 预览模式：只显示预览区
+.mode-preview .editor-pane--input {
+  display: none;
+  border: none;
+  margin: 0;
+}
+
+// 分屏模式：整体边框 + 分割线
+.mode-split {
+  border: 1px solid var(--epx-border);
+  border-radius: var(--epx-radius-base);
+  margin: 8px;
+
+  .editor-pane--input {
+    border: none;
+    border-radius: 0;
+    margin: 0;
+    border-right: 1px solid var(--epx-border);
+  }
+
+  .editor-pane--preview {
+    border: none;
+    border-radius: 0;
+    margin: 0;
+  }
+}
+
+// 预览区 markdown 样式
+.markdown-preview {
+  padding: 16px;
+  font-size: var(--epx-font-size-base);
+  line-height: 1.8;
+  color: var(--epx-text);
+  word-break: break-word;
+
+    :deep(h1),
+    :deep(h2),
+    :deep(h3),
+    :deep(h4),
+    :deep(h5),
+    :deep(h6) {
+      margin: 16px 0 8px;
+      font-weight: 600;
+      color: var(--epx-text);
+    }
+
+    :deep(h1) { font-size: 24px; }
+    :deep(h2) { font-size: var(--epx-font-size-xl); }
+    :deep(h3) { font-size: 18px; }
+
+    :deep(p) {
+      white-space: pre-wrap;
+      margin: 8px 0;
+    }
+:deep(ul),
+:deep(ol) {
+    margin: 8px 0;
+    padding-left: 24px;
+  }
+
+  :deep(li) {
+    margin: 4px 0;
+  }
+
+  :deep(code) {
+    background: var(--epx-bg);
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 13px;
+  }
+
+  :deep(pre) {
+    margin: 12px 0;
+    padding: 12px;
+    border-radius: 6px;
+    overflow-x: auto;
+    white-space: pre-wrap;
+
+    code {
+      background: transparent;
+      padding: 0;
+      color: #abb2bf;
+      font-size: 13px;
+      line-height: 1.5;
+      white-space: pre-wrap;
+    }
+  }
+
+  // frontmatter 区块样式（使用 ::v-deep 穿透 scoped）
+  :deep( :deep(.frontmatter-block)) {
+    margin-bottom: 16px;
+    padding: 12px;
+    background: var(--epx-bg);
+    border: 1px solid var(--epx-border);
+    border-radius: 6px;
+
+    pre {
+      margin: 0;
+      background: transparent;
+      padding: 0;
+      white-space: pre-wrap;
+    }
+
+    code {
+      background: transparent;
+      padding: 0;
+      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+      font-size: 13px;
+      color: var(--epx-text);
+      line-height: 1.6;
+      white-space: pre-wrap;
+    }
+  }
+
+  // highlight.js 代码高亮样式
+  .hljs {
+    background: transparent;
+    color: #abb2bf;
+  }
+
+  blockquote {
+    margin: 12px 0;
+    padding: 8px 16px;
+    border-left: 4px solid #409eff;
+    background: var(--epx-bg);
+    color: var(--epx-text);
+  }
+
+  table {
+    margin: 12px 0;
+    border-collapse: collapse;
+    width: 100%;
+
+    th, td {
+      border: 1px solid var(--epx-border);
+      padding: 8px 12px;
+    }
+
+    th {
+      background: var(--epx-bg);
+      font-weight: 600;
+    }
+  }
+
+  a {
+    color: #409eff;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    border-radius: var(--epx-radius-base);
+  }
+
+  hr {
+    margin: 16px 0;
+    border: none;
+    border-top: 1px solid var(--epx-border);
+  }
+
+  // 工具标签样式（使用 ::v-deep 穿透 scoped）
+   :deep(.tool-tag) {
+    display: inline-block;
+    padding: 4px 10px;
+    border-radius: var(--epx-radius-base);
+    font-size: 13px;
+    margin: 2px 4px;
+    vertical-align: middle;
+    line-height: 1.4;
+    border: 1px solid;
+    font-style: normal;
+  }
+
+  // 工具卡片 - 橙色
+   :deep(.tool-tag--card) {
+    background: #fdf6ec;
+    border-color: #faecd8;
+    color: #e6a23c;
+  }
+
+  // 工具引用 - 绿色
+   :deep(.tool-tag--name) {
+    background: #f0f9eb;
+    border-color: #e1f3d8;
+    color: #67c23a;
+  }
+
+  // 函数 - 蓝色
+   :deep(.tool-tag--func) {
+    background: #ecf5ff;
+    border-color: #d9ecff;
+    color: #409eff;
+  }
+
+  // 动态参数 - 紫色
+   :deep(.tool-tag--param) {
+    background: #f4ecfd;
+    border-color: #e9d8fd;
+    color: #5f0cb2;
+  }
+
+  // 配置文档 - 青色
+   :deep(.tool-tag--doc) {
+    background: #e8f8f5;
+    border-color: #d1f2eb;
+    color: #16a085;
+  }
+}
+
+// 编辑器按钮组
+.mode-btn-group {
+  margin-right: 8px;
+
+  .el-button {
+    padding: 5px 10px;
+    font-size: var(--epx-font-size-s);
+  }
+}
+
+.editor-fx-icon {
+  position: absolute;
+  bottom: 12px;
+  right: 16px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--epx-text-secondary);
+  font-size: var(--epx-font-size-l);
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.fullscreen-btn {
+  color: var(--epx-text-secondary) !important;
+  font-size: var(--epx-font-size-s) !important;
+  padding: 0 !important;
+
+  &:hover {
+    color: var(--epx-text) !important;
+  }
+
+  i {
+    font-size: 13px;
+    margin-right: 2px;
+  }
+}
+
+// 快捷插入弹窗
+.ai-skill-editor  :deep(.quick-insert-dialog) {
+  .el-dialog__body {
+    padding: 0 20px 16px;
+  }
+}
+
+.quick-insert-tabs {
+   :deep(.el-tabs__header) {
+    margin-bottom: 12px;
+  }
+
+   :deep(.el-tabs__item) {
+    font-size: var(--epx-font-size-base);
+  }
+}
+
+.inner-tabs {
+   :deep(.el-tabs__header) {
+    margin-bottom: 12px;
+  }
+
+   :deep(.el-tabs__item) {
+    font-size: 13px;
+  }
+}
+
+.tab-filter {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+
+  label {
+    font-size: var(--epx-font-size-base);
+    color: var(--epx-text);
+    margin-right: 8px;
+    white-space: nowrap;
+  }
+
+   :deep(.epx-object) {
+    width: 260px;
+  }
+}
+
+.empty-tip {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 330px;
+  color: var(--epx-text-secondary);
+
+  i {
+    font-size: 40px;
+    margin-bottom: 10px;
+  }
+
+  p {
+    font-size: var(--epx-font-size-base);
+    margin: 0;
+  }
+}
+
+// 动态参数树
+.dynamic-param-pane {
+  height: 380px;
+  overflow-y: auto;
+
+  .param-leaf-mark {
+    @include font_color_primary;
+    margin-right: 5px;
+  }
+
+  .custom-tree-node {
+    display: inline-flex;
+    align-items: center;
+    font-size: 13px;
+  }
+}
+
+// 公式 tab
+.formula-pane {
+  height: 380px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  &__tip {
+    max-width: 460px;
+    margin: 0 0 16px;
+    font-size: 13px;
+    line-height: 1.7;
+    color: var(--epx-text-secondary);
+    text-align: center;
+  }
+}
+
+// 配置文档树
+.config-doc-pane {
+  &__filter {
+    margin-bottom: 10px;
+  }
+  &__tree {
+    height: 380px;
+    overflow: auto;
+  }
+}
+.config-doc-node {
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+  i {
+    margin-right: 6px;
+    color: var(--epx-text-secondary);
+  }
+}
+</style>
+
+<!-- append-to-body 后弹窗脱离 scoped 作用域，这里用全局样式补回内边距 -->
+<style lang="scss">
+.quick-insert-dialog .el-dialog__body {
+  padding: 0 20px 16px;
+}
+</style>