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

Author: HynoR

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) {

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,
 });

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,
 });