From 756ee6c872736da6a2e0b9a4cce834bf0c129795 Mon Sep 17 00:00:00 2001
From: xiaosi <2652281683@qq.com>
Date: Fri, 28 Aug 2026 19:14:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=BE=E5=A4=87=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E5=88=87=E6=8D=A2=E5=88=B0=20t-dialog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DockEditModal.vue      |  66 ++++++++-----
 src/views/DevicesView/DevicesView.vue | 134 ++++++++++++++------------
 2 files changed, 113 insertions(+), 87 deletions(-)

diff --git a/src/components/DockEditModal.vue b/src/components/DockEditModal.vue
index 9defbe9..b2347dc 100644
--- a/src/components/DockEditModal.vue
+++ b/src/components/DockEditModal.vue
@@ -1,27 +1,32 @@
 <template>
-  <div class="modal-backdrop" :class="{ open: visible }" @click.self="close">
-    <div class="modal add-dock-dialog" role="dialog" aria-modal="true" aria-label="编辑机巢">
-      <header>
-        <div><span>设备管理</span><h3>编辑机巢</h3></div>
-        <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><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><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><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>
-          <button class="primary-command" type="submit" :disabled="saving">{{ saving ? '保存中…' : '保存修改' }}</button>
-        </footer>
-      </form>
-    </div>
-  </div>
+  <t-dialog
+    :visible="visible"
+    header="编辑机巢"
+    width="520px"
+    dialog-class-name="add-dock-dialog"
+    placement="center"
+    :close-on-overlay-click="!saving"
+    :close-on-esc-keydown="!saving"
+    :close-btn="!saving"
+    @update:visible="onVisibleUpdate"
+    @close="close"
+  >
+    <form novalidate @submit.prevent="submit">
+      <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><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><t-input v-model="form.location" :maxlength="128" placeholder="例如：青山湖科技城 C 区" /></label>
+      <div class="form-error">{{ error }}</div>
+    </form>
+    <template #footer>
+      <button class="plain-command" type="button" :disabled="saving" @click="close">取消</button>
+      <button class="primary-command" type="button" :disabled="saving" @click="submit">{{ saving ? '保存中…' : '保存修改' }}</button>
+    </template>
+  </t-dialog>
 </template>
 
 <script setup>
@@ -54,6 +59,10 @@ function close() {
   if (!saving.value) emit('close')
 }
 
+function onVisibleUpdate(next) {
+  if (!next) close()
+}
+
 async function submit() {
   const name = form.name.trim()
   const longitude = Number(form.longitude)
@@ -91,9 +100,14 @@ async function submit() {
 }
 </script>
 
-<style scoped>
-.add-dock-dialog :deep(.t-input),
-.add-dock-dialog :deep(.t-input-number) {
+<style>
+.add-dock-dialog .t-input,
+.add-dock-dialog .t-input-number {
   width: 100%;
 }
+.add-dock-dialog .t-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
 </style>
diff --git a/src/views/DevicesView/DevicesView.vue b/src/views/DevicesView/DevicesView.vue
index 5f8ecef..1f5e938 100644
--- a/src/views/DevicesView/DevicesView.vue
+++ b/src/views/DevicesView/DevicesView.vue
@@ -185,70 +185,70 @@
       </template>
     </aside>
 
-    <div class="modal-backdrop" :class="{ open: addDockVisible }" @click.self="addDockVisible = false">
-      <div class="modal add-dock-dialog" role="dialog" aria-modal="true" aria-label="添加机巢">
-        <header>
-          <div><span>设备管理</span><h3>添加机巢</h3></div>
-          <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><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><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><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>
-            <button class="primary-command" type="submit">确认添加</button>
-          </footer>
-        </form>
-      </div>
-    </div>
+    <t-dialog
+      v-model:visible="addDockVisible"
+      header="添加机巢"
+      width="520px"
+      dialog-class-name="add-dock-dialog"
+      placement="center"
+    >
+      <form novalidate @submit.prevent="submitAddDock">
+        <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><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><t-input v-model="dockForm.location" :maxlength="50" placeholder="例如：青山湖科技城 C 区" /></label>
+        <div class="form-error">{{ addDockError }}</div>
+      </form>
+      <template #footer>
+        <button class="plain-command" type="button" @click="addDockVisible = false">取消</button>
+        <button class="primary-command" type="button" @click="submitAddDock">确认添加</button>
+      </template>
+    </t-dialog>
 
     <DockEditModal :visible="editDockVisible" :dock="editDockRecord" @close="editDockVisible = false" @saved="handleDockSaved" />
 
-    <div class="modal-backdrop" :class="{ open: firmwareVisible }" @click.self="firmwareVisible = false">
-      <div class="modal add-dock-dialog firmware-dialog" role="dialog" aria-modal="true" aria-label="固件升级">
-        <header>
-          <div><span>设备管理 · 固件维护</span><h3>固件升级</h3></div>
-          <button class="icon-button" type="button" @click="firmwareVisible = false"><svg><use href="#i-x" /></svg></button>
-        </header>
-        <div class="firmware-content" v-if="firmwareRecord">
-          <div class="firmware-device">
-            <span class="table-asset-icon"><svg><use href="#i-home" /></svg></span>
-            <div>
-              <strong>{{ firmwareRecord.name }}</strong>
-              <small>当前版本 {{ firmwareRecord.version }}</small>
-            </div>
-            <i class="status" :class="firmwareRecord.statusClass">{{ firmwareRecord.status }}</i>
+    <t-dialog
+      v-model:visible="firmwareVisible"
+      header="固件升级"
+      width="500px"
+      dialog-class-name="firmware-dialog"
+      placement="center"
+    >
+      <div class="firmware-content" v-if="firmwareRecord">
+        <div class="firmware-device">
+          <span class="table-asset-icon"><svg><use href="#i-home" /></svg></span>
+          <div>
+            <strong>{{ firmwareRecord.name }}</strong>
+            <small>当前版本 {{ firmwareRecord.version }}</small>
           </div>
-          <label>
-            <span>目标固件版本</span>
-            <t-select
-              v-model="upgradeFirmwareId"
-              :options="upgradeFirmwareOptions"
-              :placeholder="firmwareList.length ? '选择目标版本' : '暂无已发布固件'"
-              :disabled="!firmwareList.length"
-              clearable
-              style="width: 100%"
-            />
-          </label>
-          <div class="firmware-checks">
-            <span>升级前请确认设备状态</span>
-          </div>
-          <p class="firmware-note">升级期间机巢将暂时停止远程控制和视频服务，请确认当前没有飞行任务。升级完成后设备会自动重启并恢复连接。</p>
-          <div class="form-error">{{ firmwareError }}</div>
+          <i class="status" :class="firmwareRecord.statusClass">{{ firmwareRecord.status }}</i>
         </div>
-        <footer class="firmware-footer">
-          <button class="plain-command" type="button" @click="firmwareVisible = false">取消</button>
-          <button class="primary-command" type="button" :disabled="!upgradeFirmwareId || upgrading" @click="doUpgrade">{{ upgrading ? '下发中…' : '开始升级' }}</button>
-        </footer>
+        <label>
+          <span>目标固件版本</span>
+          <t-select
+            v-model="upgradeFirmwareId"
+            :options="upgradeFirmwareOptions"
+            :placeholder="firmwareList.length ? '选择目标版本' : '暂无已发布固件'"
+            :disabled="!firmwareList.length"
+            clearable
+            style="width: 100%"
+          />
+        </label>
+        <div class="firmware-checks">
+          <span>升级前请确认设备状态</span>
+        </div>
+        <p class="firmware-note">升级期间机巢将暂时停止远程控制和视频服务，请确认当前没有飞行任务。升级完成后设备会自动重启并恢复连接。</p>
+        <div class="form-error">{{ firmwareError }}</div>
       </div>
-    </div>
+      <template #footer>
+        <button class="plain-command" type="button" @click="firmwareVisible = false">取消</button>
+        <button class="primary-command" type="button" :disabled="!upgradeFirmwareId || upgrading" @click="doUpgrade">{{ upgrading ? '下发中…' : '开始升级' }}</button>
+      </template>
+    </t-dialog>
   </section>
 </template>
 
@@ -552,9 +552,21 @@ async function doUpgrade() {
 .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) {
+</style>
+
+<style>
+.add-dock-dialog .t-input,
+.add-dock-dialog .t-input-number,
+.firmware-dialog .t-select {
   width: 100%;
 }
+.add-dock-dialog .t-dialog__footer,
+.firmware-dialog .t-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.firmware-dialog .firmware-content {
+  padding: 0;
+}
 </style>