From 88698f7fc57eecde964a7ce2435b385c130b0508 Mon Sep 17 00:00:00 2001
From: HynoR <20227709+HynoR@users.noreply.github.com>
Date: Mon, 1 Dec 2025 17:42:26 +0800
Subject: [PATCH 1/3] feat: Add copy button for raw JSON in container and
 network detail views

---
 .../src/views/container/container/inspect/index.vue    | 10 ++++++++++
 frontend/src/views/container/network/detail/index.vue  | 10 ++++++++++
 2 files changed, 20 insertions(+)

diff --git a/frontend/src/views/container/container/inspect/index.vue b/frontend/src/views/container/container/inspect/index.vue
index 902e4b5b2329..9640136a6747 100644
--- a/frontend/src/views/container/container/inspect/index.vue
+++ b/frontend/src/views/container/container/inspect/index.vue
@@ -149,6 +149,11 @@
             </el-tab-pane>
 
             <el-tab-pane :label="$t('commons.button.view')" name="view">
+                <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" :disabled="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 7d3df1c1bb2b..8950c46d6900 100644
--- a/frontend/src/views/container/network/detail/index.vue
+++ b/frontend/src/views/container/network/detail/index.vue
@@ -93,6 +93,11 @@
             </el-tab-pane>
 
             <el-tab-pane :label="$t('commons.button.view')" name="raw">
+                <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" :disabled="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,
 });

From 716569aa43d72668988fe39b24f6e965fbeea8fa Mon Sep 17 00:00:00 2001
From: HynoR <20227709+HynoR@users.noreply.github.com>
Date: Mon, 1 Dec 2025 17:45:57 +0800
Subject: [PATCH 2/3] refactor: Change CodemirrorPro component from disabled to
 readonly in container and network detail views

---
 frontend/src/views/container/container/inspect/index.vue | 2 +-
 frontend/src/views/container/network/detail/index.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/container/container/inspect/index.vue b/frontend/src/views/container/container/inspect/index.vue
index 9640136a6747..b8f26102e232 100644
--- a/frontend/src/views/container/container/inspect/index.vue
+++ b/frontend/src/views/container/container/inspect/index.vue
@@ -154,7 +154,7 @@
                         {{ $t('commons.button.copy') }}
                     </el-button>
                 </div>
-                <CodemirrorPro v-model="rawJson" :height-diff="240" :disabled="true" mode="json" />
+                <CodemirrorPro v-model="rawJson" :height-diff="240" :readonly="true" mode="json" />
             </el-tab-pane>
         </el-tabs>
 
diff --git a/frontend/src/views/container/network/detail/index.vue b/frontend/src/views/container/network/detail/index.vue
index 8950c46d6900..cf7f3f840ac9 100644
--- a/frontend/src/views/container/network/detail/index.vue
+++ b/frontend/src/views/container/network/detail/index.vue
@@ -98,7 +98,7 @@
                         {{ $t('commons.button.copy') }}
                     </el-button>
                 </div>
-                <CodemirrorPro v-model="rawJson" :height-diff="240" :disabled="true" mode="json" />
+                <CodemirrorPro v-model="rawJson" :height-diff="240" :readonly="true" mode="json" />
             </el-tab-pane>
         </el-tabs>
 

From 844f4114dd16ef2a501fd9c4ff447bfbd83337f2 Mon Sep 17 00:00:00 2001
From: HynoR <20227709+HynoR@users.noreply.github.com>
Date: Mon, 1 Dec 2025 17:51:45 +0800
Subject: [PATCH 3/3] feat: Add readonly prop to CodemirrorPro component for
 enhanced editing control

---
 frontend/src/components/codemirror-pro/index.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/codemirror-pro/index.vue b/frontend/src/components/codemirror-pro/index.vue
index cf274a7cf964..35e7d9f01013 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) {