<template>
  <div :class="['right-panel-container', mode === 'nav' ? 'rp--nav' : (mode === 'edit' ? 'rp--edit' : 'rp--calib')]">
    <!-- 标定页面板（保持原有结构不变） -->
    <template v-if="panelType !== 'nav'">
    <!-- 主面板 -->
    <div 
      class="right-panel" 
      :class="{ 
        'is-hidden': !value && (mode === 'edit' || mode === 'nav'), 
        'panel-collapsed': !value && mode === 'calib' 
      }"
    >
      <!-- 面板头部 -->
      <div class="panel-header" v-if="!hideHeader && panelType !== 'edit'">
        <div class="panel-title">
          <slot name="header">
            <h3>{{ title }}</h3>
            <span v-if="subtitle" class="panel-subtitle">{{ subtitle }}</span>
          </slot>
        </div>
        <el-button 
          @click="togglePanel" 
          type="text" 
          size="mini" 
          class="collapse-btn"
          :icon="value ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"
        />
      </div>

      <!-- 面板内容 -->
      <div class="panel-content">
        <!-- 标签页模式 -->
        <template v-if="tabs.length > 0">
          <el-tabs v-model="activeTab" @tab-click="handleTabClick">
            <el-tab-pane 
              v-for="tab in processedTabs" 
              :key="tab.key"
              :label="tab.label"
              :name="tab.key"
            >
              <!-- 实时信息Tab -->
              <template v-if="tab.key === 'info'">
                <div class="nav-tab-content">
                  <div class="nav-info-grid">
                    <div class="nav-info-header">
                      <h3 class="nav-info-title">实时信息</h3>
                    </div>
                    <div class="nav-info-content">
                      <div class="nav-info-item">
                        <span class="label">当前地图:</span>
                        <span class="value">{{ realtimeInfo.currentMap }}</span>
                      </div>
                      <div class="nav-info-item">
                        <span class="label">坐标:</span>
                        <span class="value">{{ realtimeInfo.coordinates }}</span>
                      </div>
                      <div class="nav-info-item">
                        <span class="label">航向:</span>
                        <span class="value">{{ realtimeInfo.heading }}</span>
                      </div>
                      <div class="nav-info-item">
                        <span class="label">速度:</span>
                        <span class="value">{{ realtimeInfo.speed }}</span>
                      </div>
                      <div class="nav-info-item">
                        <span class="label">指令速度:</span>
                        <span class="value">{{ realtimeInfo.speedCommand }}</span>
                      </div>
                      <div class="nav-info-item">
                        <span class="label">总里程:</span>
                        <span class="value">{{ realtimeInfo.totalDistance }}</span>
                      </div>
                      <div class="nav-info-item">
                        <span class="label">配准误差:</span>
                        <span class="value">{{ realtimeInfo.registrationError }}</span>
                      </div>
                      <div class="nav-info-item">
                        <span class="label">电池电量:</span>
                        <span class="value">{{ realtimeInfo.batteryLevel }}</span>
                      </div>
                      <div class="nav-info-item">
                        <span class="label">当前任务:</span>
                        <span class="value">{{ realtimeInfo.currentTask }}</span>
                      </div>
                    </div>
                  </div>
                  
                  <!-- 导航和急停状态 -->
                  <div v-if="mode === 'nav'" class="nav-info-grid" style="margin-top: 16px;">
                    <div class="nav-info-header">
                      <h3 class="nav-info-title">系统状态</h3>
                    </div>
                    <div class="nav-info-content">
                      <div class="nav-info-item">
                        <span class="label">导航状态:</span>
                        <span class="value" :class="getNavigationStatusClass(navigationStackStatus)">
                          {{ getNavigationStatusText(navigationStackStatus) }}
                        </span>
                      </div>
                      <div class="nav-info-item">
                        <span class="label">急停状态:</span>
                        <span class="value" :class="getEmergencyStopClass(emergencyStopEnabled)">
                          {{ emergencyStopEnabled ? '已启用' : '正常' }}
                        </span>
                      </div>
                    </div>
                    <div v-if="emergencyStopEnabled" style="padding: 16px; border-top: 1px solid #f0f0f0;">
                      <el-button 
                        type="success"
                        native-type="button"
                        size="small" 
                        icon="el-icon-refresh-right"
                        @click.prevent="$emit('emergency-stop-release')"
                        style="width: 100%;"
                        block
                      >
                        解除急停
                      </el-button>
                    </div>
                  </div>
                  
                  <!-- 编辑模式下添加"实时位姿"部分 -->
                  <div v-if="mode === 'edit'" class="nav-info-grid" style="margin-top: 16px;">
                    <div class="nav-info-header">
                      <h3 class="nav-info-title">实时位姿</h3>
                    </div>
                    <div class="nav-info-content">
                      <div class="nav-info-item">
                        <span class="label">X坐标:</span>
                        <span class="value">{{ realtimeInfo.coordinates.split(',')[0] ? realtimeInfo.coordinates.split(',')[0].replace('(', '').trim() : '0.35' }}</span>
                      </div>
                      <div class="nav-info-item">
                        <span class="label">Y坐标:</span>
                        <span class="value">{{ realtimeInfo.coordinates.split(',')[1] ? realtimeInfo.coordinates.split(',')[1].trim() : '0.22' }}</span>
                      </div>
                      <div class="nav-info-item">
                        <span class="label">Z坐标:</span>
                        <span class="value">{{ realtimeInfo.coordinates.split(',')[2] ? realtimeInfo.coordinates.split(',')[2].replace(')', '').trim() : '0.22' }}</span>
                      </div>
                    </div>
                    <div style="padding: 16px; border-top: 1px solid #f0f0f0;">
                      <el-button 
                        size="small" 
                        native-type="button"
                        icon="el-icon-circle-plus-outline"
                        @click.prevent="$emit('add-current-point')"
                        style="width: 100%;"
                        block
                      >
                        添加当前点
                      </el-button>
                    </div>
                  </div>
                </div>
              </template>
              
              <!-- 元素管理Tab -->
              <template v-if="tab.key === 'elements'">
                <div class="edit-elements-content">
                  <!-- 元素类型筛选 -->
                  <div class="element-filter">
                    <el-tabs v-model="activeElementType" size="small" @tab-click="handleElementTypeChange">
                      <el-tab-pane 
                        v-for="type in elementTypes" 
                        :key="type.key"
                        :label="`${type.label}(${type.count})`"
                        :name="type.key"
                      />
                    </el-tabs>
                  </div>
                  
                  <!-- 搜索框 -->
                  <div class="element-search">
                    <el-input
                      v-model="elementSearchKeyword"
                      placeholder="搜索元素..."
                      prefix-icon="el-icon-search"
                      size="small"
                      clearable
                      @input="handleElementSearch"
                    />
                  </div>
                  
                  <!-- 元素列表 -->
                  <div class="element-list">
                    <div 
                      v-for="element in filteredElements" 
                      :key="element.id"
                      class="element-item"
                      :class="{ 'selected': selectedElement.id === element.id }"
                      @click="handleElementSelect(element)"
                    >
                      <div class="element-info">
                        <div class="element-id">{{ element.id }}</div>
                        <div class="element-name">{{ element.name || '未命名' }}</div>
                      </div>
                      <div class="element-actions">
                        <el-button size="mini" type="text" native-type="button" @click.stop.prevent="$emit('element-edit', element)">编辑</el-button>
                        <el-button size="mini" type="text" native-type="button" @click.stop.prevent="$emit('element-locate', element)">定位</el-button>
                        <el-popconfirm
                          title="确定删除这个元素吗？"
                          @confirm="$emit('element-remove', element)"
                        >
                          <el-button size="mini" type="text" native-type="button" slot="reference" @click.stop.prevent>删除</el-button>
                        </el-popconfirm>
                      </div>
                    </div>
                    
                    <!-- 空状态 -->
                    <div v-if="filteredElements.length === 0" class="empty-state">
                      <i class="el-icon-box"></i>
                      <p>暂无{{ getCurrentTypeLabel() }}元素</p>
                    </div>
                  </div>
                </div>
              </template>
              
              <!-- 路网操作Tab -->
              <template v-if="tab.key === 'network'">
                <div class="edit-network-content">
                  <div class="network-operations">
                    <div class="operation-section">
                      <h4 class="section-title">路网操作</h4>
                      <div class="operation-buttons">
                        <el-button 
                          type="primary" 
                          size="small" 
                          icon="el-icon-download"
                          @click="handleNetworkOperation('export', $event)"
                          block
                        >
                          导出路网
                        </el-button>
                        <el-button 
                          size="small" 
                          icon="el-icon-upload"
                          @click="handleNetworkOperation('import', $event)"
                          block
                        >
                          导入路网
                        </el-button>
                        <el-button 
                          size="small" 
                          icon="el-icon-plus"
                          @click="handleNetworkOperation('merge', $event)"
                          block
                        >
                          合并导入路网
                        </el-button>
                        <el-button 
                          size="small" 
                          icon="el-icon-refresh"
                          @click="handleNetworkOperation('incremental', $event)"
                          block
                        >
                          增量导入路网
                        </el-button>
                        <el-button 
                          size="small" 
                          icon="el-icon-refresh-left"
                          @click="handleNetworkOperation('overwrite', $event)"
                          block
                        >
                          覆盖导入路网
                        </el-button>
                      </div>
                    </div>
                    
                    <div class="operation-section">
                      <h4 class="section-title">操作说明</h4>
                      <div class="operation-tips">
                        <div class="tip-item">
                          <strong>导出路网：</strong>将当前地图的路网数据导出为文件
                        </div>
                        <div class="tip-item">
                          <strong>导入路网：</strong>导入路网文件到当前地图
                        </div>
                        <div class="tip-item">
                          <strong>合并导入路网：</strong>保留现有路网，添加新的路网数据
                        </div>
                        <div class="tip-item">
                          <strong>增量导入路网：</strong>仅导入不存在的新元素
                        </div>
                        <div class="tip-item">
                          <strong>覆盖导入路网：</strong>清空现有路网，导入新的路网数据
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
              
              <!-- 其他Tab使用插槽 -->
              <template v-else>
                <slot :name="`tab-${tab.key}`">
                  <!-- 编辑页不需要占位符内容 -->
                </slot>
              </template>
            </el-tab-pane>
          </el-tabs>
          
          <!-- 编辑页面的收起按钮 -->
          <el-button 
            v-if="mode === 'edit'"
            class="edit-panel-close-btn"
            type="text" 
            native-type="button"
            size="mini" 
            icon="el-icon-arrow-right"
            @click.prevent="$emit('input', false)"
            title="收起面板"
          />
        </template>

        <!-- 默认内容模式 -->
        <template v-else>
          <slot>
            <!-- 兼容原标定页内容 -->
            <div class="default-content">
              <!-- 实时位姿卡片 -->
              <div class="info-card" v-if="showPoseCard">
                <div class="card-header">
                  <h4 class="card-title">实时位姿</h4>
                </div>
                <div class="card-content">
                  <!-- 激光定位 -->
                  <div class="pose-section">
                    <div class="section-title">激光定位</div>
                    <div class="pose-item">
                      <span class="pose-label">X坐标</span>
                      <span class="pose-value">{{ laserPositionData.x }}</span>
                    </div>
                    <div class="pose-item">
                      <span class="pose-label">Y坐标</span>
                      <span class="pose-value">{{ laserPositionData.y }}</span>
                    </div>
                    <div class="pose-item">
                      <span class="pose-label">航向角</span>
                      <span class="pose-value">{{ laserPositionData.angle }}</span>
                    </div>
                  </div>

                  <!-- GNSS定位 -->
                  <div class="pose-section">
                    <div class="section-title">GNSS定位</div>
                    <div class="pose-item">
                      <span class="pose-label">状态</span>
                      <el-tag 
                        :type="getGnssStatusType(gnssPositionData.status)" 
                        size="mini"
                        class="pose-value"
                      >
                        {{ gnssPositionData.status }}
                      </el-tag>
                    </div>
                    <div class="pose-item">
                      <span class="pose-label">经度</span>
                      <span class="pose-value">{{ gnssPositionData.longitude }}</span>
                    </div>
                    <div class="pose-item">
                      <span class="pose-label">纬度</span>
                      <span class="pose-value">{{ gnssPositionData.latitude }}</span>
                    </div>
                    <div class="pose-item">
                      <span class="pose-label">方向角</span>
                      <span class="pose-value">{{ gnssPositionData.angle }}</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 当前标定点卡片 -->
              <div class="info-card" v-if="showCalibrationCard">
                <div class="card-header">
                  <h4 class="card-title">当前标定点</h4>
                </div>
                <div class="card-content">
                  <div class="calibration-table" v-if="calibrationList.length > 0">
                    <div class="table-header">
                      <div class="col-id">序号</div>
                      <div class="col-coord">坐标(X,Y)</div>
                      <div class="col-action">操作</div>
                    </div>
                    <div class="table-body">
                      <div 
                        v-for="item in calibrationList" 
                        :key="item.id" 
                        class="table-row"
                      >
                        <div class="col-id">{{ item.id }}</div>
                        <div class="col-coord">{{ item.coordinate }}</div>
                        <div class="col-action">
                          <el-popconfirm
                            title="确定要删除这个标定点吗？"
                            @confirm="removeCalibration(item.id)"
                            placement="left"
                          >
                            <el-button 
                              slot="reference"
                              type="text" 
                              size="mini" 
                              icon="el-icon-delete"
                              class="delete-btn"
                            />
                          </el-popconfirm>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <!-- 空状态 -->
                  <div v-else class="empty-state">
                    <i class="el-icon-position"></i>
                    <p>暂无标定点</p>
                  </div>

                  <!-- 操作按钮组 -->
                  <div class="action-buttons">
                    <el-button 
                      type="primary" 
                      size="small" 
                      icon="el-icon-plus"
                      @click="addCalibration"
                      :disabled="!canAddCalibration"
                    >
                      添加标定点
                    </el-button>
                    <el-button 
                      size="small" 
                      icon="el-icon-check"
                      @click="executeCalibration"
                      :disabled="calibrationList.length === 0"
                    >
                      一键标定
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </slot>
        </template>
      </div>

      <!-- 拖拽调宽手柄 -->
      <div 
        class="resize-handle" 
        @mousedown="startResize" 
        v-if="resizable && !isDrawerMode && value"
      ></div>
    </div>

    <!-- 展开拉手 (收起时显示) -->
    <div 
      v-if="overlay && !value" 
      class="expand-handle edit-expand-handle"
      @click="$emit('input', true)"
      title="展开面板"
      @mouseenter="$event.target.style.background = 'var(--color-primary, #409eff)'; $event.target.style.borderColor = 'var(--color-primary, #409eff)'; $event.target.style.transform = 'translateY(-50%) translateX(-2px)'; $event.target.querySelector('i').style.color = '#ffffff';"
      @mouseleave="$event.target.style.background = 'var(--color-bg-card, #ffffff)'; $event.target.style.borderColor = 'var(--color-border-primary, #dcdfe6)'; $event.target.style.transform = 'translateY(-50%)'; $event.target.querySelector('i').style.color = 'var(--color-text-primary, #303133)';"
      style="position: fixed !important; right: 0 !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 9999 !important; width: 36px !important; height: 72px !important; background: var(--color-bg-card, #ffffff) !important; border: 1px solid var(--color-border-primary, #dcdfe6) !important; border-radius: 8px 0 0 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; transition: all 0.3s ease !important;"
    >
      <i class="el-icon-arrow-left" style="font-size: 16px !important; color: var(--color-text-primary, #303133) !important; font-weight: bold !important; transition: color 0.3s ease !important;"></i>
    </div>
    </template>
    
    <!-- 导航页面板（全新独立结构） -->
    <template v-else>
      <aside 
        class="right-panel nav-right-panel"
        :class="{ 'is-hidden': !visible }"
      >
        <!-- 导航页Tabs -->
        <div class="nav-panel-header">
          <el-tabs v-model="navActiveTab" class="nav-tabs">
          <!-- Tab1: 实时信息 -->
          <el-tab-pane label="实时信息" name="realtime">
            <div class="nav-tab-content">
              <div class="nav-info-grid">
                <div class="nav-info-header">
                  <h3 class="nav-info-title">实时信息</h3>
                </div>
                <div class="nav-info-content">
                  <div class="nav-info-item">
                    <span class="label">当前地图:</span>
                    <span class="value">{{ realtimeInfo.currentMap }}</span>
                  </div>
                  <div class="nav-info-item">
                    <span class="label">坐标:</span>
                    <span class="value">{{ realtimeInfo.coordinates }}</span>
                  </div>
                  <div class="nav-info-item">
                    <span class="label">航向:</span>
                    <span class="value">{{ realtimeInfo.heading }}</span>
                  </div>
                  <div class="nav-info-item">
                    <span class="label">速度:</span>
                    <span class="value">{{ realtimeInfo.speed }}</span>
                  </div>
                  <div class="nav-info-item">
                    <span class="label">指令速度:</span>
                    <span class="value">{{ realtimeInfo.speedCommand }}</span>
                  </div>
                  <div class="nav-info-item">
                    <span class="label">总里程:</span>
                    <span class="value">{{ realtimeInfo.totalDistance }}</span>
                  </div>
                  <div class="nav-info-item">
                    <span class="label">配准误差:</span>
                    <span class="value">{{ realtimeInfo.registrationError }}</span>
                  </div>
                  <div class="nav-info-item">
                    <span class="label">电池电量:</span>
                    <span class="value">{{ realtimeInfo.batteryLevel || '0%' }}</span>
                  </div>
                  <div class="nav-info-item">
                    <span class="label">当前任务:</span>
                    <span class="value">{{ realtimeInfo.currentTask }}</span>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          
          <!-- Tab2: 功能设置 -->
          <el-tab-pane label="功能设置" name="settings">
            <div class="nav-tab-content">
              <div class="settings-list">
                <div class="setting-item">
                  <div class="setting-info">
                    <span class="setting-label">点云</span>
                    <span class="setting-desc">显示/隐藏点云数据</span>
                  </div>
                  <el-switch 
                    v-model="settingParams.pointCloud"
                    @change="onSettingChange('pointCloud', $event)"
                  />
                </div>

                <div class="setting-item">
                  <div class="setting-info">
                    <span class="setting-label">底图</span>
                    <span class="setting-desc">显示/隐藏地图底图</span>
                  </div>
                  <el-switch 
                    v-model="settingParams.baseMap"
                    @change="onSettingChange('baseMap', $event)"
                  />
                </div>

                <div class="setting-item">
                  <div class="setting-info">
                    <span class="setting-label">点ID</span>
                    <span class="setting-desc">显示/隐藏点位ID标识</span>
                  </div>
                  <el-switch 
                    v-model="settingParams.pointId"
                    @change="onSettingChange('pointId', $event)"
                  />
                </div>

                <div class="setting-item">
                  <div class="setting-info">
                    <span class="setting-label">位置跟随</span>
                    <span class="setting-desc">地图自动跟随机器人位置</span>
                  </div>
                  <el-switch 
                    v-model="settingParams.follow"
                    @change="onSettingChange('follow', $event)"
                  />
                </div>

                <div class="setting-item">
                  <div class="setting-info">
                    <span class="setting-label">网络邻居</span>
                    <span class="setting-desc">显示网络邻居设备</span>
                  </div>
                  <el-switch 
                    v-model="settingParams.network"
                    @change="onSettingChange('network', $event)"
                  />
                </div>
              </div>
            </div>
          </el-tab-pane>
          
          <!-- Tab3: 目标点 -->
          <el-tab-pane label="目标点" name="waypoint">
            <div class="nav-tab-content">
              <!-- 操作工具栏 -->
              <div class="waypoint-toolbar">
                <!-- 2行3列网格布局 -->
                <div class="toolbar-grid">
                  <!-- 第一行：上移、下移、批量删除 -->
                  <el-button type="primary" native-type="button" size="small" :disabled="waypointSingle" @click.prevent="$emit('wp-move-up')" class="grid-btn">
                    <i class="el-icon-arrow-up"></i>
                    <span>上移</span>
                  </el-button>
                  <el-button type="primary" native-type="button" size="small" :disabled="waypointSingle" @click.prevent="$emit('wp-move-down')" class="grid-btn">
                    <i class="el-icon-arrow-down"></i>
                    <span>下移</span>
                  </el-button>
                  <el-popconfirm title="确定批量删除选中的目标点？" @confirm="$emit('wp-batch-remove')">
                    <el-button type="danger" native-type="button" size="small" :disabled="waypointMultiple" slot="reference" class="grid-btn">
                      <i class="el-icon-delete"></i>
                      <span>批量删除</span>
                    </el-button>
                  </el-popconfirm>
                  
                  <!-- 第二行：立即前往、生成任务、地图选点 -->
                  <el-button type="warning" native-type="button" size="small" :disabled="waypointSingle" @click.prevent="$emit('wp-goto')" class="grid-btn">
                    <i class="el-icon-position"></i>
                    <span>立即前往</span>
                  </el-button>
                  <el-button type="success" native-type="button" size="small" :disabled="waypointMultiple" @click.prevent="$emit('wp-create-task')" class="grid-btn">
                    <i class="el-icon-plus"></i>
                    <span>生成任务</span>
                  </el-button>
                  <el-button 
                    :type="mapSelectMode ? 'danger' : 'info'" 
                    native-type="button"
                    size="small"
                    @click.prevent="toggleMapSelectMode"
                    class="grid-btn"
                  >
                    <i :class="mapSelectMode ? 'el-icon-close' : 'el-icon-location'"></i>
                    <span>{{ mapSelectMode ? '关闭选点' : '地图选点' }}</span>
                  </el-button>
                </div>
              </div>
              
              <!-- 目标点列表 -->
              <div class="nav-list-content nav-list-scrollable">
                <div v-if="waypointList.length > 0" class="nav-waypoint-list">
                  <div 
                    v-for="waypoint in waypointList" 
                    :key="waypoint.id"
                    class="nav-waypoint-item"
                    :class="{ 'selected': selectedWaypoints.some(w => w.id === waypoint.id) }"
                    @click="onWaypointItemClick(waypoint)"
                  >
                    <div class="waypoint-checkbox" @click.stop="handleCheckboxClick(waypoint)">
                      <div 
                        class="custom-checkbox" 
                        :class="{ 'checked': selectedWaypoints.some(w => w.id === waypoint.id) }"
                        @click.stop="handleCheckboxClick(waypoint)"
                      >
                        <i v-if="selectedWaypoints.some(w => w.id === waypoint.id)" class="el-icon-check"></i>
                      </div>
                    </div>
                    <div class="waypoint-info">
                      <div class="waypoint-main">
                        <span class="waypoint-id">编号: {{ waypoint.id }}</span>
                        <span class="waypoint-coords">坐标: ({{ waypoint.x }}, {{ waypoint.y }})</span>
                      </div>
                    </div>
                    <div class="waypoint-actions">
                      <el-button size="mini" type="text" native-type="button" @click.stop.prevent="$emit('wp-edit', waypoint)" class="action-btn">编辑</el-button>
                      <el-popconfirm title="删除当前目标点？" @confirm="$emit('wp-remove', waypoint)">
                        <el-button size="mini" type="text" native-type="button" slot="reference" @click.stop.prevent class="action-btn">删除</el-button>
                      </el-popconfirm>
                    </div>
                  </div>
                </div>
                
                <!-- 空状态 -->
                <div v-else class="nav-empty-state">
                  <i class="el-icon-location-outline"></i>
                  <p>暂无目标点</p>
                  <p class="empty-hint">点击上方工具栏中的"地图选点"按钮在地图上添加目标点</p>
                </div>
              </div>

              <!-- 底部快捷操作 -->
              <div v-if="selectedWaypoints.length > 0" class="waypoint-quick-actions">
                <div class="quick-actions-info">
                  <span>已选择 {{ selectedWaypoints.length }} 个目标点</span>
                </div>
                <div class="quick-actions-buttons">
                  <el-button size="small" @click="clearSelection">取消选择</el-button>
                </div>
              </div>
            </div>
          </el-tab-pane>
          
          <!-- Tab4: 任务 -->
          <el-tab-pane label="任务" name="task">
            <div class="nav-tab-content">
              
              <div class="nav-list-content">
                <div v-if="taskList.length > 0" class="nav-task-list">
                  <div 
                    v-for="task in taskList" 
                    :key="task.taskId"
                    class="nav-task-item"
                  >
                    <div class="task-info">
                      <span class="task-name">{{ task.taskName }}</span>
                      <span class="task-status" :class="'status-' + task.status">{{ getTaskStatusText(task.status) }}</span>
                    </div>
                    <div class="task-actions">
                      <el-button size="mini" type="text" native-type="button" @click.prevent="$emit('task-view', task)">查看</el-button>
                      <el-button size="mini" type="text" native-type="button" @click.prevent="$emit('task-start', task)">开始</el-button>
                      <el-button size="mini" type="text" native-type="button" @click.prevent="$emit('task-pause', task)">暂停</el-button>
                      <el-button size="mini" type="text" native-type="button" @click.prevent="$emit('task-stop', task)">停止</el-button>
                      <el-button size="mini" type="text" native-type="button" @click.prevent="$emit('task-remove', task)">删除</el-button>
                    </div>
                  </div>
                </div>
                <div v-else class="nav-empty-state">
                  <i class="el-icon-s-order"></i>
                  <p>暂无任务</p>
                </div>
              </div>
            </div>
          </el-tab-pane>

        </el-tabs>
        
        <!-- 导航页面的收起按钮 -->
        <el-button 
          v-if="panelType === 'nav'"
          class="nav-panel-close-btn"
          type="text" 
          native-type="button"
          size="mini" 
          icon="el-icon-arrow-right"
          @click.prevent="$emit('update:visible', false)"
          title="收起面板"
        />
      </div>
        
      </aside>
      
      <!-- 导航页展开拉手 (收起时显示) - 复用标定页面逻辑 -->
      <div 
        v-if="overlay && !visible" 
        class="expand-handle nav-expand-handle"
        @click="$emit('update:visible', true)"
        title="展开面板"
        @mouseenter="$event.target.style.background = 'var(--color-primary, #409eff)'; $event.target.style.borderColor = 'var(--color-primary, #409eff)'; $event.target.style.transform = 'translateY(-50%) translateX(-2px)'; $event.target.querySelector('i').style.color = '#ffffff';"
        @mouseleave="$event.target.style.background = 'var(--color-bg-card, #ffffff)'; $event.target.style.borderColor = 'var(--color-border-primary, #dcdfe6)'; $event.target.style.transform = 'translateY(-50%)'; $event.target.querySelector('i').style.color = 'var(--color-text-primary, #303133)';"
        style="position: fixed !important; right: 0 !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 9999 !important; width: 36px !important; height: 72px !important; background: var(--color-bg-card, #ffffff) !important; border: 1px solid var(--color-border-primary, #dcdfe6) !important; border-radius: 8px 0 0 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; transition: all 0.3s ease !important;"
      >
        <i class="el-icon-arrow-left" style="font-size: 16px !important; color: var(--color-text-primary, #303133) !important; font-weight: bold !important; transition: color 0.3s ease !important;"></i>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'RightPanel',
  props: {
    // 面板模式 - 区分导航/标定/编辑
    mode: {
      type: String,
      default: 'calib', // 'calib' 或 'nav' 或 'edit'
      validator: value => ['calib', 'nav', 'edit'].includes(value)
    },
    // 面板类型 - 新增
    panelType: {
      type: String,
      default: 'calibration'
    },
    // v-model 支持
    value: {
      type: Boolean,
      default: true
    },
    // 面板是否可见 - 新增（导航页面板控制）
    visible: {
      type: Boolean,
      default: true
    },
    // 面板宽度
    width: {
      type: Number,
      default: 360
    },
    // 标签页配置 - 支持字符串数组或对象数组
    tabs: {
      type: Array,
      default: () => []
    },
    // 初始标签页
    initialTab: {
      type: String,
      default: ''
    },
    // 收起后是否保留拉手
    overlay: {
      type: Boolean,
      default: true
    },
    // 是否可调整大小
    resizable: {
      type: Boolean,
      default: true
    },
    // 面板标题
    title: {
      type: String,
      default: '面板'
    },
    // 面板副标题
    subtitle: {
      type: String,
      default: ''
    },
    // 是否隐藏头部
    hideHeader: {
      type: Boolean,
      default: false
    },
    // 展开提示文本
    expandTooltip: {
      type: String,
      default: '展开面板'
    },
    
    // === 兼容原标定页的props ===
    laserPositionData: {
      type: Object,
      default: () => ({ x: 0, y: 0, angle: 0 })
    },
    gnssPositionData: {
      type: Object,
      default: () => ({ status: '0/0', longitude: 0, latitude: 0, angle: 0 })
    },
    calibrationList: {
      type: Array,
      default: () => []
    },
    currentMap: {
      type: Object,
      default: () => ({ name: 'sh02' })
    },
    isDrawerMode: {
      type: Boolean,
      default: false
    },
    showPoseCard: {
      type: Boolean,
      default: true
    },
    showCalibrationCard: {
      type: Boolean,
      default: true
    },
    
    // === 实时信息相关props ===
    realtimeInfo: {
      type: Object,
      default: () => ({
        currentMap: '',
        currentTask: '暂无',
        speed: '',
        speedCommand: '',
        coordinates: '(0.000, 0.000, 0.000)',
        heading: '0°',
        totalDistance: '0m',
        registrationError: '0',
        batteryLevel: '0%'
      })
    },
    
    // === 导航页专用props ===
    waypointList: {
      type: Array,
      default: () => []
    },
    taskList: {
      type: Array,
      default: () => []
    },
    settingParams: {
      type: Object,
      default: () => ({
        pointCloud: false,
        baseMap: true,
        pointId: false,
        follow: false,
        network: false
      })
    },
    // 急停状态
    emergencyStopEnabled: {
      type: Boolean,
      default: false
    },
    // 导航堆栈状态
    navigationStackStatus: {
      type: String,
      default: 'unknown'
    },
    
    // === 编辑页专用props ===
    elementList: {
      type: Array,
      default: () => []
    },
    selectedElement: {
      type: Object,
      default: () => ({})
    },
    elementTypes: {
      type: Array,
      default: () => [
        { key: 'point', label: '点', count: 0 },
        { key: 'line', label: '线', count: 0 },
        { key: 'curve', label: '弧', count: 0 },
        { key: 'polygon', label: '面', count: 0 }
      ]
    }
  },
  data() {
    return {
      activeTab: '',
      navActiveTab: 'realtime', // 导航页默认激活的tab
      isResizing: false,
      startX: 0,
      startWidth: 0,
      // 目标点相关状态
      selectedWaypoints: [], // 选中的目标点
      mapSelectMode: false, // 地图选点模式
      // 编辑页相关状态
      activeElementType: 'point', // 当前选中的元素类型
      elementSearchKeyword: '' // 元素搜索关键词
    }
  },
  computed: {
    canAddCalibration() {
      return this.laserPositionData.x !== 0 || this.laserPositionData.y !== 0
    },

    // 目标点操作按钮状态
    waypointSingle() {
      return this.selectedWaypoints.length !== 1
    },
    waypointMultiple() {
      return this.selectedWaypoints.length === 0
    },
    
    
    // 处理Tab配置，支持字符串数组和对象数组
    processedTabs() {
      const tabMap = {
        'info': { key: 'info', label: '实时信息' },
        'settings': { key: 'settings', label: '功能设置' },
        'task': { key: 'task', label: '任务配置' },
        'points': { key: 'points', label: '目标点' },
        'system': { key: 'system', label: '系统状态' },
        'elements': { key: 'elements', label: '元素管理' },
        'network': { key: 'network', label: '路网操作' }
      }
      
      return this.tabs.map(tab => {
        if (typeof tab === 'string') {
          return tabMap[tab] || { key: tab, label: tab }
        }
        return tab
      })
    },
    
    // 编辑模式相关计算属性
    filteredElements() {
      if (!this.elementList || this.elementList.length === 0) {
        return []
      }
      
      let filtered = this.elementList
      
      // 按类型筛选
      if (this.activeElementType !== 'all') {
        filtered = filtered.filter(element => {
          if (this.activeElementType === 'point') return element.id.startsWith('p')
          if (this.activeElementType === 'line') return element.id.startsWith('l')
          if (this.activeElementType === 'curve') return element.id.startsWith('b')
          if (this.activeElementType === 'polygon') return element.id.startsWith('s')
          return true
        })
      }
      
      // 按关键词搜索
      if (this.elementSearchKeyword) {
        const keyword = this.elementSearchKeyword.toLowerCase()
        filtered = filtered.filter(element => 
          element.id.toLowerCase().includes(keyword) ||
          (element.name && element.name.toLowerCase().includes(keyword))
        )
      }
      
      return filtered
    }
  },
  watch: {
  // 监听目标点列表变化，自动清理无效选择
  waypointList: {
    handler(newList) {
      if (this.selectedWaypoints.length > 0) {
        // 过滤出仍然存在的选中项
        const validSelections = this.selectedWaypoints.filter(selected => 
          newList.some(waypoint => waypoint.id === selected.id)
        );
        
        // 如果选择发生了变化，更新选择状态
        if (validSelections.length !== this.selectedWaypoints.length) {
          this.selectedWaypoints = validSelections;
          this.$emit('wp-selection-change', this.selectedWaypoints);
        }
      }
    },
    deep: true,
    immediate: false
  }
},
  created() {
    // 初始化标签页
    if (this.tabs.length > 0) {
      const firstTab = this.processedTabs[0]
      this.activeTab = this.initialTab || (firstTab ? firstTab.key : '')
    }
  },
  mounted() {
    // 添加全局鼠标事件监听
    document.addEventListener('mousemove', this.handleResize)
    document.addEventListener('mouseup', this.stopResize)
  },
  beforeDestroy() {
    document.removeEventListener('mousemove', this.handleResize)
    document.removeEventListener('mouseup', this.stopResize)
  },
  mounted() {
    // 组件挂载完成
  },
  methods: {
    // 切换面板展开/收起
    togglePanel() {
      this.$emit('input', !this.value)
    },
    
    
    // 展开面板
    expandPanel() {
      this.$emit('input', true)
    },
    
    // 标签页切换
    handleTabClick(tab) {
      this.activeTab = tab.name
      this.$emit('tab-change', tab.name)
    },
    
    // 开始拖拽调整大小
    startResize(event) {
      if (this.isDrawerMode || !this.resizable) return
      
      this.isResizing = true
      this.startX = event.clientX
      this.startWidth = this.width
      document.body.style.cursor = 'col-resize'
      document.body.style.userSelect = 'none'
    },
    
    // 处理拖拽调整大小
    handleResize(event) {
      if (!this.isResizing || this.isDrawerMode) return
      
      const diff = this.startX - event.clientX
      const newWidth = Math.max(320, Math.min(420, this.startWidth + diff))
      
      if (newWidth !== this.width) {
        this.$emit('panel-resize', newWidth)
      }
    },
    
    // 停止拖拽调整大小
    stopResize() {
      if (this.isResizing) {
        this.isResizing = false
        document.body.style.cursor = ''
        document.body.style.userSelect = ''
      }
    },
    
    // === 兼容原标定页的方法 ===
    getGnssStatusType(status) {
      if (status === '0/0') return 'info'
      if (status.includes('锁定')) return 'success'
      if (status.includes('异常')) return 'warning'
      return 'info'
    },
    
    addCalibration() {
      this.$emit('add-calibration')
    },
    
    removeCalibration(id) {
      this.$emit('remove-calibration', id)
    },
    
    executeCalibration() {
      this.$emit('execute-calibration')
    },
    
    // === 导航页专用方法 ===
    getTaskStatusText(status) {
      const statusMap = {
        'idle': '空闲',
        'running': '运行中',
        'paused': '暂停',
        'completed': '已完成',
        'failed': '失败'
      }
      return statusMap[status] || '未知'
    },

    // 设置项变更处理
    onSettingChange(settingKey, value) {
      console.log(`设置项 ${settingKey} 变更为:`, value)
      this.$emit('setting-change', { key: settingKey, value: value })
    },

    // === 目标点相关方法 ===
    
    // 目标点表格选择变更
    onWaypointSelectionChange(selection) {
      this.selectedWaypoints = selection
      this.$emit('wp-selection-change', selection)
    },

    // 切换地图选点模式
    toggleMapSelectMode() {
      this.mapSelectMode = !this.mapSelectMode
      this.$emit('map-select-mode-change', this.mapSelectMode)
    },


    // 目标点项点击
    onWaypointItemClick(waypoint) {
      // 单击选择/取消选择
      const isSelected = this.selectedWaypoints.some(w => w.id === waypoint.id)
      if (isSelected) {
        this.selectedWaypoints = this.selectedWaypoints.filter(w => w.id !== waypoint.id)
      } else {
        this.selectedWaypoints.push(waypoint)
      }
      this.$emit('wp-selection-change', this.selectedWaypoints)
    },

    // 自定义复选框点击处理（完全可控）
    handleCheckboxClick(waypoint) {
      console.log('Custom checkbox clicked for waypoint:', waypoint.id)
      const isSelected = this.selectedWaypoints.some(w => w.id === waypoint.id)
      console.log('Current selection state:', isSelected, 'Toggling to:', !isSelected)
      
      // 直接处理选择状态变更
      if (isSelected) {
        // 取消选择
        this.selectedWaypoints = this.selectedWaypoints.filter(w => w.id !== waypoint.id)
        console.log('Removed waypoint from selection')
      } else {
        // 添加选择
        this.selectedWaypoints.push(waypoint)
        console.log('Added waypoint to selection')
      }
      
      // 通知父组件
      this.$emit('wp-selection-change', this.selectedWaypoints)
      console.log('Final selection:', this.selectedWaypoints.map(w => w.id))
      
      // 强制触发响应式更新
      this.$forceUpdate()
    },

    // 清除选择
    clearSelection() {
      this.selectedWaypoints = []
      this.$emit('wp-selection-change', this.selectedWaypoints)
    },

    // 获取路径类型文本
    getWaypointTypeText(type) {
      const typeMap = {
        0: '自由路径',
        1: '路网路径'
      }
      return typeMap[type] || '未知'
    },
    
    // === 编辑页专用方法 ===
    
    // 处理元素类型切换
    handleElementTypeChange(tab) {
      this.activeElementType = tab.name
      this.currentPage = 1
      this.$emit('element-type-change', tab.name)
    },
    
    // 处理元素搜索（防抖）
    handleElementSearch() {
      if (this.searchTimer) {
        clearTimeout(this.searchTimer)
      }
      this.searchTimer = setTimeout(() => {
        this.currentPage = 1
        this.$emit('element-search', this.elementSearchKeyword)
      }, 300)
    },
    
    // 处理元素选择
    handleElementSelect(element) {
      this.$emit('element-select', element)
    },
    
    
    // 处理路网操作
    handleNetworkOperation(operation, event) {
      const operationMap = {
        'export': {
          title: '导出路网',
          message: '确定要导出当前地图的路网数据吗？',
          confirmText: '确定导出',
          successMsg: '路网导出成功！',
          errorMsg: '路网导出失败！'
        },
        'import': {
          title: '导入路网',
          message: '确定要导入路网文件吗？这将会添加新的路网数据到当前地图。',
          confirmText: '确定导入',
          successMsg: '路网导入成功！',
          errorMsg: '路网导入失败！'
        },
        'merge': {
          title: '合并导入路网',
          message: '确定要合并导入路网吗？这将保留现有路网，并添加新的路网数据。',
          confirmText: '确定合并',
          successMsg: '路网合并导入成功！',
          errorMsg: '路网合并导入失败！'
        },
        'incremental': {
          title: '增量导入路网',
          message: '确定要增量导入路网吗？这将只导入不存在的新元素。',
          confirmText: '确定导入',
          successMsg: '路网增量导入成功！',
          errorMsg: '路网增量导入失败！'
        },
        'overwrite': {
          title: '覆盖导入路网',
          message: '确定要覆盖导入路网吗？这将清空现有路网，导入新的路网数据。此操作不可恢复！',
          confirmText: '确定覆盖',
          successMsg: '路网覆盖导入成功！',
          errorMsg: '路网覆盖导入失败！'
        }
      }
      
      const config = operationMap[operation]
      if (!config) return
      
      // 获取触发事件的按钮元素
      const button = event ? event.currentTarget : null
      
      this.$confirm(config.message, config.title, {
        confirmButtonText: config.confirmText,
        cancelButtonText: '取消',
        type: operation === 'overwrite' ? 'warning' : 'info',
        dangerouslyUseHTMLString: false
      }).then(() => {
        // 发射事件给父组件处理具体逻辑
        if (operation === 'export') {
          this.$emit('network-export')
        } else {
          this.$emit('network-import', operation === 'import' ? 'import' : operation === 'overwrite' ? 'replace' : operation)
        }
        
        // 模拟异步操作，实际应该在父组件中处理
        setTimeout(() => {
          this.$message.success(config.successMsg)
          // 移除按钮焦点
          if (button) {
            button.blur()
          }
        }, 500)
      }).catch(() => {
        this.$message.info('已取消操作')
        // 取消时也要移除按钮焦点，避免保持激活状态
        if (button) {
          button.blur()
        }
      })
    },
    
    // 处理分页变化
    handlePageChange(page) {
      this.currentPage = page
      this.$emit('page-change', page)
    },
    
    // 获取当前类型标签
    getCurrentTypeLabel() {
      const typeMap = {
        'point': '点',
        'line': '线', 
        'curve': '弧',
        'polygon': '面'
      }
      return typeMap[this.activeElementType] || ''
    },
    
    // === 导航和急停状态相关方法 ===
    
    // 获取导航状态显示文本
    getNavigationStatusText(status) {
      const statusMap = {
        'unknown': '未知',
        'started': '已启动',
        'stopped': '已停止'
      }
      return statusMap[status] || '未知'
    },
    
    // 获取导航状态样式类
    getNavigationStatusClass(status) {
      const classMap = {
        'unknown': 'status-unknown',
        'started': 'status-started',
        'stopped': 'status-stopped'
      }
      return classMap[status] || 'status-unknown'
    },
    
    // 获取急停状态样式类
    getEmergencyStopClass(enabled) {
      return enabled ? 'status-emergency' : 'status-normal'
    }
  }
}
</script>

<style lang="scss" scoped>
@import './_map-shared.scss';

.right-panel-container {
  position: relative;
  height: 100%;
  z-index: inherit;
}

/* === 标定页专用样式 === */
.rp--calib {
  .right-panel {
    height: 100%;
    background: #fff;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;

    &.panel-collapsed {
      width: 0 !important;
      opacity: 0;
      pointer-events: none;
      overflow: hidden;
      transform: translateX(100%);
    }

  .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e4e7ed;
    background: #fafbfc;
    flex-shrink: 0;

    .panel-title {
      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        line-height: 1.4;
      }

      .panel-subtitle {
        font-size: 12px;
        color: #f56c6c;
        margin-left: 8px;
      }
    }

    .collapse-btn {
      color: #909399;
      padding: 4px;
      
      &:hover {
        color: #409eff;
        background-color: #f0f9ff;
      }
    }
  }

  .panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .default-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: $panel-padding;
      overflow: hidden;
    }

    .tab-placeholder {
      padding: var(--spacing-4);
      text-align: center;
      color: var(--color-text-tertiary);
    }

    .info-card {
      @include info-card-base;

      &:last-child {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;

        .card-content {
          flex: 1;
          overflow-y: auto;
          @include custom-scrollbar;
        }
      }

      .pose-section {
        margin-bottom: var(--spacing-4);

        &:last-child {
          margin-bottom: 0;
        }

        .section-title {
          font-size: var(--font-size-sm);
          font-weight: var(--font-weight-medium);
          color: var(--color-text-tertiary);
          margin-bottom: var(--spacing-2);
          padding-bottom: var(--spacing-1);
          border-bottom: 1px solid var(--color-border-tertiary);
        }

        .pose-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: var(--spacing-2) 0;
          border-bottom: 1px solid var(--color-border-tertiary);

          &:last-child {
            border-bottom: none;
          }

          .pose-label {
            font-size: var(--font-size-sm);
            color: var(--color-text-secondary);
            font-weight: var(--font-weight-medium);
          }

          .pose-value {
            font-size: var(--font-size-sm);
            color: var(--color-text-primary);
            font-weight: var(--font-weight-normal);
            text-align: right;
          }
        }
      }

      .calibration-table {
        .table-header,
        .table-row {
          display: grid;
          grid-template-columns: 48px 1fr 48px;
          gap: var(--spacing-2);
          align-items: center;
        }

        .table-header {
          padding: var(--spacing-2) 0;
          border-bottom: 1px solid var(--color-border-secondary);
          font-size: var(--font-size-xs);
          font-weight: var(--font-weight-semibold);
          color: var(--color-text-tertiary);
          text-align: center;
        }

        .table-row {
          padding: var(--spacing-2) 0;
          border-bottom: 1px solid var(--color-border-tertiary);
          font-size: var(--font-size-sm);

          &:last-child {
            border-bottom: none;
          }

          &:hover {
            background: var(--color-bg-secondary);
          }

          .col-id {
            text-align: center;
            font-weight: var(--font-weight-medium);
            color: var(--color-primary);
          }

          .col-coord {
            font-family: var(--font-family-mono);
            font-size: var(--font-size-xs);
            color: var(--color-text-secondary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .col-action {
            text-align: center;

            .delete-btn {
              color: var(--color-danger);
              
              &:hover {
                color: var(--color-danger-dark);
              }
            }
          }
        }
      }

      .action-buttons {
        display: flex;
        gap: var(--spacing-2);
        margin-top: var(--spacing-4);

        .el-button {
          flex: 1;
        }
      }

      .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-6) var(--spacing-4);
        color: var(--color-text-quaternary);

        i {
          font-size: var(--font-size-2xl);
          margin-bottom: var(--spacing-2);
          opacity: 0.5;
        }

        p {
          margin: 0;
          font-size: var(--font-size-sm);
          opacity: 0.8;
        }
      }
    }
    
    // 实时信息样式
    .realtime-info-content {
      padding: var(--spacing-4);
      height: 100%;
      overflow-y: auto;
      @include custom-scrollbar;
      
      .info-section {
        margin-bottom: var(--spacing-5);
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .info-title {
          display: flex;
          align-items: center;
          color: #8a8a8a;
          font-size: var(--font-size-base);
          font-weight: var(--font-weight-semibold);
          border-bottom: 2px solid #B9B9FF;
          margin-bottom: var(--spacing-3);
          padding-bottom: var(--spacing-1);
          
          .title-bar {
            height: 20px;
            width: 5px;
            background-color: #6565FC;
            margin-right: var(--spacing-1);
            border-radius: 4px 4px 0 0;
          }
        }
        
        .info-content {
          color: #5A5A5A;
          font-size: var(--font-size-sm);
          margin-left: var(--spacing-2);
          display: block;
          margin-bottom: var(--spacing-2);
        }
        
        .info-details {
          margin-left: var(--spacing-2);
          
          .info-item {
            color: #5A5A5A;
            font-size: var(--font-size-sm);
            display: block;
            margin-bottom: var(--spacing-2);
            
            .info-label {
              font-weight: var(--font-weight-semibold);
            }
            
            .info-value {
              font-weight: var(--font-weight-normal);
            }
          }
        }
      }
    }
    
    // Tab内容区域滚动优化
    ::v-deep .el-tabs {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    ::v-deep .el-tabs__header {
      margin: 0;
      padding: 0 16px;
      background: #fff;
      border-bottom: 1px solid #e4e7ed;
    }
    
    ::v-deep .el-tabs__content {
      flex: 1;
      overflow: hidden;
      padding: 0;
    }
    
    ::v-deep .el-tab-pane {
      height: 100%;
      overflow-y: auto;
      
      // 自定义滚动条
      &::-webkit-scrollbar {
        width: 6px;
      }
      
      &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
      }
      
      &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
        
        &:hover {
          background: #a8a8a8;
        }
      }
    }
  }

  .resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: $resize-handle-width;
    cursor: col-resize;
    background: transparent;
    z-index: 10;

    &:hover {
      background: var(--color-primary);
      opacity: 0.3;
    }

    &:active {
      background: var(--color-primary);
      opacity: 0.5;
    }
  }

  // 标定页Tab内容区域 - 保留留白（和旧样式一致）
  .nav-tab-content {
    height: 100%;
    padding: var(--spacing-4);
    overflow-y: auto;
  }
}

/* === 导航页 info-card 样式（完全复用标定页卡片风格） === */
.rp--nav {
  .info-card {
    /* 与 .rp--calib .info-card 数值完全一致 */
    background: #fff;
    border-radius: 8px;                        /* 原封不动复制标定页数值 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);    /* 原封不动复制标定页数值 */
    overflow: hidden;
    margin: 0 0 var(--spacing-4);

    .card-header {
      padding: var(--spacing-3) var(--spacing-4);
      border-bottom: 1px solid var(--color-border-secondary);
      background: #f7f9fc;                    /* 标定页 header 的浅灰底 */
      border-radius: 8px 8px 0 0;             /* 顶部圆角与卡片一致 */

      .card-title {
        margin: 0;
        font-size: var(--font-size-base);
        font-weight: 600;                      /* 与标定页标题字重一致 */
        color: var(--color-text-primary);
        display: flex;
        align-items: center;

        /* 移除左侧竖条，与标定页保持一致 */
        /* &::before {
          content: '';
          width: 4px; 
          height: 16px;
          background: var(--color-primary);
          border-radius: 4px;
          margin-right: var(--spacing-2);
        } */
      }
    }

    .card-content {
      padding: 0;                              /* 由行内控制留白 */
    }

    .pose-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--spacing-2) var(--spacing-4);    /* 原封不动复制标定页数值 */
      border-bottom: 1px solid var(--color-border-tertiary); /* 原封不动复制标定页边线色 */

      &:last-child { 
        border-bottom: none; 
      }

      .pose-label {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        font-weight: 500;                      /* 与标定页对齐 */
      }

      .pose-value {
        font-size: var(--font-size-sm);
        color: var(--color-text-primary);
        font-weight: 500;                      /* 标定页是偏"更重"的视觉 */
        text-align: right;
        /* 移除等宽字体，使用常规字体与标定页统一 */
        font-family: inherit;                  /* 使用常规字体，不使用等宽字体 */
        letter-spacing: .2px;                  /* 轻微字距，读数更稳 */
      }
    }
  }
}

/* === 标定页 info-card 样式保持不变 === */
.rp--calib .info-card {
  /* 统一卡片外观: 若有 mixin 就用 @include */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  overflow: hidden;

  .card-header {
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-border-secondary);
    background: var(--color-bg-secondary);
  }

  .card-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
  }

  .card-content {
    padding: 0;            // 内容行的留白用行内的 pose-item 控制
  }

  .pose-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-4);
    border-bottom: 1px solid var(--color-border-tertiary);

    &:last-child {
      border-bottom: none;
    }

    .pose-label {
      font-size: var(--font-size-sm);
      color: var(--color-text-secondary);
      font-weight: var(--font-weight-medium);
    }

    .pose-value {
      font-size: var(--font-size-sm);
      color: var(--color-text-primary);
      font-weight: var(--font-weight-normal);
      text-align: right;
      font-family: var(--font-family-mono);
    }
  }

  /* === Tabs 头部与分割线对齐标定页 === */
  :deep(.el-tabs__header) {
    margin: 0;
    background: #fff;                                        /* 与标定页一致 */
    border-bottom: 1px solid var(--color-border-secondary);  /* 色值同标定页 */
  }

  :deep(.el-tabs__item) {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);

    &.is-active {
      color: var(--color-primary);
      font-weight: 600; /* 与标定页字重一致 */
    }
  }
}

/* === Tabs 容器高度控制（防止内容被再挤） === */
.rp--nav .nav-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.rp--nav :deep(.el-tabs__content) {
  flex: 1;
  height: 0;
  overflow: hidden;
  padding: 0 !important;   // 双保险：即使有人误加全局 padding，也被这里覆盖
}

.rp--nav :deep(.el-tab-pane) {
  height: 100%;
  overflow: auto;
}

.expand-handle {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  width: 36px;
  height: 72px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px 0 0 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: all $transition-duration $animation-ease;
  pointer-events: auto;

  &:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
    transform: translateY(-50%) translateX(-2px);
    box-shadow: var(--shadow-xl);
  }

  i {
    font-size: var(--font-size-lg);
    font-weight: bold;
  }
}

// 暗色主题适配
html.dark {
  .right-panel {
    @include dark-theme-panel-content;
  }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .expand-handle {
    width: 32px;
    height: 60px;
  }
}

/* === 导航页专用样式（命名空间隔离） === */
.rp--nav {
  /* 导航页面展开按钮悬浮效果 */
  .nav-expand-handle:hover {
    background: var(--color-primary, #409eff) !important;
    border-color: var(--color-primary, #409eff) !important;
    transform: translateY(-50%) translateX(-2px) !important;
    
    i {
      color: #ffffff !important;
    }
  }
  
  .nav-right-panel {
    position: fixed;
    right: 16px;
    top: 100px;
    width: 380px;
    height: calc(100vh - 116px);
    z-index: 1000;
    transition: transform 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    
    /* 与标定页对齐 */
    background: #fff;
    border-radius: 8px;                 /* 与 .rp--calib .right-panel 一致 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 与 .rp--calib .right-panel 一致 */
    
    &.is-hidden {
      transform: translateX(calc(100% + 16px));
    }
    
    .nav-panel-header {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    
    .nav-panel-close-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 10;
      padding: 4px;
      font-size: 14px;
      color: #909399;
      
      &:hover {
        color: #409eff;
        background: rgba(64, 158, 255, 0.1);
      }
    }
    
  }
  
  .nav-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
    
    :deep(.el-tabs__header) {
      margin: 0;
      border-bottom: 1px solid var(--color-border-secondary);
      background: var(--color-bg-secondary);
      flex-shrink: 0;
    }
    
    :deep(.el-tabs__nav-wrap) {
      padding: 0 var(--spacing-4);
    }
    
    :deep(.el-tabs__item) {
      padding: 0 var(--spacing-4);
      font-size: var(--font-size-base);
      color: var(--color-text-secondary);
      line-height: 40px;
      
      &.is-active {
        color: var(--color-primary);
        font-weight: var(--font-weight-semibold);
      }
    }
    
    :deep(.el-tabs__content) {
      flex: 1;
      height: 0; // 触发flex子项高度计算
      overflow: hidden;
    }
    
    :deep(.el-tab-pane) {
      height: 100%;
      overflow: auto;
      @include custom-scrollbar;
    }
  }
  
  .nav-tab-content {
    height: 100%;
    padding: 0;              // 关键：保持 0
    overflow-y: auto;
  }
  
  // 实时信息卡片 - 仿照标定页样式
  .nav-info-grid {
    @include info-card-base;
    margin-bottom: 0;
    
    .nav-info-header {
      padding: var(--spacing-3) var(--spacing-4);
      border-bottom: 1px solid var(--color-border-secondary);
      background: var(--color-bg-secondary);
      
      .nav-info-title {
        margin: 0;
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        
        /* 移除左侧蓝色竖条 */
        /* &::before {
          content: '';
          display: inline-block;
          width: 4px;
          height: 16px;
          background: var(--color-primary);
          border-radius: var(--radius-sm);
          margin-right: var(--spacing-2);
          vertical-align: middle;
        } */
      }
    }
    
    .nav-info-content {
      padding: 0;
    }
  }
  
  .nav-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // height: 36px;
    padding: 0 var(--spacing-4);
    border-bottom: 1px solid var(--color-border-tertiary);
    
    &:last-child {
      border-bottom: none;
    }
    
    .label {
      font-size: var(--font-size-sm);
      color: var(--color-text-secondary);
      font-weight: var(--font-weight-normal);
    }
    
    .value {
      font-size: var(--font-size-sm);
      color: var(--color-text-primary);
      text-align: right;
      font-weight: var(--font-weight-medium);
      font-family: var(--font-family-mono);
    }
  }
  
  
  // 列表头部
  .nav-list-header {
    margin-bottom: 16px;
    
    .el-input {
      margin-bottom: 12px;
    }
    
    .nav-header-buttons {
      display: flex;
      gap: 8px;
      
      .el-button {
        flex: 1;
      }
    }
  }
  
  // 列表内容
  .nav-list-content {
    flex: 1;
    overflow-y: auto;
    
    &.nav-list-scrollable {
      max-height: calc(100vh - 400px); // 限制最大高度，确保有滚动
      @include custom-scrollbar;
    }
  }
  
  // 目标点列表 - 参考任务卡片样式
  .nav-waypoint-list {
    .nav-waypoint-item {
      padding: 12px;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      
      &:hover {
        border-color: #409eff;
        background: #f0f9ff;
      }
      
      &.selected {
        border-color: #409eff;
        background: #f0f9ff;
      }
      
      .waypoint-checkbox {
        flex-shrink: 0;
        margin-right: 8px; // 恢复正常边距
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important; // 增加内边距，扩大点击区域
        cursor: pointer !important;
        border-radius: 4px !important;
        transition: background-color 0.2s ease !important;
        position: relative !important; // 确保在其他元素之上
        z-index: 10 !important; // 提高层级
        min-width: 32px !important; // 确保最小宽度
        min-height: 32px !important; // 确保最小高度
        
        // 临时调试边框，可以看到实际点击区域（已移除）
        // border: 1px dashed rgba(64, 158, 255, 0.3) !important;
        
        &:hover {
          background-color: rgba(64, 158, 255, 0.1) !important;
        }
        
        // 确保点击事件能够正确触发
        &:active {
          background-color: rgba(64, 158, 255, 0.2) !important;
          transform: scale(0.98) !important;
        }
        
        // 自定义checkbox样式
        .custom-checkbox {
          width: 16px !important;
          height: 16px !important;
          border: 2px solid #dcdfe6 !important;
          border-radius: 3px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          cursor: pointer !important;
          transition: all 0.2s ease !important;
          background: #fff !important;
          position: relative !important;
          
          &:hover {
            border-color: #409eff !important;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1) !important;
          }
          
          &:active {
            transform: scale(0.95) !important;
          }
          
          // 选中状态
          &.checked {
            background-color: #409eff !important;
            border-color: #409eff !important;
            
            i {
              color: #fff !important;
              font-size: 10px !important;
              font-weight: bold !important;
              line-height: 1 !important;
            }
          }
          
          // 未选中状态的图标隐藏
          &:not(.checked) i {
            display: none !important;
          }
        }
      }
      
      .waypoint-info {
        flex: 1;
        
        .waypoint-main {
          display: flex;
          flex-direction: column;
          gap: 4px;
          
          .waypoint-id {
            font-weight: 500;
            color: #333;
            font-size: 14px;
          }
          
          .waypoint-coords {
            font-size: 12px;
            color: #666;
            font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
          }
        }
      }
      
      .waypoint-actions {
        display: flex !important;
        gap: 4px;
        align-items: baseline !important; // 使用baseline对齐，确保文字基线一致
        flex-shrink: 0;
        
        .action-btn {
          padding: 2px 6px !important;
          font-size: 12px !important;
          height: 24px !important;
          line-height: 20px !important;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          margin: 0 !important;
          border: none !important;
          background: none !important;
          vertical-align: baseline !important;
          
          &.el-button--text {
            color: #409eff !important;
            
            &:hover {
              color: #66b1ff !important;
              background: transparent !important;
            }
          }
        }
        
        // 确保popconfirm容器不影响对齐
        .el-popconfirm__reference {
          display: inline !important;
          vertical-align: baseline !important;
          
          .action-btn {
            color: #409eff !important;
            
            &:hover {
              color: #66b1ff !important;
              background: transparent !important;
            }
          }
        }
        
        // 兜底方案：直接选择所有按钮
        .el-button {
          padding: 2px 6px !important;
          font-size: 12px !important;
          height: 24px !important;
          line-height: 20px !important;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          margin: 0 !important;
          vertical-align: baseline !important;
          
          &.el-button--text {
            color: #409eff !important;
            
            &:hover {
              color: #66b1ff !important;
              background: transparent !important;
            }
          }
        }
      }
    }
  }
  
  // 任务列表
  .nav-task-list {
    .nav-task-item {
      padding: 12px;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      margin-bottom: 8px;
      
      .task-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        .task-name {
          font-weight: 500;
          color: #333;
        }
        
        .task-status {
          display: inline-block;
          padding: 4px 12px;
          border-radius: 16px;
          font-size: 12px;
          font-weight: 600;
          text-align: center;
          min-width: 60px;
          line-height: 1.2;
          border: 1px solid transparent;
          
          &.status-idle {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            color: #0369a1;
            border-color: #bae6fd;
            box-shadow: 0 1px 3px rgba(3, 105, 161, 0.1);
          }
          
          &.status-running {
            background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
            color: #15803d;
            border-color: #bbf7d0;
            box-shadow: 0 1px 3px rgba(21, 128, 61, 0.1);
          }
          
          &.status-paused {
            background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
            color: #d97706;
            border-color: #fed7aa;
            box-shadow: 0 1px 3px rgba(217, 119, 6, 0.1);
          }
          
          &.status-completed {
            background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
            color: #15803d;
            border-color: #bbf7d0;
            box-shadow: 0 1px 3px rgba(21, 128, 61, 0.1);
          }
          
          &.status-failed {
            background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
            color: #dc2626;
            border-color: #fecaca;
            box-shadow: 0 1px 3px rgba(220, 38, 38, 0.1);
          }
          
          // 导航状态样式
          &.status-unknown {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            color: #64748b;
            border-color: #cbd5e1;
            box-shadow: 0 1px 3px rgba(100, 116, 139, 0.1);
          }
          
          &.status-started {
            background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
            color: #15803d;
            border-color: #bbf7d0;
            box-shadow: 0 1px 3px rgba(21, 128, 61, 0.1);
          }
          
          &.status-stopped {
            background: linear-gradient(135deg, #fefbf3 0%, #fef3c7 100%);
            color: #d97706;
            border-color: #fed7aa;
            box-shadow: 0 1px 3px rgba(217, 119, 6, 0.1);
          }
          
          // 急停状态样式
          &.status-normal {
            background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
            color: #15803d;
            border-color: #bbf7d0;
            box-shadow: 0 1px 3px rgba(21, 128, 61, 0.1);
          }
          
          &.status-emergency {
            background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
            color: #dc2626;
            border-color: #fecaca;
            box-shadow: 0 1px 3px rgba(220, 38, 38, 0.1);
            animation: pulse-emergency 2s infinite;
          }
        }
      }
      
      .task-actions {
        display: flex;
        gap: 4px;
        
        .el-button {
          padding: 2px 6px;
        }
      }
    }
  }
  
  // 空状态
  .nav-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #999;
    
    i {
      font-size: 48px;
      margin-bottom: 12px;
      opacity: 0.5;
    }
    
    p {
      margin: 0;
      font-size: 14px;
    }
  }

  // 功能设置列表
  .settings-list {
    padding: 0;
    
    .setting-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .setting-info {
        flex: 1;
        
        .setting-label {
          display: block;
          font-size: 14px;
          font-weight: 500;
          color: #333;
          margin-bottom: 4px;
        }
        
        .setting-desc {
          display: block;
          font-size: 12px;
          color: #666;
          line-height: 1.4;
        }
      }
      
      .el-switch {
        margin-left: 16px;
      }
    }
  }

  // 目标点工具栏样式
  .waypoint-toolbar {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px; // 与右侧卡片风格统一
    padding: 14px; // 进一步减少内边距，给按钮更多空间
    margin-bottom: 16px;
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06); // 与右侧卡片阴影统一
    
    // 2行3列网格布局
    .toolbar-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr); // 确保三列完全等宽
      grid-template-rows: repeat(2, auto); // 两行自适应高度
      gap: 12px; // 统一间距：行距和列距都是12px
      width: 100%;
      
      // 响应式：窄屏时改为单列布局
      @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }
    
    // 网格按钮统一样式
    .grid-btn {
      width: 100% !important; // 统一宽度，填满网格单元
      height: 44px !important; // 统一高度
      min-width: 0 !important; // 防止内容撑开
      max-width: 100% !important; // 防止超出网格
      font-size: 12px !important;
      font-weight: 600 !important;
      padding: 8px 6px !important; // 减小水平内边距，确保文字不会被挤压
      margin: 0 !important; // 清除所有外边距
      border-radius: 8px !important;
      border-width: 1px !important; // 统一边框宽度
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 3px !important; // 稍微减小图标和文字间距
      text-align: center !important;
      transition: all 0.2s ease !important;
      box-sizing: border-box !important;
      flex-shrink: 0 !important; // 防止收缩
      flex-grow: 0 !important; // 防止拉伸
      
      // 图标样式
      i {
        font-size: 15px !important; // 稍微减小图标，保持平衡
        line-height: 1 !important;
        display: block !important; // 使用block确保完全居中
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important; // 水平居中
      }
      
      // 文字样式
      span {
        font-size: 11px !important;
        line-height: 1.2 !important; // 稍微增加行高，提高可读性
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        text-align: center !important;
        display: block !important; // 使用block确保完全居中
        width: 100% !important;
        margin: 0 auto !important; // 水平居中
      }
      
      // 按钮类型样式增强
      &.el-button--primary {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
        border: 1px solid #2563eb !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
        
        &:hover:not(:disabled) {
          background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
          transform: translateY(-1px) !important;
          box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
        }
        
        &:active:not(:disabled) {
          transform: translateY(0) !important;
        }
      }
      
      &.el-button--danger {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
        border: 1px solid #dc2626 !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
        
        &:hover:not(:disabled) {
          background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
          transform: translateY(-1px) !important;
          box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
        }
        
        &:active:not(:disabled) {
          transform: translateY(0) !important;
        }
      }
      
      &.el-button--warning {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
        border: 1px solid #d97706 !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3) !important;
        
        &:hover:not(:disabled) {
          background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
          transform: translateY(-1px) !important;
          box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4) !important;
        }
        
        &:active:not(:disabled) {
          transform: translateY(0) !important;
        }
      }
      
      &.el-button--success {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
        border: 1px solid #059669 !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
        
        &:hover:not(:disabled) {
          background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
          transform: translateY(-1px) !important;
          box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
        }
        
        &:active:not(:disabled) {
          transform: translateY(0) !important;
        }
      }
      
      &.el-button--info {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
        border: 1px solid #2563eb !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
        
        &:hover:not(:disabled) {
          background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
          transform: translateY(-1px) !important;
          box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
        }
        
        &:active:not(:disabled) {
          transform: translateY(0) !important;
        }
      }
      
      // 禁用状态
      &.is-disabled {
        opacity: 0.5 !important;
        cursor: not-allowed !important;
        transform: none !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        
        &:hover {
          transform: none !important;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        }
      }
    }


  // 快捷操作栏样式
  .waypoint-quick-actions {
    position: sticky;
    bottom: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px;
    border-radius: 8px;
    margin-top: 12px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    
    .quick-actions-info {
      font-size: 13px;
      margin-bottom: 8px;
      font-weight: 500;
    }
    
    .quick-actions-buttons {
      display: flex;
      gap: 8px;
      
      .el-button {
        flex: 1;
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.1);
        color: white;
        
        &:hover {
          background: rgba(255, 255, 255, 0.2);
          border-color: rgba(255, 255, 255, 0.5);
        }
        
        &.el-button--warning {
          background: #f56c6c;
          border-color: #f56c6c;
          
          &:hover {
            background: #f78989;
            border-color: #f78989;
          }
        }
        
        &.el-button--success {
          background: #67c23a;
          border-color: #67c23a;
          
          &:hover {
            background: #85ce61;
            border-color: #85ce61;
          }
        }
      }
    }
  }
}

  .empty-hint {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
  }
}

/* === 编辑页专用样式 === */
.rp--edit {
  // 复用导航页的基础面板样式
  .right-panel {
    position: fixed;                        // 与导航页定位方式一致
    right: 16px;                           // 与导航页位置一致
    top: 100px;                            // 与导航页位置一致
    width: 380px;                          // 与导航页宽度一致
    height: calc(100vh - 116px);            // 与导航页高度一致，固定高度
    z-index: 1000;                         // 与导航页层级一致
    transition: transform 0.3s ease;       // 与导航页动画一致
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    &.is-hidden {
      transform: translateX(calc(100% + 16px)); // 与导航页隐藏方式一致
    }
  }

  // 编辑页收起按钮样式（参考导航页）
  .edit-panel-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    padding: 4px;
    font-size: 14px;
    color: #909399;
    
    &:hover {
      color: #409eff;
      background: rgba(64, 158, 255, 0.1);
    }
  }

  // 编辑页展开拉手现在使用与导航页相同的内联样式和事件处理

  .panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  // Tab内容区域滚动优化（复用标定页样式）
  ::v-deep .el-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  ::v-deep .el-tabs__header {
    margin: 0;
    padding: 0 16px;
    background: #fff;
    border-bottom: none; // 移除边框，与导航页保持一致
  }
  
  ::v-deep .el-tabs__content {
    flex: 1;
    overflow: hidden;
    padding: 0;
  }
  
  ::v-deep .el-tab-pane {
    height: 100%;
    overflow-y: auto;
    
    // 自定义滚动条
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 3px;
      
      &:hover {
        background: #a8a8a8;
      }
    }
  }
  
  // 编辑模式实时信息样式 - 复用导航页样式
  .nav-tab-content {
    height: 100%;
    padding: var(--spacing-4);   // 添加左右留白，与导航页保持一致
    overflow-y: auto;
  }
  
  // 实时信息卡片 - 仿照标定页样式
  .nav-info-grid {
    @include info-card-base;
    margin-bottom: 0;
    
    .nav-info-header {
      padding: var(--spacing-3) var(--spacing-4);
      border-bottom: 1px solid var(--color-border-secondary);
      background: var(--color-bg-secondary);
      
      .nav-info-title {
        margin: 0;
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
      }
    }
    
    .nav-info-content {
      padding: 0;
    }
  }
  
  .nav-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
    padding: 0 var(--spacing-4);
    border-bottom: 1px solid var(--color-border-tertiary);
    
    &:last-child {
      border-bottom: none;
    }
    
    .label {
      font-size: var(--font-size-sm);
      color: var(--color-text-secondary);
      font-weight: var(--font-weight-normal);
    }
    
    .value {
      font-size: var(--font-size-sm);
      color: var(--color-text-primary);
      text-align: right;
      font-weight: var(--font-weight-medium);
      font-family: var(--font-family-mono);
    }
  }
  
  // 元素管理内容
  .edit-elements-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    
    .element-filter {
      margin-bottom: var(--spacing-3);
      
      :deep(.el-tabs__header) {
        margin: 0;
        background: var(--color-bg-secondary);
        border-bottom: none; // 移除多余的边框，避免与主标签页边框重复
      }
    }
    
    .element-search {
      margin-bottom: var(--spacing-3);
      padding: 0 var(--spacing-4);
    }
    
    .element-list {
      flex: 1;
      overflow-y: auto;
      padding: 0 var(--spacing-4);
      @include custom-scrollbar;
      
      .element-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-3);
        border: 1px solid var(--color-border-tertiary);
        border-radius: var(--radius-md);
        margin-bottom: var(--spacing-2);
        cursor: pointer;
        transition: all 0.2s ease;
        
        &:hover {
          border-color: var(--color-primary);
          background: var(--color-bg-secondary);
        }
        
        &.selected {
          border-color: var(--color-primary);
          background: var(--color-primary-light);
        }
        
        .element-info {
          flex: 1;
          
          .element-id {
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-primary);
            font-size: var(--font-size-sm);
            margin-bottom: var(--spacing-1);
          }
          
          .element-name {
            color: var(--color-text-secondary);
            font-size: var(--font-size-xs);
          }
        }
        
        .element-actions {
          display: flex;
          gap: var(--spacing-1);
          
          .el-button {
            padding: 2px 4px;
            font-size: var(--font-size-xs);
            height: 24px;
            line-height: 20px;
            
            &.el-button--text {
              color: var(--color-primary);
              
              &:hover {
                color: var(--color-primary-light);
                background: transparent;
              }
            }
          }
        }
      }
      
      .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-8) var(--spacing-4);
        color: var(--color-text-quaternary);
        
        i {
          font-size: var(--font-size-2xl);
          margin-bottom: var(--spacing-2);
          opacity: 0.5;
        }
        
        p {
          margin: 0;
          font-size: var(--font-size-sm);
          opacity: 0.8;
        }
      }
    }
  }
  
  // 路网操作内容
  .edit-network-content {
    height: 100%;
    overflow-y: auto;
    padding: var(--spacing-4);
    @include custom-scrollbar;
    
    .network-operations {
      .operation-section {
        margin-bottom: var(--spacing-6);
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .section-title {
          margin: 0 0 var(--spacing-3) 0;
          font-size: var(--font-size-base);
          font-weight: var(--font-weight-semibold);
          color: var(--color-text-primary);
        }
        
        .import-buttons {
          display: flex;
          flex-direction: column;
          gap: var(--spacing-2);
        }
        
        .operation-tips {
          background: var(--color-bg-secondary);
          padding: var(--spacing-4);
          border-radius: var(--radius-md);
          
          .tip-item {
            margin: 0 0 var(--spacing-3) 0;
            font-size: var(--font-size-sm);
            line-height: 1.6;
            color: var(--color-text-secondary);
            
            &:last-child {
              margin-bottom: 0;
            }
            
            strong {
              color: var(--color-text-primary);
              font-weight: var(--font-weight-semibold);
              margin-right: var(--spacing-1);
            }
          }
        }
        
        .operation-buttons {
          display: flex;
          flex-direction: column;
          gap: var(--spacing-2);
          
          .el-button {
            margin: 0;
            transition: all 0.2s ease;
            
            &.is-block {
              width: 100%;
            }
            
            // 确保按钮失去焦点后恢复正常状态
            &:not(:hover):not(:active) {
              background-color: var(--color-bg-button, #ffffff);
              border-color: var(--color-border-primary, #dcdfe6);
              color: var(--color-text-primary, #606266);
              
              &.el-button--primary {
                background-color: var(--color-primary, #409eff);
                border-color: var(--color-primary, #409eff);
                color: #ffffff;
              }
            }
            
            // 移除焦点时的outline
            &:focus {
              outline: none;
            }
            
            // 点击后立即失去焦点的效果
            &:active {
              transform: translateY(1px);
            }
          }
        }
      }
    }
  }
}

// 急停状态脉冲动画
@keyframes pulse-emergency {
  0% {
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.1), 0 0 0 0 rgba(220, 38, 38, 0.4);
  }
  50% {
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.2), 0 0 0 6px rgba(220, 38, 38, 0.1);
  }
  100% {
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.1), 0 0 0 0 rgba(220, 38, 38, 0);
  }
}
</style>

