ace-front-end 1.0.0

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

@@ -0,0 +1,147 @@
+import { defineStore } from "pinia";
+import type { AppInstance } from "@jari-ace/app-bolts";
+import { useAppApi } from "@jari-ace/app-bolts";
+import { createAxios } from "@/utils/axios";
+import { useLocalStorage } from "@vueuse/core";
+
+type appLoadStateTypes = "loading" | "error" | "complete";
+
+type AppLoadStateTypes = "loading" | "error" | "complete";
+export const LOCAL_STORAGE_KEY = "com.csicit.ace.app-dev-mode:";
+
+export interface AccessibleApp extends AppInstance {
+    active: boolean; //窗口是否处于激活状态
+    appLoadStatus: AppLoadStateTypes; //应用页面加载状态
+    isMounted: boolean; //当前应用是否已加载
+    isDev: boolean;
+}
+
+interface State {
+    apps: AccessibleApp[] | null;
+    currentApp: AccessibleApp | null;
+}
+
+export const useAppStore = defineStore("app", {
+    // 其他配置...
+    state: (): State => {
+        return {
+            apps: null,
+            currentApp: null,
+        };
+    },
+    getters: {},
+    actions: {
+        getByName(appName: string) {
+            if (this.apps === null) {
+                throw new Error(`this.apps为null`);
+            }
+            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 a: AccessibleApp = {
+                    ...app,
+                    active: false,
+                    isMounted: false,
+                    isDev: false,
+                    appLoadStatus: "complete",
+                };
+                //合并本地存储的应用isDev状态
+                const ls = useLocalStorage(LOCAL_STORAGE_KEY + app.id, {
+                    id: app.id,
+                    isDev: false,
+                });
+                return Object.assign(a, ls.value);
+            });
+            if (this.currentApp === null && this.apps.length > 0) {
+                this.activateApp(this.apps[0].name);
+            }
+            console.log("loaded apps: ", this.apps);
+        },
+        setDevMode(appId: string, isDev: boolean) {
+            //将应用的isDev状态保存到localStorage中
+            const ls = useLocalStorage(LOCAL_STORAGE_KEY + appId, {
+                id: appId,
+                isDev: isDev,
+            });
+            ls.value.isDev = isDev;
+            const app = this.apps?.find((a) => a.id === appId);
+            console.log("setting app dev mode:", app, appId);
+            if (app) {
+                app.isDev = isDev;
+            }
+        },
+        getDevMode(appId: string) {
+            const app = this.apps?.find((a) => a.id === appId);
+            if (app) {
+                return app.isDev;
+            } else {
+                const ls = useLocalStorage(LOCAL_STORAGE_KEY + appId, {
+                    id: appId,
+                    isDev: false,
+                });
+                return ls.value.isDev;
+            }
+        },
+        /**
+         * 激活应用
+         */
+        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) {
+                    app.active = true;
+                    this.currentApp = app;
+                } else {
+                    app.active = false;
+                }
+            });
+        },
+    },
+});
+
+export type AppStore = ReturnType<typeof useAppStore>;
+
+export default useAppStore;

package/ace-cloud-shell-ui/src/stores/modules/appContext.ts

@@ -0,0 +1,53 @@
+/*
+ * 版权所有 (c) 2023 江苏杰瑞信息科技有限公司
+ *
+ * 此文件属于JARI.ACE平台项目，修改、分发必须遵守杰瑞信科商业软件许可协议
+ */
+
+import type {MicroAppContext, ServerEvent} from "@jari-ace/app-bolts";
+import {LocaleType, store} from "@jari-ace/app-bolts";
+import {defineStore} from "pinia";
+import {ref, type Ref} from "vue";
+
+
+/**
+ * 主应用向子应用传递的数据包存储库
+ */
+export const useAppContext = defineStore("micro-app-context", () => {
+    const context: Ref<MicroAppContext | null> = ref(null);
+
+    function setupMicroAppContext(c: MicroAppContext | null) {
+        context.value = c;
+    }
+
+    function setLocale(locale: LocaleType) {
+        if (context.value === null) return false;
+        context.value.locale = locale;
+    }
+
+    function setServerEventSubscribeMethod(
+        subscribeMethod: (eventName: string, handler: (event: ServerEvent) => void) => void,
+    ) {
+        if (context.value === null) return false;
+        context.value.subscribeServerEvent = subscribeMethod;
+    }
+
+    function setServerEventUnsubscribeMethod(
+        method: (eventName: string, handler: (event: ServerEvent) => void) => void,
+    ) {
+        if (context.value === null) return false;
+        context.value.unsubscribeServerEvent = method;
+    }
+
+    return {
+        context,
+        setupMicroAppContext,
+        setLocale,
+        setServerEventUnsubscribeMethod,
+        setServerEventSubscribeMethod
+    }
+});
+
+export function useAppContextWithout() {
+    return useAppContext(store);
+}

package/ace-cloud-shell-ui/src/stores/modules/locale.ts

@@ -0,0 +1,63 @@
+/*
+ * 版权所有 (c) 2022 江苏杰瑞信息科技有限公司
+ *
+ * 此文件属于JARI.ACE平台项目，修改、分发必须遵守杰瑞信科商业软件许可协议
+ */
+
+import type { LocaleSetting, LocaleType } from "@jari-ace/app-bolts";
+import { localeSetting } from "@jari-ace/app-bolts";
+import { defineStore } from "pinia";
+import { store } from "@jari-ace/app-bolts";
+import { createLocalStorage } from "@jari-ace/app-bolts";
+import { useAppContext } from "./appContext";
+
+const LOCALE_KEY = "LOCALE__";
+
+const ls = createLocalStorage();
+
+const lsLocaleSetting = (ls.get(LOCALE_KEY) || localeSetting) as LocaleSetting;
+
+interface LocaleState {
+    localInfo: LocaleSetting;
+}
+
+export const useLocaleStore = defineStore({
+    id: "app-locale",
+    state: (): LocaleState => ({
+        localInfo: lsLocaleSetting,
+    }),
+    getters: {
+        getShowPicker(): boolean {
+            return !!this.localInfo?.showPicker;
+        },
+        getLocale(): LocaleType {
+            return this.localInfo?.locale ?? this.localInfo.fallback;
+        },
+    },
+    actions: {
+        /**
+         * Set up multilingual information and cache
+         * @param info multilingual info
+         */
+        setLocaleInfo(info: Partial<LocaleSetting>) {
+            this.localInfo = { ...this.localInfo, ...info };
+            ls.set(LOCALE_KEY, this.localInfo);
+            const microAppContextStore = useAppContext(store);
+            info.locale && microAppContextStore.setLocale(info.locale);
+        },
+        /**
+         * Initialize multilingual information and load the existing configuration from the local cache
+         */
+        initLocale() {
+            this.setLocaleInfo({
+                ...localeSetting,
+                ...this.localInfo,
+            });
+        },
+    },
+});
+
+// Need to be used outside the setup
+export function useLocaleStoreWithOut() {
+    return useLocaleStore(store);
+}

package/ace-cloud-shell-ui/src/stores/modules/oidc.ts

@@ -0,0 +1,71 @@
+/*
+ * 版权所有 (c) 2023 江苏杰瑞信息科技有限公司
+ *
+ * 此文件属于JARI.ACE平台项目，修改、分发必须遵守杰瑞信科商业软件许可协议
+ */
+
+import { defineStore } from "pinia";
+import type { KeycloakInstance } from "keycloak-js";
+import { flatMap } from "lodash-es";
+import { Jari, setupLoginUser } from "@jari-ace/app-bolts";
+
+let keycloak: KeycloakInstance;
+let realmId: string;
+
+export function setupOidc(kc: KeycloakInstance, realm: string) {
+    keycloak = kc;
+    realmId = realm;
+    const oidcStore = useOidcStore();
+    window.keycloak = oidcStore.keycloak;
+    return oidcStore;
+}
+
+export const useOidcStore = defineStore("keycloak-oidc", {
+    state: () => ({
+        keycloak,
+        realmId,
+    }),
+    getters: {
+        token: (state) => state.keycloak.token,
+        loginUser: (state): Jari.Ace.User => {
+            const tk = state.keycloak.tokenParsed!;
+            const rac = tk.resource_access ?? {};
+            const lu = {
+                id: tk.sub ?? tk.preferred_username,
+                userName: tk.preferred_username,
+                firstName: tk.given_name,
+                lastName: tk.family_name,
+                locale: tk.locale,
+                classifiedLevel: parseInt(tk.classifiedLevel ?? Jari.Ace.DEFAULT_CLASSIFIED_LEVEL),
+                email: tk.email,
+                mobile: tk.mobile,
+                roles: [
+                    ...(tk.realm_access?.roles ?? []),
+                    ...flatMap(Object.keys(rac), (k: string) =>
+                        rac[k].roles.map((r: any) => k + "." + r),
+                    ),
+                ],
+                groups: tk.groups ?? [],
+                fullName:
+                    tk.locale.startsWith("zh") ||
+                    tk.locale.startsWith("ko") ||
+                    tk.locale.startsWith("ja") ||
+                    tk.locale.startsWith("vi") ||
+                    tk.locale.startsWith("hu")
+                        ? tk.family_name + tk.given_name
+                        : tk.given_name + " " + tk.family_name,
+                ...tk.attributes,
+                hasRole(name: string) {
+                    return this.roles.includes(name);
+                },
+            };
+            setupLoginUser(lu);
+            return lu;
+        },
+    },
+    actions: {
+        logout() {
+            this.keycloak.logout();
+        },
+    },
+});

package/ace-cloud-shell-ui/src/stores/modules/system.ts

@@ -0,0 +1,32 @@
+import { defineStore } from "pinia";
+import { store } from "@jari-ace/app-bolts";
+
+interface SystemInterface {
+    theme: "dark" | "light"; //主题
+    backgroundColor: string; //背景色
+    sidebarBackgroundColor: string; //侧边栏背景色
+    isExpanded: boolean; //是否展开右侧菜单栏
+    showRightSidebar: boolean; //是否显示右侧边栏
+    showSidebarText: boolean; //是否显示侧边栏菜单文字
+}
+
+export const useSystemContext = defineStore({
+    id: "system-context",
+    persist: {
+        paths: ["theme", "backgroundColor", "isExpanded", "showRightSidebar", "showSidebarText"],
+    },
+    state: (): SystemInterface => {
+        return {
+            theme: "light",
+            backgroundColor: "#EEF2F6",
+            sidebarBackgroundColor: "#2C3B65",
+            isExpanded: true,
+            showRightSidebar: false,
+            showSidebarText: true,
+        };
+    },
+});
+
+export function useSystemContextWithOut() {
+    return useSystemContext(store);
+}

package/ace-cloud-shell-ui/src/types/ext.d.ts

@@ -0,0 +1,35 @@
+/*
+ * 版权所有 (c) 2022 江苏杰瑞信息科技有限公司
+ *
+ * 此文件属于JARI.ACE平台项目，修改、分发必须遵守杰瑞信科商业软件许可协议
+ */
+/// <reference types="keycloak-js/keycloak" />
+import "@vue/runtime-core";
+
+declare module "keycloak-js" {
+    namespace Keycloak {
+        interface KeycloakTokenParsed {
+            userIp: string;
+            locale: string;
+            family_name: string;
+            given_name: string;
+            preferred_username: string;
+            classifiedLevel: string;
+            email: string;
+            mobile: string;
+            groups: string[];
+        }
+    }
+}
+
+declare module "@jari-ace/app-bolts" {
+    /**
+     * AceAxios的实例创建参数
+     */
+    interface AceAxiosCreateConfig {
+        /**
+         * keycloak实例
+         */
+        keycloak?: Keycloak;
+    }
+}

package/ace-cloud-shell-ui/src/types/router.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 扩展 route.meta 属性
+ */
+import "vue-router";
+
+declare module "vue-router" {
+    interface RouteMeta extends Record<string | number | symbol, unknown> {
+        requiresAuth: boolean; //需要身份验证
+        isAppRoute?: boolean; //是否是动态添加的应用路由
+        name?: string; //名称
+    }
+}

package/ace-cloud-shell-ui/src/types/window.d.ts

@@ -0,0 +1,15 @@
+import { type MicroAppContext, type KeycloakInstance, Jari } from "@jari-ace/app-bolts";
+
+interface HTMLLinkElement extends HTMLElement {
+    href: string;
+    rel: string;
+    // 添加其他属性或方法
+}
+
+declare global {
+    interface Window {
+        appContext?: MicroAppContext;
+        keycloak?: KeycloakInstance;
+        appDescriptor: Jari.Ace.ApplicationDescriptor;
+    }
+}