From 76e90a8b9e0b3bcdb521a11ca33681d381fe9d62 Mon Sep 17 00:00:00 2001
From: xiaosi <2652281683@qq.com>
Date: Fri, 28 Aug 2026 16:42:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E6=8E=A7=E4=BB=B6=E5=88=87=E6=8D=A2=E5=88=B0?=
 =?UTF-8?q?=20TDesign?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DockEditModal.vue      | 27 +++++----
 src/views/DevicesView/DevicesView.vue | 86 ++++++++++++++++++---------
 2 files changed, 76 insertions(+), 37 deletions(-)

diff --git a/src/components/DockEditModal.vue b/src/components/DockEditModal.vue
index 8df602c..9defbe9 100644
--- a/src/components/DockEditModal.vue
+++ b/src/components/DockEditModal.vue
@@ -6,14 +6,14 @@
         <button class="icon-button" type="button" :disabled="saving" @click="close"><svg><use href="#i-x" /></svg></button>
       </header>
       <form novalidate @submit.prevent="submit">
-        <label><span>机巢名称<b>*</b></span><input v-model="form.name" type="text" maxlength="64" placeholder="例如：青山湖 03 号机巢" /></label>
-        <label><span>机巢 SN</span><input :value="dock?.sn || ''" type="text" readonly /></label>
-        <label><span>通信卡 ICCID</span><input :value="dock?.iccid || ''" type="text" readonly /></label>
+        <label><span>机巢名称<b>*</b></span><t-input v-model="form.name" :maxlength="64" placeholder="例如：青山湖 03 号机巢" /></label>
+        <label><span>机巢 SN</span><t-input :model-value="dock?.sn || ''" readonly /></label>
+        <label><span>通信卡 ICCID</span><t-input :model-value="dock?.iccid || ''" readonly /></label>
         <div class="form-row">
-          <label><span>经度<b>*</b></span><input v-model="form.longitude" type="number" min="-180" max="180" step="any" placeholder="例如：120.219375" /></label>
-          <label><span>纬度<b>*</b></span><input v-model="form.latitude" type="number" min="-90" max="90" step="any" placeholder="例如：30.259244" /></label>
+          <label><span>经度<b>*</b></span><t-input-number v-model="form.longitude" theme="normal" :min="-180" :max="180" :step="0.000001" placeholder="例如：120.219375" style="width: 100%" /></label>
+          <label><span>纬度<b>*</b></span><t-input-number v-model="form.latitude" theme="normal" :min="-90" :max="90" :step="0.000001" placeholder="例如：30.259244" style="width: 100%" /></label>
         </div>
-        <label><span>设备位置<em>选填</em></span><input v-model="form.location" type="text" maxlength="128" placeholder="例如：青山湖科技城 C 区" /></label>
+        <label><span>设备位置<em>选填</em></span><t-input v-model="form.location" :maxlength="128" placeholder="例如：青山湖科技城 C 区" /></label>
         <div class="form-error">{{ error }}</div>
         <footer>
           <button class="plain-command" type="button" :disabled="saving" @click="close">取消</button>
@@ -35,7 +35,7 @@ const props = defineProps({
 })
 const emit = defineEmits(['close', 'saved'])
 
-const form = reactive({ name: '', longitude: '', latitude: '', location: '' })
+const form = reactive({ name: '', longitude: undefined, latitude: undefined, location: '' })
 const error = ref('')
 const saving = ref(false)
 
@@ -43,8 +43,8 @@ watch(() => props.visible, (visible) => {
   if (!visible || !props.dock) return
   Object.assign(form, {
     name: props.dock.name || '',
-    longitude: props.dock.longitude ?? '',
-    latitude: props.dock.latitude ?? '',
+    longitude: props.dock.longitude == null || props.dock.longitude === '' ? undefined : Number(props.dock.longitude),
+    latitude: props.dock.latitude == null || props.dock.latitude === '' ? undefined : Number(props.dock.latitude),
     location: props.dock.location === '--' ? '' : props.dock.location || ''
   })
   error.value = ''
@@ -60,7 +60,7 @@ async function submit() {
   const latitude = Number(form.latitude)
 
   error.value = ''
-  if (!name || form.longitude === '' || form.latitude === '') {
+  if (!name || form.longitude === '' || form.longitude == null || form.latitude === '' || form.latitude == null) {
     error.value = '请填写机巢名称、经度和纬度。'
     return
   }
@@ -90,3 +90,10 @@ async function submit() {
   }
 }
 </script>
+
+<style scoped>
+.add-dock-dialog :deep(.t-input),
+.add-dock-dialog :deep(.t-input-number) {
+  width: 100%;
+}
+</style>
diff --git a/src/views/DevicesView/DevicesView.vue b/src/views/DevicesView/DevicesView.vue
index b678354..5f8ecef 100644
--- a/src/views/DevicesView/DevicesView.vue
+++ b/src/views/DevicesView/DevicesView.vue
@@ -26,21 +26,14 @@
       </div>
 
       <div class="asset-toolbar">
-        <div class="asset-search"><svg><use href="#i-search" /></svg><input v-model="search" type="text" placeholder="搜索设备名称、编号或 SN" /></div>
+        <div class="asset-search">
+          <t-input v-model="search" clearable placeholder="搜索设备名称、编号或 SN">
+            <template #prefix-icon><t-icon name="search" /></template>
+          </t-input>
+        </div>
         <div class="toolbar-group">
-          <select v-model="statusFilter" aria-label="设备状态">
-            <option value="">全部状态</option>
-            <option value="online">在线</option>
-            <option value="mission">任务中</option>
-            <option value="alarm">告警</option>
-            <option value="offline">离线</option>
-            <option value="pending">待连接</option>
-          </select>
-          <select v-model="bindingFilter" aria-label="绑定状态">
-            <option value="">全部绑定状态</option>
-            <option value="bound">已绑定</option>
-            <option value="unbound">未绑定</option>
-          </select>
+          <t-select v-model="statusFilter" :options="statusOptions" placeholder="全部状态" style="width: 140px" />
+          <t-select v-model="bindingFilter" :options="bindingOptions" placeholder="全部绑定状态" style="width: 160px" />
           <button class="plain-command" type="button" @click="resetFilters">重置</button>
         </div>
       </div>
@@ -199,14 +192,14 @@
           <button class="icon-button" type="button" @click="addDockVisible = false"><svg><use href="#i-x" /></svg></button>
         </header>
         <form novalidate @submit.prevent="submitAddDock">
-          <label><span>机巢名称<b>*</b></span><input v-model="dockForm.name" type="text" maxlength="30" placeholder="例如：青山湖 03 号机巢" /></label>
-          <label><span>机巢 SN<b>*</b></span><input v-model="dockForm.sn" type="text" maxlength="40" placeholder="请输入机身铭牌 SN" /></label>
-          <label><span>通信卡 ICCID<b>*</b></span><input v-model="dockForm.iccid" type="text" maxlength="22" inputmode="numeric" placeholder="请输入通信卡 ICCID" /></label>
+          <label><span>机巢名称<b>*</b></span><t-input v-model="dockForm.name" :maxlength="30" placeholder="例如：青山湖 03 号机巢" /></label>
+          <label><span>机巢 SN<b>*</b></span><t-input v-model="dockForm.sn" :maxlength="40" placeholder="请输入机身铭牌 SN" /></label>
+          <label><span>通信卡 ICCID<b>*</b></span><t-input v-model="dockForm.iccid" :maxlength="22" placeholder="请输入通信卡 ICCID" /></label>
           <div class="form-row">
-            <label><span>经度<b>*</b></span><input v-model.number="dockForm.longitude" type="number" min="-180" max="180" step="any" placeholder="例如：120.219375" /></label>
-            <label><span>纬度<b>*</b></span><input v-model.number="dockForm.latitude" type="number" min="-90" max="90" step="any" placeholder="例如：30.259244" /></label>
+            <label><span>经度<b>*</b></span><t-input-number v-model="dockForm.longitude" theme="normal" :min="-180" :max="180" :step="0.000001" placeholder="例如：120.219375" style="width: 100%" /></label>
+            <label><span>纬度<b>*</b></span><t-input-number v-model="dockForm.latitude" theme="normal" :min="-90" :max="90" :step="0.000001" placeholder="例如：30.259244" style="width: 100%" /></label>
           </div>
-          <label><span>设备位置<em>选填</em></span><input v-model="dockForm.location" type="text" maxlength="50" placeholder="例如：青山湖科技城 C 区" /></label>
+          <label><span>设备位置<em>选填</em></span><t-input v-model="dockForm.location" :maxlength="50" placeholder="例如：青山湖科技城 C 区" /></label>
           <div class="form-error">{{ addDockError }}</div>
           <footer>
             <button class="plain-command" type="button" @click="addDockVisible = false">取消</button>
@@ -235,10 +228,14 @@
           </div>
           <label>
             <span>目标固件版本</span>
-            <select v-model="upgradeFirmwareId">
-              <option :value="null" disabled>{{ firmwareList.length ? '选择目标版本' : '暂无已发布固件' }}</option>
-              <option v-for="f in firmwareList" :key="f.id" :value="f.id">{{ firmwareOptionLabel(f) }}</option>
-            </select>
+            <t-select
+              v-model="upgradeFirmwareId"
+              :options="upgradeFirmwareOptions"
+              :placeholder="firmwareList.length ? '选择目标版本' : '暂无已发布固件'"
+              :disabled="!firmwareList.length"
+              clearable
+              style="width: 100%"
+            />
           </label>
           <div class="firmware-checks">
             <span>升级前请确认设备状态</span>
@@ -285,6 +282,19 @@ onMounted(async () => {
 const search = ref('')
 const statusFilter = ref('')
 const bindingFilter = ref('')
+const statusOptions = [
+  { label: '全部状态', value: '' },
+  { label: '在线', value: 'online' },
+  { label: '任务中', value: 'mission' },
+  { label: '告警', value: 'alarm' },
+  { label: '离线', value: 'offline' },
+  { label: '待连接', value: 'pending' }
+]
+const bindingOptions = [
+  { label: '全部绑定状态', value: '' },
+  { label: '已绑定', value: 'bound' },
+  { label: '未绑定', value: 'unbound' }
+]
 const loadedAt = ref('')
 const drawerOpen = ref(false)
 const drawerId = ref(null)
@@ -292,13 +302,16 @@ const addDockVisible = ref(false)
 const editDockVisible = ref(false)
 const editDockRecord = ref(null)
 const addDockError = ref('')
-const dockForm = reactive({ name: '', sn: '', iccid: '', longitude: '', latitude: '', location: '' })
+const dockForm = reactive({ name: '', sn: '', iccid: '', longitude: undefined, latitude: undefined, location: '' })
 const firmwareList = ref([])
 const upgradeFirmwareId = ref(null)
 const upgrading = ref(false)
 const firmwareVisible = ref(false)
 const firmwareError = ref('')
 const firmwareRecord = computed(() => (drawerId.value ? devices.record(drawerId.value) : null))
+const upgradeFirmwareOptions = computed(() =>
+  firmwareList.value.map((f) => ({ label: firmwareOptionLabel(f), value: f.id }))
+)
 
 const drawerRecord = computed(() => (drawerId.value ? devices.record(drawerId.value) : null))
 
@@ -430,7 +443,7 @@ async function handleDockSaved() {
 }
 
 function openAddDock() {
-  Object.assign(dockForm, { name: '', sn: '', iccid: '', longitude: '', latitude: '', location: '' })
+  Object.assign(dockForm, { name: '', sn: '', iccid: '', longitude: undefined, latitude: undefined, location: '' })
   addDockError.value = ''
   addDockVisible.value = true
 }
@@ -443,7 +456,7 @@ async function submitAddDock() {
   const longitude = Number(dockForm.longitude)
   const latitude = Number(dockForm.latitude)
 
-  if (!name || !sn || !iccid || dockForm.longitude === '' || dockForm.latitude === '') {
+  if (!name || !sn || !iccid || dockForm.longitude === '' || dockForm.longitude == null || dockForm.latitude === '' || dockForm.latitude == null) {
     addDockError.value = '请填写机巢名称、机巢 SN、通信卡 ICCID、经度和纬度。'
     return
   }
@@ -526,3 +539,22 @@ async function doUpgrade() {
   }
 }
 </script>
+
+<style scoped>
+.asset-search :deep(.t-input) {
+  width: 100%;
+}
+.asset-search {
+  border: 0;
+  padding: 0;
+  height: auto;
+}
+.toolbar-group :deep(.t-select) {
+  flex-shrink: 0;
+}
+.add-dock-dialog :deep(.t-input),
+.add-dock-dialog :deep(.t-input-number),
+.firmware-dialog :deep(.t-select) {
+  width: 100%;
+}
+</style>