@arkxos/arkos-core 0.1.0

package/src/core/router/router.js

@@ -0,0 +1,80 @@
+
+import { createRouter, createWebHashHistory } from 'vue-router';
+import { ElNotification } from 'element-plus';
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+import system from '../system';
+import config from '../config/index'
+
+// 创建一个路由器实例
+const router = createRouter({
+  history: createWebHashHistory(),
+  base: '__dirname',
+  routes: [],
+  // 设置滚动条位置
+  scrollBehavior: to => {
+    if (document.getElementById('con')) {
+      if (to.meta.scrollTop) {
+        document.getElementById('con').scrollTop = to.meta.scrollTop;
+      } else {
+        document.getElementById('con').scrollTop = 0;
+      }
+    }
+  }
+});
+
+router.beforeEach((to, from, next) => {
+  markScroll(to, from, next);
+
+  NProgress.start()
+
+  // 动态标题
+  document.title = to.meta.title ? `${to.meta.title} - ${config.ArkosTitle}` : `${config.ArkosTitle}`
+
+  system.plugins.forEach((plugin) => {
+    if (!plugin.beforeRouter) {
+      return;
+    }
+    plugin.beforeRouter(to, from, next);
+  })
+
+  next();
+});
+
+router.afterEach((to, from) => {
+  // afterEach(to, from)
+  NProgress.done()
+});
+
+router.onError((error) => {
+  NProgress.done();
+  ElNotification.error({
+    title: '路由错误',
+    message: error.message
+  });
+});
+
+// 记录滚动条位置
+function markScroll (to, from, next) {
+  if (document.getElementById('con')) { from.meta.scrollTop = document.getElementById('con').scrollTop; }
+  // 根据url打开标签
+  if (
+    !from.name &&
+    to.path != '/mainIndex' &&
+    to.name &&
+    PUZZLE_CONFIG.pageHome != to.name
+  ) {
+    // store.commit("ADD_TAB", to.name);
+  }
+}
+
+// 防止路由到错误地址
+// router.beforeEach((to, from, next) => {
+//   if (to.matched.length > 0)
+//     next();
+// });
+
+// 错误捕获
+// router.onError(err => { });
+
+export default router;

package/src/core/system.ts

@@ -0,0 +1,312 @@
+import { sessionCache, errorHandler, tool } from '@arkxos/arkos-util'
+import systemStore from '../store/modules/systemStore'
+import { preFetchLib } from '@arkxio/ark-micro';
+import api from '../api';
+
+function handleMenus (menus, result) {
+  if (!menus) {
+    return;
+  }
+  // console.log('handleMenus', menus)
+  for (const item of menus) {
+    const isFolder = item.children && item.children.length > 0;
+    const isLeaf = !isFolder;
+    if (isLeaf) {
+      result.push(item);
+    } else if (item.children) {
+      handleMenus(item.children, result);
+    }
+  }
+}
+
+const system = {
+  plugins: [],
+  puzzleLoaders: {},
+  // devModuleImporter(customDevModuleImporter) {
+  //   _import.devModuleImporter = customDevModuleImporter
+  // },
+  async dynamicLoadModule(type, name, host, version) {
+    console.log('dynamic load puzzle', type, name, version)
+    return preFetchLib(name)
+    // console.log('remoteModule', remoteModule)
+    // window.PUZZLE_SUCCESS = window.PUZZLE_SUCCESS || [];
+    // window.PUZZLE_SUCCESS.push(name);
+    // resolve({ default: remoteModule });
+    // })
+  },
+  staticRouters: [],
+  puzzles: [],
+  $pinia: undefined,
+  $router: undefined,
+
+  themeRootRoute: undefined,
+  installPlugin (plugin) {
+    this.plugins.push(plugin);
+  },
+  // 路由数据处理
+  fixMenuPath (menus, parentMenu, puzzleCode) {
+    menus.forEach(menu => {
+      // const puzzlePath = menu.puzzleCode.replace('/', '_')
+
+      if (!menu.path.startsWith('http') && !menu.path.startsWith('/')) {
+        menu.path = parentMenu?.path + '/' + menu.path
+      }
+      if (menu.children) {
+        this.fixMenuPath(menu.children, menu, menu.puzzleCode)
+      }
+    })
+  },
+  async queryMenus () {
+    const menusResponse = await api.system.menu.myMenus.get()
+    const responseData = menusResponse.data;
+    const menus = responseData.menu || responseData;
+
+    tool.data.set('MENU', menus)
+    if (responseData.permissions) {
+      tool.data.set('PERMISSIONS', responseData.permissions)
+    }
+
+    tool.data.set('DASHBOARDGRID', responseData?.dashboardGrid)
+
+    console.log('queryMenus', menus);
+    this.fixMenuPath(menus);
+    console.log('fixedMenus', menus)
+
+    const puzzleInfos = {};
+    menus.forEach(item => {
+      if (!item.appCode) {
+        return;
+      }
+      if (!puzzleInfos[item.appCode]) {
+        puzzleInfos[item.appCode] = {
+          puzzleCode: item.appCode,
+          menus: []
+        };
+      }
+      puzzleInfos[item.appCode].menus.push(item);
+    })
+    await this.assemblePuzzles(puzzleInfos, this.themeRootRoute);
+
+    // 替换 @arkxos/arkos-example
+    const exampleAppMenu = menus.find(item => item.appCode === '@arkxos/arkos-example')
+    const exampleAppMenuIndex = menus.indexOf(exampleAppMenu);
+    menus.splice(exampleAppMenuIndex, 1);
+
+    for (const puzzleCode in puzzleInfos) {
+      const puzzle = puzzleInfos[puzzleCode];
+      if (puzzle.staticMenus && puzzle.staticMenus.length > 0) {
+        this.fixMenuPath(puzzle.staticMenus);
+        menus.push(...puzzle.staticMenus)
+      }
+    }
+
+    systemStore().setMenus(menus);
+
+    return menus;
+  },
+  async assemblePuzzles (puzzleInfos, themeRootRoute) {
+    const pages = themeRootRoute.children;
+
+    // 尝试获取模块 / 异步获取
+    for (const puzzleCode in puzzleInfos) {
+      const puzzle = puzzleInfos[puzzleCode];
+      let puzzleLoader;
+      if (system.puzzleLoaders[puzzleCode]) {
+        puzzleLoader = system.puzzleLoaders[puzzleCode]
+      } else {
+        puzzleLoader = system.dynamicLoadModule
+      }
+      console.log('prepare load puzzle[' + puzzleCode + '], loader is ', puzzleLoader)
+      const p = await puzzleLoader('puzzles', puzzleCode, '', '')
+      {
+        console.log('load puzzle ' + puzzleCode, p)
+        console.log('import app[' + puzzle.puzzleCode + ']', p)
+
+        this.app.use(p)
+
+        // @ts-ignore
+        if (p.mockApis && window.ArkMock) {
+          // @ts-ignore
+          window.ArkMock.mockApiRequests(p.mockApis)
+        }
+
+        // 需要生成路由的菜单
+        // const flatMenus = [];
+        // // 扁平化授权的菜单，存储到 flatMenus
+        // handleMenus(puzzle.children, flatMenus);
+
+        // 路由
+        // const menuRoutes = [];
+        // if (p.staticRoutes) {
+        //   menuRoutes.push(...p.staticRoutes);
+        // }
+        let puzzleMenus = puzzle.menus; // 后台查询出来的模块菜单
+        if (puzzleCode === '@arkxos/arkos-example') {
+          puzzleMenus = p.staticMenus;
+        }
+        puzzle.staticMenus = p.staticMenus;
+
+        const menuRouter = this.filterAsyncRouter(puzzleMenus, null, p.loadComponent) || [];
+        // if (p.loadComponent) {
+        //   const routesFromMenu = p.buildRoute(flatMenus, puzzle.puzzleCode);
+        //   menuRoutes.push(...routesFromMenu);
+        // }
+        let allRouters = []
+        console.log('allRouters add staticRoutes', allRouters)
+        if (menuRouter && menuRouter.length > 0) {
+          allRouters.push(...menuRouter)
+        }
+        console.log('allRouters add menuRouter', allRouters)
+        allRouters = this.flatAsyncRoutes(menuRouter)
+        if (p.staticRoutes && p.staticRoutes.length > 0) {
+          allRouters.push(...p.staticRoutes)
+        }
+        console.log('allRouters after flatAsyncRoutes', allRouters)
+        allRouters.forEach(item => {
+          system.$router.addRoute('layout', item)
+        })
+
+        console.log('system.$router', system.$router.getRoutes())
+
+        // if (!themeRootRoute.children) {
+        //   themeRootRoute.children = []
+        // }
+        // themeRootRoute.children.push(...menuRoutes)
+
+        pages.push(...allRouters);
+
+        console.log('puzzle root route[' + puzzle.puzzleCode + ']', themeRootRoute)
+        // system.$router.addRoute(themeRootRoute);
+
+        // Store
+        for (const name in p.store) {
+          console.log('store name: ', name)
+          const userStore = p.store[name];
+          // execute user sotre will active the store
+          try {
+            userStore();
+          } catch (err) {
+            console.log(puzzle.id + ' store error，' + err)
+          }
+          //   this.$store.registerModule(name, p.store[name]);
+        }
+      }
+    }
+    // 储存路由表
+    // systemStore
+
+    const store = system.$pinia._s.get('arkOsPermission');
+    if (store) {
+      store.setPages(pages);
+    }
+    console.log('permission store', store)
+    console.log('system.$pinia', system.$pinia)
+    const store2 = system.$pinia._s.get('arkOsPermission');
+    console.log('permission store 2', store2)
+  },
+  // 转换
+  filterAsyncRouter(routerMap, parent, loadComponent) {
+    if (!routerMap) {
+      return null;
+    }
+    if (!Array.isArray(routerMap)) {
+      routerMap = [routerMap]
+    }
+    const accessedRouters = []
+    routerMap.forEach(item => {
+      item.meta = item.meta ? item.meta : {};
+      // 处理外部链接特殊路由
+      if (item.meta.type == 'iframe') {
+        item.meta.url = item.path;
+        item.path = `/i/${item.name}`;
+        item.meta.iframe = 'iframe'
+      }
+      // let path = parent ? (parent.path + '/' + item.path) : item.path
+      // console.log('route path: ', item.path)
+      // MAP转路由对象
+      const route = {
+        path: item.path,
+        query: item.query,
+        name: item.name,
+        meta: item.meta,
+        redirect: item.redirect,
+        children: item.children ? this.filterAsyncRouter(item.children, item, loadComponent) : null,
+        component: item.meta.type == 'iframe' ? null : loadComponent(item)
+      }
+      accessedRouters.push(route)
+    })
+    return accessedRouters
+  },
+  // 路由扁平化
+  flatAsyncRoutes(routes, breadcrumb = []) {
+    const res = []
+    routes.forEach(route => {
+      const tmp = { ...route }
+      if (tmp.children) {
+        const childrenBreadcrumb = [...breadcrumb]
+        childrenBreadcrumb.push(route)
+        const tmpRoute = { ...route }
+        tmpRoute.meta.breadcrumb = childrenBreadcrumb
+        delete tmpRoute.children
+        res.push(tmpRoute)
+        const childrenRoutes = this.flatAsyncRoutes(tmp.children, childrenBreadcrumb)
+        childrenRoutes.map(item => {
+          res.push(item)
+        })
+      } else {
+        const tmpBreadcrumb = [...breadcrumb]
+        tmpBreadcrumb.push(tmp)
+        tmp.meta.breadcrumb = tmpBreadcrumb
+        res.push(tmp)
+      }
+    })
+    return res
+  },
+  // installPlugin (plugin) {
+  //   // this.plugins.push(plugin);
+  //   this.app.use(plugin)
+  // },
+  async assembleTheme (themeInfo) {
+    console.log('load os theme ' + themeInfo.name)
+    const theme = await system.dynamicLoadModule('os-themes', themeInfo.name, themeInfo.host, themeInfo.version);
+
+    console.log('load theme after', theme)
+    // 路由注册
+    // console.log('this.$router.addRoute', this.$router.addRoute)
+    // this.$router.addRoute(...frame.routerStatic);
+    theme.routerStatic.forEach(item => {
+      this.staticRouters.push(item)
+      console.log('add route', item)
+    })
+    // Store 注册
+    for (const name in theme.store) {
+      const userStore = theme.store[name];
+      console.log('store name: ', name)
+      // execute user sotre will active the store
+      try {
+        userStore();
+      } catch (err) {
+        console.log(err)
+      }
+
+      //   this.$store.registerModule(name, frame.store[name]);
+    }
+    // 嵌套路由 / 默认两级路由
+    const themeRootRouteList = theme.routerStatic.filter(item => item.path == '/');
+    let themeRootRoute;
+    if (themeRootRouteList && themeRootRouteList.length > 0) {
+      themeRootRoute = themeRootRouteList[0];
+    }
+
+    this.themeRootRoute = themeRootRoute;
+
+    this.app.use(theme)
+
+    console.log('load theme finish', theme)
+
+    // system.$router.addRoute(themeRootRoute)
+    return themeRootRoute;
+  },
+}
+
+export default system

package/src/directive/authDirective.ts

@@ -0,0 +1,61 @@
+import type { App } from 'vue';
+import systemStore from '../store/modules/systemStore';
+import { judementSameArr, tool } from '@arkxos/arkos-util';
+import { hasPriv } from '../plugins/priv'
+
+/**
+ * 用户权限指令
+ * @directive 单个权限验证（v-auth="xxx"）
+ * @directive 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）
+ * @directive 多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）
+ */
+export function authDirective(app: App) {
+  // 单个权限验证（v-auth="xxx"）
+  app.directive('auth', {
+    mounted(el, binding) {
+      // 「其他角色」按钮权限校验
+      const { value } = binding;
+      if (!hasPriv(value)) {
+        el.parentNode && el.parentNode.removeChild(el);
+      }
+    }
+  });
+  // 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）
+  app.directive('auths', {
+    mounted(el, binding) {
+      if (!hasPriv(binding.value)) {
+        el.parentNode && el.parentNode.removeChild(el);
+      }
+    }
+  });
+  // 多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）
+  app.directive('auth-all', {
+    mounted(el, binding) {
+      const stores = systemStore();
+      const flag = judementSameArr(binding.value, stores.userInfo.permissions);
+      if (!flag) {
+        el.parentNode.removeChild(el);
+      }
+    },
+  });
+
+  // 角色权限
+  app.directive('roles', {
+    mounted(el, binding) {
+      const { value } = binding;
+      // const { roles } = useUserStore();
+      const roles = tool.data.get('roles');
+      if (value && value instanceof Array && value.length > 0) {
+        const hasRole = roles.some((role: string) => {
+          return role === 'admin' || value.includes(role);
+        });
+        if (!hasRole) {
+          el.parentNode && el.parentNode.removeChild(el);
+          return false;
+        }
+      } else {
+        throw new Error("check roles! Like v-has-roles=\"['admin','test']\"");
+      }
+    },
+  });
+}

package/src/directive/index.ts

@@ -0,0 +1,16 @@
+
+import { App } from 'vue';
+import { hasPriv } from '../plugins/priv'
+import { authDirective } from './authDirective';
+
+export const installPlugin = function (app: App) {
+  console.log('installPlugin priv')
+
+  // 用户权限指令
+  authDirective(app);
+
+  app.config.globalProperties.hasPriv = hasPriv;
+  app.config.globalProperties.hasAuthority = hasPriv;
+
+  console.log('app.config.globalProperties', app.config.globalProperties)
+};

package/src/entrance/libProperties.ts

@@ -0,0 +1,57 @@
+/*
+|--------------------------------------------------------------------------
+|
+| 这些组件暴露给使用方
+|
+|--------------------------------------------------------------------------
+*/
+import system from '../core/system'
+import router from '../core/router/router'
+import store from '../store';
+import systemStore from '../store/modules/systemStore'
+import request, { http, globalHeaders } from '../core/api/http'
+import config from '../core/config/index'
+import api from '../api'
+import { installPlugin } from '../directive/index'
+import accessPlugin from '../plugins/accessPlugin'
+import access from '../plugins/access'
+import { getToken, removeToken, setToken } from '../access/tokenStorage'
+import { LanguageEnum } from '../enums/LanguageEnum';
+import i18n from '../lang/index'
+import i18nBuilder from '../core/i18n/i18nBuilder'
+import emitter from '../utils/mitt';
+// import * as utils from "@arkxos/arkos-util/src/utils";
+import { useMessage, useMessageBox } from '../hooks/message';
+// system.init();
+// system.installPlugin(accessPlugin)
+
+export const comps = {
+  system,
+  installPlugin,
+  access,
+  accessPlugin,
+  router,
+  store,
+  systemStore,
+  request,
+  http,
+  globalHeaders,
+  config,
+  api,
+  getToken,
+  setToken,
+  removeToken,
+  LanguageEnum,
+  i18n,
+  i18nBuilder,
+
+  // tool
+  emitter,
+
+  // message
+  useMessage,
+  useMessageBox
+}
+export type LibProperties = typeof comps;
+
+export default comps

package/src/entrance/libTypes.ts

@@ -0,0 +1,47 @@
+/*
+|--------------------------------------------------------------------------
+|
+| 组件类型导出文件，同时也作为 rollup 的打包入口文件，因只提供类型，rollup 打包后是一个
+| 仅包含 hel-lib-proxy 的空壳文件，对模块使用方的包体构建大小无影响
+| 模块使用方 通过 npm i xxx-lib 后，只要在头文件处执行过 preFetchLib
+| 则整个项目项使用本地模块一样载入提供方的组件，并可以点击到 node_modules 查看源码
+|
+|--------------------------------------------------------------------------
+*/
+import type { LibProperties } from './libProperties';
+import { exposeLib } from '@arkxio/ark-lib-proxy';
+import { LIB_NAME } from '../configs/subApp';
+
+export const lib = exposeLib<LibProperties>(LIB_NAME);
+
+// suport writing: import { regs, num, myMod } from 'hel-tpl-remote-lib';
+export const {
+  system,
+  installPlugin,
+  access,
+  accessPlugin,
+  router,
+  store,
+  systemStore,
+  request,
+  http,
+  globalHeaders,
+  config,
+  api,
+  getToken,
+  setToken,
+  removeToken,
+  LanguageEnum,
+  i18n,
+  i18nBuilder,
+
+  emitter,
+
+  // message
+  useMessage,
+  useMessageBox
+} = lib;
+
+export type Lib = LibProperties;
+
+export default lib;

package/src/enums/LanguageEnum.ts

@@ -0,0 +1,5 @@
+export enum LanguageEnum {
+  zh_CN = 'zh-cn',
+
+  en_US = 'en_US'
+}

package/src/hooks/message.ts

@@ -0,0 +1,81 @@
+import { ElMessage, ElMessageBox } from 'element-plus';
+// import i18n from '../i18n';
+import i18n from '../lang/index'
+const { t } = i18n.global;
+
+interface MessageImplements {
+  info(title: string): void;
+  wraning(title: string): void;
+  success(title: string): void;
+  error(title: string): void;
+}
+
+export function useMessage() {
+  class MessageClass implements MessageImplements {
+    // 普通提示
+    info(title: string): void {
+      ElMessage.info(title);
+    }
+
+    // 警告提示
+    wraning(title: string): void {
+      ElMessage.warning(title);
+    }
+
+    // 成功提示
+    success(title: string): void {
+      ElMessage.success(title);
+    }
+
+    // 错误提示
+    error(title: string): void {
+      ElMessage.error(title);
+    }
+  }
+
+  return new MessageClass();
+}
+
+export function useMessageBox() {
+  class MessageBoxClass implements MessageImplements {
+    // 普通提示
+    info(msg: string): void {
+      ElMessageBox.alert(msg, t('message.box.title'));
+    }
+
+    // 警告提示
+    wraning(msg: string): void {
+      ElMessageBox.alert(msg, t('message.box.title'), { type: 'warning' });
+    }
+
+    // 成功提示
+    success(msg: string): void {
+      ElMessageBox.alert(msg, t('message.box.title'), { type: 'success' });
+    }
+
+    // 错误提示
+    error(msg: string): void {
+      ElMessageBox.alert(msg, t('message.box.title'), { type: 'error' });
+    }
+
+    // 确认窗体
+    confirm(msg: string) {
+      return ElMessageBox.confirm(msg, t('message.box.title'), {
+        confirmButtonText: t('common.confirmButtonText'),
+        cancelButtonText: t('common.cancelButtonText'),
+        type: 'warning',
+      });
+    }
+
+    // 提交内容
+    prompt(msg: string) {
+      return ElMessageBox.prompt(msg, t('message.box.title'), {
+        confirmButtonText: t('common.confirmButtonText'),
+        cancelButtonText: t('common.cancelButtonText'),
+        type: 'warning',
+      });
+    }
+  }
+
+  return new MessageBoxClass();
+}

package/src/lang/en_US.ts

@@ -0,0 +1,28 @@
+export default {
+  // 路由国际化
+  route: {
+    dashboard: 'Dashboard',
+    document: 'Document'
+  },
+  // 登录页面国际化
+  login: {
+    username: 'Username',
+    password: 'Password',
+    login: 'Login',
+    code: 'Verification Code',
+    copyright: ''
+  },
+  // 导航栏国际化
+  navbar: {
+    full: 'Full Screen',
+    language: 'Language',
+    dashboard: 'Dashboard',
+    document: 'Document',
+    message: 'Message',
+    layoutSize: 'Layout Size',
+    selectTenant: 'Select Tenant',
+    layoutSetting: 'Layout Setting',
+    personalCenter: 'Personal Center',
+    logout: 'Logout'
+  }
+};