From 6af5f9ecf4a1b76d635d99480c4e29782101c836 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Mon, 28 Apr 2025 15:09:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=9C=A8=E7=BA=BF?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plugins/icon.ts                           |   7 +-
 .../ChartDataMatchingAndShow/index.vue        | 128 +++++++++++++++++-
 2 files changed, 130 insertions(+), 5 deletions(-)

diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts
index 86c15770..6140b384 100644
--- a/src/plugins/icon.ts
+++ b/src/plugins/icon.ts
@@ -103,7 +103,8 @@ import {
   Filter as FilterIcon,
   FilterEdit as FilterEditIcon,
   Laptop as LaptopIcon,
-  ChartPie as ChartPieIcon
+  ChartPie as ChartPieIcon,
+  Edit as EditIcon
 } from '@vicons/carbon'
 
 const ionicons5 = {
@@ -303,7 +304,9 @@ const carbon = {
   // 图层
   LaptopIcon,
   // 柱状图
-  ChartPieIcon
+  ChartPieIcon,
+  // 编辑
+  EditIcon
 }
 
 // https://www.xicons.org/#/ 还有很多
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..3b5d4f79 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue
@@ -76,6 +76,14 @@
     <n-timeline-item type="success" :title="TimelineTitleEnum.CONTENT">
       <n-space vertical>
         <n-space class="source-btn-box">
+          <n-button class="sourceBtn-item" :disabled="noData" @click="openOnlineEditHandle">
+            <template #icon>
+              <n-icon>
+                <EditIcon />
+              </n-icon>
+            </template>
+            编辑
+          </n-button>
           <n-upload
             v-model:file-list="uploadFileListRef"
             :show-file-list="false"
@@ -118,6 +126,54 @@
       </n-space>
     </n-timeline-item>
   </n-timeline>
+  <!-- 编辑数据 -->
+  <n-modal
+    class="go-online-edit go-background-filter"
+    :title="'组件数据在线编辑 — ' + targetData.chartConfig.title"
+    preset="card"
+    size="small"
+    style="width: 800px"
+    v-model:show="showRef"
+    transform-origin="center"
+    :mask-closable="false"
+    :bordered="true"
+    @afterLeave="closeOlineEditHandle"
+    content-style="padding: 0;"
+  >
+    <n-divider style="margin: 4px 0 10px" />
+    <monaco-editor
+      v-model:modelValue="editorCode"
+      height="70vh"
+      :language="targetData.chartConfig.chartKey === 'VHtmlCommon' ? 'html' : 'json'"
+    />
+    <template #action>
+      <n-space justify="space-between">
+        <div class="go-flex-items-center">
+          <n-tag :bordered="false" type="primary" style="border-radius: 5px">
+            <template #icon>
+              <n-icon :component="DocumentTextIcon" />
+            </template>
+            说明
+          </n-tag>
+          <n-space :wrap-item="false" vertical>
+            <n-text class="go-ml-2" depth="3" style="font-size: 1">
+              1. 格式化代码：
+              <n-tag :bordered="false" type="warning" style="font-size: 12px">( shift + alt + f ) </n-tag>
+              <n-divider vertical />
+              <n-tag :bordered="false" type="warning" style="font-size: 12px">右键 -> Format Document</n-tag>
+            </n-text>
+            <n-text class="go-ml-2" depth="3" style="font-size: 1; text-align: left">
+              2. 字符串需要用英文双引号包裹，否则会报错
+            </n-text>
+          </n-space>
+        </div>
+        <n-space>
+          <n-button class="go-px-4" :focusable="false" @click="closeOlineEditHandle">取消</n-button>
+          <n-button class="go-px-4" type="primary" @click="saveOlineEditHandle"> 保存 </n-button>
+        </n-space>
+      </n-space>
+    </template>
+  </n-modal>
 </template>
 
 <script setup lang="ts">
@@ -129,7 +185,9 @@ import { DataResultEnum, TimelineTitleEnum } from '../../index.d'
 import { ChartDataMonacoEditor } from '../ChartDataMonacoEditor'
 import { useFile } from '../../hooks/useFile.hooks'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
-import { toString, isArray } from '@/utils'
+import { toString, isArray, goDialog } from '@/utils'
+// @ts-ignore
+import MonacoEditor from '@/components/Pages/MonacoEditor/index.vue'
 
 const { targetData } = useTargetData()
 defineProps({
@@ -147,13 +205,16 @@ defineProps({
 const tableTitle = ['字段', '映射', '状态']
 const vchartTableTitle = ['字段', '接口映射字段']
 
-const { HelpOutlineIcon } = icon.ionicons5
-const { DocumentAddIcon, DocumentDownloadIcon } = icon.carbon
+const { HelpOutlineIcon, DocumentTextIcon } = icon.ionicons5
+const { DocumentAddIcon, DocumentDownloadIcon, EditIcon } = icon.carbon
 
 const source = ref()
 const dimensions = ref()
 const dimensionsAndSource = ref()
 const noData = ref(false)
+const showRef = ref(false)
+// 编辑的代码
+const editorCode = ref('')
 
 // 映射列表, 注意内部的mapping是响应式的，上方需要修改
 const fieldList = ref<
@@ -240,6 +301,67 @@ const initFieldListHandle = () => {
   }
 }
 
+// 打开在线编辑
+const openOnlineEditHandle = () => {
+  showRef.value = true
+  if (targetData.value.chartConfig.chartKey !== 'VHtmlCommon') {
+    editorCode.value = JSON.stringify(source.value, null, 2)
+  } else {
+    editorCode.value = source.value
+  }
+}
+
+// 取消在线编辑
+const closeOlineEditHandle = () => {
+  showRef.value = false
+}
+
+// 取消在线编辑
+const saveOlineEditHandle = () => {
+  // 设置
+  const setDataHandle = (newData: any) => {
+    targetData.value.option.dataset = newData
+  }
+  goDialog({
+    message: '是否保存编辑后的数据？',
+    onPositiveCallback: () => {
+      try {
+        let jsonData = editorCode.value
+        if (targetData.value.chartConfig.chartKey !== 'VHtmlCommon') {
+          jsonData = JSON.parse(jsonData)
+        }
+        if (typeof jsonData !== typeof source.value) {
+          goDialog({
+            message: '当前数据类型与原类型不相同, 是否强制应用数据?',
+            onPositiveCallback: () => {
+              try {
+                setDataHandle(jsonData)
+                editorCode.value = ''
+                window['$message'].success('保存成功')
+                closeOlineEditHandle()
+              } catch (error) {
+                window['$message'].error('内容应用错误, 请检查格式是否正确')
+              }
+            }
+          })
+        } else {
+          try {
+            setDataHandle(jsonData)
+            editorCode.value = ''
+            window['$message'].success('保存成功')
+            closeOlineEditHandle()
+          } catch (error) {
+            window['$message'].error('内容应用错误, 请检查格式是否正确')
+          }
+        }
+      } catch (error) {
+        console.log(error)
+        window['$message'].error('内容应用错误, 请检查格式是否正确')
+      }
+    }
+  })
+}
+
 watch(
   () => targetData.value?.option?.dataset,
   (