pns-web/src/views/map/maplist/components/shared/RightPanel.vue

<template>
  <div :class="['right-panel-container', mode === 'nav' ? 'rp--nav' : 'rp--calib']">
    <!-- 标定页面板（保持原有结构不变） -->
    <template v-if="panelType !== 'nav'">
    <!-- 主面板 -->
    <div 
      class="right-panel" 
      :class="{ 'panel-collapsed': !value }"
      :style="{ width: value ? width + 'px' : '0px' }"
    >
      <!-- 面板头部 -->
      <div class="panel-header" v-if="!hideHeader">
        <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="realtime-info-content">
                  <div class="info-section">
                    <div class="info-title">
                      <div class="title-bar"></div>
                      <span>当前地图</span>
                    </div>
                    <span class="info-content">{{ realtimeInfo.currentMap }}</span>
                  </div>
                  
                  <div class="info-section">
                    <div class="info-title">
                      <div class="title-bar"></div>
                      <span>当前任务</span>
                    </div>
                    <span class="info-content">{{ realtimeInfo.currentTask }}</span>
                  </div>
                  
                  <div class="info-section">
                    <div class="info-title">
                      <div class="title-bar"></div>
                      <span>实时信息</span>
                    </div>
                    <div class="info-details">
                      <span class="info-item">
                        <span class="info-label">速度:</span>
                        <span class="info-value">{{ realtimeInfo.speed }}</span>
                      </span>
                      <span class="info-item">
                        <span class="info-label">速度指令:</span>
                        <span class="info-value">{{ realtimeInfo.speedCommand }}</span>
                      </span>
                      <span class="info-item">
                        <span class="info-label">坐标:</span>
                        <span class="info-value">{{ realtimeInfo.coordinates }}</span>
                      </span>
                      <span class="info-item">
                        <span class="info-label">航向:</span>
                        <span class="info-value">{{ realtimeInfo.heading }}</span>
                      </span>
                      <span class="info-item">
                        <span class="info-label">累计里程:</span>
                        <span class="info-value">{{ realtimeInfo.totalDistance }}</span>
                      </span>
                      <span class="info-item">
                        <span class="info-label">配准误差:</span>
                        <span class="info-value">{{ realtimeInfo.registrationError }}</span>
                      </span>
                      <span class="info-item">
                        <span class="info-label">电量:</span>
                        <span class="info-value">{{ realtimeInfo.batteryLevel }}</span>
                      </span>
                    </div>
                  </div>
                </div>
              </template>
              
              <!-- 其他Tab使用插槽 -->
              <template v-else>
                <slot :name="`tab-${tab.key}`">
                  <div class="tab-placeholder">
                    {{ tab.label }} 内容
                  </div>
                </slot>
              </template>
            </el-tab-pane>
          </el-tabs>
        </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"
      @click="expandPanel"
      :title="expandTooltip"
    >
      <i class="el-icon-arrow-left"></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 }}</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" size="small" :disabled="waypointSingle" @click="$emit('wp-move-up')" class="grid-btn">
                    <i class="el-icon-arrow-up"></i>
                    <span>上移</span>
                  </el-button>
                  <el-button type="primary" size="small" :disabled="waypointSingle" @click="$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" 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" size="small" :disabled="waypointSingle" @click="$emit('wp-goto')" class="grid-btn">
                    <i class="el-icon-position"></i>
                    <span>立即前往</span>
                  </el-button>
                  <el-button type="success" size="small" :disabled="waypointMultiple" @click="$emit('wp-create-task')" class="grid-btn">
                    <i class="el-icon-plus"></i>
                    <span>生成任务</span>
                  </el-button>
                  <el-button 
                    :type="mapSelectMode ? 'danger' : 'info'" 
                    size="small"
                    @click="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" @click.stop="$emit('wp-edit', waypoint)" class="action-btn">编辑</el-button>
                      <el-popconfirm title="删除当前目标点？" @confirm="$emit('wp-remove', waypoint)">
                        <el-button size="mini" type="text" slot="reference" @click.stop 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" @click="$emit('task-view', task)">查看</el-button>
                      <el-button size="mini" type="text" @click="$emit('task-start', task)">开始</el-button>
                      <el-button size="mini" type="text" @click="$emit('task-pause', task)">暂停</el-button>
                      <el-button size="mini" type="text" @click="$emit('task-stop', task)">停止</el-button>
                      <el-button size="mini" type="text" @click="$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" 
          size="mini" 
          icon="el-icon-arrow-right"
          @click="$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'
      validator: value => ['calib', 'nav'].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: 'shanghai',
        currentTask: '测试任务',
        speed: '0.35m/s',
        speedCommand: '0.22m/s',
        coordinates: '(1.813, -63.931, 0.000)',
        heading: '-79.6°',
        totalDistance: '5965352.00m',
        registrationError: '10.000',
        batteryLevel: '67%'
      })
    },
    
    // === 导航页专用props ===
    waypointList: {
      type: Array,
      default: () => []
    },
    taskList: {
      type: Array,
      default: () => []
    },
    settingParams: {
      type: Object,
      default: () => ({
        pointCloud: false,
        baseMap: true,
        pointId: false,
        follow: false,
        network: false
      })
    }
  },
  data() {
    return {
      activeTab: '',
      navActiveTab: 'realtime', // 导航页默认激活的tab
      isResizing: false,
      startX: 0,
      startWidth: 0,
      // 目标点相关状态
      selectedWaypoints: [], // 选中的目标点
      mapSelectMode: false // 地图选点模式
    }
  },
  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: '系统状态' }
      }
      
      return this.tabs.map(tab => {
        if (typeof tab === 'string') {
          return tabMap[tab] || { key: tab, label: tab }
        }
        return tab
      })
    }
  },
  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] || '未知'
    }
  }
}
</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 {
      opacity: 0;
      pointer-events: none;
      overflow: hidden;
    }

  .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);
          }
        }
      }
      
      .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;
  }
}
</style>