Merge branch 'master-fetch' of gitee.com:dromara/go-view into lyw

Signed-off-by: 宝莉 <1084050926@qq.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "go-view",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "engines": {
     "node": ">=12.0"
   },

src/hooks/useChartDataFetch.hook.ts

@@ -7,6 +7,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { RequestDataTypeEnum } from '@/enums/httpEnum'
 import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils'
 import { setOption } from '@/packages/public/chart'
+import { isNil } from 'lodash'
 
 // 获取类型
 type ChartEditStoreType = typeof useChartEditStore
@@ -35,7 +36,7 @@ export const useChartDataFetch = (
   const echartsUpdateHandle = (dataset: any) => {
     if (chartFrame === ChartFrameEnum.ECHARTS) {
       if (vChartRef.value) {
-        setOption(vChartRef.value, { dataset: dataset })
+        setOption(vChartRef.value, { dataset: dataset }, false)
       }
     }
   }
@@ -101,14 +102,12 @@ export const useChartDataFetch = (
         )
 
         // 定时时间
-        const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value
+        const time = targetInterval && !isNil(targetInterval.value) ? targetInterval.value : globalRequestInterval.value
         // 单位
-        const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value
+        const unit = targetInterval && !isNil(targetInterval.value) ? targetUnit.value : globalUnit.value
         // 开启轮询
         if (time) {
           fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
-        } else {
-          fetchFn()
         }
       }
       // eslint-disable-next-line no-empty

src/packages/chartConfiguration/echarts/label.ts

@@ -3,5 +3,11 @@ export const labelConfig = {
     { label: '外侧', value: 'outside' },
     { label: '内部', value: 'inside' },
     { label: '中心', value: 'center' }
+  ],
+  fontWeight: [
+    { label: '正常', value: 'normal' },
+    { label: '普通加粗', value: 'bold' },
+    { label: '加粗', value: 'bolder' },
+    { label: '细体', value: 'lighter' }
   ]
 }

src/packages/components/Charts/Bars/BarCrossrange/index.vue

@@ -4,7 +4,6 @@
     :init-options="initOptions"
     :theme="themeColor"
     :option="option"
-    :manual-update="isPreview()"
     :update-options="{
       replaceMerge: replaceMergeArr
     }"

src/packages/components/Charts/Bars/BarLine/config.ts

@@ -33,7 +33,6 @@ export const lineSeriesItem = {
   },
   symbolSize: 5, //设定实心点的大小
   itemStyle: {
-    color: '#FFE47A',
     borderWidth: 1
   },
   lineStyle: {

src/packages/components/Charts/Bars/BarLine/config.vue

@@ -62,6 +62,12 @@
       <SettingItem name="类型">
         <n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
       </SettingItem>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.smooth" size="small" />
+          <n-text>曲线</n-text>
+        </n-space>
+      </setting-item>
     </SettingItemBox>
     <SettingItemBox name="实心点" v-if="item.type == 'line'">
       <SettingItem name="大小">
@@ -91,10 +97,10 @@
         <n-select
           v-model:value="item.label.position"
           :options="[
-            { label: 'top', value: 'top' },
+            { label: '顶部', value: 'top' },
-            { label: 'left', value: 'left' },
+            { label: '左侧', value: 'left' },
-            { label: 'right', value: 'right' },
+            { label: '右侧', value: 'right' },
-            { label: 'bottom', value: 'bottom' }
+            { label: '底部', value: 'bottom' }
           ]"
         />
       </setting-item>

src/packages/components/Charts/Bars/BarLine/index.vue

@@ -4,7 +4,9 @@
     :init-options="initOptions"
     :theme="themeColor"
     :option="option"
-    :manual-update="isPreview()"
+    :update-options="{
+      replaceMerge: replaceMergeArr
+    }"
     autoresize
   ></v-chart>
 </template>
@@ -12,6 +14,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, PropType, nextTick } from 'vue'
 import VChart from 'vue-echarts'
+import { isObject, cloneDeep } from 'lodash'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'

src/packages/components/Charts/Lines/LineCommon/index.vue

@@ -4,7 +4,6 @@
     :init-options="initOptions"
     :theme="themeColor"
     :option="option"
-    :manual-update="isPreview()"
     :update-options="{
       replaceMerge: replaceMergeArr
     }"

src/packages/components/Charts/Lines/LineGradientSingle/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize>
   </v-chart>
 </template>
 

src/packages/components/Charts/Lines/LineGradients/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
@@ -80,5 +80,7 @@ watch(
     option.value = props.chartConfig.option
   }
 )
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
 </script>

src/packages/components/Charts/Lines/LineLinearSingle/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize>
   </v-chart>
 </template>
 

src/packages/components/Charts/Maps/MapAmap/config.ts

@@ -16,8 +16,7 @@ export enum ThemeEnum {
   MACARON = 'macaron',
   BLUE = 'blue',
   DARKBLUE = 'darkblue',
-  WINE = 'wine',
+  WINE = 'wine'
-  WEIXIN = 'tileLayer'
 }
 
 export enum LangEnum {
@@ -31,6 +30,11 @@ export enum ViewModeEnum {
   STEREOSCOPIC = '3D'
 }
 
+export const ShowHideEnum = {
+  SHOW: true,
+  HIDE: false
+}
+
 export enum FeaturesEnum {
   BG = 'bg',
   POINT = 'point',
@@ -71,6 +75,25 @@ export const option = {
     },
     mapMarkerType: MarkerEnum.CIRCLE_MARKER,
     viewMode: ViewModeEnum.PLANE,
+    showLabel: ShowHideEnum.SHOW,
+    satelliteTileLayer: {
+      show: ShowHideEnum.HIDE,
+      zIndex: 1,
+      opacity: 1,
+      zooms: [3, 18]
+    },
+    roadNetTileLayer: {
+      show: ShowHideEnum.HIDE,
+      zIndex: 2,
+      opacity: 1,
+      zooms: [3, 18]
+    },
+    trafficTileLayer: {
+      show: ShowHideEnum.HIDE,
+      zIndex: 3,
+      opacity: 1,
+      zooms: [3, 18]
+    },
     lang: LangEnum.ZH_CN,
     features: [FeaturesEnum.BG, FeaturesEnum.POINT, FeaturesEnum.ROAD, FeaturesEnum.BUILDING]
   }

src/packages/components/Charts/Maps/MapAmap/config.vue

@@ -22,13 +22,21 @@
         <n-select size="small" v-model:value="optionData.mapOptions.amapStyleKey" :options="themeOptions" />
       </setting-item>
     </setting-item-box>
-    <setting-item-box name="内容" :alone="true">
+    <setting-item-box name="显示要素" :alone="true">
       <n-checkbox-group v-model:value="optionData.mapOptions.features">
         <n-space item-style="display: flex;">
           <n-checkbox :value="item.value" :label="item.label" v-for="(item, index) in featuresOptions" :key="index" />
         </n-space>
       </n-checkbox-group>
     </setting-item-box>
+    <setting-item-box name="文字标注" :alone="true">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.mapOptions.showLabel" size="small" />
+          <n-text>是否显示</n-text>
+        </n-space>
+      </setting-item>
+    </setting-item-box>
     <setting-item-box name="位置">
       <setting-item name="经度">
         <n-input-number v-model:value="optionData.mapOptions.amapLon" :show-button="false" size="small">
@@ -76,11 +84,94 @@
       </setting-item>
     </setting-item-box>
   </collapse-item>
+  <collapse-item name="图层" :expanded="true">
+    <setting-item-box name="卫星图层">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.mapOptions.satelliteTileLayer.show" size="small" />
+          <n-text>是否显示</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="叠加顺序值">
+        <n-input-number
+          v-model:value="optionData.mapOptions.satelliteTileLayer.zIndex"
+          :min="0"
+          size="small"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="透明度">
+        <n-input-number
+          v-model:value="optionData.mapOptions.satelliteTileLayer.opacity"
+          :min="0"
+          :max="1"
+          step="0.1"
+          size="small"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="缩放级别范围">
+        <n-slider v-model:value="optionData.mapOptions.satelliteTileLayer.zooms" range :step="1" :max="18" :min="3" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="路网图层">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.mapOptions.roadNetTileLayer.show" size="small" />
+          <n-text>是否显示</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="叠加顺序值">
+        <n-input-number
+          v-model:value="optionData.mapOptions.roadNetTileLayer.zIndex"
+          :min="0"
+          size="small"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="透明度">
+        <n-input-number
+          v-model:value="optionData.mapOptions.roadNetTileLayer.opacity"
+          :min="0"
+          :max="1"
+          step="0.1"
+          size="small"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="缩放级别范围">
+        <n-slider v-model:value="optionData.mapOptions.roadNetTileLayer.zooms" range :step="1" :max="18" :min="3" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="实时交通">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.mapOptions.trafficTileLayer.show" size="small" />
+          <n-text>是否显示</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="叠加顺序值">
+        <n-input-number
+          v-model:value="optionData.mapOptions.trafficTileLayer.zIndex"
+          :min="0"
+          size="small"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="透明度">
+        <n-input-number
+          v-model:value="optionData.mapOptions.trafficTileLayer.opacity"
+          :min="0"
+          :max="1"
+          step="0.1"
+          size="small"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="缩放级别范围">
+        <n-slider v-model:value="optionData.mapOptions.trafficTileLayer.zooms" range :step="1" :max="18" :min="3" />
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue'
-import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, FeaturesEnum } from './config'
+import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, ShowHideEnum, FeaturesEnum } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 
 defineProps({
@@ -134,10 +225,6 @@ const themeOptions = [
   {
     value: ThemeEnum.WINE,
     label: '酱籽'
-  },
-  {
-    value: ThemeEnum.WEIXIN,
-    label: '卫星'
   }
 ]
 
@@ -170,19 +257,19 @@ const viewModeOptions = [
 const featuresOptions = [
   {
     value: FeaturesEnum.BG,
-    label: '显示地图背景'
+    label: '区域面'
   },
   {
     value: FeaturesEnum.POINT,
-    label: '显示标识'
+    label: '标注'
   },
   {
     value: FeaturesEnum.ROAD,
-    label: '显示道路'
+    label: '道路'
   },
   {
     value: FeaturesEnum.BUILDING,
-    label: '显示建筑'
+    label: '建筑物'
   }
 ]
 

src/packages/components/Charts/Maps/MapAmap/index.vue

@@ -28,9 +28,13 @@ let {
   amapStyleKeyCustom,
   features,
   viewMode,
+  showLabel,
   pitch,
   skyColor,
-  marker
+  marker,
+  satelliteTileLayer,
+  roadNetTileLayer,
+  trafficTileLayer
 } = toRefs(props.chartConfig.option.mapOptions)
 
 let mapIns: any = null
@@ -42,7 +46,7 @@ const initMap = (newData: any) => {
   // 初始化
   AMapLoader.load({
     key: amapKey.value, //api服务key--另外需要在public中使用安全密钥！！！
-    version: '1.4.8', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
     plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表
   })
     .then(AMap => {
@@ -56,17 +60,40 @@ const initMap = (newData: any) => {
         pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
         skyColor: skyColor.value,
         viewMode: viewMode.value, // 地图模式
+        showLabel: showLabel.value, // 是否显示地图文字标记
         willReadFrequently: true
       })
       dataHandle(props.chartConfig.option.dataset)
-      let satellite = new AMap.TileLayer.Satellite()
+
-      let roadNet = new AMap.TileLayer.RoadNet()
+      let satelliteLayer = new AMap.TileLayer.Satellite({
-      if (newData.amapStyleKey === ThemeEnum.WEIXIN) {
+        zIndex: satelliteTileLayer.value.zIndex,
-        mapIns.add([satellite, roadNet])
+        opacity: satelliteTileLayer.value.opacity,
-      } else {
+        zooms: satelliteTileLayer.value.zooms
-        mapIns.remove([satellite, roadNet])
+      })
-        mapIns.setMapStyle(`amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`)
+      let roadNetLayer = new AMap.TileLayer.RoadNet({
+        zIndex: roadNetTileLayer.value.zIndex,
+        opacity: roadNetTileLayer.value.opacity,
+        zooms: roadNetTileLayer.value.zooms
+      })
+      let trafficLayer = new AMap.TileLayer.Traffic({
+        zIndex: trafficTileLayer.value.zIndex,
+        opacity: trafficTileLayer.value.opacity,
+        zooms: trafficTileLayer.value.zooms
+      })
+      mapIns.remove([satelliteLayer, roadNetLayer, trafficLayer])
+      if (satelliteTileLayer.value.show) {
+        mapIns.add([satelliteLayer])
       }
+      if (roadNetTileLayer.value.show) {
+        mapIns.add([roadNetLayer])
+      }
+      if (trafficTileLayer.value.show) {
+        mapIns.add([trafficLayer])
+      }
+
+      mapIns.setMapStyle(
+        `amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`
+      )
     })
     .catch(e => {})
 }

src/packages/components/Charts/Maps/MapBase/index.vue

@@ -325,7 +325,19 @@ const backLevel = () => {
 
 // 切换地图
 const checkOrMap = async (newData: string) => {
-  await getGeojson(newData)
+  if (newData === 'china') {
+    if (props.chartConfig.option.mapRegion.showHainanIsLands) {
+      // 显示南海
+      hainanLandsHandle(true)
+      vEchartsSetOption()
+    } else {
+      // 隐藏南海
+      hainanLandsHandle(false)
+      vEchartsSetOption()
+    }
+  } else {
+    await getGeojson(newData)
+  }
   props.chartConfig.option.geo.map = newData
   props.chartConfig.option.series.forEach((item: any) => {
     if (item.type === 'map') item.map = newData

src/packages/components/Charts/Pies/PieCommon/config.ts

@@ -56,7 +56,11 @@ const option = {
         show: false,
         position: 'center',
         formatter: '{b}',
-        fontSize:12
+        fontWeight: 'normal',
+        fontSize: 14,
+        color: '#454E54',
+        textBorderColor: '#ffffff',
+        textBorderWidth: 1
       },
       emphasis: {
         label: {

src/packages/components/Charts/Pies/PieCommon/config.vue

@@ -26,6 +26,20 @@
         <n-text :depth="3">无鼠标点击图例场景时，可强行打开图例</n-text>
       </SettingItem>
     </SettingItemBox>
+    <SettingItemBox name="图形">
+      <setting-item name="内圈范围">
+        <n-input v-model:value="optionData.series[0].radius[0]" size="small"></n-input>
+      </setting-item>
+      <setting-item name="外圈范围">
+        <n-input v-model:value="optionData.series[0].radius[1]" size="small"></n-input>
+      </setting-item>
+      <setting-item name="X轴中心">
+        <n-input v-model:value="optionData.series[0].center[0]" size="small"></n-input>
+      </setting-item>
+      <setting-item name="Y轴中心">
+        <n-input v-model:value="optionData.series[0].center[1]" size="small"></n-input>
+      </setting-item>
+    </SettingItemBox>
     <SettingItemBox name="标签">
       <SettingItem>
         <n-space>
@@ -46,28 +60,67 @@
         <n-select v-model:value="optionData.series[0].label.formatter" size="small" :options="labelFormatterOptions" />
       </setting-item>
     </SettingItemBox>
+    <setting-item-box name="字体">
+      <setting-item name="大小">
+        <n-input-number v-model:value="optionData.series[0].label.fontSize" size="small" :min="0"></n-input-number>
+      </setting-item>
+      <setting-item name="颜色" v-if="optionData.series[0].label.color">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.series[0].label.color"></n-color-picker>
+      </setting-item>
+      <SettingItem name="文字加粗" v-if="optionData.series[0].label.fontWeight">
+        <n-select
+          v-model:value="optionData.series[0].label.fontWeight"
+          size="small"
+          :options="labelConfig.fontWeight"
+        />
+      </SettingItem>
+      <setting-item name="文字边框大小" v-if="optionData.series[0].label.textBorderWidth">
+        <n-input-number
+          v-model:value="optionData.series[0].label.textBorderWidth"
+          size="small"
+          :min="0"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="文字边框色" v-if="optionData.series[0].label.textBorderColor">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.series[0].label.textBorderColor"
+        ></n-color-picker>
+      </setting-item>
+    </setting-item-box>
     <setting-item-box name="圆角">
-      <setting-item>
+      <setting-item name="圆角大小">
-        <n-space>
+        <n-input-number
-          <n-input-number
+          v-model:value="optionData.series[0].itemStyle.borderRadius"
-            v-model:value="optionData.series[0].itemStyle.borderRadius"
+          size="small"
-            size="small"
+          :min="0"
-            :min="0"
+        ></n-input-number>
-          ></n-input-number>
-          <n-text>圆角大小</n-text>
-        </n-space>
       </setting-item>
-      <setting-item>
+      <setting-item name="线条宽度">
-        <n-space>
+        <n-input-number
-          <n-input-number
+          v-model:value="optionData.series[0].itemStyle.borderWidth"
-            v-model:value="optionData.series[0].itemStyle.borderWidth"
+          size="small"
-            size="small"
+          :min="0"
-            :min="0"
+        ></n-input-number>
-          ></n-input-number>
-          <n-text>线条宽度</n-text>
-        </n-space>
       </setting-item>
     </setting-item-box>
+    <setting-item-box name="鼠标聚焦">
+      <setting-item name="文字大小">
+        <n-input-number
+          v-model:value="optionData.series[0].emphasis.label.fontSize"
+          size="small"
+          :min="0"
+        ></n-input-number>
+      </setting-item>
+      <SettingItem name="文字加粗" v-if="optionData.series[0].emphasis.label.fontWeight">
+        <n-select
+          v-model:value="optionData.series[0].emphasis.label.fontWeight"
+          size="small"
+          :options="labelConfig.fontWeight"
+        />
+      </SettingItem>
+    </setting-item-box>
   </CollapseItem>
 </template>
 

src/packages/components/Charts/Scatters/ScatterCommon/config.ts

@@ -47,10 +47,9 @@ export const option = {
   tooltip: {
     showDelay: 0,
     formatter: (params: { value: string | any[]; seriesName: string; name: string }) => {
-      // console.log(params)
       return params.value.length > 1
         ? `${params.seriesName}：<br />${params.value[0]} ${params.value[1]}`
-        : `${params.seriesName}：<br />${params.name} ${params.value}`
+        : `${params.name} ${params.value}`
     },
     axisPointer: {
       show: true,

src/packages/components/Decorates/FlowChart/FlowChartLine/config.ts

@@ -0,0 +1,19 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { FlowChartLineConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  endWidth: 15,
+  lineWidth: 2, //线条粗细
+  lineNum: 2, //向下数量
+  lineNumUp: 2, //向上数量
+  backgroundCol: '#303a4c', //线条背景
+  animateCol: '#3788ea' //流动动画背景
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = FlowChartLineConfig.key
+  public chartConfig = cloneDeep(FlowChartLineConfig)
+  public option = cloneDeep(option)
+}

src/packages/components/Decorates/FlowChart/FlowChartLine/config.vue

@@ -0,0 +1,37 @@
+<template>
+  <CollapseItem name="线条" :expanded="true">
+    <SettingItemBox name="折线数量">
+      <SettingItem name="向下增加">
+        <n-input-number size="small" :min="0" v-model:value="optionData.lineNum"></n-input-number>
+      </SettingItem>
+      <SettingItem name="向上增加">
+        <n-input-number size="small" :min="0" v-model:value="optionData.lineNumUp"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="折线样式">
+      <SettingItem name="折线粗细">
+        <n-input-number size="small" :min="1" v-model:value="optionData.lineWidth"></n-input-number>
+      </SettingItem>
+      <SettingItem name="背景条颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backgroundCol"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="流动颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.animateCol"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Decorates/FlowChart/FlowChartLine/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const FlowChartLineConfig: ConfigType = {
+    key: 'FlowChartLine',
+    chartKey: 'VFlowChartLine',
+    conKey: 'VCFlowChartLine',
+    title: '流程线',
+    category: ChatCategoryEnum.FlowChart,
+    categoryName: ChatCategoryEnumName.FlowChart,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.STATIC,
+    image: 'flow-zhexian.png'
+}

src/packages/components/Decorates/FlowChart/FlowChartLine/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <svg :width="w" :height="h">
+    <polyline :stroke-width="lineWidth" :points="getStartPoint(-1, '')" :stroke="backgroundCol" fill="none" />
+    <polyline
+      :stroke-width="lineWidth"
+      class="g-dashed-line"
+      :points="getStartPoint(-1, '')"
+      :stroke="animateCol"
+      fill="none"
+    />
+    <polyline
+      :stroke-width="lineWidth"
+      v-for="(item, index) in lineNum"
+      :key="index"
+      :points="getStartPoint(index + 1, 'down')"
+      :stroke="backgroundCol"
+      fill="none"
+    />
+    <polyline
+      :stroke-width="lineWidth"
+      class="g-dashed-line"
+      v-for="(item, index) in lineNum"
+      :key="index"
+      :points="getStartPoint(index + 1, 'down')"
+      :stroke="animateCol"
+      fill="none"
+    />
+    <polyline
+      :stroke-width="lineWidth"
+      v-for="(item, index) in lineNumUp"
+      :key="index"
+      :points="getStartPoint(index + 1, 'up')"
+      :stroke="backgroundCol"
+      fill="none"
+    />
+    <polyline
+      :stroke-width="lineWidth"
+      class="g-dashed-line"
+      v-for="(item, index) in lineNumUp"
+      :key="index"
+      :points="getStartPoint(index + 1, 'up')"
+      :stroke="animateCol"
+      fill="none"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, computed } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { lineNum, lineNumUp, lineWidth, backgroundCol, animateCol } = toRefs(props.chartConfig.option)
+const getStartPoint = (num: number, direction: string) => {
+  const lineLength = w.value / 2
+  const lineColLength =
+    h.value / (lineNumUp.value + lineNum.value) - lineWidth.value / (lineNumUp.value + lineNum.value)
+  if (num === -1 && direction === '') {
+    return `0,${h.value / 2} ${lineLength},${h.value / 2} ${lineLength * 2},${h.value / 2}`
+  } else if (num !== -1 && direction === 'down') {
+    return `0,${h.value / 2} ${lineLength},${h.value / 2} ${lineLength},${h.value / 2 + num * lineColLength},${
+      lineLength * 2
+    },${h.value / 2 + num * lineColLength}`
+  } else if (num !== -1 && direction === 'up') {
+    return `0,${h.value / 2} ${lineLength},${h.value / 2} ${lineLength},${h.value / 2 - num * lineColLength},${
+      lineLength * 2
+    },${h.value / 2 - num * lineColLength}`
+  }
+}
+</script>
+
+<style scoped>
+.g-dashed-line {
+  stroke-dasharray: 20 130;
+  stroke-dashoffset: 0;
+  animation: move 3s infinite linear;
+}
+@keyframes move {
+  0% {
+    stroke-dashoffset: 20;
+  }
+  100% {
+    stroke-dashoffset: -130;
+  }
+}
+</style>

src/packages/components/Decorates/FlowChart/index.ts

@@ -0,0 +1,3 @@
+import { FlowChartLineConfig } from './FlowChartLine/index'
+
+export default [FlowChartLineConfig]

src/packages/components/Decorates/Mores/CirclePoint/config.ts

@@ -0,0 +1,20 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { CirclePointConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+
+export const option = {
+  outCircle: 15,
+  inCircle: 5,
+  outCircleColor: '#3f5261',
+  inCircleColor: '#fff',
+  outCircleWidth: 2
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = CirclePointConfig.key
+  public attr = { ...chartInitConfig, w: 97, h: 97, zIndex: 1 }
+  public chartConfig = cloneDeep(CirclePointConfig)
+  public option = cloneDeep(option)
+}

src/packages/components/Decorates/Mores/CirclePoint/config.vue

@@ -0,0 +1,51 @@
+<template>
+  <CollapseItem name="线条" :expanded="true">
+    <SettingItemBox name="具体">
+      <SettingItem name="外圆环半径">
+        <n-input-number
+            size="small"
+            v-model:value="optionData.outCircle"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="内部圆形半径">
+        <n-input-number
+            size="small"
+            v-model:value="optionData.inCircle"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="外圆环粗细">
+        <n-input-number
+            size="small"
+            v-model:value="optionData.outCircleWidth"
+        ></n-input-number>
+      </SettingItem>
+
+      <SettingItem name="外圆环颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.outCircleColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="内部圆形颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.inCircleColor"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+
+  </CollapseItem>
+
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+</script>

src/packages/components/Decorates/Mores/CirclePoint/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const CirclePointConfig: ConfigType = {
+    key: 'CirclePoint',
+    chartKey: 'VCirclePoint',
+    conKey: 'VCCirclePoint',
+    title: '圆点光环',
+    category: ChatCategoryEnum.MORE,
+    categoryName: ChatCategoryEnumName.MORE,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.STATIC,
+    image: 'flow-circle.png'
+}

src/packages/components/Decorates/Mores/CirclePoint/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <svg :width="w" :height="h">
+    <defs>
+      <filter id="blurFilter" x="-20%" y="-20%" width="140%" height="140%">
+        <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
+      </filter>
+    </defs>
+    <circle :cx="w / 2 " :cy="h / 2" :r="inCircle" :fill="inCircleColor" filter="url(#blurFilter)"/>
+    <!-- 外部圆环 -->
+    <circle :cx="w / 2 " :cy="h / 2" :r="outCircle" fill="none" :stroke="outCircleColor"  :stroke-width="outCircleWidth"/>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true,
+  },
+})
+const { w, h } = toRefs(props.chartConfig.attr)
+const { outCircle,inCircle,outCircleColor,inCircleColor,outCircleWidth} = toRefs(props.chartConfig.option)
+
+</script>
+

src/packages/components/Decorates/Mores/index.ts

@@ -8,6 +8,7 @@ import { CountDownConfig } from './CountDown/index'
 import { FlipperNumberConfig } from './FlipperNumber'
 import { PipelineHConfig } from './PipelineH/index'
 import { PipelineVConfig } from './PipelineV/index'
+import { CirclePointConfig } from './CirclePoint/index'
 
 export default [
   // NumberConfig,

src/packages/components/Decorates/index.d.ts

@@ -1,6 +1,7 @@
 export enum ChatCategoryEnum {
   BORDER = 'Borders',
   DECORATE = 'Decorates',
+  FlowChart = 'FlowChart',
   THREE = 'Three',
   MORE = 'Mores',
   TOPBARS = 'TopBars',
@@ -10,8 +11,9 @@ export enum ChatCategoryEnum {
 export enum ChatCategoryEnumName {
   BORDER = '边框',
   DECORATE = '装饰',
+  FlowChart = '流程',
   THREE = '三维',
   MORE = '更多',
   TOPBARS = '顶栏',
   BASE = '底座'
-}
+}

src/packages/components/Informations/Inputs/InputsInput/index.ts

@@ -10,5 +10,5 @@ export const InputsInputConfig: ConfigType = {
     categoryName: ChatCategoryEnumName.INPUTS,
     package: PackagesCategoryEnum.INFORMATIONS,
     chartFrame: ChartFrameEnum.STATIC,
-    image: 'inputs_select.png'
+    image: 'inputs_input.png'
 }

src/packages/components/Informations/Mores/Video/index.vue

@@ -36,7 +36,7 @@ let option = shallowReactive({ ...configOption })
 // 预览更新
 const vVideoRef = ref(null)
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
-  option = newData
+  option.dataset = newData
 })
 
 // 编辑更新

src/packages/public/chart.ts

@@ -41,10 +41,12 @@ export const setData = (option: any, data: EchartsDataType) => {
  * @param instance
  * @param data
  */
-export const setOption = <T extends typeof VChart | undefined, D>(instance: T, data: D) => {
+export const setOption = <T extends typeof VChart | undefined, D>(instance: T, data: D, notMerge = true) => {
   if (!instance) return
   const option = instance.getOption()
   if(!option) return
   option.dataset = null
-  instance.setOption(data)
+  instance.setOption(data, {
+    notMerge: notMerge
+  })
 }

src/store/modules/chartEditStore/chartEditStore.ts

@@ -193,6 +193,27 @@ export const useChartEditStore = defineStore({
         [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: this.getRequestGlobalConfig
       }
     },
+    // * 获取针对 componentList 顺序排过序的 selectId
+    getSelectIdSortList(ids?: string[]): string[] {
+      if (!this.getTargetChart.selectId.length && !ids) return []
+      const sortArr: string[] = []
+      this.getComponentList.forEach((item: CreateComponentType | CreateComponentGroupType) => {
+        if (ids) {
+          ids.forEach((id: string) => {
+            if (item.id === id) {
+              sortArr.push(id)
+            }
+          })
+        } else {
+          this.getTargetChart.selectId.forEach((id: string) => {
+            if (item.id === id) {
+              sortArr.push(id)
+            }
+          })
+        }
+      })
+      return sortArr
+    },
     // * 设置 editCanvas 数据项
     setEditCanvas<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) {
       this.editCanvas[key] = value
@@ -756,18 +777,12 @@ export const useChartEditStore = defineStore({
     // * 创建分组
     setGroup(id?: string | string[], isHistory = true) {
       try {
-        const selectIds = this.idPreFormat(id) || this.getTargetChart.selectId
+        let selectIds = this.idPreFormat(id) || this.getTargetChart.selectId
+        selectIds = this.getSelectIdSortList(selectIds)
         if (selectIds.length < 2) return
 
         loadingStart()
         const groupClass = new PublicGroupConfigClass()
-        // 记录整体坐标
-        const groupAttr = {
-          l: this.getEditCanvasConfig.width,
-          t: this.getEditCanvasConfig.height,
-          r: 0,
-          b: 0
-        }
         const targetList: CreateComponentType[] = []
         const historyList: CreateComponentType[] = []
 
@@ -790,21 +805,35 @@ export const useChartEditStore = defineStore({
             newSelectIds.push(id)
           }
         })
-        newSelectIds.forEach((id: string) => {
+        // 记录整体坐标
+        const groupAttr = {
+          l: 0,
+          t: 0,
+          r: 0,
+          b: 0
+        }
+        newSelectIds.forEach((id: string, index: number) => {
           // 获取目标数据并从 list 中移除 (成组后不可再次成组, 断言处理)
           const item = this.componentList.splice(this.fetchTargetIndex(id), 1)[0] as CreateComponentType
           const { x, y, w, h } = item.attr
-          const { l, t, r, b } = groupAttr
+          if (index === 0) {
-          // 左
+            groupAttr.l = x
-          groupAttr.l = l > x ? x : l
+            groupAttr.t = y
-          // 上
+            groupAttr.r = x + w
-          groupAttr.t = t > y ? y : t
+            groupAttr.b = y + h
-          // 宽
+          } else {
-          groupAttr.r = r < x + w ? x + w : r
+            const { l, t, r, b } = groupAttr
-          // 高
+            // 左
-          groupAttr.b = b < y + h ? y + h : b
+            groupAttr.l = l > x ? x : l
+            // 上
+            groupAttr.t = t > y ? y : t
+            // 宽
+            groupAttr.r = r < x + w ? x + w : r
+            // 高
+            groupAttr.b = b < y + h ? y + h : b
+          }
 
-          targetList.unshift(item)
+          targetList.push(item)
           historyList.push(toRaw(item))
         })
 
@@ -830,7 +859,7 @@ export const useChartEditStore = defineStore({
         loadingFinish()
       } catch (error) {
         console.log(error)
-        window['$message'].error('创建分组失败，请联系管理员！')
+        window['$message'].error('创建分组失败，请联系管理员')
         loadingFinish()
       }
     },
@@ -850,7 +879,7 @@ export const useChartEditStore = defineStore({
           if (isHistory) chartHistoryStore.createUnGroupHistory(cloneDeep([targetGroup]))
 
           // 分离组件并还原位置属性
-          targetGroup.groupList.reverse().forEach(item => {
+          targetGroup.groupList.forEach(item => {
             item.attr.x = item.attr.x + targetGroup.attr.x
             item.attr.y = item.attr.y + targetGroup.attr.y
             if (!callBack) {
@@ -875,7 +904,7 @@ export const useChartEditStore = defineStore({
         loadingFinish()
       } catch (error) {
         console.log(error)
-        window['$message'].error('解除分组失败，请联系管理员！')
+        window['$message'].error('解除分组失败，请联系管理员')
         loadingFinish()
       }
     },

src/utils/type.ts

@@ -24,8 +24,8 @@ export function isArray(p: any): p is [] {
   return Array.isArray(p)
 }
 
-export const toNumber = (number: number | string, toFixedNumber = 2) => {
+export const toNumber = (number: number | string, toFixedNumber: number = 2) => {
-  return isString(number) ? parseFloat(parseFloat(number).toFixed(2)) : number
+  return isString(number) ? parseFloat(parseFloat(number).toFixed(toFixedNumber)) : number
 }
 
 export const toString = (str: any) => {

src/utils/utils.ts

@@ -26,7 +26,7 @@ export const isDev = () => {
  * @param { Number } randomLength
  */
 export const getUUID = (randomLength = 10) => {
-  return Number(Math.random().toString().substring(2, randomLength) + Date.now()).toString(36)
+  return 'id_' + Number(Math.random().toString().substring(2, randomLength) + Date.now()).toString(36)
 }
 
 /**

src/views/chart/ContentCharts/components/ChartsItemBox/index.vue

@@ -12,7 +12,7 @@
         :key="item.title"
         draggable
         @dragstart="!item.disabled && dragStartHandle($event, item)"
-        @dragend="!item.disabled && dragendHandle"
+        @dragend="!item.disabled && dragendHandle()"
         @dblclick="dblclickHandle(item)"
         @click="clickHandle(item)"
       >

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondControl/index.vue

@@ -1,5 +1,11 @@
 <template>
-  <n-modal class="go-chart-data-pond-control" v-model:show="modelShowRef" :mask-closable="false">
+  <n-modal
+    class="go-chart-data-pond-control"
+    v-model:show="modelShowRef"
+    :mask-closable="false"
+    :close-on-esc="true"
+    :onEsc="onEsc"
+  >
     <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 900px; height: 650px">
       <template #header></template>
       <template #header-extra> </template>
@@ -29,7 +35,10 @@
               </n-icon>
             </template>
           </n-button>
-          <n-button type="primary" @click="closeHandle">保存 & 发送请求</n-button>
+          <div>
+            <n-button class="go-mr-3" @click="closeHandle">取消</n-button>
+            <n-button type="primary" @click="closeAndSendHandle">保存 & 发送请求</n-button>
+          </div>
         </n-space>
       </template>
     </n-card>
@@ -82,9 +91,12 @@ const pondData = computed(() => {
   return data[0]
 })
 
-watch(() => props.modelShow, (newValue) => {
+watch(
-  modelShowRef.value = newValue
+  () => props.modelShow,
-})
+  newValue => {
+    modelShowRef.value = newValue
+  }
+)
 
 watch(
   () => pondData.value,
@@ -189,7 +201,7 @@ const deletePond = (targetData: RequestDataPondItemType) => {
 }
 
 // 关闭
-const closeHandle = () => {
+const closeAndSendHandle = () => {
   // 将所选内容赋值给对象
   if (pondData.value) {
     targetData.value.request = {
@@ -200,6 +212,14 @@ const closeHandle = () => {
   emit('update:modelShow', false)
   emit('sendHandle')
 }
+
+const closeHandle = () => {
+  emit('update:modelShow', false)
+}
+
+const onEsc = () => {
+  closeHandle()
+}
 </script>
 
 <style lang="scss" scoped>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalConfig/index.vue

@@ -10,7 +10,11 @@
     >
       <!-- 源地址 -->
       <setting-item name="前置 URL">
-        <n-input v-model:value.trim="requestOriginUrl" :disabled="editDisabled" placeholder="例：http://127.0.0.1/"></n-input>
+        <n-input
+          v-model:value.trim="requestOriginUrl"
+          :disabled="editDisabled"
+          placeholder="例：http://127.0.0.1/"
+        ></n-input>
       </setting-item>
       <setting-item name="更新间隔，为 0 只会初始化">
         <n-input-group>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue

@@ -21,7 +21,10 @@
               {{ requestContentTypeObj[requestContentType] }}
             </n-tag>
           </div>
-          <n-button type="primary" @click="closeAndSendHandle"> {{ saveBtnText || '保存 & 发送请求' }}</n-button>
+          <div>
+            <n-button class="go-mr-3" @click="closeHandle">取消</n-button>
+            <n-button type="primary" @click="closeAndSendHandle"> {{ saveBtnText || '保存 & 发送请求' }}</n-button>
+          </div>
         </n-space>
       </template>
     </n-card>
@@ -75,6 +78,10 @@ const closeAndSendHandle = () => {
   emit('sendHandle')
   dataSyncUpdate()
 }
+
+const onEsc = () => {
+  closeHandle()
+}
 </script>
 
 <style lang="scss" scoped>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/pondIndex.vue

@@ -1,5 +1,11 @@
 <template>
-  <n-modal class="go-chart-data-request" v-model:show="modelShowRef" :mask-closable="false" :closeOnEsc="false">
+  <n-modal
+    class="go-chart-data-request"
+    v-model:show="modelShowRef"
+    :mask-closable="false"
+    :closeOnEsc="true"
+    :onEsc="onEsc"
+  >
     <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 800px">
       <template #header></template>
       <template #header-extra> </template>
@@ -17,7 +23,7 @@
       <template #action>
         <n-space justify="space-between">
           <n-space v-if="targetDataRequest">
-            <n-tag  :bordered="false" type="primary">名称：</n-tag>
+            <n-tag :bordered="false" type="primary">名称：</n-tag>
             <n-input
               v-model:value="targetDataRequest.dataPondName"
               ref="inputInstRef"
@@ -62,10 +68,12 @@ const pondName = ref()
 const inputInstRef = ref()
 const modelShowRef = ref(false)
 
-watch(() => props.modelShow, (newValue) => {
+watch(
-  modelShowRef.value = newValue
+  () => props.modelShow,
-})
+  newValue => {
-
+    modelShowRef.value = newValue
+  }
+)
 
 const closeHandle = () => {
   emit('update:modelShow', false)
@@ -88,6 +96,10 @@ const closeAndSendHandle = () => {
     }
   })
 }
+
+const onEsc = () => {
+  closeHandle()
+}
 </script>
 
 <style lang="scss" scoped>

src/views/chart/ContentEdit/components/EditBottom/index.vue

@@ -151,6 +151,7 @@ $max-width: 670px;
   min-width: $min-width;
   min-width: $max-width;
   padding: 0 10px;
+  padding-left: 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;

src/views/chart/ContentEdit/components/EditRange/index.vue

@@ -55,7 +55,6 @@ const rangeModelStyle = computed(() => {
   position: relative;
   transform-origin: left top;
   background-size: cover;
-  border-radius: 10px;
   overflow: hidden;
   @include fetch-border-color('hover-border-color');
   @include fetch-bg-color('background-color2');

src/views/chart/ContentEdit/components/EditRule/index.vue

@@ -13,7 +13,7 @@
     >
     </sketch-rule>
     <div ref="$app" class="edit-screens" @scroll="handleScroll">
-      <div ref="$container" class="edit-screen-container" :style="{ width: width * 2 + 'px' }">
+      <div ref="$container" class="edit-screen-container" :style="{ width: containerWidth }">
         <div
           ref="refSketchRuleBox"
           class="canvas"
@@ -62,8 +62,13 @@ const scale = computed(() => {
   return chartEditStore.getEditCanvas.scale
 })
 
-// 滚动条拖动的高度
+// 滚动条拖动的宽度
 const containerWidth = computed(() => {
+  return `${window.innerWidth * 2}px`
+})
+
+// 滚动条拖动的高度
+const containerHeight = computed(() => {
   return `${height.value * 2}px`
 })
 
@@ -173,12 +178,12 @@ const canvasBox = () => {
 }
 
 // 重绘标尺
-const reDraw = () => {
+const reDraw = throttle(() => {
   sketchRuleReDraw.value = false
   setTimeout(() => {
     sketchRuleReDraw.value = true
   }, 10)
-}
+},20)
 
 // 滚动居中
 const canvasPosCenter = () => {
@@ -203,14 +208,12 @@ watch(
   (newValue, oldValue) => {
     if (oldValue !== newValue && chartLayoutStore.getRePositionCanvas) {
       chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.RE_POSITION_CANVAS, false)
-      handleScroll()
+    }
-      setTimeout(() => {
+    handleScroll()
+    setTimeout(() => {
         canvasPosCenter()
         reDraw()
-      }, 400)
+    }, 400)
-    } else {
-      throttle(reDraw, 20)
-    }
   }
 )
 
@@ -337,7 +340,7 @@ window.onKeySpacePressHold = (isHold: boolean) => {
 
   .edit-screen-container {
     position: absolute;
-    height: v-bind('containerWidth');
+    height: v-bind('containerHeight');
     top: 0;
     left: 0;
   }

src/views/chart/ContentEdit/components/EditSelect/index.vue

@@ -93,21 +93,20 @@ watch(
     position: absolute;
     width: 100%;
     height: 100%;
-    border-radius: 5px;
     overflow: hidden;
   }
   .select-border {
     left: 0;
     top: 0;
-    opacity: 0.5;
+    opacity: 1;
-    border-width: 2px;
+    border-width: 1px;
     border-style: solid;
     border-color: v-bind('themeColor');
   }
   .select-background {
     top: 2px;
     left: 2px;
-    opacity: 0.2;
+    opacity: 0.08;
     background-color: v-bind('themeColor');
   }
 }

src/views/chart/ContentEdit/components/EditShapeBox/index.vue

@@ -145,7 +145,7 @@ const enableOuter = (flag: boolean) => {
       position: absolute;
       width: 100%;
       height: 100%;
-      border-radius: 10px;
+      border-radius: 4px;
     }
 
     .shape-modal-select {

src/views/chart/ContentEdit/components/EditTools/index.vue

@@ -231,6 +231,8 @@ $asideBottom: 70px;
   border: 1px solid;
   @include fetch-border-color('hover-border-color-shallow');
   &.aside {
+    display: flex;
+    justify-content: center;
     flex-direction: column-reverse;
     height: auto;
     right: 20px;

src/views/chart/ContentEdit/hooks/useDrag.hook.ts

@@ -310,7 +310,11 @@ export const useMouseHandle = () => {
               }
             })
           })
-          chartEditStore.moveComponentList(prevComponentInstance)
+
+          const moveComponentInstance = prevComponentInstance.filter(
+            item => item.attr.offsetX !== 0 && item.attr.offsetY !== 0
+          )
+          moveComponentInstance.length && chartEditStore.moveComponentList(moveComponentInstance)
         }
         document.removeEventListener('mousemove', mousemove)
         document.removeEventListener('mouseup', mouseup)

src/views/chart/ContentEdit/index.vue

@@ -212,7 +212,6 @@ onMounted(() => {
   @include background-image('background-point');
 
   @include goId('chart-edit-content') {
-    border-radius: 10px;
     overflow: hidden;
     @extend .go-transition;
     @include fetch-theme('box-shadow');

src/views/chart/ContentHeader/headerLeftBtn/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-space class="header-left-btn" :size="25">
+  <n-space class="header-left-btn" :wrap="false" :size="25">
     <n-button size="small" quaternary @click="goHomeHandle()">
       <template #icon>
         <n-icon :depth="3">
@@ -7,7 +7,7 @@
         </n-icon>
       </template>
     </n-button>
-    <n-space>
+    <n-space :wrap="false">
       <!-- 模块展示按钮 -->
       <n-tooltip v-for="item in btnList" :key="item.key" placement="bottom" trigger="hover">
         <template #trigger>

src/views/chart/ContentHeader/headerRightBtn/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-space class="go-mt-0">
+  <n-space class="go-mt-0" :wrap="false">
     <n-button v-for="item in comBtnList" :key="item.key" :type="item.type()" ghost @click="item.event">
       <template #icon>
         <component :is="item.icon"></component>

src/views/login/index.vue

@@ -63,6 +63,7 @@
                     type="text"
                     maxlength="16"
                     :placeholder="$t('global.form_account')"
+                    @keydown.enter="handleSubmit"
                   >
                     <template #prefix>
                       <n-icon size="18">
@@ -78,6 +79,7 @@
                     maxlength="16"
                     show-password-on="click"
                     :placeholder="$t('global.form_password')"
+                    @keydown.enter="handleSubmit"
                   >
                     <template #prefix>
                       <n-icon size="18">

src/views/preview/components/PreviewRenderList/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="chart-item"
+    :id="item.id"
     v-for="(item, index) in chartEditStore.componentList"
     :class="animationsClass(item.styles.animations)"
     :key="item.id"

src/views/project/items/components/ProjectItemsModalCard/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <!-- mask-closable 暂时是失效的，不知道为啥 -->
   <n-modal
     class="go-modal-box"
     v-model:show="showRef"
+    :mask-closable="true"
     @afterLeave="closeHandle"
   >
     <n-card hoverable size="small">

src/views/project/templateMarket/index.vue

@@ -1,19 +1,41 @@
 <template>
   <div class="go-project-template-market">
-    <n-space vertical>
+    <div class="content-box">
-      <n-image object-fit="contain" height="300" preview-disabled :src="requireErrorImg()"></n-image>
+      <n-space vertical>
-      <n-h3>暂时还没有东西呢</n-h3>
+        <img src="https://goviewpro.goviewlink.com/charts-img-db/charts-img-db_id_5pimyysnnh8000.png" style="width: 100%" />
-    </n-space>
+        <img src="https://goviewpro.goviewlink.com/charts-img-db/charts-img-db_id_izetnl0654w00.png" style="height: 400px" />
+        <n-button text tag="a" href="https://ai.goviewlink.com/?channel=mayun" target="_blank" type="primary">
+          前往 GoViewPro 查看 👆
+        </n-button>
+      </n-space>
+    </div>
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts"></script>
-import { requireErrorImg } from '@/utils'
-</script>
 
 <style lang="scss" scoped>
-@include go("project-template-market") {
+@include go('project-template-market') {
-  margin-top: 100px;
+  box-sizing: border-box;
-  @extend .go-flex-center;
+  height: calc(100vh - 62px);
+  padding-top: 3vh;
+  .content-box {
+    width: 700px;
+    margin: 0 auto 0;
+    padding: 20px;
+    border-radius: 10px;
+    background: linear-gradient(120deg, rgba(255, 255, 255, 0.15) 0%, rgba(29, 83, 163, 0.3) 99.09%);
+    box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.04);
+    @extend .go-flex-center;
+    img {
+      border-radius: 6px;
+    }
+  }
+}
+
+@include dark() {
+  @include go('project-template-market') {
+    background-color: #18181c;
+  }
 }
 </style>

types/shims-vue.d.ts

@@ -5,4 +5,5 @@ declare module '*.vue' {
 }
 
 declare module 'lodash/*'
-declare module 'dom-helpers'
+declare module 'dom-helpers'
+declare module 'vue3-sketch-ruler';

vite.config.ts

@@ -92,7 +92,7 @@ export default ({ mode } : { mode:any }) => defineConfig({
     // minify: 'terser', // 如果需要用terser混淆，可打开这两行
     // terserOptions: terserOptions,
     rollupOptions: rollupOptions,
-    brotliSize: brotliSize,
+    reportCompressedSize: brotliSize,
     chunkSizeWarningLimit: chunkSizeWarningLimit
   }
 })