@mx-sose-front/mx-sose-graph 1.1.8 → 1.2.1

package/src/components/Matrix/Matrix.vue

@@ -0,0 +1,808 @@
+<template>
+  <div class="matrix">
+
+    <!-- 矩阵表格：左侧行树（文件夹+方框 / 橙圆C+三角），表头仅 1-7，虚线层级 -->
+    <div class="matrix-table-wrap">
+      <table class="matrix-table">
+        <thead>
+          <tr v-for="(row, rowIndex) in columnHeaderRows" :key="rowIndex">
+            <!-- 表头角格：显示 relationModelIcon + relationModelName -->
+            <th
+              v-if="rowIndex === 0"
+              class="matrix-corner"
+              :rowspan="columnHeaderRows.length"
+            >
+              <div class="matrix-corner__header">
+                <template v-if="relationModelIcon">
+                  <img
+                    v-if="getIcon('childIcons', relationModelIcon)"
+                    :src="getIcon('childIcons', relationModelIcon)"
+                    alt=""
+                    class="matrix-corner__icon-img"
+                  />
+                  <span v-else class="matrix-corner__icon">{{ relationModelIcon }}</span>
+                </template>
+                <span v-if="relationModelName" class="matrix-corner__name">{{ relationModelName }}</span>
+              </div>
+            </th>
+            <th
+              v-for="cell in row"
+              :key="cell.node.id"
+              :colspan="cell.colspan"
+              :rowspan="cell.rowspan"
+              class="matrix-col-header"
+              :class="{
+                'matrix-col-header--parent': hasColumnChildren(cell.node) && cell.rowspan <= 1,
+                'matrix-col-header--leaf': !hasColumnChildren(cell.node) && cell.rowspan <= 1,
+                'matrix-col-header--spanning': cell.rowspan > 1,
+                'matrix-col-header--root-vline': isRootSpanningCell(cell),
+                'matrix-col-header--selected': selectedColumnId === cell.node.id,
+              }"
+              @click="onColumnHeaderClick(cell.node)"
+            >
+              <div v-if="!isRootSpanningCell(cell)" class="matrix-col-header__inner">
+                <!-- 有子节点：绿色文件夹 + 方框 −/+，可点击折叠 -->
+                <template v-if="hasColumnChildren(cell.node)">
+                  <span
+                    class="col-expand col-expand--square"
+                    @click.stop="toggleColumn(cell.node)"
+                  >
+                    {{ columnExpandedIds.has(cell.node.id) ? '−' : '+' }}
+                  </span>
+                  <template v-if="cell.node.icon && getIcon('childIcons', cell.node.icon)">
+                    <img :src="getIcon('childIcons', cell.node.icon)" alt="" class="col-node-icon col-node-icon--img" />
+                  </template>
+                  <span v-else class="col-node-icon col-node-icon--folder">
+                    {{ columnExpandedIds.has(cell.node.id) ? '📂' : '📁' }}
+                  </span>
+                  <span class="col-node-label">{{ cell.node.nodeName }}</span>
+                </template>
+                <!-- 叶子：图标或黄圆 C -->
+                <template v-else>
+                  <template v-if="cell.node.icon && getIcon('childIcons', cell.node.icon)">
+                    <img :src="getIcon('childIcons', cell.node.icon)" alt="" class="col-node-icon col-node-icon--img" />
+                  </template>
+                  <span v-else class="col-node-icon col-node-icon--circle">C</span>
+                  <span class="col-node-label">{{ cell.node.nodeName }}</span>
+                </template>
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(item, rowIdx) in flatRowsWithConnectors"
+            :key="item.node.id"
+            :class="{ 'matrix-row--selected': selectedRowId === item.node.id }"
+          >
+            <td
+              class="matrix-row-header"
+              :class="{ 'matrix-row-header--selected': selectedRowId === item.node.id }"
+              @click="onRowHeaderClick(item.node)"
+            >
+              <div
+                class="row-tree-cell"
+                :style="{ paddingLeft: 8 + item.depth * 20 + 'px' }"
+              >
+                <!-- 树形连接线 -->
+                <template v-if="item.depth > 0">
+                  <!-- 祖先层级的垂直虚线（depth 0 .. depth-2） -->
+                  <template v-for="d in item.depth - 1" :key="'vl-' + d">
+                    <div
+                      v-if="item.connectors[d - 1]"
+                      class="row-conn-vline"
+                      :style="{ left: (16 + (d - 1) * 20) + 'px' }"
+                    />
+                  </template>
+                  <!-- 父级分支连接：垂直线 + 水平线 -->
+                  <div
+                    class="row-conn-branch"
+                    :class="{ 'row-conn-branch--last': !item.connectors[item.depth - 1] }"
+                    :style="{ left: (16 + (item.depth - 1) * 20) + 'px', width: '12px' }"
+                  />
+                </template>
+                <!-- 有子节点：方框展开 + 图标/文件夹 + 文字 -->
+                <template v-if="hasRowChildren(item.node)">
+                  <span class="row-expand row-expand--square" @click.stop="toggleRow(item.node)">
+                    {{ rowExpandedIds.has(item.node.id) ? '−' : '+' }}
+                  </span>
+                  <template v-if="item.node.icon && getIcon('childIcons', item.node.icon)">
+                    <img :src="getIcon('childIcons', item.node.icon)" alt="" class="row-node-icon row-node-icon--img" />
+                  </template>
+                  <span v-else class="row-node-icon row-node-icon--folder">
+                    {{ rowExpandedIds.has(item.node.id) ? '📂' : '📁' }}
+                  </span>
+                  <span class="row-node-label">{{ item.node.nodeName }}</span>
+                </template>
+                <!-- 叶子：占位 + 图标或橙圆 C + 文字 -->
+                <template v-else>
+                  <span class="row-expand-placeholder" />
+                  <template v-if="item.node.icon && getIcon('childIcons', item.node.icon)">
+                    <img :src="getIcon('childIcons', item.node.icon)" alt="" class="row-node-icon row-node-icon--img" />
+                  </template>
+                  <span v-else class="row-node-icon row-node-icon--circle">C</span>
+                  <span class="row-node-label">{{ item.node.nodeName }}</span>
+                </template>
+              </div>
+            </td>
+            <td
+              v-for="col in columnLeaves"
+              :key="col.id"
+              class="matrix-cell"
+              :class="{
+                'matrix-cell--has-value': isLeafRow(item.node) && !!getCell(item.node.id, col.id) && shouldShowCell(item.node.id, col.id),
+                'matrix-cell--disabled': getCell(item.node.id, col.id)?.operable === false,
+                'matrix-cell--selected': selectedRowId === item.node.id && selectedColumnId === col.id,
+              }"
+              @click="onCellClick(item.node, col)"
+              @dblclick="onCellDblClick(item.node, col, getCell(item.node.id, col.id))"
+            >
+              <template v-if="isLeafRow(item.node) && getCell(item.node.id, col.id)">
+                <span v-if="hasDependencyRelation(getCell(item.node.id, col.id)!) && showDependency" class="cell-dependency" :class="{ 'cell-arrow--up': getCellArrowType(getCell(item.node.id, col.id)!) === 'ARROW_UP', 'cell-arrow--down': getCellArrowType(getCell(item.node.id, col.id)!) === 'ARROW_DOWN' }">{{ getCellDependencySymbol(getCell(item.node.id, col.id)!) }}</span>
+                <span v-else-if="!hasDependencyRelation(getCell(item.node.id, col.id)!) && getCell(item.node.id, col.id)?.value" class="cell-value">{{ getCell(item.node.id, col.id)?.value }}</span>
+              </template>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import type { TreeNode, ColumnHeaderCell } from '../../types'
+import type { Matrix } from '../../types'
+import {
+  flattenRowTree,
+  getVisibleColumnNodesWithRoot,
+  getColumnHeaderRows,
+  getAllExpandableIds,
+} from './index'
+import type { ColHeaderCell } from './index'
+import { eventBus } from '../../store/eventBus'
+import { useGraphStore } from '../../store/graphStore'
+import { getIcon } from '../../utils/iconLoader'
+
+/** 当前选中的行 id、列 id（点击行头/列头/单元格时更新并通过 eventBus 发出） */
+const selectedRowId = ref<string | null>(null)
+const selectedColumnId = ref<string | null>(null)
+
+
+const rowScope = ref('Model')
+const columnScope = ref('Strategy')
+const findText = ref('')
+const showDependency = ref(true)
+
+const graphStore = useGraphStore()
+const emptyMatrix: Matrix = { rowTree: [], columnTree: [], crossData: [], relationModelIcon: '', relationModelName: '' }
+const matrixData = ref<Matrix>({ ...emptyMatrix })
+
+const relationModelIcon = computed(() => matrixData.value.relationModelIcon ?? '')
+const relationModelName = computed(() => matrixData.value.relationModelName ?? '')
+
+/** 数据更新后默认全部展开 */
+function applyDataAndExpand(payload: Matrix): void {
+  matrixData.value = payload
+  rowExpandedIds.value = getAllExpandableIds(payload.rowTree)
+  columnExpandedIds.value = getAllExpandableIds(payload.columnTree)
+}
+
+/** 主项目通过 eventBus "matrix-data-change" 下发数据，payload 为 Matrix 类型 */
+function onMatrixDataChange(payload: Matrix): void {
+  if (payload && Array.isArray(payload.rowTree) && Array.isArray(payload.columnTree) && Array.isArray(payload.crossData)) {
+    graphStore.setMatrixData(payload)
+    applyDataAndExpand(payload)
+  }
+}
+
+const handleMatrixDataChange = (payload: Matrix) => onMatrixDataChange(payload)
+onMounted(() => {
+  eventBus.on('matrix-data-change', handleMatrixDataChange)
+})
+onUnmounted(() => {
+  eventBus.off('matrix-data-change', handleMatrixDataChange)
+})
+const rowTreeNodes = computed(() => matrixData.value.rowTree)
+const columnTreeNodes = computed(() => matrixData.value.columnTree)
+const matrixNodes = computed(() => matrixData.value.crossData)
+
+// 展开状态：收到数据后默认全部展开，由 applyDataAndExpand 填充
+const rowExpandedIds = ref(new Set<string>())
+const columnExpandedIds = ref(new Set<string>())
+
+const flattenedRows = computed(() =>
+  flattenRowTree(rowTreeNodes.value, rowExpandedIds.value)
+)
+/** 列数据列：单根展开时第一列为根（战略层），后续列为叶子（能力），与行侧对齐 */
+const treeColumnNodes = computed(() =>
+  getVisibleColumnNodesWithRoot(columnTreeNodes.value, columnExpandedIds.value)
+)
+/** 实际数据列 = 列树中可见的列节点 */
+const columnLeaves = computed(() => treeColumnNodes.value)
+/** 列头多行：getColumnHeaderRows 自动处理任意层级树 */
+const columnHeaderRowsBase = computed(() =>
+  getColumnHeaderRows(columnTreeNodes.value, columnExpandedIds.value)
+)
+const columnHeaderRows = computed((): ColHeaderCell[][] => {
+  const base = columnHeaderRowsBase.value
+
+  const nodes = columnTreeNodes.value
+  const rootIncluded = nodes.length === 1
+    && !!(nodes[0].children?.length)
+    && columnExpandedIds.value.has(nodes[0].id)
+
+  if (!rootIncluded || base.length <= 1) return base
+
+  const rootNode = nodes[0]
+  return base.map((row, ri) => {
+    if (ri === 0) {
+      return row.map((cell, ci) =>
+        ci === 0 ? { ...cell, colspan: cell.colspan + 1 } : cell
+      )
+    } else if (ri === 1) {
+      const rootCell: ColHeaderCell = {
+        node: rootNode,
+        colspan: 1,
+        rowspan: base.length - 1,
+      }
+      return [rootCell, ...row]
+    }
+    return row
+  })
+})
+
+/** 行树连接器：计算每行在每个祖先深度是否还有后续兄弟（用于画 │ 或 └） */
+const flatRowsWithConnectors = computed(() => {
+  const items = flattenedRows.value
+  return items.map((item, i) => {
+    const { depth } = item
+    const connectors: boolean[] = []
+    for (let d = 0; d < depth; d++) {
+      let hasNext = false
+      for (let j = i + 1; j < items.length; j++) {
+        if (items[j].depth <= d) break
+        if (items[j].depth === d + 1) { hasNext = true; break }
+      }
+      connectors.push(hasNext)
+    }
+    return { ...item, connectors }
+  })
+})
+
+function getRowId(n: ColumnHeaderCell): string {
+  return n.rowNodeId ?? ''
+}
+function getColumnId(n: ColumnHeaderCell): string {
+  return n.columnNodeId ?? ''
+}
+
+const cellMap = computed(() => {
+  const map: Record<string, Record<string, ColumnHeaderCell>> = {}
+  for (const n of matrixNodes.value) {
+    const rowId = getRowId(n)
+    const colId = getColumnId(n)
+    if (!rowId || !colId) continue
+    if (!map[rowId]) map[rowId] = {}
+    map[rowId][colId] = n
+  }
+  return map
+})
+
+function getCell(rowId: string, colId: string): ColumnHeaderCell | undefined {
+  return cellMap.value[rowId]?.[colId]
+}
+
+function hasDependencyRelation(cell: ColumnHeaderCell): boolean {
+  return cell.relations?.some((r) => r.type === 'Dependency' || r.relationType === 'Dependency') ?? false
+}
+
+/** 取单元格依赖关系的箭头类型：ARROW_UP → 斜向上 ↗，ARROW_DOWN → 斜向下 ↘ */
+function getCellArrowType(cell: ColumnHeaderCell): 'ARROW_UP' | 'ARROW_DOWN' | null {
+  const r = cell.relations?.[0]
+  if (!r || (r.relationType !== 'ARROW_UP' && r.relationType !== 'ARROW_DOWN')) return null
+  return r.relationType as 'ARROW_UP' | 'ARROW_DOWN'
+}
+
+/** 依赖单元格显示符号：ARROW_UP ↗，ARROW_DOWN ↘，否则 √ */
+function getCellDependencySymbol(cell: ColumnHeaderCell): string {
+  const arrow = getCellArrowType(cell)
+  if (arrow === 'ARROW_UP') return '↗'
+  if (arrow === 'ARROW_DOWN') return '↘'
+  return '√'
+}
+
+function shouldShowCell(rowId: string, colId: string): boolean {
+  const cell = getCell(rowId, colId)
+  if (!cell) return false
+  if (hasDependencyRelation(cell)) return showDependency.value
+  return !!cell.value
+}
+
+function hasRowChildren(node: TreeNode): boolean {
+  return !!(node.children && node.children.length > 0)
+}
+
+function isLeafRow(node: TreeNode): boolean {
+  return !!node.isLeaf || !node.children?.length
+}
+
+function toggleRow(node: TreeNode): void {
+  const next = new Set(rowExpandedIds.value)
+  if (next.has(node.id)) next.delete(node.id)
+  else next.add(node.id)
+  rowExpandedIds.value = next
+}
+
+function hasColumnChildren(node: TreeNode): boolean {
+  return !!(node.children && node.children.length > 0)
+}
+
+function isRootSpanningCell(cell: ColHeaderCell): boolean {
+  const nodes = columnTreeNodes.value
+  if (nodes.length !== 1) return false
+  return cell.node.id === nodes[0].id && cell.colspan === 1
+}
+
+function toggleColumn(node: TreeNode): void {
+  const next = new Set(columnExpandedIds.value)
+  if (next.has(node.id)) next.delete(node.id)
+  else next.add(node.id)
+  columnExpandedIds.value = next
+}
+
+/** 点击行头：选中行，eventBus row-selected */
+function onRowHeaderClick(node: TreeNode): void {
+  selectedRowId.value = node.id
+  selectedColumnId.value = null
+  eventBus.emit('row-selected', node.id)
+}
+
+/** 点击列头：选中列，eventBus column-selected（角格不绑此逻辑，由上面 v-if 排除） */
+function onColumnHeaderClick(node: TreeNode): void {
+  selectedRowId.value = null
+  selectedColumnId.value = node.id
+  eventBus.emit('column-selected', node.id)
+}
+
+/** 点击单元格：选中该行+该列，eventBus cell-selected（relationId 取自 cell.relations） */
+function onCellClick(rowNode: TreeNode, colNode: TreeNode): void {
+  const cell = getCell(rowNode.id, colNode.id)
+  const relationId = cell?.relations?.[0]?.relationId ?? ''
+  selectedRowId.value = rowNode.id
+  selectedColumnId.value = colNode.id
+  eventBus.emit('cell-selected', { rowId: rowNode.id, columnId: colNode.id, relationId })
+}
+
+function onCellDblClick(rowNode: TreeNode, colNode: TreeNode, cell: ColumnHeaderCell | undefined): void {
+  if (!cell || cell.operable === false) return
+  const hasRelations = cell.relations && cell.relations.length > 0
+  eventBus.emit('cell-db-click', {
+    columnNodeId: getColumnId(cell),
+    rowNodeId: getRowId(cell),
+    relationId: cell.relations?.[0]?.relationId ?? '',
+    operateType: hasRelations ? 'OPERATE_TYPE_DELETE' : 'OPERATE_TYPE_ADD',
+  })
+}
+
+/** 供主项目通过 ref 调用：直接设置矩阵数据 */
+function setMatrixData(data: Matrix): void {
+  if (data?.rowTree && data?.columnTree && data?.crossData) {
+    applyDataAndExpand(data)
+  }
+}
+
+defineExpose({ setMatrixData })
+</script>
+
+<style scoped lang="scss">
+.matrix {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #fff;
+}
+
+.matrix-header {
+  padding: 8px 12px;
+  border-bottom: 1px solid #e8e8e8;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .matrix-header-left {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .matrix-header-title {
+    font-weight: 600;
+    font-size: 14px;
+  }
+
+  .matrix-header-icon {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    color: #606266;
+    font-size: 14px;
+    padding: 2px 4px;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+
+    .icon-grids {
+      margin-right: 2px;
+    }
+    .icon-arrow {
+      font-size: 10px;
+      opacity: 0.8;
+    }
+  }
+}
+
+.matrix-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid #e8e8e8;
+  flex-shrink: 0;
+}
+
+.matrix-criteria {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .criteria-label {
+    font-size: 12px;
+    color: #666;
+  }
+
+  .criteria-select {
+    width: 120px;
+  }
+
+  .find-input {
+    width: 160px;
+  }
+
+  .criteria-checkbox {
+    font-size: 12px;
+    color: #606266;
+  }
+}
+
+.matrix-table-wrap {
+  flex: 1;
+  overflow: auto;
+  padding: 12px;
+}
+
+.matrix-table {
+  border-collapse: collapse;
+  min-width: 100%;
+  font-size: 12px;
+
+  th,
+  td {
+    border: none;
+    padding: 6px 8px;
+    vertical-align: middle;
+  }
+
+  .matrix-corner {
+    min-width: 140px;
+    width: 140px;
+    background: #fff;
+    border-right: 1px solid #d0d0d0;
+    border-bottom: 1px solid #d0d0d0;
+    vertical-align: middle;
+
+    .matrix-corner__header {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 0;
+    }
+    .matrix-corner__icon-img {
+      width: 16px;
+      height: 16px;
+      display: block;
+      flex-shrink: 0;
+    }
+    .matrix-corner__icon {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      background: #f0c000;
+      color: #333;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 10px;
+      font-weight: bold;
+      flex-shrink: 0;
+    }
+    .matrix-corner__name {
+      font-size: 12px;
+      color: #303133;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .matrix-col-header {
+    min-width: 48px;
+    text-align: left;
+    background: #fff;
+    font-weight: 500;
+    font-size: 12px;
+    color: #303133;
+    vertical-align: middle;
+    cursor: pointer;
+
+    .matrix-col-header__inner {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      min-height: 28px;
+    }
+
+    &.matrix-col-header--parent {
+      border-bottom: 1px dashed #999;
+      .col-expand--square {
+        width: 16px;
+        height: 16px;
+        border: 1px solid #c0c4cc;
+        border-radius: 2px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        font-size: 12px;
+        color: #606266;
+        flex-shrink: 0;
+      }
+      .col-node-icon--folder {
+        flex-shrink: 0;
+        font-size: 14px;
+      }
+    }
+
+    .col-node-icon--img {
+      width: 16px;
+      height: 16px;
+      display: block;
+      flex-shrink: 0;
+    }
+    .col-node-icon--circle {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      background: #f0c000;
+      color: #333;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 10px;
+      font-weight: bold;
+      flex-shrink: 0;
+    }
+
+    &.matrix-col-header--leaf {
+      text-align: center;
+      position: relative;
+      padding-top: 14px;
+      border-bottom: 1px solid #d0d0d0;
+      /* 第二列等叶子列：列名（能力）在单元格正中间，对齐红框位置 */
+      .matrix-col-header__inner {
+        justify-content: center;
+        margin: 0 auto;
+      }
+      &::before {
+        content: '';
+        position: absolute;
+        left: 50%;
+        top: 0;
+        height: 14px;
+        width: 0;
+        border-left: 1px dashed #333;
+      }
+    }
+
+    &.matrix-col-header--spanning {
+      vertical-align: bottom;
+      text-align: center;
+      position: relative;
+      padding-top: 14px;
+      border-bottom: 1px solid #d0d0d0;
+      &::before {
+        content: '';
+        position: absolute;
+        left: 50%;
+        top: 0;
+        height: calc(100% - 30px);
+        width: 0;
+        border-left: 1px dashed #333;
+      }
+    }
+
+    &.matrix-col-header--root-vline {
+      padding: 0;
+      border-bottom: 1px solid #d0d0d0;
+      position: relative;
+      &::before {
+        content: '';
+        position: absolute;
+        left: 50%;
+        top: 0;
+        bottom: 0;
+        width: 0;
+        border-left: 1px dashed #333;
+      }
+    }
+
+    .col-node-label {
+      color: #303133;
+    }
+  }
+
+  .matrix-row-header {
+    min-width: 200px;
+    background: #fff;
+    padding: 0px 10px;
+    vertical-align: middle;
+    border-right: 1px solid #d0d0d0;
+    cursor: pointer;
+
+    &.matrix-row-header--selected {
+      background: #e6f7ff;
+    }
+  }
+
+  tr.matrix-row--selected .matrix-cell {
+    background: #e6f7ff;
+  }
+
+  .matrix-col-header.matrix-col-header--selected {
+    background: #e6f7ff;
+  }
+
+  .matrix-cell.matrix-cell--selected {
+    background: #bae7ff;
+  }
+
+  .matrix-row-header .row-tree-cell {
+      position: relative;
+      display: flex;
+      align-items: center;
+      min-height: 28px;
+      font-size: 12px;
+      gap: 6px;
+    }
+
+    /* 祖先层级的垂直虚线（贯穿整行高度） */
+    .row-conn-vline {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 0;
+      border-left: 1px dashed #999;
+      pointer-events: none;
+    }
+
+    /* 父级分支连接：垂直线 + 水平线 */
+    .row-conn-branch {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      pointer-events: none;
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        border-left: 1px dashed #999;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        right: 0;
+        border-top: 1px dashed #999;
+      }
+      &.row-conn-branch--last::before {
+        bottom: 50%;
+      }
+    }
+    .row-expand {
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      line-height: 1;
+      &.row-expand--square {
+        border: 1px solid #c0c4cc;
+        border-radius: 2px;
+        font-size: 12px;
+        color: #606266;
+        background: #fff;
+      }
+    }
+    .row-expand-placeholder {
+      width: 16px;
+      flex-shrink: 0;
+    }
+    .row-node-icon--folder {
+      flex-shrink: 0;
+      font-size: 14px;
+    }
+    .row-node-icon--img {
+      width: 16px;
+      height: 16px;
+      display: block;
+      flex-shrink: 0;
+    }
+    .row-node-icon--circle {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      background: #e6a23c;
+      color: #fff;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 10px;
+      font-weight: bold;
+      flex-shrink: 0;
+    }
+    .row-node-label {
+      color: #303133;
+    }
+
+  .matrix-cell {
+    min-width: 48px;
+    text-align: center;
+    color: #303133;
+    background: #fff;
+    border: 1px solid #d0d0d0;
+    cursor: pointer;
+
+    &.matrix-cell--has-value {
+      background: #e6f7ff;
+    }
+
+    &.matrix-cell--disabled {
+      background: #f5f5f5;
+      color: #c0c4cc;
+      cursor: not-allowed;
+    }
+
+    .cell-dependency {
+      color: #1890ff;
+      font-weight: bold;
+      font-size: 14px;
+
+      &.cell-arrow--up,
+      &.cell-arrow--down {
+        font-size: 16px;
+        font-weight: bold;
+      }
+    }
+
+    .cell-value {
+      font-weight: 500;
+    }
+  }
+}
+</style>