[shared] feat: welcome (元旦快乐～)

Author: Tigercrl

apps/app/package.json

@@ -11,8 +11,8 @@
     "frontend:build": "vue-tsc --noEmit && rsbuild build",
     "frontend:preview": "rsbuild preview",
     "lint": "eslint; prettier --check .",
-    "fix": "eslint --fix;prettier --write --list-different .",
-    "test": "tsc --noEmit"
+    "fix": "eslint --fix; prettier --write --list-different .",
+    "test": "vue-tsc --noEmit"
   },
   "dependencies": {
     "@repo/configs": "workspace:*",

apps/app/src/index.ts

@@ -3,6 +3,7 @@ import { platform } from "@tauri-apps/plugin-os";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { ref, watchEffect } from "vue";
 import App from "./App.vue";
+import { exit } from "@tauri-apps/plugin-process";
 
 export const fullscreen = ref(false);
 
@@ -23,5 +24,11 @@ export const fullscreen = ref(false);
     document.body.style.background = "transparent";
   }
 
-  await load("app", App);
+  await load(
+    "app",
+    () => {
+      exit();
+    },
+    App,
+  );
 })();

apps/app/tsconfig.json

@@ -1,11 +1,6 @@
 {
   "extends": "@repo/configs/ts/vue.json",
-  "include": [
-    "src-frontend/**/*.ts",
-    "src-frontend/**/*.d.ts",
-    "src-frontend/**/*.tsx",
-    "src-frontend/**/*.vue"
-  ],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [
     {
       "path": "./tsconfig.node.json"

apps/web/package.json

@@ -12,7 +12,7 @@
     "frontend:preview": "rsbuild preview",
     "lint": "eslint; prettier --check .; cargo lint",
     "fix": "eslint --fix;prettier --write --list-different .; cargo fix",
-    "test": "tsc --noEmit && cargo test"
+    "test": "vue-tsc --noEmit && cargo test"
   },
   "dependencies": {
     "@repo/configs": "workspace:*",

apps/web/src-frontend/index.ts

@@ -4,7 +4,15 @@ import router from "@repo/shared/src/router.ts";
 import { useAccount } from "./utils/store.ts";
 
 (async () => {
-  await load("web", App);
+  await load(
+    "web",
+    () => {
+      window.close();
+      location.replace("about:blank");
+      document.body.innerHTML = "";
+    },
+    App,
+  );
 
   router.beforeEach((to, _from, next) => {
     if (useAccount().loggedIn) {

package.json

@@ -23,7 +23,8 @@
     "shared:lint": "turbo run shared#lint",
     "build": "turbo run build",
     "lint": "turbo run lint",
-    "fix": "turbo run fix"
+    "fix": "turbo run fix",
+    "test": "turbo run test"
   },
   "devDependencies": {
     "prettier": "^3.6.2",

packages/locales

@@ -20,7 +20,7 @@ const layout = computed(() => {
 <template>
   <component v-if="layout" :is="layout" />
   <RouterView v-else v-slot="{ Component }">
-    <transition name="fade" mode="in-out">
+    <transition name="fade" mode="in-out" :duration="250">
       <component :is="Component" />
     </transition>
   </RouterView>

packages/shared/src/App.vue

@@ -1,47 +1,49 @@
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
 import FancyBackground from "@repo/ui/src/components/misc/FancyBackground.vue";
-import { onMounted } from "vue";
 import { getPlatform } from "../../index.ts";
-import router from "../../router.ts";
-import { usePageData } from "../../utils/stores.ts";
 
 const t = useI18n().t;
-
-onMounted(() => {
-  setTimeout(() => {
-    router.push("/welcome/setup");
-  }, 3400);
-});
 </script>
 
 <template>
-  <FancyBackground>
-    <div class="logo">
-      <img src="../../assets/MCSL.png" alt="" />
-      <div>
-        <h1>
-          {{ t("shared.app.name.abbr") }} {{ t("shared.app.name.future") }}
-          {{ t(`${getPlatform()}.app.name.suffix`) }}
-        </h1>
-        <h2>{{ t("shared.app.desc") }}</h2>
+  <div class="welcome-overlay">
+    <FancyBackground>
+      <div class="welcome-overlay__logo">
+        <img src="../../assets/MCSL.png" alt="" width="98" />
+        <div>
+          <h1>
+            {{ t("shared.app.name.abbr") }} {{ t("shared.app.name.future") }}
+            {{ t(`${getPlatform()}.app.name.suffix`) }}
+          </h1>
+          <h2>{{ t("shared.app.desc") }}</h2>
+        </div>
       </div>
-    </div>
-  </FancyBackground>
+    </FancyBackground>
+  </div>
 </template>
 
 <style scoped lang="scss">
-.logo {
+.welcome-overlay {
+  z-index: 1000;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: var(--mcsl-bg-color-main);
+  animation: 0.5s ease-in-out 3s both welcome-overlay__out-anim;
+}
+
+.welcome-overlay__logo {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--mcsl-spacing-xs);
 
   & > img {
     width: 7rem;
-    animation:
-      0.5s ease-in-out 0.5s both zoomIn,
-      0.5s ease-in-out 3s fadeOut;
+    animation: 0.5s ease-in-out 0.5s both zoomIn;
   }
 
   & > div {
@@ -72,9 +74,7 @@ onMounted(() => {
       overflow: hidden;
       height: 100%;
       max-width: 0;
-      animation:
-        1s ease-in-out 1s both collapseInHorizontal,
-        0.5s ease-in-out 3s fadeOut;
+      animation: 1s ease-in-out 1s both collapseInHorizontal;
     }
   }
 
@@ -84,17 +84,23 @@ onMounted(() => {
       align-items: center;
 
       & > h1 {
-        animation:
-          0.5s ease-in-out 1s both fadeInUp,
-          0.5s ease-in-out 3s fadeOut;
+        animation: 0.5s ease-in-out 1s both fadeInUp;
       }
 
       & > h2 {
-        animation:
-          0.5s ease-in-out 1.25s both fadeInUp,
-          0.5s ease-in-out 3s fadeOut;
+        animation: 0.5s ease-in-out 1.25s both fadeInUp;
       }
     }
   }
 }
+
+@keyframes welcome-overlay__out-anim {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
 </style>

…ges/shared/src/views/welcome/Welcome.vue …rc/components/welcome/WelcomeOverlay.vuepackages/shared/src/views/welcome/Welcome.vue renamed to packages/shared/src/components/welcome/WelcomeOverlay.vue packages/shared/src/views/welcome/Welcome.vue renamed to packages/shared/src/components/welcome/WelcomeOverlay.vue

@@ -8,5 +8,13 @@ import router from "./router.ts";
     redirect: "/dashboard",
   });
 
-  load("web", App);
+  load(
+    "web",
+    () => {
+      window.close();
+      location.replace("about:blank");
+      document.body.innerHTML = "";
+    },
+    App,
+  );
 })();