🚸 即时响应页面适配

src/App.vue

@@ -18,9 +18,8 @@ import showSnackbar from "@comp/func/snackbar.js";
 import TGSqlite from "@Sqlite/index.js";
 import TSUserAccount from "@Sqlite/modules/userAccount.js";
 import { app, core, event, webviewWindow } from "@tauri-apps/api";
-import { PhysicalSize } from "@tauri-apps/api/dpi";
 import type { Event, UnlistenFn } from "@tauri-apps/api/event";
-import { currentMonitor, getCurrentWindow } from "@tauri-apps/api/window";
+import { getCurrentWindow, LogicalSize } from "@tauri-apps/api/window";
 import { mkdir } from "@tauri-apps/plugin-fs";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, onUnmounted, ref } from "vue";
@@ -30,6 +29,7 @@ import { useAppStore } from "@/store/modules/app.js";
 import { useUserStore } from "@/store/modules/user.js";
 import { getBuildTime } from "@/utils/TGBuild.js";
 import TGLogger from "@/utils/TGLogger.js";
+import { getWindowSize, resizeWindow } from "@/utils/TGWindow.js";
 import OtherApi from "@/web/request/otherReq.js";
 
 const router = useRouter();
@@ -40,6 +40,7 @@ const vuetifyTheme = computed<string>(() => (theme.value === "dark" ? "dark" : "
 
 let themeListener: UnlistenFn | null = null;
 let urlListener: UnlistenFn | null = null;
+let resizeListener: UnlistenFn | null = null;
 
 onMounted(async () => {
   const win = getCurrentWindow();
@@ -51,43 +52,28 @@ onMounted(async () => {
     await core.invoke("init_app");
     urlListener = await getDeepLink();
   }
-  if (needResize.value !== "false") await checkResize();
+  if (needResize.value !== "false") await resizeWindow();
   document.documentElement.className = theme.value;
   themeListener = await event.listen<string>("readTheme", (e: Event<string>) => {
     theme.value = e.payload;
     document.documentElement.className = theme.value;
   });
+  resizeListener = await event.listen<string>("needResize", async (e: Event<string>) => {
+    console.log(needResize);
+    const windowCur = webviewWindow.getCurrentWebviewWindow();
+    if (e.payload !== "false") {
+      await resizeWindow();
+    } else {
+      const size = getWindowSize(windowCur.label);
+      await windowCur.setSize(new LogicalSize(size.width, size.height));
+      await windowCur.setZoom(1);
+    }
+    await windowCur.center();
+  });
   await getCurrentWindow().show();
+  await getCurrentWindow().center();
 });
 
-async function checkResize(): Promise<void> {
-  const screen = await currentMonitor();
-  if (screen === null) {
-    showSnackbar.error("获取屏幕信息失败！", 3000);
-    return;
-  }
-  const windowCur = webviewWindow.getCurrentWebviewWindow();
-  if (await windowCur.isMaximized()) return;
-  const designSize = getSize(windowCur.label);
-  const widthScale = screen.size.width / 1920;
-  const heightScale = screen.size.height / 1080;
-  await windowCur.setSize(
-    new PhysicalSize(
-      Math.round(designSize.width * widthScale),
-      Math.round(designSize.height * heightScale),
-    ),
-  );
-  await windowCur.setZoom((1 / screen.scaleFactor) * Math.min(widthScale, heightScale));
-  await windowCur.setFocus();
-  return;
-}
-
-function getSize(label: string): PhysicalSize {
-  if (label === "TeyvatGuide") return new PhysicalSize(1600, 900);
-  if (label === "Sub_window" || label === "Dev_JSON") return new PhysicalSize(960, 720);
-  return new PhysicalSize(1280, 720);
-}
-
 // 启动后只执行一次的监听
 async function listenOnInit(): Promise<void> {
   console.info("[App][listenOnInit] 监听初始化事件！");
@@ -261,6 +247,10 @@ onUnmounted(() => {
     urlListener();
     urlListener = null;
   }
+  if (resizeListener !== null) {
+    resizeListener();
+    resizeListener = null;
+  }
 });
 </script>
 <style lang="css" scoped>

src/components/pageHome/ph-position-card.vue

@@ -37,7 +37,7 @@ import showSnackbar from "@comp/func/snackbar.js";
 import { computed, onMounted, onUnmounted, ref } from "vue";
 
 import { parseLink } from "@/utils/linkParser.js";
-import { createPost } from "@/utils/TGWindow.js";
+import { createObc, createPost } from "@/utils/TGWindow.js";
 import { stamp2LastTime, timestampToDate } from "@/utils/toolFunc.js";
 
 type PhPositionCardProps = { pos: TGApp.BBS.Obc.PositionItem };
@@ -72,9 +72,7 @@ function handlePosition(): void {
 
 async function openPosition(): Promise<void> {
   if (props.pos.url === "" && props.pos.content_id !== 0) {
-    window.open(
-      `https://bbs.mihoyo.com/ys/obc/content/${props.pos.content_id}/detail?bbs_presentation_style=no_header`,
-    );
+    await createObc(props.pos.content_id, props.pos.title);
     return;
   }
   const res = await parseLink(props.pos.url);
@@ -107,7 +105,7 @@ onUnmounted(() => {
   color: var(--box-text-1);
 }
 
-.dark .ph-pool-card {
+.dark .ph-position-card {
   border: 1px solid var(--common-shadow-1);
   box-shadow: unset;
 }

src/pages/common/PageConfig.vue

@@ -158,6 +158,7 @@ import TcInfo from "@comp/pageConfig/tc-info.vue";
 import TcUserBadge from "@comp/pageConfig/tc-userBadge.vue";
 import TGSqlite from "@Sqlite/index.js";
 import { core, event } from "@tauri-apps/api";
+import { emit } from "@tauri-apps/api/event";
 import { open } from "@tauri-apps/plugin-dialog";
 import { remove } from "@tauri-apps/plugin-fs";
 import { platform } from "@tauri-apps/plugin-os";
@@ -502,13 +503,11 @@ function submitDevMode(): void {
 }
 
 // 开启窗口回正
-function submitResize(): void {
-  appStore.needResize = (!isNeedResize.value).toString();
-  if (isNeedResize.value) {
-    showSnackbar.success("已关闭窗口回正!");
-    return;
-  }
-  showSnackbar.success("已开启窗口回正!");
+async function submitResize(): Promise<void> {
+  needResize.value = (!isNeedResize.value).toString();
+  if (isNeedResize.value) showSnackbar.success("已关闭窗口回正!");
+  else showSnackbar.success("已开启窗口回正!");
+  await emit("needResize", needResize.value);
 }
 
 // 开启无痕浏览

src/utils/TGWindow.ts

@@ -1,12 +1,14 @@
 /**
  * @file utils/TGWindow.ts
  * @description 窗口创建相关工具函数
- * @since Beta v0.6.2
+ * @since Beta v0.7.2
  */
 
 import type { RenderCard } from "@comp/app/t-postcard.vue";
-import { core, window as TauriWindow } from "@tauri-apps/api";
-import type { WindowOptions } from "@tauri-apps/api/window";
+import showSnackbar from "@comp/func/snackbar.js";
+import { core, webviewWindow, window as TauriWindow } from "@tauri-apps/api";
+import { PhysicalSize } from "@tauri-apps/api/dpi";
+import { currentMonitor, WindowOptions } from "@tauri-apps/api/window";
 
 import TGLogger from "./TGLogger.js";
 
@@ -79,3 +81,47 @@ export async function createObc(contentId: number, label: string): Promise<void>
   const obcUrl = `https://bbs.mihoyo.com/ys/obc/content/${contentId}/detail?bbs_presentation_style=no_header`;
   await createTGWindow(obcUrl, "Sub_window", `Content_${contentId}_${label}`, 1200, 800, true);
 }
+
+/**
+ * @description 获取不同label下的默认窗口大小
+ * @since Beta v0.7.2
+ * @param {string} label 窗口标签
+ * @returns {PhysicalSize}
+ */
+export function getWindowSize(label: string): PhysicalSize {
+  switch (label) {
+    case "TeyvatGuide":
+      return new PhysicalSize(1600, 900);
+    case "Sub_window":
+    case "Dev_JSON":
+      return new PhysicalSize(960, 720);
+    default:
+      return new PhysicalSize(1280, 720);
+  }
+}
+
+/**
+ * @description 窗口适配
+ * @since Beta v0.7.2
+ * @returns Promise<void>
+ */
+export async function resizeWindow(): Promise<void> {
+  const screen = await currentMonitor();
+  if (screen === null) {
+    showSnackbar.error("获取屏幕信息失败！", 3000);
+    return;
+  }
+  const windowCur = webviewWindow.getCurrentWebviewWindow();
+  if (await windowCur.isMaximized()) return;
+  const designSize = getWindowSize(windowCur.label);
+  const widthScale = screen.size.width / 1920;
+  const heightScale = screen.size.height / 1080;
+  await windowCur.setSize(
+    new PhysicalSize(
+      Math.round(designSize.width * widthScale),
+      Math.round(designSize.height * heightScale),
+    ),
+  );
+  await windowCur.setZoom((1 / screen.scaleFactor) * Math.min(widthScale, heightScale));
+  await windowCur.setFocus();
+}