From 66007c79aefcfb932bbbb32baa2e4395d64cde1d Mon Sep 17 00:00:00 2001
From: sd <1504629600@qq.com>
Date: Fri, 23 Jan 2026 16:34:02 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E5=AF=BC=E8=88=AA=E6=A0=8F?=
 =?UTF-8?q?=E5=8F=AF=E8=B0=83=E8=8A=82=EF=BC=8C=E4=B8=8A=E4=BE=A7=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E6=A0=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/main/resources/application-druid.yml       |   2 +-
 ruoyi-ui/src/views/childRoom/LeftMenu.vue          | 239 +++++++++++++--
 ruoyi-ui/src/views/childRoom/RightPanel.vue        |  58 +++-
 ruoyi-ui/src/views/childRoom/TopHeader.vue         |  36 ++-
 ruoyi-ui/src/views/childRoom/index.vue             | 331 +++++++++++++++++++--
 .../src/views/dialogs/ExternalParamsDialog.vue     |   2 +-
 ruoyi-ui/src/views/dialogs/IconSelectDialog.vue    | 172 +++++++++++
 ruoyi-ui/src/views/dialogs/PageLayoutDialog.vue    | 197 ++++++++++++
 8 files changed, 962 insertions(+), 75 deletions(-)
 create mode 100644 ruoyi-ui/src/views/dialogs/IconSelectDialog.vue
 create mode 100644 ruoyi-ui/src/views/dialogs/PageLayoutDialog.vue

diff --git a/ruoyi-admin/src/main/resources/application-druid.yml b/ruoyi-admin/src/main/resources/application-druid.yml
index 037db5c..c40f2aa 100644
--- a/ruoyi-admin/src/main/resources/application-druid.yml
+++ b/ruoyi-admin/src/main/resources/application-druid.yml
@@ -8,7 +8,7 @@ spring:
             master:
                 url: jdbc:mysql://localhost:3306/ry?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
                 username: root
-                password: 123456
+                password: A20040303ctw!
             # 从库数据源
             slave:
                 # 从数据源开关/默认关闭
diff --git a/ruoyi-ui/src/views/childRoom/LeftMenu.vue b/ruoyi-ui/src/views/childRoom/LeftMenu.vue
index 6779418..a70a304 100644
--- a/ruoyi-ui/src/views/childRoom/LeftMenu.vue
+++ b/ruoyi-ui/src/views/childRoom/LeftMenu.vue
@@ -2,7 +2,7 @@
   <div>
     <div
       class="floating-left-menu"
-      :class="{ 'hidden': isHidden }"
+      :class="{ 'hidden': isHidden, 'edit-mode': isEditMode, 'position-top': position === 'top', 'position-bottom': position === 'bottom', 'position-left': position === 'left', 'position-right': position === 'right' }"
       @mouseenter="showTooltip = true"
       @mouseleave="showTooltip = false"
     >
@@ -12,32 +12,33 @@
       </div>
 
       <!-- 一级菜单 -->
-      <draggable
-        v-model="localMenuItems"
-        class="menu-icons"
-        :options="dragOptions"
-        @end="onDragEnd"
+    <draggable
+      v-model="localMenuItems"
+      class="menu-icons"
+      :options="dragOptions"
+      :disabled="!isEditMode"
+      @end="onDragEnd"
+    >
+      <div
+        v-for="item in localMenuItems"
+        :key="item.id"
+        class="menu-item"
+        :class="{ active: activeMenu === item.id, 'dragging': isDragging, 'edit-mode': isEditMode }"
+        @click="handleSelectMenu(item)"
+        @contextmenu.prevent="handleRightClick(item)"
+        :title="item.name"
       >
-        <div
-          v-for="item in localMenuItems"
-          :key="item.id"
-          class="menu-item"
-          :class="{ active: activeMenu === item.id, 'dragging': isDragging }"
-          @click="handleSelectMenu(item)"
-          @contextmenu.prevent="handleRightClick(item)"
-          :title="item.name"
-        >
-          <i :class="item.icon"></i>
-          <div class="delete-icon" @click.stop="quickDelete(item)">
-            <i class="el-icon-close"></i>
-          </div>
+        <i :class="item.icon"></i>
+        <div v-if="isEditMode" class="delete-icon" @click.stop="quickDelete(item)">
+          <i class="el-icon-close"></i>
         </div>
-      </draggable>
-      
-      <!-- 新增按钮 -->
-      <div class="add-btn" @click="handleAdd" title="添加新菜单">
-        <i class="el-icon-plus"></i>
       </div>
+    </draggable>
+    
+    <!-- 新增按钮（仅在编辑模式下显示） -->
+    <div v-if="isEditMode" class="add-btn" @click="handleAdd" title="添加新菜单">
+      <i class="el-icon-plus"></i>
+    </div>
     </div>
     
     <!-- 删除确认弹窗 -->
@@ -58,16 +59,25 @@
         <el-button type="danger" @click="confirmDelete" size="small">删除</el-button>
       </span>
     </el-dialog>
+    
+    <!-- 图标选择弹窗 -->
+    <icon-select-dialog
+      :visible.sync="showIconSelectDialog"
+      :available-icons="availableIcons"
+      @confirm="confirmAddIcons"
+    />
   </div>
 </template>
 
 <script>
 import draggable from 'vuedraggable'
+import IconSelectDialog from '../dialogs/IconSelectDialog'
 
 export default {
   name: 'LeftMenu',
   components: {
-    draggable
+    draggable,
+    IconSelectDialog
   },
   props: {
     isHidden: {
@@ -81,6 +91,18 @@ export default {
     activeMenu: {
       type: String,
       default: ''
+    },
+    isEditMode: {
+      type: Boolean,
+      default: false
+    },
+    availableIcons: {
+      type: Array,
+      default: () => []
+    },
+    position: {
+      type: String,
+      default: 'left'
     }
   },
   data() {
@@ -89,6 +111,7 @@ export default {
       isDragging: false,
       showDeleteDialog: false,
       itemToDelete: null,
+      showIconSelectDialog: false,
       dragOptions: {
         animation: 200,
         ghostClass: 'ghost-item',
@@ -114,6 +137,12 @@ export default {
     },
 
     handleSelectMenu(item) {
+      if (this.isEditMode) {
+        return
+      }
+      if (item.action) {
+        this.$emit('menu-action', item.action)
+      }
       this.$emit('select', item)
     },
 
@@ -124,7 +153,22 @@ export default {
     },
 
     handleAdd() {
-      this.$emit('add')
+      this.showIconSelectDialog = true
+    },
+
+    confirmAddIcons(selectedItems) {
+      selectedItems.forEach(item => {
+        const newId = Date.now().toString() + Math.random().toString(36).substr(2, 9)
+        const newMenuItem = {
+          id: newId,
+          name: item.name,
+          icon: item.icon,
+          action: item.id
+        }
+        this.localMenuItems.push(newMenuItem)
+      })
+      this.$emit('update:menuItems', this.localMenuItems)
+      this.$emit('add-items', selectedItems)
     },
 
     quickDelete(item) {
@@ -177,12 +221,68 @@ export default {
   transform: translateX(0);
 }
 
+.floating-left-menu.edit-mode {
+  width: 50px;
+}
+
+.floating-left-menu.position-top {
+  top: 60px;
+  bottom: auto;
+  left: 50%;
+  transform: translateX(-50%);
+  width: auto;
+  min-width: 200px;
+  max-width: 800px;
+  height: 40px;
+  flex-direction: row;
+  padding: 5px 15px;
+  display: flex;
+  align-items: center;
+}
+
+.floating-left-menu.position-bottom {
+  bottom: 10px;
+  top: auto;
+  left: 50%;
+  transform: translateX(-50%);
+  width: auto;
+  min-width: 200px;
+  max-width: 800px;
+  height: 40px;
+  flex-direction: row;
+  padding: 5px 18px 5px 18px;
+  display: flex;
+  align-items: center;
+}
+
+.floating-left-menu.position-left {
+  top: 70px;
+  left: 20px;
+  width: 42px;
+}
+
+.floating-left-menu.position-right {
+  top: 70px;
+  right: 20px;
+  left: auto;
+  width: 42px;
+}
+
 .floating-left-menu.hidden {
   opacity: 0;
   transform: translateX(-100%);
   pointer-events: none;
 }
 
+.floating-left-menu.position-top.hidden,
+.floating-left-menu.position-bottom.hidden {
+  transform: translateX(-50%) translateY(-100%);
+}
+
+.floating-left-menu.position-right.hidden {
+  transform: translateX(100%);
+}
+
 .hide-btn {
   position: absolute;
   top: 15px;
@@ -202,11 +302,69 @@ export default {
   z-index: 10;
 }
 
+.position-top .hide-btn,
+.position-bottom .hide-btn {
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
+}
+
+.position-top .hide-btn i,
+.position-bottom .hide-btn i {
+  transform: rotate(0deg);
+}
+
+.position-left .hide-btn i {
+  transform: rotate(0deg);
+}
+
+.position-right .hide-btn i {
+  transform: rotate(180deg);
+}
+
 .menu-icons {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-top: 30px;
+  max-height: calc(100vh - 280px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.position-top .menu-icons,
+.position-bottom .menu-icons {
+  flex-direction: row;
+  margin: 0 0 0 30px;
+  max-height: 40px;
+  max-width: calc(100% - 40px);
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex: 1;
+  padding-right: 10px;
+}
+
+.position-left .menu-icons,
+.position-right .menu-icons {
+  flex-direction: column;
+  margin-top: 30px;
+  max-height: calc(100vh - 280px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.menu-icons::-webkit-scrollbar {
+  display: none;
+}
+
+.menu-icons::-webkit-scrollbar-thumb {
+  display: none;
+}
+
+.menu-icons::-webkit-scrollbar-track {
+  display: none;
 }
 
 .menu-item {
@@ -215,7 +373,8 @@ export default {
   align-items: center;
   width: 32px;
   height: 32px;
-  cursor: grab;
+  flex-shrink: 0;
+  cursor: pointer;
   color: #555;
   font-size: 16px;
   position: relative;
@@ -227,6 +386,10 @@ export default {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
+.menu-item.edit-mode {
+  cursor: grab;
+}
+
 .delete-icon {
   position: absolute;
   top: -6px;
@@ -275,6 +438,17 @@ export default {
   box-shadow: 0 2px 8px rgba(0, 138, 255, 0.3);
 }
 
+.menu-item.edit-mode {
+  cursor: grab;
+}
+
+.menu-item.edit-mode:hover {
+  background: rgba(0, 138, 255, 0.1);
+  color: #008aff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 10px rgba(0, 138, 255, 0.2);
+}
+
 .ghost-item {
   opacity: 0.4;
   background: rgba(0, 138, 255, 0.05);
@@ -311,7 +485,18 @@ export default {
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(5px);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.position-top .add-btn,
+.position-bottom .add-btn {
+  margin-left: 10px;
+  margin-top: 0;
+}
+
+.position-left .add-btn,
+.position-right .add-btn {
   margin-top: 10px;
+  margin-left: 0;
 }
 
 .add-btn:hover {
diff --git a/ruoyi-ui/src/views/childRoom/RightPanel.vue b/ruoyi-ui/src/views/childRoom/RightPanel.vue
index e73c744..2e1f668 100644
--- a/ruoyi-ui/src/views/childRoom/RightPanel.vue
+++ b/ruoyi-ui/src/views/childRoom/RightPanel.vue
@@ -16,6 +16,39 @@
       <div v-if="activeTab === 'plan'" class="tab-content plan-content">
         <div class="section">
           <div class="section-header">
+            <div class="section-title">方案列表</div>
+            <el-button
+              type="primary"
+              size="mini"
+              @click="handleCreatePlan"
+              class="create-route-btn-new"
+            >
+              新建方案
+            </el-button>
+          </div>
+
+          <div class="route-list">
+            <div
+              v-for="plan in plans"
+              :key="plan.id"
+              class="route-item"
+              :class="{ selected: selectedPlanId === plan.id }"
+              @click="handleSelectPlan(plan)"
+            >
+              <i class="el-icon-folder-opened"></i>
+              <div class="route-info">
+                <div class="route-name">{{ plan.name }}</div>
+                <div class="route-meta">{{ plan.routes.length }}个航线</div>
+              </div>
+              <div class="route-actions">
+                <i class="el-icon-edit" title="编辑" @click.stop="handleOpenPlanDialog(plan)"></i>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="selectedPlanDetails" class="section">
+          <div class="section-header">
             <div class="section-title">航线列表</div>
             <el-button
               type="primary"
@@ -29,7 +62,7 @@
 
           <div class="route-list">
             <div
-              v-for="route in routes"
+              v-for="route in selectedPlanDetails.routes"
               :key="route.id"
               class="route-item"
               :class="{ selected: selectedRouteId === route.id }"
@@ -218,10 +251,18 @@ export default {
       type: String,
       default: 'plan'
     },
-    routes: {
+    plans: {
       type: Array,
       default: () => []
     },
+    selectedPlanId: {
+      type: [String, Number],
+      default: null
+    },
+    selectedPlanDetails: {
+      type: Object,
+      default: null
+    },
     selectedRouteId: {
       type: [String, Number],
       default: null
@@ -261,15 +302,26 @@ export default {
       this.$emit('hide')
     },
 
+    handleSelectPlan(plan) {
+      this.$emit('select-plan', plan)
+    },
+
     handleSelectRoute(route) {
       this.$emit('select-route', route)
     },
 
-    // 新增：新建航线事件
+    handleCreatePlan() {
+      this.$emit('create-plan')
+    },
+
     handleCreateRoute() {
       this.$emit('create-route')
     },
 
+    handleOpenPlanDialog(plan) {
+      this.$emit('open-plan-dialog', plan)
+    },
+
     handleOpenRouteDialog(route) {
       this.$emit('open-route-dialog', route)
     },
diff --git a/ruoyi-ui/src/views/childRoom/TopHeader.vue b/ruoyi-ui/src/views/childRoom/TopHeader.vue
index 6192637..622fef7 100644
--- a/ruoyi-ui/src/views/childRoom/TopHeader.vue
+++ b/ruoyi-ui/src/views/childRoom/TopHeader.vue
@@ -74,7 +74,7 @@
               <el-dropdown-menu slot="dropdown" class="file-dropdown-menu">
                 <el-dropdown-item @click.native="routeEdit">航线编辑</el-dropdown-item>
                 <el-dropdown-item @click.native="militaryMarking">军事标绘</el-dropdown-item>
-                <el-dropdown-item @click.native="iconEdit">图标编辑</el-dropdown-item>
+                <el-dropdown-item @click.native="iconEdit">{{ isIconEditMode ? '保存图标' : '图标编辑' }}</el-dropdown-item>
                 <el-dropdown-item @click.native="attributeEdit">属性修改</el-dropdown-item>
                 
                 <!-- 推演编辑二级菜单 -->
@@ -107,8 +107,8 @@
             >
               <div class="dropdown-trigger"></div>
               <el-dropdown-menu slot="dropdown" class="file-dropdown-menu">
-                <el-dropdown-item @click.native="toggle2D3D">2D/3D切换</el-dropdown-item>
-                <el-dropdown-item @click.native="toggleRuler">显示/隐藏标尺</el-dropdown-item>
+                <el-dropdown-item @click.native="toggle2D3D">{{ is2DMode ? '3D视图' : '2D视图' }}</el-dropdown-item>
+                <el-dropdown-item @click.native="toggleRuler">{{ isRulerVisible ? '隐藏标尺' : '显示标尺' }}</el-dropdown-item>
                 <el-dropdown-item @click.native="toggleGrid">网格</el-dropdown-item>
                 <el-dropdown-item @click.native="toggleScale">比例尺</el-dropdown-item>
               </el-dropdown-menu>
@@ -185,9 +185,9 @@
                       <el-dropdown-item @click.native="pageLayout">页面布局</el-dropdown-item>
                       <el-dropdown-item @click.native="dataStoragePath">数据存储路径</el-dropdown-item>
                       <el-dropdown-item @click.native="externalParams">外部参数</el-dropdown-item>
-                      <el-dropdown-item @click.native="toggleAirport">显示/隐藏机场</el-dropdown-item>
-                      <el-dropdown-item @click.native="toggleLandmark">显示/隐藏地标</el-dropdown-item>
-                      <el-dropdown-item @click.native="toggleRoute">显示/隐藏航线</el-dropdown-item>
+                      <el-dropdown-item @click.native="toggleAirport">{{ isAirportVisible ? '隐藏机场' : '显示机场' }}</el-dropdown-item>
+                      <el-dropdown-item @click.native="toggleLandmark">{{ isLandmarkVisible ? '隐藏地标' : '显示地标' }}</el-dropdown-item>
+                      <el-dropdown-item @click.native="toggleRoute">{{ isRouteVisible ? '隐藏航线' : '显示航线' }}</el-dropdown-item>
                     </el-dropdown-menu>
                   </el-dropdown>
                 </el-dropdown-item>
@@ -329,6 +329,12 @@ export default {
       currentScale: {},
       externalParamsDialogVisible: false,
       currentExternalParams: {},
+      isIconEditMode: false,
+      is2DMode: true,
+      isRulerVisible: true,
+      isAirportVisible: true,
+      isLandmarkVisible: true,
+      isRouteVisible: true,
       topNavItems: [
         { id: 'file', name: '文件', icon: 'el-icon-document' },
         { id: 'edit', name: '编辑', icon: 'el-icon-edit' },
@@ -393,7 +399,8 @@ export default {
     },
     
     iconEdit() {
-      this.$emit('icon-edit')
+      this.isIconEditMode = !this.isIconEditMode
+      this.$emit('toggle-icon-edit', this.isIconEditMode)
     },
     
     attributeEdit() {
@@ -418,11 +425,13 @@ export default {
     
     // 视图下拉菜单方法
     toggle2D3D() {
-      this.$emit('toggle-2d-3d')
+      this.is2DMode = !this.is2DMode
+      this.$emit('toggle-2d-3d', this.is2DMode)
     },
     
     toggleRuler() {
-      this.$emit('toggle-ruler')
+      this.isRulerVisible = !this.isRulerVisible
+      this.$emit('toggle-ruler', this.isRulerVisible)
     },
     
     toggleGrid() {
@@ -489,15 +498,18 @@ export default {
     },
     
     toggleAirport() {
-      this.$emit('toggle-airport')
+      this.isAirportVisible = !this.isAirportVisible
+      this.$emit('toggle-airport', this.isAirportVisible)
     },
     
     toggleLandmark() {
-      this.$emit('toggle-landmark')
+      this.isLandmarkVisible = !this.isLandmarkVisible
+      this.$emit('toggle-landmark', this.isLandmarkVisible)
     },
     
     toggleRoute() {
-      this.$emit('toggle-route')
+      this.isRouteVisible = !this.isRouteVisible
+      this.$emit('toggle-route', this.isRouteVisible)
     },
     
     systemDescription() {
diff --git a/ruoyi-ui/src/views/childRoom/index.vue b/ruoyi-ui/src/views/childRoom/index.vue
index 1f94b15..38c3cce 100644
--- a/ruoyi-ui/src/views/childRoom/index.vue
+++ b/ruoyi-ui/src/views/childRoom/index.vue
@@ -41,6 +41,7 @@
       @route-edit="routeEdit"
       @military-marking="militaryMarking"
       @icon-edit="iconEdit"
+      @toggle-icon-edit="toggleIconEditMode"
       @attribute-edit="attributeEdit"
       @time-settings="timeSettings"
       @aircraft-settings="aircraftSettings"
@@ -79,15 +80,25 @@
       :is-hidden="isMenuHidden"
       :menu-items="menuItems"
       :active-menu="activeMenu"
+      :is-edit-mode="isIconEditMode"
+      :available-icons="topNavItems"
+      :position="menuPosition"
       @hide="hideMenu"
       @select="selectMenu"
+      @menu-action="handleMenuAction"
+      @update:menu-items="updateMenuItems"
+      @drag-end="handleMenuDragEnd"
+      @add-items="handleAddMenuItems"
+      @delete="handleDeleteMenuItem"
     />
 
     <!-- 右侧实体列表（浮动）- 蓝色主题 -->
     <right-panel
       :is-hidden="isRightPanelHidden"
       :active-tab="activeRightTab"
-      :routes="routes"
+      :plans="plans"
+      :selected-plan-id="selectedPlanId"
+      :selected-plan-details="selectedPlanDetails"
       :selected-route-id="selectedRouteId"
       :selected-route-details="selectedRouteDetails"
       :conflicts="conflicts"
@@ -96,8 +107,11 @@
       :sea-platforms="seaPlatforms"
       :ground-platforms="groundPlatforms"
       @hide="hideRightPanel"
+      @select-plan="selectPlan"
       @select-route="selectRoute"
+      @create-plan="createPlan"
       @create-route="createRoute"
+      @open-plan-dialog="openPlanDialog"
       @open-route-dialog="openRouteDialog"
       @open-waypoint-dialog="openWaypointDialog"
       @add-waypoint="addWaypoint"
@@ -195,6 +209,36 @@
       :waypoint="selectedWaypoint"
       @save="updateWaypoint"
     />
+
+    <!-- 威力区弹窗 -->
+    <power-zone-dialog 
+      v-model="showPowerZoneDialog" 
+      :power-zone="currentPowerZone"
+      @save="savePowerZone"
+    />
+    
+    <!-- 比例尺弹窗 -->
+    <scale-dialog 
+      v-model="showScaleDialog" 
+      :scale="currentScale"
+      @save="saveScale"
+    />
+    
+    <!-- 外部参数弹窗 -->
+    <external-params-dialog 
+      v-model="showExternalParamsDialog" 
+      :external-params="currentExternalParams"
+      @save="saveExternalParams"
+      @import-airport="importAirport"
+      @import-route-data="importRoute"
+      @import-landmark="importLandmark"
+    />
+    
+    <!-- 页面布局弹窗 -->
+    <page-layout-dialog 
+      v-model="showPageLayoutDialog" 
+      @save="savePageLayout"
+    />
   </div>
 </template>
 
@@ -204,6 +248,10 @@ import OnlineMembersDialog from '@/views/dialogs/OnlineMembersDialog'
 import PlatformEditDialog from '@/views/dialogs/PlatformEditDialog'
 import RouteEditDialog from '@/views/dialogs/RouteEditDialog'
 import WaypointEditDialog from '@/views/dialogs/WaypointEditDialog'
+import PowerZoneDialog from '@/views/dialogs/PowerZoneDialog'
+import ScaleDialog from '@/views/dialogs/ScaleDialog'
+import ExternalParamsDialog from '@/views/dialogs/ExternalParamsDialog'
+import PageLayoutDialog from '@/views/dialogs/PageLayoutDialog'
 import LeftMenu from './LeftMenu'
 import RightPanel from './RightPanel'
 import BottomLeftPanel from './BottomLeftPanel'
@@ -216,6 +264,10 @@ export default {
     PlatformEditDialog,
     RouteEditDialog,
     WaypointEditDialog,
+    PowerZoneDialog,
+    ScaleDialog,
+    ExternalParamsDialog,
+    PageLayoutDialog,
     LeftMenu,
     RightPanel,
     BottomLeftPanel,
@@ -233,6 +285,15 @@ export default {
       selectedRoute: null,
       showWaypointDialog: false,
       selectedWaypoint: null,
+      // 威力区、比例尺、外部参数弹窗
+      showPowerZoneDialog: false,
+      currentPowerZone: {},
+      showScaleDialog: false,
+      currentScale: {},
+      showExternalParamsDialog: false,
+      currentExternalParams: {},
+      showPageLayoutDialog: false,
+      menuPosition: 'left',
 
       // 作战信息
       roomCode: 'JTF-7-ALPHA',
@@ -243,6 +304,46 @@ export default {
       // 左侧菜单栏
       isMenuHidden: true,      // 是否完全隐藏左侧菜单
       activeMenu: 'file',
+      isIconEditMode: false,   // 图标编辑模式
+      
+      // 方案-航线-航点数据
+      selectedPlanId: null,
+      selectedPlanDetails: null,
+      selectedRouteId: null,
+      selectedRouteDetails: null,
+      
+      // 顶部导航菜单项（用于图标选择）- 只显示指定的菜单项
+      topNavItems: [
+        { id: 'routeEdit', name: '航线编辑', icon: 'el-icon-edit-outline' },
+        { id: 'militaryMarking', name: '军事标绘', icon: 'el-icon-crop' },
+        { id: 'attributeEdit', name: '属性修改', icon: 'el-icon-setting' },
+        { id: 'timeSettings', name: '时间设置', icon: 'el-icon-timer' },
+        { id: 'aircraftSettings', name: '机型设置', icon: 'el-icon-s-custom' },
+        { id: 'keyEventEdit', name: '关键事件编辑', icon: 'el-icon-edit' },
+        { id: 'missileLaunch', name: '导弹发射', icon: 'el-icon-s-promotion' },
+        { id: 'toggle2D3D', name: '2D/3D切换', icon: 'el-icon-picture-outline' },
+        { id: 'toggleRuler', name: '显示/隐藏标尺', icon: 'el-icon-set-up' },
+        { id: 'toggleGrid', name: '网格', icon: 'el-icon-s-grid' },
+        { id: 'toggleScale', name: '比例尺', icon: 'el-icon-data-line' },
+        { id: 'loadTerrain', name: '加载/切换地形', icon: 'el-icon-picture-outline-round' },
+        { id: 'changeProjection', name: '投影', icon: 'el-icon-aim' },
+        { id: 'loadAeroChart', name: '航空图', icon: 'el-icon-map-location' },
+        { id: 'powerZone', name: '威力区', icon: 'el-icon-warning-outline' },
+        { id: 'threatZone', name: '威胁区', icon: 'el-icon-warning' },
+        { id: 'routeCalculation', name: '航线计算', icon: 'el-icon-s-data' },
+        { id: 'conflictDisplay', name: '冲突显示', icon: 'el-icon-error' },
+        { id: 'dataMaterials', name: '数据资料', icon: 'el-icon-folder' },
+        { id: 'coordinateConversion', name: '坐标换算', icon: 'el-icon-coordinate' },
+        { id: 'pageLayout', name: '页面布局', icon: 'el-icon-menu' },
+        { id: 'dataStoragePath', name: '数据存储路径', icon: 'el-icon-folder-opened' },
+        { id: 'externalParams', name: '外部参数', icon: 'el-icon-s-tools' },
+        { id: 'toggleAirport', name: '显示/隐藏机场', icon: 'el-icon-s-flag' },
+        { id: 'toggleLandmark', name: '显示/隐藏地标', icon: 'el-icon-location-outline' },
+        { id: 'toggleRoute', name: '显示/隐藏航线', icon: 'el-icon-position' },
+        { id: 'systemDescription', name: '系统说明', icon: 'el-icon-info' },
+        { id: 'layerFavorites', name: '图层收藏', icon: 'el-icon-star-off' },
+        { id: 'routeFavorites', name: '航线收藏', icon: 'el-icon-collection' }
+      ],
 
       // 右侧面板控制
       isRightPanelHidden: true, // 是否完全隐藏右侧面板
@@ -256,22 +357,21 @@ export default {
       showRoute: true,
 
       menuItems: [
-        { id: 'file', name: '方案', icon: 'el-icon-s-operation' },
-        { id: 'start', name: '冲突', icon: 'el-icon-warning-outline' },
-        { id: 'insert', name: '平台', icon: 'el-icon-ship' },
-        { id: 'pattern', name: '图案', icon: 'el-icon-picture-outline' },
+        { id: 'file', name: '方案', icon: 'el-icon-folder-opened' },
+        { id: 'start', name: '冲突', icon: 'el-icon-error' },
+        { id: 'insert', name: '平台', icon: 'el-icon-s-platform' },
+        { id: 'pattern', name: '图案', icon: 'el-icon-picture-outline-round' },
         { id: 'deduction', name: '推演', icon: 'el-icon-video-play' },
-        { id: 'modify', name: '修改', icon: 'el-icon-edit' },
+        { id: 'modify', name: '修改', icon: 'el-icon-edit-outline' },
         { id: 'refresh', name: '刷新', icon: 'el-icon-refresh' },
-        { id: 'basemap', name: '底图', icon: 'el-icon-map-location' },
+        { id: 'basemap', name: '底图', icon: 'el-icon-picture' },
+        { id: 'save', name: '保存', icon: 'el-icon-document-checked' },
         { id: 'import', name: '导入', icon: 'el-icon-upload2' },
         { id: 'export', name: '导出', icon: 'el-icon-download' }
       ],
 
       // 右侧面板
       activeRightTab: 'plan',
-      selectedRouteId: 101,
-      selectedRouteDetails: null,
 
       // 冲突数据
       conflictCount: 2,
@@ -303,9 +403,9 @@ export default {
         { 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: 5, name: '辽宁舰', type: '航空母舰', icon: 'el-icon-s-cooperation', 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' },
+        { id: 7, name: '093型潜艇', type: '核潜艇', icon: 'el-icon-s-help', color: '#333', status: 'hidden' },
       ],
       groundPlatforms: [
         { id: 8, name: 'HQ-9防空系统', type: '防空导弹', icon: 'el-icon-mic', color: '#f5222d', status: 'alert' },
@@ -313,11 +413,25 @@ export default {
         { 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 },
+      // 航线数据 - 改为方案-航线-航点三级结构
+      plans: [
+        {
+          id: 1,
+          name: '方案A',
+          routes: [
+            { id: 101, name: 'Alpha进场航线', points: 8, conflict: true },
+            { id: 102, name: 'Beta巡逻航线', points: 6, conflict: false },
+            { id: 103, name: '侦察覆盖区', points: 4, conflict: false },
+          ]
+        },
+        {
+          id: 2,
+          name: '方案B',
+          routes: [
+            { id: 201, name: 'Gamma突击航线', points: 10, conflict: false },
+            { id: 202, name: 'Delta支援航线', points: 5, conflict: true },
+          ]
+        }
       ],
 
       // 时间控制
@@ -336,6 +450,8 @@ export default {
     this.isMenuHidden = true;
     // 初始化时右侧面板隐藏
     this.isRightPanelHidden = true;
+    // 初始化选中的方案
+    this.selectPlan(this.plans[0]);
 
     // 更新时间
     this.updateTime();
@@ -451,12 +567,14 @@ export default {
     // 左侧菜单栏操作
     showMenu() {
       this.isMenuHidden = false;
-      this.$message.info('显示左侧菜单');
     },
 
     hideMenu() {
       this.isMenuHidden = true;
-      this.$message.info('隐藏左侧菜单');
+    },
+
+    selectTopNav(item) {
+      console.log('选中顶部导航:', item);
     },
 
     // 右侧面板操作
@@ -512,8 +630,87 @@ export default {
     },
 
     iconEdit() {
-      this.$message.success('图标编辑');
-      // 这里可以添加图标编辑的逻辑
+      // 这个方法现在由 TopHeader 组件处理状态切换
+      // 只需要在这里处理其他逻辑（如果有的话）
+    },
+
+    toggleIconEditMode(isEditMode) {
+      this.isIconEditMode = isEditMode
+    },
+
+    updateMenuItems(newItems) {
+      this.menuItems = newItems
+    },
+
+    handleMenuDragEnd(newItems) {
+      this.menuItems = newItems
+    },
+
+    handleAddMenuItems(selectedItems) {
+      selectedItems.forEach(item => {
+        const newId = Date.now().toString() + Math.random().toString(36).substr(2, 9)
+        const newMenuItem = {
+          id: newId,
+          name: item.name,
+          icon: item.icon,
+          action: item.id
+        }
+        this.menuItems.push(newMenuItem)
+      })
+    },
+
+    handleMenuAction(actionId) {
+      const actionMap = {
+        'savePlan': () => this.savePlan(),
+        'routeEdit': () => this.routeEdit(),
+        'militaryMarking': () => this.militaryMarking(),
+        'attributeEdit': () => this.attributeEdit(),
+        'timeSettings': () => this.timeSettings(),
+        'aircraftSettings': () => this.aircraftSettings(),
+        'keyEventEdit': () => this.keyEventEdit(),
+        'missileLaunch': () => this.missileLaunch(),
+        'toggle2D3D': () => this.toggle2D3D(),
+        'toggleRuler': () => this.toggleRuler(),
+        'toggleGrid': () => this.toggleGrid(),
+        'toggleScale': () => {
+          this.showScaleDialog = true
+          this.currentScale = {}
+        },
+        'loadTerrain': () => this.loadTerrain(),
+        'changeProjection': () => this.changeProjection(),
+        'loadAeroChart': () => this.loadAeroChart(),
+        'powerZone': () => {
+          this.showPowerZoneDialog = true
+          this.currentPowerZone = {}
+        },
+        'threatZone': () => this.threatZone(),
+        'routeCalculation': () => this.routeCalculation(),
+        'conflictDisplay': () => this.conflictDisplay(),
+        'dataMaterials': () => this.dataMaterials(),
+        'coordinateConversion': () => this.coordinateConversion(),
+        'pageLayout': () => this.pageLayout(),
+        'dataStoragePath': () => this.dataStoragePath(),
+        'externalParams': () => {
+          this.showExternalParamsDialog = true
+          this.currentExternalParams = {}
+        },
+        'toggleAirport': () => this.toggleAirport(),
+        'toggleLandmark': () => this.toggleLandmark(),
+        'toggleRoute': () => this.toggleRoute(),
+        'layerFavorites': () => this.layerFavorites(),
+        'routeFavorites': () => this.routeFavorites()
+      }
+      
+      if (actionMap[actionId]) {
+        actionMap[actionId]()
+      }
+    },
+
+    handleDeleteMenuItem(deletedItem) {
+      const index = this.menuItems.findIndex(item => item.id === deletedItem.id)
+      if (index > -1) {
+        this.menuItems.splice(index, 1)
+      }
     },
 
     attributeEdit() {
@@ -609,7 +806,7 @@ export default {
 
     // 选项下拉菜单方法
     pageLayout() {
-      this.$message.success('页面布局');
+      this.showPageLayoutDialog = true;
     },
 
     dataStoragePath() {
@@ -621,6 +818,21 @@ export default {
       this.$message.success('外部参数保存成功');
     },
 
+    savePageLayout(position) {
+      this.menuPosition = position;
+      this.$message.success(`菜单位置已设置为：${this.getPositionLabel(position)}`);
+    },
+
+    getPositionLabel(position) {
+      const labels = {
+        'top': '顶部',
+        'bottom': '底部',
+        'left': '左侧',
+        'right': '右侧'
+      };
+      return labels[position] || position;
+    },
+
     importAirport(path) {
       console.log('导入机场:', path)
       this.$message.success('机场数据导入成功');
@@ -673,6 +885,9 @@ export default {
 
     selectMenu(item) {
       this.activeMenu = item.id;
+      if (item.action) {
+        this.handleMenuAction(item.action)
+      }
 
       // 点击左侧的方案、冲突、平台时，切换右侧面板内容
       if (item.id === 'file') {
@@ -707,6 +922,9 @@ export default {
         // 点击推演按钮，显示/隐藏K时弹出框
         this.showKTimePopup = !this.showKTimePopup;
       }
+      if (item.id === 'save') {
+        this.savePlan();
+      }
     },
 
     // K时弹出框操作
@@ -799,20 +1017,67 @@ export default {
     },
 
     // 航线操作
+    selectPlan(plan) {
+      this.selectedPlanId = plan.id;
+      this.selectedPlanDetails = plan;
+      this.selectedRouteId = null;
+      this.selectedRouteDetails = null;
+    },
+
     selectRoute(route) {
       this.selectedRouteId = route.id;
       // 模拟获取航点数据
       this.selectedRouteDetails = {
+        id: route.id,
         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' },
+          { name: 'WP1', altitude: 1000, speed: 250 },
+          { name: 'WP2', altitude: 1500, speed: 300 },
+          { name: 'WP3', altitude: 2000, speed: 350 },
+          { name: 'WP4', altitude: 1800, speed: 320 },
+          { name: 'WP5', altitude: 1200, speed: 280 },
+          { name: 'WP6', altitude: 1000, speed: 250 },
+          { name: 'WP7', altitude: 800, speed: 220 },
+          { name: 'WP8', altitude: 600, speed: 200 },
         ]
       };
-      // 打开航线编辑弹窗
-      this.openRouteDialog(route);
+    },
+
+    createPlan() {
+      const newId = Date.now();
+      const newPlan = {
+        id: newId,
+        name: `新方案${this.plans.length + 1}`,
+        routes: []
+      };
+      this.plans.push(newPlan);
+      this.selectPlan(newPlan);
+    },
+
+    createRoute() {
+      if (!this.selectedPlanDetails) {
+        this.$message.warning('请先选择一个方案');
+        return;
+      }
+      const newId = Date.now();
+      const newRoute = {
+        id: newId,
+        name: `新航线${this.selectedPlanDetails.routes.length + 1}`,
+        points: 0,
+        conflict: false
+      };
+      this.selectedPlanDetails.routes.push(newRoute);
+      this.selectRoute(newRoute);
+    },
+
+    openPlanDialog(plan) {
+      this.$prompt('请输入方案名称', '编辑方案', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputValue: plan.name
+      }).then(({ value }) => {
+        plan.name = value;
+      }).catch(() => {});
     },
 
     addWaypoint() {
@@ -820,11 +1085,15 @@ export default {
         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`
+          altitude: 1000,
+          speed: 250
         });
-        this.$message.success('添加航点成功');
+        if (this.selectedPlanDetails) {
+          const route = this.selectedPlanDetails.routes.find(r => r.id === this.selectedRouteId);
+          if (route) {
+            route.points = this.selectedRouteDetails.waypoints.length;
+          }
+        }
       }
     },
 
diff --git a/ruoyi-ui/src/views/dialogs/ExternalParamsDialog.vue b/ruoyi-ui/src/views/dialogs/ExternalParamsDialog.vue
index 58d9b7a..c774ccd 100644
--- a/ruoyi-ui/src/views/dialogs/ExternalParamsDialog.vue
+++ b/ruoyi-ui/src/views/dialogs/ExternalParamsDialog.vue
@@ -179,7 +179,7 @@ export default {
         return;
       }
       this.$message.success('航路数据导入成功');
-      this.$emit('import-route', this.formData.routePath);
+      this.$emit('import-route-data', this.formData.routePath);
     },
     importLandmark() {
       if (!this.formData.landmarkPath) {
diff --git a/ruoyi-ui/src/views/dialogs/IconSelectDialog.vue b/ruoyi-ui/src/views/dialogs/IconSelectDialog.vue
new file mode 100644
index 0000000..900ca97
--- /dev/null
+++ b/ruoyi-ui/src/views/dialogs/IconSelectDialog.vue
@@ -0,0 +1,172 @@
+<template>
+  <el-dialog
+    title="选择图标"
+    :visible.sync="dialogVisible"
+    width="600px"
+    :modal="true"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    class="icon-select-dialog"
+  >
+    <div class="icon-grid">
+      <div
+        v-for="item in availableIcons"
+        :key="item.id"
+        class="icon-item"
+        :class="{ selected: selectedIcons.includes(item.id) }"
+        @click="toggleIcon(item)"
+      >
+        <i :class="item.icon"></i>
+        <span class="icon-name">{{ item.name }}</span>
+        <div v-if="selectedIcons.includes(item.id)" class="check-icon">
+          <i class="el-icon-check"></i>
+        </div>
+      </div>
+    </div>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false" size="small">取消</el-button>
+      <el-button type="primary" @click="confirmAdd" size="small">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'IconSelectDialog',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    availableIcons: {
+      type: Array,
+      default: () => []
+    },
+    existingIcons: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      selectedIcons: []
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  watch: {
+    visible(newVal) {
+      if (newVal) {
+        this.selectedIcons = []
+      }
+    }
+  },
+  methods: {
+    toggleIcon(item) {
+      const index = this.selectedIcons.indexOf(item.id)
+      if (index > -1) {
+        this.selectedIcons.splice(index, 1)
+      } else {
+        this.selectedIcons.push(item.id)
+      }
+    },
+
+    confirmAdd() {
+      const selectedItems = this.availableIcons.filter(item => 
+        this.selectedIcons.includes(item.id)
+      )
+      this.$emit('confirm', selectedItems)
+      this.dialogVisible = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.icon-select-dialog >>> .el-dialog__body {
+  padding: 20px;
+}
+
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 15px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.icon-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 15px 10px;
+  border: 2px solid #E4E7ED;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s;
+  position: relative;
+  background: white;
+}
+
+.icon-item:hover {
+  border-color: #008aff;
+  background: rgba(0, 138, 255, 0.05);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 138, 255, 0.15);
+}
+
+.icon-item.selected {
+  border-color: #008aff;
+  background: rgba(0, 138, 255, 0.1);
+}
+
+.icon-item i {
+  font-size: 28px;
+  color: #555;
+  margin-bottom: 8px;
+  transition: color 0.3s;
+}
+
+.icon-item:hover i,
+.icon-item.selected i {
+  color: #008aff;
+}
+
+.icon-name {
+  font-size: 12px;
+  color: #606266;
+  text-align: center;
+  word-break: break-all;
+}
+
+.check-icon {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #008aff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #008aff;
+  font-size: 12px;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>
diff --git a/ruoyi-ui/src/views/dialogs/PageLayoutDialog.vue b/ruoyi-ui/src/views/dialogs/PageLayoutDialog.vue
new file mode 100644
index 0000000..0d85718
--- /dev/null
+++ b/ruoyi-ui/src/views/dialogs/PageLayoutDialog.vue
@@ -0,0 +1,197 @@
+<template>
+  <div v-if="value" class="page-layout-dialog">
+    <div class="dialog-content">
+      <div class="dialog-header">
+        <h3>页面布局</h3>
+        <div class="close-btn" @click="closeDialog">×</div>
+      </div>
+      
+      <div class="dialog-body">
+        <div class="position-options">
+          <div 
+            v-for="option in positionOptions" 
+            :key="option.value"
+            class="position-option"
+            :class="{ active: selectedPosition === option.value }"
+            @click="selectPosition(option.value)"
+          >
+            <i :class="option.icon"></i>
+            <span>{{ option.label }}</span>
+          </div>
+        </div>
+      </div>
+      
+      <div class="dialog-footer">
+        <el-button @click="closeDialog" size="small">取消</el-button>
+        <el-button type="primary" @click="saveLayout" size="small">确定</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PageLayoutDialog',
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      selectedPosition: 'left',
+      positionOptions: [
+        { value: 'top', label: '顶部', icon: 'el-icon-top' },
+        { value: 'bottom', label: '底部', icon: 'el-icon-bottom' },
+        { value: 'left', label: '左侧', icon: 'el-icon-back' },
+        { value: 'right', label: '右侧', icon: 'el-icon-right' }
+      ]
+    };
+  },
+  watch: {
+    value(newVal) {
+      if (newVal) {
+        this.selectedPosition = this.$parent.menuPosition || 'left';
+      }
+    }
+  },
+  methods: {
+    selectPosition(position) {
+      this.selectedPosition = position;
+    },
+    closeDialog() {
+      this.$emit('input', false);
+    },
+    saveLayout() {
+      this.$emit('save', this.selectedPosition);
+      this.closeDialog();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.page-layout-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 100px;
+  pointer-events: none;
+}
+
+.dialog-content {
+  position: relative;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  width: 300px;
+  animation: dialog-fade-in 0.3s ease;
+  pointer-events: auto;
+}
+
+@keyframes dialog-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.dialog-header h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+}
+
+.close-btn {
+  font-size: 18px;
+  color: #999;
+  cursor: pointer;
+  transition: color 0.3s;
+  line-height: 1;
+}
+
+.close-btn:hover {
+  color: #666;
+}
+
+.dialog-body {
+  padding: 16px;
+}
+
+.position-options {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+
+.position-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 15px 10px;
+  border: 1px solid #e8e8e8;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s;
+  background: white;
+}
+
+.position-option:hover {
+  border-color: #008aff;
+  background: rgba(0, 138, 255, 0.05);
+  transform: translateY(-2px);
+  box-shadow: 0 2px 8px rgba(0, 138, 255, 0.15);
+}
+
+.position-option.active {
+  border-color: #008aff;
+  background: rgba(0, 138, 255, 0.1);
+}
+
+.position-option i {
+  font-size: 24px;
+  color: #555;
+  margin-bottom: 6px;
+  transition: color 0.3s;
+}
+
+.position-option:hover i,
+.position-option.active i {
+  color: #008aff;
+}
+
+.position-option span {
+  font-size: 13px;
+  color: #606266;
+}
+
+.dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 12px 16px;
+  border-top: 1px solid #e8e8e8;
+  gap: 8px;
+}
+</style>