first commit

frontend/src/components/RemoteRoomCard.vue

@@ -0,0 +1,91 @@
+<script setup>
+import GlassCard from './GlassCard.vue'
+import LocalIcon from './LocalIcon.vue'
+
+defineProps({
+  roomCodeInput: {
+    type: String,
+    required: true,
+  },
+  isWaiting: {
+    type: Boolean,
+    required: true,
+  },
+  generatedCode: {
+    type: String,
+    required: true,
+  },
+  pendingDownloads: {
+    type: Array,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update-room-code', 'create-room', 'join-room', 'cancel-room'])
+
+function handleInput(event) {
+  emit('update-room-code', event.target.value)
+}
+
+function handleEnter() {
+  emit('join-room')
+}
+</script>
+
+<template>
+  <GlassCard title="远程直连">
+    <div v-if="!isWaiting" class="room-action-area">
+      <button class="btn-create" type="button" @click="$emit('create-room')">
+        <LocalIcon name="add_circle" size="22" />
+        创建专属传输房间
+      </button>
+
+      <div class="divider">或</div>
+
+      <div class="room-input-group">
+        <input
+          class="room-code"
+          inputmode="numeric"
+          maxlength="4"
+          pattern="\d*"
+          placeholder="输入4位房间号"
+          type="text"
+          :value="roomCodeInput"
+          @input="handleInput"
+          @keyup.enter="handleEnter"
+        />
+        <button class="btn-primary" type="button" @click="$emit('join-room')">加入房间</button>
+      </div>
+
+      <div v-if="pendingDownloads.length" class="pending-downloads">
+        <div class="pending-downloads-head">
+          <span>待领取文件</span>
+          <span>{{ pendingDownloads.length }}</span>
+        </div>
+
+        <a
+          v-for="item in pendingDownloads"
+          :key="item.transfer_id"
+          class="pending-download-item"
+          :href="item.download_path"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <div class="pending-download-copy">
+            <strong>{{ item.name }}</strong>
+            <p>{{ item.size_label }} · {{ item.created_label }}</p>
+          </div>
+          <LocalIcon name="download" size="18" />
+        </a>
+      </div>
+    </div>
+
+    <div v-else class="waiting-area">
+      <p class="waiting-subtitle">您的房间号码</p>
+      <div class="huge-code">{{ generatedCode }}</div>
+      <div class="spinner"></div>
+      <p class="waiting-tip">等待对方加入...</p>
+      <button class="btn-cancel" type="button" @click="$emit('cancel-room')">取消建房</button>
+    </div>
+  </GlassCard>
+</template>