From 3ca332381e4a01bf827469dec22a7a14b4e01e7f Mon Sep 17 00:00:00 2001
From: lyq <1661898579@qq.com>
Date: Tue, 25 Mar 2025 10:59:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E9=9D=99=E6=80=81?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=8F=AF=E4=BF=AE=E6=94=B9=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChartDataMatchingAndShow/index.vue        | 36 +++++++++++++++----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue
index 59cc7750..04e3858c 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue
@@ -58,11 +58,11 @@
               <n-input v-model:value="item.mapping" type="text" size="small" placeholder="小" />
             </td>
             <!-- <td>
-              <n-space style="width: 70px" :size="4">
-                <n-badge dot :type="item.result === 1 ? 'success' : 'error'"></n-badge>
-                <n-text>匹配{{ item.result === 1 ? '成功' : '失败' }}</n-text>
-              </n-space>
-            </td> -->
+                <n-space style="width: 70px" :size="4">
+                  <n-badge dot :type="item.result === 1 ? 'success' : 'error'"></n-badge>
+                  <n-text>匹配{{ item.result === 1 ? '成功' : '失败' }}</n-text>
+                </n-space>
+              </td> -->
           </tr>
         </tbody>
       </n-table>
@@ -113,7 +113,15 @@
           </div>
         </n-space>
         <n-card size="small">
-          <n-code :code="toString(source)" language="json"></n-code>
+          <!-- <n-code :code="toString(source)" language="json"></n-code> -->
+          <monaco-editor
+            :modelValue="JSON.stringify(source, null, 2)"
+            @update:modelValue="handleEditorUpdate"
+            language="json"
+            width="100%"
+            height="520px"
+          />
+          <n-button class="sourceBtn-item" @click="handleRun"> 运行 </n-button>
         </n-card>
       </n-space>
     </n-timeline-item>
@@ -130,6 +138,7 @@ import { ChartDataMonacoEditor } from '../ChartDataMonacoEditor'
 import { useFile } from '../../hooks/useFile.hooks'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
 import { toString, isArray } from '@/utils'
+import { MonacoEditor } from '@/components/Pages/MonacoEditor'
 
 const { targetData } = useTargetData()
 defineProps({
@@ -240,6 +249,21 @@ const initFieldListHandle = () => {
   }
 }
 
+// 处理编辑器内容更新
+const handleEditorUpdate = (val: string) => {
+  try {
+    if (!val) return (source.value = '此组件无数据源')
+    source.value = JSON.parse(val)
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 监听点击运行按钮的事件
+const handleRun = () => {
+  targetData.value.option.dataset = source.value
+}
+
 watch(
   () => targetData.value?.option?.dataset,
   (