✨ 完成参数获取&剪贴板读取 #42

src/App.vue

@@ -13,10 +13,11 @@
 <script lang="ts" setup>
 // vue
 import { onBeforeMount, onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
 import TSidebar from "./components/app/t-sidebar.vue";
 import TBackTop from "./components/app/t-backTop.vue";
 // tauri
-import { app, event, fs, tauri, window } from "@tauri-apps/api";
+import { app, event, fs, tauri, window as TauriWindow } from "@tauri-apps/api";
 // store
 import { useAppStore } from "./store/modules/app";
 // utils
@@ -27,13 +28,16 @@ import TGSqlite from "./plugins/Sqlite";
 const appStore = useAppStore();
 const isMain = ref<boolean>(false);
 const theme = ref<string>(appStore.theme);
+const router = useRouter();
 
 onBeforeMount(async () => {
   // 获取当前窗口
-  const win = window.getCurrent();
+  const win = TauriWindow.getCurrent();
   isMain.value = win.label === "TeyvatGuide";
   if (isMain.value) {
     const title = "Teyvat Guide v" + (await app.getVersion()) + " Beta";
+    await tauri.invoke("register_deep_link");
+    await getDeepLink();
     await win.setTitle(title);
     await emojiLoad();
     await checkLoad();
@@ -43,10 +47,7 @@ onBeforeMount(async () => {
 onMounted(async () => {
   // 获取当前主题
   document.documentElement.className = theme.value;
-  await tauri.invoke("register_deep_link");
-  console.info("已注册深度链接！");
   await listenOnTheme();
-  await getDeepLink();
 });
 
 // 监听主题变化
@@ -107,10 +108,35 @@ async function initData(): Promise<void> {
 }
 
 async function getDeepLink(): Promise<void> {
-  console.info("正在监听深度链接！");
-  await event.listen("test_deep_link", (e) => {
-    console.log("深度链接已触发！");
-    console.log(e.payload);
+  await event.listen("active_deep_link", (e) => {
+    new TauriWindow.WebviewWindow("TeyvatGuide")
+      .setFocus()
+      .then(async () => {
+        // 导入格式: teyvatgiude://import_uigf?app=appName
+        // 跳转格式: localhost:4000/achievements/?app=appName
+        if ((<string>e.payload).startsWith("teyvatguide://import_uigf")) {
+          const param = (<string>e.payload).split("teyvatguide://import_uigf/?")[1];
+          let appName = "";
+          if (param) {
+            appName = param.split("app=")[1];
+          }
+          if (appName === "") {
+            await router.push("/achievements");
+          } else {
+            await router.push("/achievements/?app=" + appName);
+          }
+          window.location.reload();
+        } else {
+          showSnackbar({
+            text: "无效的 deep link！",
+            color: "error",
+            timeout: 3000,
+          });
+        }
+      })
+      .catch((e) => {
+        console.log(e);
+      });
   });
 }
 </script>

src/pages/common/Achievements.vue

@@ -105,8 +105,10 @@
 <script lang="ts" setup>
 // vue
 import { computed, onBeforeMount, onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import ToLoading from "../../components/overlay/to-loading.vue";
 import showSnackbar from "../../components/func/snackbar";
+import showConfirm from "../../components/func/confirm";
 // tauri
 import { dialog, fs } from "@tauri-apps/api";
 // Store
@@ -153,6 +155,10 @@ const translateY = ref<string>("0px");
 // render
 const search = ref<string>("");
 
+// route
+const route = useRoute();
+const router = useRouter();
+
 onBeforeMount(async () => {
   const { total, fin } = await TGSqlite.getAchievementsOverview();
   achievementsStore.flushData(total, fin);
@@ -169,6 +175,9 @@ onMounted(async () => {
   loadingTitle.value = "正在获取成就数据";
   selectedAchievement.value = await TGSqlite.getAchievements();
   loading.value = false;
+  if (route.query.app) {
+    await handleImportOuter(<string>route.query.app);
+  }
 });
 
 function handleScroll(e: Event): void {
@@ -336,6 +345,47 @@ async function exportJson(): Promise<void> {
 function getIcon(series: number): string | undefined {
   return AppAchievementSeriesData.find((item) => item.id === series)?.icon;
 }
+
+// 处理外部导入
+async function handleImportOuter(app: string): Promise<void> {
+  const confirm = await showConfirm({
+    title: "是否导入祈愿数据？",
+    text: `来源APP：${app}`,
+  });
+  if (confirm === true) {
+    // 读取 剪贴板
+    const clipboard = await window.navigator.clipboard.readText();
+    let data: TGApp.Plugins.UIAF.Achievement[];
+    // 里面是完整的 uiaf 数据
+    try {
+      data = JSON.parse(clipboard).list;
+      loadingTitle.value = "正在导入数据";
+      loading.value = true;
+      await TGSqlite.mergeUIAF(data);
+      loading.value = false;
+      showSnackbar({
+        color: "success",
+        text: "导入成功，即将刷新页面",
+      });
+    } catch (e) {
+      console.error(e);
+      showSnackbar({
+        color: "error",
+        text: "读取 UIAF 数据失败，请检查文件是否符合规范",
+      });
+    } finally {
+      setTimeout(async () => {
+        await router.push("/achievements");
+        window.location.reload();
+      }, 1500);
+    }
+  } else {
+    showSnackbar({
+      color: "warn",
+      text: "已取消导入",
+    });
+  }
+}
 </script>
 
 <style lang="css" scoped>

src/router/modules/main.ts

@@ -2,7 +2,7 @@
  * @file router modules main.ts
  * @description 主路由模块
  * @author BTMuli<bt-muli@outlook.com>
- * @since Alpha v0.2.2
+ * @since Beta v0.3.2
  */
 
 // 信息展示
@@ -27,7 +27,7 @@ const mainRoutes = [
     component: Test,
   },
   {
-    path: "/achievements",
+    path: "/achievements/:app?",
     name: "成就",
     component: Achievements,
   },