😎同步升级goview

GoView/package.json

@@ -48,7 +48,7 @@
     "vue-i18n": "9.2.2",
     "vue-router": "4.0.12",
     "vue3-lazyload": "^0.2.5-beta",
-    "vue3-sketch-ruler": "^1.3.3",
+    "vue3-sketch-ruler": "1.3.3",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {

GoView/pnpm-lock.yaml

@@ -111,8 +111,8 @@ importers:
         specifier: ^0.2.5-beta
         version: 0.2.5-beta(@vue/compiler-sfc@3.5.13)(vue@3.5.13(typescript@4.6.3))
       vue3-sketch-ruler:
-        specifier: ^1.3.3
+        specifier: 1.3.3
-        version: 1.3.16(vue@3.5.13(typescript@4.6.3))
+        version: 1.3.3(vue@3.5.13(typescript@4.6.3))
       vuedraggable:
         specifier: ^4.1.0
         version: 4.1.0(vue@3.5.13(typescript@4.6.3))
@@ -721,28 +721,24 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@resvg/resvg-js-linux-arm64-musl@2.4.1':
     resolution: {integrity: sha512-6mT0+JBCsermKMdi/O2mMk3m7SqOjwi9TKAwSngRZ/nQoL3Z0Z5zV+572ztgbWr0GODB422uD8e9R9zzz38dRQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@resvg/resvg-js-linux-x64-gnu@2.4.1':
     resolution: {integrity: sha512-60KnrscLj6VGhkYOJEmmzPlqqfcw1keDh6U+vMcNDjPhV3B5vRSkpP/D/a8sfokyeh4VEacPSYkWGezvzS2/mg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@resvg/resvg-js-linux-x64-musl@2.4.1':
     resolution: {integrity: sha512-0AMyZSICC1D7ge115cOZQW8Pcad6PjWuZkBFF3FJuSxC6Dgok0MQnLTs2MfMdKBlAcwO9dXsf3bv9tJZj8pATA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@resvg/resvg-js-win32-arm64-msvc@2.4.1':
     resolution: {integrity: sha512-76XDFOFSa3d0QotmcNyChh2xHwk+JTFiEQBVxMlHpHMeq7hNrQJ1IpE1zcHSQvrckvkdfLboKRrlGB86B10Qjw==}
@@ -3952,9 +3948,8 @@ packages:
       '@vue/compiler-sfc': '>=3.0.0'
       vue: '>=3.0.0'
 
-  vue3-sketch-ruler@1.3.16:
+  vue3-sketch-ruler@1.3.3:
-    resolution: {integrity: sha512-k/TBOwbueU9eWOF7k/emsZMwtEqFk/FxG+h//TlaZ2B8RWbxhIe6hPFgggO4Jng10ARsuH4cMGAR+ZOuN4ozgg==}
+    resolution: {integrity: sha512-k7wK34fWq0v4PiEklF0KAxS37UJS2nm8mMaE8g4Bqv9ZbBY7MxqrkM1wIj9VHmjN/MyQeodFWdg6lJv/ZESKlw==}
-    deprecated: This version is deprecated. Please upgrade to version 2X for better features and performance.See https://github.com/kakajun/vue3-sketch-ruler
     hasBin: true
     peerDependencies:
       '@vue/composition-api': ^1.1.0
@@ -4331,7 +4326,7 @@ snapshots:
       '@types/node': 20.5.1
       chalk: 4.1.2
       cosmiconfig: 8.3.6(typescript@5.7.2)
-      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@4.6.3))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.7.2))(typescript@5.7.2)
+      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@4.6.3))(ts-node@10.9.2(@types/node@16.18.122)(typescript@4.6.3))(typescript@5.7.2)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
@@ -5623,7 +5618,7 @@ snapshots:
 
   core-util-is@1.0.3: {}
 
-  cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@4.6.3))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.7.2))(typescript@5.7.2):
+  cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@4.6.3))(ts-node@10.9.2(@types/node@16.18.122)(typescript@4.6.3))(typescript@5.7.2):
     dependencies:
       '@types/node': 20.5.1
       cosmiconfig: 8.3.6(typescript@5.7.2)
@@ -8208,7 +8203,7 @@ snapshots:
       '@vue/compiler-sfc': 3.5.13
       vue: 3.5.13(typescript@4.6.3)
 
-  vue3-sketch-ruler@1.3.16(vue@3.5.13(typescript@4.6.3)):
+  vue3-sketch-ruler@1.3.3(vue@3.5.13(typescript@4.6.3)):
     optionalDependencies:
       vue: 3.5.13(typescript@4.6.3)
 

GoView/src/packages/components/Charts/Pies/PieCommon/index.vue

@@ -103,6 +103,10 @@ watch(
   () => props.chartConfig.option.type,
   newData => {
     try {
+      // 防止初始化时触发修改，导致部分参数丢失
+      if (isPreview()) {
+        return
+      }
       if (newData === 'nomal') {
         props.chartConfig.option.series[0].radius = '70%'
         props.chartConfig.option.series[0].roseType = false

GoView/src/packages/components/Decorates/Mores/CountDown/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div ref="vChartRef">
     <n-countdown
       ref="countdownRef"
       :duration="totalDuration"
@@ -79,6 +79,8 @@ import { CreateComponentType } from '@/packages/index.d'
 import { Flipper } from '@/components/Pages/Flipper'
 import { OptionType } from './config'
 import { CountdownInst, CountdownProps } from 'naive-ui/es/countdown/src/Countdown'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
 const props = defineProps({
   chartConfig: {
@@ -174,6 +176,10 @@ watch(
 onMounted(() => {
   updateTotalDuration()
 })
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
 </script>
 
 <style lang="scss" scoped>

GoView/src/packages/index.d.ts

@@ -27,9 +27,9 @@ export type ConfigType = {
   // 标题
   title: string
   // 分类
-  category: ChatCategoryEnum
+  category: string
   // 分类名称
-  categoryName: ChatCategoryEnumName
+  categoryName: string
   // 所属包
   package: PackagesCategoryEnum
   // 归类

GoView/src/plugins/icon.ts

@@ -105,7 +105,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 = {
@@ -309,7 +310,9 @@ const carbon = {
   // 图层
   LaptopIcon,
   // 柱状图
-  ChartPieIcon
+  ChartPieIcon,
+  // 编辑
+  EditIcon
 }
 
 // https://www.xicons.org/#/ 还有很多

GoView/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue

@@ -180,7 +180,7 @@ const globalTabList = [
     title: 'VChart主题',
     icon: ColorPaletteIcon,
     render: VChartThemeColor
-  },
+  }
 ]
 
 const previewTypeList = [

GoView/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 { HelpOutlineIcon, DocumentTextIcon } = icon.ionicons5
-const { DocumentAddIcon, DocumentDownloadIcon } = icon.carbon
+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,
   (