Initial clean project import

src/hooks/paginate.ts

@@ -0,0 +1,27 @@
+import {computed, ref} from "vue";
+
+export const usePaginate = <T = any>(data?: {pageSize?: number; filter?: (item: T) => boolean}) => {
+    data = data || {};
+    const records = ref<T[]>([]);
+    const pageSize = data.pageSize && data.pageSize > 0 ? data.pageSize : 10;
+    const page = ref(1);
+    const recordsFilterCount = ref(0);
+    const recordsForPage = computed(() => {
+        let items = records.value;
+        if (data.filter) {
+            items = items.filter(data.filter as (item: (typeof items)[number]) => boolean);
+        }
+        recordsFilterCount.value = items.length;
+        if (items.length === 0) {
+            return [];
+        }
+        return items.slice((page.value - 1) * pageSize, page.value * pageSize);
+    });
+    return {
+        page,
+        pageSize,
+        records,
+        recordsFilterCount,
+        recordsForPage,
+    };
+};

src/hooks/task.ts

@@ -0,0 +1,26 @@
+import {onBeforeUnmount, onMounted} from "vue";
+import {TaskBiz} from "../service/TaskService";
+import {TaskChangeType, useTaskStore} from "../store/modules/task";
+const taskStore = useTaskStore();
+
+export const useTaskChangeRefresh = (biz: TaskBiz, callback: (bizId: string, type: TaskChangeType) => void) => {
+    // 🔧 关键修复：使用实例级别的变量存储回调函数引用
+    // 这样每个组件实例都有自己独立的回调引用，避免被其他实例覆盖
+    let wrappedCallback: ((bizId: string, type: TaskChangeType) => void) | null = null;
+
+    onMounted(async () => {
+        // 存储原始回调的引用，确保注册和注销使用完全相同的函数对象
+        wrappedCallback = callback;
+        taskStore.onChange(biz, wrappedCallback);
+        console.log(`[useTaskChangeRefresh] ✓ 已注册 ${biz} 的监听器`);
+    });
+
+    onBeforeUnmount(() => {
+        // 关键：使用保存的引用进行注销，确保与注册时使用的完全相同
+        if (wrappedCallback) {
+            taskStore.offChange(biz, wrappedCallback);
+            console.log(`[useTaskChangeRefresh] ✓ 已注销 ${biz} 的监听器`);
+            wrappedCallback = null;
+        }
+    });
+};

src/hooks/user.ts

@@ -0,0 +1,103 @@
+import {ref} from "vue";
+import {useUserStore} from "../store/modules/user";
+import {useSettingStore} from "../store/modules/setting";
+
+const setting = useSettingStore();
+
+export const useUserPage = ({web, status}) => {
+    const webPreload = ref("");
+    const webUrl = ref("");
+    const webUserAgent = window.$mapi.app.getUserAgent();
+
+    const user = useUserStore();
+    const canGoBack = ref(false);
+
+    const whiteUrl = ["/app_manager/user", "/member_vip", "/login", "/register", "/logout"];
+    const urlMap = {
+        "/app_manager/user": "/member",
+    };
+
+    const getUrl = () => {
+        const url = web.value.getURL();
+        return new URL(url).pathname;
+    };
+
+    const getCanGoBack = () => {
+        if (whiteUrl[0] === getUrl()) {
+            return false;
+        }
+        return true;
+    };
+    const doBack = async () => {
+        web.value.loadURL(await user.webUrl());
+    };
+
+    const onMount = async () => {
+        web.value.addEventListener("did-fail-load", (event: any) => {
+            status.value?.setStatus("fail");
+        });
+        web.value.addEventListener("did-finish-load", (event: any) => {
+            if (setting.shouldDarkMode()) {
+                web.value.executeJavaScript(`document.body.setAttribute('data-theme', 'dark');`);
+            }
+        });
+        web.value.addEventListener("close", (event: any) => {
+            if (web.value.isDevToolsOpened()) {
+                web.value.closeDevTools();
+            }
+        });
+        web.value.addEventListener("dom-ready", e => {
+            // web.value.openDevTools();
+            window.$mapi.user.refresh();
+            canGoBack.value = getCanGoBack();
+            web.value.executeJavaScript(`
+document.addEventListener('click', (event) => {
+    const target = event.target;
+    if (target.tagName !== 'A') return;
+    let url = target.href
+    if(url.startsWith('javascript:')) return;
+    let urlPath = new URL(url).pathname;
+    const urlMap = ${JSON.stringify(urlMap)};
+    if(urlMap[urlPath]) {
+        urlPath = urlMap[urlPath];
+        const urlNew = new URL(url);
+        urlNew.pathname = urlPath;
+        url = urlNew.toString();
+    }
+    const whiteList = ${JSON.stringify(whiteUrl)};
+    if (whiteList.includes(urlPath)) return;
+    event.preventDefault();
+    window.$mapi.user.openWebUrl(url)
+});
+`);
+            status.value?.setStatus("success");
+            if (window.__page) {
+                window.__page.registerCallPage("ready", (resolve, reject, data) => {
+                    web.value.executeJavaScript(
+                        `var call = function(){
+                            if(!window.__appManagerUserReady){
+                                setTimeout(call,10);
+                                return;
+                            };
+                            window.__appManagerUserReady(${JSON.stringify(data)});
+                         };call();`
+                    );
+                    resolve(undefined);
+                });
+            }
+        });
+        status.value?.setStatus("loading");
+        webPreload.value = await window.$mapi.app.getPreload();
+        webUrl.value = await user.webUrl();
+    };
+
+    return {
+        webPreload,
+        webUrl,
+        webUserAgent,
+        user,
+        canGoBack,
+        doBack,
+        onMount,
+    };
+};