@oinone/kunlun-vue-admin-layout 6.2.0

package/src/component/debug/view/debug-view/DebugView.vue

@@ -0,0 +1,331 @@
+<template>
+  <div class="oio-debug-view" v-if="activeDebugTab === 'debugView'">
+    <div class="oio-debug-view-wrapper">
+      <oio-group v-if="isShowPageParameters" class="oio-debug-page-parameters" title="页面参数">
+        <oio-form class="oio-debug-info-form">
+          <oio-form-item
+            v-for="parameter of resolvedPageParameters"
+            :key="parameter.key"
+            :label="parameter.label"
+            :class="['oio-debug-page-parameters-item', parameter.isObject && 'oio-debug-page-parameters-object']"
+          >
+            <pre v-if="parameter.isObject">{{ parameter.value }}</pre>
+            <span v-else>{{ parameter.value }}</span>
+          </oio-form-item>
+        </oio-form>
+        <template #titleToolbar>
+          <oio-button type="primary" size="small" async @click="onRefresh">刷新页面信息</oio-button>
+        </template>
+      </oio-group>
+      <oio-group v-if="isShowViewAction" class="oio-debug-view-action" title="页面信息">
+        <oio-form class="oio-debug-info-form">
+          <oio-form>
+            <oio-row>
+              <oio-col v-for="parameters of resolvedViewAction" flex="1" :key="parameters.key">
+                <oio-form-item v-for="parameter of parameters.value" :key="parameter.key" :label="parameter.label">
+                  <span>{{ parameter.value }}</span>
+                </oio-form-item>
+              </oio-col>
+            </oio-row>
+          </oio-form>
+        </oio-form>
+      </oio-group>
+    </div>
+    <oio-tabs v-if="isShowViewAction" class="oio-debug-tabs" destroyInactiveTabPane>
+      <oio-tab tab="DSL" key="1">
+        <debug-json-view :text="resolvedDsl" text-class="oio-debug-textarea" />
+      </oio-tab>
+      <oio-tab tab="Layout" key="2">
+        <debug-json-view :text="resolvedLayout" text-class="oio-debug-textarea" />
+      </oio-tab>
+      <oio-tab tab="Mask" key="3">
+        <debug-json-view :text="resolvedMask" text-class="oio-debug-textarea" />
+      </oio-tab>
+    </oio-tabs>
+    <oio-tabs v-if="isShowResolvedRuntimeContextPanel" class="oio-debug-tabs" destroyInactiveTabPane>
+      <oio-tab v-for="panel of runtimeContextPanels" :tab="panel.title" :key="panel.key">
+        <component v-if="panel.component" :is="panel.component" v-bind="constructPanelProps(panel)" />
+        <debug-default-info v-else v-bind="panel" />
+      </oio-tab>
+    </oio-tabs>
+  </div>
+</template>
+<script lang="ts">
+import { RuntimeModule, RuntimeViewAction, ViewActionQueryParameter } from '@oinone/kunlun-engine';
+import { TreeNode } from '@oinone/kunlun-shared';
+import {
+  OioButton,
+  OioCol,
+  OioForm,
+  OioFormItem,
+  OioGroup,
+  OioRow,
+  OioTab,
+  OioTabs,
+  OioTextarea
+} from '@oinone/kunlun-vue-ui-antd';
+import { get as getValue, isArray, isPlainObject } from 'lodash-es';
+import { computed, defineComponent, PropType } from 'vue';
+import { RuntimeMenu } from '../../../../typing';
+import { DebugErrorPanel } from '../../typing';
+import DebugDefaultInfo from '../components/DebugDefaultInfo.vue';
+import DebugJsonView from '../components/DebugJsonView.vue';
+import { DebugUtils } from '../debug-utils';
+
+interface ParameterItem {
+  key: string;
+  label: string;
+  value: string;
+  isObject: boolean;
+}
+
+export default defineComponent({
+  name: 'DebugView',
+  components: {
+    OioButton,
+    OioForm,
+    OioFormItem,
+    OioGroup,
+    OioRow,
+    OioCol,
+    OioTabs,
+    OioTab,
+    OioTextarea,
+    DebugDefaultInfo,
+    DebugJsonView
+  },
+  inheritAttrs: false,
+  props: {
+    activeDebugTab: {
+      type: String
+    },
+    pageParameters: {
+      type: Object as PropType<ViewActionQueryParameter | null>
+    },
+    viewAction: {
+      type: Object as PropType<RuntimeViewAction | null>
+    },
+    module: {
+      type: Object as PropType<RuntimeModule | null>
+    },
+    menus: {
+      type: Object as PropType<TreeNode<RuntimeMenu>[] | null>
+    },
+    runtimeContextPanels: {
+      type: Array as PropType<DebugErrorPanel[]>
+    },
+    onRefresh: {
+      type: Function
+    }
+  },
+  setup(props) {
+    const isShowPageParameters = computed(() => {
+      return !!props.pageParameters;
+    });
+
+    const isShowViewAction = computed(() => {
+      return !!props.viewAction;
+    });
+
+    const isShowModule = computed(() => {
+      return !!props.module;
+    });
+
+    const isShowMenus = computed(() => {
+      return !!props.menus?.length;
+    });
+
+    const isShowResolvedRuntimeContextPanel = computed(() => {
+      return !!props.runtimeContextPanels?.length;
+    });
+
+    const convertLabelByKey = (key: string | [string, string]): Omit<ParameterItem, 'value' | 'isObject'> => {
+      if (isArray(key)) {
+        return {
+          key: key[0],
+          label: `${key[1]}:`
+        };
+      }
+      return {
+        key,
+        label: `${key}:`
+      };
+    };
+
+    const convertParameterItem = (data: Record<string, unknown>, key: string | [string, string]): ParameterItem => {
+      let value;
+      if (isArray(key)) {
+        value = `${getValue(data, key[0]) ?? ''}`;
+      } else {
+        value = `${getValue(data, key) ?? ''}`;
+      }
+      return {
+        ...convertLabelByKey(key),
+        value,
+        isObject: false
+      };
+    };
+
+    const convertParameterItems = (data, ...keys: (string | [string, string])[]): ParameterItem[] => {
+      return keys.map((key) => convertParameterItem(data, key));
+    };
+
+    const beautifyJSON = (data: unknown) => {
+      if (typeof data === 'string') {
+        try {
+          return DebugUtils.toJSONString(JSON.parse(data));
+        } catch (ignored) {}
+        return data;
+      }
+      return DebugUtils.toJSONString(data);
+    };
+
+    const resolvedPageParameters = computed(() => {
+      if (!props.pageParameters) {
+        return [];
+      }
+      const parameters: ParameterItem[] = [];
+      for (const key in props.pageParameters) {
+        let value = decodeURIComponent(props.pageParameters[key]! as string);
+        if (value == null) {
+          continue;
+        }
+        let isObject = false;
+        try {
+          const jsonData = JSON.parse(value);
+          if (isPlainObject(jsonData) || Array.isArray(jsonData)) {
+            value = beautifyJSON(jsonData);
+            isObject = true;
+          }
+        } catch (ignored) {}
+        parameters.push({
+          ...convertLabelByKey(key),
+          value,
+          isObject
+        });
+      }
+      return parameters;
+    });
+
+    const resolvedViewAction = computed(() => {
+      if (!props.viewAction) {
+        return [[], [], []].map((value, index) => ({ key: `${index + 1}`, value }));
+      }
+      return [
+        convertParameterItems(
+          props.viewAction,
+          'id',
+          'model',
+          'name',
+          'title',
+          'displayName',
+          'contextType',
+          'target',
+          'domain',
+          'filter'
+        ),
+        convertParameterItems(
+          props.viewAction,
+          'module',
+          'moduleName',
+          'resModule',
+          'resModuleName',
+          ['resView.id', 'resViewId'],
+          ['resView.model', 'resViewModel'],
+          ['resView.name', 'resViewName'],
+          ['resView.type', 'resViewType']
+        ),
+        convertParameterItems(props.viewAction, ['mask', 'maskName'], ['resView.baseLayoutName', 'layoutName'])
+      ].map((value, index) => ({ key: `${index + 1}`, value }));
+    });
+
+    const resolvedDsl = computed(() => {
+      const dsl = props.viewAction?.resView?.dsl;
+      if (dsl) {
+        return beautifyJSON(dsl);
+      }
+      return undefined;
+    });
+
+    const resolvedLayout = computed(() => {
+      const layout = props.viewAction?.resView?.layout;
+      if (layout) {
+        return beautifyJSON(layout);
+      }
+      return undefined;
+    });
+
+    const resolvedMask = computed(() => {
+      return props.viewAction?.resMaskDefinition?.template;
+    });
+
+    const constructPanelProps = (panel: DebugErrorPanel) => {
+      const properties = { ...panel };
+      delete properties.component;
+      return properties;
+    };
+
+    return {
+      isShowPageParameters,
+      isShowViewAction,
+      isShowModule,
+      isShowMenus,
+      isShowResolvedRuntimeContextPanel,
+
+      resolvedPageParameters,
+      resolvedViewAction,
+      resolvedDsl,
+      resolvedLayout,
+      resolvedMask,
+      constructPanelProps
+    };
+  }
+});
+</script>
+<style lang="scss">
+.oio-debug-view {
+  display: flex;
+  flex-direction: column;
+  row-gap: 24px;
+
+  .oio-debug-view-wrapper {
+    display: flex;
+    column-gap: 16px;
+    align-items: flex-start;
+
+    & > div {
+      flex: 1;
+    }
+
+    .oio-debug-view-action,
+    .oio-debug-page-parameters {
+      .oio-group-title-wrapper {
+        height: 48px;
+      }
+      .oio-group-content {
+        height: 440px;
+        overflow-y: auto;
+      }
+    }
+    .oio-debug-view-action {
+      flex: 3;
+    }
+    .oio-debug-page-parameters {
+      max-width: 500px;
+      &-item {
+        .ant-form-item-control-input-content {
+          word-break: break-all;
+        }
+      }
+      &-object > .ant-form-item-control {
+        padding-top: 5px;
+      }
+    }
+  }
+
+  .oio-debug-info-form.oio-form .oio-form-item.oio-form-item-horizontal > .ant-form-item-label {
+    width: 120px;
+    max-width: unset;
+  }
+}
+</style>

package/src/component/debug/view/debug-view/DebugViewWidget.ts

@@ -0,0 +1,181 @@
+import {
+  ModuleCache,
+  RuntimeContext,
+  RuntimeContextManager,
+  RuntimeContextServiceToken,
+  RuntimeModule,
+  RuntimeViewAction,
+  ViewActionCache,
+  ViewActionQueryParameter
+} from '@oinone/kunlun-engine';
+import { useSessionPath } from '@oinone/kunlun-request';
+import { Router } from '@oinone/kunlun-router';
+import { TreeNode, uniqueKeyGenerator } from '@oinone/kunlun-shared';
+import { SPI } from '@oinone/kunlun-spi';
+import { VueWidget, Widget } from '@oinone/kunlun-vue-widget';
+import { MenuService } from '../../../../service';
+import { RuntimeMenu } from '../../../../typing';
+import { DebugErrorPanel } from '../../typing';
+import { DebugUtils } from '../debug-utils';
+import { DebugRuntimeContextServiceToken } from '../service/DebugRuntimeContextService';
+import { DebugInfoStorage } from '../storage';
+import DebugView from './DebugView.vue';
+
+export class DebugViewWidget extends VueWidget {
+  protected router!: Router;
+
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(DebugView);
+    return this;
+  }
+
+  @Widget.Inject()
+  @Widget.Reactive()
+  protected activeDebugTab?: string;
+
+  @Widget.Reactive()
+  private pageParameters: ViewActionQueryParameter | null | undefined;
+
+  @Widget.Reactive()
+  private viewAction: RuntimeViewAction | null | undefined;
+
+  @Widget.Reactive()
+  private module: RuntimeModule | null | undefined;
+
+  @Widget.Reactive()
+  private menus: TreeNode<RuntimeMenu>[] | null | undefined;
+
+  @Widget.Reactive()
+  private runtimeContextPanels: DebugErrorPanel[] | undefined;
+
+  private runtimeContext: RuntimeContext | undefined;
+
+  @Widget.Method()
+  public async onRefresh() {
+    const page = DebugUtils.getPageParameters();
+    if (!page) {
+      this.pageParameters = null;
+      this.viewAction = null;
+      return;
+    }
+    this.pageParameters = page;
+    DebugUtils.getDebugStorage().pageParameters = page;
+    await this.resolvePageParameters(page);
+  }
+
+  protected async resolveViewAction(page: ViewActionQueryParameter): Promise<boolean> {
+    const { model, action, path } = page;
+    if (!model || !action) {
+      return false;
+    }
+    try {
+      const viewAction = await useSessionPath(path, () => ViewActionCache.get(model, action, true));
+      if (viewAction) {
+        this.viewAction = viewAction;
+        DebugUtils.getDebugStorage().viewAction = viewAction;
+        this.resolveDsl(viewAction);
+        return true;
+      }
+    } catch (e) {
+      console.error('Fetch view action error.', e);
+    }
+    this.viewAction = null;
+    return false;
+  }
+
+  protected async resolveModule(page: ViewActionQueryParameter): Promise<boolean> {
+    const { module: moduleName } = page;
+    if (!moduleName) {
+      this.module = null;
+      return false;
+    }
+    const module = await ModuleCache.get(moduleName);
+    if (module) {
+      this.module = module;
+      return true;
+    }
+    this.module = null;
+    return false;
+  }
+
+  protected async resolveMenu(page: ViewActionQueryParameter): Promise<boolean> {
+    const { module: moduleName } = page;
+    if (!moduleName) {
+      this.menus = null;
+      return false;
+    }
+    this.menus = MenuService.convert(await MenuService.queryMenus(moduleName));
+    return true;
+  }
+
+  protected resolveDsl(viewAction: RuntimeViewAction) {
+    this.runtimeContextPanels = [];
+    const handle = this.runtimeContext?.handle;
+    if (handle) {
+      RuntimeContextManager.delete(handle);
+      this.runtimeContext = undefined;
+      DebugUtils.getDebugStorage().runtimeContext = undefined;
+    }
+    const dsl = viewAction.resView?.dsl;
+    if (!dsl) {
+      return;
+    }
+    const runtimeContext = SPI.RawInstantiate(RuntimeContextServiceToken)?.createRuntimeContextByViewAction(
+      viewAction,
+      false,
+      uniqueKeyGenerator()
+    );
+    if (!runtimeContext) {
+      return;
+    }
+    runtimeContext.deepResolve();
+    DebugUtils.getDebugStorage().runtimeContext = runtimeContext;
+    const panels: DebugErrorPanel[] = [];
+    this.resolveRuntimeContext(panels, runtimeContext);
+    this.runtimeContextPanels = panels;
+  }
+
+  protected resolveRuntimeContext(runtimeContextPanels: DebugErrorPanel[], runtimeContext: RuntimeContext) {
+    const services = SPI.RawInstantiates(DebugRuntimeContextServiceToken);
+    let index = 1;
+    for (const service of services) {
+      const panel = service.analysis(runtimeContext) as unknown as DebugErrorPanel;
+      if (panel) {
+        panel.key = `${index++}`;
+        runtimeContextPanels.push(panel);
+      }
+    }
+  }
+
+  protected async resolvePageParameters(page: ViewActionQueryParameter) {
+    await this.resolveViewAction(page);
+    // if (!(await this.resolveViewAction(page))) {
+    //   return;
+    // }
+    // await this.resolveModule(page);
+    // await this.resolveMenu(page);
+  }
+
+  protected onStorageUpdate = async (storage: DebugInfoStorage) => {
+    const that = this.getOperator<this>();
+    const { pageParameters, viewAction, runtimeContext } = storage;
+    that.pageParameters = pageParameters;
+    that.viewAction = viewAction;
+    that.runtimeContext = runtimeContext;
+    if (runtimeContext) {
+      const panels: DebugErrorPanel[] = [];
+      that.resolveRuntimeContext(panels, runtimeContext);
+      that.runtimeContextPanels = panels;
+    }
+  };
+
+  protected async mounted() {
+    await this.onRefresh();
+    DebugUtils.getDebugStorage().onUpdate(this.onStorageUpdate.bind(this));
+  }
+
+  protected unmounted() {
+    DebugUtils.getDebugStorage().clearOnUpdate(this.onStorageUpdate.bind(this));
+  }
+}

package/src/component/debug/view/index.ts

@@ -0,0 +1,6 @@
+export * from './service';
+export * from './useDebugRequestInfo';
+export * from './debug-utils';
+
+export * from './DebugMainViewWidget';
+export { default as DebugMainView } from './DebugMainView.vue';

package/src/component/debug/view/service/DebugRuntimeContextService.ts

@@ -0,0 +1,21 @@
+import { RuntimeContext } from '@oinone/kunlun-engine';
+import { ServiceIdentifier } from '@oinone/kunlun-spi';
+import { DebugErrorAnalysisResult } from '../../typing';
+
+/**
+ * 调试运行时上下文异常分析服务
+ */
+export interface DebugRuntimeContextService {
+  /**
+   * 异常分析
+   * @param runtimeContext 运行时上下文
+   * @return 错误面板信息
+   */
+  analysis(runtimeContext: RuntimeContext): DebugErrorAnalysisResult | undefined;
+}
+
+/**
+ * 调试运行时上下文异常分析服务Token
+ */
+export const DebugRuntimeContextServiceToken =
+  ServiceIdentifier<DebugRuntimeContextService>('DebugRuntimeContextService');

package/src/component/debug/view/service/DebugStackInfoService.ts

@@ -0,0 +1,33 @@
+import { ServiceIdentifier } from '@oinone/kunlun-spi';
+import { DebugErrorAnalysisResult, DebugResponseError } from '../../typing';
+
+/**
+ * 调试异常分析服务
+ */
+export interface DebugStackInfoService {
+  /**
+   * 异常分析
+   * @param error 当前异常信息
+   * @param errors 全部异常信息
+   * @return 错误面板信息
+   */
+  analysis(error: DebugResponseError, errors: DebugResponseError[]): DebugErrorAnalysisResult | undefined;
+
+  /**
+   * 解析栈信息
+   * @param error 当前异常信息
+   * @param errors 全部异常信息
+   */
+  parseStackInfo(error: DebugResponseError, errors: DebugResponseError[]): unknown;
+}
+
+/**
+ * 调试异常分析服务Token
+ */
+export const DebugStackInfoServiceToken = ServiceIdentifier<DebugStackInfoService>('DebugStackInfoService');
+
+export const DebugDefaultStackInfoServiceType = '__default__';
+
+export const DebugUnhandledExceptionTitle = '未解析异常';
+
+export const DebugUnhandledExceptionMessage = '所有未经解析处理的异常信息';

package/src/component/debug/view/service/impl/runtime-context/DebugDefaultRuntimeContextService.ts

@@ -0,0 +1,16 @@
+import { RuntimeContext } from '@oinone/kunlun-engine';
+import { SPI } from '@oinone/kunlun-spi';
+import { DebugErrorAnalysisResult } from '../../../../typing';
+import { DebugUtils } from '../../../debug-utils';
+import { DebugRuntimeContextService, DebugRuntimeContextServiceToken } from '../../DebugRuntimeContextService';
+
+@SPI.Service(DebugRuntimeContextServiceToken, { priority: 1000 })
+export class DebugDefaultRuntimeContextService implements DebugRuntimeContextService {
+  public analysis(runtimeContext: RuntimeContext): DebugErrorAnalysisResult | undefined {
+    return {
+      title: '完整上下文',
+      message: '运行时上下文全部内容',
+      stackInfo: DebugUtils.runtimeContextToJSONString(runtimeContext)
+    };
+  }
+}

package/src/component/debug/view/service/impl/runtime-context/DebugRuntimeActionService.ts

@@ -0,0 +1,28 @@
+import { RuntimeContext } from '@oinone/kunlun-engine';
+import { SPI } from '@oinone/kunlun-spi';
+import { DebugErrorAnalysisResult } from '../../../../typing';
+import { DebugUtils } from '../../../debug-utils';
+import { DebugRuntimeContextService, DebugRuntimeContextServiceToken } from '../../DebugRuntimeContextService';
+
+@SPI.Service(DebugRuntimeContextServiceToken, { priority: 20 })
+export class DebugRuntimeActionService implements DebugRuntimeContextService {
+  public analysis(runtimeContext: RuntimeContext): DebugErrorAnalysisResult | undefined {
+    return {
+      title: '页面动作',
+      message: '运行时上下文动作',
+      stackInfo: DebugUtils.toJSONString(this.simplifyActions(runtimeContext))
+    };
+  }
+
+  protected simplifyActions(runtimeContext: RuntimeContext) {
+    return {
+      handle: runtimeContext.handle,
+      modelActions: runtimeContext.model.modelActions.map((v) => {
+        const simplifyAction = { ...v };
+        delete simplifyAction.modelDefinition;
+        return simplifyAction;
+      }),
+      childrenContext: runtimeContext.childrenContext.map((v) => this.simplifyActions(v))
+    };
+  }
+}

package/src/component/debug/view/service/impl/runtime-context/DebugRuntimeDslService.ts

@@ -0,0 +1,16 @@
+import { RuntimeContext } from '@oinone/kunlun-engine';
+import { SPI } from '@oinone/kunlun-spi';
+import { DebugErrorAnalysisResult } from '../../../../typing';
+import { DebugUtils } from '../../../debug-utils';
+import { DebugRuntimeContextService, DebugRuntimeContextServiceToken } from '../../DebugRuntimeContextService';
+
+@SPI.Service(DebugRuntimeContextServiceToken, { priority: 40 })
+export class DebugRuntimeDslService implements DebugRuntimeContextService {
+  public analysis(runtimeContext: RuntimeContext): DebugErrorAnalysisResult | undefined {
+    return {
+      title: '运行时DSL',
+      message: '运行时上下文DSL',
+      stackInfo: DebugUtils.toJSONString(runtimeContext.viewDsl)
+    };
+  }
+}

package/src/component/debug/view/service/impl/runtime-context/DebugRuntimeFieldService.ts

@@ -0,0 +1,33 @@
+import { RuntimeContext } from '@oinone/kunlun-engine';
+import { SPI } from '@oinone/kunlun-spi';
+import { DebugErrorAnalysisResult } from '../../../../typing';
+import { DebugUtils } from '../../../debug-utils';
+import { DebugRuntimeContextService, DebugRuntimeContextServiceToken } from '../../DebugRuntimeContextService';
+
+@SPI.Service(DebugRuntimeContextServiceToken, { priority: 10 })
+export class DebugRuntimeFieldService implements DebugRuntimeContextService {
+  public analysis(runtimeContext: RuntimeContext): DebugErrorAnalysisResult | undefined {
+    const simplifyFields = this.simplifyFields(runtimeContext);
+    return {
+      title: '页面字段',
+      message: '运行时上下文字段',
+      simplifyFields,
+      stackInfo: DebugUtils.toJSONString(simplifyFields)
+      // component: defineAsyncComponent(
+      //   () => import('../../../components/runtime-context/DebugRuntimeFieldComponent.vue')
+      // )
+    };
+  }
+
+  protected simplifyFields(runtimeContext: RuntimeContext) {
+    return {
+      handle: runtimeContext.handle,
+      modelFields: runtimeContext.model.modelFields.map((v) => {
+        const simplifyField = { ...v };
+        delete simplifyField.modelDefinition;
+        return simplifyField;
+      }),
+      childrenContext: runtimeContext.childrenContext.map((v) => this.simplifyFields(v))
+    };
+  }
+}

package/src/component/debug/view/service/impl/runtime-context/DebugRuntimeLayoutService.ts

@@ -0,0 +1,16 @@
+import { RuntimeContext } from '@oinone/kunlun-engine';
+import { SPI } from '@oinone/kunlun-spi';
+import { DebugErrorAnalysisResult } from '../../../../typing';
+import { DebugUtils } from '../../../debug-utils';
+import { DebugRuntimeContextService, DebugRuntimeContextServiceToken } from '../../DebugRuntimeContextService';
+
+@SPI.Service(DebugRuntimeContextServiceToken, { priority: 50 })
+export class DebugRuntimeLayoutService implements DebugRuntimeContextService {
+  public analysis(runtimeContext: RuntimeContext): DebugErrorAnalysisResult | undefined {
+    return {
+      title: '运行时Layout',
+      message: '运行时上下文Layout',
+      stackInfo: DebugUtils.toJSONString(runtimeContext.viewLayout)
+    };
+  }
+}