338 lines
8.9 KiB
Vue
338 lines
8.9 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref, h } from "vue";
|
|
import { Transfer } from "../../bindings/mesh-drop/internal/transfer";
|
|
import {
|
|
ResolvePendingRequest,
|
|
CancelTransfer,
|
|
DeleteTransfer,
|
|
} from "../../bindings/mesh-drop/internal/transfer/service";
|
|
import { Dialogs, Clipboard } from "@wailsio/runtime";
|
|
|
|
const props = defineProps<{
|
|
transfer: Transfer;
|
|
}>();
|
|
|
|
const formatSize = (bytes?: number) => {
|
|
if (bytes === undefined) return "";
|
|
if (bytes === 0) return "0 B";
|
|
const k = 1024;
|
|
const sizes = ["B", "KB", "MB", "GB"];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
|
|
};
|
|
|
|
const formatSpeed = (speed?: number) => {
|
|
if (!speed) return "";
|
|
return formatSize(speed) + "/s";
|
|
};
|
|
|
|
const formatTime = (time: number): string => {
|
|
return new Date(time).toLocaleString();
|
|
};
|
|
|
|
const percentage = computed(() =>
|
|
Math.min(
|
|
100,
|
|
Math.round(
|
|
(props.transfer.progress.current / props.transfer.progress.total) * 100,
|
|
),
|
|
),
|
|
);
|
|
const progressColor = computed(() => {
|
|
if (props.transfer.status === "error") return "error";
|
|
if (props.transfer.status === "completed") return "success";
|
|
return "primary";
|
|
});
|
|
|
|
const acceptTransfer = () => {
|
|
ResolvePendingRequest(props.transfer.id, true, "");
|
|
};
|
|
|
|
const rejectTransfer = () => {
|
|
ResolvePendingRequest(props.transfer.id, false, "");
|
|
};
|
|
|
|
const acceptToFolder = async () => {
|
|
const opts: Dialogs.OpenFileDialogOptions = {
|
|
Title: "Select Folder to save the file",
|
|
CanChooseDirectories: true,
|
|
CanChooseFiles: false,
|
|
AllowsMultipleSelection: false,
|
|
};
|
|
const path = await Dialogs.OpenFile(opts);
|
|
if (path !== "") {
|
|
ResolvePendingRequest(props.transfer.id, true, path as string);
|
|
}
|
|
};
|
|
|
|
const dropdownItems = [
|
|
{
|
|
title: "Accept To Folder",
|
|
value: "folder",
|
|
},
|
|
];
|
|
|
|
const handleSelect = (key: string | number) => {
|
|
if (key === "folder") {
|
|
acceptToFolder();
|
|
}
|
|
};
|
|
|
|
const handleDelete = () => {
|
|
DeleteTransfer(props.transfer.id);
|
|
};
|
|
|
|
const handleCopy = async () => {
|
|
Clipboard.SetText(props.transfer.text)
|
|
// .then(() => {
|
|
// message.success("Copied to clipboard");
|
|
// })
|
|
.catch(() => {
|
|
// message.error("Failed to copy to clipboard");
|
|
console.error("Failed to copy");
|
|
});
|
|
};
|
|
|
|
const showContentDialog = ref(false);
|
|
|
|
const canCancel = computed(() => {
|
|
if (
|
|
props.transfer.status === "completed" ||
|
|
props.transfer.status === "error" ||
|
|
props.transfer.status === "canceled" ||
|
|
props.transfer.status === "rejected"
|
|
) {
|
|
return false;
|
|
}
|
|
if (props.transfer.type === "send") {
|
|
return true;
|
|
} else if (props.transfer.type === "receive") {
|
|
// 接收端在 pending 状态只能拒绝不能取消
|
|
if (props.transfer.status === "pending") {
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
|
|
const canCopy = computed(() => {
|
|
if (
|
|
props.transfer.type === "receive" &&
|
|
props.transfer.status === "completed" &&
|
|
props.transfer.content_type === "text"
|
|
) {
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
|
|
const canAccept = computed(() => {
|
|
if (
|
|
props.transfer.type === "receive" &&
|
|
props.transfer.status === "pending"
|
|
) {
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<v-card class="transfer-item mb-2" variant="outlined">
|
|
<v-card-text class="py-2 px-3">
|
|
<div class="d-flex align-center flex-wrap ga-2">
|
|
<!-- 图标 -->
|
|
<div>
|
|
<v-icon
|
|
size="24"
|
|
v-if="props.transfer.type === 'send'"
|
|
color="info"
|
|
icon="mdi-arrow-up"
|
|
></v-icon>
|
|
<v-icon
|
|
size="24"
|
|
v-else-if="props.transfer.type === 'receive'"
|
|
color="success"
|
|
icon="mdi-arrow-down"
|
|
></v-icon>
|
|
<v-icon
|
|
size="24"
|
|
v-else
|
|
color="warning"
|
|
icon="mdi-alert-circle"
|
|
></v-icon>
|
|
</div>
|
|
|
|
<!-- 信息 -->
|
|
<div class="info-wrapper flex-grow-1" style="min-width: 0">
|
|
<div class="d-flex align-center ga-2 mb-1 flex-wrap">
|
|
<div class="font-weight-bold text-truncate d-flex align-center">
|
|
<v-icon
|
|
size="small"
|
|
class="mr-1"
|
|
v-if="props.transfer.content_type === 'file'"
|
|
icon="mdi-file"
|
|
></v-icon>
|
|
<v-icon
|
|
size="small"
|
|
class="mr-1"
|
|
v-else-if="props.transfer.content_type === 'text'"
|
|
icon="mdi-file-document"
|
|
></v-icon>
|
|
<v-icon
|
|
size="small"
|
|
class="mr-1"
|
|
v-else-if="props.transfer.content_type === 'folder'"
|
|
icon="mdi-folder"
|
|
></v-icon>
|
|
{{
|
|
props.transfer.file_name ||
|
|
(props.transfer.content_type === "text" ? "Text" : "Folder")
|
|
}}
|
|
</div>
|
|
|
|
<v-chip
|
|
size="x-small"
|
|
v-if="
|
|
props.transfer.sender.name && props.transfer.type === 'receive'
|
|
"
|
|
prepend-icon="mdi-account"
|
|
>
|
|
{{ props.transfer.sender.name }}
|
|
</v-chip>
|
|
|
|
<v-chip
|
|
size="x-small"
|
|
v-if="props.transfer.create_time"
|
|
prepend-icon="mdi-clock-outline"
|
|
>
|
|
{{ formatTime(props.transfer.create_time) }}
|
|
</v-chip>
|
|
</div>
|
|
|
|
<div class="text-caption text-medium-emphasis d-flex align-center">
|
|
<span>{{ formatSize(props.transfer.file_size) }}</span>
|
|
|
|
<!-- 状态文本 -->
|
|
<span v-if="props.transfer.status === 'active'">
|
|
- {{ formatSpeed(props.transfer.progress.speed) }}
|
|
</span>
|
|
<span
|
|
v-if="props.transfer.status === 'completed'"
|
|
class="text-success"
|
|
>
|
|
- Completed
|
|
</span>
|
|
<span v-if="props.transfer.status === 'error'" class="text-error">
|
|
- {{ props.transfer.error_msg || "Error" }}
|
|
</span>
|
|
<span v-if="props.transfer.status === 'canceled'" class="text-info">
|
|
- Canceled
|
|
</span>
|
|
<span
|
|
v-if="props.transfer.status === 'rejected'"
|
|
class="text-error"
|
|
>
|
|
- Rejected
|
|
</span>
|
|
<span
|
|
v-if="props.transfer.status === 'pending'"
|
|
class="text-warning"
|
|
>
|
|
- Waiting for accept
|
|
</span>
|
|
</div>
|
|
|
|
<!-- 进度条 -->
|
|
<v-progress-linear
|
|
v-if="props.transfer.status === 'active'"
|
|
:model-value="percentage"
|
|
:color="progressColor"
|
|
height="4"
|
|
striped
|
|
class="mt-1"
|
|
></v-progress-linear>
|
|
</div>
|
|
|
|
<!-- 操作按钮 -->
|
|
<div class="actions-wrapper">
|
|
<v-btn-group density="compact" variant="outlined" divided>
|
|
<v-btn
|
|
v-if="canAccept"
|
|
color="success"
|
|
icon="mdi-content-save"
|
|
@click="acceptTransfer"
|
|
></v-btn>
|
|
|
|
<v-btn
|
|
v-if="canAccept"
|
|
color="success"
|
|
icon="mdi-folder-arrow-right"
|
|
@click="acceptToFolder"
|
|
></v-btn>
|
|
|
|
<v-btn
|
|
v-if="canAccept"
|
|
color="error"
|
|
icon="mdi-close"
|
|
@click="rejectTransfer"
|
|
></v-btn>
|
|
|
|
<v-btn
|
|
v-if="canCopy"
|
|
color="success"
|
|
icon="mdi-eye"
|
|
@click="showContentDialog = true"
|
|
></v-btn>
|
|
|
|
<v-btn
|
|
v-if="canCopy"
|
|
color="success"
|
|
icon="mdi-content-copy"
|
|
@click="handleCopy"
|
|
></v-btn>
|
|
|
|
<v-btn
|
|
v-if="
|
|
props.transfer.status === 'completed' ||
|
|
props.transfer.status === 'error' ||
|
|
props.transfer.status === 'canceled' ||
|
|
props.transfer.status === 'rejected'
|
|
"
|
|
color="info"
|
|
icon="mdi-delete"
|
|
@click="handleDelete"
|
|
></v-btn>
|
|
|
|
<v-btn
|
|
v-if="canCancel"
|
|
color="error"
|
|
icon="mdi-stop"
|
|
@click="CancelTransfer(props.transfer.id)"
|
|
></v-btn>
|
|
</v-btn-group>
|
|
</div>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
<v-dialog v-model="showContentDialog" width="600">
|
|
<v-card title="Text Content">
|
|
<v-card-text>
|
|
<v-textarea
|
|
:model-value="props.transfer.text"
|
|
readonly
|
|
rows="10"
|
|
></v-textarea>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.info-wrapper {
|
|
overflow: hidden;
|
|
}
|
|
</style>
|