From 85d795363473b3230f293ecf435721843ba18a26 Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gmail.com>
Date: Sun, 1 Dec 2024 02:38:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B8=B8=E6=88=8F=E6=97=A5?=
 =?UTF-8?q?=E5=BF=97=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin-client/src/components.d.ts              |   2 +
 .../GameUserOperationJson.vue                 | 192 ++++++++++++++----
 admin-client/vite.config.ts                   |   1 +
 3 files changed, 161 insertions(+), 34 deletions(-)

diff --git a/admin-client/src/components.d.ts b/admin-client/src/components.d.ts
index 69b9533..1c3ef09 100644
--- a/admin-client/src/components.d.ts
+++ b/admin-client/src/components.d.ts
@@ -82,6 +82,7 @@ declare module 'vue' {
     BarChartTransverse: typeof import('./core/components/charts/BarChartTransverse.vue')['default']
     ColumnSetting: typeof import('./core/components/curd/components/ColumnSetting.vue')['default']
     ElAside: typeof import('element-plus/es')['ElAside']
+    ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxButton: typeof import('element-plus/es')['ElCheckboxButton']
@@ -91,6 +92,7 @@ declare module 'vue' {
     ElImage: typeof import('element-plus/es')['ElImage']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElSpace: typeof import('element-plus/es')['ElSpace']
+    ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ExternalJump: typeof import('./core/components/ExternalJump.vue')['default']
diff --git a/admin-client/src/views/Apps/App/T_Game_PlayGameLogs/GameUserOperationJson.vue b/admin-client/src/views/Apps/App/T_Game_PlayGameLogs/GameUserOperationJson.vue
index 95f6d69..fdd42b9 100644
--- a/admin-client/src/views/Apps/App/T_Game_PlayGameLogs/GameUserOperationJson.vue
+++ b/admin-client/src/views/Apps/App/T_Game_PlayGameLogs/GameUserOperationJson.vue
@@ -1,10 +1,20 @@
 <script lang="ts" setup>
-import { reactive, ref } from "vue";
-import { FormInstance } from "ant-design-vue";
-import Tools from "@/core/utils/Tools";
-import { MoreFilled } from "@element-plus/icons-vue";
-//定义组件事件
+import {
+  reactive,
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  watch,
+} from "vue";
+import * as monaco from "monaco-editor";
+import "monaco-editor/min/vs/editor/editor.main.css";
+
 const props = defineProps<{ onSuccess: () => void }>();
+let editorContainer = ref<HTMLElement>();
+let editorInstance: monaco.editor.IStandaloneCodeEditor | null = null;
+let responseEditorContainer = ref<HTMLElement>();
+let responseEditorInstance: monaco.editor.IStandaloneCodeEditor | null = null;
 
 const state = reactive({
   vm: {
@@ -15,32 +25,112 @@ const state = reactive({
   loading: false,
 });
 let jsonData = ref([]);
-//向父级导出 函数
+
+// 初始化编辑器
+function initializeEditor(container: HTMLElement, value: string = "") {
+  const editor = monaco.editor.create(container, {
+    value,
+    language: "json",
+    theme: "vs-dark", // 主题
+    automaticLayout: true, // 自动布局
+    wordWrap: "on", // 自动换行
+    minimap: {
+      enabled: false, // 隐藏右侧缩略图
+    },
+    lineNumbers: "on", // 显示行号
+  });
+
+  // 每次修改内容后滚动到顶部
+  editor.onDidChangeModelContent(() => {
+    editor.setScrollTop(0); // 将滚动条滚动到顶部
+  });
+  return editor;
+}
+
+// 监听弹窗可见性，初始化编辑器
+watch(
+  () => state.visible,
+  (visible) => {
+    if (visible) {
+      nextTick(() => {
+        if (editorContainer.value && !editorInstance) {
+          editorInstance = initializeEditor(
+            editorContainer.value,
+            "// 请求消息"
+          );
+        }
+        if (responseEditorContainer.value && !responseEditorInstance) {
+          responseEditorInstance = initializeEditor(
+            responseEditorContainer.value,
+            "// 返回消息"
+          );
+        }
+      });
+    }
+  }
+);
+let totalMilliseconds = ref(0);
+onBeforeUnmount(() => {
+  if (editorInstance) editorInstance.dispose();
+  if (responseEditorInstance) responseEditorInstance.dispose();
+});
+
+// 打开编辑器
 defineExpose({
-  /**
-   * 打开表单初始化
-   * @param jsonstr
-   */
   open: (jsonstr: string = "") => {
     state.visible = true;
-    if (state.visible) {
-      state.vm.id = jsonstr;
-      var data = JSON.parse(jsonstr);
-      console.log(data);
+    totalMilliseconds.value = 0;
+    nextTick(() => {
+      const data = JSON.parse(jsonstr || "{}");
+      jsonData.value.slice(0, jsonData.value.length);
       jsonData.value.push(...data);
-      console.log(jsonData.value);
-    }
-
-    //初始化表单数据
-    state.loading = true;
-    state.loading = false;
+      setTimeout(() => {
+        if (editorInstance) {
+          editorInstance.setValue(JSON.stringify(data, null, 2));
+        }
+        if (responseEditorInstance) {
+          responseEditorInstance.setValue(
+            JSON.stringify(data.response || {}, null, 2)
+          );
+        }
+      }, 500);
+    });
   },
 });
 
-/**
- *保存数据
- */
-function save() {}
+// 保存数据
+function save() {
+  if (editorInstance) {
+    const requestContent = editorInstance.getValue();
+    console.log("请求内容:", requestContent);
+  }
+  if (responseEditorInstance) {
+    const responseContent = responseEditorInstance.getValue();
+    console.log("返回内容:", responseContent);
+  }
+}
+
+function showJyRequestData(t: any) {
+  if (editorInstance) {
+    if (t.RequestContent == null) {
+      editorInstance.setValue("");
+    } else {
+      editorInstance.setValue(
+        JSON.stringify(JSON.parse(t.RequestContent), null, 2)
+      );
+    }
+    totalMilliseconds.value = t.TotalMilliseconds;
+  }
+  if (responseEditorInstance) {
+    if (t.ResponseContent == null) {
+      responseEditorInstance.setValue("");
+    } else {
+      responseEditorInstance.setValue(
+        JSON.stringify(JSON.parse(t.ResponseContent), null, 2)
+      );
+    }
+  }
+}
 </script>
 
 <template>
@@ -50,35 +140,69 @@ function save() {}
     centered
     @ok="state.visible = false"
     :maskClosable="false"
-    :width="900"
+    width="80%"
   >
     <template #footer>
       <a-button type="primary" :loading="state.loading" @click="save()">
-        提交</a-button
-      >
+        提交
+      </a-button>
       <a-button @click="state.visible = false">关闭</a-button>
     </template>
     <a-spin :spinning="state.loading">
       <el-container>
         <el-aside width="550px">
-          <el-timeline style="max-width: 500px; max-height: 500px">
+          <el-timeline style="max-width: 500px; max-height: 80vh">
             <el-timeline-item
+              @click="() => showJyRequestData(t)"
               v-for="t in jsonData"
+              :key="t.OperationDateTime"
               :timestamp="t.OperationDateTime"
               placement="top"
+              :hide-timestamp="true"
             >
-              {{ t.Content }}
+              <div v-if="t.RequestContent != null" style="cursor: pointer">
+                <div>
+                  <el-text class="mx-1" type="primary">
+                    {{ t.OperationDateTime }}</el-text
+                  >
+                </div>
+                <div style="">
+                  <el-text class="mx-1" type="primary">
+                    {{ t.Content }}</el-text
+                  >
+                </div>
+              </div>
+              <div v-else>
+                <div>
+                  <el-text class="mx-1" type="info">
+                    {{ t.OperationDateTime }}</el-text
+                  >
+                </div>
+                <div style="">
+                  <el-text class="mx-1" type="info"> {{ t.Content }}</el-text>
+                </div>
+              </div>
             </el-timeline-item>
           </el-timeline>
         </el-aside>
         <el-main>
-
+          请求耗时：
+          <el-text v-if="totalMilliseconds > 0" class="mx-1" type="success"
+            >{{ totalMilliseconds }} 毫秒</el-text
+          ><el-text v-else class="mx-1" type="warning">无</el-text><br />
+          请求信息：
+          <div class="monaco-editor" ref="editorContainer"></div>
+          返回消息：
+          <div class="monaco-editor" ref="responseEditorContainer"></div>
         </el-main>
       </el-container>
-
-      <!-- aaaa -->
-
-      <!-- {{ state.vm.id }} -->
     </a-spin>
   </a-modal>
 </template>
+
+<style>
+.monaco-editor {
+  width: 100%;
+  height: 40vh;
+}
+</style>
diff --git a/admin-client/vite.config.ts b/admin-client/vite.config.ts
index 59b9a21..3259bd4 100644
--- a/admin-client/vite.config.ts
+++ b/admin-client/vite.config.ts
@@ -5,6 +5,7 @@ import vueJsx from "@vitejs/plugin-vue-jsx";
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite';
 import { AntDesignVueResolver,ElementPlusResolver  } from 'unplugin-vue-components/resolvers';
+// import monacoEditorPlugin from "vite-plugin-monaco-editor";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [