feat: 监控页搜索勾选与状态弹窗切换到 TDesign

src/styles/prototype.css

@@ -122,10 +122,9 @@ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width:
 .device-card:hover { border-color: #aab9c8; transform: translateY(-1px); }
 .device-card.active { border-color: #5a93d4; background: #f4f8fd; box-shadow: inset 3px 0 var(--blue); }
 .device-card.multi-selected { border-color: var(--blue); box-shadow: inset 3px 0 var(--blue); background: #f4f8fd; }
-.device-select-checkbox { position: absolute; z-index: 2; top: 10px; left: 8px; width: 16px; height: 16px; display: block; cursor: pointer; }
-.device-select-checkbox input { position: absolute; opacity: 0; }
-.device-select-checkbox > span { width: 15px; height: 15px; display: block; border: 1px solid #b8c7d2; border-radius: 3px; background: #fff; }
-.device-select-checkbox input:checked + span { border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 3px #fff; }
+.device-select-checkbox { position: absolute; z-index: 2; top: 10px; left: 8px; width: auto; height: auto; display: flex; align-items: center; cursor: pointer; }
+.device-select-checkbox .t-checkbox { margin: 0; }
+.device-select-checkbox .t-checkbox__label { display: none; }
 .device-card-main { width: 100%; min-height: 68px; padding: 11px 11px 11px 34px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; color: inherit; background: transparent; text-align: left; }
 .device-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
 .device-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
@@ -485,6 +484,8 @@ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width:
 .modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }
 .modal-actions button { height: 38px; border-radius: 5px; font-size: 13px; }.modal-actions .cancel { background: #fff; border: 1px solid var(--line); }.modal-actions .confirm { color: #fff; background: var(--blue); }
 .dock-status-dialog { width: min(700px, calc(100vw - 32px)); padding: 0; overflow: hidden; text-align: left; }
+.dock-status-dialog .t-dialog__header { min-height: 58px; padding: 0 18px; border-bottom: 1px solid var(--line); }
+.dock-status-dialog .t-dialog__body { padding: 0; }
 .dock-status-header { min-height: 58px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); cursor: grab; }
 .dock-status-header:active { cursor: grabbing; }
 .dock-status-header > div { display: flex; flex-direction: column; gap: 4px; }.dock-status-header span { color: var(--muted); font-size: 10px; }.dock-status-header h3 { margin: 0; font-size: 18px; }

src/views/MonitorView/MonitorView.vue

@@ -6,10 +6,11 @@
         <button class="icon-button" title="收起面板" @click="clearSelection"><svg><use href="#i-x" /></svg></button>
       </div>
 
-      <label class="device-search">
-        <svg><use href="#i-search" /></svg>
-        <input v-model="search" type="text" placeholder="搜索机巢或无人机" />
-      </label>
+      <div class="device-search">
+        <t-input v-model="search" clearable placeholder="搜索机巢或无人机">
+          <template #prefix-icon><t-icon name="search" /></template>
+        </t-input>
+      </div>
 
       <div class="filter-row">
         <button class="filter" :class="{ active: filter === 'all' }" @click="filter = 'all'">全部 <b>{{ filterCounts.all }}</b></button>
@@ -25,10 +26,12 @@
       <div class="device-list">
         <template v-for="dock in filteredDocks" :key="dock.id">
           <article class="device-card" :class="{ active: isDockCardActive(dock), 'multi-selected': selectedDockIds.has(dock.id) }">
-            <label class="device-select-checkbox" :title="`选择${dock.name}`" @click.stop>
-              <input type="checkbox" :checked="selectedDockIds.has(dock.id)" @change="toggleDockSelection(dock.id)" />
-              <span></span>
-            </label>
+            <div class="device-select-checkbox" :title="`选择${dock.name}`" @click.stop>
+              <t-checkbox
+                :checked="selectedDockIds.has(dock.id)"
+                @change="(checked) => setDockSelection(dock.id, checked)"
+              />
+            </div>
             <button class="device-card-main" @click="select(dock.id)">
               <span class="dock-glyph" :class="{ alarm: dock.statusClass === 'alarm', offline: dock.statusClass === 'offline' }">
                 <svg><use href="#i-home" /></svg>
@@ -301,17 +304,14 @@
   </section>
 
 
-  <div class="modal-backdrop" :class="{ open: dockStatusOpen }" :aria-hidden="!dockStatusOpen" @click.self="closeDockStatus">
-    <div class="modal dock-status-dialog" role="dialog" aria-modal="true" aria-labelledby="dockStatusTitle">
-      <header class="dock-status-header">
-        <div>
-          <span>机巢运行状态</span>
-          <h3 id="dockStatusTitle">{{ dockStatusTitle }}</h3>
-        </div>
-        <button class="icon-button" type="button" title="关闭详情" @click="closeDockStatus">
-          <svg><use href="#i-x" /></svg>
-        </button>
-      </header>
+  <t-dialog
+    v-model:visible="dockStatusOpen"
+    :header="dockStatusTitle"
+    width="700px"
+    :footer="false"
+    dialog-class-name="dock-status-dialog"
+    @close="closeDockStatus"
+  >
     <div class="dock-status-body">
       <div class="dock-status-grid">
         <div>
@@ -391,8 +391,7 @@
         </div>
       </section>
     </div>
-    </div>
-  </div>
+  </t-dialog>
 </template>
 
 <script setup>
@@ -1357,9 +1356,9 @@ function clearDockSelection() {
   selectedDockIds.clear()
 }
 
-function toggleDockSelection(id) {
-  if (selectedDockIds.has(id)) selectedDockIds.delete(id)
-  else selectedDockIds.add(id)
+function setDockSelection(id, checked) {
+  if (checked) selectedDockIds.add(id)
+  else selectedDockIds.delete(id)
 }
 
 function selectAllDocks() {
@@ -1573,3 +1572,32 @@ async function runCommand(title, desc) {
   }
 }
 </script>
+
+<style scoped>
+.device-search {
+  height: auto;
+  margin-top: 16px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+.device-search :deep(.t-input) {
+  width: 100%;
+}
+.device-select-checkbox {
+  width: auto;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.device-select-checkbox :deep(.t-checkbox) {
+  margin: 0;
+}
+.device-select-checkbox :deep(.t-checkbox__input) {
+  margin: 0;
+}
+.dock-status-body {
+  padding: 13px 18px 15px;
+}
+</style>