<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': !modelValue && (mode === 'edit' || mode === 'nav'),
          'panel-collapsed': !modelValue && 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="small"
            class="collapse-btn"
            :icon="modelValue ? 'ArrowRight' : 'ArrowLeft'"
          />
        </div>

        <!-- 面板内容 -->
        <div class="panel-content"> 
          <!-- 标签页模式 -->
          <template v-if="tabs.length > 0">
            <el-tabs v-model="activeTab" @tab-click="handleTabClick" stretch style="padding: 0 16px !important;">
              <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="RefreshRight"
                          @click.prevent="$emit('emergency-stop-release')"
                          style="width: 100%;"
                        >
                          解除急停
                        </el-button>
                      </div>
                    </div>

                    <!-- 当前任务操作 -->
                    <div v-if="mode === 'nav' && hasActiveNavigation" 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="getCurrentNavigationStatusClass()">
                            {{ getCurrentNavigationStatusText() }}
                          </span>
                        </div>
                        <div v-if="currentNavigationTask && currentNavigationTask.waypoint" class="nav-info-item">
                          <span class="label">目标点:</span>
                          <span class="value">{{ currentNavigationTask.waypoint.name || `点${currentNavigationTask.waypoint.id}` }}</span>
                        </div>
                      </div>
                      <div style="padding: 16px; border-top: 1px solid #f0f0f0;">
                        <div style="display: flex; gap: 8px;">
                          <!-- 暂停/恢复按钮 -->
                          <el-button
                            :type="navigationStatus === 'paused' ? 'success' : 'warning'"
                            native-type="button"
                            size="small"
                            :icon="navigationStatus === 'paused' ? VideoPlay : VideoPause"
                            @click.prevent="handleNavigationPauseResume"
                            style="flex: 1;"
                            :disabled="navigationStatus === 'planning' || navigationStatus === 'idle'"
                          >
                            {{ navigationStatus === 'paused' ? '恢复' : '暂停' }}
                          </el-button>

                          <!-- 停止按钮 -->
                          <el-button
                            type="danger"
                            native-type="button"
                            size="small"
                            :icon="SwitchButton"
                            @click.prevent="handleNavigationStop"
                            style="flex: 1;"
                            :disabled="navigationStatus === 'idle'"
                          >
                            停止
                          </el-button>
                        </div>
                      </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="CirclePlus"
                          @click.prevent="$emit('add-current-point')"
                          style="width: 100%;"
                        >
                          添加当前点
                        </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="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="small" type="primary" link @click.stop.prevent="$emit('element-edit', element)">编辑</el-button>
                          <el-button size="small" type="primary" link @click.stop.prevent="$emit('element-locate', element)">定位</el-button>
                          <el-button
                            size="small"
                            type="danger"
                            link
                            @click.stop.prevent="$emit('element-remove', element)"
                          >
                            删除
                          </el-button>
                        </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="Download"
                            @click="handleNetworkOperation('export', $event)"
                            style="width: 100%;"
                          >
                            导出路网
                          </el-button>
                          <el-button
                            size="small"
                            :icon="Upload"
                            @click="handleNetworkOperation('import', $event)"
                            style="width: 100%;"
                          >
                            导入路网
                          </el-button>
                          <el-button
                            size="small"
                            :icon="Plus"
                            @click="handleNetworkOperation('merge', $event)"
                            style="width: 100%;"
                          >
                            合并导入路网
                          </el-button>
                          <el-button
                            size="small"
                            :icon="Refresh"
                            @click="handleNetworkOperation('incremental', $event)"
                            style="width: 100%;"
                          >
                            增量导入路网
                          </el-button>
                          <el-button
                            size="small"
                            :icon="RefreshLeft"
                            @click="handleNetworkOperation('overwrite', $event)"
                            style="width: 100%;"
                          >
                            覆盖导入路网
                          </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="small"
              :icon="ArrowRight"
              @click.prevent="$emit('update:modelValue', 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="small"
                          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"
                            >
                              <template #reference>
                                <el-button
                                  type="primary"
                                  link
                                  :icon="Delete"
                                  class="delete-btn"
                                />
                              </template>
                            </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="Plus"
                        @click="addCalibration"
                        :disabled="!canAddCalibration"
                      >
                        添加标定点
                      </el-button>
                      <el-button
                        size="small"
                        :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 && modelValue"
        ></div>
      </div>

      <!-- 展开拉手 (收起时显示) -->
      <div
        v-if="overlay && !modelValue"
        class="expand-handle edit-expand-handle"
        @click="$emit('update:modelValue', true)"
        title="展开面板"
        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;"
      >
        <el-icon :size="16" style="color: var(--color-text-primary, #303133); font-weight: bold;">
          <ArrowLeft />
        </el-icon>
      </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 battery-item">
                      <span class="label">电池电量:</span>
                      <div class="battery-display">
                        <span class="value battery-percentage" :class="getBatteryClass()">
                          {{ realtimeInfo.batteryLevel || '0%' }}
                        </span>
                        <span v-if="realtimeInfo.batteryDetails && realtimeInfo.batteryDetails.charging" class="charging-icon">⚡</span>
                      </div>
                    </div>
                    <!-- 电池详细信息（可折叠展开） -->
                    <template v-if="realtimeInfo.batteryDetails && realtimeInfo.batteryDetails.capacity">
                      <div class="nav-info-item battery-detail">
                        <span class="label">电池温度:</span>
                        <span class="value">{{ realtimeInfo.batteryDetails.temperature }}°C</span>
                      </div>
                      <div class="nav-info-item battery-detail">
                        <span class="label">电池电压:</span>
                        <span class="value">{{ realtimeInfo.batteryDetails.voltage }}V</span>
                      </div>
                      <div class="nav-info-item battery-detail">
                        <span class="label">电池电流:</span>
                        <span class="value">{{ realtimeInfo.batteryDetails.current }}A</span>
                      </div>
                      <div class="nav-info-item battery-detail">
                        <span class="label">充电状态:</span>
                        <span class="value" :class="realtimeInfo.batteryDetails.charging ? 'charging-text' : ''">
                          {{ realtimeInfo.batteryDetails.charging ? '充电中' : '未充电' }}
                        </span>
                      </div>
                    </template>
                    <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="(val) => onSettingChange('pointCloud', val)"
                    />
                  </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="(val) => onSettingChange('baseMap', val)"
                    />
                  </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="(val) => onSettingChange('pointId', val)"
                    />
                  </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="(val) => onSettingChange('follow', val)"
                    />
                  </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="(val) => onSettingChange('network', val)"
                    />
                  </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">
                      <el-icon><ArrowUp /></el-icon>
                      <span>上移</span>
                    </el-button>
                    <el-button type="primary" native-type="button" size="small" :disabled="waypointSingle" @click.prevent="$emit('wp-move-down')" class="grid-btn">
                      <el-icon><ArrowDown /></el-icon>
                      <span>下移</span>
                    </el-button>
                    <el-popconfirm title="确定批量删除选中的目标点？" @confirm="$emit('wp-batch-remove')">
                      <template #reference>
                        <el-button type="danger" native-type="button" size="small" :disabled="waypointMultiple" class="grid-btn">
                          <el-icon><Delete /></el-icon>
                          <span>批量删除</span>
                        </el-button>
                      </template>
                    </el-popconfirm>

                    <!-- 第二行：立即前往、生成任务、地图选点 -->
                    <el-button type="warning" native-type="button" size="small" :disabled="waypointSingle" @click.prevent="$emit('wp-goto')" class="grid-btn">
                      <el-icon><Position /></el-icon>
                      <span>立即前往</span>
                    </el-button>
                    <el-button type="success" native-type="button" size="small" :disabled="waypointMultiple" @click.prevent="$emit('wp-create-task')" class="grid-btn">
                      <el-icon><Plus /></el-icon>
                      <span>生成任务</span>
                    </el-button>
                    <el-button
                      :type="mapSelectMode ? 'danger' : 'info'"
                      native-type="button"
                      size="small"
                      @click.prevent="toggleMapSelectMode"
                      class="grid-btn"
                    >
                      <el-icon><component :is="mapSelectMode ? 'Close' : 'Location'" /></el-icon>
                      <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)"
                        >
                          <el-icon v-if="selectedWaypoints.some(w => w.id === waypoint.id)" :size="10"><Check /></el-icon>
                        </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="small" type="primary" link @click.stop.prevent="$emit('wp-edit', waypoint)" class="action-btn">编辑</el-button>
                        <el-popconfirm title="删除当前目标点？" @confirm="$emit('wp-remove', waypoint)">
                          <template #reference>
                            <el-button size="small" type="danger" link @click.stop.prevent class="action-btn">删除</el-button>
                          </template>
                        </el-popconfirm>
                      </div>
                    </div>
                  </div>

                  <!-- 空状态 -->
                  <div v-else class="nav-empty-state">
                    <el-icon :size="48"><Location /></el-icon>
                    <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 v-if="hasActiveNavigation" 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="getCurrentNavigationStatusClass()">
                        {{ getCurrentNavigationStatusText() }}
                      </span>
                    </div>
                    <div v-if="currentNavigationTask && currentNavigationTask.waypoint" class="nav-info-item">
                      <span class="label">目标点:</span>
                      <span class="value">{{ currentNavigationTask.waypoint.name || `点${currentNavigationTask.waypoint.id}` }}</span>
                    </div>
                  </div>
                  <div style="padding: 16px; border-top: 1px solid #f0f0f0;">
                    <div style="display: flex; gap: 8px;">
                      <!-- 暂停/恢复按钮 -->
                      <el-button
                        :type="navigationStatus === 'paused' ? 'success' : 'warning'"
                        native-type="button"
                        size="small"
                        :icon="navigationStatus === 'paused' ? VideoPlay : VideoPause"
                        @click.prevent="handleNavigationPauseResume"
                        style="flex: 1;"
                        :disabled="navigationStatus === 'planning' || navigationStatus === 'idle'"
                      >
                        {{ navigationStatus === 'paused' ? '恢复' : '暂停' }}
                      </el-button>

                      <!-- 停止按钮 -->
                      <el-button
                        type="danger"
                        native-type="button"
                        size="small"
                        :icon="SwitchButton"
                        @click.prevent="handleNavigationStop"
                        style="flex: 1;"
                        :disabled="navigationStatus === 'idle'"
                      >
                        停止
                      </el-button>
                    </div>
                  </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="small" type="primary" link @click.prevent="$emit('task-view', task)">查看</el-button>
                        <el-button
                          v-if="task.status !== 'running' && task.status !== 'paused'"
                          size="small"
                          type="primary"
                          link
                          @click.prevent="$emit('task-edit', task)"
                        >
                          编辑
                        </el-button>
                        <el-button
                          v-if="task.status !== 'running' && task.status !== 'paused'"
                          size="small"
                          type="success"
                          link
                          @click.prevent="$emit('task-start', task)"
                        >
                          开始
                        </el-button>
                        <el-button
                          v-if="task.status === 'running'"
                          size="small"
                          type="warning"
                          link
                          @click.prevent="$emit('task-pause', task)"
                        >
                          暂停
                        </el-button>
                        <el-button
                          v-if="task.status === 'paused'"
                          size="small"
                          type="success"
                          link
                          @click.prevent="$emit('task-resume', task)"
                        >
                          继续
                        </el-button>
                        <el-button
                          v-if="task.status === 'running' || task.status === 'paused'"
                          size="small"
                          type="danger"
                          link
                          @click.prevent="$emit('task-stop', task)"
                        >
                          停止
                        </el-button>
                        <el-button
                          v-if="task.status !== 'running' && task.status !== 'paused'"
                          size="small"
                          type="danger"
                          link
                          @click.prevent="$emit('task-remove', task)"
                        >
                          删除
                        </el-button>
                      </div>
                    </div>
                  </div>
                  <div v-else class="nav-empty-state">
                    <el-icon :size="48"><Tickets /></el-icon>
                    <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="small"
            :icon="ArrowRight"
            @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="展开面板"
        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;"
      >
        <el-icon :size="16" style="color: var(--color-text-primary, #303133); font-weight: bold;">
          <ArrowLeft />
        </el-icon>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  ArrowRight,
  ArrowLeft,
  ArrowUp,
  ArrowDown,
  RefreshRight,
  RefreshLeft,
  Refresh,
  VideoPlay,
  VideoPause,
  SwitchButton,
  CirclePlus,
  Search,
  Download,
  Upload,
  Plus,
  Delete,
  Check,
  Location,
  Position,
  Close,
  Tickets
} from '@element-plus/icons-vue'

// Props 定义
const props = defineProps({
  // 面板模式 - 区分导航/标定/编辑
  mode: {
    type: String,
    default: 'calib', // 'calib' 或 'nav' 或 'edit'
    validator: (value) => ['calib', 'nav', 'edit'].includes(value)
  },
  // 面板类型 - 新增
  panelType: {
    type: String,
    default: 'calibration'
  },
  // v-model 支持
  modelValue: {
    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'
  },
  // 当前导航任务
  currentNavigationTask: {
    type: Object,
    default: () => null
  },
  // 导航状态
  navigationStatus: {
    type: String,
    default: 'idle' // idle, planning, navigating, paused, arrived, failed
  },
  // 是否正在导航
  isNavigating: {
    type: Boolean,
    default: false
  },

  // === 编辑页专用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 }
    ]
  }
})

// Emits 定义
const emit = defineEmits([
  'input',
  'update:modelValue',
  'update:visible',
  'tab-change',
  'panel-resize',
  'add-calibration',
  'remove-calibration',
  'execute-calibration',
  'setting-change',
  'wp-selection-change',
  'map-select-mode-change',
  'wp-move-up',
  'wp-move-down',
  'wp-batch-remove',
  'wp-goto',
  'wp-create-task',
  'wp-edit',
  'wp-remove',
  'wp-add',
  'element-edit',
  'element-locate',
  'element-remove',
  'element-select',
  'element-type-change',
  'element-search',
  'network-export',
  'network-import',
  'page-change',
  'emergency-stop-release',
  'add-current-point',
  'task-view',
  'task-edit',
  'task-start',
  'task-pause',
  'task-resume',
  'task-stop',
  'task-remove',
  'navigation-pause',
  'navigation-resume',
  'navigation-stop'
])

// 响应式数据
const activeTab = ref('')
const navActiveTab = ref('realtime') // 导航页默认激活的tab
const isResizing = ref(false)
const startX = ref(0)
const startWidth = ref(0)
// 目标点相关状态
const selectedWaypoints = ref([]) // 选中的目标点
const mapSelectMode = ref(false) // 地图选点模式
// 编辑页相关状态
const activeElementType = ref('point') // 当前选中的元素类型
const elementSearchKeyword = ref('') // 元素搜索关键词

// 计算属性
const canAddCalibration = computed(() => {
  return props.laserPositionData.x !== 0 || props.laserPositionData.y !== 0
})

// 目标点操作按钮状态
const waypointSingle = computed(() => {
  return selectedWaypoints.value.length !== 1
})
const waypointMultiple = computed(() => {
  return selectedWaypoints.value.length === 0
})

// 是否有活动的导航任务
const hasActiveNavigation = computed(() => {
  return props.currentNavigationTask !== null &&
    props.navigationStatus !== 'idle' &&
    props.navigationStatus !== 'arrived' &&
    props.navigationStatus !== 'failed'
})

// 处理Tab配置，支持字符串数组和对象数组
const processedTabs = computed(() => {
  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 props.tabs.map(tab => {
    if (typeof tab === 'string') {
      return tabMap[tab] || { key: tab, label: tab }
    }
    return tab
  })
})

// 编辑模式相关计算属性
const filteredElements = computed(() => {
  if (!props.elementList || props.elementList.length === 0) {
    return []
  }

  let filtered = props.elementList

  // 按类型筛选
  if (activeElementType.value !== 'all') {
    filtered = filtered.filter(element => {
      if (activeElementType.value === 'point') return element.id.startsWith('p')
      if (activeElementType.value === 'line') return element.id.startsWith('l')
      if (activeElementType.value === 'curve') return element.id.startsWith('b')
      if (activeElementType.value === 'polygon') return element.id.startsWith('s')
      return true
    })
  }

  // 按关键词搜索
  if (elementSearchKeyword.value) {
    const keyword = elementSearchKeyword.value.toLowerCase()
    filtered = filtered.filter(element =>
      element.id.toLowerCase().includes(keyword) ||
      (element.name && element.name.toLowerCase().includes(keyword))
    )
  }

  return filtered
})

// 监听目标点列表变化，自动清理无效选择
watch(() => props.waypointList, (newList) => {
  if (selectedWaypoints.value.length > 0) {
    // 过滤出仍然存在的选中项
    const validSelections = selectedWaypoints.value.filter(selected =>
      newList.some(waypoint => waypoint.id === selected.id)
    )

    // 如果选择发生了变化，更新选择状态
    if (validSelections.length !== selectedWaypoints.value.length) {
      selectedWaypoints.value = validSelections
      emit('wp-selection-change', selectedWaypoints.value)
    }
  }
}, { deep: true })

// 初始化标签页
onMounted(() => {
  if (props.tabs.length > 0) {
    const firstTab = processedTabs.value[0]
    activeTab.value = props.initialTab || (firstTab ? firstTab.key : '')
  }

  // 添加全局鼠标事件监听
  document.addEventListener('mousemove', handleResize)
  document.addEventListener('mouseup', stopResize)
})

// 清理事件监听
onBeforeUnmount(() => {
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
})

// 方法
// 切换面板展开/收起
const togglePanel = () => {
  emit('update:modelValue', !props.modelValue)
}

// 展开面板
const expandPanel = () => {
  emit('update:modelValue', true)
}

// 标签页切换
const handleTabClick = (tab) => {
  activeTab.value = tab.props.name
  emit('tab-change', tab.props.name)
}

// 开始拖拽调整大小
const startResize = (event) => {
  if (props.isDrawerMode || !props.resizable) return

  isResizing.value = true
  startX.value = event.clientX
  startWidth.value = props.width
  document.body.style.cursor = 'col-resize'
  document.body.style.userSelect = 'none'
}

// 处理拖拽调整大小
const handleResize = (event) => {
  if (!isResizing.value || props.isDrawerMode) return

  const diff = startX.value - event.clientX
  const newWidth = Math.max(320, Math.min(420, startWidth.value + diff))

  if (newWidth !== props.width) {
    emit('panel-resize', newWidth)
  }
}

// 停止拖拽调整大小
const stopResize = () => {
  if (isResizing.value) {
    isResizing.value = false
    document.body.style.cursor = ''
    document.body.style.userSelect = ''
  }
}

// === 兼容原标定页的方法 ===
const getGnssStatusType = (status) => {
  if (status === '0/0') return 'info'
  if (status.includes('锁定')) return 'success'
  if (status.includes('异常')) return 'warning'
  return 'info'
}

const addCalibration = () => {
  emit('add-calibration')
}

const removeCalibration = (id) => {
  emit('remove-calibration', id)
}

const executeCalibration = () => {
  emit('execute-calibration')
}

// === 导航页专用方法 ===
const getTaskStatusText = (status) => {
  const statusMap = {
    'idle': '空闲',
    'running': '运行中',
    'paused': '暂停',
    'completed': '已完成',
    'failed': '失败'
  }
  return statusMap[status] || '未知'
}

// 获取电池状态样式类
const getBatteryClass = () => {
  if (!props.realtimeInfo.batteryDetails) return ''
  const capacity = props.realtimeInfo.batteryDetails.capacity || 0
  if (props.realtimeInfo.batteryDetails.charging) return 'battery-charging'
  if (capacity <= 0.2) return 'battery-low'
  if (capacity <= 0.5) return 'battery-medium'
  return 'battery-normal'
}

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

// === 目标点相关方法 ===

// 目标点表格选择变更
const onWaypointSelectionChange = (selection) => {
  selectedWaypoints.value = selection
  emit('wp-selection-change', selection)
}

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

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

// 自定义复选框点击处理
const handleCheckboxClick = (waypoint) => {
  console.log('Custom checkbox clicked for waypoint:', waypoint.id)
  const isSelected = selectedWaypoints.value.some(w => w.id === waypoint.id)
  console.log('Current selection state:', isSelected, 'Toggling to:', !isSelected)

  // 直接处理选择状态变更
  if (isSelected) {
    // 取消选择
    selectedWaypoints.value = selectedWaypoints.value.filter(w => w.id !== waypoint.id)
    console.log('Removed waypoint from selection')
  } else {
    // 添加选择
    selectedWaypoints.value.push(waypoint)
    console.log('Added waypoint to selection')
  }

  // 通知父组件
  emit('wp-selection-change', selectedWaypoints.value)
  console.log('Final selection:', selectedWaypoints.value.map(w => w.id))
}

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

// 获取路径类型文本
const getWaypointTypeText = (type) => {
  const typeMap = {
    0: '自由路径',
    1: '路网路径'
  }
  return typeMap[type] || '未知'
}

// === 编辑页专用方法 ===

// 处理元素类型切换
const handleElementTypeChange = (tab) => {
  activeElementType.value = tab.props.name
  emit('element-type-change', tab.props.name)
}

// 处理元素搜索（防抖）
let searchTimer = null
const handleElementSearch = () => {
  if (searchTimer) {
    clearTimeout(searchTimer)
  }
  searchTimer = setTimeout(() => {
    emit('element-search', elementSearchKeyword.value)
  }, 300)
}

// 处理元素选择
const handleElementSelect = (element) => {
  emit('element-select', element)
}

// 处理路网操作
const 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

  ElMessageBox.confirm(config.message, config.title, {
    confirmButtonText: config.confirmText,
    cancelButtonText: '取消',
    type: operation === 'overwrite' ? 'warning' : 'info'
  }).then(() => {
    // 发射事件给父组件处理具体逻辑
    if (operation === 'export') {
      emit('network-export')
    } else {
      emit('network-import', operation === 'import' ? 'import' : operation === 'overwrite' ? 'replace' : operation)
    }

    // 模拟异步操作，实际应该在父组件中处理
    setTimeout(() => {
      ElMessage.success(config.successMsg)
      // 移除按钮焦点
      if (button) {
        button.blur()
      }
    }, 500)
  }).catch(() => {
    ElMessage.info('已取消操作')
    // 取消时也要移除按钮焦点，避免保持激活状态
    if (button) {
      button.blur()
    }
  })
}

// 处理分页变化
const handlePageChange = (page) => {
  emit('page-change', page)
}

// 获取当前类型标签
const getCurrentTypeLabel = () => {
  const typeMap = {
    'point': '点',
    'line': '线',
    'curve': '弧',
    'polygon': '面'
  }
  return typeMap[activeElementType.value] || ''
}

// === 导航和急停状态相关方法 ===

// 获取导航状态显示文本
const getNavigationStatusText = (status) => {
  const statusMap = {
    'unknown': '未知',
    'started': '已启动',
    'stopped': '已停止'
  }
  return statusMap[status] || '未知'
}

// 获取导航状态样式类
const getNavigationStatusClass = (status) => {
  const classMap = {
    'unknown': 'status-unknown',
    'started': 'status-started',
    'stopped': 'status-stopped'
  }
  return classMap[status] || 'status-unknown'
}

// 获取急停状态样式类
const getEmergencyStopClass = (enabled) => {
  return enabled ? 'status-emergency' : 'status-normal'
}

// === 当前导航任务相关方法 ===

// 获取当前导航状态文本
const getCurrentNavigationStatusText = () => {
  const statusMap = {
    'idle': '空闲',
    'planning': '规划中',
    'navigating': '导航中',
    'paused': '已暂停',
    'arrived': '已到达',
    'failed': '失败'
  }
  return statusMap[props.navigationStatus] || '未知'
}

// 获取当前导航状态样式类
const getCurrentNavigationStatusClass = () => {
  const classMap = {
    'idle': 'status-idle',
    'planning': 'status-planning',
    'navigating': 'status-navigating',
    'paused': 'status-paused',
    'arrived': 'status-arrived',
    'failed': 'status-failed'
  }
  return classMap[props.navigationStatus] || ''
}

// 处理导航暂停/恢复
const handleNavigationPauseResume = () => {
  if (props.navigationStatus === 'paused') {
    emit('navigation-resume')
  } else if (props.navigationStatus === 'navigating') {
    emit('navigation-pause')
  }
}

// 处理导航停止
const handleNavigationStop = () => {
  emit('navigation-stop')
}
</script>

<style>
@import './_map-shared.css';

/* 容器 */
.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;
}

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

/* === 标定页样式 === */
.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;
}

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

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

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

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

.rp--calib .collapse-btn {
  color: #909399;
  padding: 4px;
}

.rp--calib .collapse-btn:hover {
  color: #409eff;
  background-color: #f0f9ff;
}

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

.rp--calib .default-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow: hidden;
}

.rp--calib .tab-placeholder {
  padding: 16px;
  text-align: center;
  color: #64748B;
}

.rp--calib .info-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  margin-bottom: 16px;
}

.rp--calib .info-card:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.rp--calib .info-card:last-child .card-content {
  flex: 1;
  overflow-y: auto;
}

.rp--calib .pose-section {
  margin-bottom: 16px;
}

.rp--calib .pose-section:last-child {
  margin-bottom: 0;
}

.rp--calib .section-title {
  font-size: 13px;
  font-weight: 500;
  color: #64748B;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(2, 6, 23, 0.04);
}

.rp--calib .pose-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(2, 6, 23, 0.04);
}

.rp--calib .pose-item:last-child {
  border-bottom: none;
}

.rp--calib .pose-label {
  font-size: 13px;
  color: #475569;
  font-weight: 500;
}

.rp--calib .pose-value {
  font-size: 13px;
  color: #0F172A;
  font-weight: 400;
  text-align: right;
}

.rp--calib .calibration-table .table-header,
.rp--calib .calibration-table .table-row {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  gap: 8px;
  align-items: center;
}

.rp--calib .calibration-table .table-header {
  padding: 8px 0;
  border-bottom: 1px solid rgba(2, 6, 23, 0.06);
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  text-align: center;
}

.rp--calib .calibration-table .table-row {
  padding: 8px 0;
  border-bottom: 1px solid rgba(2, 6, 23, 0.04);
  font-size: 13px;
}

.rp--calib .calibration-table .table-row:last-child {
  border-bottom: none;
}

.rp--calib .calibration-table .table-row:hover {
  background: #F8FAFC;
}

.rp--calib .col-id {
  text-align: center;
  font-weight: 500;
  color: #0EA5E9;
}

.rp--calib .col-coord {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 12px;
  color: #475569;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp--calib .col-action {
  text-align: center;
}

.rp--calib .delete-btn {
  color: #EF4444;
}

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

.rp--calib .action-buttons {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.rp--calib .action-buttons .el-button {
  flex: 1;
}

.rp--calib .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  color: #94A3B8;
}

.rp--calib .empty-state i {
  font-size: 20px;
  margin-bottom: 8px;
  opacity: 0.5;
}

.rp--calib .empty-state p {
  margin: 0;
  font-size: 13px;
  opacity: 0.8;
}

.rp--calib .realtime-info-content {
  padding: 16px;
  height: 100%;
  overflow-y: auto;
}

.rp--calib .info-section {
  margin-bottom: 20px;
}

.rp--calib .info-section:last-child {
  margin-bottom: 0;
}

.rp--calib .info-title {
  display: flex;
  align-items: center;
  color: #8a8a8a;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 2px solid #B9B9FF;
  margin-bottom: 12px;
  padding-bottom: 4px;
}

.rp--calib .title-bar {
  height: 20px;
  width: 5px;
  background-color: #6565FC;
  margin-right: 4px;
  border-radius: 4px 4px 0 0;
}

.rp--calib .info-content {
  color: #5A5A5A;
  font-size: 13px;
  margin-left: 8px;
  display: block;
  margin-bottom: 8px;
}

.rp--calib .info-details {
  margin-left: 8px;
}

.rp--calib .info-item {
  color: #5A5A5A;
  font-size: 13px;
  display: block;
  margin-bottom: 8px;
}

.rp--calib .info-label {
  font-weight: 600;
}

.rp--calib .info-value {
  font-weight: 400;
}

.rp--calib :deep(.el-tabs) {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.rp--calib ::v-deep(.el-tabs__header) {
  margin: 0;
  padding: 0 16px !important;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
}

.rp--calib :deep(.el-tabs__content) {
  flex: 1;
  overflow: hidden;
  padding: 0;
}

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

.rp--calib :deep(.el-tab-pane)::-webkit-scrollbar {
  width: 6px;
}

.rp--calib :deep(.el-tab-pane)::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.rp--calib :deep(.el-tab-pane)::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.rp--calib :deep(.el-tab-pane)::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.rp--calib .resize-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  background: transparent;
  z-index: 10;
}

.rp--calib .resize-handle:hover {
  background: #0EA5E9;
  opacity: 0.3;
}

.rp--calib .resize-handle:active {
  background: #0EA5E9;
  opacity: 0.5;
}

.rp--calib .nav-tab-content {
  height: 100%;
  padding: 16px;
  overflow-y: auto;
}

/* 暗色主题适配 */
html.dark .right-panel {
  background: #F1F5F9;
}

html.dark .panel-header {
  background: var(--color-bg-quaternary);
}

html.dark .info-card {
  background: #F1F5F9;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
}

html.dark .info-card .card-header {
  background: var(--color-bg-quaternary);
}

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

/* === 导航页 info-card 样式 === */
.rp--nav .info-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  margin: 0 0 16px;
}

.rp--nav .card-header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(2, 6, 23, 0.06);
  background: #f7f9fc;
  border-radius: 8px 8px 0 0;
}

.rp--nav .card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
  display: flex;
  align-items: center;
}

.rp--nav .card-content {
  padding: 0;
}

.rp--nav .pose-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(2, 6, 23, 0.04);
}

.rp--nav .pose-item:last-child {
  border-bottom: none;
}

.rp--nav .pose-label {
  font-size: 13px;
  color: #475569;
  font-weight: 500;
}

.rp--nav .pose-value {
  font-size: 13px;
  color: #0F172A;
  font-weight: 500;
  text-align: right;
  font-family: inherit;
  letter-spacing: .2px;
}

/* === 标定页 info-card === */
.rp--calib .info-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.rp--calib .info-card .card-header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(2, 6, 23, 0.06);
  background: #F8FAFC;
}

.rp--calib .info-card .card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
}

.rp--calib .info-card .card-content {
  padding: 0;
}

.rp--calib .info-card .pose-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(2, 6, 23, 0.04);
}

.rp--calib .info-card .pose-item:last-child {
  border-bottom: none;
}

.rp--calib .info-card .pose-label {
  font-size: 13px;
  color: #475569;
  font-weight: 500;
}

.rp--calib .info-card .pose-value {
  font-size: 13px;
  color: #0F172A;
  font-weight: 400;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
}

.rp--calib .info-card :deep(.el-tabs__header) {
  margin: 0;
  background: #fff;
  border-bottom: 1px solid rgba(2, 6, 23, 0.06);
}

.rp--calib .info-card :deep(.el-tabs__item) {
  font-size: 14px;
  color: #475569;
}

.rp--calib .info-card :deep(.el-tabs__item.is-active) {
  color: #0EA5E9;
  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;
}

.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: #FFFFFF;
  border: 1px solid rgba(2, 6, 23, 0.08);
  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: #475569;
  transition: all var(--transition-duration, 0.2s) var(--animation-ease, ease-out);
  pointer-events: auto;
}

.expand-handle:hover {
  background: #0EA5E9;
  color: var(--color-text-inverse);
  border-color: #0EA5E9;
  transform: translateY(-50%) translateX(-2px);
  box-shadow: 0 20px 25px -5px rgba(2, 6, 23, 0.1), 0 10px 10px -5px rgba(2, 6, 23, 0.04);;
}

.expand-handle i {
  font-size: 16px;
  font-weight: bold;
}

/* 暗色主题适配 */
html.dark .right-panel {
  background: #F1F5F9;
}

html.dark .panel-header {
  background: var(--color-bg-quaternary);
}

html.dark .info-card {
  background: #F1F5F9;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
}

html.dark .info-card .card-header {
  background: var(--color-bg-quaternary);
}

/* 响应式设计 */
@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;
}

.rp--nav .nav-expand-handle:hover i {
  color: #ffffff !important;
}

.rp--nav .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;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.rp--nav .nav-right-panel.is-hidden {
  transform: translateX(calc(100% + 16px));
}

.rp--nav .nav-panel-header {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.rp--nav .nav-panel-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  padding: 4px;
  font-size: 14px;
  color: #909399;
}

.rp--nav .nav-panel-close-btn:hover {
  color: #409eff;
  background: rgba(64, 158, 255, 0.1);
}

.rp--nav .nav-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.rp--nav .nav-tabs :deep(.el-tabs__header) {
  margin: 0;
  border-bottom: 1px solid rgba(2, 6, 23, 0.06);
  background: #F8FAFC;
  flex-shrink: 0;
}

.rp--nav .nav-tabs :deep(.el-tabs__nav-wrap) {
  padding: 0 16px;
}

.rp--nav .nav-tabs :deep(.el-tabs__item) {
  padding: 0 16px;
  font-size: 14px;
  color: #475569;
  line-height: 40px;
}

.rp--nav .nav-tabs :deep(.el-tabs__item.is-active) {
  color: #0EA5E9;
  font-weight: 600;
}

.rp--nav .nav-tabs :deep(.el-tabs__content) {
  flex: 1;
  height: 0;
  overflow: hidden;
}

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

.rp--nav .nav-tabs :deep(.el-tab-pane)::-webkit-scrollbar {
  width: 6px;
}

.rp--nav .nav-tabs :deep(.el-tab-pane)::-webkit-scrollbar-track {
  background: #F1F5F9;
  border-radius: 9999px;
}

.rp--nav .nav-tabs :deep(.el-tab-pane)::-webkit-scrollbar-thumb {
  background: rgba(2, 6, 23, 0.08);
  border-radius: 9999px;
}

.rp--nav .nav-tabs :deep(.el-tab-pane)::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

.rp--nav .nav-tab-content {
  height: 100%;
  padding: 0;
  overflow-y: auto;
}

.rp--nav .nav-info-grid {
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
  overflow: hidden;
  margin-bottom: 0;
}

.rp--nav .nav-info-header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(2, 6, 23, 0.06);
  background: #F8FAFC;
}

.rp--nav .nav-info-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
}

.rp--nav .nav-info-content {
  padding: 0;
}

.rp--nav .nav-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid rgba(2, 6, 23, 0.04);
}

.rp--nav .nav-info-item:last-child {
  border-bottom: none;
}

.rp--nav .nav-info-item .label {
  font-size: 13px;
  color: #475569;
  font-weight: 400;
}

.rp--nav .nav-info-item .value {
  font-size: 13px;
  color: #0F172A;
  text-align: right;
  font-weight: 500;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* 电池显示样式 */
.rp--nav .battery-display {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rp--nav .battery-percentage {
  font-weight: 600;
}

.rp--nav .battery-percentage.battery-normal {
  color: #10b981;
}

.rp--nav .battery-percentage.battery-medium {
  color: #f59e0b;
}

.rp--nav .battery-percentage.battery-low {
  color: #ef4444;
  animation: blink 1s infinite;
}

.rp--nav .battery-percentage.battery-charging {
  color: #10b981;
}

.rp--nav .charging-icon {
  font-size: 14px;
  animation: pulse 1s infinite;
}

.rp--nav .charging-text {
  color: #10b981;
  font-weight: 600;
}

.rp--nav .battery-detail {
  background: #f8fafc;
  padding-left: 32px;
}

.rp--nav .battery-detail .label {
  font-size: 12px;
  color: #64748b;
}

.rp--nav .battery-detail .value {
  font-size: 12px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.rp--nav .nav-list-header {
  margin-bottom: 16px;
}

.rp--nav .nav-list-header .el-input {
  margin-bottom: 12px;
}

.rp--nav .nav-header-buttons {
  display: flex;
  gap: 8px;
}

.rp--nav .nav-header-buttons .el-button {
  flex: 1;
}

.rp--nav .nav-list-content {
  flex: 1;
  overflow-y: auto;
}

.rp--nav .nav-list-content.nav-list-scrollable {
  max-height: calc(100vh - 400px);
}

.rp--nav .nav-list-content.nav-list-scrollable::-webkit-scrollbar {
  width: 6px;
}

.rp--nav .nav-list-content.nav-list-scrollable::-webkit-scrollbar-track {
  background: #F1F5F9;
  border-radius: 9999px;
}

.rp--nav .nav-list-content.nav-list-scrollable::-webkit-scrollbar-thumb {
  background: rgba(2, 6, 23, 0.08);
  border-radius: 9999px;
}

.rp--nav .nav-list-content.nav-list-scrollable::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

.rp--nav .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;
}

.rp--nav .nav-waypoint-item:hover {
  border-color: #409eff;
  background: #f0f9ff;
}

.rp--nav .nav-waypoint-item.selected {
  border-color: #409eff;
  background: #f0f9ff;
}

.rp--nav .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;
}

.rp--nav .waypoint-checkbox:hover {
  background-color: rgba(64, 158, 255, 0.1) !important;
}

.rp--nav .waypoint-checkbox:active {
  background-color: rgba(64, 158, 255, 0.2) !important;
  transform: scale(0.98) !important;
}

.rp--nav .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;
}

.rp--nav .custom-checkbox:hover {
  border-color: #409eff !important;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1) !important;
}

.rp--nav .custom-checkbox:active {
  transform: scale(0.95) !important;
}

.rp--nav .custom-checkbox.checked {
  background-color: #409eff !important;
  border-color: #409eff !important;
}

.rp--nav .waypoint-info {
  flex: 1;
}

.rp--nav .waypoint-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rp--nav .waypoint-id {
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.rp--nav .waypoint-coords {
  font-size: 12px;
  color: #666;
  font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
}

.rp--nav .waypoint-actions {
  display: flex !important;
  gap: 4px;
  align-items: baseline !important;
  flex-shrink: 0;
}

.rp--nav .action-btn {
  padding: 2px 6px !important;
  font-size: 12px !important;
  height: 24px !important;
  line-height: 20px !important;
}

.rp--nav .nav-task-list .nav-task-item {
  padding: 12px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  margin-bottom: 8px;
}

.rp--nav .task-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.rp--nav .task-name {
  font-weight: 500;
  color: #333;
}

.rp--nav .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;
}

.rp--nav .task-status.status-idle {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  color: #0369a1;
  border-color: #bae6fd;
}

.rp--nav .task-status.status-running {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  color: #15803d;
  border-color: #bbf7d0;
}

.rp--nav .task-status.status-paused {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #d97706;
  border-color: #fed7aa;
}

.rp--nav .task-status.status-completed {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  color: #15803d;
  border-color: #bbf7d0;
}

.rp--nav .task-status.status-failed {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  color: #dc2626;
  border-color: #fecaca;
}

.rp--nav .task-status.status-unknown {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  color: #64748b;
  border-color: #cbd5e1;
}

.rp--nav .task-status.status-started {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  color: #15803d;
  border-color: #bbf7d0;
}

.rp--nav .task-status.status-stopped {
  background: linear-gradient(135deg, #fefbf3 0%, #fef3c7 100%);
  color: #d97706;
  border-color: #fed7aa;
}

.rp--nav .task-status.status-emergency {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  color: #dc2626;
  border-color: #fecaca;
  animation: pulse-emergency 2s infinite;
}

.rp--nav .task-status.status-planning {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #d97706;
  border-color: #fed7aa;
}

.rp--nav .task-status.status-navigating {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  color: #15803d;
  border-color: #bbf7d0;
  animation: pulse-navigating 2s infinite;
}

.rp--nav .task-status.status-arrived {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  color: #15803d;
  border-color: #bbf7d0;
}

.rp--nav .task-actions {
  display: flex;
  gap: 4px;
}

.rp--nav .task-actions .el-button {
  padding: 2px 6px;
}

.rp--nav .nav-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #999;
}

.rp--nav .nav-empty-state i {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.rp--nav .nav-empty-state p {
  margin: 0;
  font-size: 14px;
}

.rp--nav .settings-list {
  padding: 0;
}

.rp--nav .setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.rp--nav .setting-item:last-child {
  border-bottom: none;
}

.rp--nav .setting-info {
  flex: 1;
}

.rp--nav .setting-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.rp--nav .setting-desc {
  display: block;
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

.rp--nav .setting-item .el-switch {
  margin-left: 16px;
}

.rp--nav .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);
}

.rp--nav .toolbar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 12px;
  width: 100%;
}

@media (max-width: 768px) {
  .rp--nav .toolbar-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.rp--nav .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;
}

.rp--nav .grid-btn i {
  font-size: 15px !important;
  line-height: 1 !important;
}

.rp--nav .grid-btn 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;
}

.rp--nav .grid-btn.el-button--primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border: 1px solid #2563eb !important;
  color: white !important;
}

.rp--nav .grid-btn.el-button--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
}

.rp--nav .grid-btn.el-button--danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border: 1px solid #dc2626 !important;
  color: white !important;
}

.rp--nav .grid-btn.el-button--warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border: 1px solid #d97706 !important;
  color: white !important;
}

.rp--nav .grid-btn.el-button--success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: 1px solid #059669 !important;
  color: white !important;
}

.rp--nav .grid-btn.el-button--info {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border: 1px solid #2563eb !important;
  color: white !important;
}

.rp--nav .grid-btn.is-disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.rp--nav .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;
}

.rp--nav .quick-actions-info {
  font-size: 13px;
  margin-bottom: 8px;
  font-weight: 500;
}

.rp--nav .quick-actions-buttons {
  display: flex;
  gap: 8px;
}

.rp--nav .quick-actions-buttons .el-button {
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.rp--nav .quick-actions-buttons .el-button:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.rp--nav .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);
}

.rp--edit .right-panel.is-hidden {
  transform: translateX(calc(100% + 16px));
}

.rp--edit .edit-panel-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  padding: 4px;
  font-size: 14px;
  color: #909399;
}

.rp--edit .edit-panel-close-btn:hover {
  color: #409eff;
  background: rgba(64, 158, 255, 0.1);
}

.rp--edit .panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
}

.rp--edit :deep(.el-tabs) {
  display: block;
  height: auto !important;
}

.rp--edit :deep(.el-tabs__header) {
  margin: 0;
  padding: 0 16px !important;
  background: #fff;
  border-bottom: none;
}

.rp--edit :deep(.el-tabs__nav-wrap) {
  overflow: visible;
}

.rp--edit :deep(.el-tabs__content) {
  overflow-y: auto !important;
  overflow-x: hidden;
  height: auto !important;
  max-height: none !important;
}

.rp--edit :deep(.el-tabs__content) > div {
  overflow: visible !important;
  display: block;
}

.rp--edit :deep(.el-tab-pane) {
  display: block;
}

.rp--edit :deep(.el-tabs__content),
.rp--edit .panel-content {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

.rp--edit :deep(.el-tabs__content)::-webkit-scrollbar,
.rp--edit .panel-content::-webkit-scrollbar {
  width: 6px;
}

.rp--edit :deep(.el-tabs__content)::-webkit-scrollbar-track,
.rp--edit .panel-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.rp--edit :deep(.el-tabs__content)::-webkit-scrollbar-thumb,
.rp--edit .panel-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.rp--edit :deep(.el-tabs__content)::-webkit-scrollbar-thumb:hover,
.rp--edit .panel-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.rp--edit .nav-tab-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 16px 16px;
}

.rp--edit .nav-info-grid {
  background: #FFFFFF;
  border-radius: var(--panel-border-radius, 8px);
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
  overflow: hidden;
  margin-bottom: 0;
}

.rp--edit .nav-info-header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(2, 6, 23, 0.06);
  background: #F8FAFC;
}

.rp--edit .nav-info-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
}

.rp--edit .nav-info-content {
  padding: 0;
}

.rp--edit .nav-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(2, 6, 23, 0.04);
}

.rp--edit .nav-info-item:last-child {
  border-bottom: none;
}

.rp--edit .nav-info-item .label {
  font-size: 13px;
  color: #475569;
  font-weight: 400;
}

.rp--edit .nav-info-item .value {
  font-size: 13px;
  color: #0F172A;
  text-align: right;
  font-weight: 500;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
}

.rp--edit .edit-elements-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rp--edit .element-filter {
  flex-shrink: 0;
  margin-bottom: 12px;
}

.rp--edit .element-filter :deep(.el-tabs__header) {
  margin: 0;
  background: #F8FAFC;
  border-bottom: none;
}

.rp--edit .element-filter :deep(.el-tabs__nav-wrap) {
  overflow: visible;
}

.rp--edit .element-search {
  flex-shrink: 0;
  margin-bottom: 12px;
  padding: 0 16px;
}

.rp--edit .element-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 16px;
}

.rp--edit .element-list::-webkit-scrollbar {
  width: 6px;
}

.rp--edit .element-list::-webkit-scrollbar-track {
  background: #F1F5F9;
  border-radius: 9999px;
}

.rp--edit .element-list::-webkit-scrollbar-thumb {
  background: rgba(2, 6, 23, 0.08);
  border-radius: 9999px;
}

.rp--edit .element-list::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

.rp--edit .element-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid rgba(2, 6, 23, 0.04);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rp--edit .element-item:hover {
  border-color: #0EA5E9;
  background: #F8FAFC;
}

.rp--edit .element-item.selected {
  border-color: #0EA5E9;
  background: #38BDF8;
}

.rp--edit .element-info {
  flex: 1;
}

.rp--edit .element-id {
  font-weight: 600;
  color: #0F172A;
  font-size: 13px;
  margin-bottom: 4px;
}

.rp--edit .element-name {
  color: #475569;
  font-size: 12px;
}

.rp--edit .element-actions {
  display: flex;
  gap: 4px;
}

.rp--edit .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: #94A3B8;
}

.rp--edit .empty-state i {
  font-size: 20px;
  margin-bottom: 8px;
  opacity: 0.5;
}

.rp--edit .empty-state p {
  margin: 0;
  font-size: 13px;
  opacity: 0.8;
}

.rp--edit .edit-network-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 16px 16px;
}

.rp--edit .edit-network-content::-webkit-scrollbar {
  width: 6px;
}

.rp--edit .edit-network-content::-webkit-scrollbar-track {
  background: #F1F5F9;
  border-radius: 9999px;
}

.rp--edit .edit-network-content::-webkit-scrollbar-thumb {
  background: rgba(2, 6, 23, 0.08);
  border-radius: 9999px;
}

.rp--edit .edit-network-content::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

.rp--edit .network-operations .operation-section {
  margin-bottom: 24px;
}

.rp--edit .operation-section:last-child {
  margin-bottom: 0;
}

.rp--edit .section-title {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
}

.rp--edit .operation-tips {
  background: #F8FAFC;
  padding: 16px;
  border-radius: 8px;
}

.rp--edit .tip-item {
  margin: 0 0 12px 0;
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
}

.rp--edit .tip-item:last-child {
  margin-bottom: 0;
}

.rp--edit .tip-item strong {
  color: #0F172A;
  font-weight: 600;
  margin-right: 4px;
}

.rp--edit .operation-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rp--edit .operation-buttons .el-button {
  margin: 0;
  transition: all 0.2s ease;
}

.rp--edit .operation-buttons .el-button:not(:hover):not(:active) {
  background-color: var(--color-bg-button, #ffffff);
  border-color: var(--color-border-primary, #dcdfe6);
  color: var(--color-text-primary, #606266);
}

.rp--edit .operation-buttons .el-button:not(:hover):not(:active).el-button--primary {
  background-color: var(--color-primary, #409eff);
  border-color: var(--color-primary, #409eff);
  color: #ffffff;
}

.rp--edit .operation-buttons .el-button:focus {
  outline: none;
}

.rp--edit .operation-buttons .el-button: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);
  }
}

/* 动画 */
@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);
  }
}

@keyframes pulse-navigating {
  0% {
    box-shadow: 0 1px 3px rgba(21, 128, 61, 0.1), 0 0 0 0 rgba(21, 128, 61, 0.4);
  }
  50% {
    box-shadow: 0 1px 3px rgba(21, 128, 61, 0.2), 0 0 0 6px rgba(21, 128, 61, 0.1);
  }
  100% {
    box-shadow: 0 1px 3px rgba(21, 128, 61, 0.1), 0 0 0 0 rgba(21, 128, 61, 0);
  }
}
</style>
