@skyfox2000/microbase 1.0.0

package/README.md

@@ -0,0 +1,16 @@
+# 〇克微前端通用功能与数据类型定义
+
+## 项目简介
+
+这是一个基础定义库，需要配合 `@skyfox2000/webbase` 使用
+
+## 安装方式
+```shell
+npm install -S @skyfox2000/microbase
+```
+
+## 功能清单
+
+## 功能使用说明
+
+## 注意事项

package/lib/assets/modules/index-yUrmSBei.js

@@ -0,0 +1,11 @@
+import { defineComponent as r, unref as e, openBlock as t, createBlock as n, resolveDynamicComponent as m, normalizeProps as u, mergeProps as a, createCommentVNode as l } from "vue";
+import { loadModule as p, LoaderRouter as c, moduleCom as o, moduleAttrs as d } from "../../microbase.es.js";
+const k = /* @__PURE__ */ r({
+  __name: "index",
+  setup(i) {
+    return window.microApp || p(c.currentRoute.value.path), (s, _) => e(o) != null ? (t(), n(m(e(o)), u(a({ key: 0 }, e(d))), null, 16)) : l("", !0);
+  }
+});
+export {
+  k as default
+};

package/lib/index.d.ts

@@ -0,0 +1,459 @@
+import { ApiResponse } from '@skyfox2000/fapi';
+import { Ref } from 'vue';
+import { ReqParams } from '@skyfox2000/fapi';
+import { Router } from 'vue-router';
+import { RouteRecordRaw } from 'vue-router';
+
+/**
+ * 应用动作： App | Open | Iframe
+ */
+export declare enum AppAction {
+    /**
+     * 应用模式加载
+     */
+    "App" = "App",
+    /**
+     * 托管应用模式加载
+     * - 菜单托管，平台管理加载菜单
+     */
+    "MenuApp" = "MenuApp",
+    /**
+     * 链接，弹出窗口打开
+     */
+    "Link" = "Link",
+    /**
+     * Iframe内嵌方式打开
+     */
+    "Iframe" = "Iframe"
+}
+
+/**
+ * 应用信息
+ */
+export declare interface AppInfo {
+    /**
+     * 主键
+     */
+    Id: string;
+    /**
+     * 名称
+     */
+    Name: string;
+    /**
+     * 唯一编码
+     * - 路由前缀地址
+     */
+    AppCode: string;
+    /**
+     * 版本号
+     */
+    Version: string;
+    /**
+     * 图标
+     */
+    Icon: string;
+    /**
+     * 来源： Market | Manual
+     */
+    Source: AppSource;
+    /**
+     * 动作: App | MenuApp | Open | Iframe
+     */
+    Action: AppAction;
+    /**
+     * 应用加载地址
+     * - http开头地址
+     * - SERVER_HOST配置
+     */
+    Host: string;
+    /**
+     * 默认页面
+     */
+    Page?: string;
+    /**
+     * 默认应用，如没设置，则使用第一个
+     */
+    Default?: boolean;
+    /**
+     * 描述
+     */
+    Description?: string;
+
+    /**
+     * 启用状态
+     * - 启用 true 1
+     * - 停用 false 0
+     */
+    Enabled: boolean | number;
+    [key: string]: any;
+}
+
+/**
+ * 应用来源： Market | Manual
+ */
+export declare enum AppSource {
+    /**
+     * 从市场安装
+     */
+    "Market" = "Market",
+    /**
+     * 手动输入
+     */
+    "Manual" = "Manual"
+}
+
+/**
+ * 深度合并QOD参数
+ */
+export declare const combineParams: (...args: ReqParams[]) => ReqParams;
+
+/**
+ * 路由权限判断
+ * @param route 指定路由
+ * @param isLogin 是否已登录
+ * @param userRoles 用户角色
+ * @param userPermits 用户权限
+ * @returns 权限判断结果
+ */
+export declare const hasPermission: (route: RouteRecord, isLogin: boolean, userRoles: string[], userPermits: string[]) => boolean;
+
+/**
+ * 启动配置信息
+ * - 网站配置信息
+ * - 前端初始配置
+ */
+export declare interface HostInfo {
+    /**
+     * 网站地址，配置码
+     */
+    Host: string;
+    /**
+     * 短名称
+     */
+    Title: string;
+    /**
+     * 网站全名称
+     */
+    FullTitle?: string;
+    /**
+     * Logo图标地址
+     */
+    LogoIcon?: string;
+    /**
+     * 登录页面地址
+     */
+    LoginUrl?: string;
+    /**
+     * 用户信息页面地址
+     */
+    UserSettingUrl?: string;
+    /**
+     * 服务商名称
+     */
+    Provider?: string;
+    /**
+     * 接口域名地址
+     */
+    API_HOST?: {
+        [key: string]: string;
+    } | null;
+    /**
+     * 网站服务器地址
+     */
+    SERVER_HOST?: Record<string, string>;
+    /**
+     * 扩展属性配置
+     */
+    ExtraPropLines?: Record<string, any>[];
+    /**
+     * 扩展属性
+     */
+    ExtraProps?: {
+        [key: string]: string;
+    };
+    [key: string]: any;
+}
+
+/**
+ * 从页面加载处获取接口
+ */
+export declare const initMainAppData: () => void;
+
+/**
+ * 初始化微模块加载
+ * @param modules 微模块列表
+ */
+export declare const initModuleLoader: (modules: Record<string, () => Promise<unknown>>) => void;
+
+/**
+ * 是否微服务基座应用
+ * @returns
+ */
+export declare const isBaseMicroApp: () => boolean;
+
+/**
+ * 是否微服务运行环境
+ * @returns
+ */
+export declare const isMicroApp: () => boolean;
+
+export declare const LoaderRouter: Router;
+
+/**
+ * 加载微模块
+ * @param module 微模块地址
+ */
+export declare const loadModule: (page: string) => Promise<void>;
+
+/**
+ * 登录信息与授权
+ */
+export declare interface LoginInfo {
+    /**
+     * 用户名
+     */
+    UserName: string;
+    /**
+     * 密码
+     */
+    UserPass: string;
+    /**
+     * 登录返回的用户信息
+     */
+    UserInfo?: UserInfo;
+    /**
+     * 登录获取的授权token
+     */
+    token?: string;
+    /**
+     * 登录获取的刷新token
+     */
+    refreshToken?: string;
+}
+
+export declare const mainAppApis: Ref<MainOpenApis | undefined, MainOpenApis | undefined>;
+
+/**
+ * 主应用初始化数据格式
+ */
+export declare interface MainAppData {
+    /**
+     * 主应用开放接口
+     */
+    MainApis: MainOpenApis;
+    /**
+     * 主应用开放事件
+     */
+    MainEvents: MainOpenEvents;
+    /**
+     * 加载的页面地址
+     */
+    pageUrl: string;
+}
+
+export declare const mainAppEvents: Ref<MainOpenEvents | undefined, MainOpenEvents | undefined>;
+
+/**
+ * 主应用开放接口
+ */
+export declare interface MainOpenApis {
+    /**
+     * 获取HostInfo
+     */
+    getHostInfo: () => HostInfo;
+    /**
+     * 用户注册接口
+     */
+    userRegister?: () => void;
+    /**
+     * 用户登录接口
+     */
+    userLogin?: (loginInfo: LoginInfo) => Promise<ApiResponse<LoginInfo> | void>;
+    /**
+     * 获取授权码
+     * @returns 授权码
+     */
+    getToken: () => string;
+    /**
+     * 获取当前用户信息
+     */
+    getUserInfo: () => UserInfo;
+    /**
+     * 获取前端设置信息
+     */
+    getSettingInfo?: () => SettingInfo;
+    /**
+     * 子应用推送路由变更
+     */
+    mainAppPush?: (subPath: string) => void;
+}
+
+/**
+ * 主应用开放事件注册
+ */
+export declare interface MainOpenEvents {
+    /**
+     * 前端设置信息变更
+     */
+    onSettingChanged?: () => void;
+}
+
+export declare const mainPageUrl: Ref<string | undefined, string | undefined>;
+
+/**
+ * 菜单链接信息
+ */
+export declare type MenuLink = {
+    /**
+     * 名称
+     */
+    name: string;
+    /**
+     * 图标
+     * icon可以是字符串路径或组件
+     */
+    icon: string;
+    /**
+     * 路径
+     */
+    path: string;
+    [key: string]: any;
+};
+
+/**
+ * 微模块属性配置
+ */
+export declare const moduleAttrs: Ref<Record<string, any>, Record<string, any>>;
+
+/**
+ * 当前微模块
+ */
+export declare const moduleCom: Ref<any, any>;
+
+/**
+ * 微模块列表
+ */
+export declare const moduleRecords: Ref<Record<string, () => Promise<unknown>>, Record<string, () => Promise<unknown>>>;
+
+/**
+ * 微模块地址
+ */
+export declare const moduleUrl: Ref<string, string>;
+
+/**
+ * 路由扩展信息
+ */
+export declare type RouteMeta = {
+    /**
+     * 应用码，所属应用
+     */
+    code?: string | null;
+    /**
+     * 应用地址
+     */
+    host?: string | null;
+    /**
+     * 页面地址
+     */
+    page?: string | null;
+    /**
+     * 授权角色
+     */
+    roles?: string[];
+    /**
+     * 功能码
+     */
+    permission?: string;
+};
+
+/**
+ * 路由记录
+ */
+export declare type RouteRecord = RouteRecordRaw & {
+    parent?: RouteRecord | null;
+    /**
+     * 路由图标
+     */
+    icon?: string;
+    /**
+     * 附加属性
+     */
+    meta?: RouteMeta;
+    /**
+     * 子路由信息
+     */
+    children?: RouteRecord[];
+};
+
+/**
+ * 表格行操作区位置
+ */
+export declare enum RowOperate {
+    LEFT = 1,
+    RIGHT = 2
+}
+
+/**
+ * 前端个性化配置
+ */
+export declare interface SettingInfo {
+    /**
+     * 全屏显示
+     */
+    readonly fullscreen: boolean;
+    /**
+     * 主菜单区折叠
+     */
+    readonly menuCollapse: boolean;
+    /**
+     * 表格行操作区位置
+     */
+    readonly rowOperate: RowOperate;
+    /**
+     * 使用语言
+     */
+    readonly language?: string;
+    /**
+     * 主题模式
+     */
+    readonly theme?: string;
+    /**
+     * 主题颜色
+     */
+    readonly themeColor?: string;
+}
+
+/**
+ * 用户信息
+ */
+export declare interface UserInfo {
+    /**
+     * 主键
+     */
+    Id: string;
+    /**
+     * 名称
+     */
+    Name: string;
+    /**
+     * 用户码
+     */
+    Code: string;
+    /**
+     * 角色
+     */
+    Roles: string[];
+    /**
+     * 权限
+     */
+    Permissions: string[];
+}
+
+export { }
+
+
+declare global {
+   interface Window {
+      microApp: EventCenterForMicroApp;
+   }
+}

package/lib/microbase.es.js

@@ -0,0 +1,109 @@
+import { ref as o, markRaw as A, h as d } from "vue";
+import { createRouter as M, createWebHashHistory as _ } from "vue-router";
+var w = /* @__PURE__ */ ((e) => (e.Market = "Market", e.Manual = "Manual", e))(w || {}), D = /* @__PURE__ */ ((e) => (e.App = "App", e.MenuApp = "MenuApp", e.Link = "Link", e.Iframe = "Iframe", e))(D || {}), I = /* @__PURE__ */ ((e) => (e[e.LEFT = 1] = "LEFT", e[e.RIGHT = 2] = "RIGHT", e))(I || {});
+const a = (e, t) => {
+  if (!(!t || !e))
+    for (const n in t)
+      n in e && typeof e[n] == "object" && typeof t[n] == "object" && !Array.isArray(t[n]) ? a(e[n], t[n]) : e[n] = c(t[n]);
+}, c = (e) => {
+  if (e === null || typeof e != "object")
+    return e;
+  let t = Array.isArray(e) ? [] : {};
+  for (let n in e)
+    e.hasOwnProperty(n) && (t[n] = c(e[n]));
+  return t;
+}, g = (...e) => {
+  const t = {};
+  for (const n of e)
+    n != null && n.Option && !t.Option && (t.Option = {}), a(t.Option, n == null ? void 0 : n.Option);
+  for (const n of e)
+    n != null && n.Query && !t.Query && (t.Query = {}), a(t.Query, n == null ? void 0 : n.Query);
+  for (const n of e)
+    t.Data = n != null && n.Data ? c(n.Data) : {};
+  return t;
+}, C = () => !!window.__MICRO_APP_ENVIRONMENT__, N = () => !!window.__MICRO_APP_BASE_APPLICATION__, u = o(), O = o(), P = o(), U = () => {
+  const e = window.microApp.getData(
+    !0
+  );
+  u.value = e.MainApis, O.value = e.MainEvents, P.value = e.pageUrl;
+}, k = [
+  {
+    path: "/:page(.*)",
+    name: "默认页面",
+    component: () => import("./assets/modules/index-yUrmSBei.js")
+  }
+], y = M({
+  history: _(void 0),
+  routes: k
+}), Q = (e, t, n, l) => {
+  var f, p;
+  const r = ((f = e.meta) == null ? void 0 : f.roles) ?? [], i = (p = e.meta) == null ? void 0 : p.permission;
+  if (!t)
+    return r.length === 0 && !i;
+  if (t && (n.length > 0 || l.length > 0)) {
+    if (r.length === 0 && !i)
+      return !0;
+    if (r.length && !i)
+      return r.some((s) => n.includes(s));
+    if (!r.length && i)
+      return l.includes(i);
+    if (r.length && i)
+      return r.some((s) => n.includes(s)) && l.includes(i);
+  }
+  return !1;
+};
+y.afterEach((e) => {
+  if (u.value) {
+    const { mainAppPush: t } = u.value;
+    t && t(e.hash);
+  }
+});
+const H = o({}), h = o(""), v = o({}), m = o(null), E = async (e) => {
+  h.value = e, e.startsWith("/") && (e = e.substring(1));
+  const t = v.value[`./views/${e}.vue`];
+  if (t) {
+    const n = await t();
+    m.value = A(n.default), y.replace("/" + e);
+  } else
+    console.error("加载微模块" + e + "失败"), m.value = d(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100vh",
+          // 使整个视口高度都被占满
+          flexDirection: "column"
+          // 使文本垂直居中
+        }
+      },
+      [d("div", "404 NOT FOUND")]
+    );
+}, R = (e) => {
+  v.value = e, window.microApp && window.microApp.addDataListener(async (t) => {
+    if (t.pageUrl === h.value) return;
+    let n = t.pageUrl;
+    E(n);
+  }, !0);
+};
+export {
+  D as AppAction,
+  w as AppSource,
+  y as LoaderRouter,
+  I as RowOperate,
+  g as combineParams,
+  Q as hasPermission,
+  U as initMainAppData,
+  R as initModuleLoader,
+  N as isBaseMicroApp,
+  C as isMicroApp,
+  E as loadModule,
+  u as mainAppApis,
+  O as mainAppEvents,
+  P as mainPageUrl,
+  H as moduleAttrs,
+  m as moduleCom,
+  v as moduleRecords,
+  h as moduleUrl
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+   "name": "@skyfox2000/microbase",
+   "version": "1.0.0",
+   "description": "〇克微前端通用功能与数据类型定义",
+   "type": "module",
+   "keywords": [],
+   "author": "skyfox2000@github.com",
+   "license": "MIT",
+   "publishConfig": {
+      "access": "public"
+   },
+   "module": "./lib/microbase.es.js",
+   "types": "./lib/index.d.ts",
+   "exports": {
+      ".": {
+         "types": "./lib/index.d.ts",
+         "default": "./lib/microbase.es.js"
+      }
+   },
+   "scripts": {
+      "dev": "vite",
+      "build": "vue-tsc -b && vite build",
+      "preview": "vite preview"
+   },
+   "dependencies": {
+      "@micro-zoe/micro-app": "1.0.0-rc.18",
+      "vue": "^3.5.13",
+      "vue-router": "^4.5.0"
+   },
+   "devDependencies": {
+      "@types/node": "^22.10.2",
+      "@vitejs/plugin-vue": "^5.2.1",
+      "rollup": "^4.28.1",
+      "rollup-plugin-gzip": "^4.0.1",
+      "typescript": "^5.7.2",
+      "vite": "^6.0.3",
+      "vite-plugin-dts": "^4.3.0",
+      "vue-tsc": "^2.1.10"
+   }
+}

package/src/components/loader/index.ts

@@ -0,0 +1,70 @@
+import router from "@/router/loader-router";
+import { MainAppData } from "@/utils/micro-app";
+import { ref, markRaw, h } from "vue";
+
+/**
+ * 微模块属性配置
+ */
+export const moduleAttrs = ref<Record<string, any>>({});
+/**
+ * 微模块地址
+ */
+export const moduleUrl = ref<string>("");
+/**
+ * 微模块列表
+ */
+export const moduleRecords = ref<Record<string, () => Promise<unknown>>>({});
+/**
+ * 当前微模块
+ */
+export const moduleCom = ref<any>(null);
+
+/**
+ * 加载微模块
+ * @param module 微模块地址
+ */
+export const loadModule = async (page: string) => {
+   moduleUrl.value = page;
+   if (page.startsWith("/")) page = page.substring(1);
+   const link = moduleRecords.value[
+      `./views/${page}.vue`
+   ] as () => Promise<any>;
+
+   if (link) {
+      const module = await link();
+      moduleCom.value = markRaw(module.default);
+      router.replace("/" + page);
+   } else {
+      console.error("加载微模块" + page + "失败");
+      moduleCom.value = h(
+         "div",
+         {
+            style: {
+               display: "flex",
+               justifyContent: "center",
+               alignItems: "center",
+               height: "100vh", // 使整个视口高度都被占满
+               flexDirection: "column" // 使文本垂直居中
+            }
+         },
+         [h("div", "404 NOT FOUND")]
+      );
+   }
+};
+
+/**
+ * 初始化微模块加载
+ * @param modules 微模块列表
+ */
+export const initModuleLoader = (
+   modules: Record<string, () => Promise<unknown>>
+) => {
+   moduleRecords.value = modules;
+   if (window.microApp) {
+      window.microApp.addDataListener(async (data: MainAppData) => {
+         if (data.pageUrl === moduleUrl.value) return;
+         let page = data.pageUrl as string;
+         loadModule(page);
+      }, true);
+   }
+};

package/src/components/loader/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { moduleCom, moduleAttrs, loadModule } from './index';
+import { LoaderRouter } from '@/index';
+
+if (!window.microApp) {
+   loadModule(LoaderRouter.currentRoute.value.path)
+}
+</script>
+
+<template>
+   <component v-bind="moduleAttrs" :is="moduleCom" v-if="moduleCom != null" />
+</template>