From 7f2f72c8baddf7c71fa143645f287a2e16f80fc8 Mon Sep 17 00:00:00 2001
From: goodGai <1398281274@qq.com>
Date: Wed, 11 Dec 2024 15:14:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E3=80=90apm=E3=80=91span=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E4=BF=A1=E6=81=AF=E5=A2=9E=E5=8A=A0=E5=A4=8D=E5=88=B6?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=20--Story=3D121094991=20#=20Reviewed,=20tran?=
 =?UTF-8?q?saction=20id:=2026455?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/trace/pages/main/span-details.scss    | 36 ++++++++++++++--
 .../src/trace/pages/main/span-details.tsx     | 41 +++++++++++++++----
 2 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/bkmonitor/webpack/src/trace/pages/main/span-details.scss b/bkmonitor/webpack/src/trace/pages/main/span-details.scss
index d22503c816..a49e9738e0 100644
--- a/bkmonitor/webpack/src/trace/pages/main/span-details.scss
+++ b/bkmonitor/webpack/src/trace/pages/main/span-details.scss
@@ -13,6 +13,25 @@
   }
 }
 
+%json-head {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  font-size: 16px;
+  color: #63656e;
+
+  .icon-monitor {
+    margin-left: 12px;
+    font-size: 16px;
+    color: #979ba5;
+    cursor: pointer;
+
+    &:hover {
+      color: #3a84ff;
+    }
+  }
+}
+
 .span-details-sideslider {
   /* stylelint-disable-next-line declaration-no-important */
   position: fixed !important;
@@ -82,7 +101,11 @@
       }
 
       .json-text-style {
-        @extend %json-style
+        @extend %json-style;
+
+        .json-head {
+          @extend %json-head;
+        }
       }
     }
 
@@ -567,8 +590,13 @@
   }
 
   .json-text-style {
+    position: relative;
     margin-top: 12px;
-    @extend %json-style
+    @extend %json-style;
+
+    .json-head {
+      @extend %json-head;
+    }
   }
 }
 
@@ -755,5 +783,5 @@
   .graph-tools {
     /* stylelint-disable-next-line declaration-no-important */
     left: 60px !important;
-  } 
-}
\ No newline at end of file
+  }
+}
diff --git a/bkmonitor/webpack/src/trace/pages/main/span-details.tsx b/bkmonitor/webpack/src/trace/pages/main/span-details.tsx
index 00fdccd58c..8759f46405 100644
--- a/bkmonitor/webpack/src/trace/pages/main/span-details.tsx
+++ b/bkmonitor/webpack/src/trace/pages/main/span-details.tsx
@@ -615,13 +615,22 @@ export default defineComponent({
     function handleTitleCopy(content: string) {
       let text = '';
       const { spanID } = props.spanDetails;
-      if (content === 'text') {
-        text = spanID;
-      } else {
-        const hash = `#${window.__BK_WEWEB_DATA__?.baseroute || '/'}home/?app_name=${
-          appName.value
-        }&search_type=accurate&search_id=spanID&trace_id=${spanID}`;
-        text = location.href.replace(location.hash, hash);
+      switch (content) {
+        case 'text': {
+          text = spanID;
+          break;
+        }
+        case 'original': {
+          text = JSON.stringify(originalData.value);
+          break;
+        }
+        default: {
+          const hash = `#${window.__BK_WEWEB_DATA__?.baseroute || '/'}home/?app_name=${
+            appName.value
+          }&search_type=accurate&search_id=spanID&trace_id=${spanID}`;
+          text = location.href.replace(location.hash, hash);
+          break;
+        }
       }
       copyText(text, (msg: string) => {
         Message({
@@ -974,6 +983,22 @@ export default defineComponent({
         </Popover>
       </div>
     );
+
+    // 复制json字符串数据的icon
+    const copyOriginalElem = () => (
+      <div class='json-head'>
+        <Popover
+          content={t('复制')}
+          placement='right'
+          theme='light'
+        >
+          <span
+            class='icon-monitor icon-mc-copy'
+            onClick={() => handleTitleCopy('original')}
+          />
+        </Popover>
+      </div>
+    );
     if (window.enable_apm_profiling) {
       tabList.push({
         label: t('性能分析'),
@@ -993,6 +1018,7 @@ export default defineComponent({
         >
           {props.withSideSlider && showOriginalData.value ? (
             <div class='json-text-style'>
+              {copyOriginalElem()}
               <VueJsonPretty data={originalData.value} />
             </div>
           ) : (
@@ -1021,6 +1047,7 @@ export default defineComponent({
                 <div class='accurate-original-panel'>
                   {titleInfoElem()}
                   <div class='json-text-style'>
+                    {copyOriginalElem()}
                     <VueJsonPretty data={originalData.value} />
                   </div>
                 </div>