From 50f54c81b8fadb939ce2f3ac18c19d31f8eaf5fc Mon Sep 17 00:00:00 2001
From: zihan xu <zihan19@illinois.edu>
Date: Sat, 13 Jun 2026 23:18:41 +0800
Subject: [PATCH 1/2] feat: support web ui runtime

---
 auto-imports.d.ts                      |   5 +-
 src/APIFetch.ts                        |  12 +-
 src/App.vue                            |   6 +-
 src/components/AppBackground.vue       |  18 +-
 src/components/BatchDownloadButton.vue |  21 +-
 src/components/ImageVideoCard.vue      |   9 +-
 src/components/LoginManager.vue        |  55 +++--
 src/components/LottieAnimationCard.vue |  30 +--
 src/components/SVGACard.vue            |  30 +--
 src/pages/dynamic/[id].vue             |   7 +-
 src/pages/emoji/[id].vue               |   2 +-
 src/pages/liveroom/[id].vue            |   2 +-
 src/pages/lottery.vue                  |   2 +-
 src/pages/settings.vue                 |  18 +-
 src/pages/space/[id].vue               |   2 +-
 src/pages/suit/[id].vue                |   2 +-
 src/pages/tool/webp.vue                |  15 +-
 src/runtime/environment.ts             |  17 ++
 src/runtime/files.ts                   | 305 +++++++++++++++++++++++++
 src/runtime/http.ts                    |  67 ++++++
 src/runtime/path.ts                    |  18 ++
 src/runtime/store.ts                   | 121 ++++++++++
 src/runtime/window.ts                  |  60 +++++
 src/store/useWbiStore/api/index.ts     |   6 +-
 src/store/useWbiStore/internal.ts      |   6 +-
 src/utils/cliboardListener.ts          |  15 +-
 src/utils/deviceUtils.ts               |  11 +-
 src/utils/downloadManager.ts           |  15 +-
 src/utils/globalConfig.ts              |   6 +-
 src/utils/image.ts                     |   6 +-
 src/utils/linkResolver.ts              |   5 +-
 src/utils/loginManager.ts              |   6 +-
 vite.config.ts                         |  45 +++-
 33 files changed, 818 insertions(+), 127 deletions(-)
 create mode 100644 src/runtime/environment.ts
 create mode 100644 src/runtime/files.ts
 create mode 100644 src/runtime/http.ts
 create mode 100644 src/runtime/path.ts
 create mode 100644 src/runtime/store.ts
 create mode 100644 src/runtime/window.ts

diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 0d08853..bbdeab0 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -36,7 +36,6 @@ declare global {
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
-  const fetch: typeof import('@tauri-apps/plugin-http')['fetch']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const h: typeof import('vue')['h']
@@ -298,6 +297,7 @@ declare global {
   export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
+
 // for vue template auto import
 import { UnwrapRef } from 'vue'
 declare module 'vue' {
@@ -333,7 +333,6 @@ declare module 'vue' {
     readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
     readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
-    readonly fetch: UnwrapRef<typeof import('@tauri-apps/plugin-http')['fetch']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
@@ -589,4 +588,4 @@ declare module 'vue' {
     readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
     readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
   }
-}
+}
\ No newline at end of file
diff --git a/src/APIFetch.ts b/src/APIFetch.ts
index 1bf441c..ea160ba 100644
--- a/src/APIFetch.ts
+++ b/src/APIFetch.ts
@@ -1,14 +1,14 @@
-import { LazyStore } from '@tauri-apps/plugin-store';
 import { clearLoginCookie, getLoginCookie, userLoggedIn } from "./utils/loginManager.ts";
 import { GeneralAPIResponse } from "./types.ts";
 import { encWbiWithFetch } from "./utils/wbi.ts";
 import { useWbiStore } from "./store/useWbiStore";
 import { setDebugInfo } from "./utils/debug.ts";
 import md5 from "md5";
-import { ClientOptions, fetch } from "@tauri-apps/plugin-http";
 import { globalConfig } from "./utils/globalConfig.ts";
+import { createRuntimeStore } from "./runtime/store.ts";
+import { runtimeFetch } from "./runtime/http.ts";
 
-const store = new LazyStore('APIResponseCache', {
+const store = createRuntimeStore('APIResponseCache', {
     // 不要持久化请求缓存
     autoSave: false
 })
@@ -94,7 +94,7 @@ async function APIFetch<T>(url: URL | string, init?: RequestInit, extraOptions?:
         cookie = await getLoginCookie()
     }
 
-    const options: RequestInit & ClientOptions = {
+    const options: RequestInit = {
         headers: {
             'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0',
             // 无cookie时，填写这几个参数貌似也能过一些验证
@@ -110,7 +110,7 @@ async function APIFetch<T>(url: URL | string, init?: RequestInit, extraOptions?:
     let json: GeneralAPIResponse<T>
 
     do {
-        json = await fetch(parsedURL, finalOptions).then(r => r.json()) as GeneralAPIResponse<T>
+        json = await runtimeFetch(parsedURL, finalOptions).then(r => r.json()) as GeneralAPIResponse<T>
 
         if (json.code !== 0) {
             if ((json.code === -352 || json.code === -403) && retryCount < 1) {
@@ -160,4 +160,4 @@ async function clearAPICache() {
     await store.clear()
 }
 
-export { APIFetch, clearAPICache }
\ No newline at end of file
+export { APIFetch, clearAPICache }
diff --git a/src/App.vue b/src/App.vue
index 23a68f8..b28e237 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { emitter } from "./main.ts"
-import { getCurrentWindow } from "@tauri-apps/api/window"
 import Icon from '../src-tauri/icons/icon.png'
 import { globalConfig } from "./utils/globalConfig.ts";
 import AppBackground from "./components/AppBackground.vue";
 import { isMobileDevice } from "./utils/deviceUtils.ts";
+import { getCurrentAppWindow } from "./runtime/window.ts";
 
 
-const window = getCurrentWindow()
+const window = getCurrentAppWindow()
 const showDownloadDrawer = ref(false)
 const showLoginDrawer = ref(false)
 
@@ -371,4 +371,4 @@ watch(() => route.fullPath, () => {
 :deep(.el-input__inner) {
   line-height: 0.5px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/AppBackground.vue b/src/components/AppBackground.vue
index 69ba27b..c86d39a 100644
--- a/src/components/AppBackground.vue
+++ b/src/components/AppBackground.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { globalConfig } from "../utils/globalConfig";
-import { readFile } from '@tauri-apps/plugin-fs'
+import { readFile } from '../runtime/files.ts'
 
 const backgroundImgPath = ref('')
 
@@ -14,14 +14,18 @@ watch(() => globalConfig.value.background.url, async () => {
         return
       }
 
-      const img = await readFile(path)
-      const extension = path.split('.').pop()
+      try {
+        const img = await readFile(path)
+        const extension = path.split('.').pop()
 
-      const blob = new Blob([img], { type: `image/${extension}` })
+        const blob = new Blob([img], { type: `image/${extension}` })
 
-      const url = URL.createObjectURL(blob)
+        const url = URL.createObjectURL(blob)
 
-      backgroundImgPath.value = `url(${url})`
+        backgroundImgPath.value = `url(${url})`
+      } catch {
+        backgroundImgPath.value = `url(${path})`
+      }
     }
   } else {
     backgroundImgPath.value = ''
@@ -35,4 +39,4 @@ const enable = computed(() => globalConfig.value.background.enable)
     class="color-bg w-full h-full absolute top-0 left-0 -z-50"
     :style="{ backgroundImage: enable ? backgroundImgPath : '', opacity: enable ? globalConfig.background.opacity : 1 }"
   />
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/BatchDownloadButton.vue b/src/components/BatchDownloadButton.vue
index 9cea2df..6c01d09 100644
--- a/src/components/BatchDownloadButton.vue
+++ b/src/components/BatchDownloadButton.vue
@@ -2,10 +2,10 @@
 import { ElMessage, FormInstance } from "element-plus";
 import type { BatchDownloadTask } from "../types.ts";
 import { pushNewTask, startDownload } from "../utils/downloadManager.ts";
-import { open } from "@tauri-apps/plugin-dialog";
 import { TreeInstance } from "element-plus/lib/components";
-import { sep } from "@tauri-apps/api/path";
 import { globalConfig } from "../utils/globalConfig.ts";
+import { download, isWebRuntime, open } from "../runtime/files.ts";
+import { sep } from "../runtime/path.ts";
 
 const props = defineProps<{
   task: (() => BatchDownloadTask) | (() => Promise<BatchDownloadTask>)
@@ -130,6 +130,19 @@ const submit = async () => {
       path: downloadConfig.path,
       files: selectedFiles
     }
+    if (isWebRuntime()) {
+      await Promise.all(finalTask.files.map(file => download(
+          file.url,
+          [finalTask.path, file.path].filter(Boolean).join(sep()),
+      )))
+      ElMessage({
+        message: `${finalTask.name}已完成浏览器下载`,
+        type: 'success',
+      })
+      showDialog.value = false
+      return
+    }
+
     await pushNewTask(finalTask)
 
     if (globalConfig.value.autoStartDownload) {
@@ -161,7 +174,7 @@ const selectSaveFolder = async () => {
     directory: true,
   })
 
-  if (path === null) return
+  if (typeof path !== 'string') return
   downloadConfig.path = path
 }
 
@@ -245,4 +258,4 @@ const openDialog = async () => {
 .el-select-dropdown__wrap:has(.download-treeselect) {
   max-height: calc(85vh - 200px);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/ImageVideoCard.vue b/src/components/ImageVideoCard.vue
index 59ee9ee..97a5e31 100644
--- a/src/components/ImageVideoCard.vue
+++ b/src/components/ImageVideoCard.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { download } from '@tauri-apps/plugin-upload'
-import { save } from '@tauri-apps/plugin-dialog'
-import { invoke } from "@tauri-apps/api/core";
+import { download, save, saveDataURL } from "../runtime/files.ts";
 
 const props = defineProps<{
   image?: string
@@ -18,9 +16,6 @@ const props = defineProps<{
   suffix?: string
 }>()
 
-const saveDataURL = async (path: string, data: string) => {
-  return await invoke('save_data_url', { path, data }) === 'ok'
-}
 const downloadFile = async (url: string) => {
   const suffix = props.suffix ?? url.split('?')[0].split('.').pop() ?? ''
   const name = (props.downloadName ?? props.title) + '.' + suffix
@@ -222,4 +217,4 @@ function closeVideo() {
       </div>
     </template>
   </ElCard>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/LoginManager.vue b/src/components/LoginManager.vue
index 1a8bf7e..4b47f75 100644
--- a/src/components/LoginManager.vue
+++ b/src/components/LoginManager.vue
@@ -10,6 +10,17 @@ const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
 
 const qrCodeData = ref('')
 
+interface LoginState {
+  isLogin: boolean
+  uname?: string
+}
+
+const getLoginState = () => APIFetch<LoginState>(
+  'https://api.bilibili.com/x/web-interface/nav',
+  undefined,
+  { useCache: false, useCookie: true },
+)
+
 // 是否正在进行登录
 const loggingIn = ref(false)
 const login = async () => {
@@ -54,8 +65,6 @@ const login = async () => {
 
     pollResp = await APIFetch(pollURL, undefined, { useCache: false })
 
-    console.log(pollResp)
-
     if (pollResp.code !== 0) {
       console.error(pollResp)
       ElMessage({
@@ -77,16 +86,36 @@ const login = async () => {
   }
 
   if (pollResp.data.code === 0) {
-    ElMessage({
-      message: '登录成功',
-      type: 'success',
-    })
-
     const loginURL = new URL(pollResp.data.url)
     const params = loginURL.search.substring(1).split('&').join('; ')
 
     await saveLoginCookie(params)
-    userLoggedIn.value = true
+
+    try {
+      const resp = await getLoginState()
+      userLoggedIn.value = resp.data?.isLogin
+
+      if (userLoggedIn.value) {
+        ElMessage({
+          message: '登录成功，欢迎 ' + resp.data.uname,
+          type: 'success',
+        })
+      } else {
+        await clearLoginCookie()
+        ElMessage({
+          message: '扫码成功，但登录状态校验未通过，请重新登录',
+          type: 'error',
+        })
+      }
+    } catch (e) {
+      console.error(e)
+      await clearLoginCookie()
+      ElMessage({
+        message: '扫码成功，但登录状态校验失败：' + e,
+        type: 'error',
+      })
+    }
+
     loggingIn.value = false
   }
 }
@@ -105,15 +134,9 @@ emitter.on('loginDrawerOpen', async () => {
 })
 
 const testLoginState = async () => {
-  let resp: GeneralAPIResponse<{
-    isLogin: boolean
-    uname?: string
-  }>
+  let resp: GeneralAPIResponse<LoginState>
   try {
-    resp = await APIFetch<{
-      isLogin: boolean
-      uname?: string
-    }>(`https://api.bilibili.com/x/web-interface/nav`, undefined, { useCache: false, useCookie: true })
+    resp = await getLoginState()
   } catch (e) {
     if ((e as GeneralAPIResponse<unknown>).code === -101) {
       ElMessage({
diff --git a/src/components/LottieAnimationCard.vue b/src/components/LottieAnimationCard.vue
index 46c34ae..d76b11c 100644
--- a/src/components/LottieAnimationCard.vue
+++ b/src/components/LottieAnimationCard.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { open, save } from "@tauri-apps/plugin-dialog";
-import { download } from "@tauri-apps/plugin-upload";
 import Lottie, { AnimationItem } from "lottie-web";
-import { invoke } from "@tauri-apps/api/core";
-import { sep } from "@tauri-apps/api/path";
+import { createDir, download, isWebRuntime, open, save, saveDataURL, webUnsupported } from "../runtime/files.ts";
+import { sep } from "../runtime/path.ts";
+import { runtimeFetch } from "../runtime/http.ts";
 
 const props = defineProps<{
   url?: string
@@ -31,7 +30,7 @@ const init = async () => {
   let json: unknown
 
   if (props.url) {
-    json = await fetch(props.url).then(r => r.json())
+    json = await runtimeFetch(props.url).then(r => r.json())
   } else if (props.json) {
     json = props.json
   } else {
@@ -116,6 +115,11 @@ const downloadLottie = async () => {
 }
 
 const downloadAllFrames = async () => {
+  if (isWebRuntime()) {
+    webUnsupported('导出所有帧到本地文件夹')
+    return
+  }
+
   if (!animationInfo.value || !player.value) return
   playing.value = false
 
@@ -141,13 +145,13 @@ const downloadAllFrames = async () => {
     allData.push(canvas.toDataURL())
   }
 
-  await invoke('create_dir', { path: `${path}${sep()}${name}` })
-  const results = await Promise.all(allData.map((data, index) => invoke('save_data_url', {
-    path: `${path}${sep()}${name}${sep()}图片${index + 1}.png`,
-    data,
-  })))
+  await createDir(`${path}${sep()}${name}`)
+  const results = await Promise.all(allData.map((data, index) => saveDataURL(
+      `${path}${sep()}${name}${sep()}图片${index + 1}.png`,
+      data,
+  )))
 
-  if (results.some(r => r !== 'ok')) {
+  if (results.some(r => !r)) {
     ElMessage({
       message: `保存${name}时出错`,
       type: "error",
@@ -180,7 +184,7 @@ const downloadCurrentFrame = async () => {
     return
   }
 
-  if (await invoke('save_data_url', { path, data }) === 'ok') {
+  if (await saveDataURL(path, data)) {
     ElMessage({
       message: `下载${name}成功！`,
       type: "success",
@@ -272,4 +276,4 @@ const downloadCurrentFrame = async () => {
       </div>
     </template>
   </ElCard>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/SVGACard.vue b/src/components/SVGACard.vue
index cca35d3..70ecef1 100644
--- a/src/components/SVGACard.vue
+++ b/src/components/SVGACard.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { Parser, Player } from "svga";
-import { open, save } from "@tauri-apps/plugin-dialog";
-import { download } from "@tauri-apps/plugin-upload";
 import { Video } from "svga/dist/types";
-import { invoke } from "@tauri-apps/api/core";
-import { sep } from "@tauri-apps/api/path";
+import { createDir, download, isWebRuntime, open, save, saveDataURL, webUnsupported } from "../runtime/files.ts";
+import { sep } from "../runtime/path.ts";
+import { runtimeFetch } from "../runtime/http.ts";
 
 const props = defineProps<{
   url?: string
@@ -107,7 +106,7 @@ const init = async () => {
   let dataURL: string
 
   if (props.url) {
-    const blob = await fetch(props.url).then(r => r.blob())
+    const blob = await runtimeFetch(props.url).then(r => r.blob())
     dataURL = URL.createObjectURL(blob)
   } else if (props.dataURL) {
     dataURL = props.dataURL
@@ -152,6 +151,11 @@ const saveFile = (name: string, extension: string) => {
 }
 
 const downloadSequenceImages = async () => {
+  if (isWebRuntime()) {
+    webUnsupported('导出每帧图片到本地文件夹')
+    return
+  }
+
   const name = props.downloadName ?? props.title + '序列帧'
 
   const path = await open({
@@ -163,13 +167,13 @@ const downloadSequenceImages = async () => {
 
   ElMessage('正在渲染帧数据，请稍等')
   const images = await renderSequenceImages()
-  await invoke('create_dir', { path: `${path}${sep()}${name}` })
-  const results = await Promise.all(images.map((data, index) => invoke('save_data_url', {
-    path: `${path}${sep()}${name}${sep()}图片${index + 1}.png`,
-    data,
-  })))
+  await createDir(`${path}${sep()}${name}`)
+  const results = await Promise.all(images.map((data, index) => saveDataURL(
+      `${path}${sep()}${name}${sep()}图片${index + 1}.png`,
+      data,
+  )))
 
-  if (results.some(r => r !== 'ok')) {
+  if (results.some(r => !r)) {
     ElMessage({
       message: `保存${name}时出错`,
       type: "error",
@@ -192,7 +196,7 @@ const downloadSequence = async () => {
   await renderSequence()
   const data = renderCanvasRef.value?.toDataURL() ?? ''
 
-  if (await invoke('save_data_url', { path, data }) === 'ok') {
+  if (await saveDataURL(path, data)) {
     ElMessage({
       message: `下载${name}成功！`,
       type: "success",
@@ -303,4 +307,4 @@ const downloadSVGA = async () => {
       </div>
     </template>
   </ElCard>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/pages/dynamic/[id].vue b/src/pages/dynamic/[id].vue
index d32c5e3..1a4e2d3 100644
--- a/src/pages/dynamic/[id].vue
+++ b/src/pages/dynamic/[id].vue
@@ -2,7 +2,8 @@
 import { APIFetch } from "../../APIFetch.ts";
 import { AtTextNode, BatchDownloadTask, DynamicInfo, DynamicTypes } from "../../types.ts";
 import { autoJump, resolveText } from "../../utils/linkResolver.ts";
-import { sep } from "@tauri-apps/api/path";
+import { sep } from "../../runtime/path.ts";
+import { runtimeFetch } from "../../runtime/http.ts";
 
 const loading = ref(false)
 const route = useRoute<'/dynamic/[id]'>()
@@ -164,7 +165,7 @@ const connect9Pic = async () => {
   canvas.height = h
 
   const imageBitmaps = await Promise.all(
-      pics.map(p => fetch(p.url.replace('http://', 'https://'))
+      pics.map(p => runtimeFetch(p.url.replace('http://', 'https://'))
           .then(d => d.blob())
           .then(b => createImageBitmap(b)))
   )
@@ -405,4 +406,4 @@ const jump = async () => {
       />
     </ElSpace>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/pages/emoji/[id].vue b/src/pages/emoji/[id].vue
index 31bb7dc..562914b 100644
--- a/src/pages/emoji/[id].vue
+++ b/src/pages/emoji/[id].vue
@@ -8,7 +8,7 @@ import {
   SuitEmojiPackageProperties
 } from "../../types.ts";
 import { autoJump, resolveText } from "../../utils/linkResolver.ts";
-import { sep } from "@tauri-apps/api/path";
+import { sep } from "../../runtime/path.ts";
 import { UnwrapRef } from "vue";
 import { formatToUrl } from "../../utils/image.ts";
 import { allowedImageFormats, globalConfig } from "../../utils/globalConfig.ts";
diff --git a/src/pages/liveroom/[id].vue b/src/pages/liveroom/[id].vue
index e8dd87a..deb5194 100644
--- a/src/pages/liveroom/[id].vue
+++ b/src/pages/liveroom/[id].vue
@@ -8,7 +8,7 @@ import {
   LiveroomEmojiListInfo
 } from "../../types.ts";
 import { userLoggedIn } from "../../utils/loginManager.ts";
-import { sep } from "@tauri-apps/api/path";
+import { sep } from "../../runtime/path.ts";
 
 const route = useRoute<'/liveroom/[id]'>()
 const loading = ref(false)
diff --git a/src/pages/lottery.vue b/src/pages/lottery.vue
index dd28c7d..1858d09 100644
--- a/src/pages/lottery.vue
+++ b/src/pages/lottery.vue
@@ -10,7 +10,7 @@ import type {
   MedalInfo,
   RedeemInfo,
 } from '../types.ts'
-import { sep } from "@tauri-apps/api/path";
+import { sep } from "../runtime/path.ts";
 import { CarouselInstance } from "element-plus/lib/components";
 
 const loading = ref(true)
diff --git a/src/pages/settings.vue b/src/pages/settings.vue
index c85e61c..32b232a 100644
--- a/src/pages/settings.vue
+++ b/src/pages/settings.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { open } from "@tauri-apps/plugin-dialog";
 import { allowedImageFormats, globalConfig, resetConfig } from "../utils/globalConfig.ts";
 import { clearAPICache } from "../APIFetch.ts";
-import { invoke } from "@tauri-apps/api/core";
 import { isMobileDevice } from "../utils/deviceUtils.ts";
 import { resolveContentUri } from "../utils/deviceUtils";
+import { invokeNative, open, webUnsupported } from "../runtime/files.ts";
 
 const enoughWidth = useMediaQuery('(min-width: 640px)')
 const labelPosition = computed(() => enoughWidth.value ? 'left' : 'top')
@@ -36,7 +35,7 @@ const reset = () => {
 }
 
 const selectImg = async () => {
-  let url = await open({
+  const selected = await open({
     multiple: false,
     directory: false,
     filters: [
@@ -47,6 +46,7 @@ const selectImg = async () => {
     ]
   })
 
+  let url = Array.isArray(selected) ? selected[0] : selected
   if (!url) return
 
   // resolve content:// urls on mobile devices
@@ -64,11 +64,19 @@ const selectDownloadDir = async () => {
     directory: true,
   })
 
-  if (path === null) return null
+  if (typeof path !== 'string') return null
 
   globalConfig.value.downloadPath = path
 }
 
+const openDevtools = async () => {
+  try {
+    await invokeNative('open_webview_devtools')
+  } catch {
+    webUnsupported('打开 Tauri 开发者工具')
+  }
+}
+
 </script>
 
 <template>
@@ -221,7 +229,7 @@ const selectDownloadDir = async () => {
       </ElButton>
       <ElButton
         type="primary"
-        @click="() => invoke('open_webview_devtools')"
+        @click="openDevtools"
       >
         启动开发者工具
       </ElButton>
diff --git a/src/pages/space/[id].vue b/src/pages/space/[id].vue
index 65377ac..d739722 100644
--- a/src/pages/space/[id].vue
+++ b/src/pages/space/[id].vue
@@ -12,7 +12,7 @@ import {
   SuitDetail,
   UserDynamicList
 } from "../../types.ts";
-import { sep } from "@tauri-apps/api/path";
+import { sep } from "../../runtime/path.ts";
 import { autoJump, resolveText } from "../../utils/linkResolver.ts";
 import DebugButton from "../../components/DebugButton.vue";
 
diff --git a/src/pages/suit/[id].vue b/src/pages/suit/[id].vue
index 98426ce..fdf3ae3 100644
--- a/src/pages/suit/[id].vue
+++ b/src/pages/suit/[id].vue
@@ -16,7 +16,7 @@ import {
   SuitSpaceBGProperties,
   SuitThumbUpProperties
 } from "../../types.ts";
-import { sep } from "@tauri-apps/api/path";
+import { sep } from "../../runtime/path.ts";
 import { autoJump, resolveText } from "../../utils/linkResolver.ts";
 
 const route = useRoute<'/suit/[id]'>()
diff --git a/src/pages/tool/webp.vue b/src/pages/tool/webp.vue
index 1089627..d1220b0 100644
--- a/src/pages/tool/webp.vue
+++ b/src/pages/tool/webp.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { open } from '@tauri-apps/plugin-dialog'
-import { invoke } from "@tauri-apps/api/core";
+import { invokeNative, isWebRuntime, open, webUnsupported } from "../../runtime/files.ts";
 
 const imagePaths = ref<string[]>([])
 const converting = ref(false)
 
 const selectImages = async () => {
-  imagePaths.value = await open({
+  if (isWebRuntime()) {
+    webUnsupported('本地 WebP 批量转换')
+    return
+  }
+
+  const selected = await open({
     title: '选择webp图片',
     multiple: true,
     filters: [{
@@ -14,6 +18,7 @@ const selectImages = async () => {
       extensions: ['webp'],
     }]
   }) ?? []
+  imagePaths.value = Array.isArray(selected) ? selected : selected ? [selected] : []
 }
 
 // TODO 解决转换时卡顿问题
@@ -21,7 +26,7 @@ const selectImages = async () => {
 const convert = () => {
   converting.value = true
   Promise.all(imagePaths.value.map(p => {
-    return invoke('convert_webp2gif', {
+    return invokeNative('convert_webp2gif', {
       inputPath: p,
       outputPath: p.split('.').slice(0, -1) + '.gif',
     })
@@ -118,4 +123,4 @@ const convert = () => {
 .list-leave-active {
   position: absolute;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/runtime/environment.ts b/src/runtime/environment.ts
new file mode 100644
index 0000000..034ea36
--- /dev/null
+++ b/src/runtime/environment.ts
@@ -0,0 +1,17 @@
+declare global {
+    interface Window {
+        __TAURI__?: unknown
+        __TAURI_INTERNALS__?: unknown
+    }
+}
+
+function isTauriRuntime() {
+    return typeof window !== 'undefined'
+        && ('__TAURI__' in window || '__TAURI_INTERNALS__' in window)
+}
+
+function isWebRuntime() {
+    return !isTauriRuntime()
+}
+
+export { isTauriRuntime, isWebRuntime }
diff --git a/src/runtime/files.ts b/src/runtime/files.ts
new file mode 100644
index 0000000..690c584
--- /dev/null
+++ b/src/runtime/files.ts
@@ -0,0 +1,305 @@
+import { isTauriRuntime, isWebRuntime } from "./environment.ts";
+import { runtimeFetch } from "./http.ts";
+
+interface DialogFilter {
+    name: string
+    extensions: string[]
+}
+
+interface OpenDialogOptions {
+    title?: string
+    multiple?: boolean
+    directory?: boolean
+    defaultPath?: string
+    filters?: DialogFilter[]
+}
+
+interface SaveDialogOptions {
+    defaultPath?: string
+    filters?: DialogFilter[]
+}
+
+type DownloadProgress = Parameters<Awaited<typeof import('@tauri-apps/plugin-upload')>['download']>[2]
+
+interface WebFileSystemDirectoryHandle {
+    name: string
+    getDirectoryHandle(name: string, options?: { create?: boolean }): Promise<WebFileSystemDirectoryHandle>
+    getFileHandle(name: string, options?: { create?: boolean }): Promise<WebFileSystemFileHandle>
+}
+
+interface WebFileSystemFileHandle {
+    createWritable(): Promise<WebFileSystemWritableFileStream>
+}
+
+interface WebFileSystemWritableFileStream {
+    write(data: Blob | string | ArrayBuffer | ArrayBufferView): Promise<void>
+    close(): Promise<void>
+}
+
+interface WebWindowWithDirectoryPicker extends Window {
+    showDirectoryPicker?: (options?: { mode?: 'read' | 'readwrite' }) => Promise<WebFileSystemDirectoryHandle>
+}
+
+const webDirectoryHandles = new Map<string, WebFileSystemDirectoryHandle>()
+
+function webUnsupported(feature: string) {
+    ElMessage({
+        message: `Web UI 暂不支持${feature}，请在桌面版中使用。`,
+        type: 'warning',
+    })
+}
+
+async function open(options: OpenDialogOptions): Promise<string | string[] | null> {
+    if (isTauriRuntime()) {
+        const dialog = await import('@tauri-apps/plugin-dialog')
+        return await dialog.open(options)
+    }
+
+    if (options.directory) {
+        return await openBrowserDirectory()
+    }
+
+    return await openBrowserFiles(options)
+}
+
+async function save(options: SaveDialogOptions): Promise<string | null> {
+    if (isTauriRuntime()) {
+        const dialog = await import('@tauri-apps/plugin-dialog')
+        return await dialog.save(options)
+    }
+
+    return options.defaultPath ?? 'download'
+}
+
+async function download(
+    url: string,
+    path: string,
+    progress?: DownloadProgress,
+    headers?: Map<string, string>,
+) {
+    if (isTauriRuntime()) {
+        const upload = await import('@tauri-apps/plugin-upload')
+        await upload.download(url, path, progress, headers)
+        return
+    }
+
+    try {
+        const response = await runtimeFetch(url, { headers: mapToHeaders(headers) })
+        const blob = await response.blob()
+
+        const webPath = resolveWebDirectoryPath(path)
+        if (webPath) {
+            await writeBlobToWebDirectory(webPath.directoryHandle, webPath.relativePath, blob)
+            progress?.({
+                progress: blob.size,
+                total: blob.size,
+            })
+            return
+        }
+
+        triggerBlobDownload(blob, basename(path))
+        progress?.({
+            progress: blob.size,
+            total: blob.size,
+        })
+    } catch (error) {
+        console.warn('浏览器下载回退为直接打开链接：', error)
+        triggerURLDownload(url, basename(path))
+    }
+}
+
+async function saveDataURL(path: string, data: string) {
+    if (isTauriRuntime()) {
+        const { invoke } = await import('@tauri-apps/api/core')
+        return await invoke('save_data_url', { path, data }) === 'ok'
+    }
+
+    const webPath = resolveWebDirectoryPath(path)
+    if (webPath) {
+        await writeBlobToWebDirectory(webPath.directoryHandle, webPath.relativePath, dataURLToBlob(data))
+        return true
+    }
+
+    triggerURLDownload(data, basename(path))
+    return true
+}
+
+async function createDir(path: string) {
+    if (isTauriRuntime()) {
+        const { invoke } = await import('@tauri-apps/api/core')
+        await invoke('create_dir', { path })
+        return
+    }
+
+    const webPath = resolveWebDirectoryPath(path)
+    if (webPath) {
+        await getWebDirectoryHandle(webPath.directoryHandle, webPath.relativePath)
+        return
+    }
+
+    console.debug(`Web UI 忽略创建目录：${path}`)
+}
+
+async function readFile(path: string) {
+    if (isTauriRuntime()) {
+        const fs = await import('@tauri-apps/plugin-fs')
+        return await fs.readFile(path)
+    }
+
+    throw new Error('Web UI 无法读取任意本地文件')
+}
+
+async function invokeNative<T>(command: string, args?: Record<string, unknown>) {
+    if (isTauriRuntime()) {
+        const { invoke } = await import('@tauri-apps/api/core')
+        return await invoke<T>(command, args)
+    }
+
+    throw new Error(`Web UI 暂不支持原生命令：${command}`)
+}
+
+async function openBrowserDirectory() {
+    const picker = (window as WebWindowWithDirectoryPicker).showDirectoryPicker
+    if (!picker) {
+        webUnsupported('选择本地目录')
+        return null
+    }
+
+    try {
+        const handle = await picker.call(window, { mode: 'readwrite' })
+        const label = `浏览器选择目录：${handle.name}`
+        webDirectoryHandles.set(label, handle)
+        return label
+    } catch (error) {
+        if (isAbortError(error)) return null
+        throw error
+    }
+}
+
+async function openBrowserFiles(options: OpenDialogOptions) {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.multiple = options.multiple ?? false
+    input.accept = formatAccept(options.filters)
+
+    return await new Promise<string | string[] | null>((resolve) => {
+        input.onchange = () => {
+            const files = Array.from(input.files ?? [])
+            if (files.length === 0) {
+                resolve(null)
+                return
+            }
+
+            const urls = files.map(file => URL.createObjectURL(file))
+            resolve(options.multiple ? urls : urls[0])
+        }
+        input.click()
+    })
+}
+
+function formatAccept(filters?: DialogFilter[]) {
+    return filters
+        ?.flatMap(filter => filter.extensions.map(extension => `.${extension}`))
+        .join(',') ?? ''
+}
+
+function triggerBlobDownload(blob: Blob, filename: string) {
+    const url = URL.createObjectURL(blob)
+    triggerURLDownload(url, filename)
+    setTimeout(() => URL.revokeObjectURL(url), 1000)
+}
+
+function triggerURLDownload(url: string, filename: string) {
+    const anchor = document.createElement('a')
+    anchor.href = url
+    anchor.download = filename
+    anchor.rel = 'noreferrer'
+    anchor.target = '_blank'
+    document.body.append(anchor)
+    anchor.click()
+    anchor.remove()
+}
+
+function resolveWebDirectoryPath(path: string) {
+    for (const [label, directoryHandle] of webDirectoryHandles) {
+        if (path !== label && !path.startsWith(`${label}/`) && !path.startsWith(`${label}\\`)) continue
+
+        return {
+            directoryHandle,
+            relativePath: path.slice(label.length).replace(/^[\\/]+/, '') || 'download',
+        }
+    }
+    return undefined
+}
+
+async function writeBlobToWebDirectory(
+    rootHandle: WebFileSystemDirectoryHandle,
+    relativePath: string,
+    blob: Blob,
+) {
+    const pathParts = splitPath(relativePath)
+    const filename = pathParts.pop() || 'download'
+    const directoryHandle = await getWebDirectoryHandle(rootHandle, pathParts.join('/'))
+    const fileHandle = await directoryHandle.getFileHandle(filename, { create: true })
+    const writable = await fileHandle.createWritable()
+    await writable.write(blob)
+    await writable.close()
+}
+
+async function getWebDirectoryHandle(
+    rootHandle: WebFileSystemDirectoryHandle,
+    relativePath: string,
+) {
+    let current = rootHandle
+    for (const part of splitPath(relativePath)) {
+        current = await current.getDirectoryHandle(part, { create: true })
+    }
+    return current
+}
+
+function splitPath(path: string) {
+    return path.split(/[\\/]/).filter(Boolean)
+}
+
+function dataURLToBlob(dataURL: string) {
+    const [header, payload = ''] = dataURL.split(',')
+    const mime = header.match(/^data:([^;]+)/)?.[1] ?? 'application/octet-stream'
+
+    if (header.includes(';base64')) {
+        const binary = atob(payload)
+        const bytes = new Uint8Array(binary.length)
+        for (let i = 0; i < binary.length; i++) {
+            bytes[i] = binary.charCodeAt(i)
+        }
+        return new Blob([bytes], { type: mime })
+    }
+
+    return new Blob([decodeURIComponent(payload)], { type: mime })
+}
+
+function isAbortError(error: unknown) {
+    return error instanceof DOMException && error.name === 'AbortError'
+}
+
+function basename(path: string) {
+    return path.split(/[\\/]/).pop() || 'download'
+}
+
+function mapToHeaders(headers?: Map<string, string>) {
+    if (!headers) return undefined
+    const next = new Headers()
+    headers.forEach((value, key) => next.set(key, value))
+    return next
+}
+
+export {
+    createDir,
+    download,
+    invokeNative,
+    isWebRuntime,
+    open,
+    readFile,
+    save,
+    saveDataURL,
+    webUnsupported,
+}
diff --git a/src/runtime/http.ts b/src/runtime/http.ts
new file mode 100644
index 0000000..61f028d
--- /dev/null
+++ b/src/runtime/http.ts
@@ -0,0 +1,67 @@
+import { isTauriRuntime, isWebRuntime } from "./environment.ts";
+
+const proxyPrefixes: Record<string, string> = {
+    'https://api.bilibili.com': '/__bili_api',
+    'https://app.bilibili.com': '/__bili_app_api',
+    'https://api.live.bilibili.com': '/__bili_live_api',
+    'https://passport.bilibili.com': '/__bili_passport_api',
+    'https://space.bilibili.com': '/__bili_space',
+    'https://i0.hdslb.com': '/__bili_static_i0',
+    'https://i1.hdslb.com': '/__bili_static_i1',
+    'https://i2.hdslb.com': '/__bili_static_i2',
+    'https://s1.hdslb.com': '/__bili_static_s1',
+    'https://b23.tv': '/__bili_b23',
+    'https://bili2233.cn': '/__bili_2233',
+}
+
+const browserForbiddenHeaders = new Set([
+    'cookie',
+    'host',
+    'origin',
+    'referer',
+    'user-agent',
+])
+
+function getProxyPrefix(url: URL) {
+    return proxyPrefixes[url.origin]
+}
+
+function runtimeURL(input: URL | string) {
+    const url = input instanceof URL ? input : new URL(input)
+    if (!isWebRuntime()) return url
+
+    const prefix = getProxyPrefix(url)
+    if (!prefix) return url
+
+    return new URL(`${prefix}${url.pathname}${url.search}${url.hash}`, window.location.origin)
+}
+
+function sanitizeBrowserInit(input: URL | string, init?: RequestInit): RequestInit | undefined {
+    if (!init?.headers) return init
+
+    const url = input instanceof URL ? input : new URL(input)
+    const shouldProxy = Boolean(getProxyPrefix(url))
+    const headers = new Headers(init.headers)
+
+    const cookie = headers.get('cookie')
+    if (shouldProxy && cookie) {
+        headers.set('X-Bili-Cookie', cookie)
+    }
+
+    browserForbiddenHeaders.forEach(header => headers.delete(header))
+    return {
+        ...init,
+        headers,
+    }
+}
+
+async function runtimeFetch(input: URL | string, init?: RequestInit) {
+    if (isTauriRuntime()) {
+        const { fetch } = await import('@tauri-apps/plugin-http')
+        return fetch(input, init)
+    }
+
+    return fetch(runtimeURL(input), sanitizeBrowserInit(input, init))
+}
+
+export { runtimeFetch, runtimeURL }
diff --git a/src/runtime/path.ts b/src/runtime/path.ts
new file mode 100644
index 0000000..2cbeb6d
--- /dev/null
+++ b/src/runtime/path.ts
@@ -0,0 +1,18 @@
+import { isTauriRuntime } from "./environment.ts";
+
+function sep() {
+    if (typeof navigator !== 'undefined' && /win/i.test(navigator.platform)) {
+        return '\\'
+    }
+    return '/'
+}
+
+async function downloadDir() {
+    if (isTauriRuntime()) {
+        const path = await import('@tauri-apps/api/path')
+        return await path.downloadDir()
+    }
+    return '浏览器默认下载目录'
+}
+
+export { downloadDir, sep }
diff --git a/src/runtime/store.ts b/src/runtime/store.ts
new file mode 100644
index 0000000..504644a
--- /dev/null
+++ b/src/runtime/store.ts
@@ -0,0 +1,121 @@
+import { isTauriRuntime } from "./environment.ts";
+
+interface RuntimeStoreOptions {
+    autoSave?: boolean
+}
+
+type StoreData = Record<string, unknown>
+
+interface TauriStore {
+    get<T>(key: string): Promise<T | undefined>
+    set(key: string, value: unknown): Promise<void>
+    delete(key: string): Promise<void>
+    clear(): Promise<void>
+    has(key: string): Promise<boolean>
+    save(): Promise<void>
+}
+
+const memoryStores = new Map<string, StoreData>()
+
+class RuntimeStore {
+    private tauriStore?: Promise<TauriStore>
+
+    constructor(
+        private readonly name: string,
+        private readonly options: RuntimeStoreOptions = {},
+    ) {
+    }
+
+    async get<T>(key: string) {
+        if (isTauriRuntime()) {
+            return await (await this.getTauriStore()).get<T>(key)
+        }
+        return this.readBrowserData()[key] as T | undefined
+    }
+
+    async set(key: string, value: unknown) {
+        if (isTauriRuntime()) {
+            await (await this.getTauriStore()).set(key, value)
+            return
+        }
+
+        const data = this.readBrowserData()
+        data[key] = value
+        this.writeBrowserData(data)
+    }
+
+    async delete(key: string) {
+        if (isTauriRuntime()) {
+            await (await this.getTauriStore()).delete(key)
+            return
+        }
+
+        const data = this.readBrowserData()
+        delete data[key]
+        this.writeBrowserData(data)
+    }
+
+    async clear() {
+        if (isTauriRuntime()) {
+            await (await this.getTauriStore()).clear()
+            return
+        }
+
+        this.writeBrowserData({})
+    }
+
+    async has(key: string) {
+        if (isTauriRuntime()) {
+            return await (await this.getTauriStore()).has(key)
+        }
+        return Object.prototype.hasOwnProperty.call(this.readBrowserData(), key)
+    }
+
+    async save() {
+        if (isTauriRuntime()) {
+            await (await this.getTauriStore()).save()
+        }
+    }
+
+    private getBrowserStorageKey() {
+        return `bili-resource-downloader:${this.name}`
+    }
+
+    private readBrowserData(): StoreData {
+        if (this.options.autoSave === false) {
+            const data = memoryStores.get(this.name) ?? {}
+            memoryStores.set(this.name, data)
+            return data
+        }
+
+        const raw = localStorage.getItem(this.getBrowserStorageKey())
+        if (!raw) return {}
+
+        try {
+            return JSON.parse(raw) as StoreData
+        } catch {
+            return {}
+        }
+    }
+
+    private writeBrowserData(data: StoreData) {
+        if (this.options.autoSave === false) {
+            memoryStores.set(this.name, data)
+            return
+        }
+        localStorage.setItem(this.getBrowserStorageKey(), JSON.stringify(data))
+    }
+
+    private getTauriStore() {
+        this.tauriStore ??= import('@tauri-apps/plugin-store').then(({ LazyStore }) => {
+            return new LazyStore(this.name, this.options) as unknown as TauriStore
+        })
+        return this.tauriStore
+    }
+}
+
+function createRuntimeStore(name: string, options?: RuntimeStoreOptions) {
+    return new RuntimeStore(name, options)
+}
+
+export { createRuntimeStore }
diff --git a/src/runtime/window.ts b/src/runtime/window.ts
new file mode 100644
index 0000000..e41f2ec
--- /dev/null
+++ b/src/runtime/window.ts
@@ -0,0 +1,60 @@
+import { isTauriRuntime } from "./environment.ts";
+
+interface FocusPayload {
+    payload: boolean
+}
+
+function getCurrentAppWindow() {
+    return {
+        async minimize() {
+            if (isTauriRuntime()) {
+                const { getCurrentWindow } = await import('@tauri-apps/api/window')
+                await getCurrentWindow().minimize()
+            }
+        },
+        async toggleMaximize() {
+            if (isTauriRuntime()) {
+                const { getCurrentWindow } = await import('@tauri-apps/api/window')
+                await getCurrentWindow().toggleMaximize()
+            }
+        },
+        async close() {
+            if (isTauriRuntime()) {
+                const { getCurrentWindow } = await import('@tauri-apps/api/window')
+                await getCurrentWindow().close()
+            } else {
+                window.close()
+            }
+        },
+    }
+}
+
+async function onFocusChanged(callback: (event: FocusPayload) => void) {
+    if (isTauriRuntime()) {
+        const { getCurrentWindow } = await import('@tauri-apps/api/window')
+        return await getCurrentWindow().onFocusChanged(callback)
+    }
+
+    const onFocus = () => callback({ payload: true })
+    const onBlur = () => callback({ payload: false })
+    window.addEventListener('focus', onFocus)
+    window.addEventListener('blur', onBlur)
+    return () => {
+        window.removeEventListener('focus', onFocus)
+        window.removeEventListener('blur', onBlur)
+    }
+}
+
+async function readClipboardText() {
+    if (isTauriRuntime()) {
+        const { readText } = await import('@tauri-apps/plugin-clipboard-manager')
+        return await readText()
+    }
+
+    if (!navigator.clipboard?.readText) {
+        throw new Error('浏览器不允许读取剪贴板')
+    }
+    return await navigator.clipboard.readText()
+}
+
+export { getCurrentAppWindow, onFocusChanged, readClipboardText }
diff --git a/src/store/useWbiStore/api/index.ts b/src/store/useWbiStore/api/index.ts
index c6e9ecd..e809ffb 100644
--- a/src/store/useWbiStore/api/index.ts
+++ b/src/store/useWbiStore/api/index.ts
@@ -1,6 +1,8 @@
+import { runtimeFetch } from "../../../runtime/http.ts";
+
 // 获取最新的 img_key 和 sub_key
 export async function getWbiKeys() {
-    const res = await fetch('https://api.bilibili.com/x/web-interface/nav', {
+    const res = await runtimeFetch('https://api.bilibili.com/x/web-interface/nav', {
         headers: {
             'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3',
             Referer: 'https://www.bilibili.com/'
@@ -16,7 +18,7 @@ export async function getWbiKeys() {
         };
     };
 
-    const htmlResp = await fetch('https://space.bilibili.com/1',).then(d => d.text())
+    const htmlResp = await runtimeFetch('https://space.bilibili.com/1',).then(d => d.text())
     const regex = /<script id="__RENDER_DATA__" type="application\/json">([^<]+)<\/script>/
 
     // 你是渲染数据吗？我觉得我是
diff --git a/src/store/useWbiStore/internal.ts b/src/store/useWbiStore/internal.ts
index 39bfd56..de31161 100644
--- a/src/store/useWbiStore/internal.ts
+++ b/src/store/useWbiStore/internal.ts
@@ -1,6 +1,6 @@
-import { LazyStore } from "@tauri-apps/plugin-store";
+import { createRuntimeStore } from "../../runtime/store.ts";
 
-const store = new LazyStore('wbi.bin')
+const store = createRuntimeStore('wbi.bin')
 
 async function clearWbiStore() {
     await store.clear()
@@ -15,4 +15,4 @@ async function setWbi(wbi: WbiStore) {
     await store.save()
 }
 
-export { clearWbiStore, getWbi, setWbi }
\ No newline at end of file
+export { clearWbiStore, getWbi, setWbi }
diff --git a/src/utils/cliboardListener.ts b/src/utils/cliboardListener.ts
index c1ed93a..21de284 100644
--- a/src/utils/cliboardListener.ts
+++ b/src/utils/cliboardListener.ts
@@ -1,17 +1,19 @@
-import { readText } from "@tauri-apps/plugin-clipboard-manager";
 import { autoJump } from "./linkResolver.ts";
-import { getCurrentWindow } from "@tauri-apps/api/window";
 import { globalConfig } from "./globalConfig.ts";
+import { onFocusChanged, readClipboardText } from "../runtime/window.ts";
+import { isWebRuntime } from "../runtime/environment.ts";
 
 let clipboardCache = ''
 
-const window = getCurrentWindow()
-window.onFocusChanged(async ({ payload: focused }) => {
+if (isWebRuntime()) {
+    console.debug('Web UI 不启用自动剪贴板监听')
+} else {
+onFocusChanged(async ({ payload: focused }) => {
     if (!focused || !globalConfig.value.readClipboard) return
 
     let text: string
     try {
-        text = await readText()
+        text = await readClipboardText()
     } catch {
         return
     }
@@ -19,4 +21,5 @@ window.onFocusChanged(async ({ payload: focused }) => {
         clipboardCache = text
         await autoJump(text)
     }
-})
\ No newline at end of file
+})
+}
diff --git a/src/utils/deviceUtils.ts b/src/utils/deviceUtils.ts
index 88e3ac1..3b71b97 100644
--- a/src/utils/deviceUtils.ts
+++ b/src/utils/deviceUtils.ts
@@ -1,9 +1,12 @@
-import { downloadDir } from "@tauri-apps/api/path";
-import { platform } from "@tauri-apps/plugin-os";
+import { downloadDir } from "../runtime/path.ts";
+import { isTauriRuntime } from "../runtime/environment.ts";
 
 const isMobileDevice = () => {
-  const plat = platform();
-  return plat === "android" || plat === "ios";
+  if (isTauriRuntime()) {
+    const ua = navigator.userAgent.toLowerCase()
+    return ua.includes('android') || /iphone|ipad|ipod/.test(ua)
+  }
+  return /android|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase())
 };
 
 const getDownloadPath = async (): Promise<string> => {
diff --git a/src/utils/downloadManager.ts b/src/utils/downloadManager.ts
index 38b0d9f..37b75b8 100644
--- a/src/utils/downloadManager.ts
+++ b/src/utils/downloadManager.ts
@@ -1,12 +1,11 @@
 import { BatchDownloadTask } from "../types.ts";
-import { LazyStore } from '@tauri-apps/plugin-store';
-import { download } from "@tauri-apps/plugin-upload";
 import { emitter } from "../main.ts";
-import { sep } from "@tauri-apps/api/path";
-import { invoke } from "@tauri-apps/api/core";
 import { globalConfig } from "./globalConfig.ts";
+import { createRuntimeStore } from "../runtime/store.ts";
+import { createDir, download, isWebRuntime } from "../runtime/files.ts";
+import { sep } from "../runtime/path.ts";
 
-const store = new LazyStore('downloadTask.json')
+const store = createRuntimeStore('downloadTask.json')
 
 const MAX_TASKS = computed(() => globalConfig.value.maxConcurrentDownloadTasks)
 
@@ -91,7 +90,7 @@ async function startDownload() {
                 .slice(0, -1)
                 .join(sep())
 
-            await invoke('create_dir', { path: finalDirectory })
+            await createDir(finalDirectory)
 
             // 调度器，检测当前放行下载数量，只有小于 3 时 object 对象才转为 fulfilled
             const endOperate = await enableDownloadScheduler()
@@ -139,6 +138,8 @@ async function getAllDownloadTasks() {
 
 // 若批量下载未完成，自动重新发起下载
 async function continueUnfinishedDownloadTasks() {
+    if (isWebRuntime()) return
+
     if (await store.get<boolean>('downloading') === true) {
         console.debug('发现未完成下载任务，继续下载')
         await startDownload()
@@ -153,4 +154,4 @@ export {
     startDownload,
     getAllDownloadTasks,
     continueUnfinishedDownloadTasks
-}
\ No newline at end of file
+}
diff --git a/src/utils/globalConfig.ts b/src/utils/globalConfig.ts
index d9cb404..eeeda44 100644
--- a/src/utils/globalConfig.ts
+++ b/src/utils/globalConfig.ts
@@ -1,8 +1,8 @@
 import { getDownloadPath } from "./deviceUtils.ts";
-import { LazyStore } from "@tauri-apps/plugin-store";
 import { ref, watch } from 'vue';
+import { createRuntimeStore } from "../runtime/store.ts";
 
-const store = new LazyStore('config.json');
+const store = createRuntimeStore('config.json');
 
 const DEFAULT_CONFIG = {
     showDebugButton: true,
@@ -56,4 +56,4 @@ async function resetConfig() {
     };
 }
 
-export { globalConfig, resetConfig, allowedImageFormats };
\ No newline at end of file
+export { globalConfig, resetConfig, allowedImageFormats };
diff --git a/src/utils/image.ts b/src/utils/image.ts
index 0662163..4289e3b 100644
--- a/src/utils/image.ts
+++ b/src/utils/image.ts
@@ -1,8 +1,8 @@
-import { invoke } from "@tauri-apps/api/core";
 import { EmojiImage } from "../types.ts";
+import { invokeNative } from "../runtime/files.ts";
 
 const convertWebp2Gif = async (inputFile: string, outputFile: string) => {
-    await invoke('convert_webp2gif', { inputFile, outputFile })
+    await invokeNative('convert_webp2gif', { inputFile, outputFile })
 }
 
 const formatToUrl = (format: string, emoji: EmojiImage): string => {
@@ -18,4 +18,4 @@ const formatToUrl = (format: string, emoji: EmojiImage): string => {
     }
 }
 
-export { formatToUrl, convertWebp2Gif }
\ No newline at end of file
+export { formatToUrl, convertWebp2Gif }
diff --git a/src/utils/linkResolver.ts b/src/utils/linkResolver.ts
index 55df602..b78c55b 100644
--- a/src/utils/linkResolver.ts
+++ b/src/utils/linkResolver.ts
@@ -1,4 +1,5 @@
 import { router } from "../main.ts";
+import { runtimeFetch } from "../runtime/http.ts";
 
 type Types = 'liveroom' | 'user' | 'dynamic' | 'video' | 'suit' | 'lottery'
 
@@ -65,7 +66,7 @@ function resolveText(text?: string): Types | null {
 }
 
 async function resolveShortLink(url: string): Promise<string | null> {
-    const resp = await fetch(url)
+    const resp = await runtimeFetch(url)
     return resp.url
 }
 
@@ -272,4 +273,4 @@ export {
     resolveSuitID,
     autoJump,
     resolveShortLink,
-}
\ No newline at end of file
+}
diff --git a/src/utils/loginManager.ts b/src/utils/loginManager.ts
index e43e87d..fb6ea6d 100644
--- a/src/utils/loginManager.ts
+++ b/src/utils/loginManager.ts
@@ -1,7 +1,7 @@
-import { LazyStore } from "@tauri-apps/plugin-store";
 import { clearAPICache } from "../APIFetch.ts";
+import { createRuntimeStore } from "../runtime/store.ts";
 
-const store = new LazyStore('login.json')
+const store = createRuntimeStore('login.json')
 
 const userLoggedIn = ref(false)
 
@@ -29,4 +29,4 @@ async function clearLoginCookie() {
     userLoggedIn.value = false
 }
 
-export { saveLoginCookie, getLoginCookie, checkLoginState, clearLoginCookie, userLoggedIn }
\ No newline at end of file
+export { saveLoginCookie, getLoginCookie, checkLoginState, clearLoginCookie, userLoggedIn }
diff --git a/vite.config.ts b/vite.config.ts
index 219800e..e9fddd6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig } from "vite";
+import { defineConfig, type ProxyOptions } from "vite";
 import vue from "@vitejs/plugin-vue";
 
 import { VueRouterAutoImports } from 'unplugin-vue-router'
@@ -13,6 +13,42 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 // @ts-expect-error process is a nodejs global
 const host = process.env.TAURI_DEV_HOST;
 
+const configureBiliProxy: ProxyOptions['configure'] = (proxy) => {
+    proxy.on('proxyReq', (proxyReq, req) => {
+        const cookie = req.headers['x-bili-cookie']
+        if (cookie) {
+            proxyReq.setHeader('Cookie', Array.isArray(cookie) ? cookie.join('; ') : cookie)
+        }
+
+        proxyReq.removeHeader('X-Bili-Cookie')
+        proxyReq.removeHeader('x-bili-cookie')
+        proxyReq.setHeader('Origin', 'https://www.bilibili.com')
+        proxyReq.setHeader('Referer', 'https://www.bilibili.com/')
+        proxyReq.setHeader('User-Agent', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0')
+    })
+}
+
+const createBiliProxy = (target: string, prefix: string): ProxyOptions => ({
+    target,
+    changeOrigin: true,
+    rewrite: (path: string) => path.startsWith(prefix) ? path.slice(prefix.length) : path,
+    configure: configureBiliProxy,
+})
+
+const proxy = {
+    '/__bili_api': createBiliProxy('https://api.bilibili.com', '/__bili_api'),
+    '/__bili_app_api': createBiliProxy('https://app.bilibili.com', '/__bili_app_api'),
+    '/__bili_live_api': createBiliProxy('https://api.live.bilibili.com', '/__bili_live_api'),
+    '/__bili_passport_api': createBiliProxy('https://passport.bilibili.com', '/__bili_passport_api'),
+    '/__bili_space': createBiliProxy('https://space.bilibili.com', '/__bili_space'),
+    '/__bili_static_i0': createBiliProxy('https://i0.hdslb.com', '/__bili_static_i0'),
+    '/__bili_static_i1': createBiliProxy('https://i1.hdslb.com', '/__bili_static_i1'),
+    '/__bili_static_i2': createBiliProxy('https://i2.hdslb.com', '/__bili_static_i2'),
+    '/__bili_static_s1': createBiliProxy('https://s1.hdslb.com', '/__bili_static_s1'),
+    '/__bili_b23': createBiliProxy('https://b23.tv', '/__bili_b23'),
+    '/__bili_2233': createBiliProxy('https://bili2233.cn', '/__bili_2233'),
+}
+
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
     plugins: [
@@ -22,9 +58,6 @@ export default defineConfig(async () => ({
                 'vue',
                 '@vueuse/core',
                 VueRouterAutoImports,
-                {
-                    '@tauri-apps/plugin-http': ['fetch']
-                }
             ],
             resolvers: [
                 ElementPlusResolver(),
@@ -72,5 +105,9 @@ export default defineConfig(async () => ({
             // 3. tell vite to ignore watching `src-tauri`
             ignored: ["**/src-tauri/**"],
         },
+        proxy,
+    },
+    preview: {
+        proxy,
     },
 }));

From 710b22bf5d32acf28d248a79cf4ba3b3aaeb0917 Mon Sep 17 00:00:00 2001
From: zihan xu <zihan19@illinois.edu>
Date: Sat, 13 Jun 2026 23:23:58 +0800
Subject: [PATCH 2/2] docs: add deployment guides

---
 README.md | 85 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 83 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index efd77da..abde889 100644
--- a/README.md
+++ b/README.md
@@ -31,7 +31,88 @@ biliresourcedownloader_版本号_x64-setup.exe`
 
 ## 文档
 
-WIP
+### Web UI 本机部署
+
+Web UI 适合在浏览器中临时使用本项目功能，不需要安装桌面端。由于浏览器不能直接跨域访问 B 站接口，也不能直接设置 `Cookie` 请求头，Web UI 必须通过本项目内置的 Vite 本地代理运行，不建议将 `dist` 目录直接部署到普通静态站点。
+
+1. 安装依赖
+
+   ```bash
+   npm install
+   ```
+
+   如果本机使用 Yarn，也可以执行：
+
+   ```bash
+   yarn install
+   ```
+
+2. 开发模式运行
+
+   ```bash
+   npm run dev -- --host 127.0.0.1
+   ```
+
+   默认端口为 `1420`。浏览器打开终端输出的本地地址即可使用。
+
+3. 构建并以预览模式部署
+
+   ```bash
+   npm run build
+   npm run preview -- --host 127.0.0.1 --port 4173
+   ```
+
+   访问 `http://127.0.0.1:4173/`。
+
+4. 登录与下载说明
+
+   - Web UI 的扫码登录依赖本地代理转发登录 Cookie，请保持页面从 `127.0.0.1` 或 `localhost` 的 Vite 服务访问。
+   - 批量下载目录选择依赖浏览器的 File System Access API。支持该 API 的 Chromium 系浏览器可以选择本地目录并按资源结构写入文件；不支持时会回退到浏览器默认下载目录。
+   - 桌面端 Tauri 版本仍然支持原生文件选择、下载和本地存储能力，长期使用建议优先使用桌面版。
+
+### 桌面 App 打包
+
+桌面端使用 Tauri v2 打包。打包前请先安装对应系统的 Tauri 前置依赖，包括 Rust、平台 WebView 依赖和系统构建工具；本项目的 Tauri 配置会在打包前执行 `bun run build`，因此还需要安装 Bun。
+
+1. 安装前置工具
+
+   - 安装 [Rust](https://www.rust-lang.org/tools/install)
+   - 按照 [Tauri v2 前置依赖文档](https://v2.tauri.app/start/prerequisites/) 安装当前系统所需依赖
+   - 安装 [Bun](https://bun.sh/)
+
+2. 安装前端依赖
+
+   ```bash
+   bun install
+   ```
+
+   如果使用 npm 管理依赖，也可以执行：
+
+   ```bash
+   npm install
+   ```
+
+3. 打包 App
+
+   ```bash
+   npm run buildAll
+   ```
+
+   该脚本等价于：
+
+   ```bash
+   npm run tauri build -b
+   ```
+
+4. 查看产物
+
+   打包完成后，安装包和可执行文件会输出到：
+
+   ```text
+   src-tauri/target/release/bundle/
+   ```
+
+   当前配置的 `bundle.targets` 为 `all`，Tauri 会为当前操作系统生成可用的安装包格式。跨平台安装包通常需要在对应系统上分别打包。
 
 ## 主要技术栈
 
@@ -51,4 +132,4 @@ WIP
 
 ## 开源协议
 
-本项目基于 [MIT协议](./LICENSE) 进行开源
\ No newline at end of file
+本项目基于 [MIT协议](./LICENSE) 进行开源