[ui] change: use online font

Author: Tigercrl

packages/shared/rsbuild.config.ts

@@ -35,5 +35,14 @@ export const config: RsbuildConfig = {
     favicon: "../../packages/shared/src/assets/MCSL.png",
     title: "MCSL Future Web-like",
     mountId: "app",
+    tags: [
+      {
+        tag: "link",
+        attrs: {
+          rel: "stylesheet",
+          href: "https://cdn-font.hyperos.mi.com/font/css?family=MiSans_VF:VF:Latin,Chinese_Simplify,Chinese_Traditional_TW&display=swap",
+        },
+      },
+    ],
   },
 };

packages/shared/src/App.vue

@@ -3,9 +3,11 @@ import NotificationTemplate from "@repo/ui/src/components/overlay/notification/N
 import NotificationOverlay from "@repo/ui/src/components/overlay/notification/NotificationOverlay.vue";
 import DashboardLayout from "./layouts/DashboardLayout.vue";
 import SetupLayout from "./layouts/SetupLayout.vue";
+import Button from "@repo/ui/src/components/form/button/Button.vue";
 import { computed } from "vue";
 import { usePageData } from "./utils/stores.ts";
 import LoadingOverlay from "./components/overlay/LoadingOverlay.vue";
+import { useI18n } from "vue-i18n";
 
 const layout = computed(() => {
   switch (usePageData().data.layout) {
@@ -16,6 +18,8 @@ const layout = computed(() => {
   }
   return undefined;
 });
+
+const t = useI18n().t;
 </script>
 
 <template>
@@ -27,11 +31,36 @@ const layout = computed(() => {
   </RouterView>
   <LoadingOverlay />
   <NotificationTemplate id="default">
-    <template v-slot="data">
-      <p>{{ (data as any).message }}</p>
+    <template v-slot="notif">
+      <p>{{ notif.settings.data.message }}</p>
+    </template>
+  </NotificationTemplate>
+  <NotificationTemplate id="do-not-show-again">
+    <template v-slot="notif">
+      <div>
+        <p>{{ notif.settings.data.message }}</p>
+        <Button
+          class="app__notif-btn"
+          type="primary"
+          :color="notif.settings.data.color"
+          @click="
+            () => {
+              notif.settings.data.onClick();
+              notif.close();
+            }
+          "
+          size="small"
+        >
+          {{ t("ui.common.do-not-show-again") }}
+        </Button>
+      </div>
     </template>
   </NotificationTemplate>
   <NotificationOverlay />
 </template>
 
-<style scoped></style>
+<style scoped>
+.app__notif-btn {
+  margin: var(--mcsl-spacing-4xs) var(--mcsl-spacing-2xs) 0 auto;
+}
+</style>

packages/shared/src/utils/tasks.ts

@@ -3,7 +3,7 @@ import { sleep } from "@repo/ui/src/utils/utils.ts";
 import type { LoadingStatus } from "@repo/ui/src/components/progress/ProgressBar.vue";
 
 export class SimpleTask {
-  static lastId = -1;
+  private static idCounter = -1;
 
   public readonly name: Ref<string>;
   public readonly desc: Ref<string>;
@@ -24,7 +24,7 @@ export class SimpleTask {
     this.desc = ref(desc);
     this.status = ref("loading");
     this.createTime = Date.now();
-    this.id = ++SimpleTask.lastId;
+    this.id = ++SimpleTask.idCounter;
     this._progress = progress;
     watch(progress, (newValue) => {
       if (newValue >= 100 && this.status.value == "loading" && autoSuccess) {

packages/ui/.prettierignore

@@ -10,3 +10,6 @@ node_modules
 .env
 .env.*
 !.env.example
+
+# Assets
+src/assets/css/fontawesome.min.css