dtScreen/src/components/ui/MenuItem.vue

<template>
  <div class="menu-item-wrapper" :class="[`theme-${theme}`]">
    
    <div 
      class="menu-row" 
      :class="[
        {
          'is-leaf': !hasChildren,
          'is-folder': hasChildren,
          'is-root': level === 0,
          'is-sub': level > 0
        },
        'level-' + level
      ]"
      :style="{ paddingLeft: level * 20 + 15 + 'px' }"
      @click="handleClick"
    >
      <i v-if="node.icon" :class="node.icon" class="node-icon"></i>
      
      <span class="node-label">
        <slot name="label" :node="node">
          {{ node.label }}
        </slot>
      </span>
      
      <span 
        v-if="hasChildren" 
        class="arrow-icon" 
        :class="{ 'is-open': isOpen }"
      >
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
      </span>
    </div>

    <div class="menu-children" v-show="isOpen" v-if="hasChildren">
      <MenuItem 
        v-for="child in node.children" 
        :key="child.id" 
        :node="child" 
        :level="level + 1"
        :theme="theme" 
        @node-click="passEventUp" 
      >
        <template #label="{ node: innerNode }">
          <slot name="label" :node="innerNode"></slot>
        </template>
      </MenuItem>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MenuItem', 
  props: {
    node: {
      type: Object,
      required: true
    },
    level: {
      type: Number,
      default: 0
    },
    // 可选值：'tech' (科技渐变) | 'dark' (极简暗色)
    theme: {
      type: String,
      default: 'tech' 
    }
  },
  data() {
    return {
      isOpen: true 
    };
  },
  computed: {
    hasChildren() {
      return this.node.children && this.node.children.length > 0;
    }
  },
  methods: {
    handleClick() {
      if (this.hasChildren) {
        this.isOpen = !this.isOpen;
      } 
      this.$emit('node-click', this.node);
    },
    passEventUp(nodeData) {
      this.$emit('node-click', nodeData);
    }
  }
};
</script>

<style scoped>
.menu-item-wrapper {
  color: #fff;
  font-size: 14px;
}

/* ================== 公共基础样式 ================== */
.menu-row {
  display: flex;
  align-items: center;
  min-height: 44px;
  max-height: 56px;
  padding: 12px 20px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: #081734;
  transition: all 0.3s ease;
  user-select: none;
}

.node-icon { margin-right: 8px; font-size: 16px; }
.node-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arrow-icon { margin-left: 10px; display: flex; justify-content: center; align-items: center; color: #909399; transform: rotate(180deg); transition: transform 0.3s ease; }
.arrow-icon.is-open { transform: rotate(0deg); }


/* ================== 风格 A: 科技渐变风 (theme-tech) ================== */

/* 1. 最外层父节点 (level: 0) */
.theme-tech.menu-item-wrapper {
  background: linear-gradient( 180deg, rgba(5,20,46,0) 0%, #05142E 100%);
}
.theme-tech .menu-row.level-0 {
  font-size: 20px;
  line-height: 28px;
  background: linear-gradient( 180deg, rgba(119,161,255,0) 0%, #77A1FF 100%);
  border-radius: 2px 0px 0px 2px;
  border: 2px solid rgba(161,190,255,0.7);
  font-weight: bold;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}

/* 2. 第二层子节点 (level: 1) */
.theme-tech .menu-row.level-1 {
  background: #0f224350;
  font-size: 18px;
  line-height: 25px;
  color: #ffffff;
}

/* 3. 包含子节点的目录加粗 */
.theme-tech .menu-row.is-folder {
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  color: #ffffff;
}

.theme-tech .menu-row.level-2 {
  font-size: 18px;
  line-height: 25px;
  color: rgba(255,255,255, 0.8);
}

/* 4. 叶子节点字体颜色 */
.theme-tech .menu-row.is-leaf {
  font-size: 18px;
  line-height: 25px; 
  font-weight: normal;
  color: #ffffff;
  background: rgba(8,23,51,0.9);
  color: rgba(255,255,255, 0.5);
}

/* 5. 悬浮交互 */
.theme-tech .menu-row:hover {
  background: #3760A9;
  color: #ffffff; 
}
.theme-tech .menu-row.is-leaf:hover { color: #ffffff; }


/* ================== 风格 B: 极简暗色风 (theme-dark) ================== */

/* 1. 主控中心标题 (顶级菜单 level: 0) */
.theme-dark .menu-row.is-root {
  background-color: #112445; 
  color: #ffffff;            
  font-weight: bold;
  font-size: 20px;
  line-height: 28px;    
}

/* 2. 其他子菜单 (level > 0) */
.theme-dark .menu-row.is-sub {
  background-color: #0b1a37; 
  color: #ffffff ;
  font-size: 18px;
  line-height: 25px;            
}

/* 3. 叶子节点颜色 */
.theme-dark .menu-row.is-leaf {
  color: #6b7280; 
  font-weight: normal;
}

/* 4. 悬浮交互 */
.theme-dark .menu-row:hover {
  background-color: rgba(0, 229, 255, 0.1); 
  color: #00e5ff; 
}
.theme-dark .menu-row.is-leaf:hover { color: #ffffff; }
</style>