94 lines
2.5 KiB
Vue
94 lines
2.5 KiB
Vue
<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 :title="item.name">{{ item.name }}</strong>
|
|
<p>{{ item.size_label }} · {{ item.created_label }}</p>
|
|
</div>
|
|
<span class="pending-download-icon" aria-hidden="true">
|
|
<LocalIcon name="download" size="18" />
|
|
</span>
|
|
</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>
|