@oinone/kunlun-vue-admin-layout 6.2.0

package/src/component/debug/DebugWidget.ts

@@ -0,0 +1,38 @@
+import { RedirectTargetEnum } from '@oinone/kunlun-engine';
+import { Router } from '@oinone/kunlun-router';
+import { SPI } from '@oinone/kunlun-spi';
+import { useRouter } from '@oinone/kunlun-vue-router';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { MaskWidget } from '../../basic';
+import { DEBUG_ROUTER } from './constants';
+import Debug from './Debug.vue';
+
+@SPI.ClassFactory(MaskWidget.Token({ widget: 'debug' }))
+export class DebugWidget extends MaskWidget {
+  protected router!: Router;
+
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(Debug);
+    return this;
+  }
+
+  @Widget.Method()
+  public onClick() {
+    this.router.push(
+      {
+        segments: [
+          {
+            path: DEBUG_ROUTER,
+            extra: { preserveParameter: true }
+          }
+        ]
+      },
+      RedirectTargetEnum.BLANK
+    );
+  }
+
+  protected beforeCreated() {
+    this.router = useRouter().router;
+  }
+}

package/src/component/debug/constants.ts

@@ -0,0 +1,3 @@
+export const DEBUG_ROUTER = 'debug';
+
+export const DEBUG_VIEW_WIDGET = 'Debug';

package/src/component/debug/index.ts

@@ -0,0 +1,6 @@
+export * from './spi';
+export * from './view';
+export * from './constants';
+export * from './typing';
+export * from './DebugWidget';
+export { default as Debug } from './Debug.vue';

package/src/component/debug/spi/DebugMaskEditor.ts

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

package/src/component/debug/spi/DebugRouterInitializeService.ts

@@ -0,0 +1,21 @@
+import { FrameworkInitializeService, FrameworkInitializeSPI, OioProviderProps } from '@oinone/kunlun-engine';
+import { SPIFactory } from '@oinone/kunlun-spi';
+import { DebugConfigManager } from '../../../config';
+import { DEBUG_ROUTER, DEBUG_VIEW_WIDGET } from '../constants';
+
+@SPIFactory.Register(FrameworkInitializeSPI.Token({ framework: 'vue', isMobile: false, priority: 200 }))
+export class DebugRouterInitializeService implements FrameworkInitializeService {
+  public before(props: OioProviderProps) {
+    if (DebugConfigManager.isEnabled()) {
+      let { router } = props;
+      if (!router) {
+        router = [];
+        props.router = router;
+      }
+      router.push({
+        path: `/${DEBUG_ROUTER}`,
+        widget: DEBUG_VIEW_WIDGET
+      });
+    }
+  }
+}

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

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

package/src/component/debug/typing.ts

@@ -0,0 +1,191 @@
+import { ILevel } from '@oinone/kunlun-request';
+import { OperationTypeNode } from 'graphql';
+import { Component } from 'vue';
+
+export interface DebugFetchRequest {
+  url: string;
+  body: RequestInit;
+  level: number;
+}
+
+export type RequestResolveResult = Omit<DebugFetchRequest, 'level'>;
+
+export interface DebugErrorPanel {
+  key: string;
+  title: string;
+  message?: string;
+  stackInfo?: string;
+  component?: Component;
+}
+
+export type DebugErrorAnalysisResult = Omit<DebugErrorPanel, 'key'> & Record<string, unknown>;
+
+export interface DebugRequestFunction {
+  key: string;
+  gqlIndex: number;
+  method: OperationTypeNode;
+  namespace: string;
+  name: string;
+  args?: string[];
+  responseData?: string;
+}
+
+export interface DebugRequestGraphQLInfo {
+  /**
+   * key
+   */
+  key: string;
+
+  /**
+   * tab title
+   */
+  title: string;
+
+  /**
+   * gql
+   */
+  gql: string;
+
+  /**
+   * variables
+   */
+  variables?: string;
+
+  /**
+   * 已处理异常
+   */
+  handledExceptions?: DebugErrorPanel[];
+}
+
+export interface DebugRequestGQLBody {
+  operationName?: string;
+
+  query?: string;
+
+  variables?: Record<string, unknown>;
+}
+
+export interface DebugRequestInfo {
+  /**
+   * 请求URL
+   */
+  url?: string;
+
+  /**
+   * debug请求URL
+   */
+  debugUrl?: string;
+
+  /**
+   * 请求方式
+   */
+  method?: string;
+
+  /**
+   * 请求函数
+   */
+  functions?: DebugRequestFunction[];
+
+  /**
+   * 完整请求时间
+   */
+  allDuration?: number;
+
+  /**
+   * 连接时间
+   */
+  connectDuration?: number;
+
+  /**
+   * 请求时间
+   */
+  requestDuration?: number;
+
+  /**
+   * 响应时间
+   */
+  responseDuration?: number;
+
+  /**
+   * 异常编码
+   */
+  errorCode?: string;
+
+  /**
+   * 异常信息
+   */
+  errorMessage?: string;
+
+  /**
+   * 请求头
+   */
+  header?: string;
+
+  /**
+   * GraphQL信息
+   */
+  gqlInfos?: DebugRequestGraphQLInfo[];
+
+  /**
+   * 已处理异常
+   */
+  handledExceptions?: DebugErrorPanel[];
+}
+
+export interface DebugFetchResponse {
+  data?: string | null;
+  hint?: string | null;
+}
+
+export interface DebugResponseData {
+  data: {
+    [namespace: string]: {
+      [name: string]: unknown;
+    };
+  };
+  errors?: DebugResponseError[];
+  extensions?: {
+    debug?: DebugResponseError[];
+  };
+}
+
+export interface DebugResponseError {
+  message?: string;
+  extensions?: {
+    errorCode?: string;
+    errorType?: string;
+    extra?: string;
+    level?: ILevel;
+    messages?: {
+      level?: ILevel;
+      errorType?: string;
+      errorCode?: string;
+      message?: string;
+    }[];
+    extend?: string;
+    stackTraceKey?: string;
+    stackTraceMsg?: string;
+    classification?: string;
+  };
+}
+
+export interface DebugFieldWidgetGroup {
+  model: string;
+  fields: DebugFieldWidget[];
+}
+
+export interface DebugFieldWidget {
+  dsl: string;
+}
+
+export const DebugInfoProps = {
+  title: {
+    type: String
+  },
+  message: {
+    type: String
+  },
+  stackInfo: {
+    type: String
+  }
+};

package/src/component/debug/view/DebugMainView.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="oio-debug-main-view">
+    <div class="oio-debug-main-view-toolbar">
+      <a-tooltip title="包含页面调试数据和接口调试数据">
+        <oio-button type="primary" @click="onDownload">下载全部调试数据</oio-button>
+      </a-tooltip>
+      <oio-button type="primary" @click="onImport">导入调试数据</oio-button>
+      <input id="import-debug-info" type="file" style="display: none" accept=".json,application/json" />
+    </div>
+    <oio-tabs :activeKey="activeDebugTab" @update:active-key="changeActiveDebugTab">
+      <oio-tab tab="页面调试" key="debugView" force-render>
+        <slot name="debugView" />
+      </oio-tab>
+      <oio-tab tab="接口调试" key="debugApi" force-render>
+        <slot name="debugApi" />
+      </oio-tab>
+    </oio-tabs>
+  </div>
+</template>
+<script lang="ts">
+import { RuntimeContext } from '@oinone/kunlun-engine';
+import {
+  CleanableEvent,
+  OioButton,
+  OioTab,
+  OioTabs,
+  Optional,
+  uniqueKeyGenerator,
+  useCleanableEvent
+} from '@oinone/kunlun-vue-ui-antd';
+import { defineComponent, onMounted, onUnmounted, PropType } from 'vue';
+import 'vue-json-pretty/lib/styles.css';
+import { DebugResponseData } from '../typing';
+import { DebugUtils } from './debug-utils';
+
+export default defineComponent({
+  name: 'DebugMainView',
+  components: {
+    OioButton,
+    OioTabs,
+    OioTab
+  },
+  inheritAttrs: false,
+  props: {
+    activeDebugTab: {
+      type: String
+    },
+    changeActiveDebugTab: {
+      type: Function
+    },
+    responseAnalysis: {
+      type: Function as PropType<(responseBody: DebugResponseData | DebugResponseData[]) => Promise<string>>
+    }
+  },
+  setup(props) {
+    let importChangeEvent: CleanableEvent | undefined;
+
+    const getDownloadResponseData = () => {
+      const { pageParameters, viewAction, requestInfo, responseData, runtimeContext } = DebugUtils.getDebugStorage();
+      try {
+        return DebugUtils.toJSONString({
+          ...DebugUtils.generatorDownloadRequestInfo(requestInfo, responseData),
+          pageParameters,
+          viewAction,
+          runtimeContext: Optional.ofNullable(runtimeContext)
+            .map<RuntimeContext | string>((v) => DebugUtils.simplifyRuntimeContext(v))
+            .orElse('no runtime context')
+        });
+      } catch (e) {
+        return DebugUtils.toJSONString({
+          ...requestInfo,
+          responseData,
+          pageParameters,
+          viewAction,
+          runtimeContext: Optional.ofNullable(runtimeContext)
+            .map<RuntimeContext | string>((v) => DebugUtils.simplifyRuntimeContext(v))
+            .orElse('no runtime context')
+        });
+      }
+    };
+
+    const getDownloadFilename = () => {
+      return `oinone_all_debug_${uniqueKeyGenerator()}.json`;
+    };
+
+    const onDownload = () => {
+      DebugUtils.downloadJSON(getDownloadResponseData(), getDownloadFilename());
+    };
+
+    const onImport = () => {
+      importChangeEvent?.el?.click();
+    };
+
+    onMounted(() => {
+      const reader = new FileReader();
+
+      const fileInput = document.getElementById('import-debug-info');
+      if (!fileInput) {
+        return;
+      }
+
+      importChangeEvent = useCleanableEvent(fileInput, 'change', (e: any) => {
+        const file = e.target?.files[0];
+        if (!file) {
+          return;
+        }
+        e.target.value = null;
+
+        reader.onload = async (e) => {
+          const content = e.target?.result;
+          if (!content) {
+            return;
+          }
+          try {
+            const storage = DebugUtils.getDebugStorage();
+            const data = JSON.parse(content as string);
+            const { responseData, pageParameters, viewAction, runtimeContext, errors } = data;
+            if (!responseData && !pageParameters && !viewAction && !runtimeContext && errors) {
+              await props.responseAnalysis?.(data);
+              storage.forceUpdate();
+            } else {
+              storage.requestInfo = data;
+              if (responseData && typeof responseData === 'string') {
+                storage.responseData = responseData;
+              }
+              if (pageParameters && typeof pageParameters !== 'string') {
+                storage.pageParameters = pageParameters;
+              }
+              if (viewAction && typeof viewAction !== 'string') {
+                storage.viewAction = viewAction;
+              }
+              if (runtimeContext && typeof runtimeContext !== 'string') {
+                storage.runtimeContext = runtimeContext;
+              }
+              storage.forceUpdate();
+            }
+          } catch (e) {
+            console.error('Error parse JSON.', e);
+          }
+        };
+
+        reader.readAsText(file);
+      });
+    });
+
+    onUnmounted(() => {
+      importChangeEvent?.remove();
+    });
+
+    return {
+      onDownload,
+      onImport
+    };
+  }
+});
+</script>
+<style lang="scss">
+$textareaMinHeight: 300px;
+$responseDataMinHeight: 372px;
+$tabMinHeight: 404px;
+$errorTabMinHeight: 404px;
+
+.oio-debug-main-view {
+  padding: 24px;
+  min-width: 1280px;
+  min-height: 100vh;
+  background-color: #f3f7fa;
+  display: flex;
+  flex-direction: column;
+  row-gap: 24px;
+
+  &-toolbar {
+    text-align: right;
+
+    .oio-button:not(:last-child) {
+      margin-right: var(--oio-margin);
+    }
+  }
+
+  .oio-debug-error-text {
+    color: red;
+  }
+
+  .oio-debug-textarea {
+    min-height: $textareaMinHeight;
+  }
+
+  .oio-debug-tabs {
+    .oio-tab-content {
+      min-height: $tabMinHeight;
+    }
+  }
+
+  .vjs-tree {
+    max-height: 500px;
+    overflow-y: auto;
+  }
+
+  .oio-debug-error-tabs {
+    .oio-tab-content {
+      height: $tabMinHeight;
+      overflow-y: auto;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,42 @@
+import { SPI } from '@oinone/kunlun-spi';
+import { RouterWidget } from '@oinone/kunlun-vue-router';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { DEBUG_VIEW_WIDGET } from '../constants';
+import { DebugResponseData } from '../typing';
+import { DebugApiWidget } from './debug-api/DebugApiWidget';
+import { DebugUtils } from './debug-utils';
+import { DebugViewWidget } from './debug-view/DebugViewWidget';
+import DebugMainView from './DebugMainView.vue';
+
+@SPI.ClassFactory(RouterWidget.Token({ widget: DEBUG_VIEW_WIDGET }))
+export class DebugMainViewWidget extends RouterWidget {
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(DebugMainView);
+    return this;
+  }
+
+  @Widget.Provide()
+  @Widget.Reactive()
+  protected activeDebugTab = 'debugView';
+
+  @Widget.Method()
+  protected changeActiveDebugTab(activeDebugTab: string) {
+    this.activeDebugTab = activeDebugTab;
+  }
+
+  @Widget.Method()
+  protected async responseAnalysis(responseBody: DebugResponseData | DebugResponseData[]) {
+    const debugApiWidget = this.getChildrenInstance().find((v) => v instanceof DebugApiWidget) as DebugApiWidget;
+    if (debugApiWidget) {
+      await debugApiWidget.resetInfo();
+      DebugUtils.getDebugStorage().responseData = await debugApiWidget.responseAnalysis(responseBody);
+      DebugUtils.getDebugStorage().forceUpdate();
+    }
+  }
+
+  protected created() {
+    this.createWidget(DebugViewWidget, 'debugView');
+    this.createWidget(DebugApiWidget, 'debugApi');
+  }
+}

package/src/component/debug/view/components/DebugDefaultInfo.vue

@@ -0,0 +1,31 @@
+<template>
+  <oio-form>
+    <oio-form-item label="诊断内容">
+      <span>{{ message }}</span>
+    </oio-form-item>
+    <oio-form-item label="诊断信息">
+      <debug-json-view v-if="stackInfo" :text="stackInfo" text-class="oio-debug-textarea" />
+      <span v-else>未返回诊断信息</span>
+    </oio-form-item>
+  </oio-form>
+</template>
+<script lang="ts">
+import { OioForm, OioFormItem, OioTextarea } from '@oinone/kunlun-vue-ui-antd';
+import { defineComponent } from 'vue';
+import { DebugInfoProps } from '../../typing';
+import DebugJsonView from '../components/DebugJsonView.vue';
+
+export default defineComponent({
+  name: 'DebugDefaultInfo',
+  components: {
+    OioForm,
+    OioFormItem,
+    OioTextarea,
+    DebugJsonView
+  },
+  inheritAttrs: false,
+  props: {
+    ...DebugInfoProps
+  },
+});
+</script>

package/src/component/debug/view/components/DebugJsonView.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="debug-json-view">
+    <oio-button
+      class="debug-json-view-btn"
+      type="primary"
+      size="small"
+      icon="oinone-code-mode"
+      @click="onShowJSONDialog"
+      >JSON视图
+    </oio-button>
+    <oio-textarea :class="textClass" :value="text" />
+    <a-modal
+      v-if="showJSONDialog"
+      v-model:visible="showJSONDialog"
+      width="100%"
+      wrap-class-name="full-modal"
+      :title="null"
+      :footer="null"
+      @cancel="onCancel"
+    >
+      <vue-json-pretty :data="debugJSONObject" v-bind="vueJsonPrettyConfig" />
+    </a-modal>
+  </div>
+</template>
+<script lang="ts">
+import { OioButton, OioTextarea } from '@oinone/kunlun-vue-ui-antd';
+import { isArrayLikeObject, isObject, isString } from 'lodash-es';
+import { defineComponent, ref } from 'vue';
+import VueJsonPretty from 'vue-json-pretty';
+import { DebugUtils } from '../debug-utils';
+
+export default defineComponent({
+  components: {
+    OioButton,
+    OioTextarea,
+    VueJsonPretty
+  },
+  inheritAttrs: false,
+  props: {
+    text: {
+      type: [String, Object, Array]
+    },
+    textClass: {
+      type: String
+    }
+  },
+  setup(props) {
+    const showJSONDialog = ref(false);
+    const debugJSONObject = ref({});
+    const buildDebugJSONObject = () => {
+      if (isString(props.text) && (props.text.startsWith('{') || props.text.startsWith('['))) {
+        return DebugUtils.toJSONObject(props.text);
+      }
+      if (isObject(props.text) || isArrayLikeObject(props.text)) {
+        return props.text;
+      }
+      return null;
+    };
+
+    const vueJsonPrettyConfig = { showIcon: true, showLength: true, showLineNumber: true };
+
+    function onShowJSONDialog() {
+      debugJSONObject.value = buildDebugJSONObject();
+      showJSONDialog.value = true;
+    }
+
+    function onCancel() {
+      debugJSONObject.value = {};
+      showJSONDialog.value = false;
+    }
+
+    return { showJSONDialog, vueJsonPrettyConfig, debugJSONObject, onShowJSONDialog, onCancel };
+  }
+});
+</script>
+<style lang="scss">
+.debug-json-view {
+  position: relative;
+
+  &-btn {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 99;
+  }
+}
+
+.full-modal {
+  .ant-modal {
+    max-width: 100%;
+    top: 0;
+    padding-bottom: 0;
+    margin: 0;
+  }
+
+  .ant-modal-content {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh);
+    overflow: auto;
+  }
+
+  .ant-modal-body {
+    flex: 1;
+  }
+}
+</style>