@oinone/kunlun-vue-admin-layout 6.2.0

package/src/component/app-switcher/AppSwitcherMask.vue

@@ -0,0 +1,237 @@
+<template>
+  <div
+    :class="['application-mask-container', hideMask && 'application-mask-container-hide']"
+    :style="{
+      'background-image': `url(${genStaticPath('背景1_1650609329143.png')})`
+    }"
+    @click.stop="onClose"
+  >
+    <div class="application-mask-close" @click.stop="onClose">
+      <i class="iconfont oinone-fanhui"></i>
+    </div>
+    <div
+      class="mask-container"
+      @click.stop="onClose"
+      :style="{
+        'background-image': `url(${genStaticPath('背景_1651138497267.png')})`
+      }"
+    >
+      <img class="application-mask-container-watermark" :src="genStaticPath('app-finder-bg.png')" />
+      <div class="mask-content" v-if="!showSearch">
+        <div class="application-collection" @click.stop v-if="likeApp && likeApp.length && !showSearch">
+          <div class="common-title">{{ translateValueByKey('我收藏的应用') }}</div>
+          <div class="application-collection-list collection-list-content">
+            <div
+              class="application-collection-item animation"
+              v-for="(item, index) in likeApp"
+              :key="index"
+              @click.stop="$emit('update:showMask', false), onCollectionClick(item)"
+            >
+              <div style="width: 70px; height: 70px">
+                <img :src="item.logo || DEFAULT_APPLICATION_LOGO()" alt="" />
+              </div>
+              <div class="text">{{ item.displayName || item.name }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="application-tabs" :class="!likeApp.length && 'application-tabs-fast'">
+          <div class="tabs" @click.stop>
+            <div
+              class="common-title tab"
+              v-if="hasBusiness"
+              @click.stop="active = 0"
+              :class="[active === 0 && 'active']"
+            >
+              {{ translateValueByKey('业务应用') }}
+            </div>
+            <div
+              class="common-title tab"
+              v-if="hasDesigner"
+              @click.stop="active = 1"
+              :class="[active === 1 && 'active']"
+            >
+              {{ translateValueByKey('设计器') }}
+            </div>
+          </div>
+          <div
+            class="application-collection-list"
+            @click.stop
+            :class="!likeApp.length && 'application-collection-list-fast'"
+          >
+            <div
+              class="application-collection-item animation"
+              v-for="app of currentApps"
+              :key="app.id"
+              @click.stop="onJump(app)"
+            >
+              <div style="width: 70px; height: 70px">
+                <img :src="app.logo || genStaticPath('default.png')" alt="" />
+              </div>
+              <div class="text">{{ app.displayName || app.name }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="search-icon" @click.stop="onSwitchSearch" v-if="!showSearch">
+        <oio-icon icon="oinone-sousuo" size="16" color="#fff"></oio-icon>
+      </div>
+      <div class="search-content" v-if="showSearch">
+        <div class="search-wrapper" @click.stop>
+          <oio-icon class="left-icon" icon="oinone-sousuo" size="16" color="#fff"></oio-icon>
+          <input type="text" v-model="searchValue" ref="searchInputNode" />
+          <oio-icon
+            class="right-icon"
+            icon="oinone-qingchu"
+            size="16"
+            v-if="searchValue"
+            @click="searchValue = ''"
+          ></oio-icon>
+        </div>
+
+        <div class="application-collection-list" style="margin-top: 24px; width: 100%">
+          <div
+            class="application-collection-item animation"
+            v-for="app of searchApps"
+            :key="app.id"
+            @click.stop="onJump(app)"
+          >
+            <div style="width: 70px; height: 70px">
+              <img :src="app.logo || DEFAULT_APPLICATION_LOGO()" alt="" />
+            </div>
+            <div class="text">{{ app.displayName || app.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { genStaticPath, translateValueByKey } from '@oinone/kunlun-engine';
+import { IModule } from '@oinone/kunlun-meta';
+import { OioIcon } from '@oinone/kunlun-vue-ui-antd';
+
+import { computed, defineComponent, nextTick, PropType, ref, watch } from 'vue';
+import { DEFAULT_APPLICATION_LOGO } from '../../typing';
+
+export default defineComponent({
+  name: 'AppSwitcherMask',
+  props: {
+    apps: {
+      type: Array as PropType<IModule[]>
+    },
+    likeApp: {
+      type: Array as PropType<IModule[]>
+    },
+    onCollectionClick: {
+      type: Function,
+      required: true
+    },
+    genStaticPath: {
+      type: Function,
+      default: genStaticPath
+    },
+    showMask: {
+      type: Boolean
+    }
+  },
+  emits: ['update:showMask', 'switch-app'],
+  components: {
+    OioIcon
+  },
+  setup(props, { emit }) {
+    const active = ref(0);
+    const searchValue = ref('');
+    const showSearch = ref(false);
+    const searchInputNode = ref<HTMLInputElement>(null as any);
+    const internalHideMask = ref(false);
+    const hideMask = computed<boolean>({
+      get: () => {
+        return internalHideMask.value || !props.showMask;
+      },
+      set: (val) => {
+        internalHideMask.value = val;
+      }
+    });
+
+    const searchApps = computed(() => {
+      return searchValue.value ? props.apps?.filter((a: any) => a.displayName.includes(searchValue.value)) : [];
+    });
+
+    const onSwitchSearch = () => {
+      showSearch.value = true;
+
+      nextTick(() => {
+        searchInputNode.value.focus();
+      });
+    };
+
+    const onJump = (app) => {
+      emit('update:showMask', false);
+      emit('switch-app', app);
+    };
+
+    const onClose = () => {
+      if (showSearch.value === true) {
+        showSearch.value = false;
+      } else {
+        hideMask.value = true;
+
+        const t = setTimeout(() => {
+          hideMask.value = false;
+          emit('update:showMask', false);
+          clearTimeout(t);
+        }, 400);
+      }
+    };
+
+    const designerCategory = ['BUSINESS_PROCESS', 'USER_EXPERIENCE'];
+
+    const hasDesigner = computed(() => {
+      return props.apps?.find((a: any) => designerCategory.includes(a.category));
+    });
+
+    const hasBusiness = computed(() => props.apps?.find((a: any) => !designerCategory.includes(a.category)));
+
+    const currentApps = computed(() => {
+      if (active.value === 0) {
+        return props.apps?.filter((a: any) => !designerCategory.includes(a.category));
+      }
+
+      return props.apps?.filter((a: any) => designerCategory.includes(a.category));
+    });
+
+    watch(
+      () => props.showMask,
+      (val) => {
+        if (val) {
+          if (!hasBusiness.value && active.value === 0) {
+            active.value = 1;
+          }
+        }
+      },
+      {
+        deep: true
+      }
+    );
+
+    return {
+      DEFAULT_APPLICATION_LOGO,
+
+      hasBusiness,
+      hideMask,
+      active,
+      searchValue,
+      currentApps,
+      showSearch,
+      searchApps,
+      searchInputNode,
+      hasDesigner,
+      onSwitchSearch,
+      onJump,
+      onClose,
+      translateValueByKey
+    };
+  }
+});
+</script>

package/src/component/app-switcher/AppSwitcherWidget.ts

@@ -0,0 +1,152 @@
+import {
+  $systemMajorConfig,
+  getMajorConfigByModuleModule,
+  MajorConfig,
+  ModuleCache,
+  ReloadMaskCallChainingParameters,
+  setDefaultMajorConfig,
+  systemMajorConfig
+} from '@oinone/kunlun-engine';
+import { GlobalConfig, IModule } from '@oinone/kunlun-meta';
+import { Router } from '@oinone/kunlun-router';
+import { SPI } from '@oinone/kunlun-spi';
+import { useRouter } from '@oinone/kunlun-vue-router';
+import { Widget, WidgetSubjection } from '@oinone/kunlun-vue-widget';
+import { MaskWidget } from '../../basic';
+import { ModuleService } from '../../service';
+import { appFinderSymbol, MenuCollapsedSymbol } from '../../typing';
+import { gotoHomepage } from '../../util/HomepageUtils';
+import AppSwitcher from './AppSwitcher.vue';
+
+@SPI.ClassFactory(
+  MaskWidget.Token({
+    widget: 'app-switcher'
+  })
+)
+export class AppSwitcherWidget extends MaskWidget {
+  protected router!: Router;
+
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(AppSwitcher);
+    return this;
+  }
+
+  @Widget.SubContext(appFinderSymbol)
+  private reloadAppFinder$!: WidgetSubjection<boolean>;
+
+  /**
+   * 当前应用列表
+   * @protected
+   */
+  @Widget.Reactive()
+  protected apps: IModule[] | undefined;
+
+  /**
+   * 收藏应用列表
+   * @protected
+   */
+  @Widget.Reactive()
+  protected get likeApp(): IModule[] {
+    return this.apps?.filter((v) => v.like).slice(0, 12) || [];
+  }
+
+  @Widget.Reactive()
+  protected module: IModule | undefined;
+
+  @Widget.Reactive()
+  protected majorConfig = {} as MajorConfig;
+
+  @Widget.Reactive()
+  public logo = systemMajorConfig.logo;
+
+  @Widget.Reactive()
+  public collapsedLogo = systemMajorConfig.appSideLogo;
+
+  @Widget.Reactive()
+  protected currentPageUrl = {};
+
+  @Widget.Reactive()
+  protected collapsed = false;
+
+  @Widget.SubContext(MenuCollapsedSymbol, false)
+  protected collapsed$!: WidgetSubjection<boolean>;
+
+  @Widget.Method()
+  protected async onCollectionClick(item) {
+    const module = this.apps?.find((a) => a.module === item.module);
+    if (module) {
+      await this.onSwitchApp(module);
+    }
+  }
+
+  @Widget.Method()
+  protected async onSwitchApp(app: IModule) {
+    if (this.module?.module === app.module) {
+      return;
+    }
+    const oldModule = this.module;
+    this.module = app;
+
+    const { module, name: moduleName } = app;
+
+    const needRoute = await gotoHomepage(module, moduleName, app.urlHomePage, this.router);
+    if (!needRoute) {
+      this.module = oldModule;
+    }
+  }
+
+  protected async initApps() {
+    if (!this.apps) {
+      this.apps = await ModuleService.queryApplications();
+    }
+  }
+
+  protected async initCurrentModule(moduleName: string): Promise<boolean> {
+    if (this.module?.name === moduleName) {
+      return false;
+    }
+    const currentModule = this.apps!.find((v) => v.name === moduleName);
+    if (currentModule == null) {
+      this.module = await ModuleCache.get(moduleName);
+      return true;
+    }
+    this.module = currentModule;
+    return true;
+  }
+
+  protected reloadMaskProcess(reloadParameters: ReloadMaskCallChainingParameters) {
+    const { module } = reloadParameters;
+    return this.initApps().then(async () => {
+      if (await this.initCurrentModule(module)) {
+        this.majorConfig = await getMajorConfigByModuleModule(this.module?.module || '');
+        const { loginLogo } = GlobalConfig.getConfig();
+        const { loginPageLogo } = setDefaultMajorConfig(this.majorConfig, 'appSwitch');
+        this.majorConfig.loginPageLogo = loginLogo || loginPageLogo;
+      }
+    });
+  }
+
+  protected $$mounted() {
+    super.$$mounted();
+    this.router = useRouter().router;
+    this.collapsed$.subscribe((val) => {
+      this.collapsed = val;
+    });
+
+    this.currentPageUrl = this.getUrlParameters();
+
+    $systemMajorConfig.subscribe((config) => {
+      const { logo, appSideLogo } = config;
+      this.logo = logo;
+      this.collapsedLogo = appSideLogo;
+    });
+
+    /**
+     * 应用中心新建应用的时候，需要重新加载应用
+     */
+    this.reloadAppFinder$.subscribe(async () => {
+      this.apps = await ModuleService.queryApplications();
+    });
+  }
+}

package/src/component/app-switcher/index.ts

@@ -0,0 +1,3 @@
+export { default as AppSwitcher } from './AppSwitcher.vue';
+export { default as AppSwitcherMask } from './AppSwitcherMask.vue';
+export * from './AppSwitcherWidget';

package/src/component/breadcrumb/BreadcrumbWidget.ts

@@ -0,0 +1,167 @@
+import {
+  BreadcrumbConfigManager,
+  executeViewAction,
+  generatorViewActionQueryParameter,
+  ReloadMaskCallChainingParameters,
+  RuntimeViewAction,
+  ViewActionCache
+} from '@oinone/kunlun-engine';
+import { Matched, Router, useMatched } from '@oinone/kunlun-router';
+import { BooleanHelper, Optional, TreeNode } from '@oinone/kunlun-shared';
+import { SPI } from '@oinone/kunlun-spi';
+import { useRouter } from '@oinone/kunlun-vue-router';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { MaskWidget } from '../../basic';
+import { MenuService, ModuleService } from '../../service';
+import { MenuUrlParameters, RuntimeMenu } from '../../typing';
+import DefaultBreadcrumb from './DefaultBreadcrumb.vue';
+
+@SPI.ClassFactory(
+  MaskWidget.Token({
+    dslNodeType: 'breadcrumb'
+  })
+)
+export class BreadcrumbWidget extends MaskWidget {
+  protected router!: Router;
+
+  protected matched!: Matched;
+
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(DefaultBreadcrumb);
+    return this;
+  }
+
+  @Widget.Reactive()
+  protected moduleName: string | undefined;
+
+  @Widget.Reactive()
+  protected menuNodes: TreeNode<RuntimeMenu>[] = [];
+
+  @Widget.Reactive()
+  protected currentViewTitle: string | undefined;
+
+  @Widget.Reactive()
+  protected items: RuntimeMenu[] = [];
+
+  @Widget.Method()
+  public executeAction(action: RuntimeViewAction) {
+    executeViewAction(action, this.router, useMatched().matched, {
+      id: '',
+      context: '',
+      searchBody: '',
+      searchConditions: ''
+    });
+  }
+
+  @Widget.Reactive()
+  protected get enabledHomepage() {
+    return Optional.ofNullable(BreadcrumbConfigManager.getHomepageConfig().enabled)
+      .map(BooleanHelper.toBoolean)
+      .orElse(true);
+  }
+
+  @Widget.Method()
+  public async onHomepage() {
+    const homepage = await ViewActionCache.getHomepage();
+    if (!homepage) {
+      throw new Error('Invalid homepage.');
+    }
+    this.router.push({
+      segments: [
+        {
+          path: 'page',
+          extra: { preserveParameter: false },
+          parameters: generatorViewActionQueryParameter(homepage, { usingLastedUrlParameters: false })
+        }
+      ]
+    });
+  }
+
+  /**
+   * 在模块发生改变时调用
+   * @param moduleName 模块名称
+   * @protected
+   */
+  protected async onModuleChange(moduleName: string) {
+    if (moduleName === this.moduleName) {
+      return;
+    }
+    this.moduleName = moduleName;
+    this.menuNodes = await this.fetchMenuNodes(moduleName);
+  }
+
+  /**
+   * 根据模块名称获取菜单
+   * @param moduleName 模块名称
+   * @protected
+   */
+  protected async fetchMenuNodes(moduleName: string): Promise<TreeNode<RuntimeMenu>[]> {
+    const menus = (await MenuService.queryMenus(moduleName)) as RuntimeMenu[];
+    return MenuService.convert(menus);
+  }
+
+  protected async refreshItems(
+    model: string,
+    action: string,
+    parameters: MenuUrlParameters | undefined
+  ): Promise<void> {
+    let selectedMenuItem: TreeNode<RuntimeMenu> | undefined;
+    if (parameters) {
+      const { selectedKeys } = parameters;
+      const lastedSelectKey = selectedKeys[selectedKeys.length - 1];
+      if (lastedSelectKey) {
+        selectedMenuItem = MenuService.findSelectedMenuItemByKey(this.menuNodes, lastedSelectKey);
+      }
+    } else {
+      selectedMenuItem = MenuService.findSelectedMenuItemByAction(this.menuNodes, action);
+    }
+    if (!selectedMenuItem) {
+      this.items = [];
+      return;
+    }
+    let items: RuntimeMenu[] = [];
+    let currentNode: TreeNode<RuntimeMenu> | undefined = selectedMenuItem;
+    while (currentNode) {
+      items = [currentNode.value!, ...items];
+      currentNode = currentNode.parent;
+    }
+    this.items = items;
+  }
+
+  protected async refreshViewTitle(model: string, action: string): Promise<void> {
+    const viewAction = await ViewActionCache.get(model, action);
+    // 菜单上的action不重复显示菜单名称和视图名称
+    if (viewAction && viewAction.name !== this.items[this.items.length - 1]?.viewAction?.name) {
+      this.currentViewTitle = ModuleService.generatorViewTitle(viewAction);
+    } else {
+      this.currentViewTitle = '';
+    }
+  }
+
+  protected async reloadMaskProcess(reloadParameters: ReloadMaskCallChainingParameters) {
+    if (!BreadcrumbConfigManager.isEnabled()) {
+      return;
+    }
+    const { module, model, action, currentPage } = reloadParameters;
+    await this.onModuleChange(module);
+
+    let menuUrlParameters: MenuUrlParameters | undefined;
+    if (currentPage) {
+      const menu = currentPage.menu as string;
+      if (menu) {
+        menuUrlParameters = JSON.parse(menu);
+      }
+    }
+    await Promise.allSettled([
+      this.refreshItems(model, action, menuUrlParameters),
+      this.refreshViewTitle(model, action)
+    ]);
+  }
+
+  protected $$mounted() {
+    super.$$mounted();
+    this.matched = useMatched().matched;
+    this.router = useRouter().router;
+  }
+}

package/src/component/breadcrumb/DefaultBreadcrumb.vue

@@ -0,0 +1,95 @@
+<script lang="ts">
+import { IMenu } from '@oinone/kunlun-meta';
+import { Breadcrumb as ABreadcrumb, BreadcrumbItem as ABreadcrumbItem } from 'ant-design-vue';
+import { createVNode, defineComponent, PropType, VNode } from 'vue';
+import { translateValueByKey } from '@oinone/kunlun-engine';
+
+export default defineComponent({
+  name: 'DefaultBreadcrumb',
+  components: {
+    ABreadcrumb,
+    ABreadcrumbItem
+  },
+  inheritAttrs: false,
+  props: {
+    items: {
+      type: Array as PropType<IMenu[]>
+    },
+    enabledHomepage: {
+      type: Boolean,
+      default: undefined
+    },
+    model: {
+      type: String
+    },
+    action: {
+      type: String
+    },
+    currentViewTitle: {
+      type: String
+    },
+    translate: {
+      type: Function
+    },
+    executeAction: {
+      type: Function
+    },
+    onHomepage: {
+      type: Function
+    }
+  },
+  render() {
+    if (!this.items?.length) {
+      return [];
+    }
+    const children: VNode[] = [];
+    const breadcrumbChildren: VNode[] = [];
+    if (this.enabledHomepage) {
+      breadcrumbChildren.push(
+        createVNode(
+          ABreadcrumbItem,
+          {},
+          {
+            default: () => [
+              createVNode(
+                'span',
+                {
+                  class: 'breadcrumb-allow-click',
+                  onClick: () => this.onHomepage?.()
+                },
+                this.translate?.('kunlun.breadcrumbs.index')
+              )
+            ]
+          }
+        )
+      );
+    }
+    this.items.forEach((item, index) => {
+      let content: string | VNode[];
+      const { viewAction } = item;
+      if (!viewAction || (viewAction.model === this.model && viewAction.name === this.action)) {
+        content = item.displayName;
+      } else {
+        content = [
+          createVNode(
+            'span',
+            {
+              class: 'breadcrumb-allow-click',
+              onClick: () => this.executeAction?.(viewAction, index)
+            },
+            item.displayName
+          )
+        ];
+      }
+      breadcrumbChildren.push(createVNode(ABreadcrumbItem, { key: index }, { default: () => content }));
+    });
+    if (this.currentViewTitle) {
+      breadcrumbChildren.push(
+        createVNode(ABreadcrumbItem, {}, { default: () => translateValueByKey(this.currentViewTitle) })
+      );
+    }
+    children.push(createVNode(ABreadcrumb, {}, { default: () => breadcrumbChildren }));
+    return createVNode('div', { class: 'k-tool-bread' }, children);
+  }
+});
+</script>

package/src/component/breadcrumb/index.ts

@@ -0,0 +1,2 @@
+export { default as DefaultBreadcrumb } from './DefaultBreadcrumb.vue';
+export * from './BreadcrumbWidget';

package/src/component/debug/Debug.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="oio-debug">
+    <oio-button type="link" @click="onClick">{{ $translate('调试') }}</oio-button>
+  </div>
+</template>
+<script lang="ts">
+import { OioButton } from '@oinone/kunlun-vue-ui-antd';
+import { defineComponent, PropType } from 'vue';
+
+export default defineComponent({
+  name: 'Debug',
+  components: {
+    OioButton
+  },
+  inheritAttrs: false,
+  props: {
+    onClick: {
+      type: Function as PropType<() => void>
+    }
+  }
+});
+</script>
+<style lang="scss">
+.oio-debug {
+  display: flex;
+  align-items: center;
+}
+</style>