@oinone/kunlun-vue-admin-layout 6.2.0

package/src/service/user-service.ts

@@ -0,0 +1,10 @@
+import { UserInfo, UserService, UserServiceToken } from '@oinone/kunlun-engine';
+import { SPI } from '@oinone/kunlun-spi';
+import { TopBarService } from './top-bar-service';
+
+@SPI.Service(UserServiceToken)
+export class UserServiceImpl implements UserService {
+  public async getUserInfo(): Promise<UserInfo | undefined> {
+    return TopBarService.getUserInfo();
+  }
+}

package/src/shim-translate.d.ts

@@ -0,0 +1,7 @@
+export {};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $translate<T extends string | null | undefined = string | null | undefined>(text: T): T;
+  }
+}

package/src/shim-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { defineComponent } from 'vue';
+
+  const Component: ReturnType<typeof defineComponent>;
+  export default Component;
+}

package/src/spi/index.ts

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

package/src/spi/mask-editor.ts

@@ -0,0 +1,102 @@
+import { DslDefinition } from '@oinone/kunlun-dsl';
+import { ServiceIdentifier, SPI } from '@oinone/kunlun-spi';
+import { InternalMaskWidget } from '../tags';
+
+/**
+ * 母版编辑上下文
+ */
+export interface MaskEditorContext {
+  isDefault: boolean;
+}
+
+/**
+ * 母版编辑API
+ */
+export interface MaskEditor {
+  /**
+   * 母版编辑
+   * @param context
+   * @param dsl
+   */
+  edit(context: Readonly<MaskEditorContext>, dsl: DslDefinition): DslDefinition;
+}
+
+/**
+ * 母版编辑Token
+ */
+export const MaskEditorToken = ServiceIdentifier<MaskEditor>('MaskEditor');
+
+/**
+ * 母版编辑服务
+ */
+export interface MaskEditService {
+  /**
+   * 查找顶部栏组件集合
+   * @param dsl 母版DSL
+   */
+  findTopBarWidgets(dsl: DslDefinition): DslDefinition[] | undefined;
+
+  /**
+   * 生成母版组件DSL
+   * @param widget
+   */
+  generatorWidget(widget: string): DslDefinition;
+
+  /**
+   * 生成分割线DSL
+   */
+  generatorDivider(): DslDefinition;
+}
+
+/**
+ * 母版编辑服务Token
+ */
+export const MaskEditServiceToken = ServiceIdentifier<MaskEditService>('MaskEditService');
+
+@SPI.Service(MaskEditServiceToken)
+export class DefaultMaskEditService implements MaskEditService {
+  public findTopBarWidgets(dsl: DslDefinition): DslDefinition[] | undefined {
+    return this.findDslNode(dsl, 'header', true)?.widgets?.find((v) => v.dslNodeType === 'block')?.widgets;
+  }
+
+  protected findDslNode(dsl: DslDefinition, dslNodeType: string, deep?: boolean): DslDefinition | undefined {
+    if (dsl.dslNodeType === dslNodeType) {
+      return dsl;
+    }
+    if (deep) {
+      return this.findDslNodeByDeep(dsl, dslNodeType);
+    }
+    return dsl.widgets.find((v) => v.dslNodeType === dslNodeType);
+  }
+
+  protected findDslNodeByDeep(dsl: DslDefinition, dslNodeType: string): DslDefinition | undefined {
+    for (const child of dsl.widgets) {
+      if (child.dslNodeType === dslNodeType) {
+        return child;
+      }
+      const target = this.findDslNodeByDeep(child, dslNodeType);
+      if (target) {
+        return target;
+      }
+    }
+  }
+
+  public generatorWidgetByDslNodeType(dslNodeType: string): DslDefinition {
+    return {
+      dslNodeType,
+      widgets: []
+    };
+  }
+
+  public generatorWidget(widget: string): DslDefinition {
+    return {
+      dslNodeType: InternalMaskWidget.Widget,
+      widget,
+      widgets: []
+    };
+  }
+
+  public generatorDivider(): DslDefinition {
+    return this.generatorWidget('divider');
+  }
+}

package/src/tags/Block.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { MaskWidgetTagMixin } from './mixin';
+import { InternalMaskWidget } from './resolve';
+
+export default defineComponent({
+  name: 'Block',
+  mixins: [MaskWidgetTagMixin],
+  inheritAttrs: false,
+  methods: {
+    getWidgetTag(): InternalMaskWidget {
+      return InternalMaskWidget.Block;
+    }
+  }
+});
+</script>

package/src/tags/Breadcrumb.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { MaskWidgetTagMixin } from './mixin';
+import { InternalMaskWidget } from './resolve';
+
+export default defineComponent({
+  name: 'Breadcrumb',
+  mixins: [MaskWidgetTagMixin],
+  inheritAttrs: false,
+  methods: {
+    getWidgetTag(): InternalMaskWidget {
+      return InternalMaskWidget.Breadcrumb;
+    }
+  }
+});
+</script>

package/src/tags/Container.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { MaskWidgetTagMixin } from './mixin';
+import { InternalMaskWidget } from './resolve';
+
+export default defineComponent({
+  name: 'Container',
+  mixins: [MaskWidgetTagMixin],
+  inheritAttrs: false,
+  methods: {
+    getWidgetTag(): InternalMaskWidget {
+      return InternalMaskWidget.Container;
+    }
+  }
+});
+</script>

package/src/tags/Content.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { MaskWidgetTagMixin } from './mixin';
+import { InternalMaskWidget } from './resolve';
+
+export default defineComponent({
+  name: 'Content',
+  mixins: [MaskWidgetTagMixin],
+  inheritAttrs: false,
+  methods: {
+    getWidgetTag(): InternalMaskWidget {
+      return InternalMaskWidget.Content;
+    }
+  }
+});
+</script>

package/src/tags/Header.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { MaskWidgetTagMixin } from './mixin';
+import { InternalMaskWidget } from './resolve';
+
+export default defineComponent({
+  name: 'Header',
+  mixins: [MaskWidgetTagMixin],
+  inheritAttrs: false,
+  methods: {
+    getWidgetTag(): InternalMaskWidget {
+      return InternalMaskWidget.Header;
+    }
+  }
+});
+</script>

package/src/tags/Mask.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { MaskWidgetTagMixin } from './mixin';
+import { InternalMaskWidget } from './resolve';
+
+export default defineComponent({
+  name: 'Mask',
+  mixins: [MaskWidgetTagMixin],
+  inheritAttrs: false,
+  methods: {
+    getWidgetTag(): InternalMaskWidget {
+      return InternalMaskWidget.Mask;
+    }
+  }
+});
+</script>

package/src/tags/MultiTabs.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { MaskWidgetTagMixin } from './mixin';
+import { InternalMaskWidget } from './resolve';
+
+export default defineComponent({
+  name: 'MultiTabs',
+  mixins: [MaskWidgetTagMixin],
+  inheritAttrs: false,
+  methods: {
+    getWidgetTag(): InternalMaskWidget {
+      return InternalMaskWidget.MultiTabs;
+    }
+  }
+});
+</script>

package/src/tags/Sidebar.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { MaskWidgetTagMixin } from './mixin';
+import { InternalMaskWidget } from './resolve';
+
+export default defineComponent({
+  name: 'Sidebar',
+  mixins: [MaskWidgetTagMixin],
+  inheritAttrs: false,
+  methods: {
+    getWidgetTag(): InternalMaskWidget {
+      return InternalMaskWidget.Sidebar;
+    }
+  }
+});
+</script>

package/src/tags/Widget.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { MaskWidgetTagMixin } from './mixin';
+import { InternalMaskWidget } from './resolve';
+
+export default defineComponent({
+  name: 'Widget',
+  mixins: [MaskWidgetTagMixin],
+  inheritAttrs: false,
+  methods: {
+    getWidgetTag(): InternalMaskWidget {
+      return InternalMaskWidget.Widget;
+    }
+  }
+});
+</script>

package/src/tags/context/context.ts

@@ -0,0 +1,24 @@
+import { computed, ComputedRef, inject, InjectionKey, provide } from 'vue';
+
+export interface MaskContext {
+  parentHandle: ComputedRef<string>;
+  slotName: ComputedRef<string | undefined>;
+}
+
+export const defaultMaskContext: MaskContext = {
+  parentHandle: computed(() => ''),
+  slotName: computed(() => undefined)
+};
+
+const MaskContextKey: InjectionKey<MaskContext> = Symbol('__mask_context__');
+
+export function useProviderMaskContext(state: Partial<MaskContext>): void {
+  provide(MaskContextKey, {
+    ...defaultMaskContext,
+    ...state
+  });
+}
+
+export function useInjectMaskContext(): MaskContext {
+  return inject(MaskContextKey, defaultMaskContext);
+}

package/src/tags/context/index.ts

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

package/src/tags/index.ts

@@ -0,0 +1,48 @@
+import { StringHelper } from '@oinone/kunlun-shared';
+import { componentInstall, DEFAULT_TAG_PREFIX } from '@oinone/kunlun-vue-widget';
+import { Component } from 'vue';
+import { getMaskTagManagerInstance } from '../basic/register';
+import Block from './Block.vue';
+import Breadcrumb from './Breadcrumb.vue';
+import Container from './Container.vue';
+import Content from './Content.vue';
+import Header from './Header.vue';
+import Mask from './Mask.vue';
+import MultiTabs from './MultiTabs.vue';
+import './register';
+import Sidebar from './Sidebar.vue';
+import Widget from './Widget.vue';
+
+export function maskInstall() {
+  maskComponentInstall(Mask);
+
+  maskComponentInstall(Widget);
+
+  maskComponentInstall(Header);
+  maskComponentInstall(Container);
+  maskComponentInstall(Content);
+  maskComponentInstall(Block);
+
+  maskComponentInstall(Sidebar);
+  maskComponentInstall(Breadcrumb);
+  maskComponentInstall(MultiTabs);
+
+  getMaskTagManagerInstance<Component>()
+    ?.getComponents()
+    .forEach((component) => {
+      maskComponentInstall(component);
+    });
+}
+
+function maskComponentInstall(component: Component) {
+  const name = component.name;
+  if (!name) {
+    throw new Error('Invalid component name');
+  }
+  componentInstall(component, `${DEFAULT_TAG_PREFIX}-${StringHelper.camelCaseToKebabCase(name)}`);
+}
+
+export * from './context';
+export * from './mixin';
+export * from './register';
+export * from './resolve';

package/src/tags/mixin/MaskWidgetTagMixin.ts

@@ -0,0 +1,79 @@
+import { DEFAULT_SLOT_NAME, DslDefinition } from '@oinone/kunlun-dsl';
+import {
+  DslRender,
+  RenderWidget,
+  renderWidgets,
+  reportAllMounted,
+  VueWidget,
+  WidgetTagProps
+} from '@oinone/kunlun-vue-widget';
+import { ComponentOptionsMixin, computed, Slots } from 'vue';
+import { useInjectMaskContext, useProviderMaskContext } from '../context';
+import { createMaskWidget, CreateMaskWidgetProps, InternalMaskWidget } from '../resolve';
+import { MaskWidgetTagMixinContext } from './typing';
+
+export const MaskWidgetTagMixin: ComponentOptionsMixin = {
+  props: {
+    ...WidgetTagProps
+  },
+  methods: {
+    getWidgetTag(): InternalMaskWidget | string {
+      throw new Error(`The method 'getWidgetTag' must be overridden.`);
+    },
+    getParentHandle(): string {
+      return useInjectMaskContext().parentHandle.value;
+    },
+    getDslDefinition(): DslDefinition | undefined {
+      return this.dslDefinition || this.$attrs;
+    },
+    getSlotName(): string {
+      return this.slotName || DEFAULT_SLOT_NAME;
+    },
+    getCustomProps(): Record<string, unknown> {
+      return {};
+    },
+    getProps(): CreateMaskWidgetProps {
+      return {
+        ...this.$attrs,
+        template: this.getDslDefinition(),
+        parentHandle: this.getParentHandle(),
+        slotName: this.getSlotName(),
+        ...this.getCustomProps()
+      } as CreateMaskWidgetProps;
+    },
+    getCurrentSlots(): Slots | undefined {
+      return (
+        DslRender.fetchVNodeSlots(this.dslDefinition || this.$attrs) ||
+        (Object.keys(this.$slots).length ? this.$slots : undefined)
+      );
+    },
+    createWidget(): RenderWidget | undefined {
+      return createMaskWidget(this.getWidgetTag(), this.getProps());
+    }
+  },
+  data() {
+    reportAllMounted();
+    const metaContext = useInjectMaskContext();
+    const customWidget = this.createWidget();
+    if (!customWidget) {
+      console.error(`Invalid custom widget.`, this.getWidgetTag(), this.getProps());
+      return {
+        widgetHandle: '',
+        widgets: []
+      };
+    }
+    const { handle: widgetHandle, widgets } = customWidget;
+    useProviderMaskContext({
+      ...metaContext,
+      parentHandle: computed(() => widgetHandle),
+      slotName: computed(() => this.getSlotName())
+    });
+    return {
+      widgetHandle,
+      widgets
+    };
+  },
+  render(ctx: MaskWidgetTagMixinContext) {
+    return renderWidgets(ctx.widgets as VueWidget[], ctx, ctx.getCurrentSlots());
+  }
+};

package/src/tags/mixin/index.ts

@@ -0,0 +1,3 @@
+export * from './MaskWidgetTagMixin';
+export * from './typing';
+export * from './use-mask-widget-tag';

package/src/tags/mixin/typing.ts

@@ -0,0 +1,8 @@
+import { WidgetTagContext } from '@oinone/kunlun-vue-widget';
+import { InternalMaskWidget } from '../resolve';
+
+export interface MaskWidgetTagMixinContext extends WidgetTagContext {
+  getWidgetTag(): InternalMaskWidget | string;
+
+  getCustomProps(): Record<string, unknown>;
+}

package/src/tags/mixin/use-mask-widget-tag.ts

@@ -0,0 +1,172 @@
+import { DEFAULT_SLOT_NAME, DslDefinition } from '@oinone/kunlun-dsl';
+import {
+  DslRender,
+  RenderWidget,
+  renderWidgets,
+  reportAllMounted,
+  VueWidget,
+  WidgetTagProps
+} from '@oinone/kunlun-vue-widget';
+import { ComponentOptionsMixin, computed, ref, Ref, SetupContext, Slots } from 'vue';
+import { useInjectMaskContext, useProviderMaskContext } from '../context';
+import { createMaskWidget, CreateMaskWidgetProps } from '../resolve';
+import { MaskWidgetTagMixinContext } from './typing';
+
+/**
+ * 函数式组件标签混入可选项
+ * 使用此混入方式，必须使用setup调用{@link useMaskWidgetTag}方法
+ */
+export const UseMaskWidgetTagMixin: ComponentOptionsMixin = {
+  props: {
+    ...WidgetTagProps
+  },
+  /**
+   * 此方法不会被调用，必须在组件中进行重写
+   * @param props
+   * @param context
+   */
+  setup(props, context) {
+    return useMaskWidgetTag(props, context);
+  },
+  render(ctx: MaskWidgetTagMixinContext) {
+    return renderWidgets(ctx.widgets as VueWidget[], ctx, ctx.getCurrentSlots());
+  }
+};
+
+export interface UseMaskWidgetTagContext {
+  dslDefinition?: DslDefinition;
+  slotName?: string;
+  inline?: boolean;
+  slotContext?: Record<string, unknown>;
+}
+
+export interface UseMaskWidgetTagOptions {
+  getWidgetTag?: () => string;
+
+  getParentHandle?: () => string;
+
+  getDslDefinition?: () => DslDefinition | undefined;
+
+  getSlotName?: () => string;
+
+  getCustomProps?: () => Record<string, unknown>;
+
+  getProps?: () => CreateMaskWidgetProps;
+
+  getCurrentSlots?: () => Slots | undefined;
+
+  createWidget?: (props: CreateMaskWidgetProps) => RenderWidget | undefined;
+}
+
+export interface UseMaskWidgetResult {
+  widgetHandle: Ref<string>;
+
+  widget: Ref<VueWidget | undefined>;
+
+  widgets: Ref<VueWidget[]>;
+
+  getWidgetTag: () => string;
+
+  getParentHandle: () => string;
+
+  getDslDefinition: () => DslDefinition | undefined;
+
+  getSlotName: () => string;
+
+  getCustomProps: () => Record<string, unknown>;
+
+  getProps: () => CreateMaskWidgetProps;
+
+  getCurrentSlots: () => Slots | undefined;
+}
+
+export function useMaskWidgetTag(
+  props: UseMaskWidgetTagContext,
+  context: SetupContext,
+  options?: UseMaskWidgetTagOptions
+): UseMaskWidgetResult {
+  reportAllMounted();
+  const maskContext = useInjectMaskContext();
+  const { parentHandle } = maskContext;
+
+  const getWidgetTag =
+    options?.getWidgetTag ||
+    ((): never => {
+      throw new Error(`The method 'getWidgetTag' must be overridden.`);
+    });
+
+  const getParentHandle = options?.getParentHandle || (() => parentHandle.value);
+
+  const getDslDefinition = options?.getDslDefinition || (() => props.dslDefinition || (context.attrs as DslDefinition));
+
+  const getSlotName = options?.getSlotName || (() => props.slotName || DEFAULT_SLOT_NAME);
+
+  const getCustomProps = options?.getCustomProps || (() => ({}));
+
+  const getProps =
+    options?.getProps ||
+    ((): CreateMaskWidgetProps => {
+      return {
+        ...context.attrs,
+        slotName: getSlotName(),
+        template: props.dslDefinition,
+        slotContext: props.slotContext,
+        parentHandle: getParentHandle(),
+        ...getCustomProps()
+      } as CreateMaskWidgetProps;
+    });
+
+  const getCurrentSlots =
+    options?.getCurrentSlots ||
+    (() =>
+      DslRender.fetchVNodeSlots(props.dslDefinition) ||
+      (Object.keys(context.slots).length ? context.slots : undefined));
+
+  const widgetTag = getWidgetTag();
+
+  const widgetProps = getProps();
+
+  const createWidget = options?.createWidget || ((customWidgetProps) => createMaskWidget(widgetTag, customWidgetProps));
+
+  const widgetHandleRef = ref<string>('');
+  const widgetRef = ref<VueWidget | undefined>(undefined) as Ref<VueWidget | undefined>;
+  const widgetsRef = ref<VueWidget[]>([]) as Ref<VueWidget[]>;
+  const renderWidget = createWidget(widgetProps);
+
+  if (!renderWidget) {
+    console.error(`Invalid mask widget.`, widgetTag, widgetProps);
+    return {
+      widgetHandle: widgetHandleRef,
+      widget: widgetRef,
+      widgets: widgetsRef,
+      getWidgetTag,
+      getParentHandle,
+      getDslDefinition,
+      getSlotName,
+      getCustomProps,
+      getProps,
+      getCurrentSlots
+    };
+  }
+  const { handle: widgetHandle, widget, widgets } = renderWidget;
+  widgetHandleRef.value = widgetHandle;
+  widgetRef.value = widget;
+  widgetsRef.value = widgets;
+  useProviderMaskContext({
+    ...maskContext,
+    parentHandle: computed(() => widgetHandleRef.value),
+    slotName: computed(() => getSlotName())
+  });
+  return {
+    widgetHandle: widgetHandleRef,
+    widget: widgetRef,
+    widgets: widgetsRef,
+    getWidgetTag,
+    getParentHandle,
+    getDslDefinition,
+    getSlotName,
+    getCustomProps,
+    getProps,
+    getCurrentSlots
+  };
+}

package/src/tags/register/index.ts

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

package/src/tags/register/manager.ts

@@ -0,0 +1,43 @@
+import { StringHelper } from '@oinone/kunlun-shared';
+import { Component, defineComponent } from 'vue';
+import { IMaskTagManager, setMaskTagManagerInstance } from '../../basic/register';
+import { MaskWidgetTagMixin } from '../mixin';
+import { InternalMaskWidget, registerMaskWidgetFunction } from '../resolve';
+
+export class InternalMaskTagManager implements IMaskTagManager<Component> {
+  private tags = new Map<string, Component>();
+
+  public getComponents(): Component[] {
+    return Array.from(this.tags.values());
+  }
+
+  public isInternalWidget(dslNodeType: string): boolean {
+    return Object.values(InternalMaskWidget).findIndex((v) => v === dslNodeType) !== -1;
+  }
+
+  public register(dslNodeType: string): boolean {
+    const camelCase = StringHelper.kebabCaseToCamelCase(dslNodeType);
+    const componentName = `${camelCase[0].toUpperCase()}${camelCase.substring(1)}`;
+
+    if (!registerMaskWidgetFunction(componentName)) {
+      return false;
+    }
+
+    const component = defineComponent({
+      name: componentName,
+      mixins: [MaskWidgetTagMixin],
+      inheritAttrs: false,
+      methods: {
+        getWidgetTag(): InternalMaskWidget | string {
+          return componentName;
+        }
+      }
+    });
+    this.tags.set(componentName, component);
+    return true;
+  }
+}
+
+export const MaskTagManager = new InternalMaskTagManager();
+
+setMaskTagManagerInstance(MaskTagManager);

package/src/tags/resolve/index.ts

@@ -0,0 +1,2 @@
+export * from './typing';
+export * from './widget-resolve';

package/src/tags/resolve/internal/index.ts

@@ -0,0 +1,2 @@
+export * from './typing';
+export * from './widget-resolve';