@oinone/kunlun-vue-admin-layout 6.2.0

package/dist/types/src/utils.d.ts

@@ -0,0 +1,86 @@
+import { RuntimeModel } from '@oinone/kunlun-engine';
+import { Entity, IModel, isPromise } from '@oinone/kunlun-meta';
+import { Condition } from '@oinone/kunlun-request';
+declare const filterRsql: (searchValue: string) => string;
+declare const getCondition: (model: IModel | null, content: Record<string, unknown>, extraContent?: {}, extraConditions?: {
+    leftValue: string[];
+    operator: string;
+    right: unknown;
+}[]) => Condition;
+/**
+ * 构造下拉框的搜索条件
+ * @param model 关联模型
+ * @param searchFieldName 搜索的字段名，可以是逗号分隔的多个字段
+ * @param searchValue 搜索的值
+ * @param domain 限定条件
+ */
+declare const buildSelectSearchCondition: (model: RuntimeModel | undefined, searchFieldName: string, searchValue: string, domain?: string | undefined) => Condition;
+/**
+ * 构造下拉框的搜索条件
+ * @param searchFieldName 搜索的字段名，可以是逗号分隔的多个字段
+ * @param searchValue 搜索的值
+ * @param domain 限定条件
+ * @deprecated please using buildSelectSearchCondition
+ */
+declare const builderSelectSearchCondition: (searchFieldName: string, searchValue: string, domain?: string | undefined) => string;
+/**
+ * 自动填充已选中的值到选项列表的头部,非表达式
+ * @param relationFieldKey
+ * @param selectedValue
+ * @param dataList
+ * @param labelFields
+ * @param separator labelFields的展示时的分隔符
+ */
+declare const autoFillSelectedValueToOptions: (relationFieldKey: string, selectedValue: any, dataList: Entity[], labelFields: string[], separator?: string) => Entity[];
+/**
+ * 根据label变量表达式自动填充已选中的值到选项列表的头部
+ * @param relationFieldKey
+ * @param selectedValue
+ * @param dataList 可选项数据
+ * @param xmlOptionLabel xml配的label表达式
+ * @param modelLabel 元数据上的label表达式
+ * @param optionLabelContextArgs 表达式运行的数据源参数
+ */
+declare const autoFillSelectedValueToOptionsByLabel: (relationFieldKey: string, selectedValues: Entity | Entity[], dataList?: Entity[], xmlOptionLabel?: string | undefined, modelLabel?: string | undefined, optionLabelContextArgs?: string | undefined) => Entity[];
+/**
+ * 根据labelFields组装展示数据
+ * @param relationFieldKey
+ * @param optionData
+ * @param labelFields
+ * @param separator
+ */
+export declare const autoFillByLabelFields: (relationFieldKey: string, optionData: Entity, labelFields: string[], separator?: string | undefined) => Entity;
+/**
+ * 根据label组装展示数据
+ * @param relationFieldKey
+ * @param optionData
+ * @param realOptionLabel
+ * @param optionLabelContextArgs
+ */
+export declare const autoFillByLabel: (relationFieldKey: string, optionData: Entity, realOptionLabel?: string | undefined, optionLabelContextArgs?: string | undefined) => Entity;
+/**
+ * 获取xml中配置的labelFields
+ * @param dslConfig xml配置
+ * @param labelFields 元数据上的labelFields
+ */
+declare const fetchLabelFieldsFromXmlConfig: (dslConfig: Entity, labelFields: string[]) => string[];
+/**
+ * 判断对象是否为空
+ * @param obj
+ */
+declare const isEmptyObject: (obj: any) => boolean;
+interface QueryExpression {
+    leftValue: string[];
+    operator: string;
+    right: unknown;
+}
+/**
+ * 解析action上的domain到默认搜索条件
+ * @param model
+ * @param domain
+ */
+declare const parseActionDomain4search: (model: IModel, domain: string) => {
+    searchBody: {};
+    searchConditions: QueryExpression[];
+};
+export { isPromise, filterRsql, getCondition, buildSelectSearchCondition, builderSelectSearchCondition, autoFillSelectedValueToOptions, autoFillSelectedValueToOptionsByLabel, fetchLabelFieldsFromXmlConfig, isEmptyObject, parseActionDomain4search };

package/index.ts

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

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@oinone/kunlun-vue-admin-layout",
+  "version": "6.2.0",
+  "main": "index.ts",
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "build": "rollup -c && npm run build-css",
+    "build-css": "sass --style compressed --no-source-map ./dist/oinone-kunlun-vue-admin-layout.scss ./dist/oinone-kunlun-vue-admin-layout.css",
+    "dist": "npm run prepublishOnly",
+    "index": "npm run postpublish",
+    "x-prepublishOnly": "node ../../scripts/prepublish-only.js",
+    "x-postpublish": "node ../../scripts/postpublish.js",
+    "doc": "typedoc --out docs src/index.ts"
+  },
+  "dependencies": {
+    "@oinone/kunlun-vue-router": "6.2.0",
+    "@oinone/kunlun-vue-ui": "6.2.0",
+    "@oinone/kunlun-vue-ui-antd": "6.2.0",
+    "@oinone/kunlun-vue-ui-common": "6.2.0",
+    "@oinone/kunlun-vue-widget": "6.2.0",
+    "vue-json-pretty": "^2.4.0"
+  },
+  "devDependencies": {
+    "@oinone/kunlun-dsl": "~6.2.0",
+    "@oinone/kunlun-engine": "~6.2.0",
+    "@oinone/kunlun-environment": "~6.2.0",
+    "@oinone/kunlun-event": "~6.2.0",
+    "@oinone/kunlun-expression": "~6.2.0",
+    "@oinone/kunlun-meta": "~6.2.0",
+    "@oinone/kunlun-request": "~6.2.0",
+    "@oinone/kunlun-router": "~6.2.0",
+    "@oinone/kunlun-service": "~6.2.0",
+    "@oinone/kunlun-shared": "~6.2.0",
+    "@oinone/kunlun-spi": "~6.2.0",
+    "@oinone/kunlun-state": "~6.2.0",
+    "@types/lodash": "4.14.182",
+    "@types/lodash-es": "4.17.6",
+    "lodash": "4.17.21",
+    "lodash-es": "4.17.21",
+    "sass": "1.44.0",
+    "sass-loader": "10.1.1"
+  },
+  "peerDependencies": {
+    "vue": ">=3.2.40"
+  },
+  "gitHead": "b65bbf1d649da1017810c5608473d5daa1a41f94"
+}

package/rollup.config.js

@@ -0,0 +1,33 @@
+import pkg from './package.json';
+import rollupConfig from '../../scripts/build.config.js';
+
+export default rollupConfig(
+  pkg.name,
+  [
+    '@ant-design/icons-vue',
+    '@oinone/kunlun-dsl',
+    '@oinone/kunlun-engine',
+    '@oinone/kunlun-event',
+    '@oinone/kunlun-environment',
+    '@oinone/kunlun-expression',
+    '@oinone/kunlun-meta',
+    '@oinone/kunlun-request',
+    '@oinone/kunlun-router',
+    '@oinone/kunlun-service',
+    '@oinone/kunlun-shared',
+    '@oinone/kunlun-spi',
+    '@oinone/kunlun-state',
+    '@oinone/kunlun-vue-router',
+    '@oinone/kunlun-vue-ui',
+    '@oinone/kunlun-vue-ui-antd',
+    '@oinone/kunlun-vue-ui-common',
+    '@oinone/kunlun-vue-widget',
+    'ant-design-vue',
+    'lodash',
+    'lodash-es',
+    'vue'
+  ],
+  true,
+  [],
+  false
+);

package/src/basic/MaskWidget.ts

@@ -0,0 +1,74 @@
+import {
+  getReloadMainViewParameters,
+  getReloadMaskParameters,
+  ReloadMainViewCallChainingParameters,
+  ReloadMaskCallChainingParameters
+} from '@oinone/kunlun-engine';
+import { CallChaining, ReturnPromise } from '@oinone/kunlun-shared';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { BaseMaskWidget } from './token';
+
+export abstract class MaskWidget extends BaseMaskWidget {
+  public get path(): string {
+    return this.currentHandle;
+  }
+
+  protected reloadMaskProcess?(reloadParameters: ReloadMaskCallChainingParameters): ReturnPromise<void>;
+
+  protected reloadMainViewProcess?(reloadParameters: ReloadMainViewCallChainingParameters): ReturnPromise<void>;
+
+  @Widget.Reactive()
+  @Widget.Inject()
+  protected reloadMaskCallChaining: CallChaining | undefined;
+
+  @Widget.Reactive()
+  @Widget.Inject()
+  protected reloadMainViewCallChaining: CallChaining | undefined;
+
+  protected hookReloadMaskProcess() {
+    if (this.reloadMaskProcess) {
+      this.reloadMaskCallChaining?.hook(this.path, async (args) => {
+        const reloadParameters = getReloadMaskParameters(args);
+        this.reloadMaskProcess?.(reloadParameters);
+      });
+    }
+  }
+
+  protected hookReloadMainViewProcess() {
+    if (this.reloadMainViewProcess) {
+      this.reloadMainViewCallChaining?.hook(this.path, async (args) => {
+        const reloadParameters = getReloadMainViewParameters(args);
+        this.reloadMainViewProcess?.(reloadParameters);
+      });
+    }
+  }
+
+  protected hookMount() {
+    this.hookReloadMaskProcess();
+    this.hookReloadMainViewProcess();
+  }
+
+  protected hookUnmount() {
+    if (this.reloadMaskProcess) {
+      this.reloadMaskCallChaining?.unhook(this.path);
+    }
+    if (this.reloadMainViewProcess) {
+      this.reloadMainViewCallChaining?.unhook(this.path);
+    }
+  }
+
+  protected $$mounted() {
+    super.$$mounted();
+    this.hookMount();
+  }
+
+  protected $$unmounted() {
+    super.$$unmounted();
+    this.hookUnmount();
+  }
+
+  public dispose() {
+    super.dispose();
+    this.hookUnmount();
+  }
+}

package/src/basic/index.ts

@@ -0,0 +1,2 @@
+export * from './token';
+export * from './MaskWidget';

package/src/basic/register/index.ts

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

package/src/basic/register/manager.ts

@@ -0,0 +1,17 @@
+export interface IMaskTagManager<Component = unknown> {
+  getComponents(): Component[];
+
+  isInternalWidget(dslNodeType: string): boolean;
+
+  register(dslNodeType: string): boolean;
+}
+
+let maskTagManagerInstance: IMaskTagManager | undefined;
+
+export function getMaskTagManagerInstance<Component = unknown>() {
+  return maskTagManagerInstance as IMaskTagManager<Component>;
+}
+
+export function setMaskTagManagerInstance(instance: IMaskTagManager) {
+  maskTagManagerInstance = instance;
+}

package/src/basic/token/BaseMaskWidget.ts

@@ -0,0 +1,187 @@
+import { DEFAULT_SLOT_NAME, DslDefinition, DslSlotUtils } from '@oinone/kunlun-dsl';
+import { Align, Layout, Overflow } from '@oinone/kunlun-engine';
+import { useMatched } from '@oinone/kunlun-router';
+import { Constructor, CSSStyle, StringHelper } from '@oinone/kunlun-shared';
+import {
+  SPIFactory,
+  SPIOperator,
+  SPIOptions,
+  SPISelectorFactory,
+  SPISingleSelector,
+  SPITokenFactory
+} from '@oinone/kunlun-spi';
+import { StyleHelper } from '@oinone/kunlun-vue-ui-common';
+import {
+  DslRender,
+  DslRenderWidget,
+  DslRenderWidgetProps,
+  InnerWidgetType,
+  IViewFilterOptions,
+  ViewWidget,
+  Widget
+} from '@oinone/kunlun-vue-widget';
+import { Slots, VNode } from 'vue';
+import { getMaskTagManagerInstance } from '../register';
+
+/**
+ * Mask组件注册可选项
+ */
+export interface BaseMaskOptions extends SPIOptions {
+  /**
+   * 指定XML标签
+   */
+  dslNodeType?: string;
+  /**
+   * 指定组件名称
+   */
+  widget?: string | string[];
+}
+
+export interface BaseMaskWidgetProps extends DslRenderWidgetProps {
+  /**
+   * 自动组件
+   */
+  automatic?: boolean;
+
+  class?: string;
+  style?: string;
+
+  height?: string;
+  width?: string;
+  align?: Align;
+  layout?: Layout;
+  flexWrap?: string;
+  flexDirection?: string;
+  alignContent?: string;
+  flex?: string;
+  wrap?: boolean;
+  overflow?: Overflow;
+}
+
+const MASK_WIDGET_STORAGE_KEY = Symbol('Mask');
+
+ViewWidget.Token = (options) => {
+  const { tagName } = options;
+  if (tagName) {
+    let tagNames: string[];
+    if (Array.isArray(tagName)) {
+      tagNames = tagName;
+    } else {
+      tagNames = [tagName];
+    }
+    for (const tag of tagNames) {
+      const maskTagManager = getMaskTagManagerInstance();
+      if (maskTagManager && !maskTagManager.isInternalWidget(tag)) {
+        maskTagManager.register(tag);
+      }
+    }
+  }
+  const maskOptions = {
+    ...options,
+    dslNodeType: tagName
+  };
+  delete maskOptions.tagName;
+  return SPISelectorFactory.GeneratorToken(MASK_WIDGET_STORAGE_KEY, maskOptions);
+};
+
+ViewWidget.Selector = (options) => {
+  const { tagName } = options;
+  let maskOptions: IViewFilterOptions;
+  if (tagName) {
+    maskOptions = {
+      ...options,
+      dslNodeType: tagName
+    };
+    delete maskOptions.tagName;
+  } else {
+    maskOptions = options;
+  }
+  return SPIOperator.selector(MASK_WIDGET_STORAGE_KEY, maskOptions);
+};
+
+@SPIFactory.Storage<BaseMaskWidget, BaseMaskOptions>(['dslNodeType', 'widget'], {
+  key: MASK_WIDGET_STORAGE_KEY,
+  tokenGenerator: (storageKey, options) => {
+    const { dslNodeType } = options;
+    if (dslNodeType) {
+      const maskTagManager = getMaskTagManagerInstance();
+      if (maskTagManager && !maskTagManager.isInternalWidget(dslNodeType)) {
+        maskTagManager.register(dslNodeType);
+      }
+    }
+    return SPISelectorFactory.GeneratorToken(storageKey, options);
+  }
+})
+export class BaseMaskWidget<Props extends BaseMaskWidgetProps = BaseMaskWidgetProps> extends DslRenderWidget<Props> {
+  protected $$innerWidgetType = InnerWidgetType.Mask;
+
+  public static Token: SPITokenFactory<BaseMaskOptions>;
+
+  public static Selector: SPISingleSelector<BaseMaskOptions, Constructor<BaseMaskWidget>>;
+
+  @Widget.Reactive()
+  protected automatic = false;
+
+  @Widget.Reactive()
+  protected loading = false;
+
+  @Widget.Reactive()
+  protected readonly currentHandle: string;
+
+  public getCurrentHandle() {
+    return this.currentHandle;
+  }
+
+  public constructor(handle?: string) {
+    super(handle);
+    this.currentHandle = this.getHandle();
+  }
+
+  public initialize(props: Props) {
+    if (props.slotNames == null) {
+      props.slotNames = [DEFAULT_SLOT_NAME];
+    }
+    super.initialize(props);
+    this.automatic = props.automatic || false;
+    return this;
+  }
+
+  @Widget.Reactive()
+  public get classNames(): string[] | undefined {
+    const classNames = this.getDsl().class;
+    if (classNames) {
+      return StringHelper.append([], classNames);
+    }
+  }
+
+  @Widget.Reactive()
+  public get style(): CSSStyle | undefined {
+    return StyleHelper.convertStyleByDslDefinition(this.getDsl());
+  }
+
+  /**
+   * 获取url参数
+   */
+  public getUrlParameters(): Record<string, unknown> {
+    const { page = {} } = useMatched().matched.segmentParams;
+    return page;
+  }
+
+  public async load<R>(fn: (...args) => R, ...args): Promise<R> {
+    this.loading = true;
+    try {
+      return await fn(...args);
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  public render(ctx?: Record<string, unknown>, slots?: Slots): VNode | VNode[] {
+    const template = (ctx?.dslDefinition || this.template) as DslDefinition;
+    if (template && this.supportedSlotNames.length) {
+      this.dslSlots = DslSlotUtils.fetchSlotsBySlotNames(template, this.supportedSlotNames);
+      this.slots = DslRender.renderSlots(this.dslSlots);
+    }
+    return super.render(ctx, slots);
+  }
+}

package/src/basic/token/index.ts

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

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

@@ -0,0 +1,133 @@
+<template>
+  <div class="k-oinone-application" @click="onShowMask">
+    <!-- 预加载图片 start -->
+    <img style="display: none" :src="`${genStaticPath('背景1_1650609329143.png')}`" alt="" />
+    <img style="display: none" :src="`${genStaticPath('背景_1651138497267.png')}`" alt="" />
+    <!-- 预加载图片 end -->
+
+    <div class="logo">
+      <div
+        class="logo-background"
+        :style="{
+          backgroundImage: `url('${collapsed ? collapsedLogo || DEFAULT_APPLICATION_LOGO() : logo}')`
+        }"
+      ></div>
+    </div>
+    <div class="app-name">
+      <span class="app-name-module" :title="appLabel">{{ appLabel }}</span>
+      <caret-down-outlined v-if="!isSingleApps" />
+    </div>
+    <div v-show="showMask">
+      <app-switcher-mask
+        v-model:showMask="showMask"
+        :apps="apps"
+        :genStaticPath="genStaticPath"
+        :likeApp="likeApp"
+        :onCollectionClick="onCollectionClick"
+        @switch-app="onSwitchApp"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { CaretDownOutlined } from '@ant-design/icons-vue';
+import { IModule } from '@oinone/kunlun-meta';
+import { computed, defineComponent, PropType, ref } from 'vue';
+import { DEFAULT_APPLICATION_LOGO } from '../../typing';
+import AppSwitcherMask from './AppSwitcherMask.vue';
+
+export default defineComponent({
+  name: 'AppSwitcher',
+  components: {
+    CaretDownOutlined,
+    AppSwitcherMask
+  },
+  inheritAttrs: false,
+  props: {
+    apps: {
+      type: Array as PropType<IModule[]>,
+      default: () => []
+    },
+    module: {
+      type: Object as PropType<IModule>
+    },
+    logo: {
+      type: String
+    },
+    collapsedLogo: {
+      type: String
+    },
+    collapsed: {
+      type: Boolean,
+      default: undefined
+    },
+    likeApp: {
+      type: Array as PropType<IModule[]>
+    },
+    onCollectionClick: {
+      type: Function
+    },
+    onSwitchApp: {
+      type: Function
+    },
+    genStaticPath: {
+      type: Function
+    },
+    currentPageUrl: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const apps = computed(() => {
+      return props.apps || [];
+    });
+
+    const appLabel = computed(() => {
+      return props.module?.displayName || props.module?.name;
+    });
+
+    const collapsed = computed(() => {
+      return props.collapsed || false;
+    });
+
+    const isSingleApps = computed(() => {
+      if (props.apps.length === 0) {
+        return true;
+      }
+
+      if (props.apps.length === 1) {
+        const [firstApp] = props.apps;
+        const { module } = props.currentPageUrl;
+        if (module !== firstApp.name) {
+          return false;
+        }
+        return true;
+      }
+
+      return false;
+    });
+
+    const showMask = ref(false);
+
+    const onShowMask = () => {
+      if (isSingleApps.value) {
+        return;
+      }
+
+      showMask.value = true;
+    };
+
+    return {
+      DEFAULT_APPLICATION_LOGO,
+      apps,
+      appLabel,
+      collapsed,
+      showMask,
+      isSingleApps,
+
+      onShowMask
+    };
+  }
+});
+</script>