feat 电台设置

src/components.d.ts

@@ -23,8 +23,10 @@ declare module 'vue' {
     MessageList: typeof import('./components/message/list.vue')['default']
     SettingsProjectForm: typeof import('./components/settings/projectForm.vue')['default']
     SettingsProjectSettings: typeof import('./components/settings/projectSettings.vue')['default']
+    SettingsRadioConfig: typeof import('./components/settings/radioConfig.vue')['default']
     SettingsRadioSettings: typeof import('./components/settings/radioSettings.vue')['default']
     SettingsSensor: typeof import('./components/settings/sensor.vue')['default']
+    SettingsSensorConfig: typeof import('./components/settings/sensorConfig.vue')['default']
     SettingsWifiNetwork: typeof import('./components/settings/wifiNetwork.vue')['default']
     SettingsWifiSettings: typeof import('./components/settings/wifiSettings.vue')['default']
   }

src/components/settings/radioConfig.vue

@@ -164,13 +164,4 @@ const dataTransType = ref('TCP')
   display: flex;
   gap: 16px;
 }
-
-/* 给 wd-input 添加 1px 边框 */
-wd-input {
-  border: 1px solid #d9d9d9;
-  border-radius: 6px;
-  padding: 6px 8px;
-  box-sizing: border-box;
-  display: inline-block;
-}
 </style>

src/components/settings/radioSettings.vue

@@ -3,12 +3,21 @@
 
 <template>
   <view class="radio-settings">
-    <text>电台设置内容</text>
+    <!-- 设备卡片 -->
+    <device-card />
+
+    <!-- 电台配置 -->
+    <settings-radioConfig />
+
+    <!-- 设备信息 -->
+    <device-info />
   </view>
 </template>
 
 <style scoped>
 .radio-settings {
-  min-height: 280px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 </style>

src/components/settings/sensor.vue

@@ -2,13 +2,22 @@
 </script>
 
 <template>
-  <view class="sensor">
+  <view class="sensor-settings">
-    <text>传感器内容</text>
+    <!-- 设备卡片 -->
+    <device-card />
+
+    <!-- 传感器配置 -->
+    <settings-sensorConfig />
+
+    <!-- 设备信息 -->
+    <device-info />
   </view>
 </template>
 
 <style scoped>
-.sensor {
+.sensor-settings {
-  min-height: 280px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 </style>

src/components/settings/sensorConfig.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+const sensorList = ref([
+  { name: '压实度', id: 0, position: '前轮侧边' },
+  { name: '振动频率', id: 1, position: '前轮侧边' },
+])
+
+function handleAdd() {
+  console.log('添加传感器')
+}
+
+function handleDelete(index: number) {
+  console.log('删除传感器', index)
+}
+</script>
+
+<template>
+  <view class="sensor-card">
+    <text class="card-title">
+      传感器
+    </text>
+
+    <view class="sensor-table">
+      <!-- 表头 -->
+      <view class="table-header">
+        <text class="col-name">
+          名称
+        </text>
+        <text class="col-id">
+          ID
+        </text>
+        <text class="col-position">
+          安装位置
+        </text>
+        <text class="col-action">
+          操作
+        </text>
+      </view>
+
+      <!-- 表格内容 -->
+      <view v-for="(sensor, index) in sensorList" :key="index" class="table-row">
+        <view class="col-name">
+          <wd-input v-model="sensor.name" placeholder="请输入名称" />
+        </view>
+        <text class="col-id">
+          {{ sensor.id }}
+        </text>
+        <view class="col-position">
+          <wd-input v-model="sensor.position" placeholder="请输入安装位置" />
+        </view>
+        <view class="col-action">
+          <view v-if="index === sensorList.length - 1" class="action-btn add" @tap="handleAdd">
+            <wd-icon name="add" size="16px" color="#fff" />
+          </view>
+          <view v-else class="action-btn delete" @tap="handleDelete(index)">
+            <wd-icon name="close" size="16px" color="#fff" />
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.sensor-card {
+  background-color: #ffffff;
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.card-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 16px;
+  display: block;
+}
+
+.sensor-table {
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.table-header {
+  display: flex;
+  background-color: #fafafa;
+  padding: 12px 0;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.table-row {
+  display: flex;
+  padding: 12px 0;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.table-row:last-child {
+  border-bottom: none;
+}
+
+.col-name {
+  flex: 2;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+}
+
+.col-id {
+  flex: 1;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: #333;
+}
+
+.col-position {
+  flex: 2;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+}
+
+.col-action {
+  flex: 1;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.table-header .col-name,
+.table-header .col-id,
+.table-header .col-position,
+.table-header .col-action {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+}
+
+.action-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.action-btn.add {
+  background-color: #1890ff;
+}
+
+.action-btn.delete {
+  background-color: #ff4d4f;
+}
+</style>