@truenewx/tnxvue3 3.4.1 → 3.4.3

package/src/{tnxvue-router.js → tnxvue-router.ts}

@@ -1,12 +1,40 @@
 /**
  * 基于Vue的路由器构建函数
  */
-import {FunctionUtil, NetUtil} from '@truenewx/tnxcore/src/tnxcore-util';
+import {
+    createRouter,
+    createWebHashHistory,
+    Router,
+    RouteRecordRaw,
+    RouterHistory,
+    RouteLocationNormalized,
+    RouteLocationNormalizedLoaded,
+    RouteLocationNormalizedLoadedGeneric,
+    NavigationGuardNext,
+} from 'vue-router';
+import NetUtil from '../../tnxcore/src/util/net';
+
+export type RouteItem = RouteRecordRaw & {
+    path: string;
+    icon?: string;
+    meta?: {
+        superiorPath?: string;
+        page?: string;
+        cache: Record<string, any>;
+        historyFrom?: any;
+        isHistory: () => boolean;
+    };
+    page?: string;
+    component?: () => Promise<any>;
+    redirect?: never;
+    alias?: string;
+    subs?: RouteItem[];
+}
 
-function addRoute(routes, superiorPath, item, fnImportPage) {
+function addRoute(routes: RouteRecordRaw[], superiorPath: string, item: RouteItem, fnImportPage: (page: string) => Promise<any>): void {
     if (item && item.path) {
         let page = item.page || item.path.replace(/\/:[a-zA-Z0-9_]+/g, '');
-        let route = {
+        let route: RouteItem = {
             path: item.path,
             meta: {
                 superiorPath: superiorPath,
@@ -34,7 +62,7 @@ function addRoute(routes, superiorPath, item, fnImportPage) {
     }
 }
 
-function applyItemsToRoutes(superiorPath, items, routes, fnImportPage) {
+function applyItemsToRoutes(superiorPath: string, items: RouteItem[], routes: RouteRecordRaw[], fnImportPage: (page: string) => Promise<any>): void {
     if (items && items.length) {
         items.forEach(item => {
             if (item) {
@@ -45,14 +73,14 @@ function applyItemsToRoutes(superiorPath, items, routes, fnImportPage) {
     }
 }
 
-function instantiatePath(path, params) {
-    if (path && path.contains('/:')) {
+function instantiatePath(path: string, params?: Record<string, any>): string {
+    if (path && path.includes('/:')) {
         if (params) {
             Object.keys(params).forEach(key => {
                 path = path.replace('/:' + key + '/', '/' + params[key] + '/');
             });
         }
-        if (path.contains('/:')) { // 参数替换完之后，还有路径参数，则为无效路径，返回首页
+        if (path.includes('/:')) { // 参数替换完之后，还有路径参数，则为无效路径，返回首页
             console.warn(
                 '路径中的参数无法获得参数值，请确保具有参数的路径所属菜单项的下级菜单路径包含相同的参数：' + path);
             return '/';
@@ -61,33 +89,29 @@ function instantiatePath(path, params) {
     return path;
 }
 
-function getCurrentRoute(router) {
-    return router.currentRoute._value;
+function getCurrentRoute(router: Router): RouteLocationNormalizedLoadedGeneric {
+    return router.currentRoute.value;
 }
 
-export default function (VueRouter, menu, fnImportPage) {
-    let items;
-    if (Array.isArray(menu)) {
-        items = [];
-        menu.forEach((m) => {
-            if (Array.isArray(m.items)) {
-                items = items.concat(m.items);
-            } else { // menu实际上是items
-                items.push(m);
-            }
-        });
-    } else {
-        items = menu.items;
-    }
+export type VueRouter = Router & {
+    history: RouterHistory;
+    prev?: RouteLocationNormalizedLoaded;
+    $beforeLeaveHandlers: Record<string, (to: RouteLocationNormalized) => boolean>;
+    beforeLeave: (handler: (to: RouteLocationNormalized) => boolean) => void;
+    pushState: (path: string) => boolean;
+    replaceState: (path: string) => boolean;
+    backTo: (path?: string) => void;
+}
 
-    const routes = [];
-    applyItemsToRoutes(undefined, items, routes, fnImportPage);
+export default function (items: RouteItem[], fnImportPage: (page: string) => Promise<any>): VueRouter {
+    const routes: RouteRecordRaw[] = [];
+    applyItemsToRoutes('', items, routes, fnImportPage);
 
-    const routerHistory = VueRouter.createHistory();
-    const router = VueRouter.createRouter({
+    const routerHistory = createWebHashHistory();
+    const router: VueRouter = createRouter({
         history: routerHistory,
         routes,
-    });
+    }) as VueRouter;
     router.history = routerHistory;
 
     // 浏览器的返回事件触发位于VueRouter的钩子执行和页面渲染之后，这意味着$route.meta.historyFrom必须在页面渲染完之后才具有正确的值
@@ -103,19 +127,13 @@ export default function (VueRouter, menu, fnImportPage) {
 
     // 注册离开页面前事件处理支持
     router.$beforeLeaveHandlers = {};
-    router.beforeLeave = function (handler) {
-        if (typeof handler === 'function') {
-            let $route = getCurrentRoute(router);
-            let path = $route.path;
-            router.$beforeLeaveHandlers[path] = handler;
-        }
+    router.beforeLeave = function (handler: (to: RouteLocationNormalized) => boolean): void {
+        let $route = getCurrentRoute(router);
+        let path = $route.path;
+        router.$beforeLeaveHandlers[path] = handler;
     };
 
-    router.beforeEach((to, from, next) => {
-        if (typeof window.tnx.router.beforeLeave === 'function') {
-            window.tnx.router.beforeLeave(router, from);
-        }
-
+    router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalizedLoaded, next: NavigationGuardNext): void => {
         let allow = true;
         let beforeLeaveHandler = router.$beforeLeaveHandlers[from.path];
         if (beforeLeaveHandler) {
@@ -128,7 +146,7 @@ export default function (VueRouter, menu, fnImportPage) {
         }
     });
 
-    router.afterEach((to, from) => {
+    router.afterEach((to: RouteLocationNormalized, from: RouteLocationNormalizedLoaded): void => {
         router.prev = from;
         // 前后路径相同，但全路径不同（意味着参数不同），则需要刷新页面，否则页面不会刷新
         if (to.path === from.path && to.fullPath !== from.fullPath) {
@@ -136,11 +154,11 @@ export default function (VueRouter, menu, fnImportPage) {
         }
     });
 
-    router.back = FunctionUtil.around(router.back, function (back, path) {
-        if (!router.prev || !router.prev.href) { // 没有href，说明当前页面为刷新后进入的第一个页面，无法简单返回
+    router.backTo = function (path?: string): void {
+        if (!router.prev?.path) { // 没有path，说明当前页面为刷新后进入的第一个页面，无法简单返回
             let $route = getCurrentRoute(router);
             if (!path) { // 未指定默认返回路径，则返回上一级页面
-                path = $route.meta.superiorPath;
+                path = $route.meta.superiorPath as string;
             }
             path = instantiatePath(path, $route.params);
             if (path) {
@@ -148,10 +166,10 @@ export default function (VueRouter, menu, fnImportPage) {
                 return;
             }
         }
-        back.call(router);
-    });
+        router.back.call(router);
+    }
 
-    router.pushState = function (path) {
+    router.pushState = function (path: string): boolean {
         let success = NetUtil.pushState('#' + path);
         if (!success) {
             this.push(path);
@@ -159,7 +177,7 @@ export default function (VueRouter, menu, fnImportPage) {
         return success;
     };
 
-    router.replaceState = function (path) {
+    router.replaceState = function (path: string): boolean {
         let success = NetUtil.replaceState('#' + path);
         if (!success) {
             this.replace(path);

package/src/tnxvue.ts

@@ -0,0 +1,248 @@
+/**
+ * 基于Vue 3的扩展支持
+ */
+import Tnx from '../../tnxcore/src/tnxcore';
+import Text from './text/Text.vue';
+import Percent from './percent/Percent.vue';
+import * as Vue from 'vue';
+import mitt, {Emitter, EventType} from 'mitt';
+import {Router} from 'vue-router';
+
+export type EventBus = Emitter<Record<EventType, unknown>> & {
+    once(name: EventType, handler: (arg: unknown) => void): void;
+};
+
+export type ButtonOptions = {
+    text: string;
+    click: ((yes: boolean, close: () => void) => boolean | undefined) | ((close: () => void) => boolean | undefined);
+    type?: string;
+}
+
+export type DialogOptions = {
+    type?: OpenType;
+    theme?: string;
+    click?: boolean | ((yes: boolean, close: () => void) => boolean | undefined) | ((close: () => void) => boolean | undefined);
+    buttonText?: string | string[];
+    buttons?: ButtonOptions[];
+}
+
+export type OpenType = 'alert' | 'confirm' | 'close' | 'none';
+
+export type DrawerOptions = DialogOptions
+
+export type OpenOptions = DialogOptions & {
+    mode?: 'dialog' | 'drawer';
+    title?: string;
+}
+
+export default class TnxVue extends Tnx {
+
+    router: Router;
+    eventBus: EventBus;
+
+    static {
+        TnxVue.Libs.Vue = Vue;
+    }
+
+    components: Record<string, Vue.Component | Vue.DefineComponent> = {
+        Text,
+        Percent,
+    };
+
+    constructor(apiBaseUrl: string) {
+        super(apiBaseUrl);
+    }
+
+    install(app: Vue.App) {
+        for (let key of Object.keys(this.components)) {
+            const component = this.components[key];
+            app.component(component.name, component);
+        }
+    }
+
+    createVueApp(rootComponent: Vue.Component, router: Router, rootProps?: Record<string, any>): Vue.App {
+        let app = Vue.createApp(rootComponent, rootProps);
+        app.use(this);
+        if (router) {
+            app.use(router);
+            this.router = app.config.globalProperties.$router;
+        } else if (this.router) {
+            app.config.globalProperties.$router = this.router;
+        }
+
+        if (!this.eventBus) {
+            this.eventBus = mitt() as EventBus;
+        }
+        this.eventBus.once = (name: EventType, handler: (arg: unknown) => void) => {
+            this.eventBus.all.set(name, [handler]);
+        }
+
+        return app;
+    }
+
+    /**
+     * 深度监听指定对象，在created()中调用才能生效
+     * @param vm vue页面实例
+     * @param target 要监听的对象
+     * @param handler 处理函数
+     */
+    deepWatch(vm: Vue.ComponentPublicInstance, target: object, handler: (newValue: any, oldValue: any, path: string) => void): void {
+        vm.$watch(() => {
+            try {
+                return JSON.stringify(target);
+            } catch (e) {
+                console.error(e);
+            }
+            return undefined;
+        }, (newValue: string, oldValue: string): void => {
+            try {
+                if (newValue !== oldValue) {
+                    const newObject = JSON.parse(newValue);
+                    const oldObject = JSON.parse(oldValue);
+                    this.deepCompare(newObject, oldObject, '', handler);
+                }
+            } catch (e) {
+                console.error(e);
+            }
+        }, {deep: true});
+    }
+
+    deepCompare(object1: object, object2: object, path: string, handler: (newValue: any, oldValue: any, path: string) => void): void {
+        if (object1) {
+            const keys = Object.keys(object1);
+            keys.forEach(key => {
+                const fullPath = path ? `${path}.${key}` : key;
+                if (object2) {
+                    if (Array.isArray(object1[key]) && Array.isArray(object2[key])) {
+                        object1[key].forEach((item, index) => {
+                            this.deepCompare(item, object2[key][index], `${fullPath}[${index}]`, handler);
+                        });
+                    } else if (typeof object1[key] === 'object' && typeof object2[key] === 'object') {
+                        this.deepCompare(object1[key], object2[key], fullPath, handler);
+                    } else if (object1[key] !== object2[key]) {
+                        handler(object1[key], object2[key], fullPath);
+                    }
+                } else {
+                    handler(object1[key], undefined, fullPath);
+                }
+            });
+        }
+    }
+
+    nextTickTimeout(vm: Vue.ComponentPublicInstance, handler: () => void, timeout?: number) {
+        vm.$nextTick().then(() => {
+            setTimeout(handler, timeout);
+        });
+    }
+
+    dialog(content: string | Vue.Component | Vue.DefineComponent,
+           title?: string,
+           options: DialogOptions = {},
+           contentProps: Record<string, any> = {}) {
+        const buttons = this.getOptionsButtons(options);
+        // 默认不实现，由UI框架扩展层实现
+        throw new Error('Unsupported function');
+    }
+
+    protected getOptionsButtons(options: DialogOptions): ButtonOptions[] {
+        const buttons = options.buttons || this.getDefaultDialogButtons(options.type, options.click, options.theme);
+        if (options.buttonText) {
+            if (!Array.isArray(options.buttonText)) {
+                options.buttonText = [options.buttonText];
+            }
+            for (let i = 0; i < buttons.length; i++) {
+                let buttonText = options.buttonText[i];
+                if (buttonText) {
+                    buttons[i].text = buttonText;
+                }
+            }
+        }
+        return buttons;
+    }
+
+    protected getDefaultDialogButtons(
+        type: OpenType,
+        click: boolean | ((yes: boolean, close: () => void) => boolean | undefined) | ((close: () => void) => boolean | undefined),
+        theme?: string): ButtonOptions[] {
+        if (click !== false) {
+            if (type === 'none') {
+                return [];
+            } else if (type === 'confirm') {
+                return [{
+                    text: '确定',
+                    type: theme || 'primary',
+                    click(close: () => void) {
+                        if (typeof click === 'function') {
+                            return click.call(this, true, close);
+                        }
+                    }
+                }, {
+                    text: '取消',
+                    click(close: () => void) {
+                        if (typeof click === 'function') {
+                            return click.call(this, false, close);
+                        }
+                    }
+                }];
+            } else if (type === 'close') {
+                return [{
+                    text: '关闭',
+                    type: theme,
+                    click(close: () => void) {
+                        if (typeof click === 'function') {
+                            return click.call(this, close);
+                        }
+                    }
+                }];
+            } else {
+                return [{
+                    text: '确定',
+                    type: theme || 'primary',
+                    click(close: () => void) {
+                        if (typeof click === 'function') {
+                            return click.call(this, close);
+                        }
+                    }
+                }];
+            }
+        }
+        return [];
+    }
+
+    drawer(content: string | Vue.Component | Vue.DefineComponent,
+           title?: string,
+           options: DrawerOptions = {},
+           contentProps: Record<string, any> = {}) {
+        const buttons = this.getOptionsButtons(options);
+        // 默认不实现，由UI框架扩展层实现
+        throw new Error('Unsupported function');
+    }
+
+    open(component: Vue.Component | Vue.DefineComponent, props?: Record<string, any>, options: OpenOptions = {}) {
+        const c = component as any;
+        if (typeof c.open === 'function') {
+            options = Object.assign({}, c.open(props), options);
+        } else if (c.methods && typeof c.methods.open === 'function') {
+            options = Object.assign({}, c.methods.open(props), options);
+        }
+
+        let mode = options.mode;
+        delete options.mode;
+        const title = options.title;
+        delete options.title;
+        if (mode === 'drawer') {
+            return this.drawer(component, title, options, props);
+        }
+        return this.dialog(component, title, options, props);
+    }
+
+    /**
+     * 判断指定对象是否组件实例
+     * @param obj 对象
+     * @returns {boolean} 是否组件实例
+     */
+    isComponent(obj: any): boolean {
+        return (typeof obj === 'object') && (typeof obj.render === 'function');
+    }
+
+}

package/src/types.d.ts

@@ -0,0 +1,7 @@
+import type { DefineComponent } from 'vue';
+import '../../tnxcore/src/types.d.ts';
+
+declare module '*.vue' {
+    const component: DefineComponent<{}, {}, any>;
+    export default component;
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
+        "strict": false,
+        "noImplicitAny": false,
+        "allowJs": false,
+        "resolveJsonModule": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "lib": [
+            "ES2020",
+            "DOM"
+        ],
+        "types": []
+    },
+    "include": [
+        "src/**/*"
+    ]
+}

package/eslint.config.cjs

@@ -1,58 +0,0 @@
-const js = require('@eslint/js');
-const globals = require('globals');
-const vue = require('eslint-plugin-vue');
-const vueParser = require('vue-eslint-parser');
-
-module.exports = [
-    js.configs.recommended,
-    {
-        files: ['**/*.js'],
-        languageOptions: {
-            ecmaVersion: 'latest',
-            sourceType: 'module',
-            globals: {
-                ...globals.browser,
-                ...globals.node
-            }
-        },
-        rules: {
-            'eqeqeq': 'warn',
-            'no-unused-vars': ['warn', {
-                vars: 'local',
-                args: 'none'
-            }],
-            'no-undef': 'warn',
-            'no-useless-escape': 'warn',
-            'no-empty': 'off',
-        }
-    },
-    {
-        files: ['**/*.vue'],
-        languageOptions: {
-            parser: vueParser,
-            parserOptions: {
-                ecmaVersion: 'latest',
-                sourceType: 'module'
-            },
-            globals: {
-                ...globals.browser,
-                ...globals.node
-            }
-        },
-        plugins: {
-            vue
-        },
-        rules: {
-            'eqeqeq': 'warn',
-            'no-unused-vars': ['warn', {
-                vars: 'local',
-                args: 'none'
-            }],
-            'no-undef': 'warn',
-            'no-useless-escape': 'warn',
-            'no-empty': 'off',
-            'vue/no-side-effects-in-computed-properties': 'warn',
-            'vue/no-mutating-props': 'warn'
-        }
-    }
-];

package/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>tnxvue3</title>
-</head>
-<body>
-<div id="app"></div>
-<script type="module" src="./sample/main.js"></script>
-</body>
-</html>