1

Signed-off-by: wangxinping <753819757@qq.com>

ruoyi-ui/src/views/childRoom/LeftMenu.vue

@@ -0,0 +1,139 @@
+<template>
+  <div
+    class="floating-left-menu"
+    :class="{ 'hidden': isHidden }"
+    @mouseenter="showTooltip = true"
+    @mouseleave="showTooltip = false"
+  >
+    <!-- 隐藏按钮（>箭头）。 -->
+    <div class="hide-btn" @click="handleHide" title="隐藏菜单">
+      <i class="el-icon-arrow-left"></i>
+    </div>
+
+    <!-- 一级菜单 -->
+    <div class="menu-icons">
+      <div
+        v-for="item in menuItems"
+        :key="item.id"
+        class="menu-item"
+        :class="{ active: activeMenu === item.id }"
+        @click="handleSelectMenu(item)"
+        :title="item.name"
+      >
+        <i :class="item.icon"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LeftMenu',
+  props: {
+    isHidden: {
+      type: Boolean,
+      default: false
+    },
+    menuItems: {
+      type: Array,
+      default: () => []
+    },
+    activeMenu: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    handleHide() {
+      this.$emit('hide')
+    },
+
+    handleSelectMenu(item) {
+      this.$emit('select', item)
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 左侧菜单栏 - 蓝色主题 。*/
+.floating-left-menu {
+  position: absolute;
+  top: 70px;
+  left: 20px;
+  width: 40px;
+  background: rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(0, 138, 255, 0.1);
+  border-radius: 8px;
+  z-index: 90;
+  box-shadow: 0 4px 12px rgba(0, 138, 255, 0.2);
+  padding: 15px 5px;
+  transition: all 0.3s ease;
+  overflow: hidden;
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.floating-left-menu.hidden {
+  opacity: 0;
+  transform: translateX(-100%);
+  pointer-events: none;
+}
+
+.hide-btn {
+  position: absolute;
+  top: 15px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  color: #008aff;
+  font-size: 16px;
+  transition: all 0.3s;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 4px;
+  z-index: 10;
+}
+
+.menu-icons {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 30px;
+}
+
+.menu-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  cursor: pointer;
+  color: #555;
+  font-size: 20px;
+  position: relative;
+  transition: all 0.3s;
+  border-radius: 4px;
+  padding: 0 5px;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(5px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.menu-item:hover {
+  background: rgba(0, 138, 255, 0.1);
+  color: #008aff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 10px rgba(0, 138, 255, 0.2);
+}
+
+.menu-item.active {
+  background: rgba(0, 138, 255, 0.15);
+  color: #008aff;
+  box-shadow: 0 2px 8px rgba(0, 138, 255, 0.3);
+}
+</style>