feat: 添加发现设备页面

src/renderer/views/bonjour/BonjourView.vue

@@ -0,0 +1,134 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import { Search, Refresh } from '@element-plus/icons-vue';
+
+const services = ref([]);
+const loading = ref(false);
+let unsubscribe = null;
+
+const fetchServices = async () => {
+  loading.value = true;
+  try {
+    services.value = await window.bonjour.getServices();
+  } catch (error) {
+    console.error('Failed to fetch bonjour services:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  fetchServices();
+  unsubscribe = window.bonjour.onServicesUpdated((updatedServices) => {
+    services.value = updatedServices;
+  });
+});
+
+onUnmounted(() => {
+  if (unsubscribe) unsubscribe();
+});
+</script>
+
+<template>
+  <div class="bonjour-container">
+    <div class="header">
+      <div class="title-section">
+        <h2 class="title">发现设备</h2>
+        <p class="subtitle">局域网内已发现的 mDNS / Bonjour 设备</p>
+      </div>
+      <el-button :icon="Refresh" :loading="loading" @click="fetchServices" circle />
+    </div>
+
+    <el-table :data="services" style="width: 100%" v-loading="loading">
+      <el-table-column prop="name" label="名称" min-width="150" show-overflow-tooltip />
+      <el-table-column prop="type" label="类型" width="100" />
+      <el-table-column prop="protocol" label="协议" width="80" />
+      <el-table-column prop="port" label="端口" width="80" />
+      <el-table-column label="地址" min-width="180">
+        <template #default="scope">
+          <div v-for="addr in scope.row.addresses" :key="addr" class="address-tag">
+            {{ addr }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="TXT 记录" min-width="200">
+        <template #default="scope">
+          <div v-if="Object.keys(scope.row.txt || {}).length > 0">
+            <div v-for="(val, key) in scope.row.txt" :key="key" class="txt-record">
+              <span class="txt-key">{{ key }}:</span> {{ val }}
+            </div>
+          </div>
+          <span v-else class="empty-txt">-</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div v-if="services.length === 0 && !loading" class="empty-state">
+      <el-empty description="暂未发现设备" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bonjour-container {
+  padding: 24px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.subtitle {
+  margin: 4px 0 0;
+  font-size: 14px;
+  color: var(--el-text-color-secondary);
+}
+
+.address-tag {
+  font-family: monospace;
+  font-size: 12px;
+  background-color: var(--el-fill-color-light);
+  padding: 2px 6px;
+  border-radius: 4px;
+  display: inline-block;
+  margin: 2px;
+}
+
+.txt-record {
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.txt-key {
+  font-weight: bold;
+  color: var(--el-color-primary);
+}
+
+.empty-txt {
+  color: var(--el-text-color-placeholder);
+}
+
+.empty-state {
+  margin-top: 60px;
+}
+
+:deep(.el-table) {
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+}
+</style>