From 0c0ff04a477b743629cdb404d5bc8cf1ce484179 Mon Sep 17 00:00:00 2001
From: ethan <ethan-liu@outlook.com>
Date: Fri, 8 Nov 2024 14:55:18 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0webhook=E8=AF=B7?=
 =?UTF-8?q?=E6=B1=82=E7=9A=84JsonView=E5=B9=B6=E6=8F=90=E4=BE=9B=E4=BA=86J?=
 =?UTF-8?q?sonPath=E7=9A=84=E5=A4=8D=E5=88=B6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/.eslintrc.js                               |   2 +-
 .../data/json-view/JsonViewItem.vue           | 204 ++++++++++++++++++
 ui/src/components/data/json-view/index.vue    | 153 +++++++++++++
 ui/src/components/data/json-view/types.ts     |  42 ++++
 ui/src/views/common/webhook-drawer.vue        | 102 ++++++++-
 5 files changed, 494 insertions(+), 9 deletions(-)
 create mode 100644 ui/src/components/data/json-view/JsonViewItem.vue
 create mode 100644 ui/src/components/data/json-view/index.vue
 create mode 100644 ui/src/components/data/json-view/types.ts

diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js
index 476a91a3f..0afc9fd37 100644
--- a/ui/.eslintrc.js
+++ b/ui/.eslintrc.js
@@ -55,7 +55,7 @@ module.exports = {
     'no-unused-vars': 0,
     '@typescript-eslint/no-unused-vars': [1, { vars: 'all', args: 'after-used' }],
     // 未定义前不能使用
-    'no-use-before-define': 2,
+    'no-use-before-define': 1,
     // 不能有无法执行的代码
     'no-unreachable': 2,
     // 不能使用未定义的变量
diff --git a/ui/src/components/data/json-view/JsonViewItem.vue b/ui/src/components/data/json-view/JsonViewItem.vue
new file mode 100644
index 000000000..47004f59e
--- /dev/null
+++ b/ui/src/components/data/json-view/JsonViewItem.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="json-view-item">
+    <!-- Handle Objects and Arrays-->
+    <div v-if="data.type === 'object' || data.type === 'array'">
+      <button @click.stop="open = !open" class="data-key" :aria-expanded="open ? 'true' : 'false'">
+        <span :class="{ 'chevron-arrow': true, opened: open }"></span>
+        {{ data.key }}:
+        <span class="properties">{{ lengthString }}</span>
+      </button>
+      <json-view-item
+        @update:selected="bubbleSelected"
+        v-for="child in data.children"
+        :key="getKey(child)"
+        :data="child"
+        v-show="open"
+        :maxDepth="maxDepth"
+        :canSelect="canSelect"
+      />
+    </div>
+    <!-- Handle Leaf Values -->
+    <div
+      :class="{ 'value-key': true, 'can-select': canSelect }"
+      @click="emitSelect(data)"
+      @keyup.enter="emitSelect(data)"
+      @keyup.space="emitSelect(data)"
+      :role="canSelect ? 'button' : undefined"
+      :tabindex="canSelect ? '0' : undefined"
+      v-if="data.type === 'value'"
+    >
+      <span class="value-key">{{ data.key }}:</span>
+      <span :style="getValueStyle(data.value)">{{ dataValue }}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
+import { JsonDataType } from './types';
+import type { JsonData, SelectedJsonData } from './types';
+
+export default /* #__PURE__*/ defineComponent({
+  name: 'json-view-item',
+  data() {
+    return {
+      open: this.data.depth < this.maxDepth,
+    };
+  },
+  props: {
+    data: {
+      required: true,
+      type: Object as PropType<JsonData>,
+    },
+    maxDepth: {
+      type: Number,
+      required: false,
+      default: 1,
+    },
+    canSelect: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  emits: ['update:selected'],
+  methods: {
+    emitSelect(data: JsonData): void {
+      this.$emit('update:selected', {
+        key: data.key,
+        value: data.type === JsonDataType.VALUE ? data.value : undefined,
+        path: data.path,
+      } as SelectedJsonData);
+    },
+    bubbleSelected(data: SelectedJsonData): void {
+      this.$emit('update:selected', data);
+    },
+    getKey(value: any): string {
+      if (!isNaN(value.key)) {
+        return value.key + ':';
+      } else {
+        return '"' + value.key + '":';
+      }
+    },
+    getValueStyle(value: any): any {
+      switch (typeof value) {
+        case 'string':
+          return { color: 'var(--vjc-string-color)' };
+        case 'number':
+          return { color: 'var(--vjc-number-color)' };
+        case 'boolean':
+          return { color: 'var(--vjc-boolean-color)' };
+        case 'object':
+          return { color: 'var(--vjc-null-color)' };
+        case 'undefined':
+          return { color: 'var(--vjc-null-color)' };
+        default:
+          return { color: 'var(--vjc-valueKey-color)' };
+      }
+    },
+  },
+  computed: {
+    lengthString(): string {
+      switch (this.data.type) {
+        case JsonDataType.ARRAY:
+          return this.data.length === 1 ? this.data.length + ' element' : this.data.length + ' elements';
+        case JsonDataType.OBJECT:
+          return this.data.length === 1 ? this.data.length + ' property' : this.data.length + ' properties';
+        default:
+          return '';
+      }
+    },
+    dataValue(): string {
+      if (this.data.type === JsonDataType.VALUE) {
+        if (typeof this.data.value === 'undefined') {
+          return 'undefined';
+        }
+        return JSON.stringify(this.data.value);
+      }
+      return '';
+    },
+  },
+});
+</script>
+
+<style lang="less" scoped>
+.json-view-item:not(.root-item) {
+  margin-left: 15px;
+}
+
+.value-key {
+  color: var(--vjc-valueKey-color);
+  font-weight: 600;
+  margin-left: 10px;
+  border-radius: 2px;
+  white-space: nowrap;
+  padding: 5px 5px 5px 10px;
+
+  &.can-select {
+    cursor: pointer;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.08);
+    }
+
+    &:focus {
+      outline: 2px solid var(--vjc-hover-color);
+    }
+  }
+}
+
+.data-key {
+  // Button overrides
+  font-size: 100%;
+  font-family: inherit;
+  border: 0;
+  background-color: transparent;
+  width: 100%;
+
+  // Normal styles
+  color: var(--vjc-key-color);
+  display: flex;
+  align-items: center;
+  border-radius: 2px;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  padding: 5px;
+
+  &:hover {
+    background-color: var(--vjc-hover-color);
+  }
+
+  &:focus {
+    outline: 2px solid var(--vjc-hover-color);
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  .properties {
+    font-weight: 300;
+    opacity: 0.9;
+    margin-left: 4px;
+    user-select: none;
+  }
+}
+
+.chevron-arrow {
+  flex-shrink: 0;
+  border-right: 4px solid var(--vjc-arrow-color);
+  border-bottom: 4px solid var(--vjc-arrow-color);
+  width: var(--vjc-arrow-size);
+  height: var(--vjc-arrow-size);
+  margin-right: 20px;
+  margin-left: 5px;
+  transform: rotate(-45deg);
+
+  &.opened {
+    margin-top: -3px;
+    transform: rotate(45deg);
+  }
+}
+</style>
diff --git a/ui/src/components/data/json-view/index.vue b/ui/src/components/data/json-view/index.vue
new file mode 100644
index 000000000..6ec8caf01
--- /dev/null
+++ b/ui/src/components/data/json-view/index.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="content">
+    <json-view-item
+      :class="[{ 'root-item': true, dark: colorScheme === 'dark' }]"
+      :data="parsed"
+      :maxDepth="maxDepth"
+      @update:selected="itemSelected"
+      :canSelect="hasSelectedListener"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import type { PropType } from 'vue';
+import JsonViewItem from './JsonViewItem.vue';
+import { ColorMode, JsonDataType } from './types';
+import type { JsonData, SelectedJsonData } from './types';
+
+export default /* #__PURE__*/ defineComponent({
+  name: 'jm-json-view',
+  props: {
+    data: {
+      required: true,
+    },
+    rootKey: {
+      type: String,
+      required: false,
+      default: 'root',
+    },
+    maxDepth: {
+      type: Number,
+      required: false,
+      default: 1,
+    },
+    colorScheme: {
+      type: String as PropType<ColorMode>,
+      required: false,
+      default: ColorMode.LIGHT,
+    },
+  },
+  components: { JsonViewItem },
+  emits: ['update:selected'],
+  methods: {
+    convertKey(key: string): string {
+      if (Number.isInteger(key)) {
+        return `[${key.toString()}]`;
+      }
+
+      if (/[^A-Za-z0-9_$]/.test(key.toString())) {
+        return `["${key}"]`;
+      }
+
+      return `${key}`;
+    },
+    build(key: string, val: any, depth: number, path: string, includeKey: boolean): JsonData {
+      const children = [];
+      if (this.isObject(val)) {
+        // Build Object
+        for (const [childKey, childValue] of Object.entries(val)) {
+          children.push(this.build(childKey, childValue, depth + 1, includeKey ? `${path}${key}.` : `${path}`, true));
+        }
+        return {
+          key: key,
+          type: JsonDataType.OBJECT,
+          depth: depth,
+          path: path,
+          length: children.length,
+          children: children,
+        };
+      } else if (this.isArray(val)) {
+        // Build Array
+        for (let i = 0; i < val.length; i++) {
+          children.push(
+            this.build(i.toString(), val[i], depth + 1, includeKey ? `${path}${key}[${i}].` : `${path}`, false),
+          );
+        }
+        return {
+          key: key,
+          type: JsonDataType.ARRAY,
+          depth: depth,
+          path: path,
+          length: children.length,
+          children: children,
+        };
+      } else {
+        let convertedKey = this.convertKey(key);
+        // Build Value
+        return {
+          key: key,
+          type: JsonDataType.VALUE,
+          path: includeKey ? path + convertedKey : path.slice(0, -1),
+          depth: depth,
+          value: val,
+        };
+      }
+    },
+    isObject: (val: any) => typeof val === 'object' && val !== null && !Array.isArray(val),
+    isArray: (val: any) => Array.isArray(val),
+    itemSelected(data: SelectedJsonData): void {
+      this.$emit('update:selected', data);
+    },
+  },
+  computed: {
+    parsed(): JsonData {
+      if (typeof this.data === 'object') {
+        return this.build(this.rootKey, { ...this.data }, 0, '', true);
+      }
+      return {
+        key: this.rootKey,
+        type: JsonDataType.VALUE,
+        path: '',
+        depth: 0,
+        value: this.data,
+      };
+    },
+    hasSelectedListener(): boolean {
+      return !!this.$attrs.onSelected;
+    },
+  },
+});
+</script>
+
+<style lang="less" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.root-item {
+  --vjc-key-color: #0977e6;
+  --vjc-valueKey-color: #073642;
+  --vjc-string-color: #268bd2;
+  --vjc-number-color: #2aa198;
+  --vjc-boolean-color: #cb4b16;
+  --vjc-null-color: #6c71c4;
+  --vjc-arrow-size: 6px;
+  --vjc-arrow-color: #444;
+  --vjc-hover-color: rgba(0, 0, 0, 0.2);
+
+  margin-left: 0;
+  width: 100%;
+  height: auto;
+}
+
+.root-item.dark {
+  --vjc-key-color: #80d8ff;
+  --vjc-valueKey-color: #fdf6e3;
+  --vjc-hover-color: rgba(255, 255, 255, 0.2);
+  --vjc-arrow-color: #fdf6e3;
+}
+</style>
diff --git a/ui/src/components/data/json-view/types.ts b/ui/src/components/data/json-view/types.ts
new file mode 100644
index 000000000..efe070ea6
--- /dev/null
+++ b/ui/src/components/data/json-view/types.ts
@@ -0,0 +1,42 @@
+export enum JsonDataType {
+  ARRAY = 'array',
+  VALUE = 'value',
+  OBJECT = 'object',
+}
+
+interface JsonDataBase {
+  key: string;
+  type: JsonDataType;
+  depth: number;
+  path: string;
+}
+
+export type JsonData = JsonDataArray | JsonDataObject | JsonDataValue;
+
+export interface JsonDataArray extends JsonDataBase {
+  type: JsonDataType.ARRAY;
+  length: number;
+  children: Array<JsonData>;
+}
+
+export interface JsonDataObject extends JsonDataBase {
+  type: JsonDataType.OBJECT;
+  length: number;
+  children: Array<JsonData>;
+}
+
+export interface JsonDataValue extends JsonDataBase {
+  type: JsonDataType.VALUE;
+  value?: any;
+}
+
+export interface SelectedJsonData {
+  key: string;
+  value: string;
+  path: string;
+}
+
+export enum ColorMode {
+  LIGHT = 'light',
+  DARK = 'dark',
+}
diff --git a/ui/src/views/common/webhook-drawer.vue b/ui/src/views/common/webhook-drawer.vue
index 20a851157..f88a5b630 100644
--- a/ui/src/views/common/webhook-drawer.vue
+++ b/ui/src/views/common/webhook-drawer.vue
@@ -101,15 +101,25 @@
         top="5vh"
       >
         <div class="tab-container">
-          <div :class="{ active: payloadTab }" @click="toPayload">触发器</div>
-          <div :class="{ active: !payloadTab }" @click="toTrigger">Payload</div>
+          <div :class="{ active: payloadTab === TabState.TRIGGER }" @click="toPayload">触发器</div>
+          <div :class="{ active: payloadTab === TabState.PAYLOAD }" @click="toTrigger">Payload</div>
+          <div :class="{ active: payloadTab === TabState.JSONVIEW }" @click="toJsonView">JsonView</div>
         </div>
         <!-- 查看payload -->
-        <div class="payload-content" v-if="!payloadTab" v-loading="payloadLoading">
+        <div class="payload-content" v-if="payloadTab === TabState.PAYLOAD" v-loading="payloadLoading">
           <jm-log-viewer v-if="webhookLog" filename="webhook.txt" :value="webhookLog" />
         </div>
+        <!-- 查看JsonView -->
+        <div class="path-bar" v-if="payloadTab === TabState.JSONVIEW">
+          <div id="path-bar-item-label" class="path-bar-item">Json路径:</div>
+          <input id="path-bar-item-input" class="path-bar-item" :value="jsonPath" readonly />
+          <jm-text-copy :value="jsonPath" />
+        </div>
+        <div class="payload-content" v-if="payloadTab === TabState.JSONVIEW" v-loading="payloadLoading">
+          <jm-json-view :data="jsonPayload" rootKey="request" :maxDepth="1" @update:selected="jsonItemSelected" />
+        </div>
         <!-- 触发器 -->
-        <div v-else class="trigger-content" v-loading="triggerParamsLoading">
+        <div v-if="payloadTab === TabState.TRIGGER" class="trigger-content" v-loading="triggerParamsLoading">
           <jm-scrollbar>
             <div style="padding: 20px">
               <!-- 参数列表 -->
@@ -195,6 +205,12 @@ import { ParamTypeEnum } from '@/api/dto/enumeration';
 import JmTextViewer from '@/components/text-viewer/index.vue';
 import ParamValue from '@/views/common/param-value.vue';
 
+enum TabState {
+  TRIGGER = 'TRIGGER',
+  PAYLOAD = 'PAYLOAD',
+  JSONVIEW = 'JSONVIEW',
+}
+
 export default defineComponent({
   components: { JmTextViewer, ParamValue },
   props: {
@@ -221,7 +237,9 @@ export default defineComponent({
     const scrollRef = ref<HTMLDivElement>();
     const webhookDrawerRef = ref<InstanceType<typeof ElScrollbar>>();
     const loadState = ref<StateEnum>(StateEnum.NONE);
-    const payloadTab = ref<boolean>(true);
+    const payloadTab = ref<TabState>(TabState.TRIGGER);
+    // JsonPath
+    const jsonPath = ref<string>('');
     // 列表id
     const webhookListId = ref<string>('');
     // webhook参数详情
@@ -278,6 +296,8 @@ export default defineComponent({
     });
     // 请求列表
     const webhookRequestList = ref<IWebRequestVo[]>([]);
+    // JsonPayload
+    const jsonPayload = ref<any>();
     // 日志
     const webhookLog = ref<string>('');
     // webhookUrl
@@ -429,9 +449,25 @@ export default defineComponent({
     const rowkey = (row: any) => {
       return row.id;
     };
+    const jsonItemSelected = (data: any) => {
+      jsonPath.value = data.path;
+    };
+    // JsonView
+    const toJsonView = async () => {
+      payloadTab.value = TabState.JSONVIEW;
+      try {
+        payloadLoading.value = true;
+        const payloadContent = await getPayloadParams(webhookListId.value);
+        jsonPayload.value = JSON.parse(payloadContent.payload);
+      } catch (err) {
+        proxy.$throw(err, proxy);
+      } finally {
+        payloadLoading.value = false;
+      }
+    };
     // payload
     const toTrigger = async () => {
-      payloadTab.value = false;
+      payloadTab.value = TabState.PAYLOAD;
       try {
         payloadLoading.value = true;
         const payloadContent = await getPayloadParams(webhookListId.value);
@@ -444,14 +480,14 @@ export default defineComponent({
     };
     // 触发器
     const toPayload = () => {
-      payloadTab.value = true;
+      payloadTab.value = TabState.TRIGGER;
       // 还原密钥显示
       secretVisible.value = true;
     };
     // 弹窗关闭
     const dialogClose = () => {
       // 还原tab
-      payloadTab.value = true;
+      payloadTab.value = TabState.TRIGGER;
       // 还原密钥显示
       secretVisible.value = true;
     };
@@ -496,6 +532,10 @@ export default defineComponent({
       retry,
       seePayload,
       payloadDialogVisible,
+      // Json Payload
+      jsonPayload,
+      jsonItemSelected,
+      jsonPath,
       // 日志
       webhookLog,
       btnDown,
@@ -504,8 +544,10 @@ export default defineComponent({
       tableLoading,
       // 切换tab
       payloadTab,
+      TabState,
       toTrigger,
       toPayload,
+      toJsonView,
       // 请求详情
       webhookParamsDetail,
       webhookAuth,
@@ -556,6 +598,7 @@ export default defineComponent({
     background: #eff4f9;
     box-sizing: border-box;
     padding: 20px 25px 0 25px;
+
     // 项目名称
     .project-name {
       margin-bottom: 14px;
@@ -592,6 +635,7 @@ export default defineComponent({
           margin-right: 10px;
           border-radius: 2px;
           display: flex;
+
           // 图标
           .jm-icon-input-hook {
             content: '\e818';
@@ -733,6 +777,15 @@ export default defineComponent({
     }
   }
 
+  ::v-deep(.jm-text-copy) {
+    font-size: 20px;
+
+    .jm-icon-button-copy {
+      color: #082340;
+      opacity: 1;
+    }
+  }
+
   // 查看paload
   ::v-deep(.el-dialog) {
     .el-dialog__header {
@@ -788,6 +841,38 @@ export default defineComponent({
       }
     }
 
+    // JsonView
+    .path-bar {
+      align-items: center;
+      display: flex;
+      flex: 1;
+      height: 25px;
+      padding: 20px;
+      border: 1px solid #e6ebf2;
+    }
+
+    .path-bar-item {
+      height: 100%;
+      padding: 0 10px;
+    }
+
+    #path-bar-item-label {
+      align-items: center;
+      display: flex;
+      border-right: 1px solid #ccc;
+    }
+
+    #path-bar-item-input {
+      flex: 1;
+    }
+
+    #path-bar-item-copy {
+      background-color: #fff;
+      height: 25px;
+      width: 70px;
+      border-left: 1px solid #ccc;
+    }
+
     // payload/trigger
     .payload-content,
     .trigger-content {
@@ -880,6 +965,7 @@ export default defineComponent({
         .display-container {
           display: flex;
           align-items: center;
+
           //justify-content: space-between;
           .param-value {
             flex: 1;
-- 
Gitee


From c7f2b217097703469b6d7e4d68d2b3ed4e204919 Mon Sep 17 00:00:00 2001
From: ethan <ethan-liu@outlook.com>
Date: Fri, 8 Nov 2024 14:59:10 +0800
Subject: [PATCH 2/2] fix: update yarn.lock

---
 ui/yarn.lock | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/ui/yarn.lock b/ui/yarn.lock
index eaf3c2e1e..5097e0b44 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -940,6 +940,11 @@ ansi-styles@^6.0.0:
   resolved "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-6.1.1.tgz#63cd61c72283a71cb30bd881dbb60adada74bc70"
   integrity sha512-qDOv24WjnYuL+wbwHdlsYZFy+cgPtrYw0Tn7GLORicQp9BkQLzrgI3Pm4VyR9ERZ41YTn7KlMPuL1n05WdZvmg==
 
+ansi_up@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.npmmirror.com/ansi_up/-/ansi_up-5.2.1.tgz#9437082c7ad4975c15ec57d30a6b55da295bee36"
+  integrity sha512-5bz5T/7FRmlxA37zDXhG6cAwlcZtfnmNLDJra66EEIT3kYlw5aPJdbkJEhm59D6kA4Wi5ict6u6IDYHJaQlH+g==
+
 anymatch@~3.1.1:
   version "3.1.2"
   resolved "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
-- 
Gitee