From e867deb54707ddf601768b9d3486afec45bdd953 Mon Sep 17 00:00:00 2001
From: KOMATA <20227709+HynoR@users.noreply.github.com>
Date: Mon, 1 Dec 2025 18:13:52 +0800
Subject: [PATCH] feat: Add copy function for raw JSON in container and network
 detail views (#11141)

* feat: Add copy button for raw JSON in container and network detail views

* refactor: Change CodemirrorPro component from disabled to readonly in container and network detail views

* feat: Add readonly prop to CodemirrorPro component for enhanced editing control
---
 frontend/src/components/codemirror-pro/index.vue     |  9 +++++++--
 .../src/views/container/container/inspect/index.vue  | 12 +++++++++++-
 .../src/views/container/network/detail/index.vue     | 12 +++++++++++-
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/codemirror-pro/index.vue b/frontend/src/components/codemirror-pro/index.vue
index cf274a7cf..35e7d9f01 100644
--- a/frontend/src/components/codemirror-pro/index.vue
+++ b/frontend/src/components/codemirror-pro/index.vue
@@ -7,7 +7,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue';
 import { basicSetup, EditorView } from 'codemirror';
-import { EditorState } from '@codemirror/state';
+import { EditorState, Extension } from '@codemirror/state';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { StreamLanguage } from '@codemirror/language';
 import { nginx } from './nginx';
@@ -27,6 +27,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    readonly: {
+        type: Boolean,
+        default: false,
+    },
     modelValue: {
         type: String,
         default: '',
@@ -119,7 +123,7 @@ const initCodeMirror = () => {
         },
     });
 
-    const extensions = [
+    const extensions: Extension[] = [
         defaultTheme,
         oneDark,
         basicSetup,
@@ -131,6 +135,7 @@ const initCodeMirror = () => {
         }),
         placeholder(props.placeholder),
         EditorView.editable.of(!props.disabled),
+        EditorState.readOnly.of(props.readonly),
     ];
 
     if (props.lineWrapping) {
diff --git a/frontend/src/views/container/container/inspect/index.vue b/frontend/src/views/container/container/inspect/index.vue
index 902e4b5b2..b8f26102e 100644
--- a/frontend/src/views/container/container/inspect/index.vue
+++ b/frontend/src/views/container/container/inspect/index.vue
@@ -149,7 +149,12 @@
             </el-tab-pane>
 
             <el-tab-pane :label="$t('commons.button.view')" name="view">
-                <CodemirrorPro v-model="rawJson" :height-diff="240" :disabled="true" mode="json" />
+                <div class="mb-2 flex justify-start">
+                    <el-button type="primary" @click="handleCopyRawJson" icon="DocumentCopy" size="default">
+                        {{ $t('commons.button.copy') }}
+                    </el-button>
+                </div>
+                <CodemirrorPro v-model="rawJson" :height-diff="240" :readonly="true" mode="json" />
             </el-tab-pane>
         </el-tabs>
 
@@ -165,6 +170,7 @@
 import { ref } from 'vue';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
 import { routerToFileWithPath } from '@/utils/router';
+import { copyText } from '@/utils/util';
 import i18n from '@/lang';
 
 const visible = ref(false);
@@ -263,6 +269,10 @@ const handleJumpToFile = (path: string) => {
     }
 };
 
+const handleCopyRawJson = () => {
+    copyText(rawJson.value);
+};
+
 defineExpose({
     acceptParams,
 });
diff --git a/frontend/src/views/container/network/detail/index.vue b/frontend/src/views/container/network/detail/index.vue
index 7d3df1c1b..cf7f3f840 100644
--- a/frontend/src/views/container/network/detail/index.vue
+++ b/frontend/src/views/container/network/detail/index.vue
@@ -93,7 +93,12 @@
             </el-tab-pane>
 
             <el-tab-pane :label="$t('commons.button.view')" name="raw">
-                <CodemirrorPro v-model="rawJson" :height-diff="240" :disabled="true" mode="json" />
+                <div class="mb-2 flex justify-start">
+                    <el-button type="primary" @click="handleCopyRawJson" icon="DocumentCopy" size="default">
+                        {{ $t('commons.button.copy') }}
+                    </el-button>
+                </div>
+                <CodemirrorPro v-model="rawJson" :height-diff="240" :readonly="true" mode="json" />
             </el-tab-pane>
         </el-tabs>
 
@@ -108,6 +113,7 @@
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
+import { copyText } from '@/utils/util';
 
 const visible = ref(false);
 const activeTab = ref('overview');
@@ -173,6 +179,10 @@ const containerList = computed(() => {
     }));
 });
 
+const handleCopyRawJson = () => {
+    copyText(rawJson.value);
+};
+
 defineExpose({
     acceptParams,
 });