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

package/src/components/custom-bpmn/components/TestDialog.vue

@@ -0,0 +1,1068 @@
+<template>
+  <el-dialog
+    custom-class="dialog test-dialog"
+    v-model="dialogVisible"
+    width="720px"
+    :close-on-click-modal="false"
+    append-to-body
+  >
+    <template v-slot:title><div class="test-dialog__title">
+      <i class="el-icon-cpu test-dialog__title-icon"></i>
+      <span class="test-dialog__title-main">逻辑编排测试</span>
+      <span class="test-dialog__title-sub" v-if="processInfo.NAME">{{processInfo.NAME}}<template v-if="subCode"> · {{subCode}}</template></span>
+    </div></template>
+
+    <div class="test-dialog__body">
+      <!-- 提示 -->
+      <div class="test-dialog__tip">
+        <i class="el-icon-info"></i>
+        <span>录入参数后点击「执行测试」，在不影响线上数据的情况下试运行该逻辑编排。</span>
+      </div>
+
+      <!-- 全局参数 -->
+      <div class="test-section">
+        <div class="test-section__title">
+          <span class="test-section__bar"></span>
+          <span>全局参数</span>
+          <span class="test-section__sub">流程中定义的参数</span>
+        </div>
+        <div class="test-table" v-if="inputParams.length">
+          <div class="test-table__head">
+            <span class="test-table__col test-table__col--param">参数</span>
+            <span class="test-table__col test-table__col--type">类型</span>
+            <span class="test-table__col test-table__col--value">参数值</span>
+          </div>
+          <div class="test-table__row" v-for="param in inputParams" :key="param.id">
+            <div class="test-table__col test-table__col--param">
+              <div class="test-table__param-name">{{param.name}}</div>
+              <div class="test-table__param-code">{{param.id}}</div>
+            </div>
+            <div class="test-table__col test-table__col--type">
+              <span class="test-tag">{{getParamTypeName(param.type)}}</span>
+            </div>
+            <div class="test-table__col test-table__col--value">
+              <epx-table-form-item
+                v-if="inputKind(param) === 'object'"
+                :show-label="false"
+                valueWidth="auto"
+                :model-value="globalValues[param.id]"
+                @update:model-value="v => changeGlobalObject(param, v)"
+                :field-configs="{ attriName: param.id, dataType: 'object', codeKey: param.object, attriLabel: param.name, state: 'ADD' }"
+              ></epx-table-form-item>
+              <el-select
+                v-else-if="inputKind(param) === 'boolean'"
+                v-model="globalValues[param.id]"
+                placeholder="请选择"
+                clearable
+              >
+                <el-option label="是 (true)" :value="true"></el-option>
+                <el-option label="否 (false)" :value="false"></el-option>
+              </el-select>
+              <el-date-picker
+                v-else-if="inputKind(param) === 'date'"
+                v-model="globalValues[param.id]"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="年 /月 /日"
+              ></el-date-picker>
+              <el-input
+                v-else-if="inputKind(param) === 'number'"
+                v-model="globalValues[param.id]"
+                type="number"
+                placeholder="请输入参数值"
+              ></el-input>
+              <el-input
+                v-else-if="inputKind(param) === 'json'"
+                v-model="globalValues[param.id]"
+                type="textarea"
+                :rows="2"
+                placeholder="请输入 JSON"
+              ></el-input>
+              <el-input
+                v-else
+                v-model="globalValues[param.id]"
+                placeholder="请输入参数值"
+              ></el-input>
+            </div>
+          </div>
+        </div>
+        <div class="test-empty" v-else>该逻辑编排未定义全局参数</div>
+      </div>
+
+      <!-- 业务对象字段参数 -->
+      <div class="test-section">
+        <div class="test-section__title">
+          <span class="test-section__bar"></span>
+          <span>业务对象字段参数</span>
+          <span class="test-section__sub" v-if="businessMetaName">关联业务对象：{{businessMetaName}}</span>
+        </div>
+        <div class="field-param" v-for="(field, index) in fieldParams" :key="field.code + index">
+          <div class="field-param__head">
+            <span class="field-param__name">{{field.name}}（{{field.code}}）</span>
+            <span class="test-tag">{{dataTypeLabel(field.dataType)}}</span>
+          </div>
+          <div class="field-param__value">
+            <epx-table-form-item
+              :show-label="false"
+              valueWidth="auto"
+              :model-value="field.value"
+              @update:model-value="v => changeFieldValue(field, v)"
+              :field-configs="{ attriName: field.code, dataType: field.dataType, codeKey: field.codeKey, attriLabel: field.name, state: 'ADD' }"
+            ></epx-table-form-item>
+          </div>
+          <i class="field-param__del el-icon-delete" @click="removeFieldParam(index)"></i>
+        </div>
+        <el-popover trigger="click" placement="bottom-start" :tabindex="1" v-model:visible="fieldAddVisible">
+          <template v-slot:reference><el-button type="text" icon="el-icon-plus">添加字段参数</el-button></template>
+          <div class="field-add__popper">
+            <!-- 对象视图字段树（含关联对象分组）：点击分组展开，点击字段选中 -->
+            <el-tree
+              v-if="fieldTreeData.length"
+              class="field-add__tree"
+              :data="fieldTreeData"
+              :props="fieldTreeProps"
+              @node-click="onFieldNodeClick"
+            >
+              <template v-slot="{ node, data }">
+                <span
+                  :class="{ 'field-add__node--otm': data.relationSort === '1' }"
+                  v-html="node.label"
+                ></span>
+              </template>
+            </el-tree>
+            <!-- 兜底：主对象扁平字段 -->
+            <template v-else>
+              <div class="field-add__empty" v-if="!businessFields.length">暂无可选字段</div>
+              <div
+                class="field-add__item"
+                v-for="(field, i) in businessFields"
+                :key="field.code + i"
+                @click="onFlatFieldClick(field)"
+              >{{field.name}}</div>
+            </template>
+          </div>
+        </el-popover>
+      </div>
+    </div>
+
+    <template v-slot:footer><span class="dialog-footer">
+      <el-button @click="cancel">取消</el-button>
+      <el-button @click="clearAll">清空</el-button>
+      <el-button type="primary" :loading="loading" icon="el-icon-cpu" @click="executeTest">执行测试</el-button>
+    </span></template>
+
+    <!-- 执行结果 -->
+    <el-dialog
+      custom-class="dialog test-result-dialog"
+      v-model="resultVisible"
+      width="800px"
+      append-to-body
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <template v-slot:title><div class="test-dialog__title">
+        <i class="el-icon-document test-dialog__title-icon"></i>
+        <span class="test-dialog__title-main">执行结果</span>
+        <span class="test-dialog__title-sub" v-if="processInfo.NAME">{{processInfo.NAME}}<template v-if="subCode"> · {{subCode}}</template></span>
+      </div></template>
+      <div class="test-result" v-loading="resultLoading">
+        <!-- 状态横幅 -->
+        <div :class="['result-banner', resultSuccess ? 'result-banner--success' : 'result-banner--fail']">
+          <i :class="['result-banner__icon', resultSuccess ? 'el-icon-success' : 'el-icon-error']"></i>
+          <div class="result-banner__text">
+            <div class="result-banner__title">{{resultSuccess ? '执行成功' : '执行失败'}}</div>
+            <div class="result-banner__desc">{{resultDesc}}</div>
+          </div>
+          <div class="result-banner__req" v-if="result.requestId">
+            <div class="result-banner__req-label">请求标识</div>
+            <div class="result-banner__req-value">{{result.requestId}}</div>
+          </div>
+        </div>
+
+        <!-- 执行失败详细信息（默认收起） -->
+        <div class="result-section result-fail" v-if="!resultSuccess && result.errorInfo">
+          <div class="result-fail__head" @click="failDetailOpen = !failDetailOpen">
+            <span class="result-fail__bar"></span>
+            <span class="result-fail__label">执行失败详细信息</span>
+            <span class="result-fail__toggle">
+              {{failDetailOpen ? '收起' : '展开'}}
+              <i :class="failDetailOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
+            </span>
+          </div>
+          <pre v-show="failDetailOpen" class="result-fail__detail">{{result.errorInfo}}</pre>
+        </div>
+
+        <!-- 执行流程图 -->
+        <div class="result-section">
+          <div class="result-section__title">
+            <span class="result-section__bar"></span>
+            <span>执行流程图</span>
+            <span class="result-legend">
+              <span class="result-legend__item"><i class="result-legend__dot result-legend__dot--success"></i>已执行</span>
+              <span class="result-legend__item"><i class="result-legend__dot result-legend__dot--fail"></i>执行失败</span>
+              <span class="result-legend__item"><i class="result-legend__dot result-legend__dot--skip"></i>未经过</span>
+              <span class="result-legend__tip">鼠标点击节点可查看节点执行详情</span>
+            </span>
+          </div>
+          <div class="result-chart">
+            <epx-process-chart
+              v-if="resultVisible && resultLogId"
+              :key="resultLogId"
+              :chartConfigs="processChartConfigs"
+            ></epx-process-chart>
+          </div>
+        </div>
+
+        <!-- 提交参数 -->
+        <div class="result-section">
+          <div class="result-section__title">
+            <span class="result-section__bar"></span>
+            <span>提交参数</span>
+          </div>
+          <epx-form-json
+            v-if="submitJson"
+            class="result-json-editor"
+            :show-label="false"
+            :model-value="submitRaw"
+            :field-configs="jsonFieldConfigs('submitParams')"
+          ></epx-form-json>
+          <pre v-else class="result-json">{{submitRaw || '—'}}</pre>
+        </div>
+
+        <!-- 输出参数 -->
+        <div class="result-section">
+          <div class="result-section__title">
+            <span class="result-section__bar"></span>
+            <span>输出参数</span>
+            <span :class="['result-tag', resultSuccess ? 'result-tag--success' : 'result-tag--fail']">{{resultSuccess ? 'success' : 'fail'}}</span>
+          </div>
+          <epx-form-json
+            v-if="outputJson"
+            class="result-json-editor"
+            :show-label="false"
+            :model-value="outputRaw"
+            :field-configs="jsonFieldConfigs('outputParams')"
+          ></epx-form-json>
+          <pre v-else class="result-json">{{outputRaw || '—'}}</pre>
+        </div>
+      </div>
+      <template v-slot:footer><span class="dialog-footer">
+        <el-button @click="resultVisible = false">关闭</el-button>
+        <el-button type="primary" icon="el-icon-cpu" @click="continueTest">继续测试</el-button>
+      </span></template>
+    </el-dialog>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'epx-bpmn-test-dialog',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    // 流程/逻辑编排信息（NAME、NUMBER、KEY、ENTITY）
+    processInfo: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    // 流程中定义的全局参数（来自 Process 元素的 camunda:inParam）
+    inParamData: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    // 关联业务对象的字段配置
+    businessMeta: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    businessMetaId: {
+      type: String,
+      default: ''
+    },
+    businessMetaName: {
+      type: String,
+      default: ''
+    },
+    // 关联业务对象的视图字段树（含关联对象子级，来自 ADD_META_VIEW_FIELDS）
+    treeFieldStore: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      // 全局参数值，按参数 id 存储
+      globalValues: {},
+      // 业务对象字段参数列表
+      fieldParams: [],
+      // 添加字段参数下拉是否展开
+      fieldAddVisible: false,
+      // 添加字段参数树字段映射（对象视图字段树，含关联对象子级）
+      fieldTreeProps: { label: 'text', children: 'children' },
+      // FLOW_PARAMS_TYPE 代码表 code -> name 映射
+      paramsTypeMap: {},
+      loading: false,
+      // 执行结果
+      resultVisible: false,
+      resultLoading: false,
+      // 执行日志 id（用于流程图按日志渲染执行轨迹）
+      resultLogId: '',
+      // 执行失败详细信息是否展开（默认收起）
+      failDetailOpen: false,
+      // 提交参数 / 输出参数：xxxJson 非空表示是 JSON（用编辑器展示），xxxRaw 为展示文本
+      submitJson: null,
+      submitRaw: '',
+      outputJson: null,
+      outputRaw: '',
+      // 归一化后的执行结果（状态区）
+      result: {
+        success: false,
+        requestId: '',
+        message: '',
+        errorInfo: '',
+        executedNodes: 0,
+        finishedAt: ''
+      }
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get () {
+        return this.visible
+      },
+      set (v) {
+        this.$emit('update:visible', v)
+      }
+    },
+    subCode () {
+      return this.processInfo.NUMBER || this.processInfo.KEY || ''
+    },
+    // 录入测试值的参数：输出参数不为「是」(isOut!=='1') 且 输入参数不为「否」(isIn!=='0')
+    inputParams () {
+      return (this.inParamData || []).filter(param => param.isOut !== '1' && param.isIn !== '0')
+    },
+    businessFields () {
+      return (this.businessMeta || []).map(field => this.normalizeField(field)).filter(field => field.code)
+    },
+    // 添加字段参数的树数据：主对象字段在前，关联对象作为可展开分组在后
+    // （treeFieldStore = [主对象组, 关联对象组...]，每组 children 为其字段）
+    fieldTreeData () {
+      const list = this.treeFieldStore || []
+      if (!list.length) return []
+      const [main, ...rest] = list
+      const mainFields = (main && main.children) || []
+      return [...mainFields, ...rest]
+    },
+    // 流程图配置：按日志 id 拉取带执行轨迹的流程定义 XML，节点可点开执行详情
+    processChartConfigs () {
+      return {
+        processXmlParams: {
+          action: 'getRuleDefinitionXmlByLogId',
+          entityId: 'ACT_RU_EXECUTION',
+          id: this.resultLogId
+        },
+        type: 'rule',
+        ruleDetailPage: '4737C1E6B934463DBE55ED353796EEBF'
+      }
+    },
+    resultSuccess () {
+      return !!this.result.success
+    },
+    resultDesc () {
+      if (this.resultSuccess) {
+        return `本次试运行已完成，共执行 ${this.result.executedNodes || 0} 个节点`
+      }
+      return this.result.message || '本次试运行未通过'
+    },
+    // JSON 展示字段配置（只读）
+    jsonFieldConfigs () {
+      return name => ({ attriName: name, dataType: 'json', state: 'DETAIL', readonly: '1' })
+    }
+  },
+  watch: {
+    visible (v) {
+      if (v) this.onOpen()
+    }
+  },
+  methods: {
+    async onOpen () {
+      await this.fetchParamsType()
+      this.initGlobalValues()
+      this.fieldParams = []
+    },
+    async fetchParamsType () {
+      let options = this.$store.getters.getCodeById('FLOW_PARAMS_TYPE')
+      if (!options) {
+        await this.$store.dispatch({
+          type: 'ADD_LIST',
+          key: 'FLOW_PARAMS_TYPE',
+          dataType: 'list'
+        }).then(data => {
+          options = data
+        }).catch(() => {})
+      }
+      const map = {}
+      ;(options || []).forEach(item => {
+        map[item.code] = item.name
+      })
+      this.paramsTypeMap = map
+    },
+    getParamTypeName (type) {
+      return type ? (this.paramsTypeMap[type] || '未设置') : '未设置'
+    },
+    // 根据参数类型决定渲染哪种输入控件
+    inputKind (param) {
+      const type = param.type
+      const name = this.getParamTypeName(type)
+      if (type === '2') return 'object'
+      if (/布尔/.test(name)) return 'boolean'
+      if (/日期|时间/.test(name)) return 'date'
+      if (type === '4' || /数字|数值|整数|金额/.test(name)) return 'number'
+      if (['3', '5', '6', '7', '8', '9', '10'].includes(type)) return 'json'
+      return 'text'
+    },
+    initGlobalValues () {
+      const values = {}
+      this.inputParams.forEach(param => {
+        let def = param.value === undefined || param.value === null ? '' : param.value
+        if (this.inputKind(param) === 'boolean') {
+          if (def === 'true' || def === true) def = true
+          else if (def === 'false' || def === false) def = false
+          else def = ''
+        }
+        values[param.id] = def
+      })
+      this.globalValues = values
+    },
+    changeGlobalObject (param, v) {
+      let value = ''
+      if (Array.isArray(v)) {
+        value = v.map(item => item.id || item).join(',')
+      } else if (v && typeof v === 'object') {
+        value = v.id
+      } else {
+        value = v
+      }
+      this.globalValues[param.id] = value
+    },
+    dataTypeLabel (dataType) {
+      const map = {
+        text: '文本',
+        textarea: '文本',
+        bigtext: '文本',
+        int: '数字',
+        num: '数字',
+        order: '数字',
+        date: '日期',
+        datetime: '日期',
+        date_ym: '日期',
+        year: '日期',
+        time: '时间',
+        list: '选项',
+        radio: '选项',
+        multiList: '选项',
+        multibox: '选项',
+        switch: '布尔',
+        object: '对象',
+        user: '对象',
+        dept: '对象',
+        multiobject: '对象',
+        treeList: '对象'
+      }
+      return map[dataType] || dataType || ''
+    },
+    addFieldParam (field) {
+      if (!field || !field.code) return
+      if (this.fieldParams.some(item => item.code === field.code)) {
+        this.$message.warning('该字段参数已添加')
+        return
+      }
+      this.fieldParams.push({ ...field, value: '', valueC: '' })
+    },
+    // 字段元数据归一化（兜底用：主对象扁平字段）
+    normalizeField (raw) {
+      const attribute = raw.attribute || {}
+      return {
+        name: raw.attriLabel,
+        code: raw.attriName,
+        dataType: raw.dataType,
+        codeKey: raw.codeKey || attribute.relatedEntity,
+        relatedEntity: attribute.relatedEntity
+      }
+    },
+    stripHtml (str) {
+      return typeof str === 'string' ? str.replace(/<[^>]+>/g, '').trim() : (str == null ? '' : String(str))
+    },
+    // 根据节点逐级父节点拼出字段全路径名（如 部门·名称）
+    buildFieldName (node) {
+      const getLabel = n => {
+        const d = (n && n.data) || {}
+        return d.name || this.stripHtml(d.text) || d.code || ''
+      }
+      let name = getLabel(node)
+      let cur = node && node.parent
+      while (cur && cur.data && !cur.data.isMain && (cur.data.name || cur.data.text)) {
+        name = getLabel(cur) + '·' + name
+        cur = cur.parent
+      }
+      return name
+    },
+    // 选中对象视图字段树节点：添加为字段参数并收起下拉（field 已是路径化字段标识）
+    onFieldNodeClick (data, node) {
+      // 分组/对象节点（有子级）仅展开，不作为字段添加
+      if (data.children && data.children.length) return
+      const code = data.field || data.code
+      if (!code) return
+      this.addFieldParam({
+        name: this.buildFieldName(node),
+        code,
+        dataType: data.dataType || (data.type === 'meta' ? 'object' : 'text'),
+        codeKey: data.codeKey || data.relatedEntity
+      })
+      this.fieldAddVisible = false
+    },
+    // 兜底扁平字段点击
+    onFlatFieldClick (field) {
+      this.addFieldParam(field)
+      this.fieldAddVisible = false
+    },
+    removeFieldParam (index) {
+      this.fieldParams.splice(index, 1)
+    },
+    changeFieldValue (field, v) {
+      let value = ''
+      let label = ''
+      if (Array.isArray(v)) {
+        value = v.map(item => item.id || item).join(',')
+        label = v.map(item => item.name || item).join('、')
+      } else if (v && typeof v === 'object') {
+        value = v.id
+        label = v.name
+      } else {
+        value = v
+      }
+      field.value = value
+      field.valueC = label || value
+    },
+    clearAll () {
+      this.initGlobalValues()
+      this.fieldParams = []
+    },
+    cancel () {
+      this.dialogVisible = false
+    },
+    // 收集测试入参：全局参数 + 业务对象字段（主对象）
+    buildPayload () {
+      const globalParams = {}
+      this.inputParams.forEach(param => {
+        const v = this.globalValues[param.id]
+        if (v === '' || v === undefined || v === null) return
+        globalParams[param.id] = v
+      })
+      const businessObject = {}
+      this.fieldParams.forEach(field => {
+        if (field.value === '' || field.value === undefined || field.value === null) return
+        businessObject[field.code] = field.value
+      })
+      return { globalParams, businessObject }
+    },
+    executeTest () {
+      const { globalParams, businessObject } = this.buildPayload()
+      // 本地重建提交参数用于结果弹窗展示（日志 PARAMS 优先覆盖）
+      this.setJson('submit', {
+        flow: this.processInfo.KEY,
+        globalParams,
+        businessObject: this.businessMetaName || this.businessMetaId,
+        fieldParams: businessObject
+      })
+      // 走 /ruleTest/v1 试运行逻辑编排，路径末段为逻辑编排 KEY（rule）。
+      // TODO: action 名与入参结构（globalParams / businessObject 的打包方式）待后端确认后调整。
+      const payload = {
+        action: 'execute', // TODO: 替换为后端约定的试运行 action
+        entityId: this.processInfo.ENTITY,
+        rule: this.processInfo.KEY,
+        ...globalParams,
+        bean: businessObject
+      }
+      console.log('[逻辑编排测试] 试运行入参：', payload)
+      this.loading = true
+      this.$http.$post(payload, { requestKey: 'ruleTest' })
+        .then(res => {
+          // 返回值即执行日志 id，查询日志内容并展示结果
+          if (res) {
+            this.resultLogId = res
+            this.fetchLog(res)
+          } else {
+            this.$message.success('测试执行成功')
+          }
+        })
+        .catch(err => {
+          this.$message.error((err && err.message) || '测试执行失败')
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    // 根据日志 id 查询执行日志并归一化为结果
+    fetchLog (logId) {
+      this.resultVisible = true
+      this.resultLoading = true
+      this.$http.get({ entityId: 'FM_RULE_LOG', id: logId })
+        .then(data => {
+          this.applyLog((data && data.data) || data || {})
+        })
+        .catch(err => {
+          this.$message.error((err && err.message) || '获取执行日志失败')
+        })
+        .finally(() => {
+          this.resultLoading = false
+        })
+    },
+    // 归一化日志记录(FM_RULE_LOG) -> 结果状态 + 提交/输出参数
+    // PARAMS 输入参数、RESPONSE 响应结果、ERROR_INFO 错误信息
+    applyLog (log = {}) {
+      const output = this.safeParse(log.RESPONSE) || {}
+      const errorInfo = log.ERROR_INFO || ''
+      // 提交参数：日志 PARAMS 优先；输出参数：RESPONSE（为空且失败时回退错误信息）
+      if (log.PARAMS) this.setJson('submit', log.PARAMS)
+      this.setJson('output', log.RESPONSE, errorInfo)
+      const success = errorInfo ? false : (output.success !== undefined ? !!output.success : true)
+      // 每次出结果默认收起失败详情
+      this.failDetailOpen = false
+      this.result = {
+        success,
+        requestId: output.requestId || '',
+        // 横幅仅显示简要信息，完整错误堆栈放到「执行失败详细信息」中
+        message: output.message || '',
+        errorInfo,
+        executedNodes: output.executedNodes != null ? output.executedNodes : 0,
+        finishedAt: output.finishedAt || ''
+      }
+    },
+    // 设置 提交/输出 参数：是 JSON 用编辑器展示，否则原文展示
+    setJson (key, raw, fallbackText) {
+      const parsed = this.safeParse(raw)
+      if (parsed && typeof parsed === 'object') {
+        this[key + 'Json'] = parsed
+        this[key + 'Raw'] = JSON.stringify(parsed, null, 2)
+      } else {
+        this[key + 'Json'] = null
+        this[key + 'Raw'] = (typeof raw === 'string' ? raw : '') || fallbackText || ''
+      }
+    },
+    safeParse (v) {
+      if (!v) return null
+      if (typeof v === 'object') return v
+      try {
+        return JSON.parse(v)
+      } catch (e) {
+        return null
+      }
+    },
+    // 返回测试录入弹窗继续测试
+    continueTest () {
+      this.resultVisible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.test-dialog__title {
+  display: flex;
+  align-items: center;
+}
+.test-dialog__title-icon {
+  font-size: 18px;
+  margin-right: 8px;
+  @include font_color_primary;
+}
+.test-dialog__title-main {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-title);
+}
+.test-dialog__title-sub {
+  margin-left: 10px;
+  font-size: 13px;
+  color: var(--color-text-assistant);
+}
+.test-dialog__body {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+.test-dialog__tip {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: var(--border-radius);
+  background: #f5f7fa;
+  color: var(--color-text-secondary);
+  font-size: 13px;
+  margin-bottom: 16px;
+  i {
+    @include font_color_primary;
+    margin-right: 6px;
+    font-size: 15px;
+  }
+}
+.test-section {
+  margin-bottom: 18px;
+}
+.test-section__title {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text-title);
+  margin-bottom: 12px;
+}
+.test-section__bar {
+  display: inline-block;
+  width: 3px;
+  height: 14px;
+  border-radius: 2px;
+  margin-right: 8px;
+  @include bg_color_primary;
+}
+.test-section__sub {
+  margin-left: 10px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-text-assistant);
+}
+.test-table {
+  border: 1px solid #e3e3e3;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+}
+.test-table__head {
+  display: flex;
+  background: #f5f7fa;
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+.test-table__row {
+  display: flex;
+  border-top: 1px solid #e3e3e3;
+}
+.test-table__col {
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.test-table__col--param {
+  width: 40%;
+}
+.test-table__col--type {
+  width: 16%;
+}
+.test-table__col--value {
+  width: 44%;
+}
+.test-table__param-name {
+  font-size: 14px;
+  color: var(--color-text-primary);
+}
+.test-table__param-code {
+  font-size: 12px;
+  color: var(--color-text-assistant);
+  margin-top: 2px;
+}
+.test-tag {
+  display: inline-block;
+  padding: 1px 8px;
+  font-size: 12px;
+  border-radius: var(--border-radius);
+  background: #eef1f6;
+  color: var(--color-text-secondary);
+  width: fit-content;
+}
+.test-empty {
+  padding: 16px;
+  text-align: center;
+  color: var(--color-text-assistant);
+  font-size: 13px;
+  background: #f5f7fa;
+  border-radius: var(--border-radius);
+}
+.field-param {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  border-radius: var(--border-radius);
+  background: #f5f7fa;
+  margin-bottom: 10px;
+}
+.field-param__head {
+  width: 40%;
+  display: flex;
+  align-items: center;
+}
+.field-param__name {
+  font-size: 14px;
+  color: var(--color-text-primary);
+  margin-right: 8px;
+}
+.field-param__value {
+  flex: 1;
+}
+.field-param__del {
+  margin-left: 10px;
+  color: var(--color-text-assistant);
+  cursor: pointer;
+  font-size: 16px;
+  &:hover {
+    color: #f56c6c;
+  }
+}
+.field-add__popper {
+  min-width: 220px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+.field-add__tree {
+  min-width: 200px;
+  :deep(.el-tree-node__content) {
+    height: 32px;
+  }
+}
+/* 一对多关联（relationSort === '1'）标红提示 */
+.field-add__node--otm {
+  color: #f56c6c;
+}
+.field-add__item {
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--color-text-primary);
+  &:hover {
+    background: #f5f7fa;
+    @include font_color_primary;
+  }
+}
+.field-add__empty {
+  padding: 12px;
+  text-align: center;
+  color: var(--color-text-assistant);
+  font-size: 13px;
+}
+.test-dialog {
+  :deep(.el-input),
+  :deep(.el-date-editor),
+  :deep(.el-select) {
+    width: 100%;
+  }
+}
+/* 执行结果弹窗 */
+.test-result {
+  max-height: 70vh;
+  overflow-y: auto;
+}
+.result-banner {
+  display: flex;
+  align-items: center;
+  padding: 14px 16px;
+  border-radius: var(--border-radius);
+  margin-bottom: 18px;
+}
+.result-banner--success {
+  background: rgba(103, 194, 58, .1);
+}
+.result-banner--fail {
+  background: rgba(245, 108, 108, .1);
+}
+.result-banner__icon {
+  font-size: 28px;
+  margin-right: 12px;
+}
+.result-banner--success .result-banner__icon {
+  color: #67c23a;
+}
+.result-banner--fail .result-banner__icon {
+  color: #f56c6c;
+}
+.result-banner__text {
+  flex: 1;
+}
+.result-banner__title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--color-text-title);
+}
+.result-banner__desc {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+  margin-top: 2px;
+}
+.result-banner__req {
+  text-align: right;
+}
+.result-banner__req-label {
+  font-size: 12px;
+  color: var(--color-text-assistant);
+}
+.result-banner__req-value {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+  font-weight: 600;
+}
+/* 执行失败详细信息（可展开收起） */
+.result-fail {
+  border: 1px solid rgba(245, 108, 108, .3);
+  border-radius: var(--border-radius);
+  background: rgba(245, 108, 108, .04);
+  overflow: hidden;
+}
+.result-fail__head {
+  display: flex;
+  align-items: center;
+  padding: 10px 14px;
+  cursor: pointer;
+  user-select: none;
+}
+.result-fail__bar {
+  display: inline-block;
+  width: 3px;
+  height: 14px;
+  border-radius: 2px;
+  margin-right: 8px;
+  background: #f56c6c;
+}
+.result-fail__label {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 600;
+  color: #f56c6c;
+}
+.result-fail__toggle {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  i {
+    margin-left: 4px;
+  }
+}
+.result-fail__detail {
+  margin: 0;
+  padding: 12px 14px;
+  border-top: 1px dashed rgba(245, 108, 108, .3);
+  background: #fff;
+  font-size: 13px;
+  line-height: 1.6;
+  color: #f56c6c;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 260px;
+  overflow: auto;
+}
+.result-section {
+  margin-bottom: 18px;
+}
+.result-section__title {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text-title);
+  margin-bottom: 12px;
+}
+.result-section__bar {
+  display: inline-block;
+  width: 3px;
+  height: 14px;
+  border-radius: 2px;
+  margin-right: 8px;
+  @include bg_color_primary;
+}
+.result-legend {
+  display: flex;
+  align-items: center;
+  margin-left: 16px;
+  font-weight: 400;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+.result-legend__item {
+  display: flex;
+  align-items: center;
+  margin-right: 12px;
+}
+.result-legend__dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  margin-right: 4px;
+}
+.result-legend__dot--success {
+  background: #67c23a;
+}
+.result-legend__dot--fail {
+  background: #f56c6c;
+}
+.result-legend__dot--skip {
+  background: #c0c4cc;
+}
+.result-legend__tip {
+  color: var(--color-text-assistant);
+}
+.result-chart {
+  height: 320px;
+  border: 1px solid #e3e3e3;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  :deep(.epx-process-chart__container) {
+    min-height: auto;
+    padding: 12px;
+  }
+}
+.result-tag {
+  margin-left: 10px;
+  padding: 1px 8px;
+  font-size: 12px;
+  font-weight: 400;
+  border-radius: var(--border-radius);
+}
+.result-tag--success {
+  color: #67c23a;
+  background: rgba(103, 194, 58, .12);
+}
+.result-tag--fail {
+  color: #f56c6c;
+  background: rgba(245, 108, 108, .12);
+}
+.result-json {
+  margin: 0;
+  padding: 12px 14px;
+  background: #f5f7fa;
+  border-radius: var(--border-radius);
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--color-text-primary);
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 240px;
+  overflow: auto;
+}
+.result-json-editor {
+  width: 100%;
+  border: 1px solid #e3e3e3;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  :deep(.CodeMirror) {
+    height: auto;
+    max-height: 240px;
+  }
+}
+</style>