@oinone/kunlun-vue-admin-layout 6.2.0

package/src/component/partner-switcher/service/impl/PartnerSwitcherServiceImpl.ts

@@ -0,0 +1,48 @@
+import { SYSTEM_MODULE_NAME } from '@oinone/kunlun-meta';
+import { GQL } from '@oinone/kunlun-request';
+import { SPI } from '@oinone/kunlun-spi';
+import { PartnerInfo, PartnerItem } from '../../typing';
+import { PartnerSwitcherService, PartnerSwitcherServiceToken } from '../PartnerSwitcherService';
+
+const SHOW_PARTNERS_MODEL_NAME = 'showPartners';
+
+export type QueryShowPartnersResult = {
+  partner: { code: string; name: string };
+  partnerList: { code: string; name: string }[];
+};
+
+@SPI.Service(PartnerSwitcherServiceToken)
+export class PartnerSwitcherServiceImpl implements PartnerSwitcherService {
+  public async queryPartnerInfo(): Promise<PartnerInfo | undefined> {
+    return GQL.query(SHOW_PARTNERS_MODEL_NAME, 'queryAllPartners')
+      .buildResponse((builder) => builder.parameter(['partner', ['code', 'name']], ['partnerList', ['code', 'name']]))
+      .request<QueryShowPartnersResult>(SYSTEM_MODULE_NAME.COMMON)
+      .then((data) => this.convert(data));
+  }
+
+  public async changePartner(target: PartnerItem): Promise<PartnerInfo | undefined> {
+    return GQL.mutation(SHOW_PARTNERS_MODEL_NAME, 'changePartner')
+      .buildRequest((builder) => {
+        builder.buildObjectParameter('currentPartner', (builder) => {
+          builder.stringParameter('code', target.id);
+          builder.stringParameter('name', target.name);
+        });
+      })
+      .buildResponse((builder) => builder.parameter(['partner', ['code', 'name']], ['partnerList', ['code', 'name']]))
+      .request<QueryShowPartnersResult>(SYSTEM_MODULE_NAME.COMMON)
+      .then((data) => this.convert(data));
+  }
+
+  protected convert(data: QueryShowPartnersResult): PartnerInfo | undefined {
+    const { partner, partnerList } = data;
+    if (partner && partner.code) {
+      return {
+        currentPartner: {
+          id: partner.code,
+          name: partner.name
+        },
+        partnerList: partnerList?.map((v) => ({ id: v.code, name: v.name })) || []
+      };
+    }
+  }
+}

package/src/component/partner-switcher/service/index.ts

@@ -0,0 +1,2 @@
+export * from './PartnerSwitcherService';
+export * from './impl/PartnerSwitcherServiceImpl';

package/src/component/partner-switcher/session/PartnerInfoSession.ts

@@ -0,0 +1,32 @@
+import { ServiceIdentifier } from '@oinone/kunlun-spi';
+import { PartnerInfo, PartnerItem } from '../typing';
+
+export interface PartnerInfoSession<T = unknown> {
+  /**
+   * 获取当前合作伙伴
+   */
+  getCurrentPartner(): PartnerItem | undefined;
+
+  /**
+   * 获取合作伙伴信息
+   */
+  getPartnerInfo(): PartnerInfo | undefined;
+
+  /**
+   * 设置当前合作伙伴信息
+   * @param target 合作伙伴信息
+   */
+  setPartnerInfo(target: PartnerInfo | undefined): void;
+
+  /**
+   * 获取当前合作伙伴存储信息
+   */
+  getCurrentPartnerStore(): T | undefined;
+
+  /**
+   * 清空当前合作伙伴存储信息
+   */
+  clear(): void;
+}
+
+export const PartnerInfoSessionToken = ServiceIdentifier<PartnerInfoSession>('PartnerInfoSession');

package/src/component/partner-switcher/session/impl/DefaultPartnerInfoSession.ts

@@ -0,0 +1,46 @@
+import { SPI } from '@oinone/kunlun-spi';
+import { PartnerInfo, PartnerItem } from '../../typing';
+import { PartnerInfoSession, PartnerInfoSessionToken } from '../PartnerInfoSession';
+
+export interface PartnerSessionStore {
+  sid: string | null | undefined;
+  lid: string | null | undefined;
+}
+
+@SPI.Service(PartnerInfoSessionToken)
+export class DefaultPartnerInfoSession implements PartnerInfoSession<PartnerSessionStore> {
+  private static readonly CACHE_KEY = 'pamirs_partner_id';
+
+  private partnerInfo: PartnerInfo | undefined;
+
+  public getCurrentPartner(): PartnerItem | undefined {
+    return this.getPartnerInfo()?.currentPartner;
+  }
+
+  public getPartnerInfo(): PartnerInfo | undefined {
+    return this.partnerInfo;
+  }
+
+  public setPartnerInfo(target: PartnerInfo | undefined): void {
+    if (target) {
+      sessionStorage.setItem(DefaultPartnerInfoSession.CACHE_KEY, target.currentPartner.id);
+      localStorage.setItem(DefaultPartnerInfoSession.CACHE_KEY, target.currentPartner.id);
+    } else {
+      this.clear();
+    }
+  }
+
+  public getCurrentPartnerStore(): PartnerSessionStore | undefined {
+    const sid = sessionStorage.getItem(DefaultPartnerInfoSession.CACHE_KEY);
+    const lid = localStorage.getItem(DefaultPartnerInfoSession.CACHE_KEY);
+    if (sid || lid) {
+      return { sid, lid };
+    }
+    return undefined;
+  }
+
+  public clear(): void {
+    sessionStorage.removeItem(DefaultPartnerInfoSession.CACHE_KEY);
+    localStorage.removeItem(DefaultPartnerInfoSession.CACHE_KEY);
+  }
+}

package/src/component/partner-switcher/session/index.ts

@@ -0,0 +1,2 @@
+export * from './impl/DefaultPartnerInfoSession';
+export * from './PartnerInfoSession';

package/src/component/partner-switcher/spi/PartnerSwitcherMaskEditor.ts

@@ -0,0 +1,24 @@
+import { DslDefinition } from '@oinone/kunlun-dsl';
+import { SPI } from '@oinone/kunlun-spi';
+import { PartnerSwitcherConfigManager } from '../../../config';
+import { MaskEditor, MaskEditorContext, MaskEditorToken, MaskEditService, MaskEditServiceToken } from '../../../spi';
+
+@SPI.Service(MaskEditorToken, { priority: 10 })
+export class PartnerSwitcherMaskEditor implements MaskEditor {
+  @SPI.Autowired(MaskEditServiceToken)
+  private maskEditService!: MaskEditService;
+
+  public edit(context: Readonly<MaskEditorContext>, dsl: DslDefinition): DslDefinition {
+    if (PartnerSwitcherConfigManager.isEnabled()) {
+      this.maskEditService
+        .findTopBarWidgets(dsl)
+        ?.splice(
+          0,
+          0,
+          this.maskEditService.generatorWidget('partner-switcher'),
+          this.maskEditService.generatorDivider()
+        );
+    }
+    return dsl;
+  }
+}

package/src/component/partner-switcher/spi/index.ts

@@ -0,0 +1 @@
+export * from './PartnerSwitcherMaskEditor';

package/src/component/partner-switcher/typing/index.ts

@@ -0,0 +1 @@
+export * from './partner';

package/src/component/partner-switcher/typing/partner.ts

@@ -0,0 +1,22 @@
+/**
+ * 合作伙伴项
+ */
+export interface PartnerItem {
+  id: string;
+  name: string;
+}
+
+/**
+ * 合作伙伴信息
+ */
+export interface PartnerInfo {
+  /**
+   * 当前合作伙伴
+   */
+  currentPartner: PartnerItem;
+
+  /**
+   * 可选合作伙伴列表
+   */
+  partnerList: PartnerItem[];
+}

package/src/component/quick-search/QuickSearch.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="search-content">
+    <a-spin :spinning="loading">
+      <a-input-search
+        class="oio-input"
+        :placeholder="dslNode.children[0] ? dslNode.children[0].placeHolderText : ''"
+        :value="searchText"
+        @change="onChange"
+        cleanable
+      />
+      <a-tree :tree-data="proxyTreeData" show-icon @select="onSelect" :loadData="loadData">
+        <template #icon="{ url }" v-if="showLogo">
+          <span class="custom-tree-node-logo" v-if="showLogo">
+            <!-- <div v-if="!url" class="logo-placeholder"></div> -->
+            <img v-if="url" :src="url" alt />
+          </span>
+        </template>
+      </a-tree>
+    </a-spin>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { Spin, Input, Tree } from 'ant-design-vue';
+
+export default defineComponent({
+  props: ['loading', 'dslNode', 'searchText', 'onChange', 'proxyTreeData', 'onSelect', 'showLogo', 'loadData'],
+  components: {
+    ASpin: Spin,
+    AInputSearch: Input,
+    ATree: Tree
+  }
+});
+</script>

package/src/component/quick-search/index.ts

@@ -0,0 +1,237 @@
+import { IModel } from '@oinone/kunlun-meta';
+import { queryPage } from '@oinone/kunlun-service';
+import { SPI } from '@oinone/kunlun-spi';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { MaskWidget } from '../../basic';
+import QuickSearchComponent from './QuickSearch.vue';
+
+interface ITreeNode {
+  title: string;
+  key: string;
+  children: ITreeNode[];
+  isLeaf: boolean;
+  url?: string;
+  slots?: {
+    icon: string;
+  };
+}
+
+@SPI.ClassFactory(MaskWidget.Token({ widget: 'quick-search' }))
+export class QuickSearch extends MaskWidget {
+  @Widget.Reactive()
+  private rawData: Record<string, unknown>[] = [];
+
+  @Widget.Reactive()
+  private showLogo = false;
+
+  @Widget.Reactive()
+  private searchCondition = '';
+
+  @Widget.Reactive()
+  private model!: IModel;
+
+  @Widget.Reactive()
+  private isLazyLoad: boolean = false;
+
+  public initialize(props) {
+    super.initialize(props);
+    const { showLogo = false, isLazyLoad = true } = props.dslNode || {};
+    this.showLogo = showLogo as boolean;
+    this.isLazyLoad = isLazyLoad;
+
+    this.setComponent(QuickSearchComponent);
+    return this;
+  }
+
+  private async loadTreeData(parentCode: string = '') {
+    const field = this.model.modelFields.find((mf) => mf.name === this.getDsl().name)!;
+    let condition = 'parentCode=isnull=true';
+    if (parentCode) {
+      condition = `parentCode==${parentCode}`;
+    }
+    const data = (
+      await queryPage(field.references!, { pageSize: 100, condition }, undefined, undefined, {
+        maxDepth: 0
+      })
+    ).content;
+    const { labelKey, valueKey } = this.getDsl().children[0];
+    return data.map((d) => {
+      return {
+        ...d,
+        title: d[labelKey] as string,
+        key: d[valueKey] as string,
+        children: [],
+        isLeaf: d.hasChild === undefined ? false : !d.hasChild
+      };
+    });
+  }
+
+  private mergeTreeNode(node, data) {
+    if (node.id === data.id) {
+      return {
+        ...data,
+        ...node
+      };
+    }
+    if (data.children && data.children.length) {
+      data.children = data.children.map((d) => {
+        return this.mergeTreeNode(node, d);
+      });
+      return data;
+    }
+    return data;
+  }
+
+  @Widget.Method()
+  private async loadData(node) {
+    const code = node.dataRef.code;
+    const children = await this.loadTreeData(code);
+    this.rawData = this.rawData.concat(children);
+    if (children.length) {
+      node.dataRef.children = [...children];
+      this.treeData = this.treeData.map((data) => {
+        return this.mergeTreeNode(node.dataRef, data);
+      });
+    }
+  }
+
+  public async loadMetadata(model: IModel) {
+    this.model = model;
+  }
+
+  public async mounted() {
+    super.mounted();
+    if (this.isLazyLoad) {
+      this.rawData = await this.loadTreeData();
+      this.treeData = this.rawData as any;
+    } else {
+      const field = this.model.modelFields.find((mf) => mf.name === this.getDsl().name)!;
+      this.rawData = (
+        await queryPage(
+          field.references!,
+          { pageSize: 100, condition: 'parentCode=isnull=true' },
+          undefined,
+          undefined,
+          {
+            maxDepth: 0
+          }
+        )
+      ).content;
+      this.treeData = this.buildTree(null);
+    }
+  }
+
+  @Widget.Reactive()
+  private treeData: ITreeNode[] = [];
+
+  private isLeaf(key) {
+    return !this.rawData.find((d) => {
+      const parent = d[this.getDsl().children[0].parentKey as string] as Record<string, unknown>;
+      return parent && parent[this.getDsl().children[0].valueKey as string] === key;
+    });
+  }
+
+  private resolveRsql(data: Record<string, unknown>) {
+    return this.getDsl().children[0].rsql;
+  }
+
+  @Widget.Method()
+  private onSelect(selectKeys: string[]) {
+    const data = this.rawData.find((d) => d[this.getDsl().children[0].valueKey as string] === selectKeys[0]);
+
+    if (data) {
+      const keys: string[] = [];
+      const values: any[] = [];
+
+      for (const key in data) {
+        if (data.hasOwnProperty(key)) {
+          keys.push(key);
+          values.push(data[key]);
+        }
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-implied-eval
+      const fun = new Function(...keys, `return \`${this.getDsl().children[0].rsql}\``);
+      this.searchCondition = fun.call(null, ...values);
+      // fixme @zbh 20230417 改版
+      // this.reload$.subject.next(this.searchCondition);
+    } else {
+      this.searchCondition = '';
+      // this.reload$.subject.next(this.searchCondition);
+    }
+  }
+
+  public getSearchCondition(): string {
+    return this.searchCondition;
+  }
+
+  @Widget.Reactive()
+  private get proxyTreeData() {
+    const isShowNode = (node: ITreeNode) => {
+      if (node.title.indexOf(this.searchText) !== -1) {
+        return true;
+      }
+      if (!node.children.length) {
+        return false;
+      }
+      return node.children.map((c) => isShowNode(c)).includes(true);
+    };
+
+    const filterNode = (node: ITreeNode, arr: ITreeNode[]) => {
+      if (isShowNode(node)) {
+        const rnode: ITreeNode = { ...node, children: [], slots: { icon: 'icon' } };
+        arr.push(rnode);
+        node.children.forEach((c) => filterNode(c, rnode.children));
+      }
+    };
+
+    const res: ITreeNode[] = [];
+    this.treeData.forEach((td) => filterNode(td, res));
+    return res;
+  }
+
+  @Widget.Reactive()
+  private searchText = '';
+
+  @Widget.Method()
+  private onChange(e) {
+    this.searchText = e.target.value;
+  }
+
+  private buildTree(node: ITreeNode | null) {
+    const result: ITreeNode[] = [];
+    if (!node) {
+      this.rawData
+        .filter((d) => d[this.getDsl().children[0].parentKey as string] === undefined)
+        .forEach((d) =>
+          result.push({
+            title: d[this.getDsl().children[0].labelKey as string] as string,
+            key: d[this.getDsl().children[0].valueKey as string] as string,
+            children: [],
+            isLeaf: false,
+            url: (d.logo as any) ? (d.logo as any).url : ''
+          })
+        );
+    } else {
+      this.rawData
+        .filter((d) => {
+          const parent = d[this.getDsl().children[0].parentKey as string] as Record<string, unknown>;
+          return parent && parent[this.getDsl().children[0].valueKey as string] === node.key;
+        })
+        .forEach((d) =>
+          result.push({
+            title: d[this.getDsl().children[0].labelKey as string] as string,
+            key: d[this.getDsl().children[0].valueKey as string] as string,
+            children: [],
+            isLeaf: false,
+            url: (d.logo as any) ? (d.logo as any).url : ''
+          })
+        );
+    }
+    result.forEach((r) => (r.children = this.buildTree(r)));
+    if (result.length === 0) {
+      node && (node.isLeaf = true);
+    }
+    return result;
+  }
+}

package/src/component/style/index.scss

@@ -0,0 +1,4 @@
+@import './layout.scss';
+@import '../menu/style/index.scss';
+
+@import '../multi-tabs/style/index.scss';

package/src/component/style/layout.scss

@@ -0,0 +1,229 @@
+.k-container {
+  height: 100vh;
+  overflow: hidden;
+}
+
+.k-layout * {
+  box-sizing: border-box;
+}
+
+.k-layout-sidebar-horizontal {
+  flex: 1;
+  overflow: hidden;
+  width: 100%;
+}
+
+.k-layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+  overflow: auto;
+
+  &.k-layout-row {
+    flex-direction: row;
+  }
+
+  &-mask {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+
+    &.collapsed {
+      .k-oinone-application {
+        width: 80px;
+      }
+
+      .logo-background {
+        margin-left: 0px !important;
+        background-position: center !important;
+      }
+
+      .k-oinone-menu-wrapper {
+        width: 80px;
+      }
+
+      .app-name {
+        font-size: 16px !important;
+        color: var(--oio-text-color) !important;
+        letter-spacing: 0.57px !important;
+        text-align: right !important;
+        font-weight: 500;
+        overflow: initial;
+
+        svg {
+          font-size: 12px;
+          color: var(--oio-icon-color);
+        }
+      }
+
+      .designer-app-switcher {
+        width: 100px;
+      }
+
+      .logo-area {
+        margin-left: 0px !important;
+        background-position: center !important;
+      }
+
+      .designer-app-switcher-label {
+        svg {
+          font-size: 12px !important;
+          color: rgba(0, 0, 0, 0.25) !important;
+        }
+
+        .app-name {
+          font-size: 16px;
+          color: rgba(0, 0, 0, 0.85);
+          letter-spacing: 0.57px;
+          text-align: right;
+          font-weight: 500;
+
+          svg {
+            font-size: 12px;
+            color: rgba(0, 0, 0, 0.25);
+          }
+        }
+      }
+    }
+  }
+
+  &-header,
+  &-sider {
+    flex: none;
+  }
+
+  &-header {
+    height: 48px;
+    display: flex;
+    justify-content: space-between;
+    background: var(--oio-background);
+    align-items: center;
+    font-size: 14px;
+    user-select: none;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.06);
+    position: relative;
+
+    .k-layout-widget,
+    .k-layout-block {
+      height: 100%;
+    }
+
+    .k-layout-block {
+      align-items: center;
+    }
+  }
+
+  &-container {
+    flex: 1;
+    display: flex;
+    overflow: auto;
+  }
+
+  &-widget {
+    & > div {
+      height: 100%;
+    }
+
+    &:has(.view-height-loading-wrapper) {
+      position: relative;
+
+      .view-height-loading-wrapper {
+        position: absolute;
+        width: 100%;
+      }
+    }
+  }
+
+  &-lang {
+    display: flex;
+    align-items: center;
+    line-height: 48px;
+    cursor: pointer;
+
+    span {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      color: var(--oio-header-color);
+    }
+
+    .oio-icon {
+      display: flex;
+      align-items: center;
+    }
+
+    .anticon-caret-down {
+      margin-left: 10px;
+    }
+  }
+
+  &-extra-btn {
+    position: relative;
+    display: flex;
+
+    .btn {
+      display: flex;
+      align-items: center;
+      padding: 0 10px;
+      margin: 0 5px;
+      cursor: pointer;
+
+      .oio-icon {
+        // color: var(--oio-default-icon-color);
+      }
+    }
+
+    .msg-text {
+      margin-left: 10px;
+      color: var(--oio-header-color);
+    }
+  }
+
+  &-block {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  &-sider {
+    overflow-y: auto;
+    border-right: solid 1px #eee;
+  }
+
+  &-sider::-webkit-scrollbar {
+    display: none;
+  }
+
+  &-content {
+    flex: auto;
+    overflow: auto;
+    background: var(--oio-body-background);
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--oio-padding-sm);
+    padding: var(--oio-padding-lg);
+
+    & > * {
+      flex-grow: 0;
+      flex-shrink: 0;
+
+      &:last-child {
+        flex-grow: 1;
+        flex-shrink: 1;
+      }
+    }
+  }
+}
+
+.k-language-dropdown {
+  background-color: var(--oio-background);
+
+  .ant-dropdown-menu-item,
+  .ant-dropdown-menu-submenu-title {
+    color: var(--oio-text-color);
+
+    &:hover {
+      color: var(--oio-hover-text-color);
+    }
+  }
+}