From 2dd9a57014b5188b6a7fb43923e426b70c6b833a Mon Sep 17 00:00:00 2001
From: wangxinping <753819757@qq.com>
Date: Thu, 15 Jan 2026 15:55:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/views/childRoom/index.vue | 433 +++++++++++++++------------------
 1 file changed, 197 insertions(+), 236 deletions(-)

diff --git a/ruoyi-ui/src/views/childRoom/index.vue b/ruoyi-ui/src/views/childRoom/index.vue
index 6cf88bf..25d74ea 100644
--- a/ruoyi-ui/src/views/childRoom/index.vue
+++ b/ruoyi-ui/src/views/childRoom/index.vue
@@ -32,98 +32,73 @@
       </div>
     </div>
 
-    <!-- 顶部浮动导航栏 - 重新设计 -->
-    <div class="floating-header blue-theme">
-      <!-- 左侧：Logo和系统名称 -->
+    <!-- 顶部浮动导航栏 - 最终优化设计 -->
+    <div class="floating-header">
       <div class="header-left">
-        <div class="system-logo">
-          <i class="el-icon-s-promotion logo-icon"></i>
-          <span class="system-name">联合作战筹划系统</span>
+        <div class="system-title">
+          <i class="el-icon-s-promotion mr-2 logo-icon"></i>
+          <span class="title-text blue-title">联合任务筹划系统</span>
         </div>
         
-        <!-- 导航菜单 -->
-        <div class="nav-menu">
+        <!-- 顶部导航菜单 -->
+        <div class="top-nav-menu">
           <div 
-            v-for="item in navMenuItems" 
+            v-for="item in topNavItems" 
             :key="item.id"
-            class="nav-menu-item"
-            :class="{ active: activeNavMenu === item.id }"
-            @click="selectNavMenu(item)"
+            class="top-nav-item"
+            :class="{ active: activeTopNav === item.id }"
+            @click="selectTopNav(item)"
           >
+            <i :class="item.icon" class="nav-icon"></i>
             <span class="nav-text">{{ item.name }}</span>
           </div>
         </div>
       </div>
 
-      <!-- 右侧：作战信息和用户状态 -->
       <div class="header-right">
-        <!-- 作战信息 -->
-        <div class="combat-info">
-          <div class="info-item">
-            <i class="el-icon-time info-icon"></i>
+        <!-- 作战信息区域 -->
+        <div class="combat-info-group">
+          <!-- 房间编号 -->
+          <div class="info-box">
+            <i class="el-icon-office-building info-icon"></i>
             <div class="info-content">
-              <div class="info-label">作战时间</div>
-              <div class="info-value">{{ combatTime }}</div>
+              <div class="info-label">房间编号</div>
+              <div class="info-value">{{ roomCode }}</div>
             </div>
           </div>
           
-          <div class="info-item">
-            <i class="el-icon-sunny info-icon"></i>
+          <!-- 在线人数 -->
+          <div class="info-box">
+            <i class="el-icon-user info-icon"></i>
             <div class="info-content">
-              <div class="info-label">天文时间</div>
-              <div class="info-value">{{ astroTime }}</div>
+              <div class="info-label">在线人数</div>
+              <div class="info-value">{{ onlineCount }}人</div>
             </div>
           </div>
           
-          <div class="info-item">
-            <i class="el-icon-office-building info-icon"></i>
+          <!-- 作战时间 -->
+          <div class="info-box">
+            <i class="el-icon-timer info-icon"></i>
             <div class="info-content">
-              <div class="info-label">房间编号</div>
-              <div class="info-value">{{ roomCode }}</div>
+              <div class="info-label">作战时间</div>
+              <div class="info-value">{{ combatTime }}</div>
             </div>
           </div>
           
-          <div class="info-item">
-            <i class="el-icon-user info-icon"></i>
+          <!-- 天文时间 -->
+          <div class="info-box">
+            <i class="el-icon-sunny info-icon"></i>
             <div class="info-content">
-              <div class="info-label">在线人数</div>
-              <div class="info-value">{{ onlineCount }}人</div>
+              <div class="info-label">天文时间</div>
+              <div class="info-value">{{ astroTime }}</div>
             </div>
           </div>
         </div>
         
         <!-- 用户状态区域 -->
-        <div class="user-status">
-          <!-- 导入按钮 -->
-          <el-button 
-            type="primary" 
-            size="mini" 
-            icon="el-icon-upload2"
-            class="blue-btn import-btn"
-            @click="importData"
-          >
-            导入
-          </el-button>
-          
-          <!-- 导出按钮 -->
-          <el-button 
-            type="primary" 
-            size="mini" 
-            icon="el-icon-download"
-            class="blue-btn export-btn"
-            @click="exportReport"
-          >
-            导出
-          </el-button>
-          
+        <div class="user-status-area">
           <!-- 用户头像 -->
           <el-avatar :size="32" :src="userAvatar" class="user-avatar" />
-          
-          <!-- 在线状态 -->
-          <div class="online-status">
-            <span class="dot online"></span>
-            <span class="text">在线</span>
-          </div>
         </div>
       </div>
     </div>
@@ -449,24 +424,24 @@ export default {
   name: 'MissionPlanningView',
   data() {
     return {
-      // 导航菜单
-      activeNavMenu: 'file',
-      navMenuItems: [
-        { id: 'file', name: '文件' },
-        { id: 'edit', name: '编辑' },
-        { id: 'view', name: '视图' },
-        { id: 'map', name: '地图' },
-        { id: 'airspace', name: '空域' },
-        { id: 'tools', name: '工具' },
-        { id: 'options', name: '选项' },
-        { id: 'favorites', name: '收藏' }
+      // 顶部导航
+      activeTopNav: 'file',
+      topNavItems: [
+        { id: 'file', name: '文件', icon: 'el-icon-document' },
+        { id: 'edit', name: '编辑', icon: 'el-icon-edit' },
+        { id: 'view', name: '视图', icon: 'el-icon-view' },
+        { id: 'map', name: '地图', icon: 'el-icon-map-location' },
+        { id: 'airspace', name: '空域', icon: 'el-icon-s-grid' },
+        { id: 'tools', name: '工具', icon: 'el-icon-setting' },
+        { id: 'options', name: '选项', icon: 'el-icon-s-tools' },
+        { id: 'favorites', name: '收藏', icon: 'el-icon-star-on' }
       ],
       
       // 作战信息
-      combatTime: 'K+01:15:30',
-      astroTime: '2023-10-15 14:30:00',
-      roomCode: 'CMD-ALPHA-01',
-      onlineCount: 5,
+      roomCode: 'JTF-7-ALPHA',
+      onlineCount: 30,
+      combatTime: 'K+01:30:45',
+      astroTime: '',
       
       // 左侧菜单栏
       isMenuHidden: true,      // 是否完全隐藏左侧菜单
@@ -560,11 +535,43 @@ export default {
     this.isMenuHidden = true;
     // 初始化时右侧面板隐藏
     this.isRightPanelHidden = true;
+    
+    // 更新时间
+    this.updateTime();
+    setInterval(this.updateTime, 1000);
+    // 作战时间也需要实时更新
+    setInterval(this.updateCombatTime, 1000);
   },
   methods: {
-    // 导航菜单操作
-    selectNavMenu(item) {
-      this.activeNavMenu = item.id;
+    updateTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = (now.getMonth() + 1).toString().padStart(2, '0');
+      const day = now.getDate().toString().padStart(2, '0');
+      const hours = now.getHours().toString().padStart(2, '0');
+      const minutes = now.getMinutes().toString().padStart(2, '0');
+      const seconds = now.getSeconds().toString().padStart(2, '0');
+      this.astroTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    },
+    
+    updateCombatTime() {
+      // 模拟作战时间（K时）的更新
+      // 这里简单模拟，实际应该根据业务逻辑计算
+      const now = new Date();
+      const baseSeconds = 5400; // 1小时30分钟 = 5400秒
+      const currentSeconds = now.getSeconds() + now.getMinutes() * 60 + now.getHours() * 3600;
+      const combatSeconds = baseSeconds + (currentSeconds % 86400);
+      
+      const hours = Math.floor(combatSeconds / 3600);
+      const minutes = Math.floor((combatSeconds % 3600) / 60);
+      const seconds = combatSeconds % 60;
+      
+      this.combatTime = `K+${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    },
+    
+    // 顶部导航菜单操作
+    selectTopNav(item) {
+      this.activeTopNav = item.id;
       this.$message.info(`选择菜单: ${item.name}`);
     },
     
@@ -727,7 +734,8 @@ export default {
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, #1a2f4b 0%, #2c3e50 100%);
-  background-image: url('~@/assets/map-background.png');
+  /* 正确的写法，直接复制这行替换 */
+background: url('~@/assets/map-background.png');
   background-size: cover;
   background-position: center;
   z-index: 1;
@@ -870,108 +878,115 @@ export default {
   color: #008aff;
 }
 
-/* 顶部导航栏 - 重新设计 */
+/* 顶部导航栏 - 最终优化设计 */
 .floating-header {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
-  height: 70px;
-  padding: 0 25px;
-  border-radius: 0 0 12px 12px;
+  height: 60px;
+  padding: 0 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   z-index: 100;
-  backdrop-filter: blur(20px);
-  border: none;
-  box-shadow: 0 4px 20px rgba(0, 138, 255, 0.25);
-  background: rgba(255, 255, 255, 0.95);
-  border-bottom: 2px solid rgba(0, 138, 255, 0.3);
+  backdrop-filter: blur(15px);
+  background: rgba(255, 255, 255, 0.85);
+  border-bottom: 1px solid rgba(0, 138, 255, 0.2);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 }
 
 .header-left {
   display: flex;
   align-items: center;
-  gap: 40px;
+  gap: 25px;
+  flex: 1;
 }
 
-.system-logo {
+.system-title {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding-right: 25px;
-  border-right: 1px solid rgba(0, 138, 255, 0.3);
+  font-size: 18px;
+  font-weight: bold;
+  min-width: 180px;
 }
 
-.logo-icon {
-  font-size: 28px;
+.system-title i {
+  font-size: 24px;
   color: #008aff;
-  text-shadow: 0 0 10px rgba(0, 138, 255, 0.5);
-  background: linear-gradient(135deg, #008aff, #0066cc);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
 }
 
-.system-name {
-  font-size: 22px;
-  font-weight: 800;
-  color: #008aff;
-  text-shadow: 0 2px 4px rgba(0, 138, 255, 0.2);
-  letter-spacing: 1px;
-  background: linear-gradient(135deg, #008aff, #0066cc);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+.blue-title {
+  color: #008aff !important;
 }
 
-.nav-menu {
+/* 顶部导航菜单 - 优化为简洁文字效果 */
+.top-nav-menu {
   display: flex;
   gap: 0;
-  background: rgba(255, 255, 255, 0.9);
-  border-radius: 8px;
-  padding: 4px;
-  border: 1px solid rgba(0, 138, 255, 0.2);
-  box-shadow: 0 2px 8px rgba(0, 138, 255, 0.1);
-  backdrop-filter: blur(5px);
+  flex: 1;
+  overflow-x: auto;
+  max-width: 800px;
+  padding: 5px 0;
+  scrollbar-width: thin;
+}
+
+.top-nav-menu::-webkit-scrollbar {
+  height: 3px;
+}
+
+.top-nav-menu::-webkit-scrollbar-track {
+  background: rgba(0, 138, 255, 0.1);
+  border-radius: 2px;
 }
 
-.nav-menu-item {
-  padding: 8px 20px;
+.top-nav-menu::-webkit-scrollbar-thumb {
+  background: rgba(0, 138, 255, 0.3);
+  border-radius: 2px;
+}
+
+.top-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
   cursor: pointer;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
-  color: #555;
+  color: #333;
   transition: all 0.3s;
-  border-radius: 6px;
+  border-radius: 4px;
+  white-space: nowrap;
+  min-width: 60px;
+  justify-content: center;
+  margin: 0 1px;
   position: relative;
-  text-align: center;
-  min-width: 70px;
+  flex-shrink: 0;
 }
 
-.nav-menu-item:hover {
+.top-nav-item:hover {
   color: #008aff;
-  background: rgba(0, 138, 255, 0.1);
-  transform: translateY(-1px);
-  box-shadow: 0 2px 6px rgba(0, 138, 255, 0.15);
 }
 
-.nav-menu-item.active {
+.top-nav-item.active {
   color: #008aff;
-  background: linear-gradient(135deg, rgba(0, 138, 255, 0.15), rgba(0, 138, 255, 0.25));
-  box-shadow: 0 2px 8px rgba(0, 138, 255, 0.2);
+  font-weight: 700;
 }
 
-.nav-menu-item.active::after {
-  content: '';
-  position: absolute;
-  bottom: -2px;
-  left: 20%;
-  width: 60%;
-  height: 2px;
-  background: linear-gradient(90deg, #008aff, #0066cc);
-  border-radius: 1px;
+/* 移除了蓝色指示条 */
+.top-nav-item.active::after {
+  display: none;
+}
+
+.nav-icon {
+  font-size: 14px;
+  color: #333;
+  transition: all 0.3s;
+}
+
+.top-nav-item:hover .nav-icon,
+.top-nav-item.active .nav-icon {
+  color: #008aff;
 }
 
 .nav-text {
@@ -982,44 +997,46 @@ export default {
 .header-right {
   display: flex;
   align-items: center;
-  gap: 30px;
+  gap: 15px;
 }
 
-.combat-info {
+/* 作战信息组 */
+.combat-info-group {
   display: flex;
-  gap: 25px;
-  background: rgba(255, 255, 255, 0.9);
-  border-radius: 10px;
-  padding: 8px 20px;
-  border: 1px solid rgba(0, 138, 255, 0.2);
-  box-shadow: 0 2px 10px rgba(0, 138, 255, 0.15);
-  backdrop-filter: blur(5px);
+  gap: 12px;
 }
 
-.info-item {
+.info-box {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 0 10px;
-  border-right: 1px solid rgba(0, 138, 255, 0.2);
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  transition: all 0.3s;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(0, 138, 255, 0.2);
+  box-shadow: 0 2px 6px rgba(0, 138, 255, 0.1);
+  min-width: 120px;
 }
 
-.info-item:last-child {
-  border-right: none;
+.info-box:hover {
+  background: rgba(255, 255, 255, 0.9);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 10px rgba(0, 138, 255, 0.2);
+  border-color: rgba(0, 138, 255, 0.3);
 }
 
 .info-icon {
-  font-size: 18px;
+  font-size: 16px;
   color: #008aff;
-  background: rgba(0, 138, 255, 0.1);
-  padding: 6px;
-  border-radius: 6px;
-  box-shadow: 0 2px 6px rgba(0, 138, 255, 0.2);
+  min-width: 20px;
+  text-align: center;
 }
 
 .info-content {
   display: flex;
   flex-direction: column;
+  flex: 1;
 }
 
 .info-label {
@@ -1027,106 +1044,50 @@ export default {
   color: #666;
   font-weight: 500;
   margin-bottom: 2px;
+  white-space: nowrap;
 }
 
 .info-value {
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 700;
   color: #333;
+  white-space: nowrap;
   font-family: 'Courier New', monospace;
+  letter-spacing: 0.5px;
 }
 
-/* 用户状态区域 */
-.user-status {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-}
-
-.import-btn {
-  background: linear-gradient(135deg, rgba(82, 196, 26, 0.8), rgba(64, 158, 20, 0.8));
-  border: 1px solid rgba(82, 196, 26, 0.9);
-}
-
-.import-btn:hover {
-  background: linear-gradient(135deg, rgba(82, 196, 26, 0.9), rgba(64, 158, 20, 0.9));
-  border-color: rgba(82, 196, 26, 1);
-  box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
+/* 作战时间和天文时间的特殊样式 */
+.combat-info-group .info-box:nth-child(3) .info-value {
+  color: #008aff;
 }
 
-.export-btn {
-  background: linear-gradient(135deg, rgba(0, 138, 255, 0.8), rgba(0, 102, 204, 0.8));
-  border: 1px solid rgba(0, 138, 255, 0.9);
+.combat-info-group .info-box:nth-child(4) .info-value {
+  color: #52c41a;
 }
 
-.export-btn:hover {
-  background: linear-gradient(135deg, rgba(0, 138, 255, 0.9), rgba(0, 102, 204, 0.9));
-  border-color: rgba(0, 138, 255, 1);
-  box-shadow: 0 2px 8px rgba(0, 138, 255, 0.3);
+/* 用户状态区域 */
+.user-status-area {
+  display: flex;
+  align-items: center;
 }
 
 .user-avatar {
   border: 2px solid rgba(0, 138, 255, 0.3);
-  box-shadow: 0 2px 8px rgba(0, 138, 255, 0.2);
+  box-shadow: 0 2px 6px rgba(0, 138, 255, 0.15);
   transition: all 0.3s;
+  background: rgba(255, 255, 255, 0.9);
 }
 
 .user-avatar:hover {
   transform: scale(1.1);
-  box-shadow: 0 4px 12px rgba(0, 138, 255, 0.3);
-}
-
-.online-status {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  color: #52c41a;
-  font-size: 12px;
-  font-weight: 600;
-  padding: 6px 12px;
-  background: rgba(82, 196, 26, 0.1);
-  border-radius: 6px;
-  border: 1px solid rgba(82, 196, 26, 0.3);
-  box-shadow: 0 2px 6px rgba(82, 196, 26, 0.15);
-  transition: all 0.3s;
-}
-
-.online-status:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 10px rgba(82, 196, 26, 0.2);
-}
-
-.dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-
-.dot.online {
-  background: #52c41a;
-  animation: pulse 2s infinite;
-  box-shadow: 0 0 8px rgba(82, 196, 26, 0.8);
-}
-
-@keyframes pulse {
-  0% { 
-    opacity: 1; 
-    box-shadow: 0 0 8px rgba(82, 196, 26, 0.8);
-  }
-  50% { 
-    opacity: 0.7; 
-    box-shadow: 0 0 12px rgba(82, 196, 26, 1);
-  }
-  100% { 
-    opacity: 1; 
-    box-shadow: 0 0 8px rgba(82, 196, 26, 0.8);
-  }
+  box-shadow: 0 4px 10px rgba(0, 138, 255, 0.25);
+  border-color: rgba(0, 138, 255, 0.6);
 }
 
 /* 左侧菜单栏 - 蓝色主题 */
 .floating-left-menu {
   position: absolute;
-  top: 80px;
+  top: 70px;
   left: 20px;
   width: 40px;
   background: rgba(255, 255, 255, 0.3);
@@ -1256,7 +1217,7 @@ export default {
 /* 右侧外部隐藏按钮 */
 .right-external-hide-btn {
   position: absolute;
-  top: 80px;
+  top: 70px;
   right: 320px; /* 面板宽度300px + 外边距20px */
   width: 28px;
   height: 40px;
@@ -1292,7 +1253,7 @@ export default {
 /* 右侧浮动面板 - 蓝色主题 */
 .floating-right-panel {
   position: absolute;
-  top: 80px;
+  top: 70px;
   right: 20px;
   width: 300px;
   border-radius: 0 8px 8px 8px;