diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..6a6db44
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "cesium-map-object",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/ruoyi-ui/src/assets/map-background.png b/ruoyi-ui/src/assets/map-background.png
new file mode 100644
index 0000000..91c9391
Binary files /dev/null and b/ruoyi-ui/src/assets/map-background.png differ
diff --git a/ruoyi-ui/src/router/index.js b/ruoyi-ui/src/router/index.js
index 8c7dc38..ef966ba 100644
--- a/ruoyi-ui/src/router/index.js
+++ b/ruoyi-ui/src/router/index.js
@@ -46,6 +46,18 @@ export const constantRoutes = [
     component: () => import('@/views/login'),
     hidden: true
   },
+  // 登录跳转选择房间
+  {
+    path: '/selectRoom',
+    component: () => import('@/views/selectRoom'),
+    hidden: true
+  },
+  // 选择房间跳转
+  {
+    path: '/childRoom',
+    component: () => import('@/views/childRoom'),
+    hidden: true
+  },
   {
     path: '/cesiumMap',
     component: () => import('@/views/cesiumMap'),
diff --git a/ruoyi-ui/src/views/childRoom/index.vue b/ruoyi-ui/src/views/childRoom/index.vue
new file mode 100644
index 0000000..6cf88bf
--- /dev/null
+++ b/ruoyi-ui/src/views/childRoom/index.vue
@@ -0,0 +1,1913 @@
+<template>
+  <!-- 以地图为绝对定位背景，所有组件浮动其上 -->
+  <div class="mission-planning-container">
+    <!-- 地图背景 -->
+    <div id="gis-map-background" class="map-background">
+      <div class="map-overlay-text">
+        <i class="el-icon-location-outline text-3xl mb-2 block"></i>
+        <p>二维GIS地图区域</p>
+        <p class="text-sm mt-1">支持标绘/航线/空域/实时态势</p>
+      </div>
+      
+      <!-- 地图中间的浮动红点（触发左侧菜单） -->
+      <div 
+        class="floating-red-dot left-red-dot" 
+        :class="{ hidden: !isMenuHidden }"
+        @click="showMenu"
+        title="显示左侧菜单"
+      >
+        <div class="red-dot"></div>
+        <i class="el-icon-s-unfold icon-inside"></i>
+      </div>
+      
+      <!-- 地图中间的浮动红点（触发右侧面板） -->
+      <div 
+        class="floating-red-dot right-red-dot" 
+        :class="{ hidden: !isRightPanelHidden }"
+        @click="showRightPanel"
+        title="显示右侧面板"
+      >
+        <div class="red-dot"></div>
+        <i class="el-icon-s-fold icon-inside"></i>
+      </div>
+    </div>
+
+    <!-- 顶部浮动导航栏 - 重新设计 -->
+    <div class="floating-header blue-theme">
+      <!-- 左侧：Logo和系统名称 -->
+      <div class="header-left">
+        <div class="system-logo">
+          <i class="el-icon-s-promotion logo-icon"></i>
+          <span class="system-name">联合作战筹划系统</span>
+        </div>
+        
+        <!-- 导航菜单 -->
+        <div class="nav-menu">
+          <div 
+            v-for="item in navMenuItems" 
+            :key="item.id"
+            class="nav-menu-item"
+            :class="{ active: activeNavMenu === item.id }"
+            @click="selectNavMenu(item)"
+          >
+            <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="info-content">
+              <div class="info-label">作战时间</div>
+              <div class="info-value">{{ combatTime }}</div>
+            </div>
+          </div>
+          
+          <div class="info-item">
+            <i class="el-icon-sunny info-icon"></i>
+            <div class="info-content">
+              <div class="info-label">天文时间</div>
+              <div class="info-value">{{ astroTime }}</div>
+            </div>
+          </div>
+          
+          <div class="info-item">
+            <i class="el-icon-office-building info-icon"></i>
+            <div class="info-content">
+              <div class="info-label">房间编号</div>
+              <div class="info-value">{{ roomCode }}</div>
+            </div>
+          </div>
+          
+          <div class="info-item">
+            <i class="el-icon-user info-icon"></i>
+            <div class="info-content">
+              <div class="info-label">在线人数</div>
+              <div class="info-value">{{ onlineCount }}人</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>
+          
+          <!-- 用户头像 -->
+          <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>
+
+    <!-- 左侧折叠菜单栏 - 蓝色主题 -->
+    <div 
+      class="floating-left-menu" 
+      :class="{ 'hidden': isMenuHidden }"
+      @mouseenter="showMenuTooltip = true"
+      @mouseleave="showMenuTooltip = false"
+    >
+      <!-- 隐藏按钮（>箭头） -->
+      <div class="hide-btn" @click="hideMenu" 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="selectMenu(item)"
+          @mouseenter="showTooltip(item)"
+          @mouseleave="hideTooltip"
+        >
+          <i :class="item.icon"></i>
+          <!-- 悬浮提示 -->
+          <div v-if="showMenuTooltip && hoverMenu === item.id" class="menu-tooltip">
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+      
+      <!-- 菜单工具提示层（解决遮挡） -->
+      <div v-if="showMenuTooltip && hoverMenu" class="menu-tooltip-layer">
+        <div class="tooltip-content">{{ getMenuName(hoverMenu) }}</div>
+      </div>
+    </div>
+
+    <!-- 右侧外部隐藏按钮 -->
+    <div 
+      class="right-external-hide-btn" 
+      :class="{ hidden: isRightPanelHidden }"
+      @click="hideRightPanel"
+      title="隐藏右侧面板"
+    >
+      <i class="el-icon-arrow-right"></i>
+    </div>
+
+    <!-- 右侧实体列表（浮动）- 蓝色主题 -->
+    <div 
+      class="floating-right-panel blue-theme" 
+      :class="{ 'hidden': isRightPanelHidden }"
+    >
+      <!-- 移除面板内部的隐藏按钮 -->
+      
+      <div class="right-tabs">
+        <!-- 方案 -->
+        <div 
+          class="right-tab-item" 
+          :class="{ active: activeRightTab === 'plan' }"
+          @click="activeRightTab = 'plan'"
+        >
+          <i class="el-icon-s-operation"></i>
+          <span>方案</span>
+        </div>
+        
+        <!-- 冲突 -->
+        <div 
+          class="right-tab-item" 
+          :class="{ active: activeRightTab === 'conflict' }"
+          @click="activeRightTab = 'conflict'"
+        >
+          <i class="el-icon-warning-outline"></i>
+          <span>冲突</span>
+          <span v-if="conflictCount > 0" class="badge blue-badge">{{ conflictCount }}</span>
+        </div>
+        
+        <!-- 平台 -->
+        <div 
+          class="right-tab-item" 
+          :class="{ active: activeRightTab === 'platform' }"
+          @click="activeRightTab = 'platform'"
+        >
+          <i class="el-icon-ship"></i>
+          <span>平台</span>
+        </div>
+      </div>
+
+      <!-- 方案内容 -->
+      <div v-if="activeRightTab === 'plan'" class="tab-content plan-content">
+        <div class="section">
+          <div class="section-title">航线列表</div>
+          <div class="route-list">
+            <div 
+              v-for="route in routes" 
+              :key="route.id"
+              class="route-item"
+              :class="{ selected: selectedRouteId === route.id }"
+              @click="selectRoute(route)"
+            >
+              <i class="el-icon-map-location"></i>
+              <div class="route-info">
+                <div class="route-name">{{ route.name }}</div>
+                <div class="route-meta">{{ route.points }}个航点</div>
+              </div>
+              <el-tag 
+                v-if="route.conflict"
+                size="mini" 
+                type="danger"
+                class="conflict-tag"
+              >
+                冲突
+              </el-tag>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="selectedRouteDetails" class="section">
+          <div class="section-title">航点列表</div>
+          <div class="waypoint-list">
+            <div 
+              v-for="point in selectedRouteDetails.waypoints" 
+              :key="point.name"
+              class="waypoint-item"
+            >
+              <i class="el-icon-location"></i>
+              <div class="waypoint-info">
+                <div class="waypoint-name">{{ point.name }}</div>
+                <div class="waypoint-meta">高度: {{ point.altitude }}m | 速度: {{ point.speed }}</div>
+              </div>
+              <div class="waypoint-actions">
+                <i class="el-icon-edit" title="编辑"></i>
+                <i class="el-icon-delete" title="删除"></i>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="action-buttons">
+          <el-button type="primary" size="mini" icon="el-icon-circle-plus" class="blue-btn" @click="addWaypoint">
+            添加航点
+          </el-button>
+          <el-button size="mini" class="blue-btn" @click="cancelRoute">
+            取消
+          </el-button>
+        </div>
+      </div>
+
+      <!-- 冲突内容 -->
+      <div v-if="activeRightTab === 'conflict'" class="tab-content conflict-content">
+        <div v-if="conflicts.length > 0" class="conflict-list">
+          <div 
+            v-for="conflict in conflicts" 
+            :key="conflict.id"
+            class="conflict-item"
+          >
+            <div class="conflict-header">
+              <i class="el-icon-warning" style="color: #f56c6c;"></i>
+              <span class="conflict-title">{{ conflict.title }}</span>
+              <el-tag size="mini" type="danger">严重</el-tag>
+            </div>
+            <div class="conflict-details">
+              <div class="detail-item">
+                <span class="label">涉及航线：</span>
+                <span class="value">{{ conflict.routes.join('、') }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">冲突时间：</span>
+                <span class="value">{{ conflict.time }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">冲突位置：</span>
+                <span class="value">{{ conflict.position }}</span>
+              </div>
+            </div>
+            <div class="conflict-actions">
+              <el-button type="text" size="mini" class="blue-text-btn" @click="viewConflict(conflict)">
+                查看详情
+              </el-button>
+              <el-button type="text" size="mini" class="blue-text-btn" @click="resolveConflict(conflict)">
+                解决冲突
+              </el-button>
+            </div>
+          </div>
+        </div>
+        <div v-else class="no-conflict">
+          <i class="el-icon-success" style="color: #67c23a; font-size: 24px;"></i>
+          <p>暂无冲突</p>
+          <el-button size="mini" class="blue-btn" @click="runConflictCheck">
+            重新检测
+          </el-button>
+        </div>
+      </div>
+
+      <!-- 平台内容 -->
+      <div v-if="activeRightTab === 'platform'" class="tab-content platform-content">
+        <div class="platform-categories">
+          <el-tabs v-model="activePlatformTab" type="card" size="mini" class="blue-tabs">
+            <el-tab-pane label="空中" name="air">
+              <div class="platform-list">
+                <div 
+                  v-for="platform in airPlatforms" 
+                  :key="platform.id"
+                  class="platform-item"
+                >
+                  <div class="platform-icon" :style="{ color: platform.color }">
+                    <i :class="platform.icon"></i>
+                  </div>
+                  <div class="platform-info">
+                    <div class="platform-name">{{ platform.name }}</div>
+                    <div class="platform-type">{{ platform.type }}</div>
+                  </div>
+                  <div class="platform-status">
+                    <span class="status-dot" :class="platform.status"></span>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            
+            <el-tab-pane label="海上" name="sea">
+              <div class="platform-list">
+                <div 
+                  v-for="platform in seaPlatforms" 
+                  :key="platform.id"
+                  class="platform-item"
+                >
+                  <div class="platform-icon" :style="{ color: platform.color }">
+                    <i :class="platform.icon"></i>
+                  </div>
+                  <div class="platform-info">
+                    <div class="platform-name">{{ platform.name }}</div>
+                    <div class="platform-type">{{ platform.type }}</div>
+                  </div>
+                  <div class="platform-status">
+                    <span class="status-dot" :class="platform.status"></span>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            
+            <el-tab-pane label="地面" name="ground">
+              <div class="platform-list">
+                <div 
+                  v-for="platform in groundPlatforms" 
+                  :key="platform.id"
+                  class="platform-item"
+                >
+                  <div class="platform-icon" :style="{ color: platform.color }">
+                    <i :class="platform.icon"></i>
+                  </div>
+                  <div class="platform-info">
+                    <div class="platform-name">{{ platform.name }}</div>
+                    <div class="platform-type">{{ platform.type }}</div>
+                  </div>
+                  <div class="platform-status">
+                    <span class="status-dot" :class="platform.status"></span>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部时间轴（最初版本的样式）- 蓝色主题 -->
+    <div 
+      class="floating-timeline blue-theme" 
+      :class="{ 'show': showKTimePopup }"
+    >
+      <!-- 隐藏按钮（向下箭头） -->
+      <div class="popup-hide-btn" @click="hideKTimePopup" title="隐藏K时">
+        <i class="el-icon-arrow-down"></i>
+      </div>
+      
+      <div class="timeline-controls">
+        <div class="current-time blue-time">
+          <i class="el-icon-time"></i>
+          <span class="time-text">{{ currentTime }}</span>
+        </div>
+        
+        <div class="timeline-slider">
+          <el-slider 
+            v-model="timeProgress" 
+            :max="100" 
+            :format-tooltip="formatTimeTooltip"
+            class="compact-slider blue-slider"
+          />
+        </div>
+        
+        <div class="timeline-marks">
+          <span class="mark">K-02:00</span>
+          <span class="mark">K-01:00</span>
+          <span class="mark current blue-mark">K时</span>
+          <span class="mark">K+01:00</span>
+          <span class="mark">K+02:00</span>
+        </div>
+      </div>
+      
+      <div class="system-status">
+        <div class="status-item">
+          <span class="status-label">网络延迟：</span>
+          <span class="status-value success blue-success">< 200ms</span>
+        </div>
+        <div class="status-item">
+          <span class="status-label">数据同步：</span>
+          <span class="status-value success blue-success">正常</span>
+        </div>
+        <div class="status-item">
+          <span class="status-label">检测告警：</span>
+          <span class="status-value warning blue-warning">2处</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+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: '收藏' }
+      ],
+      
+      // 作战信息
+      combatTime: 'K+01:15:30',
+      astroTime: '2023-10-15 14:30:00',
+      roomCode: 'CMD-ALPHA-01',
+      onlineCount: 5,
+      
+      // 左侧菜单栏
+      isMenuHidden: true,      // 是否完全隐藏左侧菜单
+      activeMenu: 'file',
+      hoverMenu: '',
+      showMenuTooltip: false,
+      
+      // 右侧面板控制
+      isRightPanelHidden: true, // 是否完全隐藏右侧面板
+      
+      // K时弹出框控制
+      showKTimePopup: false,
+      
+      menuItems: [
+        { id: 'file', name: '文件', icon: 'el-icon-document' },
+        { id: 'start', name: '开始', icon: 'el-icon-caret-right' },
+        { id: 'insert', name: '插入', icon: 'el-icon-plus' },
+        { id: 'pattern', name: '图案', icon: 'el-icon-picture-outline' },
+        { id: 'deduction', name: '推演', icon: 'el-icon-video-play' },
+        { id: 'modify', name: '修改', icon: 'el-icon-edit' },
+        { id: 'refresh', name: '刷新', icon: 'el-icon-refresh' },
+        { id: 'basemap', name: '底图', icon: 'el-icon-map-location' },
+        { id: 'import', name: '导入', icon: 'el-icon-upload2' },
+        { id: 'export', name: '导出', icon: 'el-icon-download' }
+      ],
+      
+      // 右侧面板
+      activeRightTab: 'plan',
+      selectedRouteId: 101,
+      selectedRouteDetails: null,
+      
+      // 冲突数据
+      conflictCount: 2,
+      conflicts: [
+        {
+          id: 1,
+          title: '航线空间冲突',
+          routes: ['Alpha进场航线', 'Beta巡逻航线'],
+          time: 'K+01:20:00',
+          position: 'E116° N39°',
+          severity: 'high'
+        },
+        {
+          id: 2,
+          title: '时间窗口重叠',
+          routes: ['侦察覆盖区', '无人机巡逻'],
+          time: 'K+02:15:00',
+          position: 'E117° N38°',
+          severity: 'medium'
+        }
+      ],
+      
+      // 平台数据
+      activePlatformTab: 'air',
+      airPlatforms: [
+        { id: 1, name: 'J-20 歼击机', type: '战斗机', icon: 'el-icon-fighter', color: '#52c41a', status: 'ready' },
+        { id: 2, name: 'KJ-2000 预警机', type: '预警机', icon: 'el-icon-s-promotion', color: '#1890ff', status: 'flying' },
+        { id: 3, name: 'UAV-01 无人机', type: '侦察无人机', icon: 'el-icon-drone', color: '#fa8c16', status: 'scouting' },
+        { id: 4, name: 'H-6K 轰炸机', type: '轰炸机', icon: 'el-icon-bomb', color: '#722ed1', status: 'ready' },
+      ],
+      seaPlatforms: [
+        { id: 5, name: '辽宁舰', type: '航空母舰', icon: 'el-icon-ship', color: '#1890ff', status: 'sailing' },
+        { id: 6, name: '055型驱逐舰', type: '驱逐舰', icon: 'el-icon-ship', color: '#52c41a', status: 'patrol' },
+        { id: 7, name: '093型潜艇', type: '核潜艇', icon: 'el-icon-ship', color: '#333', status: 'hidden' },
+      ],
+      groundPlatforms: [
+        { id: 8, name: 'HQ-9防空系统', type: '防空导弹', icon: 'el-icon-mic', color: '#f5222d', status: 'alert' },
+        { id: 9, name: 'PLZ-05自行火炮', type: '自行火炮', icon: 'el-icon-aim', color: '#fa8c16', status: 'ready' },
+        { id: 10, name: '指挥控制车', type: '指挥车', icon: 'el-icon-monitor', color: '#1890ff', status: 'operating' },
+      ],
+      
+      // 航线数据
+      routes: [
+        { id: 101, name: 'Alpha进场航线', points: 8, conflict: true },
+        { id: 102, name: 'Beta巡逻航线', points: 6, conflict: false },
+        { id: 103, name: '侦察覆盖区', points: 4, conflict: false },
+      ],
+      
+      // 时间控制
+      timeProgress: 45,
+      currentTime: 'K+01:15:30',
+      
+      // 用户
+      userAvatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+    };
+  },
+  mounted() {
+    // 初始化时选中第一条航线
+    this.selectRoute(this.routes[0]);
+    // 初始化时左侧菜单隐藏
+    this.isMenuHidden = true;
+    // 初始化时右侧面板隐藏
+    this.isRightPanelHidden = true;
+  },
+  methods: {
+    // 导航菜单操作
+    selectNavMenu(item) {
+      this.activeNavMenu = item.id;
+      this.$message.info(`选择菜单: ${item.name}`);
+    },
+    
+    // 左侧菜单栏操作
+    showMenu() {
+      this.isMenuHidden = false;
+      this.$message.info('显示左侧菜单');
+    },
+    
+    hideMenu() {
+      this.isMenuHidden = true;
+      this.$message.info('隐藏左侧菜单');
+    },
+    
+    // 右侧面板操作
+    showRightPanel() {
+      this.isRightPanelHidden = false;
+      this.$message.info('显示右侧面板');
+    },
+    
+    hideRightPanel() {
+      this.isRightPanelHidden = true;
+      this.$message.info('隐藏右侧面板');
+    },
+    
+    selectMenu(item) {
+      this.activeMenu = item.id;
+      
+      if (item.id === 'deduction') {
+        // 点击推演按钮，显示/隐藏K时弹出框
+        this.showKTimePopup = !this.showKTimePopup;
+        if (this.showKTimePopup) {
+          this.$message.info('显示推演时钟控制');
+        } else {
+          this.$message.info('隐藏推演时钟控制');
+        }
+      } else {
+        // 其他菜单的原有逻辑
+        this.$message.info(`选择菜单: ${item.name}`);
+      }
+    },
+    
+    showTooltip(item) {
+      this.hoverMenu = item.id;
+    },
+    
+    hideTooltip() {
+      this.hoverMenu = '';
+    },
+    
+    getMenuName(id) {
+      const menu = this.menuItems.find(item => item.id === id);
+      return menu ? menu.name : '';
+    },
+    
+    // K时弹出框操作
+    hideKTimePopup() {
+      this.showKTimePopup = false;
+      this.$message.info('隐藏推演时钟控制');
+    },
+    
+    // 时间控制（保留用于底部时间轴）
+    play() {
+      this.$message.success('推演开始');
+    },
+    
+    pause() {
+      this.$message.info('推演暂停');
+    },
+    
+    reset() {
+      this.timeProgress = 0;
+      this.currentTime = 'K+00:00:00';
+      this.$message.info('推演已重置');
+    },
+    
+    formatTimeTooltip(val) {
+      const hours = Math.floor(val / 4);
+      const minutes = (val % 4) * 15;
+      return `K+${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
+    },
+    
+    // 航线操作
+    selectRoute(route) {
+      this.selectedRouteId = route.id;
+      // 模拟获取航点数据
+      this.selectedRouteDetails = {
+        name: route.name,
+        waypoints: [
+          { name: 'WP1', altitude: 5000, speed: '800km/h', eta: 'K+00:40:00' },
+          { name: 'WP2', altitude: 6000, speed: '850km/h', eta: 'K+00:55:00' },
+          { name: 'WP3', altitude: 5500, speed: '820km/h', eta: 'K+01:10:00' },
+          { name: 'WP4', altitude: 5800, speed: '830km/h', eta: 'K+01:25:00' },
+        ]
+      };
+    },
+    
+    addWaypoint() {
+      if (this.selectedRouteDetails) {
+        const count = this.selectedRouteDetails.waypoints.length + 1;
+        this.selectedRouteDetails.waypoints.push({
+          name: `WP${count}`,
+          altitude: 5000,
+          speed: '800km/h',
+          eta: `K+01:${(count * 15).toString().padStart(2, '0')}:00`
+        });
+        this.$message.success('添加航点成功');
+      }
+    },
+    
+    cancelRoute() {
+      this.selectedRouteId = null;
+      this.selectedRouteDetails = null;
+      this.$message.info('已取消选中');
+    },
+    
+    // 冲突操作
+    runConflictCheck() {
+      this.conflictCount = 2;
+      this.$message.warning('检测到2处航线冲突');
+    },
+    
+    viewConflict(conflict) {
+      this.$message.info(`查看冲突：${conflict.title}`);
+    },
+    
+    resolveConflict(conflict) {
+      this.$message.success(`解决冲突：${conflict.title}`);
+      // 移除已解决的冲突
+      this.conflicts = this.conflicts.filter(c => c.id !== conflict.id);
+      this.conflictCount = this.conflicts.length;
+    },
+    
+    // 系统功能
+    exportReport() {
+      this.$message.success('作战报表导出成功');
+    },
+    
+    // 新增导入功能
+    importData() {
+      this.$message.success('导入数据成功');
+    }
+  }
+};
+</script>
+
+<style scoped>
+.mission-planning-container {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* 地图背景 - 保持不变 */
+.map-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #1a2f4b 0%, #2c3e50 100%);
+  background-image: url('~@/assets/map-background.png');
+  background-size: cover;
+  background-position: center;
+  z-index: 1;
+}
+
+.map-overlay-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: rgba(255, 255, 255, 0.3);
+  text-align: center;
+  font-size: 18px;
+  pointer-events: none;
+}
+
+/* 地图中间的浮动红点 - 通用样式 */
+.floating-red-dot {
+  position: absolute;
+  top: 50%;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(5px);
+  border: 2px solid rgba(255, 0, 0, 0.8);
+  box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
+  cursor: pointer;
+  z-index: 80;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  animation: pulse-red 2s infinite;
+}
+
+.floating-red-dot:hover {
+  transform: translateY(-50%) scale(1.1);
+  box-shadow: 0 0 25px rgba(255, 0, 0, 0.8);
+}
+
+.floating-red-dot.hidden {
+  display: none;
+}
+
+/* 左侧红点 */
+.left-red-dot {
+  left: 20px;
+  transform: translateY(-50%);
+}
+
+/* 右侧红点 */
+.right-red-dot {
+  right: 20px;
+  transform: translateY(-50%);
+}
+
+.red-dot {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 30% 30%, #ff4444, #cc0000);
+  position: relative;
+}
+
+.icon-inside {
+  position: absolute;
+  color: white;
+  font-size: 16px;
+}
+
+@keyframes pulse-red {
+  0% {
+    box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
+  }
+  50% {
+    box-shadow: 0 0 25px rgba(255, 0, 0, 0.8);
+  }
+  100% {
+    box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
+  }
+}
+
+/* 蓝色主题通用类 */
+.blue-theme {
+  background: rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(0, 138, 255, 0.1);
+  box-shadow: 0 4px 12px rgba(0, 138, 255, 0.2);
+}
+
+.blue-btn {
+  background: rgba(0, 138, 255, 0.8);
+  border: 1px solid rgba(0, 138, 255, 0.9);
+  color: white;
+  transition: all 0.3s;
+}
+
+.blue-btn:hover {
+  background: rgba(0, 138, 255, 0.9);
+  border-color: rgba(0, 138, 255, 1);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 138, 255, 0.3);
+}
+
+.blue-text-btn {
+  color: #008aff;
+}
+
+.blue-text-btn:hover {
+  color: #0066cc;
+}
+
+.blue-badge {
+  background: rgba(0, 138, 255, 0.8);
+  color: white;
+}
+
+.blue-tag {
+  background: rgba(0, 138, 255, 0.2);
+  color: #008aff;
+  border: 1px solid rgba(0, 138, 255, 0.3);
+}
+
+.blue-time {
+  background: rgba(0, 138, 255, 0.1);
+  border: 1px solid rgba(0, 138, 255, 0.3);
+  color: #008aff;
+}
+
+.blue-success {
+  color: #008aff;
+}
+
+.blue-warning {
+  color: #ff9900;
+}
+
+.blue-mark {
+  color: #008aff;
+}
+
+/* 顶部导航栏 - 重新设计 */
+.floating-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 70px;
+  padding: 0 25px;
+  border-radius: 0 0 12px 12px;
+  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);
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 40px;
+}
+
+.system-logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-right: 25px;
+  border-right: 1px solid rgba(0, 138, 255, 0.3);
+}
+
+.logo-icon {
+  font-size: 28px;
+  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;
+}
+
+.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);
+}
+
+.nav-menu-item {
+  padding: 8px 20px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  color: #555;
+  transition: all 0.3s;
+  border-radius: 6px;
+  position: relative;
+  text-align: center;
+  min-width: 70px;
+}
+
+.nav-menu-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 {
+  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);
+}
+
+.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;
+}
+
+.nav-text {
+  display: block;
+}
+
+/* 右侧区域 */
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 30px;
+}
+
+.combat-info {
+  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);
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 10px;
+  border-right: 1px solid rgba(0, 138, 255, 0.2);
+}
+
+.info-item:last-child {
+  border-right: none;
+}
+
+.info-icon {
+  font-size: 18px;
+  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);
+}
+
+.info-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.info-label {
+  font-size: 11px;
+  color: #666;
+  font-weight: 500;
+  margin-bottom: 2px;
+}
+
+.info-value {
+  font-size: 14px;
+  font-weight: 700;
+  color: #333;
+  font-family: 'Courier New', monospace;
+}
+
+/* 用户状态区域 */
+.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);
+}
+
+.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);
+}
+
+.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-avatar {
+  border: 2px solid rgba(0, 138, 255, 0.3);
+  box-shadow: 0 2px 8px rgba(0, 138, 255, 0.2);
+  transition: all 0.3s;
+}
+
+.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);
+  }
+}
+
+/* 左侧菜单栏 - 蓝色主题 */
+.floating-left-menu {
+  position: absolute;
+  top: 80px;
+  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: 10px;
+  right: 13px; 
+  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;
+}
+
+.hide-btn:hover {
+  color: #0066cc;
+  background: rgba(0, 138, 255, 0.1);
+  transform: scale(1.1);
+}
+
+.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: linear-gradient(135deg, rgba(0, 138, 255, 0.2), rgba(0, 138, 255, 0.3));
+  color: #008aff;
+  box-shadow: 0 4px 12px rgba(0, 138, 255, 0.25);
+}
+
+.menu-tooltip {
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  background: linear-gradient(135deg, rgba(0, 138, 255, 0.95), rgba(0, 102, 204, 0.95));
+  color: white;
+  padding: 8px 14px;
+  border-radius: 6px;
+  font-size: 12px;
+  white-space: nowrap;
+  z-index: 1000;
+  margin-left: 10px;
+  box-shadow: 0 4px 12px rgba(0, 138, 255, 0.3);
+  pointer-events: none;
+  backdrop-filter: blur(5px);
+}
+
+.menu-tooltip-layer {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  width: 200px;
+  height: 100%;
+  z-index: 999;
+  pointer-events: none;
+}
+
+.tooltip-content {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  background: linear-gradient(135deg, rgba(0, 138, 255, 0.95), rgba(0, 102, 204, 0.95));
+  color: white;
+  padding: 8px 14px;
+  border-radius: 6px;
+  font-size: 12px;
+  white-space: nowrap;
+  margin-left: 10px;
+  box-shadow: 0 4px 12px rgba(0, 138, 255, 0.3);
+  backdrop-filter: blur(5px);
+}
+
+/* 右侧外部隐藏按钮 */
+.right-external-hide-btn {
+  position: absolute;
+  top: 80px;
+  right: 320px; /* 面板宽度300px + 外边距20px */
+  width: 28px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  color: white;
+  font-size: 16px;
+  transition: all 0.3s;
+  background: rgba(0, 138, 255, 0.9);
+  border-radius: 8px 0 0 8px;
+  z-index: 91;
+  border: 1px solid rgba(0, 138, 255, 1);
+  border-right: none;
+  box-shadow: -2px 0 8px rgba(0, 138, 255, 0.3);
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.right-external-hide-btn:hover {
+  background: rgba(0, 138, 255, 1);
+  transform: translateX(-2px);
+  box-shadow: -4px 0 12px rgba(0, 138, 255, 0.5);
+}
+
+.right-external-hide-btn.hidden {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(20px);
+}
+
+/* 右侧浮动面板 - 蓝色主题 */
+.floating-right-panel {
+  position: absolute;
+  top: 80px;
+  right: 20px;
+  width: 300px;
+  border-radius: 0 8px 8px 8px;
+  z-index: 90;
+  color: #333;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 138, 255, 0.2);
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(15px);
+  transition: all 0.3s ease;
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.floating-right-panel.hidden {
+  opacity: 0;
+  transform: translateX(100%);
+  pointer-events: none;
+}
+
+.right-tabs {
+  display: flex;
+  border-bottom: 1px solid rgba(0, 138, 255, 0.3);
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(5px);
+}
+
+.right-tab-item {
+  flex: 1;
+  text-align: center;
+  padding: 12px 0;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  transition: all 0.3s;
+  position: relative;
+  border-bottom: 3px solid transparent;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(5px);
+}
+
+.right-tab-item i {
+  font-size: 18px;
+  color: #666;
+  transition: all 0.3s;
+}
+
+.right-tab-item span {
+  font-size: 12px;
+  color: #666;
+  transition: all 0.3s;
+}
+
+.right-tab-item:hover {
+  background: rgba(0, 138, 255, 0.1);
+  box-shadow: 0 2px 6px rgba(0, 138, 255, 0.15);
+}
+
+.right-tab-item.active {
+  background: rgba(255, 255, 255, 0.95);
+  border-bottom: 3px solid rgba(0, 138, 255, 0.8);
+  box-shadow: 0 2px 8px rgba(0, 138, 255, 0.2);
+}
+
+.right-tab-item.active i,
+.right-tab-item.active span {
+  color: #008aff;
+  font-weight: 600;
+  text-shadow: 0 0 2px rgba(0, 138, 255, 0.3);
+}
+
+.badge {
+  position: absolute;
+  top: 8px;
+  right: 20px;
+  border-radius: 10px;
+  padding: 2px 8px;
+  font-size: 10px;
+  min-width: 16px;
+  text-align: center;
+  backdrop-filter: blur(5px);
+  box-shadow: 0 2px 4px rgba(0, 138, 255, 0.3);
+}
+
+.tab-content {
+  padding: 15px;
+  max-height: 500px;
+  overflow-y: auto;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+}
+
+.section {
+  margin-bottom: 20px;
+}
+
+.section-title {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 10px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid rgba(0, 138, 255, 0.3);
+  font-weight: 600;
+}
+
+.route-list {
+  margin-bottom: 20px;
+}
+
+.route-item {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  border-radius: 6px;
+  margin-bottom: 6px;
+  cursor: pointer;
+  transition: all 0.3s;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(5px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.route-item:hover {
+  background: rgba(0, 138, 255, 0.1);
+  border-color: rgba(0, 138, 255, 0.3);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 10px rgba(0, 138, 255, 0.15);
+}
+
+.route-item.selected {
+  background: linear-gradient(135deg, rgba(0, 138, 255, 0.15), rgba(0, 138, 255, 0.25));
+  border-color: rgba(0, 138, 255, 0.4);
+  box-shadow: 0 4px 12px rgba(0, 138, 255, 0.2);
+}
+
+.route-item i {
+  font-size: 18px;
+  color: #008aff;
+  margin-right: 10px;
+  text-shadow: 0 0 4px rgba(0, 138, 255, 0.3);
+}
+
+.route-info {
+  flex: 1;
+}
+
+.route-name {
+  font-size: 13px;
+  color: #333;
+  margin-bottom: 3px;
+  font-weight: 600;
+}
+
+.route-meta {
+  font-size: 11px;
+  color: #666;
+}
+
+.conflict-tag {
+  background: linear-gradient(135deg, #f56c6c, #c45656);
+  border: none;
+  color: white;
+  backdrop-filter: blur(5px);
+  box-shadow: 0 2px 4px rgba(245, 108, 108, 0.3);
+}
+
+.waypoint-list {
+  margin-bottom: 15px;
+}
+
+.waypoint-item {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  border-radius: 6px;
+  margin-bottom: 6px;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 138, 255, 0.3);
+  backdrop-filter: blur(5px);
+  box-shadow: 0 2px 4px rgba(0, 138, 255, 0.1);
+  transition: all 0.3s;
+}
+
+.waypoint-item:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 10px rgba(0, 138, 255, 0.15);
+}
+
+.waypoint-item i {
+  font-size: 18px;
+  color: #52c41a;
+  margin-right: 10px;
+  text-shadow: 0 0 4px rgba(82, 196, 26, 0.3);
+}
+
+.waypoint-info {
+  flex: 1;
+}
+
+.waypoint-name {
+  font-size: 13px;
+  color: #333;
+  margin-bottom: 3px;
+  font-weight: 600;
+}
+
+.waypoint-meta {
+  font-size: 11px;
+  color: #666;
+}
+
+.waypoint-actions {
+  display: flex;
+  gap: 10px;
+  color: #666;
+}
+
+.waypoint-actions i {
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s;
+  padding: 4px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(5px);
+}
+
+.waypoint-actions i:hover {
+  color: #008aff;
+  transform: scale(1.1);
+  box-shadow: 0 2px 6px rgba(0, 138, 255, 0.2);
+}
+
+.action-buttons {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+}
+
+/* 按钮样式调整 */
+.el-button {
+  backdrop-filter: blur(5px);
+  transition: all 0.3s;
+}
+
+/* 冲突内容样式 */
+.conflict-list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.conflict-item {
+  background: linear-gradient(135deg, rgba(245, 108, 108, 0.1), rgba(245, 108, 108, 0.05));
+  border: 1px solid rgba(245, 108, 108, 0.3);
+  border-radius: 8px;
+  padding: 14px;
+  backdrop-filter: blur(5px);
+  box-shadow: 0 4px 10px rgba(245, 108, 108, 0.15);
+  transition: all 0.3s;
+}
+
+.conflict-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px rgba(245, 108, 108, 0.2);
+}
+
+.conflict-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.conflict-title {
+  flex: 1;
+  font-size: 13px;
+  color: #333;
+  font-weight: 700;
+}
+
+.conflict-details {
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 6px;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(5px);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.detail-item {
+  display: flex;
+  margin-bottom: 5px;
+  font-size: 12px;
+}
+
+.detail-item:last-child {
+  margin-bottom: 0;
+}
+
+.detail-item .label {
+  color: #666;
+  min-width: 70px;
+  font-weight: 500;
+}
+
+.detail-item .value {
+  color: #333;
+  flex: 1;
+  font-weight: 600;
+}
+
+.conflict-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 15px;
+}
+
+.no-conflict {
+  text-align: center;
+  padding: 40px 20px;
+  color: #666;
+}
+
+.no-conflict p {
+  margin: 10px 0 15px;
+}
+
+/* 平台内容样式 */
+.platform-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.platform-item {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 138, 255, 0.3);
+  transition: all 0.3s;
+  backdrop-filter: blur(5px);
+  box-shadow: 0 2px 6px rgba(0, 138, 255, 0.1);
+}
+
+.platform-item:hover {
+  background: rgba(0, 138, 255, 0.1);
+  border-color: rgba(0, 138, 255, 0.4);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 138, 255, 0.2);
+}
+
+.platform-icon {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  margin-right: 12px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(5px);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.platform-info {
+  flex: 1;
+}
+
+.platform-name {
+  font-size: 13px;
+  color: #333;
+  margin-bottom: 3px;
+  font-weight: 600;
+}
+
+.platform-type {
+  font-size: 11px;
+  color: #666;
+}
+
+.platform-status {
+  margin-left: 10px;
+}
+
+.status-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  box-shadow: 0 0 6px currentColor;
+}
+
+.status-dot.ready { 
+  background: #52c41a; 
+  box-shadow: 0 0 8px rgba(82, 196, 26, 0.8);
+}
+.status-dot.flying { 
+  background: #008aff; 
+  animation: pulse 2s infinite; 
+  box-shadow: 0 0 10px rgba(0, 138, 255, 0.8);
+}
+.status-dot.scouting { 
+  background: #fa8c16; 
+  animation: pulse 1.5s infinite; 
+  box-shadow: 0 0 10px rgba(250, 140, 22, 0.8);
+}
+.status-dot.sailing { 
+  background: #008aff; 
+  box-shadow: 0 0 8px rgba(0, 138, 255, 0.8);
+}
+.status-dot.patrol { 
+  background: #52c41a; 
+  animation: pulse 2s infinite; 
+  box-shadow: 0 0 10px rgba(82, 196, 26, 0.8);
+}
+.status-dot.hidden { 
+  background: #333; 
+  box-shadow: 0 0 6px rgba(51, 51, 51, 0.8);
+}
+.status-dot.alert { 
+  background: #f5222d; 
+  animation: pulse 1s infinite; 
+  box-shadow: 0 0 10px rgba(245, 34, 45, 0.8);
+}
+.status-dot.operating { 
+  background: #008aff; 
+  animation: pulse 2s infinite; 
+  box-shadow: 0 0 10px rgba(0, 138, 255, 0.8);
+}
+
+/* 蓝色主题标签页 */
+.blue-tabs >>> .el-tabs__item {
+  color: #666;
+  transition: all 0.3s;
+}
+
+.blue-tabs >>> .el-tabs__item:hover {
+  color: #008aff;
+}
+
+.blue-tabs >>> .el-tabs__item.is-active {
+  color: #008aff;
+  font-weight: 600;
+}
+
+.blue-tabs >>> .el-tabs__active-bar {
+  background-color: #008aff;
+  box-shadow: 0 0 6px rgba(0, 138, 255, 0.5);
+}
+
+.blue-tabs >>> .el-tabs__nav-wrap::after {
+  background-color: rgba(0, 138, 255, 0.3);
+}
+
+/* 底部时间轴（最初版本的样式）- 蓝色主题 */
+.floating-timeline {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%) translateY(100%);
+  width: 80%;
+  border-radius: 12px;
+  z-index: 95;
+  padding: 20px;
+  color: #333;
+  transition: all 0.3s ease;
+  opacity: 0;
+  pointer-events: none;
+  backdrop-filter: blur(15px);
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 8px 32px rgba(0, 138, 255, 0.25);
+  border: 1px solid rgba(0, 138, 255, 0.3);
+}
+
+.floating-timeline.show {
+  transform: translateX(-50%) translateY(0);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.popup-hide-btn {
+  position: absolute;
+  top: -28px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 56px;
+  height: 28px;
+  background: rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(0, 138, 255, 0.4);
+  border-bottom: none;
+  border-radius: 12px 12px 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #008aff;
+  font-size: 18px;
+  transition: all 0.3s;
+  z-index: 10;
+}
+
+.popup-hide-btn:hover {
+  background: rgba(0, 138, 255, 0.2);
+  color: #0066cc;
+  height: 32px;
+  top: -32px;
+}
+
+.timeline-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.current-time {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: monospace;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 4px 12px;
+  border-radius: 4px;
+}
+
+.timeline-slider {
+  flex: 1;
+  margin: 0 20px;
+}
+
+.compact-slider {
+  width: 100%;
+}
+
+.blue-slider >>> .el-slider__bar {
+  background-color: rgba(0, 138, 255, 0.8);
+}
+
+.blue-slider >>> .el-slider__button {
+  border-color: rgba(0, 138, 255, 0.8);
+  background-color: rgba(0, 138, 255, 0.8);
+}
+
+.timeline-marks {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  color: #666;
+  margin-top: 5px;
+}
+
+.mark.current {
+  font-weight: bold;
+}
+
+.system-status {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  font-size: 12px;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid rgba(0, 138, 255, 0.4);
+}
+
+.status-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.status-label {
+  color: #666;
+}
+
+.status-value.success {
+  font-weight: 500;
+}
+
+.status-value.warning {
+  font-weight: 500;
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(0, 138, 255, 0.1);
+  border-radius: 3px;
+  backdrop-filter: blur(5px);
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(135deg, rgba(0, 138, 255, 0.5), rgba(0, 138, 255, 0.7));
+  border-radius: 3px;
+  box-shadow: 0 0 6px rgba(0, 138, 255, 0.4);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(135deg, rgba(0, 138, 255, 0.7), rgba(0, 138, 255, 0.9));
+}
+
+.ml-3 {
+  margin-left: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/login.vue b/ruoyi-ui/src/views/login.vue
index dde986d..1abc839 100644
--- a/ruoyi-ui/src/views/login.vue
+++ b/ruoyi-ui/src/views/login.vue
@@ -144,7 +144,9 @@ export default {
             Cookies.remove('rememberMe')
           }
           this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{})
+            // this.$router.push({ path: this.redirect || "/" }).catch(()=>{})
+            // 跳转选择房间
+            this.$router.push({ path: this.redirect || "/selectRoom" }).catch(()=>{})
           }).catch(() => {
             this.loading = false
             if (this.captchaEnabled) {
diff --git a/ruoyi-ui/src/views/selectRoom/index.vue b/ruoyi-ui/src/views/selectRoom/index.vue
new file mode 100644
index 0000000..2ee640a
--- /dev/null
+++ b/ruoyi-ui/src/views/selectRoom/index.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <el-button @click="go()">跳转</el-button>
+    <el-button @click="goHome()">返回首页</el-button>
+  </div>
+</template>
+
+<script>
+//登录后跳转的页面
+export default {
+
+  data() {
+    return {
+ 
+    }
+  },
+ 
+  methods: {
+    go(){
+        this.$router.push({ path: this.redirect || "/childRoom" }).catch(()=>{})
+    },
+    // 返回首页
+    goHome(){
+      this.$router.push({ path: this.redirect || "/" }).catch(()=>{})
+    }
+  }
+}
+</script>