添加游戏日志查询

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']

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 {
-import { FormInstance } from "ant-design-vue";
+  reactive,
-import Tools from "@/core/utils/Tools";
+  ref,
-import { MoreFilled } from "@element-plus/icons-vue";
+  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) {
+    totalMilliseconds.value = 0;
-      state.vm.id = jsonstr;
+    nextTick(() => {
-      var data = JSON.parse(jsonstr);
+      const data = JSON.parse(jsonstr || "{}");
-      console.log(data);
+      jsonData.value.slice(0, jsonData.value.length);
       jsonData.value.push(...data);
-      console.log(jsonData.value);
+      setTimeout(() => {
+        if (editorInstance) {
+          editorInstance.setValue(JSON.stringify(data, null, 2));
         }
-
+        if (responseEditorInstance) {
-    //初始化表单数据
+          responseEditorInstance.setValue(
-    state.loading = true;
+            JSON.stringify(data.response || {}, null, 2)
-    state.loading = false;
+          );
+        }
+      }, 500);
+    });
   },
 });
 
-/**
+// 保存数据
- *保存数据
+function save() {
- */
+  if (editorInstance) {
-function save() {}
+    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>

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: [