移动端下载器改版:重构为底部三标签的信息架构
- 以 TabBar + 三个视图(任务/搜索/设置)替换原有 DashBoard/Side/HentaiSearch 单页结构 - 拆分 TaskView / TaskRow / TaskDetailSheet / SearchView / SettingsView / AuthScreen - 统一 theme.css 视觉规范,补 AppIcon 与缩略图工具 thumbnail.js 及其单测 - 提交弹层默认选中最高可用分辨率,缩略图加载失败走占位 - E站搜索结果与远端抽屉补回「在线看」入口
This commit is contained in:
@@ -0,0 +1,63 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user