init: UserBaseFront (frontend)

src/utils/hook/useCompRef.ts

@@ -0,0 +1,4 @@
+import { ref } from "vue";
+export function useCompRef<T extends abstract new (...args: any) => any>(_comp: T) {
+    return ref<InstanceType<T>>();
+}

src/utils/hook/useCurrentInstance.ts

@@ -0,0 +1,7 @@
+import { VueGlobal } from "@/types/Basics";
+import { ComponentInternalInstance, getCurrentInstance } from "vue";
+export default function useCurrentInstance(): VueGlobal {
+    const { appContext } = getCurrentInstance() as ComponentInternalInstance;
+    const proxy = appContext.config.globalProperties;
+    return proxy as unknown as VueGlobal;
+}

src/utils/hook/useImg.ts

@@ -0,0 +1,5 @@
+type PathType = "image" | "icons";
+export const requireImg = (imgPath: string, basePath?: PathType) => {
+    basePath = basePath || "image";
+    return new URL(`../../assets/${basePath}/${imgPath}`, import.meta.url).href;
+};

src/utils/hook/useSessionStorage.ts

@@ -0,0 +1,37 @@
+import { ref, watch, type Ref } from "vue";
+
+/**
+ * 将任意响应式数据与 sessionStorage 双向绑定
+ * @param key     sessionStorage 的 key
+ * @param def     默认值（当 sessionStorage 没有时）
+ * @param reviver 可选：解析时用 JSON.parse 的第二个参数
+ * @returns Ref<T>
+ */
+export function useSessionStorage<T>(
+    key: string,
+    def: T,
+    reviver?: (this: any, key: string, value: any) => any,
+): Ref<T> {
+    /* ---------- 初始化 ---------- */
+    const raw = sessionStorage.getItem(key);
+    let init: T = def;
+    if (raw) {
+        try {
+            init = JSON.parse(raw, reviver);
+        } catch {
+            /* 解析失败回退默认值 */
+        }
+    }
+    const state = ref<T>(init) as Ref<T>;
+
+    /* ---------- 变化时落盘 ---------- */
+    watch(
+        state,
+        newVal => {
+            sessionStorage.setItem(key, JSON.stringify(newVal));
+        },
+        { deep: true, flush: "post" },
+    );
+
+    return state;
+}