lion
abb1cdb952
- 以 TabBar + 三个视图（任务/搜索/设置）替换原有 DashBoard/Side/HentaiSearch 单页结构 - 拆分 TaskView / TaskRow / TaskDetailSheet / SearchView / SettingsView / AuthScreen - 统一 theme.css 视觉规范，补 AppIcon 与缩略图工具 thumbnail.js 及其单测 - 提交弹层默认选中最高可用分辨率，缩略图加载失败走占位 - E站搜索结果与远端抽屉补回「在线看」入口
64 lines
2.3 KiB
Vue
64 lines
2.3 KiB
Vue
<script setup>
|
|
import {computed} from "vue";
|
|
import store from "../store/index.js";
|
|
|
|
const props = defineProps({
|
|
gallery: {type: Object, required: true},
|
|
retrying: {type: Boolean, default: false},
|
|
});
|
|
|
|
defineEmits(["open", "download", "retry"]);
|
|
|
|
// Only a running download reports a percentage; everything else uses the status text.
|
|
const percent = computed(() => {
|
|
const gallery = props.gallery;
|
|
if (!gallery || gallery.status !== "下载中" || !gallery.pages) return null;
|
|
const done = Number(gallery.proceeding) || 0;
|
|
return Math.min(100, Math.max(0, Math.round((done / gallery.pages) * 100)));
|
|
});
|
|
|
|
const title = computed(() => {
|
|
return store.state.galleryNameType === "name" ? props.gallery.name : props.gallery.shortName;
|
|
});
|
|
|
|
// States arrive as Chinese labels from the backend; map them to pill colours.
|
|
const statusClass = computed(() => {
|
|
const status = props.gallery.status;
|
|
if (status === "下载完成") return "is-done";
|
|
if (status === "下载中" || status === "压缩中") return "is-running";
|
|
return "is-waiting";
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="task-row">
|
|
<button type="button" class="task-row-open" @click="$emit('open', gallery)">
|
|
<span class="task-thumb">
|
|
<img v-if="gallery.thumb_link" :src="gallery.thumb_link" alt="" loading="lazy">
|
|
</span>
|
|
<span class="task-body">
|
|
<span class="task-title">{{ title }}</span>
|
|
<span class="task-meta">{{ gallery.pages }} 页 · {{ gallery.language }} · {{ gallery.fileSize }}</span>
|
|
</span>
|
|
<span class="task-foot">
|
|
<span class="status-pill" :class="statusClass">{{ gallery.status }}</span>
|
|
</span>
|
|
</button>
|
|
|
|
<span v-if="percent !== null" class="task-side task-side-num">{{ percent }}%</span>
|
|
<button v-else-if="gallery.status === '下载完成'"
|
|
type="button"
|
|
class="task-side task-side-act"
|
|
aria-label="下载文件"
|
|
@click="$emit('download', gallery)">下载</button>
|
|
<button v-else
|
|
type="button"
|
|
class="task-side task-side-muted"
|
|
:disabled="retrying"
|
|
aria-label="重试任务"
|
|
@click="$emit('retry', gallery)">{{ retrying ? "重试中" : "重试" }}</button>
|
|
|
|
<span v-if="percent !== null" class="task-row-edge"><i :style="{width: percent + '%'}"></i></span>
|
|
</div>
|
|
</template>
|