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

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

@@ -0,0 +1,951 @@
+<template>
+  <div class="relation-panel">
+    <div class="relation-panel__title">
+      <span class="relation-panel__title-bar"></span>数据关系
+      <span class="relation-panel__title-sub">展示视图数据来源于哪些对象的字段，以及关联是如何建立的</span>
+      <el-button
+        type="primary"
+        plain
+        size="small"
+        icon="el-icon-connection"
+        class="relation-panel__manage"
+        @click="sourceManagerVisible = true"
+      >管理关联源</el-button>
+      <span class="relation-panel__legend">
+        <span class="relation-panel__lg"><i class="relation-panel__dot is-main"></i>主对象</span>
+        <span class="relation-panel__lg"><i class="relation-panel__dot is-rel"></i>关联对象</span>
+        <span v-if="unions.length" class="relation-panel__lg"><i class="relation-panel__dot is-union"></i>聚合对象</span>
+        <span class="relation-panel__lg"><i class="relation-panel__line is-one"></i>一对一 / 多对一</span>
+        <span class="relation-panel__lg"><i class="relation-panel__line is-many"></i>一对多</span>
+      </span>
+    </div>
+    <div class="relation-panel__body">
+      <div class="relation-panel__er">
+        <div class="relation-panel__entity is-main">
+          <div class="relation-panel__ent-head is-main">
+            <span class="relation-panel__ent-ic is-main"><i class="el-icon-s-grid"></i></span>
+            <div class="relation-panel__ent-name">
+              {{ mainMeta.name || '主对象' }}
+              <span class="relation-panel__ent-code">{{ mainMeta.code }}</span>
+            </div>
+            <span class="relation-panel__ent-badge is-main">主对象</span>
+          </div>
+          <div class="relation-panel__ent-fields">
+            <div v-if="mainFields.length === 0" class="relation-panel__ent-empty">未选用字段</div>
+            <div v-for="field in mainFields" :key="field.ID" class="relation-panel__field">
+              <i class="el-icon-tickets"></i>
+              <span>{{ metaFieldLabel(mainMeta.id, field.SOURCE_FIELD) }}</span>
+              <span class="relation-panel__field-as">→ {{ field.CODE }}</span>
+            </div>
+          </div>
+        </div>
+
+        <template v-if="sourceGroups.length">
+          <div class="relation-panel__trunk"><span></span></div>
+          <div class="relation-panel__rels">
+            <div v-for="group in sourceGroups" :key="group.code" class="relation-panel__rel-row">
+              <div class="relation-panel__connector">
+                <span :class="['relation-panel__conn-line', group.relType === '1' ? 'is-many' : 'is-one']"></span>
+                <span :class="['relation-panel__rel-badge', group.relType === '1' ? 'is-many' : 'is-one']">{{ group.relTypeLabel }}</span>
+                <span class="relation-panel__conn-key">关联：{{ group.title || group.flag }}</span>
+              </div>
+              <div class="relation-panel__entity is-rel">
+                <div class="relation-panel__ent-head is-rel">
+                  <span class="relation-panel__ent-ic is-rel"><i class="el-icon-link"></i></span>
+                  <div class="relation-panel__ent-name">
+                    {{ group.name }}
+                    <span class="relation-panel__ent-code">{{ group.code }}</span>
+                  </div>
+                  <span :class="['relation-panel__ent-badge', group.relType === '1' ? 'is-many' : 'is-one']">{{ group.relTypeLabel }}</span>
+                  <el-button
+                    v-if="group.relType === '1' && group.id"
+                    type="primary"
+                    link
+                    size="small"
+                    class="relation-panel__topn-btn"
+                    :title="group.topN ? '已限定为前 N 条，点击修改' : '限定聚合只取每行排序后的前 N 条子记录'"
+                    @click.stop="openTopN(group)"
+                  ><i class="el-icon-timer"></i>{{ group.topN ? `前${group.topN}条` : '前N条' }}</el-button>
+                </div>
+                <div class="relation-panel__ent-fields">
+                  <div v-if="group.fields.length === 0" class="relation-panel__ent-empty">未选用字段</div>
+                  <div v-for="field in group.fields" :key="field.ID" class="relation-panel__field">
+                    <i class="el-icon-tickets"></i>
+                    <span>{{ field.SOURCE_FIELD ? metaFieldLabel(group.metaId, field.SOURCE_FIELD) : field.SOURCE_EXPR }}</span>
+                    <span v-if="field.VALUE_FN" class="relation-panel__field-fn">{{ valueFnLabel(field.VALUE_FN) }}</span>
+                    <span class="relation-panel__field-as">→ {{ field.CODE }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+
+      <div v-for="union in unions" :key="union.id" class="relation-panel__union-section">
+        <div class="relation-panel__union-head">
+          <span class="relation-panel__title-bar is-union"></span>
+          聚合对象数据来源 · {{ union.metaName }}
+          <span class="relation-panel__union-pill">
+            <i class="el-icon-sort"></i>与主段「{{ mainMeta.name || '主对象' }}」按 UNION ALL 合并 · 分支编号 <code>{{ union.code }}</code>
+          </span>
+        </div>
+        <div class="relation-panel__er">
+          <div class="relation-panel__entity is-union">
+            <div class="relation-panel__ent-head is-union">
+              <span class="relation-panel__ent-ic is-union"><i class="el-icon-copy-document"></i></span>
+              <div class="relation-panel__ent-name">
+                {{ union.metaName }}
+                <span class="relation-panel__ent-code">{{ union.metaCode || union.code }}</span>
+              </div>
+              <span class="relation-panel__ent-badge is-union">聚合对象</span>
+            </div>
+            <div class="relation-panel__ent-fields">
+              <div v-if="unionSelfMappings(union).length === 0" class="relation-panel__ent-empty">未配置列映射（各列输出 NULL）</div>
+              <div v-for="mapping in unionSelfMappings(union)" :key="mapping.ID" class="relation-panel__field">
+                <i :class="mappingIcon(mapping)"></i>
+                <span class="relation-panel__field-src" :title="mappingSourceText(union, mapping)">{{ mappingSourceText(union, mapping) }}</span>
+                <span v-if="mapping.VALUE_FN" class="relation-panel__field-fn">{{ valueFnLabel(mapping.VALUE_FN) }}</span>
+                <span class="relation-panel__field-as" :title="mapping.FIELD_CODE">→ {{ colName(mapping.FIELD_CODE) }}</span>
+              </div>
+            </div>
+          </div>
+
+          <template v-if="unionSourceGroups(union).length">
+            <div class="relation-panel__trunk"><span></span></div>
+            <div class="relation-panel__rels">
+              <div v-for="group in unionSourceGroups(union)" :key="group.code" class="relation-panel__rel-row">
+                <div class="relation-panel__connector">
+                  <span :class="['relation-panel__conn-line', group.relType === '1' ? 'is-many' : 'is-one']"></span>
+                  <span :class="['relation-panel__rel-badge', group.relType === '1' ? 'is-many' : 'is-one']">{{ group.relTypeLabel }}</span>
+                  <span class="relation-panel__conn-key">关联：{{ group.title || group.code }}</span>
+                </div>
+                <div class="relation-panel__entity is-rel">
+                  <div class="relation-panel__ent-head is-rel">
+                    <span class="relation-panel__ent-ic is-rel"><i class="el-icon-link"></i></span>
+                    <div class="relation-panel__ent-name">
+                      {{ group.name }}
+                      <span class="relation-panel__ent-code">{{ group.metaCode || group.code }}</span>
+                    </div>
+                    <span :class="['relation-panel__ent-badge', group.relType === '1' ? 'is-many' : 'is-one']">{{ group.relTypeLabel }}</span>
+                    <el-button
+                      v-if="group.relType === '1' && group.id"
+                      type="primary"
+                      link
+                      size="small"
+                      class="relation-panel__topn-btn"
+                      :title="group.topN ? '已限定为前 N 条，点击修改' : '限定聚合只取每行排序后的前 N 条子记录'"
+                      @click.stop="openTopN(group)"
+                    ><i class="el-icon-timer"></i>{{ group.topN ? `前${group.topN}条` : '前N条' }}</el-button>
+                  </div>
+                  <div class="relation-panel__ent-fields">
+                    <div v-for="mapping in group.mappings" :key="mapping.ID" class="relation-panel__field">
+                      <i class="el-icon-tickets"></i>
+                      <span class="relation-panel__field-src">{{ groupFieldText(group, mapping) }}</span>
+                      <span v-if="mapping.VALUE_FN" class="relation-panel__field-fn">{{ valueFnLabel(mapping.VALUE_FN) }}</span>
+                      <span class="relation-panel__field-as" :title="mapping.FIELD_CODE">→ {{ colName(mapping.FIELD_CODE) }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <div v-if="derivedFields.length" class="relation-panel__derived">
+        <div class="relation-panel__derived-title"><i class="el-icon-edit-outline"></i>派生字段（不直接来源于对象字段）</div>
+        <div class="relation-panel__derived-list">
+          <div v-for="field in derivedFields" :key="field.ID" class="relation-panel__derived-item">
+            <div class="relation-panel__derived-row">
+              <span :class="['relation-panel__derived-tag', field.DATA_SOURCE === 'formula' ? 'is-formula' : 'is-fixed']">
+                {{ dataSourceLabel(field.DATA_SOURCE) }}
+              </span>
+              <span class="relation-panel__derived-name">{{ field.NAME }}</span>
+              <span class="relation-panel__derived-expr">
+                {{ field.DATA_SOURCE === 'formula' ? (field.FORMULA || '—') : `= ${field.FIXED_VALUE || '—'}` }}
+              </span>
+            </div>
+            <div v-if="formulaRefs(field).length" class="relation-panel__ref-row">
+              <span class="relation-panel__ref-label"><i class="el-icon-link"></i>引用</span>
+              <span v-for="(ref, index) in formulaRefs(field)" :key="index" class="relation-panel__ref-chip">{{ ref }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <el-dialog
+      class="dialog"
+      title="前 N 条限定"
+      width="480px"
+      v-model="topNVisible"
+      append-to-body
+    >
+      <div class="relation-panel__topn-tip">
+        聚合前先按排序把每个归属行的子记录截取前 N 条。
+        需要数据库支持窗口函数。
+      </div>
+      <el-form label-position="top" size="small">
+        <el-form-item label="条数 N" required>
+          <el-input-number v-model="topNForm.n" :min="1" :max="9999" size="small"></el-input-number>
+        </el-form-item>
+        <el-form-item label="排序（决定前 N 条，可多键）" required>
+          <div v-for="(key, index) in topNForm.keys" :key="index" class="relation-panel__topn-key">
+            <el-select v-model="key.field" size="small" filterable placeholder="排序字段">
+              <el-option
+                v-for="item in topNFieldOptions"
+                :key="item.id"
+                :value="item.id"
+                :label="`${item.label}（${item.name}）`"
+              ></el-option>
+            </el-select>
+            <el-select v-model="key.dir" size="small" class="relation-panel__topn-dir">
+              <el-option value="desc" label="降序（最新在前）"></el-option>
+              <el-option value="asc" label="升序"></el-option>
+            </el-select>
+            <i class="el-icon-delete relation-panel__topn-del" @click="topNForm.keys.splice(index, 1)"></i>
+          </div>
+          <el-button type="primary" link size="small" icon="el-icon-plus" @click="topNForm.keys.push({ field: '', dir: 'desc' })">
+            添加排序键
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button
+          v-if="topNForm.source && topNForm.source.topN"
+          type="danger"
+          plain
+          size="small"
+          :loading="topNSaving"
+          @click="saveTopN(true)"
+        >清除限定</el-button>
+        <el-button size="small" @click="topNVisible = false">取消</el-button>
+        <el-button type="primary" size="small" :loading="topNSaving" @click="saveTopN(false)">保存</el-button>
+      </template>
+    </el-dialog>
+
+    <epx-base-entity-view-config-source-manager-dialog
+      v-model:visible="sourceManagerVisible"
+      :view-id="viewId"
+      :system="system"
+      :main-meta="mainMeta"
+      :sources="allSources"
+      :unions="unions"
+      :candidates-map="candidatesMap"
+      :fields="fields"
+      :union-mappings-map="unionMappingsMap"
+      :meta-fields-map="metaFieldsMap"
+      @change="$emit('change')"
+      @load-meta-fields="$emit('load-meta-fields', $event)"
+    ></epx-base-entity-view-config-source-manager-dialog>
+  </div>
+</template>
+
+<script>
+import { dataSourceLabel, valueFnLabel, parseFormulaTokens } from './constants'
+import SourceManagerDialog from './SourceManagerDialog.vue'
+
+export default {
+  name: 'epx-base-entity-view-config-relation-panel',
+  components: {
+    [SourceManagerDialog.name]: SourceManagerDialog
+  },
+  props: {
+    viewId: {
+      type: String,
+      default: ''
+    },
+    // 视图所属业务系统编码（保存「前 N 条」时透传）
+    system: {
+      type: String,
+      default: ''
+    },
+    mainMeta: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    sources: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    // 聚合对象（UNION ALL 分支）[{ id, code, metaId, metaName, metaCode }]
+    unions: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    // 各聚合对象的列映射：unionId -> FM_VIEW_UNION_FIELD data 数组
+    unionMappingsMap: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    // 全部关联源（含聚合段），解析分支映射的来源字段名用
+    allSources: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    candidatesMap: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    fields: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    metaFieldsMap: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      sourceManagerVisible: false,
+      topNVisible: false,
+      topNSaving: false,
+      // source=正在编辑的关联源（enrichedSources 条目），n=条数，keys=排序键 [{field, dir}]
+      topNForm: { source: null, n: undefined, keys: [] }
+    }
+  },
+  computed: {
+    mainFields () {
+      return this.fields.filter(field => field.DATA_SOURCE === 'field' && !field.SOURCE_CODE)
+    },
+    topNFieldOptions () {
+      const source = this.topNForm.source
+      return source ? (this.metaFieldsMap[source.metaId] || []) : []
+    },
+    sourceGroups () {
+      return this.sources.map(source => ({
+        ...source,
+        fields: this.fields.filter(field => field.DATA_SOURCE === 'field' && field.SOURCE_CODE === source.code)
+      }))
+    },
+    derivedFields () {
+      return this.fields.filter(field => field.DATA_SOURCE === 'formula' || field.DATA_SOURCE === 'fixed')
+    }
+  },
+  methods: {
+    dataSourceLabel,
+    valueFnLabel,
+    requestOptions () {
+      return this.system ? { system: this.system } : {}
+    },
+    openTopN (group) {
+      let keys = []
+      try {
+        const parsed = JSON.parse(group.topOrder || '[]')
+        if (Array.isArray(parsed)) {
+          keys = parsed
+            .filter(item => item && item.field)
+            .map(item => ({ field: item.field, dir: /desc/i.test(item.dir) ? 'desc' : 'asc' }))
+        }
+      } catch (e) {
+        keys = []
+      }
+      if (!keys.length) keys = [{ field: '', dir: 'desc' }]
+      this.topNForm = {
+        source: group,
+        n: group.topN ? Number(group.topN) : undefined,
+        keys
+      }
+      if (!this.metaFieldsMap[group.metaId]) this.$emit('load-meta-fields', group.metaId)
+      this.topNVisible = true
+    },
+    async saveTopN (clear) {
+      const source = this.topNForm.source
+      if (!source) return
+      let topN = ''
+      let topOrder = ''
+      if (!clear) {
+        const n = Number(this.topNForm.n)
+        if (!Number.isInteger(n) || n <= 0) {
+          this.$message.error('条数 N 必须是正整数')
+          return
+        }
+        const keys = this.topNForm.keys.filter(key => key.field)
+        if (!keys.length) {
+          this.$message.error('请至少配置一个排序键（否则无法确定前 N 条）')
+          return
+        }
+        topN = String(n)
+        topOrder = JSON.stringify(keys.map(key => ({ field: key.field, dir: key.dir === 'desc' ? 'desc' : 'asc' })))
+      }
+      this.topNSaving = true
+      try {
+        // 结构字段原值回传（创建后不可变，缺省提交会被后端拒绝或误清）
+        await this.$http.$post({
+          entityId: 'FM_VIEW_SOURCE',
+          action: 'save',
+          'bean.ID': source.id,
+          'bean.ENTITY_ID': this.viewId,
+          'bean.OWNER_CODE': source.rawOwnerCode || '',
+          'bean.SOURCE_CODE': source.code,
+          'bean.SOURCE_META_ID': source.metaId,
+          'bean.REL_FLAG': source.flag,
+          'bean.SOURCE_NAME': source.rawName || '',
+          'bean.AGG_SCOPE': source.aggScope || '',
+          'bean.TOP_N': topN,
+          'bean.TOP_ORDER': topOrder
+        }, this.requestOptions())
+        this.$message.success(clear ? '已清除「前 N 条」限定' : '「前 N 条」限定已保存')
+        this.topNVisible = false
+        this.$emit('change')
+      } catch (error) {
+        this.$message.error(error.message || '保存失败')
+      } finally {
+        this.topNSaving = false
+      }
+    },
+    metaFieldLabel (metaId, attrId) {
+      const field = (this.metaFieldsMap[metaId] || []).find(item => item.id === attrId || item.name === attrId)
+      return field ? field.label : attrId
+    },
+    unionMappings (union) {
+      return this.unionMappingsMap[union.id] || []
+    },
+    // 分支卡片自身内容：自身字段映射 + 固定值/公式（关联源映射单独成卡）
+    unionSelfMappings (union) {
+      return this.unionMappings(union).filter(mapping => (mapping.DATA_SOURCE || 'field') !== 'field' || !mapping.SOURCE_CODE)
+    },
+    // 分支的关联源分组：来自各关联源的字段映射，按源聚成卡
+    unionSourceGroups (union) {
+      const groups = []
+      this.unionMappings(union).forEach(mapping => {
+        if ((mapping.DATA_SOURCE || 'field') !== 'field' || !mapping.SOURCE_CODE) return
+        let group = groups.find(item => item.code === mapping.SOURCE_CODE)
+        if (!group) {
+          const source = this.allSources.find(item => item.code === mapping.SOURCE_CODE)
+          group = {
+            // 铺开源记录：一对多源的「前 N 条」编辑需要 id/topN/topOrder/flag 等完整信息
+            ...(source || {}),
+            code: mapping.SOURCE_CODE,
+            name: source ? source.name : mapping.SOURCE_CODE,
+            metaId: source ? source.metaId : '',
+            metaCode: source ? source.metaCode : '',
+            relType: source ? source.relType : '',
+            relTypeLabel: (source && source.relTypeLabel) || '关联',
+            title: source ? (source.title || source.flag) : '',
+            mappings: []
+          }
+          groups.push(group)
+        }
+        group.mappings.push(mapping)
+      })
+      return groups
+    },
+    colName (code) {
+      const field = this.fields.find(item => item.CODE === code)
+      return (field && field.NAME) || code
+    },
+    mappingIcon (mapping) {
+      if (mapping.DATA_SOURCE === 'fixed') return 'el-icon-price-tag'
+      if (mapping.DATA_SOURCE === 'formula') return 'el-icon-edit-outline'
+      return 'el-icon-tickets'
+    },
+    // 分支卡片行来源描述：自身字段、固定值或公式
+    mappingSourceText (union, mapping) {
+      if (mapping.DATA_SOURCE === 'fixed') return `= ${mapping.FIXED_VALUE}`
+      if (mapping.DATA_SOURCE === 'formula') return mapping.FORMULA || '公式'
+      return mapping.SOURCE_FIELD
+        ? this.metaFieldLabel(union.metaId, mapping.SOURCE_FIELD)
+        : (mapping.SOURCE_EXPR || '—')
+    },
+    groupFieldText (group, mapping) {
+      return mapping.SOURCE_FIELD
+        ? this.metaFieldLabel(group.metaId, mapping.SOURCE_FIELD)
+        : (mapping.SOURCE_EXPR || '—')
+    },
+    formulaRefs (field) {
+      return parseFormulaTokens(field.FORMULA).map(token => {
+        if (token.code) {
+          const target = this.fields.find(item => item.CODE === token.code)
+          if (target) return target.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)}`
+        }
+        const source = this.sources.find(item => item.code === token.source)
+        return source
+          ? `${source.name}.${this.metaFieldLabel(source.metaId, token.field)}`
+          : `${token.source}.${token.field}`
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.relation-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;
+
+  &__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;
+    &.is-union {
+      background: #17a179;
+    }
+  }
+  &__title-sub {
+    margin-left: 4px;
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-assistant);
+    font-weight: 400;
+  }
+  &__legend {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    font-weight: 400;
+  }
+  &__lg {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-assistant);
+  }
+  &__dot {
+    width: 9px;
+    height: 9px;
+    border-radius: 3px;
+    display: inline-block;
+    &.is-main {
+      @include bg_color_primary;
+    }
+    &.is-rel {
+      background: #e08a3c;
+    }
+    &.is-union {
+      background: #17a179;
+    }
+  }
+  &__line {
+    width: 16px;
+    height: 0;
+    display: inline-block;
+    border-top: 2px solid;
+    &.is-one {
+      border-color: #5aa469;
+    }
+    &.is-many {
+      border-top-style: dashed;
+      border-color: #e08a3c;
+    }
+  }
+  &__body {
+    padding: 22px 24px;
+    overflow-x: auto;
+    @include scroll-bar;
+  }
+  &__er {
+    display: flex;
+    align-items: center;
+    min-width: max-content;
+  }
+  &__entity {
+    width: 256px;
+    flex: 0 0 256px;
+    border-radius: var(--epx-radius-base);
+    border: 1px solid;
+    background: var(--epx-bg-card);
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(30, 50, 90, 0.05);
+    &.is-main {
+      @include border_color_primary(0.3);
+    }
+    &.is-rel {
+      border-color: #f0d6b6;
+    }
+    &.is-union {
+      border-color: #bfe4d2;
+    }
+  }
+  &__ent-head {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    padding: 11px 13px;
+    &.is-main {
+      @include bg_color_primary(0.06);
+      border-bottom: 1px solid var(--epx-border);
+    }
+    &.is-rel {
+      background: #fdf6ec;
+      border-bottom: 1px solid #f5e4cf;
+    }
+    &.is-union {
+      background: #f0faf5;
+      border-bottom: 1px solid #dcf0e5;
+    }
+  }
+  &__ent-ic {
+    width: 28px;
+    height: 28px;
+    border-radius: var(--epx-radius-base);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    flex: 0 0 auto;
+    &.is-main {
+      @include bg_color_primary;
+    }
+    &.is-rel {
+      background: #e08a3c;
+    }
+    &.is-union {
+      background: #17a179;
+    }
+  }
+  &__ent-name {
+    font-size: var(--epx-font-size-s);
+    font-weight: 700;
+    color: var(--color-text-title);
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  &__ent-code {
+    font-size: 10.5px;
+    font-weight: 500;
+    color: var(--color-text-assistant);
+    font-family: ui-monospace, Menlo, monospace;
+  }
+  &__ent-badge {
+    margin-left: auto;
+    font-size: 10.5px;
+    padding: 1px 7px;
+    border-radius: 9px;
+    font-weight: 600;
+    flex: 0 0 auto;
+    &.is-main {
+      @include font_color_primary;
+      @include bg_color_primary(0.1);
+    }
+    &.is-one {
+      background: #eef7f0;
+      color: #5aa469;
+    }
+    &.is-many {
+      background: #fff2e6;
+      color: #e08a3c;
+    }
+    &.is-union {
+      background: #e6f7ef;
+      color: #17a179;
+    }
+  }
+  &__ent-fields {
+    padding: 6px 8px 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  &__ent-empty {
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-disabled);
+    padding: 8px 6px;
+  }
+  &__field {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    padding: 5px 8px;
+    border-radius: var(--epx-radius-base);
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-primary);
+    &:hover {
+      background: var(--epx-bg);
+    }
+    > i {
+      color: var(--color-text-disabled);
+    }
+  }
+  &__field-fn {
+    font-size: 10px;
+    font-weight: 700;
+    color: #d9822b;
+    background: #fff2e6;
+    border-radius: var(--epx-radius-base);
+    padding: 1px 5px;
+  }
+  &__field-as {
+    margin-left: auto;
+    font-size: 11px;
+    color: var(--color-text-assistant);
+    white-space: nowrap;
+    font-family: ui-monospace, Menlo, monospace;
+  }
+  &__trunk {
+    align-self: stretch;
+    width: 30px;
+    flex: 0 0 30px;
+    position: relative;
+    span {
+      position: absolute;
+      left: 50%;
+      top: 12px;
+      bottom: 12px;
+      border-left: 2px solid #d4dce6;
+    }
+  }
+  &__rels {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  &__rel-row {
+    display: flex;
+    align-items: center;
+  }
+  &__connector {
+    width: 132px;
+    flex: 0 0 132px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    position: relative;
+    padding: 0 6px;
+  }
+  &__conn-line {
+    position: absolute;
+    top: 50%;
+    left: -2px;
+    right: 6px;
+    border-top: 2px solid;
+    &.is-one {
+      border-color: #5aa469;
+    }
+    &.is-many {
+      border-top-style: dashed;
+      border-color: #e08a3c;
+    }
+  }
+  &__rel-badge {
+    position: relative;
+    font-size: 11px;
+    font-weight: 700;
+    padding: 2px 9px;
+    border-radius: 10px;
+    background: var(--epx-bg-card);
+    z-index: 1;
+    &.is-one {
+      color: #5aa469;
+      border: 1px solid #cfe8d6;
+    }
+    &.is-many {
+      color: #e08a3c;
+      border: 1px solid #f3ddc1;
+    }
+  }
+  &__conn-key {
+    position: relative;
+    font-size: 10.5px;
+    color: var(--color-text-assistant);
+    background: var(--epx-bg-card);
+    padding: 0 4px;
+    z-index: 1;
+    white-space: nowrap;
+  }
+  &__union-section {
+    margin-top: 22px;
+    padding-top: 18px;
+    border-top: 1px dashed var(--epx-border);
+  }
+  &__union-head {
+    display: flex;
+    align-items: center;
+    gap: var(--epx-space-2);
+    flex-wrap: wrap;
+    font-size: var(--epx-font-size-base);
+    font-weight: 700;
+    color: var(--color-text-title);
+    margin-bottom: var(--epx-space-3);
+  }
+  &__union-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 12px;
+    border-radius: 12px;
+    background: #e9f8f0;
+    border: 1px solid #cdeeda;
+    font-size: var(--epx-font-size-s);
+    font-weight: 500;
+    color: #2b9d67;
+    code {
+      font-family: ui-monospace, Menlo, monospace;
+      font-weight: 700;
+    }
+  }
+  &__field-src {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &__derived {
+    margin-top: 20px;
+    padding-top: 16px;
+    border-top: 1px dashed var(--epx-border);
+  }
+  &__derived-title {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    font-size: var(--epx-font-size-s);
+    font-weight: 600;
+    color: var(--color-text-secondary);
+    margin-bottom: var(--epx-space-3);
+  }
+  &__derived-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--epx-space-2);
+  }
+  &__derived-item {
+    display: flex;
+    flex-direction: column;
+    gap: 9px;
+    padding: 11px 13px;
+    background: var(--epx-bg);
+    border: 1px solid var(--epx-border);
+    border-radius: var(--epx-radius-l);
+  }
+  &__derived-row {
+    display: flex;
+    align-items: center;
+    gap: 11px;
+  }
+  &__derived-tag {
+    font-size: 11px;
+    font-weight: 600;
+    padding: 2px 8px;
+    border-radius: var(--epx-radius-base);
+    flex: 0 0 auto;
+    &.is-formula {
+      @include font_color_primary;
+      @include bg_color_primary(0.1);
+    }
+    &.is-fixed {
+      background: var(--epx-bg);
+      color: var(--color-text-secondary);
+    }
+  }
+  &__derived-name {
+    font-size: var(--epx-font-size-s);
+    font-weight: 600;
+    color: var(--color-text-primary);
+    flex: 0 0 auto;
+  }
+  &__derived-expr {
+    font-family: ui-monospace, Menlo, monospace;
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &__ref-row {
+    display: flex;
+    align-items: center;
+    gap: var(--epx-space-2);
+    flex-wrap: wrap;
+    padding-left: 2px;
+  }
+  &__ref-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 11.5px;
+    color: var(--color-text-assistant);
+    flex: 0 0 auto;
+  }
+  &__ref-chip {
+    display: inline-flex;
+    align-items: center;
+    padding: 3px 10px;
+    border-radius: var(--epx-radius-base);
+    background: var(--epx-bg-card);
+    border: 1px solid #f0d6b6;
+    font-size: var(--epx-font-size-s);
+    color: #d9822b;
+  }
+  &__topn-btn {
+    flex: 0 0 auto;
+    padding: 0 2px;
+    font-size: 10.5px;
+    i {
+      margin-right: 2px;
+    }
+  }
+  &__topn-tip {
+    margin-bottom: 12px;
+    padding: 8px 10px;
+    border-radius: var(--epx-radius-base);
+    background: var(--epx-bg);
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-assistant);
+    line-height: 1.6;
+  }
+  &__topn-key {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 6px;
+    .el-select:first-child {
+      flex: 1;
+    }
+  }
+  &__topn-dir {
+    width: 140px;
+    flex: 0 0 auto;
+  }
+  &__topn-del {
+    cursor: pointer;
+    color: var(--color-text-assistant);
+    &:hover {
+      color: #f56c6c;
+    }
+  }
+}
+</style>