ace-front-end 1.0.0

package/ace-monolith-shell-ui/src/locales/lang/zh-CN/updatePsw.json

@@ -0,0 +1,9 @@
+{
+    "confirmPsw": "确认密码",
+    "latestUpdateTime": "您上次修改密码时间是：",
+    "newPassword": "新密码",
+    "notModified": "尚未修改",
+    "password": "当前密码",
+    "success": "密码已修改成功",
+    "title": "修改密码"
+}

package/ace-monolith-shell-ui/src/locales/lang/zh-CN/userProfile.json

@@ -0,0 +1,3 @@
+{
+  "title": "用户个人资料"
+}

package/ace-monolith-shell-ui/src/locales/lang/zh-CN.ts

@@ -0,0 +1,14 @@
+/*
+ * 版权所有 (c) 2022 江苏杰瑞信息科技有限公司
+ *
+ * 此文件属于JARI.ACE平台项目，修改、分发必须遵守杰瑞信科商业软件许可协议
+ */
+
+import { genMessage } from "@jari-ace/app-bolts";
+
+const modules = import.meta.glob("./zh-CN/**/*.json", { eager: true });
+export default {
+    message: {
+        ...genMessage(modules as Record<string, Record<string, any>>),
+    },
+};

package/ace-monolith-shell-ui/src/locales/setupI18n.ts

@@ -0,0 +1,14 @@
+/*
+ * 版权所有 (c) 2022 江苏杰瑞信息科技有限公司
+ *
+ * 此文件属于JARI.ACE平台项目，修改、分发必须遵守杰瑞信科商业软件许可协议
+ */
+
+import { LocaleType, setupI18n as setup } from '@jari-ace/app-bolts'
+import type { App } from 'vue'
+import { useLocaleStoreWithOut } from '@/stores/modules/locale'
+
+export async function setupI18n(app: App, locale?: LocaleType): Promise<ReturnType<typeof setup>> {
+    const messages = await import(`./lang/${locale}.ts`)
+    return setup(app, messages, useLocaleStoreWithOut(), locale)
+}

package/ace-monolith-shell-ui/src/main.ts

@@ -0,0 +1,164 @@
+import './init'
+import './assets/main.scss'
+import {createApp, unref} from 'vue'
+import App from './App.vue'
+import {router} from './router'
+// import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import {
+    type BaseAppGlobalMessageType,
+    type LocaleKeyType,
+    LocaleType,
+    type MicroAppContext,
+    setupAxios,
+    setupLoginUser,
+    setupReloadLoginUser,
+    setupStore
+} from '@jari-ace/app-bolts'
+import {setupI18n} from '@/locales/setupI18n'
+import {isEmpty} from "lodash-es"
+import microApp from '@micro-zoe/micro-app'
+//此处不应引入
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+// noinspection ES6UnusedImports 切勿删下面的import语句
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+import {useLocaleStore} from '@/stores/modules/locale'
+import {setupMicroAppContext, useAppContextWithout} from '@/stores/modules/appContext'
+import {useAuthStore} from '@/stores/modules/auth'
+/**
+ * 注意！！本项目为壳项目，所有子应用都会加载，应秉持尽量精简的原则。
+ * 此项目中应按需引入UI库，不要全局的引入。
+ *
+ * @jari-ace/element-plus-component 公共组件库会全局引入element-plus,在此项目中将不再引入
+ * import '@jari-ace/element-plus-component/lib/index.css'
+ * import {AceVueUI} from '@jari-ace/element-plus-component'
+ * import 'element-plus/dist/index.css'
+ * AceVueUI!.install!(app)
+ * for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+ *     app.component(key, component)
+ * }
+ */
+
+import {useColorMode} from '@vueuse/core'
+import useAppStore from '@/stores/modules/app'
+
+microApp.start({
+    'disable-memory-router': true, // 关闭虚拟路由系统
+    'disable-patch-request': true, // 关闭对子应用请求的拦截
+    disableIframeRootDocument: true,
+    lifeCycles: {
+        created(e, appName) {
+            console.log(`app: ${appName} created`)
+        },
+        beforemount(e, appName) {
+            console.log(`app: ${appName} is about to mount`)
+        },
+        mounted(e, appName) {
+            console.log(`app: ${appName} mounted`)
+        },
+        unmount(e, appName) {
+            console.log(`app: ${appName} unmounted`)
+        },
+        error(e, appName) {
+            console.log(`app: ${appName} load error`, e.detail)
+        }
+    },
+    globalAssets:{
+        css: [], // css地址
+        // js: ['js地址1', 'js地址2', ...], // js地址
+    }
+    // iframe: true, // 全局开启iframe沙箱，默认为false
+    // inline: true, // 全局开启内联script模式运行js，默认为false
+    // destroy: true, // 全局开启destroy模式，卸载时强制删除缓存资源，默认为false
+    // ssr: true, // 全局开启ssr模式，默认为false
+    // 'disable-scopecss': true, // 全局禁用样式隔离，默认为false
+    // 'disable-sandbox': true, // 全局禁用沙箱，默认为false
+    // 'keep-alive': true, // 全局开启保活模式，默认为false
+    // 'disable-memory-router': true, // 全局关闭虚拟路由系统，默认值false
+    // 'keep-router-state': true, // 子应用在卸载时保留路由状态，默认值false
+    // 'disable-patch-request': true, // 关闭子应用请求的自动补全功能，默认值false
+    // iframeSrc: location.origin, // 设置iframe沙箱中iframe的src地址，默认为子应用所在页面地址
+    // inheritBaseBody: true, // true: 采用基座标签 作为子应用的标签， false: 不采用
+    // aHrefResolver: (hrefValue: string, appName: string, appUrl: string) => string, // 自定义处理所有子应用 a 标签的 href 拼接方式
+})
+const app = createApp(App)
+
+
+const store = setupStore(app)
+const appStore = useAppStore()
+import('@/http').then(axiosModule => {
+    setupAxios(axiosModule.createAxios, axiosModule.createAxiosWithoutCache)
+    const authStore = useAuthStore(store)
+    authStore.setup().then(loginUser => {
+        setupLoginUser(loginUser);
+        const localeStore = useLocaleStore(store)
+        localeStore.initLocale()
+        let locale = localeStore.getLocale
+        if (!locale) {
+            locale = loginUser.locale ? LocaleType[loginUser.locale.replace(/-/, '_')
+                                                            .toUpperCase() as LocaleKeyType] : undefined
+        }
+        if (!locale) {
+            locale = localeStore.fallBackLocale
+        }
+        localeStore.setLocaleInfo({locale})
+        setupI18n(app, locale).then(() => {
+            appStore.setupAccessibleApps().then(() => {
+                const context: MicroAppContext = {
+                    locale: locale,
+                    loginUser: loginUser,
+                    reloadLoginUser: authStore.setup,
+                    createAxios: axiosModule.createAxios,
+                    createAxiosWithoutCache: axiosModule.createAxiosWithoutCache,
+                    realmId: 'ace-platform',
+                    setAppDevMode: appStore.setDevMode,
+                    getAppDevMode: appStore.getDevMode
+                }
+                window.appContext = context
+                setupMicroAppContext(context)                
+                
+                //向子应用推送并订阅store数据;
+                const appContextStore = useAppContextWithout()
+                setupReloadLoginUser(async ()=> {
+                    var loginUser = await authStore.setup()
+                    appContextStore.setLoginUser(loginUser)
+                    setupLoginUser(loginUser);
+                    return loginUser;
+                })
+                pushDataToApps(unref(appContextStore.$state))
+                appContextStore.$subscribe((mutation, state) => {
+                    pushDataToApps(unref(state))
+                }, {
+                    deep: true
+                })
+                localeStore.$subscribe((mutation, state) => {
+                    state.localInfo.locale && appContextStore.setLocale(state.localInfo.locale)
+                }, {
+                    deep: true
+                })
+                app.use(router)
+                app.mount('#app')
+                const colorMode = useColorMode()
+                colorMode.value = 'light'
+            })
+        })
+    })
+})
+
+
+function pushDataToApps(state: MicroAppContext|{}) {
+    //不为空的情况下再发送数据
+    if(!isEmpty(state)){
+        const sendMessage: BaseAppGlobalMessageType = {
+            sender: 'shell',
+            timestamp: Date.now(),
+            payload: {
+                type: 'context',
+                content: state as MicroAppContext
+            }
+        }
+        // 推送数据给子应用
+        microApp.setGlobalData(sendMessage)
+    }
+
+}

package/ace-monolith-shell-ui/src/router/index.ts

@@ -0,0 +1,111 @@
+/*
+ * 版权所有 (c) 2023 江苏杰瑞信息科技有限公司
+ *
+ * 此文件属于JARI.ACE平台项目，修改、分发必须遵守杰瑞信科商业软件许可协议
+ */
+
+import {createRouter, createWebHistory} from 'vue-router'
+import HomeView from '../layout/Main.vue'
+import MicroAppContainer from '../views/MicroAppContainer.vue'
+import WorkBench from '../views/WorkBench.vue'
+import type {AppInstance} from '@jari-ace/app-bolts'
+import {ref, type Ref} from 'vue'
+import useAppStore from '@/stores/modules/app'
+
+/**
+ * 当前应用
+ */
+// export const currentApp: Ref<AppInstance | undefined> = ref(undefined)
+/**
+ * 静态路由
+ */
+export const router = createRouter({
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: [
+        {
+            path: '/',
+            name: 'home',
+            component: HomeView,
+            children: [
+                {
+                    path: '/app/:appName(.*)*',
+                    name: 'app',
+                    component: MicroAppContainer,
+                    props: true,
+                },
+
+                {
+                    path: 'wb',
+                    name: 'work-bench',
+                    component: WorkBench
+                }
+            ]
+        },
+        {
+            path: '/:path(.*)*',
+            redirect: '/404'
+        },
+        {
+            path: '/404',
+            name: 'notFound',
+            component: () => import('@/views/errors/HttpState404.vue')
+        },
+        {
+            path: '/no-app',
+            name: 'noApp',
+            component: () => import('@/views/errors/NoAppAvailable.vue')
+        }
+    ]
+})
+
+router.beforeEach(async (to, from, next) => {
+    const appStore = useAppStore()
+
+    //判断前往页面不是登录页
+    if (to.path !== '/login') {
+        // 当前路由不需要登录验证
+        //需要验证前往的页面是否是应用页面
+        //以斜杠分割路径
+        const paths = to.path.split('/')
+        const path: undefined | string = paths[1]
+        if (path === 'global') {
+            next()
+        } else if (path === 'app' || to.path === '/') {
+            if (appStore.apps === null) {
+                // throw new Error("【路由跳转拦截】没有找到可用应用!");
+                await appStore.setupAccessibleApps()
+            }
+            if (appStore.apps?.length == 0) {
+                next('/no-app')
+            }
+            //判断参数是否含有appName
+
+            //判断appName参数是否存在
+            if (to.params.appName) {
+                let appName: string
+                //判断appName的类型：可能为字符串或者数组
+                if (typeof to.params.appName === 'string') {
+                    appName = to.params.appName
+                } else {
+                    appName = to.params.appName[0]
+                }
+                appStore.activateApp(appName as string)
+                next()
+            } else {
+                if (appStore.apps == null) {
+                    throw new Error('appStore.apps为null，没有可用应用。')
+                }
+                appStore.activateApp(appStore.apps[0].name)
+                next(`/app/${appStore.apps[0].name}`)
+            }
+
+            //直接跳转
+        } else {
+            next()
+        }
+    }
+    //如果是登录页则直接前往
+    else {
+        next()
+    }
+})

package/ace-monolith-shell-ui/src/shims-vue.d.ts

@@ -0,0 +1,22 @@
+/*
+ * 版权所有 (c) 2022 江苏杰瑞信息科技有限公司
+ *
+ * 此文件属于JARI.ACE平台项目，修改、分发必须遵守杰瑞信科商业软件许可协议
+ */
+
+/* eslint-disable */
+declare module "*.vue" {
+    import type {DefineComponent} from "vue";
+    const component: DefineComponent<{}, {}, any>;
+    export default component;
+}
+import "vue"
+
+declare module "vue" {
+    import type {Router, route} from "vue-router";
+
+    interface ComponentCustomProperties {
+        $router: Router;
+        $t: (key: string, ...params: any[]) => string;
+    }
+}

package/ace-monolith-shell-ui/src/stores/modules/accessibleApps.ts

@@ -0,0 +1,149 @@
+/*
+ * 版权所有 (c) 2023 江苏杰瑞信息科技有限公司
+ *
+ * 此文件属于JARI.ACE平台项目，修改、分发必须遵守杰瑞信科商业软件许可协议
+ */
+
+import { defineStore } from "pinia";
+import { useAppApi } from "@jari-ace/app-bolts";
+import type { AppInstance } from "@jari-ace/app-bolts";
+import { ref, type Ref } from "vue";
+import { createAxios } from "@/http";
+
+type appLoadStateTypes = "loading" | "error" | "complete";
+
+interface AccessibleApp extends AppInstance {
+    active: boolean; //窗口是否处于激活状态
+    appLoadStatus?: appLoadStateTypes; //应用页面加载状态
+    isMounted: boolean; //当前应用是否已加载
+}
+
+const accessible: Ref<AccessibleApp[] | null> = ref(null);
+
+/**
+ * 初始化可访问应用列表库
+ */
+export async function setupAccessibleApps() {
+    const api = useAppApi(createAxios());
+
+    accessible.value = (await api.getAccessible()).map((app) => {
+        return {
+            ...app,
+            active: false,
+            appLoadStatus: "loading",
+            isMounted: false,
+        };
+    });
+}
+
+/**
+ * 获取当前登录用户可访问的应用信息列表
+ */
+export const useAccessibleApps = defineStore("accessible-apps", () => {
+    const getByName = (appName: string) => accessible.value!.find((a) => a.name === appName);
+    /**
+     *  根据应用名称设置应用打开的状态
+     */
+    const setLoadStatusByName = (name: string, state: appLoadStateTypes) => {
+        if (accessible.value === null || accessible.value.length === 0) {
+            throw new Error("【根据应用名称设置应用加载状态】没有找到可用应用!");
+        }
+        accessible.value?.forEach((app) => {
+            if (app.name === name) {
+                app.appLoadStatus = state;
+            }
+        });
+    };
+    /**
+     * 根据应用name设置当前应用是否已加载
+     */
+    const setIsMountedByName = (name: string) => {
+        if (accessible.value === null || accessible.value.length === 0) {
+            throw new Error("【根据应用名称设置当前应用是否已加载】没有找到可用应用!");
+        }
+        accessible.value.forEach((app) => {
+            if (app.name === name) {
+                app.isMounted = true;
+            }
+        });
+    };
+    /**
+     * 根据name设置当前活动窗口
+     */
+    const setActiveByName = (name: string) => {
+        if (accessible.value === null || accessible.value.length === 0) {
+            throw new Error("【根据应用名称设置当前活动窗口】没有找到可用应用!");
+        }
+        accessible.value.forEach((app) => {
+            if (app.name === name) {
+                app.active = true;
+            } else {
+                app.active = false;
+            }
+        });
+    };
+    /**
+     * 根据应用名称打开应用视窗
+     */
+    const openAppViewByName = (name: string) => {
+        if (accessible.value === null || accessible.value.length === 0) {
+            throw new Error("【根据应用名称打开应用视窗】没有可用应用!");
+        }
+        const isHas: boolean = accessible.value.some((app) => app.name === name);
+        //如果没有则打开这个应用添加到打开的应用列表中
+        if (!isHas) {
+            const appInfo: AccessibleApp | undefined = getByName(name);
+            if (appInfo === undefined) {
+                //没有找到对应的应用信息
+                throw new Error(
+                    `【根据应用名称打开应用视窗】无法找到应用名称为${name}所对应的应用信息`,
+                );
+            }
+        }
+        //设置为当前应用为激活应用
+        setActiveViewByName(name);
+    };
+    /**
+     * 根据应用名称设置当前活动窗口
+     */
+    const setActiveViewByName = (name: string) => {
+        if (accessible.value === null || accessible.value.length === 0) {
+            throw new Error("【根据应用名称设置当前活动窗口】没有可用应用!");
+        }
+        accessible.value.forEach((app) => {
+            if (app.name === name) {
+                app.active = true;
+            } else {
+                app.active = false;
+            }
+        });
+    };
+
+    return {
+        /**
+         * 根据应用名称打开应用视窗
+         */
+        openAppViewByName,
+        /**
+         * 根据name设置当前活动窗口
+         */
+        setActiveByName,
+        /**
+         *  根据应用 name 设置应用加载状态
+         */
+        setLoadStatusByName,
+        /**
+         * 根据应用name设置应用加载状态
+         */
+        setIsMountedByName,
+        /**
+         * 可访问的应用信息列表
+         */
+        accessible,
+        /**
+         * 根据应用名获取应用信息对象
+         * @returns {@link AppInstance} | undefined
+         */
+        getByName,
+    };
+});

package/ace-monolith-shell-ui/src/stores/modules/app.ts

@@ -0,0 +1,164 @@
+import {defineStore} from 'pinia'
+import type {AppInstance, Theme, AppPreferences} from '@jari-ace/app-bolts'
+import {useAppApi} from '@jari-ace/app-bolts'
+import {createAxios} from '@/http'
+import {useLocalStorage} from '@vueuse/core'
+import {usePreferences} from "@/hooks/usePreferences";
+
+type appLoadStateTypes = 'loading' | 'error' | 'complete';
+
+type AppLoadStateTypes = 'loading' | 'error' | 'complete';
+
+export const LOCAL_STORAGE_KEY = import.meta.env.VITE_LOCAL_KEY + '.app:'
+
+export interface AccessibleApp extends AppInstance, AppPreferences {
+    active: boolean; //窗口是否处于激活状态
+    appLoadStatus: AppLoadStateTypes; //应用页面加载状态
+    isMounted: boolean; //当前应用是否已加载
+}
+
+interface State {
+    apps: AccessibleApp[] | null;
+    currentApp: AccessibleApp | null;
+}
+
+const {
+    setTheme,
+    setIsDev,
+    getIsDev,
+    getPreferences,
+    setPreferences,
+    setCurrentPreferences,
+} = usePreferences();
+
+export const useAppStore = defineStore('app', {
+    // 其他配置...
+    state: (): State => {
+        return {
+            apps: null,
+            currentApp: null
+        }
+    },
+    getters: {},
+    actions: {
+        setTheme(appName: string, theme: Theme) {
+            this.apps?.forEach((app) => {
+                if (app.name === appName) {
+                    const t: Theme = Object.assign(app.theme || {}, theme)
+                    app.theme = t;
+                    setTheme(t, app.id)
+                }
+            })
+        },
+        getByName(appName: string): AccessibleApp | undefined {
+            if (this.apps === null) {
+                throw new Error(`【getByName】：应用列表为空，无法获取到应用信息。`)
+            }
+            return this.apps.find((a) => a.name === appName)
+        },
+        /**
+         *  根据应用名称设置应用打开的状态
+         */
+        setLoadStatusByName(name: string, state: appLoadStateTypes) {
+            if (this.apps === null || this.apps.length === 0) {
+                throw new Error('【根据应用名称设置应用加载状态】没有找到可用应用!')
+            }
+            this.apps?.forEach((app) => {
+                if (app.name === name) {
+                    app.appLoadStatus = state
+                }
+            })
+        },
+        /**
+         * 根据应用name设置当前应用是否已加载
+         */
+        setIsMountedByName(name: string) {
+            if (this.apps === null || this.apps.length === 0) {
+                throw new Error('【根据应用名称设置当前应用是否已加载】没有找到可用应用!')
+            }
+            this.apps.forEach((app) => {
+                if (app.name === name) {
+                    app.isMounted = true
+                }
+            })
+        },
+        async setupAccessibleApps() {
+            const api = useAppApi(createAxios())
+            this.apps = (
+                await api.getAccessible()
+            ).map((app) => {
+                const p = getPreferences(app.id);
+                const a: AccessibleApp = {
+                    active: false,
+                    isMounted: false,
+                    appLoadStatus: 'complete',
+                    ...p.value,  //这里做了默认值与本地合并的操作
+                    ...app,
+                }
+                //初始化本地的应用配置
+                setPreferences({
+                    ...p.value,
+                    id: a.id,
+                    name: a.name
+                }, app.id)
+                return a
+            })
+            if (this.currentApp === null && this.apps.length > 0) {
+                this.activateApp(this.apps[0].name)
+            }
+
+        },
+        setDevMode(appId: string, isDev: boolean) {
+            //将应用的isDev状态保存到localStorage中
+            setIsDev(isDev, appId)
+            const app = this.apps?.find(a => a.id === appId)
+            if (app) {
+                app.isDev = isDev
+            }
+        },
+        getDevMode(appId: string) {
+            const app = this.apps?.find(a => a.id === appId)
+
+            if (app) {
+                return app.isDev
+            } else {
+                return getIsDev(appId)
+            }
+        },
+        /**
+         * 激活应用
+         */
+        activateApp(name: string) {
+            if (!this.apps) {
+                throw new Error('【根据应用名称打开应用视窗】没有可用应用!')
+            }
+            const isHas: boolean = this.apps.some((app) => app.name === name)
+            //如果没有则打开这个应用添加到打开的应用列表中
+            if (!isHas) {
+                const appInfo: AccessibleApp | undefined = this.getByName(name)
+                if (appInfo === undefined) {
+                    //没有找到对应的应用信息
+                    throw new Error(
+                        `【根据应用名称打开应用视窗】无法找到应用名称为${name}所对应的应用信息`
+                    )
+                }
+            }
+            //设置为当前应用为激活应用
+            this.apps.forEach((app) => {
+                if (app.name === name) {
+                    //设置当前配置为应用的配置
+                    setCurrentPreferences(app.id)
+                    app.active = true;
+                    this.currentApp = app;
+
+                } else {
+                    app.active = false
+                }
+            })
+        }
+    }
+})
+
+export type AppStore = ReturnType<typeof useAppStore>;
+
+export default useAppStore