mod: ui

frontend/src/components/PeerCard.vue

@@ -1,13 +1,20 @@
 <script setup lang="ts">
+// --- Vue 核心 ---
 import { computed, ref, watch } from "vue";
-import { Peer } from "../../bindings/mesh-drop/internal/discovery/models";
-import { Dialogs, Events, Clipboard } from "@wailsio/runtime";
+
+// --- 组件 ---
+import FileSendModal from "./modals/FileSendModal.vue";
+import TextSendModal from "./modals/TextSendModal.vue";
+
+// --- Wails & 后端绑定 ---
+import { Dialogs, Clipboard } from "@wailsio/runtime";
 import {
-  SendFiles,
   SendFolder,
   SendText,
 } from "../../bindings/mesh-drop/internal/transfer/service";
+import { Peer } from "../../bindings/mesh-drop/internal/discovery/models";
 
+// --- 属性 & 事件 ---
 const props = defineProps<{
   peer: Peer;
 }>();
@@ -16,39 +23,10 @@ const emit = defineEmits<{
   (e: "transferStarted"): void;
 }>();
 
-const ips = computed(() => {
-  if (!props.peer.routes) return [];
-  return Object.keys(props.peer.routes);
-});
-
+// --- 状态 ---
 const selectedIp = ref<string>("");
-
-watch(
-  ips,
-  (newIps) => {
-    if (newIps.length > 0) {
-      if (!selectedIp.value || !newIps.includes(selectedIp.value)) {
-        selectedIp.value = newIps[0];
-      }
-    } else {
-      selectedIp.value = "";
-    }
-  },
-  { immediate: true },
-);
-
-const osIcon = computed(() => {
-  switch (props.peer.os) {
-    case "linux":
-      return "mdi-linux";
-    case "windows":
-      return "mdi-microsoft-windows";
-    case "darwin":
-      return "mdi-apple";
-    default:
-      return "mdi-desktop-classic";
-  }
-});
+const showFileModal = ref(false);
+const showTextModal = ref(false);
 
 const sendOptions = [
   {
@@ -73,6 +51,41 @@ const sendOptions = [
   },
 ];
 
+// --- 计算属性 ---
+const ips = computed(() => {
+  if (!props.peer.routes) return [];
+  return Object.keys(props.peer.routes);
+});
+
+const osIcon = computed(() => {
+  switch (props.peer.os) {
+    case "linux":
+      return "mdi-linux";
+    case "windows":
+      return "mdi-microsoft-windows";
+    case "darwin":
+      return "mdi-apple";
+    default:
+      return "mdi-desktop-classic";
+  }
+});
+
+// --- 监听 ---
+watch(
+  ips,
+  (newIps) => {
+    if (newIps.length > 0) {
+      if (!selectedIp.value || !newIps.includes(selectedIp.value)) {
+        selectedIp.value = newIps[0];
+      }
+    } else {
+      selectedIp.value = "";
+    }
+  },
+  { immediate: true },
+);
+
+// --- 方法 ---
 const handleAction = (key: string) => {
   if (!selectedIp.value) return;
 
@@ -92,8 +105,6 @@ const handleAction = (key: string) => {
   }
 };
 
-// --- 发送逻辑 ---
-
 const handleSendFolder = async () => {
   if (!selectedIp.value) return;
   const opts: Dialogs.OpenFileDialogOptions = {
@@ -125,85 +136,6 @@ const handleSendClipboard = async () => {
   });
   emit("transferStarted");
 };
-
-// --- 文本发送 ---
-const showTextModal = ref(false);
-const textContent = ref("");
-
-const executeSendText = async () => {
-  if (!selectedIp.value || !textContent.value) return;
-  SendText(props.peer, selectedIp.value, textContent.value).catch((e) => {
-    console.error(e);
-    alert("Failed to send text: " + e);
-  });
-  emit("transferStarted");
-  showTextModal.value = false;
-  textContent.value = "";
-};
-
-// --- 文件选择 ---
-const showFileModal = ref(false);
-watch(showFileModal, (newVal) => {
-  if (newVal) {
-    Events.On("files-dropped", (event) => {
-      fileList.value = event.data.files.map((f) => ({
-        name: f.split(/[\/]/).pop() || f,
-        path: f,
-      }));
-    });
-  } else {
-    Events.Off("files-dropped");
-  }
-});
-const fileList = ref<{ name: string; path: string }[]>([]);
-
-const openFileDialog = async () => {
-  const files = await Dialogs.OpenFile({
-    Title: "Select files to send",
-    AllowsMultipleSelection: true,
-  });
-  if (files) {
-    if (Array.isArray(files)) {
-      files.forEach((f) => {
-        // 去重
-        if (!fileList.value.find((existing) => existing.path === f)) {
-          fileList.value.push({
-            name: f.split(/[\\/]/).pop() || f,
-            path: f,
-          });
-        }
-      });
-    } else {
-      const f = files as string;
-      if (!fileList.value.find((existing) => existing.path === f)) {
-        fileList.value.push({
-          name: f.split(/[\\/]/).pop() || f,
-          path: f,
-        });
-      }
-    }
-  }
-};
-
-const handleRemoveFile = (index: number) => {
-  fileList.value.splice(index, 1);
-};
-
-const handleCancelFiles = () => {
-  showFileModal.value = false;
-  fileList.value = [];
-};
-
-const handleSendFiles = () => {
-  if (fileList.value.length === 0 || !selectedIp.value) return;
-  const paths = fileList.value.map((f) => f.path);
-  SendFiles(props.peer, selectedIp.value, paths).catch((e) => {
-    console.error(e);
-    alert("Failed to send files: " + e);
-  });
-  emit("transferStarted");
-  handleCancelFiles();
-};
 </script>
 
 <template>
@@ -289,122 +221,18 @@ const handleSendFiles = () => {
     </template>
   </v-card>
 
-  <!-- 文件发送 Modal -->
-  <v-dialog v-model="showFileModal" width="600" persistent eager>
-    <v-card title="Send Files">
-      <v-card-text>
-        <div
-          v-if="fileList.length === 0"
-          class="drop-zone pa-10 text-center rounded-lg border-dashed"
-          @click="openFileDialog"
-          data-file-drop-target
-        >
-          <v-icon
-            icon="mdi-cloud-upload"
-            size="48"
-            color="primary"
-            class="mb-2"
-          ></v-icon>
-          <div class="text-body-1 text-medium-emphasis">
-            Click to select files
-          </div>
-        </div>
+  <!-- Modals -->
+  <FileSendModal
+    v-model="showFileModal"
+    :peer="peer"
+    :selectedIp="selectedIp"
+    @transferStarted="emit('transferStarted')"
+  />
 
-        <div v-else>
-          <v-list
-            class="mb-4 text-left"
-            border
-            rounded
-            max-height="400"
-            style="overflow-y: auto"
-            data-file-drop-target
-          >
-            <v-list-item
-              v-for="(file, index) in fileList"
-              :key="file.path"
-              :title="file.name"
-              :subtitle="file.path"
-              lines="two"
-            >
-              <template #append>
-                <v-btn
-                  icon="mdi-delete"
-                  size="small"
-                  variant="text"
-                  color="error"
-                  @click="handleRemoveFile(index)"
-                ></v-btn>
-              </template>
-            </v-list-item>
-          </v-list>
-
-          <v-btn
-            block
-            variant="outlined"
-            style="border-style: dashed"
-            prepend-icon="mdi-plus"
-            @click="openFileDialog"
-            class="mt-2"
-          >
-            Add more files
-          </v-btn>
-        </div>
-      </v-card-text>
-
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn variant="text" @click="handleCancelFiles">Cancel</v-btn>
-        <v-btn
-          color="primary"
-          @click="handleSendFiles"
-          :disabled="fileList.length === 0"
-        >
-          Send {{ fileList.length > 0 ? `(${fileList.length})` : "" }}
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-
-  <!-- 文本发送 Modal -->
-  <v-dialog v-model="showTextModal" width="500" persistent eager>
-    <v-card title="Send Text">
-      <v-card-text>
-        <v-textarea
-          v-model="textContent"
-          label="Content"
-          placeholder="Type something to send..."
-          rows="4"
-          auto-grow
-        ></v-textarea>
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn variant="text" @click="showTextModal = false">Cancel</v-btn>
-        <v-btn
-          color="primary"
-          @click="executeSendText"
-          :disabled="!textContent"
-        >
-          Send
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+  <TextSendModal
+    v-model="showTextModal"
+    :peer="peer"
+    :selectedIp="selectedIp"
+    @transferStarted="emit('transferStarted')"
+  />
 </template>
-
-<style scoped>
-.drop-zone {
-  border: 2px dashed #666; /* Use a darker color or theme var */
-  cursor: pointer;
-  transition: all 0.3s;
-}
-.drop-zone:hover {
-  border-color: #38bdf8;
-  background-color: rgba(56, 189, 248, 0.05);
-}
-
-.drop-zone.file-drop-target-active {
-  border-color: #38bdf8;
-  background-color: rgba(56, 189, 248, 0.1);
-}
-</style>