@oinone/kunlun-vue-admin-layout 6.2.0

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

@@ -0,0 +1,129 @@
+<template>
+  <div class="oio-debug-request-info">
+    <oio-group class="oio-debug-request-info" title="请求信息">
+      <oio-form>
+        <oio-row :wrap="true">
+          <oio-col class="oio-debug-basic-info" flex="1">
+            <oio-form-item label="URL">
+              <span>{{ requestInfo.url }}</span>
+            </oio-form-item>
+            <oio-form-item label="请求方式">
+              <span>{{ requestInfo.method }}</span>
+            </oio-form-item>
+            <oio-form-item label="完整请求耗时(毫秒)">
+              <span>{{ requestInfo.allDuration }}</span>
+            </oio-form-item>
+            <oio-form-item label="连接耗时(毫秒)">
+              <span>{{ requestInfo.connectDuration }}</span>
+            </oio-form-item>
+            <oio-form-item label="请求耗时(毫秒)">
+              <span>{{ requestInfo.requestDuration }}</span>
+            </oio-form-item>
+            <oio-form-item label="响应耗时(毫秒)">
+              <span>{{ requestInfo.responseDuration }}</span>
+            </oio-form-item>
+            <template v-if="isShowError">
+              <oio-form-item class="oio-debug-error-text" label="异常编码">
+                <span>{{ requestInfo.errorCode }}</span>
+              </oio-form-item>
+              <oio-form-item class="oio-debug-error-text" label="异常信息">
+                <span>{{ requestInfo.errorMessage }}</span>
+              </oio-form-item>
+            </template>
+            <template v-else>
+              <oio-form-item label=" ">
+                <span>无异常</span>
+              </oio-form-item>
+            </template>
+          </oio-col>
+          <oio-col flex="1">
+            <oio-form-item label="请求头">
+              <oio-textarea class="oio-debug-textarea" :value="requestInfo.header" />
+            </oio-form-item>
+          </oio-col>
+        </oio-row>
+      </oio-form>
+    </oio-group>
+    <oio-tabs destroyInactiveTabPane>
+      <oio-tab v-for="gqlInfo of requestInfo.gqlInfos" :tab="gqlInfo.title" :key="gqlInfo.key">
+        <oio-form>
+          <oio-form-item label="GQL">
+            <oio-textarea class="oio-debug-textarea" :value="gqlInfo.gql" />
+          </oio-form-item>
+          <oio-form-item label="Variables">
+            <oio-textarea class="oio-debug-textarea" :value="gqlInfo.variables" />
+          </oio-form-item>
+        </oio-form>
+        <oio-tabs v-if="gqlInfo.handledExceptions" class="oio-debug-tabs" destroyInactiveTabPane>
+          <oio-tab v-for="panel of gqlInfo.handledExceptions" :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>
+      </oio-tab>
+    </oio-tabs>
+  </div>
+</template>
+<script lang="ts">
+import { OioCol, OioForm, OioFormItem, OioGroup, OioRow, OioTab, OioTabs, OioTextarea } from '@oinone/kunlun-vue-ui-antd';
+import { defineComponent, PropType } from 'vue';
+import { DebugErrorPanel, DebugRequestInfo } from '../../typing';
+import { useDebugRequestInfo } from '../useDebugRequestInfo';
+import DebugDefaultInfo from './DebugDefaultInfo.vue';
+
+export default defineComponent({
+  name: 'DebugRequestInfoPanel',
+  components: {
+    OioCol,
+    OioForm,
+    OioFormItem,
+    OioGroup,
+    OioRow,
+    OioTab,
+    OioTabs,
+    OioTextarea,
+    DebugDefaultInfo
+  },
+  inheritAttrs: false,
+  props: {
+    requestInfo: {
+      type: Object as PropType<DebugRequestInfo>
+    }
+  },
+  setup(props) {
+    const constructPanelProps = (panel: DebugErrorPanel) => {
+      const properties = { ...panel };
+      delete properties.component;
+      return properties;
+    };
+
+    return {
+      ...useDebugRequestInfo(props),
+      constructPanelProps
+    };
+  }
+});
+</script>
+<style lang="scss">
+.oio-debug-request-info {
+  display: flex;
+  flex-direction: column;
+  row-gap: 24px;
+
+  .oio-form {
+    .oio-debug-basic-info .oio-form-item.oio-form-item-horizontal > .ant-form-item-label {
+      width: 190px;
+      max-width: unset;
+    }
+
+    .oio-form-item.oio-form-item-horizontal > .ant-form-item-label {
+      width: 80px;
+      max-width: unset;
+    }
+  }
+
+  .oio-debug-stack-info-textarea {
+    min-height: 600px;
+  }
+}
+</style>

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

@@ -0,0 +1,66 @@
+<template>
+  <div class="oio-debug-response-panel">
+    <oio-tabs class="oio-debug-tabs" destroyInactiveTabPane>
+      <oio-tab v-for="fun of requestInfo.functions" :tab="`${fun.namespace}#${fun.name}`" :key="fun.key">
+        <oio-form>
+          <oio-row :wrap="true">
+            <oio-col flex="1">
+              <oio-form-item label="请求类型">
+                <span>{{ fun.method }}</span>
+              </oio-form-item>
+            </oio-col>
+            <oio-col flex="1">
+              <oio-form-item label="命名空间">
+                <span>{{ fun.namespace }}</span>
+              </oio-form-item>
+            </oio-col>
+            <oio-col flex="1">
+              <oio-form-item label="方法名">
+                <span>{{ fun.name }}</span>
+              </oio-form-item>
+            </oio-col>
+          </oio-row>
+          <oio-form-item label="响应结果">
+            <debug-json-view :text="fun.responseData" text-class="oio-debug-textarea" />
+          </oio-form-item>
+        </oio-form>
+      </oio-tab>
+    </oio-tabs>
+  </div>
+</template>
+<script lang="ts">
+import { OioCol, OioForm, OioFormItem, OioRow, OioTab, OioTabs, OioTextarea } from '@oinone/kunlun-vue-ui-antd';
+import { defineComponent, PropType } from 'vue';
+import { DebugRequestInfo } from '../../typing';
+import DebugJsonView from '../components/DebugJsonView.vue';
+
+export default defineComponent({
+  name: 'DebugResponsePanel',
+  components: {
+    OioCol,
+    OioForm,
+    OioFormItem,
+    OioRow,
+    OioTab,
+    OioTabs,
+    OioTextarea,
+    DebugJsonView
+  },
+  inheritAttrs: false,
+  props: {
+    requestInfo: {
+      type: Object as PropType<DebugRequestInfo>
+    }
+  },
+  setup(props) {
+    return {};
+  }
+});
+</script>
+<style lang="scss">
+.oio-debug-response-panel {
+  display: flex;
+  flex-direction: column;
+  row-gap: 24px;
+}
+</style>

package/src/component/debug/view/components/runtime-context/DebugRuntimeFieldComponent.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="oio-debug-runtime-context-fields">这是一个自定义组件</div>
+</template>
+<script lang="ts">
+import { RuntimeModelField } from '@oinone/kunlun-engine';
+import { defineComponent, PropType } from 'vue';
+import { DebugInfoProps } from '../../../typing';
+
+interface SimplifyFields {
+  handle: string;
+  modelFields: RuntimeModelField[];
+  childrenContext: SimplifyFields[];
+}
+
+export default defineComponent({
+  name: 'DebugRuntimeFieldComponent',
+  components: {},
+  inheritAttrs: false,
+  props: {
+    ...DebugInfoProps,
+    simplifyFields: {
+      type: Object as PropType<SimplifyFields>
+    }
+  },
+  setup() {
+    return {};
+  }
+});
+</script>

package/src/component/debug/view/debug-api/DebugApi.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="oio-debug-api" v-if="activeDebugTab === 'debugApi'">
+    <div class="oio-debug-api-wrapper">
+      <oio-group class="oio-debug-request" title="接口调试" help="请通过浏览器控制台复制fetch格式请求粘贴至以下输入框">
+        <oio-textarea class="oio-debug-textarea" v-model:value="requestData" />
+        <template #titleToolbar>
+          <div class="oio-debug-error-text" v-if="requestHint">{{ requestHint }}</div>
+          <div class="oio-debug-level">
+            <oio-tooltip-help>
+              <template #title>
+                <div class="oio-debug-level-label-help">
+                  <span>日志级别</span>
+                  <ul>
+                    <li>默认调试: 1</li>
+                    <li>权限调试: 2</li>
+                    <li>Debug级别日志调试: 3</li>
+                    <li>Trace级别日志调试: 4</li>
+                  </ul>
+                </div>
+              </template>
+            </oio-tooltip-help>
+            <div class="oio-debug-level-label">日志级别</div>
+            <oio-input-number v-model:value="logLevel" min="1" @blur="onLogLevelBlur" />
+          </div>
+          <oio-button type="primary" async @click="onRequest">发起请求</oio-button>
+          <oio-button type="primary" @click="onReset">重置</oio-button>
+        </template>
+      </oio-group>
+      <oio-group class="oio-debug-response" title="接口响应结果">
+        <debug-json-view text-class="oio-debug-textarea" :text="responseData" />
+        <template #titleToolbar>
+          <oio-button v-if="isShowResponseInfo" type="primary" @click="onDownload">下载接口调试数据</oio-button>
+        </template>
+      </oio-group>
+    </div>
+    <debug-request-info-panel v-if="isShowResponseInfo" :request-info="requestInfo" />
+    <debug-response-panel v-if="isShowResponseInfo" :request-info="requestInfo" />
+  </div>
+</template>
+<script lang="ts">
+import {
+  OioButton,
+  OioGroup,
+  OioInputNumber,
+  OioTextarea,
+  OioTooltipHelp,
+  uniqueKeyGenerator
+} from '@oinone/kunlun-vue-ui-antd';
+import { defineComponent, PropType, Ref, ref } from 'vue';
+import { DebugFetchRequest, DebugFetchResponse, DebugRequestInfo } from '../../typing';
+import DebugJsonView from '../components/DebugJsonView.vue';
+import DebugRequestInfoPanel from '../components/DebugRequestInfoPanel.vue';
+import DebugResponsePanel from '../components/DebugResponsePanel.vue';
+import { DebugUtils } from '../debug-utils';
+import { useDebugRequestInfo } from '../useDebugRequestInfo';
+
+function setData(val: Ref, newValue, defaultValue = '') {
+  if (newValue === undefined) {
+    return;
+  }
+  if (newValue === null) {
+    val.value = defaultValue;
+  } else {
+    val.value = newValue;
+  }
+}
+
+export default defineComponent({
+  name: 'DebugApi',
+  components: {
+    DebugResponsePanel,
+    DebugRequestInfoPanel,
+    OioButton,
+    OioGroup,
+    OioInputNumber,
+    OioTextarea,
+    OioTooltipHelp,
+    DebugJsonView
+  },
+  inheritAttrs: false,
+  props: {
+    activeDebugTab: {
+      type: String
+    },
+    requestInfo: {
+      type: Object as PropType<DebugRequestInfo>
+    },
+    responseData: {
+      type: String
+    },
+    resolveRequestData: {
+      type: Function as PropType<(data: string) => DebugFetchRequest | undefined>
+    },
+    request: {
+      type: Function as PropType<(fetchObject: DebugFetchRequest) => DebugFetchResponse | undefined>
+    },
+    resetInfo: {
+      type: Function
+    }
+  },
+  setup(props) {
+    const logLevel = ref(1);
+    const requestData = ref('');
+    const requestHint = ref('');
+
+    const { isShowResponseInfo, isShowError } = useDebugRequestInfo(props);
+
+    const getDownloadResponseData = () => {
+      const requestInfo = props.requestInfo;
+      if (!isShowResponseInfo.value || !props.responseData || !requestInfo) {
+        return '';
+      }
+      try {
+        return DebugUtils.toJSONString(DebugUtils.generatorDownloadRequestInfo(requestInfo, props.responseData));
+      } catch (e) {
+        return DebugUtils.toJSONString({
+          ...props.requestInfo,
+          responseData: props.responseData
+        });
+      }
+    };
+
+    const getDownloadFilename = () => {
+      if (!isShowResponseInfo.value) {
+        return '';
+      }
+      return `oinone_debug_${uniqueKeyGenerator()}.json`;
+    };
+
+    const clearLastedRequestInfo = () => {
+      requestHint.value = '';
+      props.resetInfo?.();
+    };
+
+    const onLogLevelBlur = () => {
+      if (!logLevel.value || logLevel.value <= 1) {
+        logLevel.value = 1;
+      }
+    };
+
+    const onRequest = async () => {
+      clearLastedRequestInfo();
+      const body = requestData.value;
+      if (!body) {
+        requestHint.value = '请输入请求内容';
+        return;
+      }
+      const fetchObject = await props.resolveRequestData?.(body);
+      if (!fetchObject) {
+        requestHint.value = '请求内容格式无法识别';
+        return;
+      }
+      const fetchResponse = await props.request?.({
+        ...fetchObject,
+        level: logLevel.value || 1
+      });
+      if (!fetchResponse) {
+        requestHint.value = '无法正确获取响应结果';
+        return;
+      }
+      const { hint } = fetchResponse;
+
+      setData(requestHint, hint);
+      DebugUtils.getDebugStorage().responseData = props.responseData;
+    };
+
+    const onReset = () => {
+      logLevel.value = 1;
+      requestData.value = '';
+      requestHint.value = '';
+      props.resetInfo?.();
+    };
+
+    const onDownload = () => {
+      DebugUtils.downloadJSON(getDownloadResponseData(), getDownloadFilename());
+    };
+
+    return {
+      logLevel,
+      requestData,
+      requestHint,
+
+      isShowResponseInfo,
+      isShowError,
+
+      onLogLevelBlur,
+      onRequest,
+      onReset,
+      onDownload
+    };
+  }
+});
+</script>
+<style lang="scss">
+.oio-debug-api {
+  display: flex;
+  flex-direction: column;
+  row-gap: 24px;
+
+  .oio-debug-api-wrapper {
+    display: flex;
+    column-gap: 16px;
+    align-items: flex-start;
+
+    & > div {
+      flex: 1;
+    }
+
+    .oio-debug-response .oio-group-title-wrapper {
+      height: 48px;
+    }
+  }
+
+  .oio-debug-level {
+    width: 140px;
+    display: flex;
+    align-items: center;
+    column-gap: 8px;
+
+    &-label {
+      white-space: nowrap;
+    }
+  }
+}
+</style>