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

package/src/base/entity-view-config/FieldPanel.vue

@@ -0,0 +1,742 @@
+<template>
+  <div class="field-panel">
+    <div class="field-panel__title">
+      <span class="field-panel__title-bar"></span>字段配置
+      <span class="field-panel__title-sub">左侧维护视图字段列表，右侧设置选中字段的属性</span>
+    </div>
+    <div class="field-panel__split">
+      <div class="field-panel__list">
+        <div class="field-panel__toolbar">
+          <el-button type="primary" size="small" icon="el-icon-plus" @click="openObjectDialog">添加对象字段</el-button>
+          <el-button size="small" :class="{ 'field-panel__btn-on': draft && draft.DATA_SOURCE === 'formula' }" @click="startDraft('formula')">
+            添加公式字段
+          </el-button>
+          <el-button size="small" :class="{ 'field-panel__btn-on': draft && draft.DATA_SOURCE === 'fixed' }" @click="startDraft('fixed')">
+            添加指定值字段
+          </el-button>
+          <span class="field-panel__total">已选字段 <b>{{ fields.length }}</b></span>
+        </div>
+        <el-table
+          :data="fields"
+          size="small"
+          class="field-panel__table"
+          highlight-current-row
+          :row-class-name="rowClassName"
+          @row-click="selectRow"
+        >
+          <el-table-column type="index" label="序号" width="50"></el-table-column>
+          <el-table-column prop="NAME" label="字段名称" min-width="110" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="CODE" label="编号" min-width="110" show-overflow-tooltip>
+            <template v-slot="{ row }">
+              <span class="field-panel__mono">{{ row.CODE }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="数据来源" width="120">
+            <template v-slot="{ row }">
+              <span>{{ dataSourceLabel(row.DATA_SOURCE) }}</span>
+              <span v-if="row.DATA_SOURCE === 'field' && row.VALUE_FN" class="field-panel__fn-chip">
+                {{ valueFnLabel(row.VALUE_FN) }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="来源字段" min-width="170">
+            <template v-slot="{ row }">
+              <span v-if="row.DATA_SOURCE === 'field'" :class="['field-panel__srcf', row.SOURCE_CODE ? 'is-rel' : 'is-main']">
+                {{ sourceCellText(row) }}
+              </span>
+              <span v-else-if="row.DATA_SOURCE === 'formula' && formulaRefs(row).length" class="field-panel__refs">
+                <span v-for="(ref, index) in formulaRefs(row)" :key="index" class="field-panel__ref">{{ ref }}</span>
+              </span>
+              <span v-else-if="!unionRefs(row).length" class="field-panel__none">—</span>
+              <span v-if="unionRefs(row).length" class="field-panel__union-refs">
+                <span
+                  v-for="ref in unionRefs(row)"
+                  :key="ref.key"
+                  class="field-panel__union-ref"
+                  :title="ref.title"
+                ><i class="el-icon-copy-document"></i>{{ ref.text }}</span>
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="VIEW_TYPE" label="类型" width="64"></el-table-column>
+          <el-table-column label="操作" width="50">
+            <template v-slot="{ row }">
+              <i class="el-icon-delete field-panel__del" @click.stop="removeField(row)"></i>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div class="field-panel__prop">
+        <div class="field-panel__prop-head">
+          字段属性设置
+          <span v-if="draft" class="field-panel__draft-badge">
+            新增{{ dataSourceLabel(draft.DATA_SOURCE) }}字段
+          </span>
+          <span v-else-if="workDirty" class="field-panel__draft-badge">未保存</span>
+        </div>
+        <template v-if="draft">
+          <div class="field-panel__prop-scroll">
+            <epx-base-entity-view-config-prop
+              :field="draft"
+              :sources="sources"
+              :candidates="candidates"
+              :main-meta="mainMeta"
+              :meta-fields-map="metaFieldsMap"
+              :data-type-map="dataTypeMap"
+              :data-types="dataTypes"
+              is-draft
+              @change="patchDraft"
+              @open-formula="openFormula('draft')"
+              @load-meta-fields="$emit('load-meta-fields', $event)"
+            ></epx-base-entity-view-config-prop>
+          </div>
+          <div class="field-panel__prop-foot">
+            <el-button size="small" @click="draft = null">取消</el-button>
+            <el-button type="primary" size="small" :loading="saving" @click="saveField(draft, true)">保存</el-button>
+          </div>
+        </template>
+        <div v-else-if="!work" class="field-panel__prop-empty">
+          <i class="el-icon-setting"></i>
+          <div>选择左侧字段查看或编辑属性，<br />或点击上方按钮新增字段</div>
+        </div>
+        <template v-else>
+          <div class="field-panel__prop-scroll">
+            <epx-base-entity-view-config-prop
+              :field="work"
+              :sources="sources"
+              :candidates="candidates"
+              :main-meta="mainMeta"
+              :meta-fields-map="metaFieldsMap"
+              :data-type-map="dataTypeMap"
+              :data-types="dataTypes"
+              @change="patchWork"
+              @open-formula="openFormula('work')"
+              @load-meta-fields="$emit('load-meta-fields', $event)"
+            ></epx-base-entity-view-config-prop>
+          </div>
+          <div v-if="workDirty" class="field-panel__prop-foot">
+            <el-button size="small" @click="resetWork">重置</el-button>
+            <el-button type="primary" size="small" :loading="saving" @click="saveField(work, false)">保存修改</el-button>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <epx-base-entity-view-config-field-dialog
+      v-model:visible="objectDialogVisible"
+      :groups="dialogGroups"
+      :existing-keys="existingKeys"
+      :saving="saving"
+      :data-type-map="dataTypeMap"
+      @expand="onDialogExpand"
+      @confirm="addObjectFields"
+    ></epx-base-entity-view-config-field-dialog>
+
+    <epx-base-entity-view-config-formula-dialog
+      v-model:visible="formulaVisible"
+      :view-id="viewId"
+      :system="system"
+      :meta-id="mainMeta.id"
+      :sources="sources"
+      :field-name="formulaTarget === 'draft' ? (draft && draft.NAME) : (work && work.NAME)"
+      :value="formulaTarget === 'draft' ? (draft && draft.FORMULA) : (work && work.FORMULA)"
+      @confirm="onFormulaConfirm"
+    ></epx-base-entity-view-config-formula-dialog>
+  </div>
+</template>
+
+<script>
+import ObjectFieldDialog from './ObjectFieldDialog.vue'
+import FormulaDialog from './FormulaDialog.vue'
+import FieldPropForm from './FieldPropForm.vue'
+import { dataSourceLabel, valueFnLabel, relTypeLabel, mapViewType, parseFormulaTokens, FIELD_BEAN_KEYS, uniqueFieldCode, SQL_IDENTIFIER_RE, NUMERIC_DATA_TYPES } from './constants'
+
+export default {
+  name: 'epx-base-entity-view-config-field-panel',
+  components: {
+    [ObjectFieldDialog.name]: ObjectFieldDialog,
+    [FormulaDialog.name]: FormulaDialog,
+    [FieldPropForm.name]: FieldPropForm
+  },
+  props: {
+    viewId: String,
+    system: String,
+    fields: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    // 已登记源 [{ id, code, name, metaId, relType, flag }]
+    sources: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    // 主对象的关联候选（relationCandidates），添加字段弹窗展示全部可关联对象
+    candidates: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    mainMeta: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    metaFieldsMap: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    // 字段类型代码表（FM_DATA_TYPE）编号 -> 名称
+    dataTypeMap: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    // 字段类型代码表全量选项 [{ code, name }]
+    dataTypes: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    // 聚合对象（UNION ALL 分支）[{ id, code, metaId, metaName }]，字段列表展示分支映射角标用
+    unions: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    // 全部关联源（含聚合段），解析分支映射的来源字段名用
+    allSources: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    // 各聚合对象的列映射：unionId -> FM_VIEW_UNION_FIELD data 数组
+    unionMappingsMap: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      selId: null,
+      work: null,
+      draft: null,
+      saving: false,
+      objectDialogVisible: false,
+      formulaVisible: false,
+      formulaTarget: 'work'
+    }
+  },
+  computed: {
+    selected () {
+      return this.fields.find(field => field.ID === this.selId) || null
+    },
+    workDirty () {
+      if (!this.work || !this.selected) return false
+      return FIELD_BEAN_KEYS.some(key => (this.work[key] || '') !== (this.selected[key] || ''))
+    },
+    // 主对象 + 全部关联候选（未登记的候选在添加字段时自动登记关联源）
+    dialogGroups () {
+      const groups = []
+      if (this.mainMeta.id) {
+        groups.push({
+          key: 'main',
+          sourceCode: '',
+          flag: '',
+          name: this.mainMeta.name || '主对象',
+          badge: '主对象',
+          relType: '',
+          metaId: this.mainMeta.id,
+          fields: this.metaFieldsMap[this.mainMeta.id] || []
+        })
+      }
+      this.candidates.forEach(candidate => {
+        const source = this.sources.find(item => item.flag === candidate.flag)
+        groups.push({
+          key: candidate.flag,
+          sourceCode: source ? source.code : '',
+          flag: candidate.flag,
+          name: (source && source.name) || candidate.title || candidate.relatedName,
+          badge: relTypeLabel(candidate.relType) || '关联',
+          relType: candidate.relType,
+          metaId: candidate.relatedMetaId,
+          fields: this.metaFieldsMap[candidate.relatedMetaId] || []
+        })
+      })
+      return groups
+    },
+    // 已存在字段 key：`${group.key}::${SOURCE_FIELD}`（group.key = 'main' 或关联 flag）
+    existingKeys () {
+      return this.fields
+        .filter(field => field.DATA_SOURCE === 'field' && field.SOURCE_FIELD)
+        .map(field => {
+          if (!field.SOURCE_CODE) return `main::${field.SOURCE_FIELD}`
+          const source = this.sources.find(item => item.code === field.SOURCE_CODE)
+          return source ? `${source.flag}::${field.SOURCE_FIELD}` : ''
+        })
+        .filter(Boolean)
+    }
+  },
+  watch: {
+    fields: {
+      handler () {
+        if (this.selId && !this.selected) {
+          this.selId = this.fields.length ? this.fields[0].ID : null
+        } else if (!this.selId && this.fields.length && !this.draft) {
+          this.selId = this.fields[0].ID
+        }
+        this.resetWork()
+      },
+      immediate: true
+    },
+    selected () {
+      this.resetWork()
+    }
+  },
+  methods: {
+    dataSourceLabel,
+    valueFnLabel,
+    rowClassName ({ row }) {
+      return row.ID === this.selId ? 'field-panel__row--sel' : ''
+    },
+    selectRow (row) {
+      this.selId = row.ID
+      this.draft = null
+    },
+    resetWork () {
+      this.work = this.selected ? { ...this.selected } : null
+    },
+    patchWork (patch) {
+      this.work = { ...this.work, ...patch }
+    },
+    patchDraft (patch) {
+      this.draft = { ...this.draft, ...patch }
+    },
+    sourceName (sourceCode) {
+      if (!sourceCode) return this.mainMeta.name || '主对象'
+      const source = this.sources.find(item => item.code === sourceCode)
+      return source ? source.name : sourceCode
+    },
+    sourceMetaId (sourceCode) {
+      if (!sourceCode) return this.mainMeta.id
+      const source = this.sources.find(item => item.code === sourceCode)
+      return source ? source.metaId : ''
+    },
+    metaFieldLabel (metaId, attrId) {
+      const field = (this.metaFieldsMap[metaId] || []).find(item => item.id === attrId || item.name === attrId)
+      return field ? field.label : attrId
+    },
+    sourceCellText (row) {
+      if (!row.SOURCE_FIELD && row.SOURCE_EXPR) return `${this.sourceName(row.SOURCE_CODE)}/${row.SOURCE_EXPR}`
+      return `${this.sourceName(row.SOURCE_CODE)}/${this.metaFieldLabel(this.sourceMetaId(row.SOURCE_CODE), row.SOURCE_FIELD)}`
+    },
+    // 该视图列在各聚合分支的映射角标
+    unionRefs (row) {
+      const refs = []
+      this.unions.forEach(union => {
+        const mapping = (this.unionMappingsMap[union.id] || []).find(item => item.FIELD_CODE === row.CODE)
+        if (!mapping) return
+        let text
+        if (mapping.DATA_SOURCE === 'fixed') {
+          text = `= ${mapping.FIXED_VALUE}`
+        } else if (mapping.DATA_SOURCE === 'formula') {
+          text = '公式'
+        } else if (mapping.SOURCE_FIELD || mapping.SOURCE_EXPR) {
+          const metaId = mapping.SOURCE_CODE
+            ? (this.allSources.find(item => item.code === mapping.SOURCE_CODE) || {}).metaId
+            : union.metaId
+          text = mapping.SOURCE_FIELD ? this.metaFieldLabel(metaId, mapping.SOURCE_FIELD) : mapping.SOURCE_EXPR
+        } else {
+          text = '已映射'
+        }
+        refs.push({
+          key: union.id,
+          text: `${union.metaName}·${text}`,
+          title: `聚合分支「${union.metaName}（${union.code}）」映射：${mapping.DATA_SOURCE === 'formula' ? (mapping.FORMULA || '公式') : text}`
+        })
+      })
+      return refs
+    },
+    formulaRefs (row) {
+      return parseFormulaTokens(row.FORMULA).map(token => {
+        if (token.code) {
+          const field = this.fields.find(item => item.CODE === token.code)
+          if (field) return field.NAME
+          // 无源前缀的 token 也可能是主对象字段编号
+          return `${this.mainMeta.name || '主对象'}/${this.metaFieldLabel(this.mainMeta.id, token.code)}`
+        }
+        if (token.source === 'MAIN') {
+          return `${this.mainMeta.name || '主对象'}/${this.metaFieldLabel(this.mainMeta.id, token.field)}`
+        }
+        return `${this.sourceName(token.source)}/${this.metaFieldLabel(this.sourceMetaId(token.source), token.field)}`
+      })
+    },
+    requestOptions () {
+      return this.system ? { system: this.system } : {}
+    },
+    nextSort () {
+      const max = this.fields.reduce((acc, field) => Math.max(acc, Number(field.SORT) || 0), 0)
+      return max + 1
+    },
+    openObjectDialog () {
+      this.draft = null
+      this.objectDialogVisible = true
+    },
+    // 弹窗内展开对象节点时懒加载该对象字段
+    onDialogExpand (group) {
+      if (group.metaId) this.$emit('load-meta-fields', group.metaId)
+    },
+    startDraft (dataSource) {
+      const seq = this.fields.length + 1
+      if (dataSource === 'formula') {
+        this.draft = { DATA_SOURCE: 'formula', NAME: '', CODE: `FX_${seq}`, VIEW_TYPE: '数字', FORMULA: '', SORT: this.nextSort() }
+      } else {
+        this.draft = { DATA_SOURCE: 'fixed', NAME: '', CODE: `CONST_${seq}`, VIEW_TYPE: '文本', FIXED_VALUE: '', SORT: this.nextSort() }
+      }
+      this.selId = null
+    },
+    openFormula (target) {
+      this.formulaTarget = target
+      this.formulaVisible = true
+    },
+    onFormulaConfirm (expr) {
+      if (this.formulaTarget === 'draft') {
+        this.patchDraft({ FORMULA: expr })
+      } else {
+        this.patchWork({ FORMULA: expr })
+      }
+      this.formulaVisible = false
+    },
+    validateField (field) {
+      if (!field.NAME || !field.NAME.trim()) return '请填写字段名称'
+      const code = (field.CODE || '').trim()
+      if (!code) return '请填写字段编号'
+      if (!SQL_IDENTIFIER_RE.test(code)) return '编号仅允许字母、数字、下划线，且不能以数字开头'
+      if (code.toUpperCase() === 'ID') return '「ID」为保留主键列，请更换编号'
+      const duplicated = this.fields.some(item => item.CODE === code && item.ID !== field.ID)
+      if (duplicated) return `编号「${code}」已存在`
+      if (!field.VIEW_TYPE) return '请选择字段类型'
+      if (field.DATA_SOURCE === 'field' && !field.SOURCE_FIELD && !(field.SOURCE_EXPR || '').trim()) return '请选择来源字段'
+      if (field.DATA_SOURCE === 'formula' && !(field.FORMULA || '').trim()) return '请设置取值公式'
+      if (field.SOURCE_EXPR && /;|--|\/\*/.test(field.SOURCE_EXPR)) return '聚合表达式不允许包含分号或注释'
+      if (field.DATA_SOURCE === 'fixed') {
+        const fixedValue = String(field.FIXED_VALUE == null ? '' : field.FIXED_VALUE).trim()
+        if (field.VIEW_TYPE === '数字' && fixedValue && isNaN(Number(fixedValue))) return '数字类型的指定值必须是合法数字'
+        if (field.VIEW_TYPE === '时间' && fixedValue && isNaN(new Date(fixedValue).getTime())) return '时间类型的指定值必须是合法日期'
+        if (field.VIEW_TYPE === '选项' && !field.CODE_DEFINE) return '选项类型请先选择代码表'
+        if (field.VIEW_TYPE === '对象' && !field.LINK_ENTITY) return '对象类型请先选择关联对象'
+      }
+      if (field.DATA_SOURCE === 'field' && ['sum', 'avg'].includes(field.VALUE_FN) && field.SOURCE_FIELD) {
+        const metaId = field.REL_FLAG ? field.SOURCE_META_ID : this.sourceMetaId(field.SOURCE_CODE)
+        const metaField = (this.metaFieldsMap[metaId] || []).find(item => item.id === field.SOURCE_FIELD)
+        if (metaField && !NUMERIC_DATA_TYPES.includes(metaField.dataType)) return '求和/平均的源字段必须为数字类型'
+      }
+      return ''
+    },
+    beanParams (field) {
+      const params = { 'bean.ENTITY_ID': this.viewId }
+      if (field.ID) params['bean.ID'] = field.ID
+      FIELD_BEAN_KEYS.forEach(key => {
+        params[`bean.${key}`] = field[key] === undefined || field[key] === null ? '' : field[key]
+      })
+      return params
+    },
+    async saveField (field, isDraft) {
+      const error = this.validateField(field)
+      if (error) {
+        this.$message.warning(error)
+        return
+      }
+      this.saving = true
+      try {
+        // 新增/编辑都走 save 动作（编辑带 bean.ID），使不可变校验与 STATE 置 0 逻辑生效；
+        // 绑定关联对象字段时 bean 里带 SOURCE_META_ID + REL_FLAG，由后端自动登记/复用关联源
+        const id = await this.$http.$post({ entityId: 'FM_VIEW_FIELD', action: 'save', ...this.beanParams(field) }, this.requestOptions())
+        this.$message.success('保存成功')
+        if (isDraft) {
+          this.draft = null
+          this.selId = id || null
+        }
+        this.$emit('change')
+      } catch (saveError) {
+        this.$message.error(saveError.message || '保存失败')
+      } finally {
+        this.saving = false
+      }
+    },
+    async addObjectFields (descriptors) {
+      if (!descriptors.length) return
+      const usedCodes = new Set(this.fields.map(field => (field.CODE || '').toUpperCase()))
+      let sort = this.nextSort()
+      this.saving = true
+      let lastId = null
+      try {
+        for (const descriptor of descriptors) {
+          const { group, field } = descriptor
+          const params = {
+            'bean.ENTITY_ID': this.viewId,
+            'bean.NAME': field.label || field.name,
+            'bean.CODE': uniqueFieldCode(field.name, usedCodes, group.flag ? group.flag.replace(/[^A-Za-z0-9]+/g, '_').toUpperCase() : ''),
+            'bean.VIEW_TYPE': mapViewType(field.dataType),
+            'bean.DATA_SOURCE': 'field',
+            'bean.SOURCE_FIELD': field.id,
+            'bean.VALUE_FN': group.relType === '1' ? 'raw' : '',
+            'bean.SORT': sort++
+          }
+          // 关联对象字段：带 SOURCE_META_ID + REL_FLAG，后端自动登记/复用关联源并回填 SOURCE_CODE
+          if (group.flag) {
+            params['bean.SOURCE_META_ID'] = group.metaId
+            params['bean.REL_FLAG'] = group.flag
+          }
+          lastId = await this.$http.$post({
+            entityId: 'FM_VIEW_FIELD',
+            action: 'save',
+            ...params
+          }, this.requestOptions())
+        }
+        this.$message.success(`已添加 ${descriptors.length} 个字段`)
+        this.objectDialogVisible = false
+        if (lastId) this.selId = lastId
+        this.$emit('change')
+      } catch (error) {
+        this.$message.error(error.message || '添加失败')
+        this.$emit('change')
+      } finally {
+        this.saving = false
+      }
+    },
+    removeField (row) {
+      this.$confirm(`确定删除字段「${row.NAME}」吗？`, '提示', { type: 'warning' }).then(() => {
+        return this.$http.$post({
+          entityId: 'FM_VIEW_FIELD',
+          action: 'delete',
+          id: row.ID
+        }, this.requestOptions()).then(() => {
+          this.$message.success('删除成功')
+          if (this.selId === row.ID) this.selId = null
+          this.$emit('change')
+        }).catch(error => {
+          this.$message.error(error.message || '删除失败')
+        })
+      }).catch(() => {})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.field-panel {
+  background: var(--epx-bg-card);
+  border-radius: var(--epx-radius-l);
+  box-shadow: var(--epx-shadow-s);
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: var(--epx-space-2);
+    padding: 13px 18px;
+    font-size: var(--epx-font-size-base);
+    font-weight: 700;
+    color: var(--color-text-title);
+    border-bottom: 1px solid var(--epx-border);
+  }
+  &__title-bar {
+    width: 4px;
+    height: 14px;
+    border-radius: 2px;
+    @include bg_color_primary;
+  }
+  &__title-sub {
+    margin-left: 4px;
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-assistant);
+    font-weight: 400;
+  }
+  &__split {
+    display: flex;
+    flex: 1;
+    min-height: 420px;
+  }
+  &__list {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid var(--epx-border);
+  }
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--epx-space-2);
+    padding: var(--epx-space-3) var(--epx-space-3);
+  }
+  &__btn-on {
+    @include font_color_primary;
+    @include border_color_primary(0.5);
+    @include bg_color_primary(0.06);
+  }
+  &__total {
+    margin-left: auto;
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-assistant);
+    b {
+      @include font_color_primary;
+    }
+  }
+  &__table {
+    flex: 1;
+    :deep(.el-table__row) {
+      cursor: pointer;
+    }
+  }
+  &__mono {
+    font-family: ui-monospace, Menlo, monospace;
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-secondary);
+  }
+  &__fn-chip {
+    margin-left: 6px;
+    font-size: 11px;
+    font-weight: 600;
+    color: #d9822b;
+    background: #fff2e6;
+    border-radius: var(--epx-radius-base);
+    padding: 1px 6px;
+  }
+  &__srcf {
+    font-size: var(--epx-font-size-s);
+    &.is-main {
+      @include font_color_primary;
+    }
+    &.is-rel {
+      color: #d9822b;
+    }
+  }
+  &__refs {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+  &__ref {
+    font-size: 11px;
+    border-radius: var(--epx-radius-base);
+    padding: 1px 7px;
+    @include font_color_primary;
+    @include bg_color_primary(0.08);
+  }
+  &__union-refs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: 3px;
+  }
+  &__union-ref {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    font-size: 11px;
+    border-radius: var(--epx-radius-base);
+    padding: 1px 7px;
+    background: #faf6ff;
+    color: #8a5fc0;
+    border: 1px solid #e7dcf5;
+    i {
+      font-size: 10px;
+    }
+  }
+  &__none {
+    color: var(--color-text-disabled);
+  }
+  &__del {
+    color: var(--color-text-disabled);
+    cursor: pointer;
+    &:hover {
+      color: #f56c6c;
+    }
+  }
+  &__prop {
+    width: 330px;
+    flex: 0 0 330px;
+    display: flex;
+    flex-direction: column;
+    background: var(--epx-bg);
+    border-radius: 0 0 var(--epx-radius-l) 0;
+  }
+  &__prop-head {
+    height: 44px;
+    display: flex;
+    align-items: center;
+    gap: var(--epx-space-3);
+    padding: 0 18px;
+    font-size: var(--epx-font-size-s);
+    font-weight: 700;
+    color: var(--color-text-title);
+    border-bottom: 1px solid var(--epx-border);
+    flex: 0 0 auto;
+  }
+  &__draft-badge {
+    font-size: 11px;
+    font-weight: 600;
+    border-radius: 10px;
+    padding: 2px 9px;
+    @include font_color_primary;
+    @include bg_color_primary(0.1);
+  }
+  &__prop-scroll {
+    flex: 1;
+    overflow-y: auto;
+    @include scroll-bar;
+  }
+  &__prop-foot {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--epx-space-3);
+    padding: var(--epx-space-3) var(--epx-space-3);
+    border-top: 1px solid var(--epx-border);
+    background: var(--epx-bg-card);
+    flex: 0 0 auto;
+  }
+  &__prop-empty {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-disabled);
+    text-align: center;
+    font-size: var(--epx-font-size-s);
+    line-height: 1.7;
+    padding: 40px 24px;
+    i {
+      font-size: 34px;
+      margin-bottom: var(--epx-space-3);
+    }
+  }
+}
+</style>
+<!-- row-class-name 返回的类名是 el-table 自己拼到内部渲染的 <tr> 上的（数据驱动，不是本组件
+     模板里直接写的 class），那个 <tr> 永远拿不到本文件的 data-v-x，scoped 选择器天生匹配不到，
+     必须放非 scoped 全局块。field-panel__row--sel 前缀足够独特，未见与其它文件同名类冲突。 -->
+<style lang="scss">
+.field-panel__row--sel td {
+  @include bg_color_primary(0.06);
+}
+</style>