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

- 以 TabBar + 三个视图（任务/搜索/设置）替换原有 DashBoard/Side/HentaiSearch 单页结构 - 拆分 TaskView / TaskRow / TaskDetailSheet / SearchView / SettingsView / AuthScreen - 统一 theme.css 视觉规范，补 AppIcon 与缩略图工具 thumbnail.js 及其单测 - 提交弹层默认选中最高可用分辨率，缩略图加载失败走占位 - E站搜索结果与远端抽屉补回「在线看」入口
2026-09-20 18:41:00 +08:00
parent 169925c197
commit abb1cdb952
16 changed files with 2112 additions and 883 deletions
@@ -1,42 +1,71 @@
 <script setup>
-import {onMounted, onBeforeUnmount} from "vue";
+import {computed, onBeforeUnmount, onMounted} from "vue";
 import store from "./store/index.js";
-import Side from "./components/Side.vue";
-import DashBoard from "./components/DashBoard.vue";
+import TaskView from "./components/TaskView.vue";
+import SearchView from "./components/SearchView.vue";
+import SettingsView from "./components/SettingsView.vue";
+import TabBar from "./components/TabBar.vue";
+import AuthScreen from "./components/AuthScreen.vue";
+import TaskDetailSheet from "./components/TaskDetailSheet.vue";
+import OnlineReader from "./components/OnlineReader.vue";
+
+const activeTab = computed(() => store.state.activeTab);
+
+function isSystemDark() {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+// Theme is a single class on <html>; colours come from the CSS variables.
+function adjustForStyle() {
+  const stored = localStorage.getItem("darkConfig");
+  if (stored !== null) {
+    const darkConfig = JSON.parse(stored);
+    document.documentElement.classList.toggle("dark", Boolean(darkConfig.followSystem) && isSystemDark());
+  } else {
+    document.documentElement.classList.remove("dark");
+  }
+}

 const resumeProgress = () => {
-  if (store.state.isAuth && document.visibilityState === 'visible') store.dispatch("initWebsocket");
+  if (store.state.isAuth && document.visibilityState === "visible") store.dispatch("initWebsocket");
 };
 const pauseProgress = () => store.dispatch("disconnectWebsocket");
+
 onMounted(() => {
-  window.addEventListener('online', resumeProgress);
-  window.addEventListener('pageshow', resumeProgress);
-  window.addEventListener('pagehide', pauseProgress);
-  document.addEventListener('visibilitychange', resumeProgress);
-});
-onBeforeUnmount(() => {
-  window.removeEventListener('online', resumeProgress);
-  window.removeEventListener('pageshow', resumeProgress);
-  window.removeEventListener('pagehide', pauseProgress);
-  document.removeEventListener('visibilitychange', resumeProgress);
-  pauseProgress();
+  adjustForStyle();
+  store.state.lengthPerPage = Number(localStorage.getItem("lengthPerPage")) || 30;
+  store.commit("_setCategory", localStorage.getItem("category") ?? "myDownload");
+  store.commit("_setSortType", localStorage.getItem("sortType") ?? "createTime");
+  store.commit("_setGalleryNameType", localStorage.getItem("galleryNameType") ?? "shortName");
+
+  const auth = localStorage.getItem("auth");
+  if (auth !== null) store.dispatch("validate", auth);
+
+  window.addEventListener("online", resumeProgress);
+  window.addEventListener("pageshow", resumeProgress);
+  window.addEventListener("pagehide", pauseProgress);
+  document.addEventListener("visibilitychange", resumeProgress);
 });

+onBeforeUnmount(() => {
+  window.removeEventListener("online", resumeProgress);
+  window.removeEventListener("pageshow", resumeProgress);
+  window.removeEventListener("pagehide", pauseProgress);
+  document.removeEventListener("visibilitychange", resumeProgress);
+  pauseProgress();
+});
 </script>

 <template>
  <div class="app">
-    <el-container>
-      <DashBoard/>
-      <main>
-        <Side/>
-      </main>
-    </el-container>
+    <main class="app-views">
+      <TaskView v-show="activeTab === 'tasks'"/>
+      <SearchView v-show="activeTab === 'search'"/>
+      <SettingsView v-show="activeTab === 'settings'"/>
+    </main>
+    <TabBar/>
+    <TaskDetailSheet/>
+    <OnlineReader/>
+    <AuthScreen/>
  </div>
 </template>
-
-<style>
-.app{
-
-}
-</style>