移动端下载器改版:重构为底部三标签的信息架构

- 以 TabBar + 三个视图(任务/搜索/设置)替换原有 DashBoard/Side/HentaiSearch 单页结构
- 拆分 TaskView / TaskRow / TaskDetailSheet / SearchView / SettingsView / AuthScreen
- 统一 theme.css 视觉规范,补 AppIcon 与缩略图工具 thumbnail.js 及其单测
- 提交弹层默认选中最高可用分辨率,缩略图加载失败走占位
- E站搜索结果与远端抽屉补回「在线看」入口
This commit is contained in:
2026-09-20 18:41:00 +08:00
parent 169925c197
commit abb1cdb952
16 changed files with 2112 additions and 883 deletions
+63
View File
@@ -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>