pns-web/src/views/config/rundata/index.vue

<template>
  <div class="runtime-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="config-cards">
        <!-- 控制参数卡片 - 全宽显示 -->
        <div class="config-card control-card" v-show="hasVisibleItems('control')">
          <div class="card-header">
            <h2 class="card-title">控制参数</h2>
            <p class="card-desc">车辆运动控制和行驶行为配置</p>
          </div>
          <div class="card-content control-content">
            <XtParamItem
              v-for="item in controlConfigItems"
              :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('control')" class="empty-state">
              <i class="el-icon-search"></i>
              <p>无匹配的配置参数</p>
            </div>
          </div>
        </div>

        <!-- 其他参数分组 - 两列显示 -->
        <div class="other-params-grid" :class="{ 'two-columns': isLargeScreen }">
          <!-- 定位参数卡片 -->
          <div class="config-card" v-show="hasVisibleItems('positioning')">
            <div class="card-header">
              <h2 class="card-title">定位参数</h2>
              <p class="card-desc">地图和定位算法相关配置</p>
            </div>
            <div class="card-content">
              <XtParamItem
                v-for="item in positioningConfigItems"
                :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('positioning')" class="empty-state">
                <i class="el-icon-search"></i>
                <p>无匹配的配置参数</p>
              </div>
            </div>
          </div>

          <!-- 避障参数卡片 -->
          <div class="config-card" v-show="hasVisibleItems('obstacle')">
            <div class="card-header">
              <h2 class="card-title">避障参数</h2>
              <p class="card-desc">激光雷达障碍物检测配置</p>
            </div>
            <div class="card-content">
              <XtParamItem
                v-for="item in obstacleConfigItems"
                :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('obstacle')" class="empty-state">
                <i class="el-icon-search"></i>
                <p>无匹配的配置参数</p>
              </div>
            </div>
          </div>

          <!-- 规划参数卡片 -->
          <div class="config-card" v-show="hasVisibleItems('planning')">
            <div class="card-header">
              <h2 class="card-title">规划参数</h2>
              <p class="card-desc">路径规划和任务执行配置</p>
            </div>
            <div class="card-content">
              <XtParamItem
                v-for="item in planningConfigItems"
                :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"
                :options="item.options"
                :search-keyword="searchKeyword"
                @save="(value) => handleParamSave(item.key, value)"
                @cancel="handleParamCancel"
              />
              <div v-if="!hasVisibleItems('planning')" class="empty-state">
                <i class="el-icon-search"></i>
                <p>无匹配的配置参数</p>
              </div>
            </div>
          </div>

          <!-- 任务管理卡片 -->
          <div class="config-card" v-show="hasVisibleItems('task')">
            <div class="card-header">
              <h2 class="card-title">任务管理</h2>
              <p class="card-desc">自主充电和任务管理配置</p>
            </div>
            <div class="card-content">
              <XtParamItem
                v-for="item in taskConfigItems"
                :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"
                :options="item.options"
                :search-keyword="searchKeyword"
                @save="(value) => handleParamSave(item.key, value)"
                @cancel="handleParamCancel"
              />
              <div v-if="!hasVisibleItems('task')" class="empty-state">
                <i class="el-icon-search"></i>
                <p>无匹配的配置参数</p>
              </div>
            </div>
          </div>
        </div>
		</div>
					</div>
	</div>
</template>

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

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

export default {
  name: 'RuntimeConfig',
  
  components: {
    XtParamItem
  },
  
	data() {
		return {
      // 加载状态
      loading: false,
      
      // 搜索关键词
      searchKeyword: '',
      
      // 屏幕尺寸
      isLargeScreen: false,
      
      // 配置数据
      config: {
        // 控制参数
        forwardObstacleDetectionDistance: 3.0,
        reverseObstacleDetectionDistance: 1.5,
        avoidStopDistance: 0.5,
        forwardMaxFollowDistance: 5.0,
        forwardMinFollowDistance: 1.0,
        forwardFollowSpeedRatio: 0.8,
        reverseMinFollowDistance: 1.0,
        reverseFollowSpeedRatio: 0.6,
        decelerationCTEStartValue: 0.5,
        decelerationCTEMaxValue: 1.0,
        maxCTE: 2.0,
        maxDrivingSpeed: 2.0,
        maxReverseSpeed: 1.0,
        maxAcceleration: 1.0,
        maxDeceleration: 2.0,
        startupPhaseEndSpeed: 0.2,
        terminationPhaseEndSpeed: 0.1,
        maxAngularVelocity: 1.0,
        maxSteeringAngle: 0.5,
        lateralAcceleration: 1.5,
        deceleration: 2.0,
        inPlaceRotationAngleErrorTolerance: 0.1,
        nonInPlaceRotationStartupMaxAngle: 0.3,
        inPlaceRotationAngularVelocityRatio: 0.5,
        drivingSteeringAngularVelocityRatio: 0.8,
        reverseFeedCycles: 3,
        forwardPositioningForwardOffset: 0.5,
        reversePositioningRearOffset: 0.5,
        targetPointForwardDistance: 1.0,
        routeDistance: 10.0,
        obstacleDistance: 2.0,
        maxBypassAngle: 45,
        minBypassAngle: 15,
        bypassKeepDistance: 1.0,
        controller: 'PID',
        odometerTopicName: '/odom',
        enableDebugMode: false,
        maxPassageWidth: 3.0,
        minPassageWidth: 1.5,
        
        // 定位参数
        mapResolution: 0.05,
        chargingRoomMapResolution: 0.02,
        recursiveFilterParam: 0.8,
        filterParam: 0.9,
        chargingRoomFilterParam: 0.7,
        chargingRoomPositioningStep: 0.1,
        mapUpdateInterpolationDistance: 0.5,
        positioningCorrectionPointCloudTopicName: '/cloud_corrected',
        deadReckoningPointCloudTopicName: '/cloud_dead_reckoning',
        
        // 避障参数
        laserForwardObstacleDetectionStartDistance: 0.5,
        laserRearObstacleDetectionStartDistance: -1.0,
        laserLeftObstacleDetectionStartDistance: 0.3,
        laserRightObstacleDetectionStartDistance: 0.3,
        
        // 规划参数
        multiPointCycleEnabled: false,
        multiPointSortEnabled: false,
        obstacleReplanningTime: 30,
        
        // 任务管理
        autonomousChargingEnabled: false,
        autonomousChargingLowBatteryThreshold: 0.2
      },
      
      // 控制参数配置项
      controlConfigItems: [
        {
          key: 'forwardObstacleDetectionDistance',
          label: '前行障碍物探测距离',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 1,
          step: 0.1,
          min: 0
        },
        {
          key: 'reverseObstacleDetectionDistance',
          label: '倒车障碍物探测距离',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 1,
          step: 0.1,
          min: 0
        },
        {
          key: 'avoidStopDistance',
          label: '避停距离',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 1,
          step: 0.1,
          min: 0
        },
        {
          key: 'forwardMaxFollowDistance',
          label: '前行最大跟点距离',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 1,
          step: 0.1,
          min: 0
        },
        {
          key: 'forwardMinFollowDistance',
          label: '前行最小跟点距离',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 1,
          step: 0.1,
          min: 0
        },
        {
          key: 'forwardFollowSpeedRatio',
          label: '前行跟点/速度系数',
          type: 'number',
          placeholder: '0.0',
          precision: 2,
          step: 0.01,
          min: 0,
          max: 1
        },
        {
          key: 'reverseMinFollowDistance',
          label: '倒车最小跟点距离',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 1,
          step: 0.1,
          min: 0
        },
        {
          key: 'reverseFollowSpeedRatio',
          label: '倒车跟点/速度系数',
          type: 'number',
          placeholder: '0.0',
          precision: 2,
          step: 0.01,
          min: 0,
          max: 1
        },
        {
          key: 'decelerationCTEStartValue',
          label: '减速/CTE起始值',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 2,
          step: 0.01,
          min: 0
        },
        {
          key: 'decelerationCTEMaxValue',
          label: '减速/CTE最大值',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 2,
          step: 0.01,
          min: 0
        },
        {
          key: 'maxCTE',
          label: '最大CTE',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 2,
          step: 0.01,
          min: 0
        },
        {
          key: 'maxDrivingSpeed',
          label: '最大行驶速度',
          type: 'number',
          unit: 'm/s',
          placeholder: '0.0',
          precision: 1,
          step: 0.1,
          min: 0
        },
        {
          key: 'maxReverseSpeed',
          label: '最大倒车速度',
          type: 'number',
          unit: 'm/s',
          placeholder: '0.0',
          precision: 1,
          step: 0.1,
          min: 0
        },
        {
          key: 'maxAcceleration',
          label: '最大加速度',
          type: 'number',
          unit: 'm/s²',
          placeholder: '0.0',
          precision: 1,
          step: 0.1,
          min: 0
        },
        {
          key: 'maxDeceleration',
          label: '最大减速度',
          type: 'number',
          unit: 'm/s²',
          placeholder: '0.0',
          precision: 1,
          step: 0.1,
          min: 0
        },
        {
          key: 'startupPhaseEndSpeed',
          label: '启动阶段截止速度',
          type: 'number',
          unit: 'm/s',
          placeholder: '0.0',
          precision: 2,
          step: 0.01,
          min: 0
        },
        {
          key: 'terminationPhaseEndSpeed',
          label: '终止阶段截止速度',
          type: 'number',
          unit: 'm/s',
          placeholder: '0.0',
          precision: 2,
          step: 0.01,
          min: 0
        },
        {
          key: 'maxAngularVelocity',
          label: '最大角速度',
          type: 'number',
          unit: 'rad/s',
          placeholder: '0.0',
          precision: 2,
          step: 0.01,
          min: 0
        },
        {
          key: 'maxSteeringAngle',
          label: '最大转向角度',
          type: 'number',
          unit: 'rad',
          placeholder: '0.0',
          precision: 3,
          step: 0.001,
          min: 0
        },
        {
          key: 'lateralAcceleration',
          label: '侧向加速度',
          type: 'number',
          unit: 'm/s²',
          placeholder: '0.0',
          precision: 1,
          step: 0.1,
          min: 0
        },
        {
          key: 'deceleration',
          label: '减速度',
          type: 'number',
          unit: 'm/s²',
          placeholder: '0.0',
          precision: 1,
          step: 0.1,
          min: 0
        },
        {
          key: 'inPlaceRotationAngleErrorTolerance',
          label: '原地旋转角度误差容限',
          type: 'number',
          unit: 'rad',
          placeholder: '0.0',
          precision: 3,
          step: 0.001,
          min: 0
        },
        {
          key: 'nonInPlaceRotationStartupMaxAngle',
          label: '非原地旋转起步最大角度',
          type: 'number',
          unit: 'rad',
          placeholder: '0.0',
          precision: 3,
          step: 0.001,
          min: 0
        },
        {
          key: 'inPlaceRotationAngularVelocityRatio',
          label: '原地旋转角速度系数',
          type: 'number',
          placeholder: '0.0',
          precision: 2,
          step: 0.01,
          min: 0,
          max: 1
        },
        {
          key: 'drivingSteeringAngularVelocityRatio',
          label: '行驶转向角速度系数',
          type: 'number',
          placeholder: '0.0',
          precision: 2,
          step: 0.01,
          min: 0,
          max: 1
        },
        {
          key: 'reverseFeedCycles',
          label: '倒车进给周期数',
          type: 'number',
          placeholder: '0',
          step: 1,
          min: 0
        },
        {
          key: 'forwardPositioningForwardOffset',
          label: '前行定位相对车中心前向偏移',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 2,
          step: 0.01
        },
        {
          key: 'reversePositioningRearOffset',
          label: '倒车定位相对车中心后向偏移',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 2,
          step: 0.01
        },
        {
          key: 'targetPointForwardDistance',
          label: '目标点前移距离',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 1,
          step: 0.1,
          min: 0
        },
        {
          key: 'routeDistance',
          label: '路线距离',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 1,
          step: 0.1,
          min: 0
        },
        {
          key: 'obstacleDistance',
          label: '障碍距离',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 1,
          step: 0.1,
          min: 0
        },
        {
          key: 'maxBypassAngle',
          label: '最大绕障角度',
          type: 'number',
          unit: '°',
          placeholder: '0',
          step: 1,
          min: 0,
          max: 180
        },
        {
          key: 'minBypassAngle',
          label: '最小绕障角度',
          type: 'number',
          unit: '°',
          placeholder: '0',
          step: 1,
          min: 0,
          max: 180
        },
        {
          key: 'bypassKeepDistance',
          label: '绕障后保持距离',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 1,
          step: 0.1,
          min: 0
        },
        {
          key: 'controller',
          label: '控制器',
          type: 'text',
          placeholder: '请输入控制器类型'
        },
        {
          key: 'odometerTopicName',
          label: '里程计主题名',
          type: 'text',
          placeholder: '请输入主题名'
        },
        {
          key: 'enableDebugMode',
          label: '开启调试模式',
          type: 'switch'
        },
        {
          key: 'maxPassageWidth',
          label: '最大通行宽度',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 1,
          step: 0.1,
          min: 0
        },
        {
          key: 'minPassageWidth',
          label: '最小通行宽度',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 1,
          step: 0.1,
          min: 0
        }
      ],
      
      // 定位参数配置项
      positioningConfigItems: [
        {
          key: 'mapResolution',
          label: '地图分辨率',
          type: 'number',
          placeholder: '0.00',
          precision: 3,
          step: 0.001,
          min: 0
        },
        {
          key: 'chargingRoomMapResolution',
          label: '充电房地图分辨率',
          type: 'number',
          placeholder: '0.00',
          precision: 3,
          step: 0.001,
          min: 0
        },
        {
          key: 'recursiveFilterParam',
          label: '递推滤波参数',
          type: 'number',
          placeholder: '0.0',
          precision: 2,
          step: 0.01,
          min: 0,
          max: 1
        },
        {
          key: 'filterParam',
          label: '滤波参数',
          type: 'number',
          placeholder: '0.0',
          precision: 2,
          step: 0.01,
          min: 0,
          max: 1
        },
        {
          key: 'chargingRoomFilterParam',
          label: '充电房滤波参数',
          type: 'number',
          placeholder: '0.0',
          precision: 2,
          step: 0.01,
          min: 0,
          max: 1
        },
        {
          key: 'chargingRoomPositioningStep',
          label: '充电房定位步长',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 2,
          step: 0.01,
          min: 0
        },
        {
          key: 'mapUpdateInterpolationDistance',
          label: '地图更新插帧距离',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 2,
          step: 0.01,
          min: 0
        },
        {
          key: 'positioningCorrectionPointCloudTopicName',
          label: '定位修正点云主题名',
          type: 'text',
          placeholder: '请输入主题名'
        },
        {
          key: 'deadReckoningPointCloudTopicName',
          label: '推算点云主题名',
          type: 'text',
          placeholder: '请输入主题名'
        }
      ],
      
      // 避障参数配置项
      obstacleConfigItems: [
        {
          key: 'laserForwardObstacleDetectionStartDistance',
          label: '激光前方障碍探测起始距离',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 1,
          step: 0.1
        },
        {
          key: 'laserRearObstacleDetectionStartDistance',
          label: '激光后方障碍探测起始距离',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 1,
          step: 0.1
        },
        {
          key: 'laserLeftObstacleDetectionStartDistance',
          label: '激光左侧障碍探测起始距离',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 1,
          step: 0.1
        },
        {
          key: 'laserRightObstacleDetectionStartDistance',
          label: '激光右侧障碍探测起始距离',
          type: 'number',
          unit: 'm',
          placeholder: '0.0',
          precision: 1,
          step: 0.1
        }
      ],
      
      // 规划参数配置项
      planningConfigItems: [
        {
          key: 'multiPointCycleEnabled',
          label: '多点循环使能',
          type: 'switch'
        },
        {
          key: 'multiPointSortEnabled',
          label: '多点排序使能',
          type: 'switch'
        },
        {
          key: 'obstacleReplanningTime',
          label: '遇障重规划时间',
          type: 'number',
          unit: 's',
          placeholder: '0',
          step: 1,
          min: 0
        }
      ],
      
      // 任务管理配置项
      taskConfigItems: [
        {
          key: 'autonomousChargingEnabled',
          label: '自主充电使能',
          type: 'switch'
        },
        {
          key: 'autonomousChargingLowBatteryThreshold',
          label: '自主充电低电量阈值',
          type: 'number',
          placeholder: '0.0',
          precision: 2,
          step: 0.01,
          min: 0,
          max: 1
        }
      ]
    }
  },
  
  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 runtimeApi.getRuntimeParams()
        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 runtimeApi.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 'control':
          items = this.controlConfigItems
          break
        case 'positioning':
          items = this.positioningConfigItems
          break
        case 'obstacle':
          items = this.obstacleConfigItems
          break
        case 'planning':
          items = this.planningConfigItems
          break
        case 'task':
          items = this.taskConfigItems
          break
        default:
          return false
      }
      
      return items.some(item => this.isItemVisible(item))
    },

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

<style lang="scss" scoped>
.runtime-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);
  }
}

/* 配置卡片网格 */
.config-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

/* 控制参数卡片 - 全宽显示 */
.control-card {
  width: 100%;
  
  .control-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 0;
    
    @media (max-width: 1024px) {
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }
    
    @media (max-width: 768px) {
      grid-template-columns: 1fr;
    }
  }
}

/* 其他参数分组网格 */
.other-params-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-5);
  
  &.two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 配置卡片样式 */
.config-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.05);
  border: 1px solid var(--color-border-primary);
  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);
    border-color: var(--color-border-secondary);
  }
  
  .card-header {
    padding: var(--spacing-5);
    border-bottom: 1px solid var(--color-border-secondary);
    
    .card-title {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-primary);
      margin: 0 0 var(--spacing-1) 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;
    }
  }
  
  .card-content {
    padding: var(--spacing-4) var(--spacing-5) var(--spacing-5);
  }
}

/* 空状态样式 */
.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: 768px) {
  .runtime-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);
    }
  }
  
  .config-cards {
    gap: var(--spacing-4);
  }
  
  .other-params-grid {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-4);
  }
  
  .config-card {
    .card-header {
      padding: var(--spacing-4);
    }
    
    .card-content {
      padding: var(--spacing-3) var(--spacing-4) var(--spacing-4);
    }
  }
}

// 暗色主题适配
html.dark {
  .runtime-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);
          }
        }
      }
    }
  }
  
  .config-card {
    background: var(--color-bg-tertiary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    border-color: var(--color-border-tertiary);
    
    &:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
      border-color: var(--color-border-secondary);
    }
    
    .card-header {
      border-bottom-color: var(--color-border-tertiary);
      
      .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>