Song/feat/mitm beautify (#1639)

* feat: mitm手动劫持新增美化

* del: log

app/renderer/src/main/src/pages/mitm/MITMServerHijacking/MITMHijackedContent.tsx

@@ -24,7 +24,8 @@ import emiter from "@/utils/eventBus/eventBus"
 import {MITMFilterSchema} from "../MITMServerStartForm/MITMFilters"
 import {YakitButton} from "@/components/yakitUI/YakitButton/YakitButton"
 import {OutlineXIcon} from "@/assets/icon/outline"
-import { Uint8ArrayToString } from "@/utils/str"
+import {Uint8ArrayToString} from "@/utils/str"
+import {prettifyPacketCode} from "@/utils/prettifyPacket"
 
 const {ipcRenderer} = window.require("electron")
 
@@ -36,7 +37,7 @@ interface MITMHijackedContentProps {
     setIsFullScreen: (f: boolean) => void
     logs: ExecResultLog[]
     statusCards: StatusCardProps[]
-      }
+}
 
 const MITMHijackedContent: React.FC<MITMHijackedContentProps> = React.memo((props) => {
     const {status, setStatus, isFullScreen, setIsFullScreen, logs, statusCards} = props
@@ -82,6 +83,9 @@ const MITMHijackedContent: React.FC<MITMHijackedContentProps> = React.memo((prop
     const [openRepRuleFlag, setOpenRepRuleFlag] = useState<boolean>(false) // 是否开启过替换规则
     const [alertVisible, setAlertVisible] = useState<boolean>(false)
 
+    const [beautifyOpen, setBeautifyOpen] = useState<boolean>(false)
+    const [currentBeautifyPacket, setCurrentBeautifyPacket] = useState<Uint8Array>(new Buffer([]))
+
     const getMITMFilter = useMemoizedFn(() => {
         ipcRenderer
             .invoke("mitm-get-filter")
@@ -333,6 +337,35 @@ const MITMHijackedContent: React.FC<MITMHijackedContentProps> = React.memo((prop
         },
         [autoForward]
     )
+
+    /**
+     * 美化
+     */
+    useEffect(() => {
+        const currentPacketStr = Uint8ArrayToString(currentPacket)
+        if (currentPacketStr === "") {
+            setCurrentBeautifyPacket(currentPacket)
+            return
+        }
+        const encoder = new TextEncoder()
+        const bytes = encoder.encode(currentPacketStr)
+        const mb = bytes.length / 1024 / 1024
+        if (mb > 0.5) {
+            setCurrentBeautifyPacket(currentPacket)
+        } else {
+            prettifyPacketCode(currentPacketStr)
+                .then((res) => {
+                    setCurrentBeautifyPacket(res as Uint8Array)
+                })
+                .catch(() => {
+                    setCurrentBeautifyPacket(currentPacket)
+                })
+        }
+    }, [Uint8ArrayToString(currentPacket)])
+    const onSetBeautifyOpen = (flag: boolean) => {
+        setBeautifyOpen(flag)
+    }
+
     const onRenderHeardExtra = useMemoizedFn(() => {
         switch (autoForward) {
             case "manual":
@@ -350,6 +383,8 @@ const MITMHijackedContent: React.FC<MITMHijackedContentProps> = React.memo((prop
                         width={width}
                         calloutColor={calloutColor}
                         onSetCalloutColor={setCalloutColor}
+                        beautifyOpen={beautifyOpen}
+                        onSetBeautifyOpen={onSetBeautifyOpen}
                     />
                 )
             case "log":
@@ -379,7 +414,8 @@ const MITMHijackedContent: React.FC<MITMHijackedContentProps> = React.memo((prop
                             <MITMManualEditor
                                 isHttp={isHttp}
                                 currentIsWebsocket={currentIsWebsocket}
-                                currentPacket={currentPacket}
+                                currentPacket={beautifyOpen ? currentBeautifyPacket : currentPacket}
+                                beautifyOpen={beautifyOpen}
                                 setModifiedPacket={setModifiedPacket}
                                 forResponse={forResponse}
                                 currentPacketId={currentPacketId}
@@ -456,14 +492,9 @@ const MITMHijackedContent: React.FC<MITMHijackedContentProps> = React.memo((prop
                         }}
                     />
                 </div>
-                <div className={styles["mitm-hijacked-heard-right"]}>
-                    {onRenderHeardExtra()}
-                </div>
+                <div className={styles["mitm-hijacked-heard-right"]}>{onRenderHeardExtra()}</div>
             </div>
-            <div
-                className={styles["mitm-alert-msg"]}
-                style={{display: alertVisible ? "block" : "none"}}
-            >
+            <div className={styles["mitm-alert-msg"]} style={{display: alertVisible ? "block" : "none"}}>
                 {alertMsg}
                 <YakitButton
                     style={{float: "right"}}

app/renderer/src/main/src/pages/mitm/MITMServerHijacking/MITMManual.tsx

@@ -1,14 +1,12 @@
 import {YakitButton} from "@/components/yakitUI/YakitButton/YakitButton"
 import {YakitSelect} from "@/components/yakitUI/YakitSelect/YakitSelect"
 import {CopyComponents, YakitTag} from "@/components/yakitUI/YakitTag/YakitTag"
-import {HTTPPacketEditor, NewHTTPPacketEditor} from "@/utils/editors"
+import {NewHTTPPacketEditor} from "@/utils/editors"
 import {Divider} from "antd"
-import React, {useEffect, useImperativeHandle, useRef, useState, useMemo} from "react"
-import {allowHijackedResponseByRequest, MITMStatus} from "./MITMHijackedContent"
+import React, {useEffect, useState, useMemo} from "react"
+import {MITMStatus} from "./MITMHijackedContent"
 import styles from "./MITMServerHijacking.module.scss"
-import * as monaco from "monaco-editor"
 import classNames from "classnames"
-import {useResponsive} from "ahooks"
 import {YakitSegmented} from "@/components/yakitUI/YakitSegmented/YakitSegmented"
 import {OtherMenuListProps, YakitEditorKeyCode} from "@/components/yakitUI/YakitEditor/YakitEditorType"
 import {YakitSwitch} from "@/components/yakitUI/YakitSwitch/YakitSwitch"
@@ -31,6 +29,8 @@ interface MITMManualHeardExtraProps {
     width: number
     calloutColor: string
     onSetCalloutColor: (calloutColor: string) => void
+    beautifyOpen: boolean
+    onSetBeautifyOpen: (beautifyOpen: boolean) => void
 }
 export const MITMManualHeardExtra: React.FC<MITMManualHeardExtraProps> = React.memo((props) => {
     const {
@@ -45,7 +45,9 @@ export const MITMManualHeardExtra: React.FC<MITMManualHeardExtraProps> = React.m
         onSubmitData,
         width,
         calloutColor,
-        onSetCalloutColor
+        onSetCalloutColor,
+        beautifyOpen,
+        onSetBeautifyOpen
     } = props
     return (
         <div className={styles["autoForward-manual"]}>
@@ -85,6 +87,13 @@ export const MITMManualHeardExtra: React.FC<MITMManualHeardExtraProps> = React.m
                         ))}
                     </YakitSelect>
                 </div>
+                <div className={styles["manual-select"]}>
+                    <span className={styles["manual-select-label"]}>美化:</span>
+                    <YakitSwitch
+                        checked={beautifyOpen}
+                        onChange={onSetBeautifyOpen}
+                    />
+                </div>
                 <div className={styles["manual-select"]}>
                     <span className={styles["manual-select-label"]}>劫持响应:</span>
                     {/* <YakitSegmented
@@ -215,6 +224,7 @@ interface MITMManualEditorProps {
     onSetHijackResponseType: (s: string) => void
     currentIsForResponse: boolean
     requestPacket: Uint8Array
+    beautifyOpen: boolean
 }
 export const MITMManualEditor: React.FC<MITMManualEditorProps> = React.memo((props) => {
     const {
@@ -231,7 +241,8 @@ export const MITMManualEditor: React.FC<MITMManualEditorProps> = React.memo((pro
         status,
         onSetHijackResponseType,
         currentIsForResponse,
-        requestPacket
+        requestPacket,
+        beautifyOpen
     } = props
     // 操作系统类型
     const [system, setSystem] = useState<string>()
@@ -364,7 +375,7 @@ export const MITMManualEditor: React.FC<MITMManualEditorProps> = React.memo((pro
             onChange={setModifiedPacket}
             noPacketModifier={true}
             readOnly={status === "hijacking"}
-            refreshTrigger={(forResponse ? `rsp` : `req`) + `${currentPacketId}`}
+            refreshTrigger={(forResponse ? `rsp` : `req`) + `${currentPacketId}${Uint8ArrayToString(currentPacket)}${beautifyOpen}`}
             contextMenu={mitmManualRightMenu}
             editorOperationRecord='MITM_Manual_EDITOR_RECORF'
             isWebSocket={currentIsWebsocket && status !== "hijacking"}