<template>
  <div class="calibration-config-simple">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-main">
          <h1 class="page-title">标定参数</h1>
          <p class="page-desc">配置车辆和传感器标定参数，逐项编辑保存</p>
        </div>
      </div>
      
      <!-- 搜索框 -->
      <div class="search-section">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索标定参数..."
          clearable
          prefix-icon="el-icon-search"
          class="search-input"
        />
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="page-content">
      <div class="xt-calib">
        <!-- 顶部全宽示意图卡片：左右布局 -->
        <el-card class="xt-card diagram-hero" shadow="never">
          <div class="hero-grid">
            <div class="hero-left">
              <div class="diagram-box">
                <img class="diagram-img" :src="diagramUrl" alt="车辆坐标系示意" />
              </div>
              <div class="diagram-caption">车辆坐标系示意</div>
            </div>
            <div class="hero-right">
              <div class="hero-right-inner">
                <div class="hero-title">坐标系说明</div>
                <ul class="hero-list">
                  <li><b>X 轴：</b>车辆前进方向为正</li>
                  <li><b>Y 轴：</b>车辆左侧方向为正</li>
                  <li><b>Z 轴：</b>垂直向上方向为正</li>
                  <li><b>Roll：</b>绕 X 轴旋转角度</li>
                  <li><b>Pitch：</b>绕 Y 轴旋转角度</li>
                  <li><b>Yaw：</b>绕 Z 轴旋转角度</li>
                </ul>
                <el-alert
                  class="hero-tip"
                  type="info"
                  :closable="false"
                  title="请确保传感器安装位置相对于车辆坐标系的准确性"
                  show-icon
                />
              </div>
            </div>
          </div>
        </el-card>

        <!-- 参数卡片区：两列网格 -->
        <div class="cards-grid">
          <!-- 车身参数卡片 -->
          <el-card class="xt-card calib-card" shadow="never" v-show="hasVisibleItems('vehicle')">
            <div slot="header" class="card-header">
              <h2 class="card-title">车身参数</h2>
              <p class="card-desc">车辆底盘类型、尺寸和轮廓配置</p>
            </div>
            <XtParamItem
              v-for="item in vehicleConfigItems"
              :key="item.key"
              v-show="isItemVisible(item)"
              :label="item.label"
              :value="config[item.key]"
              :type="item.type"
              :unit="item.unit"
              :placeholder="item.placeholder"
              :options="item.options"
              :precision="item.precision"
              :step="item.step"
              :min="item.min"
              :max="item.max"
              :search-keyword="searchKeyword"
              @save="(value) => handleParamSave(item.key, value)"
              @cancel="handleParamCancel"
            />
            <div v-if="!hasVisibleItems('vehicle')" class="empty-state">
              <i class="el-icon-search"></i>
              <p>无匹配的配置参数</p>
            </div>
          </el-card>

          <!-- 挂车参数卡片 -->
          <el-card class="xt-card calib-card" shadow="never" v-show="hasVisibleItems('trailer')">
            <div slot="header" class="card-header">
              <h2 class="card-title">挂车参数</h2>
              <p class="card-desc">挂车类型、数量和尺寸配置</p>
            </div>
            <XtParamItem
              v-for="item in trailerConfigItems"
              :key="item.key"
              v-show="isItemVisible(item)"
              :label="item.label"
              :value="config[item.key]"
              :type="item.type"
              :unit="item.unit"
              :placeholder="item.placeholder"
              :options="item.options"
              :precision="item.precision"
              :step="item.step"
              :min="item.min"
              :max="item.max"
              :search-keyword="searchKeyword"
              @save="(value) => handleParamSave(item.key, value)"
              @cancel="handleParamCancel"
            />
            <div v-if="!hasVisibleItems('trailer')" class="empty-state">
              <i class="el-icon-search"></i>
              <p>无匹配的配置参数</p>
            </div>
          </el-card>

          <!-- 激光雷达参数卡片 -->
          <el-card class="xt-card calib-card" shadow="never" v-show="hasVisibleItems('lidar')">
            <div slot="header" class="card-header">
              <h2 class="card-title">激光雷达</h2>
              <p class="card-desc">激光雷达传感器位置和姿态标定</p>
            </div>
            <XtParamItem
              v-for="item in lidarConfigItems"
              :key="item.key"
              v-show="isItemVisible(item)"
              :label="item.label"
              :value="config[item.key]"
              :type="item.type"
              :unit="item.unit"
              :placeholder="item.placeholder"
              :precision="item.precision"
              :step="item.step"
              :min="item.min"
              :max="item.max"
              :search-keyword="searchKeyword"
              @save="(value) => handleParamSave(item.key, value)"
              @cancel="handleParamCancel"
            />
            <div v-if="!hasVisibleItems('lidar')" class="empty-state">
              <i class="el-icon-search"></i>
              <p>无匹配的配置参数</p>
		</div>
          </el-card>

          <!-- IMU参数卡片 -->
          <el-card class="xt-card calib-card" shadow="never" v-show="hasVisibleItems('imu')">
            <div slot="header" class="card-header">
              <h2 class="card-title">IMU</h2>
              <p class="card-desc">惯性测量单元位置和姿态标定</p>
            </div>
            <XtParamItem
              v-for="item in imuConfigItems"
              :key="item.key"
              v-show="isItemVisible(item)"
              :label="item.label"
              :value="config[item.key]"
              :type="item.type"
              :unit="item.unit"
              :placeholder="item.placeholder"
              :precision="item.precision"
              :step="item.step"
              :min="item.min"
              :max="item.max"
              :search-keyword="searchKeyword"
              @save="(value) => handleParamSave(item.key, value)"
              @cancel="handleParamCancel"
            />
            <div v-if="!hasVisibleItems('imu')" class="empty-state">
              <i class="el-icon-search"></i>
              <p>无匹配的配置参数</p>
					</div>
          </el-card>

          <!-- GPS参数卡片 -->
          <el-card class="xt-card calib-card" shadow="never" v-show="hasVisibleItems('gps')">
            <div slot="header" class="card-header">
              <h2 class="card-title">GPS</h2>
              <p class="card-desc">全球定位系统位置和姿态标定</p>
            </div>
            <XtParamItem
              v-for="item in gpsConfigItems"
              :key="item.key"
              v-show="isItemVisible(item)"
              :label="item.label"
              :value="config[item.key]"
              :type="item.type"
              :unit="item.unit"
              :placeholder="item.placeholder"
              :precision="item.precision"
              :step="item.step"
              :min="item.min"
              :max="item.max"
              :search-keyword="searchKeyword"
              @save="(value) => handleParamSave(item.key, value)"
              @cancel="handleParamCancel"
            />
            <div v-if="!hasVisibleItems('gps')" class="empty-state">
              <i class="el-icon-search"></i>
              <p>无匹配的配置参数</p>
				</div>
			</el-card>
        </div>
      </div>
		</div>
	</div>
</template>

<script>
import XtParamItem from '@/components/XtParamItem'

// 尝试导入真实 API，失败则使用 Mock
let calibrationApi
try {
  calibrationApi = require('@/api/config/calibration')
} catch (error) {
  // Fallback 到 Mock API
  calibrationApi = {
    getCalibrationParams: () => Promise.resolve({ code: 200, data: {} }),
    updateParam: ({ key, value }) => Promise.resolve({ code: 200, message: '参数保存成功' })
  }
}

export default {
  name: 'CalibrationConfig',
  
  components: {
    XtParamItem
  },
  
	data() {
		return {
      // 加载状态
      loading: false,
      
      // 搜索关键词
      searchKeyword: '',
      
      // 屏幕尺寸
      isLargeScreen: false,
      
      // 坐标系示意图
      diagramUrl: require('@/assets/images/coordinate.png'),
      
      // 配置数据
      config: {
        // 车身参数
        chassisType: 20, // 阿克曼:20, 差速:10
        wheelBase: 2.0, // 前后轴距(m)
        tread: 1.5, // 左右轮距(m)
        length: 4.5, // 车身长度(m)
        width: 1.8, // 车身宽度(m)
        rearOverhang: 0.8, // 后端距(m)
        safetyContour: '', // 安全轮廓
        minTurningRadius: 5.0, // 最小转弯半径(m)
        
        // 挂车参数
        trailerType: 1, // 转向:1, 非转向:2
        trailerCount: 0, // 挂车数量
        showTrailerContour: '', // 显示轮廓
        tractorToFrontHitch: 0, // 牵引车后挂距(m)
        trailerFrontHitch: 0, // 挂车前挂距(m)
        trailerWheelBase: 0, // 挂车轴距(m)
        trailerRearHitch: 0, // 挂车后挂距(m)
        trailerLength: 0, // 挂车长度(m)
        trailerWidth: 0, // 挂车宽度(m)
        trailerRearOverhang: 0, // 挂车后端距(m)
        
        // 激光雷达
        lidarXOffset: 0,
        lidarYOffset: 0,
        lidarZOffset: 0,
        lidarRoll: 0,
        lidarPitch: 0,
        lidarYaw: 0,
        
        // IMU
        imuXOffset: 0,
        imuYOffset: 0,
        imuZOffset: 0,
        imuRoll: 0,
        imuPitch: 0,
        imuYaw: 0,
        
        // GPS
        gpsXOffset: 0,
        gpsYOffset: 0,
        gpsZOffset: 0,
        gpsRoll: 0,
        gpsPitch: 0,
        gpsYaw: 0
      },
      
      // 车身参数配置项
      vehicleConfigItems: [
        {
          key: 'chassisType',
          label: '底盘类型',
          type: 'select',
          placeholder: '请选择底盘类型',
          options: [
            { label: '阿克曼', value: 20 },
            { label: '差速', value: 10 }
          ]
        },
        {
          key: 'wheelBase',
          label: '前后轴距',
          type: 'number',
          unit: 'm',
          placeholder: '0.00',
          precision: 2,
          step: 0.01,
          min: 0
        },
        {
          key: 'tread',
          label: '左右轮距',
          type: 'number',
          unit: 'm',
          placeholder: '0.00',
          precision: 2,
          step: 0.01,
          min: 0
        },
        {
          key: 'length',
          label: '车身长度',
          type: 'number',
          unit: 'm',
          placeholder: '0.00',
          precision: 2,
          step: 0.01,
          min: 0
        },
        {
          key: 'width',
          label: '车身宽度',
          type: 'number',
          unit: 'm',
          placeholder: '0.00',
          precision: 2,
          step: 0.01,
          min: 0
        },
        {
          key: 'rearOverhang',
          label: '后端距',
          type: 'number',
          unit: 'm',
          placeholder: '0.00',
          precision: 2,
          step: 0.01,
          min: 0
        },
        {
          key: 'minTurningRadius',
          label: '最小转弯半径',
          type: 'number',
          unit: 'm',
          placeholder: '0.00',
          precision: 2,
          step: 0.01,
          min: 0
        },
        {
          key: 'safetyContour',
          label: '安全轮廓',
          type: 'textarea',
          placeholder: '[[x1,y1],[x2,y2],...]'
        }
      ],
      
      // 挂车参数配置项
      trailerConfigItems: [
        {
          key: 'trailerType',
          label: '挂车类型',
          type: 'select',
          placeholder: '请选择挂车类型',
          options: [
            { label: '转向', value: 1 },
            { label: '非转向', value: 2 }
          ]
        },
        {
          key: 'trailerCount',
          label: '挂车数量',
          type: 'number',
          unit: '台',
          placeholder: '0',
          step: 1,
          min: 0
        },
        {
          key: 'showTrailerContour',
          label: '显示轮廓',
          type: 'text',
          placeholder: '请输入轮廓显示设置'
        },
        {
          key: 'tractorToFrontHitch',
          label: '牵引车后挂距',
          type: 'number',
          unit: 'm',
          placeholder: '0.00',
          precision: 2,
          step: 0.01,
          min: 0
        },
        {
          key: 'trailerFrontHitch',
          label: '挂车前挂距',
          type: 'number',
          unit: 'm',
          placeholder: '0.00',
          precision: 2,
          step: 0.01,
          min: 0
        },
        {
          key: 'trailerWheelBase',
          label: '挂车轴距',
          type: 'number',
          unit: 'm',
          placeholder: '0.00',
          precision: 2,
          step: 0.01,
          min: 0
        },
        {
          key: 'trailerRearHitch',
          label: '挂车后挂距',
          type: 'number',
          unit: 'm',
          placeholder: '0.00',
          precision: 2,
          step: 0.01,
          min: 0
        },
        {
          key: 'trailerLength',
          label: '挂车长度',
          type: 'number',
          unit: 'm',
          placeholder: '0.00',
          precision: 2,
          step: 0.01,
          min: 0
        },
        {
          key: 'trailerWidth',
          label: '挂车宽度',
          type: 'number',
          unit: 'm',
          placeholder: '0.00',
          precision: 2,
          step: 0.01,
          min: 0
        },
        {
          key: 'trailerRearOverhang',
          label: '挂车后端距',
          type: 'number',
          unit: 'm',
          placeholder: '0.00',
          precision: 2,
          step: 0.01,
          min: 0
        }
      ],
      
      // 激光雷达配置项
      lidarConfigItems: [
        {
          key: 'lidarXOffset',
          label: 'X轴偏移',
          type: 'number',
          unit: 'm',
          placeholder: '0.000',
          precision: 3,
          step: 0.001,
          min: -999,
          max: 999
        },
        {
          key: 'lidarYOffset',
          label: 'Y轴偏移',
          type: 'number',
          unit: 'm',
          placeholder: '0.000',
          precision: 3,
          step: 0.001,
          min: -999,
          max: 999
        },
        {
          key: 'lidarZOffset',
          label: 'Z轴偏移',
          type: 'number',
          unit: 'm',
          placeholder: '0.000',
          precision: 3,
          step: 0.001,
          min: -999,
          max: 999
        },
        {
          key: 'lidarRoll',
          label: '横滚偏差',
          type: 'number',
          unit: 'rad',
          placeholder: '0.0000',
          precision: 4,
          step: 0.0001,
          min: -3.1416,
          max: 3.1416
        },
        {
          key: 'lidarPitch',
          label: '俯仰偏差',
          type: 'number',
          unit: 'rad',
          placeholder: '0.0000',
          precision: 4,
          step: 0.0001,
          min: -3.1416,
          max: 3.1416
        },
        {
          key: 'lidarYaw',
          label: '航向偏差',
          type: 'number',
          unit: 'rad',
          placeholder: '0.0000',
          precision: 4,
          step: 0.0001,
          min: -3.1416,
          max: 3.1416
        }
      ],
      
      // IMU配置项
      imuConfigItems: [
        {
          key: 'imuXOffset',
          label: 'X轴偏移',
          type: 'number',
          unit: 'm',
          placeholder: '0.000',
          precision: 3,
          step: 0.001,
          min: -999,
          max: 999
        },
        {
          key: 'imuYOffset',
          label: 'Y轴偏移',
          type: 'number',
          unit: 'm',
          placeholder: '0.000',
          precision: 3,
          step: 0.001,
          min: -999,
          max: 999
        },
        {
          key: 'imuZOffset',
          label: 'Z轴偏移',
          type: 'number',
          unit: 'm',
          placeholder: '0.000',
          precision: 3,
          step: 0.001,
          min: -999,
          max: 999
        },
        {
          key: 'imuRoll',
          label: '横滚偏差',
          type: 'number',
          unit: 'rad',
          placeholder: '0.0000',
          precision: 4,
          step: 0.0001,
          min: -3.1416,
          max: 3.1416
        },
        {
          key: 'imuPitch',
          label: '俯仰偏差',
          type: 'number',
          unit: 'rad',
          placeholder: '0.0000',
          precision: 4,
          step: 0.0001,
          min: -3.1416,
          max: 3.1416
        },
        {
          key: 'imuYaw',
          label: '航向偏差',
          type: 'number',
          unit: 'rad',
          placeholder: '0.0000',
          precision: 4,
          step: 0.0001,
          min: -3.1416,
          max: 3.1416
        }
      ],
      
      // GPS配置项
      gpsConfigItems: [
        {
          key: 'gpsXOffset',
          label: 'X轴偏移',
          type: 'number',
          unit: 'm',
          placeholder: '0.000',
          precision: 3,
          step: 0.001,
          min: -999,
          max: 999
        },
        {
          key: 'gpsYOffset',
          label: 'Y轴偏移',
          type: 'number',
          unit: 'm',
          placeholder: '0.000',
          precision: 3,
          step: 0.001,
          min: -999,
          max: 999
        },
        {
          key: 'gpsZOffset',
          label: 'Z轴偏移',
          type: 'number',
          unit: 'm',
          placeholder: '0.000',
          precision: 3,
          step: 0.001,
          min: -999,
          max: 999
        },
        {
          key: 'gpsRoll',
          label: '横滚偏差',
          type: 'number',
          unit: 'rad',
          placeholder: '0.0000',
          precision: 4,
          step: 0.0001,
          min: -3.1416,
          max: 3.1416
        },
        {
          key: 'gpsPitch',
          label: '俯仰偏差',
          type: 'number',
          unit: 'rad',
          placeholder: '0.0000',
          precision: 4,
          step: 0.0001,
          min: -3.1416,
          max: 3.1416
        },
        {
          key: 'gpsYaw',
          label: '航向偏差',
          type: 'number',
          unit: 'rad',
          placeholder: '0.0000',
          precision: 4,
          step: 0.0001,
          min: -3.1416,
          max: 3.1416
        }
      ]
    }
  },
  
    async created() {
    await this.loadConfig()
    this.calculateScreenSize()
    window.addEventListener('resize', this.calculateScreenSize)
  },
  
  beforeDestroy() {
    window.removeEventListener('resize', this.calculateScreenSize)
  },
  
	methods: {
    // 加载配置
    async loadConfig() {
      this.loading = true
      try {
        const response = await calibrationApi.getCalibrationParams()
        if (response.code === 200 && response.data) {
          this.config = { ...this.config, ...response.data }
        }
      } catch (error) {
        console.warn('加载标定参数失败，使用默认值:', error)
        this.$message.warning('加载配置失败，使用默认参数')
      } finally {
        this.loading = false
      }
    },

    // 保存单个参数
    async handleParamSave(key, value) {
      try {
        const response = await calibrationApi.updateParam({ key, value })
        if (response.code === 200) {
          this.config[key] = value
          // 不显示保存成功消息，由组件内部显示
        } else {
          throw new Error(response.message || '保存失败')
        }
      } catch (error) {
        this.$message.error('保存失败: ' + error.message)
        throw error // 重新抛出错误，让组件显示错误状态
      }
    },

    // 取消参数编辑
    handleParamCancel() {
      // 可以在这里添加取消编辑的逻辑
      console.log('参数编辑已取消')
    },

    // 检查项目是否可见（搜索过滤）
    isItemVisible(item) {
      if (!this.searchKeyword.trim()) {
        return true
      }
      const keyword = this.searchKeyword.toLowerCase().trim()
      return item.label.toLowerCase().includes(keyword)
    },

    // 检查分组是否有可见项目
    hasVisibleItems(groupType) {
      let items = []
      switch (groupType) {
        case 'vehicle':
          items = this.vehicleConfigItems
          break
        case 'trailer':
          items = this.trailerConfigItems
          break
        case 'lidar':
          items = this.lidarConfigItems
          break
        case 'imu':
          items = this.imuConfigItems
          break
        case 'gps':
          items = this.gpsConfigItems
          break
        default:
          return false
      }
      
      return items.some(item => this.isItemVisible(item))
    },

    // 计算屏幕尺寸
    calculateScreenSize() {
      this.isLargeScreen = window.innerWidth >= 1440
    },

	}
}
</script>

<style lang="scss" scoped>
.calibration-config-simple {
  min-height: 100vh;
  background: var(--color-bg-secondary);
  padding-bottom: var(--spacing-6);

  .page-header {
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border-primary);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.05);

    .header-content {
      max-width: 1200px;
      margin: 0 auto;

      .header-main {
        .page-title {
          color: var(--color-text-primary);
          font-size: var(--font-size-3xl);
          font-weight: var(--font-weight-bold);
          margin: 0 0 var(--spacing-2) 0;
          line-height: var(--line-height-tight);
        }

        .page-desc {
          color: var(--color-text-secondary);
          font-size: var(--font-size-base);
          margin: 0 0 var(--spacing-4) 0;
          line-height: var(--line-height-relaxed);
        }
      }
    }

    .search-section {
      max-width: 1200px;
      margin: 0 auto;

      .search-input {
        max-width: 400px;

        ::v-deep .el-input__inner {
          border-radius: var(--radius-lg);
          border: 1px solid var(--color-border-primary);
          background: var(--color-bg-card);
          transition: all var(--duration-200) var(--ease-out);

          &:focus {
            border-color: var(--color-primary);
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.15);
          }
        }

        ::v-deep .el-input__prefix {
          color: var(--color-text-tertiary);
        }
      }
    }
  }

  .page-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-6);
  }
}

/* 新布局样式 */
.xt-calib {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 顶部全宽卡片 */
.diagram-hero {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.05);
  transition: all var(--duration-200) var(--ease-out);
  padding: 16px 20px !important; /* 适中的卡片内边距 */
  
  &:hover {
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 16px;
  align-items: start; /* 顶部对齐更稳 */
}

/* 固定图片展示区域的高度（不改卡片其它高度） */
.diagram-box {
  height: 320px; /* 根据你卡片可用空间设定，和当前高度匹配 */
  width: 100%;
  overflow: visible; /* 不裁剪 */
}

/* 图片在盒子内按比例完整缩放 */
.diagram-img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 关键：完整显示，不裁切 */
  display: block;
}

.diagram-caption {
  margin-top: 6px;
	text-align: center;
  font-size: 12px;
  color: #6b7280;
}

/* 右侧说明区域 */
.hero-right-inner {
  padding: 0;
  height: 320px; /* 与左侧图片容器高度保持一致 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中对齐 */
}

.hero-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 12px;
  color: var(--color-text-primary);
}

.hero-list {
  margin: 0 0 12px 0;
  padding-left: 16px;
  line-height: 1.5;
  font-size: 13px;
  list-style: none;
  
  li {
    margin-bottom: 6px;
    color: var(--color-text-secondary);
    position: relative;
    
    &:before {
      content: '•';
      color: var(--color-primary);
      font-weight: bold;
      position: absolute;
      left: -12px;
    }
    
    b {
      color: #111827;
      font-weight: 600;
    }
  }
}

.hero-tip {
  margin-top: 0;
}

/* 参数卡片两列网格（小屏一列） */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* 保持与通用卡片风格一致 */
.xt-card {
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.05);
  transition: all var(--duration-200) var(--ease-out);
  animation: slideInUp 0.3s ease-out;
  
  &:hover {
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
  }
  
  ::v-deep .el-card__header {
    padding: 20px 20px 16px 20px;
    border-bottom: 1px solid var(--color-border-secondary);
  }
  
  .card-header {
    .card-title {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-primary);
      margin: 0 0 4px 0;
      line-height: var(--line-height-tight);
    }
    
    .card-desc {
      font-size: var(--font-size-sm);
      color: var(--color-text-tertiary);
      margin: 0;
      line-height: var(--line-height-relaxed);
      opacity: 0.8;
    }
  }
  
  ::v-deep .el-card__body {
    padding: 16px 20px 20px 20px;
  }
}


/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120px;
  color: var(--color-text-quaternary);
  background: rgba(0, 0, 0, 0.02);
  border-radius: var(--radius-base);
  border: 1px dashed var(--color-border-secondary);

  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;
  }
}

// 滑入动画
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式断点 */
@media (max-width: 1440px) {
  .diagram-box {
    height: 300px;
  }
  
  .hero-right-inner {
    height: 300px;
  }
}

@media (max-width: 1280px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  
  .cards-grid {
    grid-template-columns: 1fr;
  }
  
  .diagram-box {
    height: 260px;
  }
  
  .hero-right-inner {
    height: auto; /* 单列布局时不需要固定高度 */
    justify-content: flex-start;
    padding-top: 16px;
  }
}

@media (max-width: 768px) {
  .calibration-config-simple {
    .page-header {
      padding: var(--spacing-4);
      margin-bottom: var(--spacing-4);

      .header-content {
        .header-main {
          .page-title {
            font-size: var(--font-size-2xl);
          }

          .page-desc {
            font-size: var(--font-size-sm);
          }
        }
      }

      .search-section {
        .search-input {
          max-width: 100%;
        }
      }
    }

    .page-content {
      padding: 0 var(--spacing-4);
    }
  }
  
  .xt-calib {
    gap: 12px;
  }
  
  .cards-grid {
    gap: 12px;
  }
  
  .diagram-box {
    height: 240px;
  }
  
  .hero-right-inner {
	height: auto;
    justify-content: flex-start;
    padding-top: 12px;
  }
  
  .hero-title {
    font-size: 14px;
    margin-bottom: 10px;
  }
  
  .hero-list {
    font-size: 12px;
    line-height: 1.4;
    
    li {
      margin-bottom: 5px;
    }
  }
  
  .xt-card {
    ::v-deep .el-card__header {
      padding: 16px;
    }
    
    ::v-deep .el-card__body {
      padding: 12px 16px 16px 16px;
    }
  }
}

// 暗色主题适配
html.dark {
  .calibration-config-simple {
    .page-header {
      background: var(--color-bg-tertiary);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);

      .search-section {
        .search-input {
          ::v-deep .el-input__inner {
            background: var(--color-bg-quaternary);
            border-color: var(--color-border-tertiary);
            color: var(--color-text-primary);
          }
        }
      }
    }
  }
  
  .diagram-hero {
    background: var(--color-bg-tertiary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    
    &:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    }
  }
  
  
  .diagram-caption {
    color: var(--color-text-tertiary);
  }
  
  .hero-list li b {
    color: var(--color-text-primary);
  }
  
  .xt-card {
    background: var(--color-bg-tertiary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    
    &:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    }
    
    ::v-deep .el-card__header {
      border-bottom-color: var(--color-border-tertiary);
    }
    
    .card-header {
      .card-title {
        color: var(--color-text-primary);
      }
      
      .card-desc {
        color: var(--color-text-quaternary);
      }
    }
  }
  
  
  .empty-state {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--color-border-tertiary);
  }
}
</style>
