@oinone/kunlun-vue-admin-layout 6.2.0

package/src/component/layout/MaskBlock.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+import { CSSStyle } from '@oinone/kunlun-shared';
+import { createVNode, defineComponent, PropType } from 'vue';
+
+export default defineComponent({
+  name: 'MaskBlock',
+  inheritAttrs: false,
+  props: {
+    id: {
+      type: String
+    },
+    classNames: {
+      type: [String, Array] as PropType<string | string[]>
+    },
+    style: {
+      type: [String, Object] as PropType<string | CSSStyle>
+    }
+  },
+  render() {
+    return createVNode(
+      'div',
+      {
+        id: this.id,
+        class: this.classNames,
+        style: this.style
+      },
+      this.$slots.default?.()
+    );
+  }
+});
+</script>

package/src/component/layout/block/MaskBlockWidget.ts

@@ -0,0 +1,17 @@
+import { StringHelper } from '@oinone/kunlun-shared';
+import { SPI } from '@oinone/kunlun-spi';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { MaskWidget } from '../../../basic';
+import { BaseMaskLayoutWidget } from '../BaseMaskLayoutWidget';
+
+@SPI.ClassFactory(
+  MaskWidget.Token({
+    dslNodeType: 'block'
+  })
+)
+export class MaskBlockWidget extends BaseMaskLayoutWidget {
+  @Widget.Reactive()
+  public get classNames(): string[] | undefined {
+    return StringHelper.append(['k-layout-block'], super.classNames);
+  }
+}

package/src/component/layout/block/index.ts

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

package/src/component/layout/container/MaskContainerWidget.ts

@@ -0,0 +1,13 @@
+import { StringHelper } from '@oinone/kunlun-shared';
+import { SPI } from '@oinone/kunlun-spi';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { MaskWidget } from '../../../basic';
+import { BaseMaskLayoutWidget } from '../BaseMaskLayoutWidget';
+
+@SPI.ClassFactory(MaskWidget.Token({ dslNodeType: 'container' }))
+export class MaskContainerWidget extends BaseMaskLayoutWidget {
+  @Widget.Reactive()
+  public get classNames(): string[] | undefined {
+    return StringHelper.append(['k-layout-container', 'oio-scrollbar'], super.classNames);
+  }
+}

package/src/component/layout/container/index.ts

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

package/src/component/layout/content/MaskContentWidget.ts

@@ -0,0 +1,41 @@
+import { useGlobalEnv } from '@oinone/kunlun-environment';
+import { useMatched } from '@oinone/kunlun-router';
+import { StringHelper, uniqueKeyGenerator } from '@oinone/kunlun-shared';
+import { SPI } from '@oinone/kunlun-spi';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { MaskWidget } from '../../../basic';
+import { DEFAULT_PREFIX } from '../../../theme';
+import { BaseMaskLayoutWidget } from '../BaseMaskLayoutWidget';
+
+@SPI.ClassFactory(MaskWidget.Token({ dslNodeType: 'content' }))
+export class MaskContentWidget extends BaseMaskLayoutWidget {
+  private static readonly id = `${DEFAULT_PREFIX}-content-${uniqueKeyGenerator()}`;
+
+  @Widget.Reactive()
+  public get id(): string {
+    return MaskContentWidget.id;
+  }
+
+  @Widget.Reactive()
+  public get classNames(): string[] | undefined {
+    return StringHelper.append(['k-layout-content oio-scrollbar'], super.classNames);
+  }
+
+  protected mounted() {
+    useGlobalEnv().contentSelector = `#${this.id}`;
+
+    const { getMatched$ } = useMatched();
+    getMatched$().subscribe(() => {
+      /**
+       * 当视图滚动到右侧的时候，再切换到其他页面，会导致其他页面也滚动到的右侧
+       */
+      const node = document.querySelector('.k-layout-content.oio-scrollbar') as HTMLElement;
+
+      if (node) {
+        if (node.scrollLeft > 0) {
+          node.scrollLeft = 0;
+        }
+      }
+    });
+  }
+}

package/src/component/layout/content/index.ts

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

package/src/component/layout/grid/Grid.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="grid-box">
+    <slot />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({});
+</script>

package/src/component/layout/grid/GridWidget.ts

@@ -0,0 +1,62 @@
+import { IGridWidgetProps } from '@oinone/kunlun-engine';
+import { CSSStyle } from '@oinone/kunlun-shared';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { MaskWidget } from '../../../basic';
+import Grid from './Grid.vue';
+
+export class GridWidget extends MaskWidget {
+  @Widget.Reactive()
+  private itemInvisible = false;
+
+  @Widget.Inject('cols')
+  @Widget.Reactive()
+  private cols!: number;
+
+  @Widget.Reactive()
+  protected internalStyle: CSSStyle | undefined;
+
+  @Widget.Reactive()
+  public get style(): CSSStyle | undefined {
+    return { ...(super.style || {}), ...(this.internalStyle || {}) } as CSSStyle;
+  }
+
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(Grid);
+
+    const dsl = this.getDsl();
+
+    const { span = 12, rowIndex = 'auto', columnIndex = 'auto' } = dsl as unknown as IGridWidgetProps;
+
+    let _rowIndex: string | number = rowIndex;
+    let _columnIndex: string | number = columnIndex;
+
+    // 行的位置要 + 1，才是正确的
+    if (!Number.isNaN(Number(rowIndex))) {
+      _rowIndex = Number(rowIndex) + 1;
+    }
+
+    // 比如网络一共12列，当前grid占据3列，那么就是 3 + 2，这样在网格中的位置才是对的
+    if (!Number.isNaN(Number(this.cols)) && !Number.isNaN(Number(_columnIndex))) {
+      // 比如网络一共12列，当前grid占据12列，那么是 12 + 1，这样在网格中的位置才是对的
+
+      if (_columnIndex >= this.cols || Number(span) + 2 >= this.cols) {
+        _columnIndex = Number(this.cols) + 1;
+      } else {
+        _columnIndex = Number(span) + 2;
+      }
+    }
+
+    const internalStyle = {} as CSSStyle;
+
+    internalStyle.gridArea = `span 1 / span ${span} / ${_rowIndex} / ${_columnIndex}`;
+
+    if (dsl.type && dsl.type === 'flex') {
+      internalStyle.display = 'flex';
+    }
+
+    this.internalStyle = internalStyle;
+
+    return this;
+  }
+}

package/src/component/layout/grid/index.ts

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

package/src/component/layout/header/MaskHeaderWidget.ts

@@ -0,0 +1,13 @@
+import { StringHelper } from '@oinone/kunlun-shared';
+import { SPI } from '@oinone/kunlun-spi';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { MaskWidget } from '../../../basic';
+import { BaseMaskLayoutWidget } from '../BaseMaskLayoutWidget';
+
+@SPI.ClassFactory(MaskWidget.Token({ dslNodeType: 'header' }))
+export class MaskHeaderWidget extends BaseMaskLayoutWidget {
+  @Widget.Reactive()
+  public get classNames(): string[] | undefined {
+    return StringHelper.append(['k-layout-header'], super.classNames);
+  }
+}

package/src/component/layout/header/index.ts

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

package/src/component/layout/index.ts

@@ -0,0 +1,9 @@
+export * from './BaseMaskLayoutWidget';
+export * from './block';
+export * from './container';
+export * from './content';
+export * from './grid';
+export * from './header';
+export * from './mask';
+export * from './sidebar';
+export * from './widget';

package/src/component/layout/mask/MaskRootWidget.ts

@@ -0,0 +1,13 @@
+import { StringHelper } from '@oinone/kunlun-shared';
+import { SPI } from '@oinone/kunlun-spi';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { MaskWidget } from '../../../basic';
+import { BaseMaskLayoutWidget } from '../BaseMaskLayoutWidget';
+
+@SPI.ClassFactory(MaskWidget.Token({ dslNodeType: 'mask' }))
+export class MaskRootWidget extends BaseMaskLayoutWidget {
+  @Widget.Reactive()
+  public get classNames(): string[] | undefined {
+    return StringHelper.append(['k-layout-mask'], super.classNames);
+  }
+}

package/src/component/layout/mask/index.ts

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

package/src/component/layout/sidebar/MaskSidebarWidget.ts

@@ -0,0 +1,31 @@
+import { StringHelper } from '@oinone/kunlun-shared';
+import { SPI } from '@oinone/kunlun-spi';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { MaskWidget } from '../../../basic';
+import { BaseMaskLayoutWidget } from '../BaseMaskLayoutWidget';
+
+enum Mode {
+  horizontal = 'horizontal',
+  inline = 'inline'
+}
+
+@SPI.ClassFactory(MaskWidget.Token({ dslNodeType: 'sidebar' }))
+export class MaskSidebarWidget extends BaseMaskLayoutWidget {
+  @Widget.Reactive()
+  public get classNames(): string[] | undefined {
+    const classNames = ['k-layout-sidebar'];
+    if (this.mode === Mode.horizontal) {
+      classNames.push('k-layout-sidebar-horizontal');
+    }
+    return StringHelper.append(classNames, super.classNames);
+  }
+
+  @Widget.Reactive()
+  public get mode(): Mode {
+    const { mode } = this.getDsl();
+    if (Object.keys(Mode).includes(mode)) {
+      return mode;
+    }
+    return Mode.inline;
+  }
+}

package/src/component/layout/sidebar/index.ts

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

package/src/component/layout/widget/MaskCommonWidget.ts

@@ -0,0 +1,95 @@
+import { DslDefinition } from '@oinone/kunlun-dsl';
+import { Constructor, StringHelper } from '@oinone/kunlun-shared';
+import { SPI } from '@oinone/kunlun-spi';
+import { ViewWidget, Widget } from '@oinone/kunlun-vue-widget';
+import { Slots, VNode } from 'vue';
+import { BaseMaskWidget, BaseMaskWidgetProps, MaskWidget } from '../../../basic';
+import { BaseMaskLayoutWidget } from '../BaseMaskLayoutWidget';
+
+export interface MaskCommonWidgetProps extends BaseMaskWidgetProps {
+  widget: string;
+}
+
+@SPI.ClassFactory(MaskWidget.Token({ dslNodeType: 'widget' }))
+export class MaskCommonWidget extends BaseMaskLayoutWidget<MaskCommonWidgetProps> {
+  private widget: string | undefined;
+
+  private currentWidget: { name: string; widgetInstance: BaseMaskWidget | ViewWidget } | null | undefined;
+
+  public initialize(props: MaskCommonWidgetProps) {
+    if (props.slotNames == null) {
+      props.slotNames = [];
+    }
+    super.initialize(props);
+    this.widget = props.widget;
+    this.createOrUpdateWidget(props);
+    return this;
+  }
+
+  @Widget.Reactive()
+  public get classNames(): string[] | undefined {
+    return StringHelper.append(['k-layout-widget'], super.classNames);
+  }
+
+  protected createOrUpdateWidget(props: Record<string, unknown>) {
+    const { widget, currentWidget } = this;
+    if (!widget) {
+      console.error('Invalid widget property', this);
+      return;
+    }
+    if (widget === currentWidget?.name || currentWidget === null) {
+      return;
+    }
+
+    currentWidget?.widgetInstance.dispose();
+    this.currentWidget = undefined;
+
+    let usingViewWidget = false;
+    let constructor: Constructor<BaseMaskWidget> | Constructor<ViewWidget> | undefined = BaseMaskWidget.Selector({
+      widget
+    });
+    if (!constructor) {
+      constructor = ViewWidget.Selector({ widget });
+      if (constructor) {
+        usingViewWidget = true;
+      } else {
+        this.currentWidget = null;
+        return;
+      }
+    }
+    if (usingViewWidget) {
+      this.currentWidget = {
+        name: widget,
+        widgetInstance: this.createWidget(constructor as Constructor<ViewWidget>, undefined, {
+          dslNode: props
+        })
+      };
+    } else {
+      this.currentWidget = {
+        name: widget,
+        widgetInstance: this.createWidget(constructor as Constructor<BaseMaskWidget>, undefined, props)
+      };
+    }
+  }
+
+  public render(ctx?: Record<string, unknown>, slots?: Slots): VNode | VNode[] {
+    this.widget = (ctx?.dslDefinition as DslDefinition)?.widget;
+    this.createOrUpdateWidget(ctx || {});
+    if (this.currentWidget) {
+      const finalSlots = slots;
+      slots = {
+        default: () => {
+          const children = this.currentWidget?.widgetInstance.render(ctx, finalSlots);
+          if (children) {
+            if (Array.isArray(children)) {
+              return children;
+            }
+            return [children];
+          }
+          return [];
+        }
+      };
+    }
+    return super.render(ctx, slots);
+  }
+}

package/src/component/layout/widget/index.ts

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

package/src/component/menu/DefaultMenu.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="k-oinone-menu-wrapper">
+    <div class="menu-search" v-if="showSearch">
+      <a-select
+        ref="menuSelectSearch"
+        class="oio-select"
+        dropdownClassName="default-menu-select-dropdown"
+        option-filter-prop="label"
+        allowClear
+        :placeholder="translateValueByKey('搜索菜单')"
+        :show-search="true"
+        v-model:value="searchSelectValue"
+        :search-value="searchValue"
+        @search="onSearchValueChange"
+        @change="innerSearchSelect"
+      >
+        <a-select-option v-for="item in searchMenus" :key="item.name" :value="item.name" :label="item.displayName">
+          {{ item.displayName }}
+        </a-select-option>
+        <template #suffixIcon>
+          <oio-icon icon="oinone-sousuo" size="12px" color="var(--oio-menu-default-icon-color)" />
+        </template>
+      </a-select>
+    </div>
+    <div class="menu-area oio-scrollbar">
+      <div class="menu-content" :class="collapsed && 'collapsed'">
+        <oio-spin :loading="loading">
+          <!-- 
+            oinone-menu-theme1: 菜单1 连接线, 
+            oinone-menu-theme2: 菜单二 不含背景颜色, 菜单左侧是圆点 + 竖线, 
+            oinone-menu-theme3: 含背景颜色, 菜单左侧是圆点 , 
+            oinone-menu-theme4: 含背景颜色, 箭头在左侧 
+            oinone-menu-theme5: 不含背景颜色，菜单左侧是空心圆
+          -->
+          <a-menu
+            :class="['oinone-menu', menuThemeClass]"
+            mode="inline"
+            :inlineIndent="0"
+            :inline-collapsed="collapsed"
+            :selectedKeys="selectedKeys"
+            :openKeys="currentOpenKeys"
+            @click="onMenuSelected"
+            @open-change="onOpenChange"
+          >
+            <template v-for="item in treeNodes" :key="item.key">
+              <a-menu-item
+                v-if="item.isLeaf"
+                :key="item.key"
+                :title="item.value.title"
+                class="root-menu root-menu-item"
+              >
+                <oio-icon
+                  size="14px"
+                  :icon="item.value.icon || DEFAULT_MENU_ICON"
+                  color="var(--oio-menu-default-icon-color)"
+                />
+                <span>{{ item.value.title }}</span>
+              </a-menu-item>
+              <default-sub-menu v-else :tree-node="item" :key="item.key" />
+            </template>
+          </a-menu>
+        </oio-spin>
+      </div>
+    </div>
+    <div class="menu-footer" :class="collapsed && 'collapsed'">
+      <div class="menu-toggle-collapsed" @click="onCollapsedChange(!collapsed)">
+        <span class="collapsed-icon">
+          <oio-icon
+            :icon="collapsed ? 'oinone-menu-caidanzhankai' : 'oinone-menu-caidanshouqi'"
+            size="16px"
+            color="var(--oio-menu-default-icon-color)"
+          />
+        </span>
+        <span v-show="!collapsed" class="collapsed-text">{{ translateValueByKey('点击收起菜单') }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { translateValueByKey } from '@oinone/kunlun-engine';
+import { OioIcon, OioSpin, TreeNode } from '@oinone/kunlun-vue-ui-antd';
+import { Menu as AMenu, MenuItem as AMenuItem, Select as ASelect, SelectOption as ASelectOption } from 'ant-design-vue';
+import { computed, defineComponent, nextTick, onMounted, PropType, ref, watch } from 'vue';
+import { RuntimeMenu } from '../../typing';
+import DefaultSubMenu from './DefaultSubMenu.vue';
+
+interface SelectMenuItemEvent {
+  keyPath: string[];
+}
+
+export default defineComponent({
+  name: 'DefaultMenu',
+  components: {
+    DefaultSubMenu,
+    OioIcon,
+    OioSpin,
+    AMenu,
+    AMenuItem,
+    ASelect,
+    ASelectOption
+  },
+  inheritAttrs: false,
+  props: {
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    mode: {
+      type: String as PropType<'horizontal' | 'inline'>
+    },
+    collapsed: {
+      type: Boolean,
+      default: undefined
+    },
+    menus: {
+      type: Array as PropType<RuntimeMenu[]>,
+      required: true
+    },
+    treeNodes: {
+      type: Array as PropType<TreeNode<RuntimeMenu>[]>,
+      required: true
+    },
+    selectedKeys: {
+      type: Array as PropType<string[]>
+    },
+    openKeys: {
+      type: Array as PropType<string[]>
+    },
+    translate: {
+      type: Function
+    },
+    onOpenChange: {
+      type: Function
+    },
+    onCollapsedChange: {
+      type: Function
+    },
+    onSelect: {
+      type: Function
+    },
+    onClick: {
+      type: Function
+    },
+    menuThemeClass: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props) {
+    const DEFAULT_MENU_ICON = 'oinone-yijicaidan';
+
+    const showSearch = computed(() => {
+      return props.menus.length && props.mode === 'inline' && !props.collapsed;
+    });
+
+    const searchMenus = computed(() => {
+      return props.menus.filter((v) => !!v.viewAction) || [];
+    });
+
+    // 菜单折叠时，不需要展开的 SubMenu，否则会导致切换多tab的会导致打开SubMenu气泡区域
+    const currentOpenKeys = computed(() => {
+      return props.collapsed ? [] : props.openKeys;
+    });
+
+    const onMenuSelected = ({ keyPath }: SelectMenuItemEvent) => {
+      let targetNode: TreeNode<RuntimeMenu> | undefined;
+      let currentNodes = props.treeNodes;
+      let currentNode: TreeNode<RuntimeMenu> | undefined;
+      for (let i = 0; i < keyPath.length; i++) {
+        const key = keyPath[i];
+        currentNode = currentNodes.find((v) => v.key === key);
+        if (!currentNode) {
+          return;
+        }
+        if (i === keyPath.length - 1) {
+          targetNode = currentNode;
+          break;
+        }
+        currentNodes = currentNode.children;
+      }
+      if (targetNode) {
+        props.onClick?.(targetNode);
+      }
+    };
+
+    const onCollapsedChange = (val: boolean) => {
+      props.onCollapsedChange?.(val);
+    };
+
+    const menuSelectSearch = ref();
+
+    const searchSelectValue = ref();
+    const searchValue = ref('');
+
+    const onSearchValueChange = (val: string) => {
+      searchValue.value = val;
+    };
+
+    const innerSearchSelect = (key: string) => {
+      const targetNode = findTreeNode(props.treeNodes, key);
+      if (targetNode) {
+        props.onSelect?.(targetNode);
+      }
+      menuSelectSearch.value.blur?.();
+    };
+
+    const findTreeNode = (nodes: TreeNode<RuntimeMenu>[], key: string): TreeNode<RuntimeMenu> | undefined => {
+      for (const node of nodes) {
+        if (node.key === key) {
+          return node;
+        }
+        if (node.children.length) {
+          const target = findTreeNode(node.children, key);
+          if (target) {
+            return target;
+          }
+        }
+      }
+    };
+
+    onMounted(() => {
+      nextTick(() => {
+        onCollapsedChange(false);
+      });
+    });
+
+    watch(
+      () => props.menus,
+      () => {
+        searchSelectValue.value = undefined;
+        searchValue.value = '';
+      }
+    );
+
+    return {
+      DEFAULT_MENU_ICON,
+      onCollapsedChange,
+      currentOpenKeys,
+      showSearch,
+      searchMenus,
+      menuSelectSearch,
+      searchSelectValue,
+      searchValue,
+      onSearchValueChange,
+      innerSearchSelect,
+
+      onMenuSelected,
+      translateValueByKey
+    };
+  }
+});
+</script>