Merge branch 'dev'

2025-02-24 16:22:57 +08:00 · 2022-06-27 20:28:56 +08:00 · 2022-06-27 20:28:56 +08:00 · e09d014fa6
commit e09d014fa6
parent 729021f37c 8c74b8e8df
39 changed files with 534 additions and 322 deletions
--- a/src/api/mock/index.ts
+++ b/src/api/mock/index.ts
@ -4,27 +4,51 @@ import { RequestHttpEnum } from '@/enums/httpEnum'

 // 单个X数据
 export const chartDataUrl = '/mock/chartData'
-export const rankListUrl = '/mock/RankList'
-export const numberUrl = '/mock/number'
+export const numberFloatUrl = '/mock/number/float'
+export const numberIntUrl = '/mock/number/int'
+export const textUrl = '/mock/text'
+export const imageUrl = '/mock/image'
+export const rankListUrl = '/mock/rankList'
+export const scrollBoardUrl = '/mock/scrollBoard'

 const mockObject: MockMethod[] = [
  {
    // 正则
    // url: /\/mock\/mockData(|\?\S*)$/,
-    url: '/mock/chartData',
+    url: chartDataUrl,
    method: RequestHttpEnum.GET,
-    response: () => test.fetchMockData,
+    response: () => test.fetchMockData
  },
  {
-    url: '/mock/rankList',
+    url: numberFloatUrl,
    method: RequestHttpEnum.GET,
-    response: () => test.fetchRankList,
+    response: () => test.fetchNumberFloat
  },
  {
-    url: '/mock/number',
+    url: numberIntUrl,
    method: RequestHttpEnum.GET,
-    response: () => test.fetchNumber,
+    response: () => test.fetchNumberInt
  },
+  {
+    url: textUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchText
+  },
+  {
+    url: imageUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchImage(Math.round(Math.random() * 10))
+  },
+  {
+    url: rankListUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchRankList
+  },
+  {
+    url: scrollBoardUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchScrollBoard
+  }
 ]

 export default mockObject
--- a/src/api/mock/test.mock.ts
+++ b/src/api/mock/test.mock.ts
@ -10,35 +10,35 @@ export default {
        {
          product: '@name',
          'dataOne|100-900': 3,
-          'dataTwo|100-900': 3,
+          'dataTwo|100-900': 3
        },
        {
          product: '@name',
          'dataOne|100-900': 3,
-          'dataTwo|100-900': 3,
+          'dataTwo|100-900': 3
        },
        {
          product: '@name',
          'dataOne|100-900': 3,
-          'dataTwo|100-900': 3,
+          'dataTwo|100-900': 3
        },
        {
          product: '@name',
          'dataOne|100-900': 3,
-          'dataTwo|100-900': 3,
+          'dataTwo|100-900': 3
        },
        {
          product: '@name',
          'dataOne|100-900': 3,
-          'dataTwo|100-900': 3,
+          'dataTwo|100-900': 3
        },
        {
          product: '@name',
          'dataOne|100-900': 3,
-          'dataTwo|100-900': 3,
-        },
-      ],
-    },
+          'dataTwo|100-900': 3
+        }
+      ]
+    }
  },
  // 排名列表
  fetchRankList: {
@ -58,14 +58,50 @@ export default {
      { name: '@name', 'value|100-900': 5 },
      { name: '@name', 'value|100-900': 5 },
      { name: '@name', 'value|100-900': 5 },
-      { name: '@name', 'value|100-900': 5 },
-    ],
+      { name: '@name', 'value|100-900': 5 }
+    ]
  },
-  // 获取数字
-  fetchNumber: {
+  // 轮播表格
+  fetchScrollBoard: {
    code: 0,
    status: 200,
    msg: '请求成功',
-    data: '@float(0, 0.99)',
+    data: [
+      ['行1列1', '行1列2', '1'],
+      ['行2列1', '行2列2', '2'],
+      ['行3列1', '行3列2', '3'],
+      ['行4列1', '行4列2', '4'],
+      ['行5列1', '行5列2', '5'],
+      ['行6列1', '行6列2', '6'],
+      ['行7列1', '行7列2', '行7列3'],
+      ['行8列1', '行8列2', '行8列3'],
+      ['行9列1', '行9列2', '行9列3'],
+      ['行10列1', '行10列2', '行10列3']
+    ]
  },
+  // 获取数字
+  fetchNumberFloat: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: '@float(0, 0.99, 1, 4)'
+  },
+  fetchNumberInt: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: '@integer(0, 100)'
+  },
+  fetchText: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: '@paragraph(1, 10)'
+  },
+  fetchImage: (num: number) => ({
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: `https://robohash.org/${num}`
+  })
 }
--- a/src/assets/images/chart/charts/process.png
+++ b/src/assets/images/chart/charts/process.png
--- a/src/hooks/useChartDataFetch.hook.ts
+++ b/src/hooks/useChartDataFetch.hook.ts
@ -1,7 +1,7 @@
-import { ref, toRefs, watchEffect, nextTick } from 'vue'
+import { ref, toRefs } from 'vue'
 import type VChart from 'vue-echarts'
 import { http } from '@/api/http'
-import { CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d'
+import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { RequestDataTypeEnum } from '@/enums/httpEnum'
 import { isPreview } from '@/utils'
@ -23,17 +23,18 @@ export const useChartDataFetch = (
  const vChartRef = ref<typeof VChart | null>(null)
  let fetchInterval: any = 0

-  isPreview() &&
-    watchEffect(() => {
-      clearInterval(fetchInterval)
-
+  const requestInterval = () => {
    const chartEditStore = useChartEditStore()
    const { requestOriginUrl, requestInterval } = toRefs(
      chartEditStore.getRequestGlobalConfig
    )
+    // 组件类型
+    const { chartFrame } = targetComponent.chartConfig
+    // 请求配置
    const { requestDataType, requestHttpType, requestUrl } = toRefs(
      targetComponent.data
    )
+    // 非请求类型
    if (requestDataType.value !== RequestDataTypeEnum.AJAX) return
    // 处理地址
    if (requestUrl?.value && requestInterval.value > 0) {
@ -42,35 +43,36 @@ export const useChartDataFetch = (
        requestOriginUrl && requestOriginUrl.value + requestUrl.value
      if (!completePath) return

-        fetchInterval = setInterval(async () => {
-          const res:any = await http(requestHttpType.value)(completePath || '', {})
+      const fetchFn = async () => {
+        const res: any = await http(requestHttpType.value)(completePath || '', {})
        if (res.data) {
-            // 是否是 Echarts 组件
-            const isECharts =
-              targetComponent.chartConfig.package ===
-              PackagesCategoryEnum.CHARTS
-
          try {
-              if (isECharts && vChartRef?.value?.setOption) {
-                nextTick(() => {
+            // 更新回调函数
+            if (updateCallback) {
+              updateCallback(res.data)
+            } else {
+              // eCharts 组件配合 vChart 库更新方式
+              if (chartFrame === ChartFrameEnum.ECHARTS) {
                if (vChartRef.value) {
                  vChartRef.value.setOption({ dataset: res.data })
                }
-                })
-              } else {
-                // 若遵守规范使用 datase 作为数据 key，则省自动赋值数据
-                targetComponent.option.dataset && (targetComponent.option.dataset = res.data)
              }
-              if (updateCallback) {
-                updateCallback(res.data)
            }
          } catch (error) {
            console.error(error)
          }
        }
-        }, requestInterval.value * 1000)
      }
-    })
+      
+      // 立即调用
+      fetchFn()
+      // 开启定时
+      setInterval(fetchFn, requestInterval.value * 1000)
+    }
+  }
+
+  isPreview() && requestInterval()
+     

  return { vChartRef }
 }
--- a/src/packages/components/Charts/Bars/BarCommon/index.ts
+++ b/src/packages/components/Charts/Bars/BarCommon/index.ts
@ -1,5 +1,5 @@
 import image from '@/assets/images/chart/charts/bar_x.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

 export const BarCommonConfig: ConfigType = {
@ -10,5 +10,6 @@ export const BarCommonConfig: ConfigType = {
  category: ChatCategoryEnum.BAR,
  categoryName: ChatCategoryEnumName.BAR,
  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
  image
 }
--- a/src/packages/components/Charts/Bars/BarCrossrange/index.ts
+++ b/src/packages/components/Charts/Bars/BarCrossrange/index.ts
@ -1,5 +1,5 @@
 import image from '@/assets/images/chart/charts/bar_y.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

 export const BarCrossrangeConfig: ConfigType = {
@ -10,5 +10,6 @@ export const BarCrossrangeConfig: ConfigType = {
  category: ChatCategoryEnum.BAR,
  categoryName: ChatCategoryEnumName.BAR,
  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
  image
 }
--- a/src/packages/components/Charts/Lines/LineCommon/index.ts
+++ b/src/packages/components/Charts/Lines/LineCommon/index.ts
@ -1,5 +1,5 @@
 import image from '@/assets/images/chart/charts/line.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

 export const LineCommonConfig: ConfigType = {
@ -10,5 +10,6 @@ export const LineCommonConfig: ConfigType = {
  category: ChatCategoryEnum.LINE,
  categoryName: ChatCategoryEnumName.LINE,
  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
  image
 }
--- a/src/packages/components/Charts/Lines/LineGradientSingle/index.ts
+++ b/src/packages/components/Charts/Lines/LineGradientSingle/index.ts
@ -1,5 +1,5 @@
 import image from '@/assets/images/chart/charts/line_gradient_single.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

 export const LineGradientSingleConfig: ConfigType = {
@ -10,5 +10,6 @@ export const LineGradientSingleConfig: ConfigType = {
  category: ChatCategoryEnum.LINE,
  categoryName: ChatCategoryEnumName.LINE,
  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
  image
 }
--- a/src/packages/components/Charts/Lines/LineGradients/index.ts
+++ b/src/packages/components/Charts/Lines/LineGradients/index.ts
@ -1,5 +1,5 @@
 import image from '@/assets/images/chart/charts/line_gradient2.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

 export const LineGradientsConfig: ConfigType = {
@ -10,5 +10,6 @@ export const LineGradientsConfig: ConfigType = {
  category: ChatCategoryEnum.LINE,
  categoryName: ChatCategoryEnumName.LINE,
  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
  image
 }
--- a/src/packages/components/Charts/Mores/Process/config.ts
+++ b/src/packages/components/Charts/Mores/Process/config.ts
@ -33,15 +33,29 @@ export const indicatorPlacements = [

 export const option = {
  dataset: 36,
+  // 默认类型
  type: types[2].value,
+  // 进行时效果
+  processing: true,
+  // 主颜色
  color: '#4992FFFF',
+  // 轨道颜色
+  railColor: '#3e3e3f', 
+  // 指标
+  unit: '%',
+  // 指标大小
+  indicatorTextSize: 34,
  // 指标位置（线条时可用）
-  indicatorPlacement: "outside"
+  indicatorPlacement: 'outside',
+  // 指标颜色
+  indicatorTextColor: '#FFFFFFFF',
+  // 偏移角度
+  offsetDegree: 0
 }

 export default class Config extends publicConfig implements CreateComponentType {
  public key = ProcessConfig.key
-  public attr = {...chartInitConfig, h: 500, zIndex: -1}
+  public attr = { ...chartInitConfig, h: 500, zIndex: -1 }
  public chartConfig = cloneDeep(ProcessConfig)
  public option = cloneDeep(option)
 }
--- a/src/packages/components/Charts/Mores/Process/config.vue
+++ b/src/packages/components/Charts/Mores/Process/config.vue
@ -1,29 +1,49 @@
 <template>
  <!-- 默认展开 -->
-  <CollapseItem
-      name="进度条" :expanded="true">
+  <CollapseItem name="进度条" :expanded="true">
    <SettingItemBox name="内容">
      <SettingItem name="数值">
        <!-- 与 config.ts 里的 option 对应 --><!-- n-input-number 是 NaiveUI 的控件 -->
        <n-input-number v-model:value="optionData.dataset" size="small" :min="0" placeholder="进度值"></n-input-number>
      </SettingItem>
-      <!-- 颜色粗细等等... -->
+      <setting-item name="单位">
+        <n-input v-model:value="optionData.unit" size="small"></n-input>
+      </setting-item>
    </SettingItemBox>
-    <SettingItemBox name="外观">
+
+    <SettingItemBox name="轨道">
      <SettingItem name="形状">
        <n-select v-model:value="optionData.type" :options="types" placeholder="选择形状" />
      </SettingItem>
-      <SettingItem name="指标位置" v-if="optionData.type == types[0].value">
-        <n-select v-model:value="optionData.indicatorPlacement" :options="indicatorPlacements" placeholder="选择形状" />
-      </SettingItem>
+
      <!-- 颜色粗细等等... -->
      <SettingItem name="进度条颜色">
-        <n-color-picker
-            size="small"
-            :modes="['hex']"
-            v-model:value="optionData.color"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color"></n-color-picker>
      </SettingItem>
+      <SettingItem name="轨道颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.railColor"></n-color-picker>
+      </SettingItem>
+      <setting-item name="偏移角度" v-if="optionData.type !== types[0].value">
+        <n-input-number v-model:value="optionData.offsetDegree" size="small"></n-input-number>
+      </setting-item>
+      <SettingItem v-if="optionData.type == types[0].value">
+        <n-space>
+          <n-switch v-model:value="optionData.processing" size="small" />
+          <n-text>进行时动画</n-text>
+        </n-space>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="指标">
+      <SettingItem name="位置" v-if="optionData.type == types[0].value">
+        <n-select v-model:value="optionData.indicatorPlacement" :options="indicatorPlacements" placeholder="选择形状" />
+      </SettingItem>
+      <SettingItem name="文本颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.indicatorTextColor"></n-color-picker>
+      </SettingItem>
+       <setting-item name="文本大小">
+        <n-input-number v-model:value="optionData.indicatorTextSize" size="small"></n-input-number>
+      </setting-item>
    </SettingItemBox>
  </CollapseItem>
 </template>
@ -31,14 +51,10 @@
 <script setup lang="ts">
 import { PropType } from 'vue'
 // 以下是封装的设置模块布局组件，具体效果可在官网查看
-import {
-  CollapseItem,
-  SettingItemBox,
-  SettingItem,
-} from '@/components/Pages/ChartItemSetting'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'

 // 获取 option 的数据，便于使用 typeof 获取类型
-import { option, types, indicatorPlacements} from './config'
+import { option, types, indicatorPlacements } from './config'

 const props = defineProps({
  optionData: {
--- a/src/packages/components/Charts/Mores/Process/index.vue
+++ b/src/packages/components/Charts/Mores/Process/index.vue
@ -1,27 +1,67 @@
 <template>
  <n-progress
    :type="type"
-    :percentage="dataset"
+    :height="h"
+    :processing="processing"
+    :percentage="option.dataset"
    :indicator-placement="indicatorPlacement"
    :color="color"
-  />
+    :rail-color="railColor"
+    :offset-degree="offsetDegree"
+  >
+    <n-text
+      :style="{
+        color: indicatorTextColor,
+        fontSize: `${indicatorTextSize}px`
+      }"
+    >
+      {{option.dataset}} {{unit}}
+    </n-text>
+  </n-progress>
 </template>

 <script setup lang="ts">
-import { PropType, toRefs, watch } from 'vue'
+import { PropType, toRefs, watch, shallowReactive } from 'vue'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import config  from './config'
+import config, { option as configOption  } from './config'

 const props = defineProps({
  chartConfig: {
    type: Object as PropType<config>,
-    required: true,
-  },
+    required: true
+  }
 })

 // 取配置数据
-const { type, color, indicatorPlacement, dataset } = toRefs(props.chartConfig.option)
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  type,
+  unit,
+  color,
+  fontSize,
+  processing,
+  railColor,
+  indicatorTextColor,
+  indicatorPlacement,
+  indicatorTextSize,
+  offsetDegree,
+  dataset
+} = toRefs(props.chartConfig.option)

-useChartDataFetch(props.chartConfig, useChartEditStore)
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+
+// 手动更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  }
+)
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
+  option.dataset = newData
+})
 </script>
--- a/src/packages/components/Charts/Mores/WaterPolo/index.ts
+++ b/src/packages/components/Charts/Mores/WaterPolo/index.ts
@ -1,5 +1,5 @@
 import image from '@/assets/images/chart/charts/water_WaterPolo.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

 export const WaterPoloConfig: ConfigType = {
@ -10,5 +10,6 @@ export const WaterPoloConfig: ConfigType = {
  category: ChatCategoryEnum.MORE,
  categoryName: ChatCategoryEnumName.MORE,
  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
  image
 }
--- a/src/packages/components/Charts/Mores/WaterPolo/index.vue
+++ b/src/packages/components/Charts/Mores/WaterPolo/index.vue
@ -1,11 +1,5 @@
 <template>
-  <v-chart
-    ref="vChartRef"
-    :theme="themeColor"
-    :option="option.value"
-    :manual-update="isPreview()"
-    autoresize
-  ></v-chart>
+  <v-chart :theme="themeColor" :option="option.value" autoresize></v-chart>
 </template>

 <script setup lang="ts">
@ -24,16 +18,16 @@ import { useChartDataFetch } from '@/hooks'
 const props = defineProps({
  themeSetting: {
    type: Object,
-    required: true,
+    required: true
  },
  themeColor: {
    type: Object,
-    required: true,
+    required: true
  },
  chartConfig: {
    type: Object as PropType<config>,
-    required: true,
-  },
+    required: true
+  }
 })

 use([CanvasRenderer, GridComponent])
@ -41,7 +35,7 @@ use([CanvasRenderer, GridComponent])
 const chartEditStore = useChartEditStore()

 const option = reactive({
-  value: {},
+  value: {}
 })

 // 渐变色处理
@ -56,33 +50,42 @@ watch(
      props.chartConfig.option.series[0].color[0].colorStops = [
        {
          offset: 0,
-          color: themeColor[0],
+          color: themeColor[0]
        },
        {
          offset: 1,
-          color: themeColor[1],
-        },
+          color: themeColor[1]
+        }
      ]
    }
    option.value = props.chartConfig.option
  },
  {
-    immediate: true,
+    immediate: true
  }
 )

-const updateDataset = (newData: string | number) => {
-  props.chartConfig.option.series[0].data = [parseFloat(`${newData}`).toFixed(2)]
-  option.value = props.chartConfig.option
+// 数据处理
+const dataHandle = (newData: number) => {
+  return parseFloat(newData.toFixed(2))
 }

+// 编辑
 watch(
  () => props.chartConfig.option.dataset,
-  newData => updateDataset(newData),
+  newData => {
+    console.log(dataHandle(newData))
+    props.chartConfig.option.series[0].data = [dataHandle(newData)]
+    option.value = props.chartConfig.option
+  },
  {
-    immediate: true,
+    immediate: true
  }
 )

-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+// 预览
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
+  // @ts-ignore
+  option.value.series[0].data = [dataHandle(newData)]
+})
 </script>
--- a/src/packages/components/Charts/Pies/PieCircle/config.ts
+++ b/src/packages/components/Charts/Pies/PieCircle/config.ts
@ -2,7 +2,8 @@ import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
 import { PieCircleConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'

-export const includes = ['legend']
+export const includes = []
+
 const option = {
  tooltip: {
    show: true,
--- a/src/packages/components/Charts/Pies/PieCircle/index.ts
+++ b/src/packages/components/Charts/Pies/PieCircle/index.ts
@ -1,5 +1,5 @@
 import image from '@/assets/images/chart/charts/pie-circle.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

 export const PieCircleConfig: ConfigType = {
@ -10,5 +10,6 @@ export const PieCircleConfig: ConfigType = {
  category: ChatCategoryEnum.PIE,
  categoryName: ChatCategoryEnumName.PIE,
  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
  image
 }
--- a/src/packages/components/Charts/Pies/PieCircle/index.vue
+++ b/src/packages/components/Charts/Pies/PieCircle/index.vue
@ -1,9 +1,9 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart :theme="themeColor" :option="option.value" autoresize> </v-chart>
 </template>

 <script setup lang="ts">
-import {computed, PropType, reactive, watch} from 'vue'
+import { PropType, reactive, watch } from 'vue'
 import VChart from 'vue-echarts'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@ -12,14 +12,7 @@ import { mergeTheme } from '@/packages/public/chart'
 import config, { includes } from './config'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { isPreview } from '@/utils'
-import {
-  DatasetComponent,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-  TitleComponent,
-} from 'echarts/components'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'

 const props = defineProps({
  themeSetting: {
@ -36,36 +29,39 @@ const props = defineProps({
  }
 })

-use([
-  DatasetComponent,
-  CanvasRenderer,
-  PieChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-  TitleComponent
-])
+use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])

 const option = reactive({
  value: {}
 })

-watch(
-    () => props.chartConfig.option.dataset,
-    (newData) => {
-      // console.log('update:'+newData)
+const dataHandle = (newData: any) => {
  const d = parseFloat(`${newData}`) * 100
  let config = props.chartConfig.option
-      config.title.text = d.toFixed(2) + "%"
+  config.title.text = d.toFixed(2) + '%'
  config.series[0].data[0].value[0] = d
  config.series[0].data[1].value[0] = 100 - d
-      option.value = mergeTheme(config, props.themeSetting, includes)
-      option.value = config
-    },
+  option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  option.value = props.chartConfig.option
+}
+
+// 配置时
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => dataHandle(newData),
  {
-      immediate: true,
+    immediate: true
  }
 )

-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+// 预览时
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: number) => {
+  let d = parseFloat(`${resData}`) * 100
+  // @ts-ignore
+  option.value.title.text = d.toFixed(2) + '%'
+  // @ts-ignore
+  option.value.series[0].data[0].value[0] = d
+  // @ts-ignore
+  option.value.series[0].data[1].value[0] = 100 - d
+})
 </script>
--- a/src/packages/components/Charts/Pies/PieCommon/index.ts
+++ b/src/packages/components/Charts/Pies/PieCommon/index.ts
@ -1,5 +1,5 @@
 import image from '@/assets/images/chart/charts/pie.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'

 export const PieCommonConfig: ConfigType = {
@ -10,5 +10,6 @@ export const PieCommonConfig: ConfigType = {
  category: ChatCategoryEnum.PIE,
  categoryName: ChatCategoryEnumName.PIE,
  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
  image
 }
--- a/src/packages/components/Decorates/Mores/Number/config.ts
+++ b/src/packages/components/Decorates/Mores/Number/config.ts
@ -4,12 +4,13 @@ import { NumberConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'

 export const option = {
-  from: 50000,
-  to: 100000,
+  // 数据说明
+  dataset: 100000,
+  from: 0,
  dur: 3,
  precision: 0,
  showSeparator: true,
-  numberSize: 24,
+  numberSize: 34,
  numberColor: '#4a9ef8',
  prefixText: '￥',
  prefixColor: '#4a9ef8',
--- a/src/packages/components/Decorates/Mores/Number/config.vue
+++ b/src/packages/components/Decorates/Mores/Number/config.vue
@ -1,13 +1,6 @@
 <template>
  <CollapseItem name="内容" :expanded="true">
    <SettingItemBox name="数值">
-      <SettingItem name="起始值">
-        <n-input-number
-          v-model:value="optionData.from"
-          size="small"
-          :min="0"
-        ></n-input-number>
-      </SettingItem>
      <SettingItem name="终点值">
        <n-input-number
          v-model:value="optionData.to"
@ -22,12 +15,6 @@
          :min="1"
        ></n-input-number>
      </SettingItem>
-      <SettingItem>
-        <n-space>
-          <n-switch v-model:value="optionData.showSeparator" size="small" />
-          <n-text>展示分割符</n-text>
-        </n-space>
-      </SettingItem>
      <SettingItem name="精度">
        <n-input-number
          v-model:value="optionData.precision"
@ -35,6 +22,12 @@
          :min="0"
        ></n-input-number>
      </SettingItem>
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.showSeparator" size="small" />
+          <n-text>展示分割符</n-text>
+        </n-space>
+      </SettingItem>
    </SettingItemBox>

    <SettingItemBox name="数值">
--- a/src/packages/components/Decorates/Mores/Number/index.vue
+++ b/src/packages/components/Decorates/Mores/Number/index.vue
@ -6,7 +6,7 @@
      </span>
    </template>
    <span :style="`color:${numberColor};font-size:${numberSize}px`">
-      <n-number-animation :from="option.from" :to="option.to" :duration="dur * 1000" :show-separator="showSeparator"
+      <n-number-animation :from="option.from" :to="option.dataset" :duration="dur * 1000" :show-separator="showSeparator"
        :precision="precision"></n-number-animation>
    </span>
    <template #suffix>
@ -31,7 +31,7 @@ const props = defineProps({
 })
 const option = reactive({
  from: 0,
-  to: 0,
+  dataset: 0,
 })
 const { w, h } = toRefs(props.chartConfig.attr)
 let {
@ -48,8 +48,8 @@ let {

 const updateNumber = (newData: number) => {
  // 原来的目标值作为新的数字动画的起始值
-  option.from = option.to
-  option.to = newData
+  option.from = option.dataset
+  option.dataset = newData
 }

 watch(
@ -60,14 +60,15 @@ watch(
 )

 watch(
-  () => props.chartConfig.option.to,
+  () => props.chartConfig.option.dataset,
  () => {
-    option.to = props.chartConfig.option.to
+    option.dataset = props.chartConfig.option.dataset
  }, { immediate: true }
 )

 useChartDataFetch(props.chartConfig, useChartEditStore, updateNumber)
 </script>
+
 <style lang="scss" scoped>
@include go('decorates-number') {
  display: flex;
--- a/src/packages/components/Informations/Mores/Image/config.vue
+++ b/src/packages/components/Informations/Mores/Image/config.vue
@ -1,5 +1,5 @@
 <template>
-  <collapse-item name="图片" :expanded="true">
+  <collapse-item name="属性" :expanded="true">
    <setting-item-box name="路径" :alone="true">
      <setting-item>
        <n-input v-model:value="optionData.dataset" size="small"></n-input>
--- a/src/packages/components/Informations/Mores/Image/index.vue
+++ b/src/packages/components/Informations/Mores/Image/index.vue
@ -1,42 +1,57 @@
 <template>
-  <div class="go-packages-image">
  <div :style="getStyle(borderRadius)">
    <n-image
      :object-fit="fit"
      preview-disabled
-        :src="dataset"
+      :src="option.dataset"
      :fallback-src="requireErrorImg()"
      :width="w"
      :height="h"
    ></n-image>
  </div>
-  </div>
 </template>

 <script setup lang="ts">
-import { PropType, computed, toRefs } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
+import { PropType, shallowReactive, watch, toRefs } from 'vue'
 import { requireErrorImg } from '@/utils'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'

 const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
-    required: true,
-  },
+    required: true
+  }
 })

 const { w, h } = toRefs(props.chartConfig.attr)
 const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)

+const option = shallowReactive({
+  dataset: ''
+})
+
 const getStyle = (radius: number) => {
  return {
    borderRadius: `${radius}px`,
-    overflow: 'hidden',
+    overflow: 'hidden'
  }
 }
-</script>

-<style lang="scss" scoped>
-.go-packages-image {
-}
-</style>
+// 编辑更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  },
+  {
+    immediate: true
+  }
+)
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option.dataset = newData
+})
+</script>
--- a/src/packages/components/Informations/Texts/TextCommon/index.vue
+++ b/src/packages/components/Informations/Texts/TextCommon/index.vue
@ -15,19 +15,22 @@

      background-color:${backgroundColor}`"
    >
-      {{ dataset }}
+      {{ option.dataset }}
    </div>
  </div>
 </template>
 <script setup lang="ts">
-import { PropType, toRefs } from 'vue'
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption  } from './config'

 const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
-    required: true,
-  },
+    required: true
+  }
 })

 const { w, h } = toRefs(props.chartConfig.attr)
@ -42,8 +45,27 @@ const {
  borderColor,
  borderRadius,
  writingMode,
-  backgroundColor,
+  backgroundColor
 } = toRefs(props.chartConfig.option)
+
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+
+// 手动更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  }, {
+    immediate: true
+  }
+)
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
+  option.dataset = newData
+})
 </script>

 <style lang="scss" scoped>
--- a/src/packages/components/Informations/Texts/TextGradient/index.ts
+++ b/src/packages/components/Informations/Texts/TextGradient/index.ts
@ -1,5 +1,5 @@
 import image from '@/assets/images/chart/informations/text_gradient.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'

 export const TextGradientConfig: ConfigType = {
@ -10,5 +10,6 @@ export const TextGradientConfig: ConfigType = {
  category: ChatCategoryEnum.TEXT,
  categoryName: ChatCategoryEnumName.TEXT,
  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.NAIVE_UI,
  image
 }
--- a/src/packages/components/Informations/Texts/TextGradient/index.vue
+++ b/src/packages/components/Informations/Texts/TextGradient/index.vue
@ -6,41 +6,37 @@
  </div>
 </template>
 <script setup lang="ts">
-import { PropType, toRefs, reactive, watch } from 'vue'
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption  } from './config'

 const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
-    required: true,
-  },
+    required: true
+  }
 })

-const option = reactive({
-  dataset: ''
+const option = shallowReactive({
+  dataset: configOption.dataset
 })

 const { w, h } = toRefs(props.chartConfig.attr)
+const { size, gradient } = toRefs(props.chartConfig.option)

-const {
-  size,
-  gradient
-} = toRefs(props.chartConfig.option)
-
-const callback = (newData: string) => {
-  option.dataset = newData
-}

 watch(
  () => props.chartConfig.option.dataset,
-  () => {
-    option.dataset = props.chartConfig.option.dataset
-  }, { immediate: true }
+  (newData: any) => {
+    option.dataset = newData
+  }
 )

-useChartDataFetch(props.chartConfig, useChartEditStore, callback)
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option.dataset = newData
+})
 </script>

 <style lang="scss" scoped>
@ -48,5 +44,8 @@ useChartDataFetch(props.chartConfig, useChartEditStore, callback)
  display: flex;
  align-items: center;
  justify-content: center;
+  .n-gradient-text {
+    white-space: initial;
+  }
 }
 </style>
--- a/src/packages/components/Tables/Tables/TableScrollBoard/index.vue
+++ b/src/packages/components/Tables/Tables/TableScrollBoard/index.vue
@ -308,7 +308,10 @@ watch(
 )

 // 数据更新 (默认更新 dataset，若更新之后有其它操作，可添加回调函数)
-useChartDataFetch(props.chartConfig, useChartEditStore)
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
+  props.chartConfig.option.dataset = resData
+  onRestart()
+})

 onUnmounted(() => {
  stopAnimation()
--- a/src/packages/index.d.ts
+++ b/src/packages/index.d.ts
@ -1,6 +1,12 @@
 import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'

+export enum ChartFrameEnum {
+  COMMON = 'common',
+  ECHARTS = 'echarts',
+  NAIVE_UI = 'naiveUI'
+}
+
 // 组件配置
 export type ConfigType = {
  key: string
@ -10,6 +16,7 @@ export type ConfigType = {
  category: string
  categoryName: string
  package: string
+  chartFrame?: ChartFrameEnum
  image: string | (() => Promise<typeof import('*.png')>)
 }

@ -80,7 +87,7 @@ export interface CreateComponentType extends PublicConfigType {
 }

 // 获取组件实例类中某个key对应value类型的方法
-export type PickCreateComponentType<T extends keyof CreateComponentType> = Pick<CreateComponentType,T>[T]
+export type PickCreateComponentType<T extends keyof CreateComponentType> = Pick<CreateComponentType, T>[T]

 // 包分类枚举
 export enum PackagesCategoryEnum {
--- a/src/store/modules/chartEditStore/chartEditStore.d.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.d.ts
@ -45,7 +45,7 @@ export enum EditCanvasConfigEnum {
  CHART_THEME_COLOR = 'chartThemeColor',
  CHART_THEME_SETTING = 'chartThemeSetting',
  BACKGROUND = 'background',
-  BACKGROUND_IAMGE = 'backgroundImage',
+  BACKGROUND_IMAGE = 'backgroundImage',
  SELECT_COLOR = 'selectColor',
  PREVIEW_SCALE_TYPE = 'previewScaleType',
 }
@ -73,7 +73,7 @@ export interface EditCanvasConfigType {
  [EditCanvasConfigEnum.HEIGHT]: number
  // 背景色
  [EditCanvasConfigEnum.BACKGROUND]?: string
-  [EditCanvasConfigEnum.BACKGROUND_IAMGE]?: string | null
+  [EditCanvasConfigEnum.BACKGROUND_IMAGE]?: string | null
  // 图表主题颜色
  [EditCanvasConfigEnum.CHART_THEME_COLOR]: ChartColorsNameType
  // 图表全局配置
@ -107,7 +107,7 @@ export type MousePositionType = {
 // 操作目标
 export type TargetChartType = {
  hoverId?: string
-  selectId?: string
+  selectId: string[]
 }

 // 数据记录
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@ -1,5 +1,4 @@
 import { defineStore } from 'pinia'
-import { getUUID, loadingStart, loadingFinish, loadingError } from '@/utils'
 import { CreateComponentType } from '@/packages/index.d'
 import debounce from 'lodash/debounce'
 import cloneDeep from 'lodash/cloneDeep'
@ -11,7 +10,14 @@ import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHis
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
 import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
 import { MenuEnum } from '@/enums/editPageEnum'
-import { PreviewScaleEnum } from '@/enums/styleEnum'
+import { 
+  getUUID,
+  loadingStart,
+  loadingFinish,
+  loadingError,
+  isString,
+  isArray
+} from '@/utils'
 import {
  ChartEditStoreEnum,
  ChartEditStorage,
@ -61,7 +67,7 @@ export const useChartEditStore = defineStore({
    // 目标图表
    targetChart: {
      hoverId: undefined,
-      selectId: undefined
+      selectId: []
    },
    // 记录临时数据（复制等）
    recordChart: undefined,
@ -160,8 +166,36 @@ export const useChartEditStore = defineStore({
      this.targetChart.hoverId = hoverId
    },
    // * 设置目标数据 select
-    setTargetSelectChart(selectId?:TargetChartType["selectId"]) {
+    setTargetSelectChart(selectId?: string | string[], push: boolean = false) {
+      // 无 id 清空
+      if(!selectId) {
+        this.targetChart.selectId = []
+        return
+      }
+      // 新增
+      if(push) {
+        // 字符串
+        if(isString(selectId)) {
+          this.targetChart.selectId.push(selectId)
+          return
+        }
+        // 数组
+        if(isArray(selectId)) {
+          this.targetChart.selectId.push(...selectId)
+          return
+        }
+      } else {
+        // 字符串
+        if(isString(selectId)) {
+          this.targetChart.selectId = [selectId]
+          return
+        }
+        // 数组
+        if(isArray(selectId)) {
          this.targetChart.selectId = selectId
+          return
+        }
+      }
    },
    // * 设置记录数据
    setRecordChart(item: RecordChartType | undefined) {
@ -176,7 +210,7 @@ export const useChartEditStore = defineStore({
    },
    // * 找到目标 id 数据下标位置（无则返回-1）
    fetchTargetIndex(id?: string): number {
-      const targetId = id || this.getTargetChart.selectId
+      const targetId = id || this.getTargetChart.selectId.length && this.getTargetChart.selectId[0] || undefined
      if(!targetId) {
        loadingFinish()
        return -1
@ -367,7 +401,6 @@ export const useChartEditStore = defineStore({
          e = cloneDeep(e)
          // 生成新 id
          e.id = getUUID()
-          // 偏移位置
          e.attr.x = this.getMousePosition.x + 30
          e.attr.y = this.getMousePosition.y + 30
          return e
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
@ -236,7 +236,7 @@ const beforeUploadHandle = async ({ file }) => {
 // 清除背景
 const clearImage = () => {
  chartEditStore.setEditCanvasConfig(
-    EditCanvasConfigEnum.BACKGROUND_IAMGE,
+    EditCanvasConfigEnum.BACKGROUND_IMAGE,
    undefined
  )
  chartEditStore.setEditCanvasConfig(
@ -274,7 +274,7 @@ const customRequest = (options: UploadCustomRequestOptions) => {
    if (file.file) {
      const ImageUrl = fileToUrl(file.file)
      chartEditStore.setEditCanvasConfig(
-        EditCanvasConfigEnum.BACKGROUND_IAMGE,
+        EditCanvasConfigEnum.BACKGROUND_IMAGE,
        ImageUrl
      )
      chartEditStore.setEditCanvasConfig(
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
@ -62,7 +62,7 @@ import { ref, toRefs } from 'vue'
 import { icon } from '@/plugins'
 import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
 import { RequestHttpEnum, ResultEnum } from '@/enums/httpEnum'
-import { chartDataUrl, rankListUrl, numberUrl } from '@/api/mock'
+import { chartDataUrl, rankListUrl, scrollBoardUrl, numberFloatUrl, numberIntUrl, textUrl, imageUrl } from '@/api/mock'
 import { http } from '@/api/http'
 import { SelectHttpType } from '../../index.d'
 import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'
@ -82,11 +82,24 @@ const apiList = [
    value: `【图表】${ chartDataUrl }`
  },
  {
-    value: `【表格】${ rankListUrl }`
+    value: `【文本】${ textUrl }`
  },
  {
-    value: `【0~1数字】${ numberUrl }`
-  }
+    value: `【0~100 整数】${ numberIntUrl }`
+  },
+  {
+    value: `【0~1小数】${ numberFloatUrl }`
+  },
+  {
+    value: `【图片地址】${ imageUrl }`
+  },
+  {
+    value: `【排名列表】${ rankListUrl }`
+  },
+  {
+    value: `【滚动表格】${ scrollBoardUrl }`
+  },
+    
 ]

 // 选项
--- a/src/views/chart/ContentConfigurations/components/ChartData/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/index.vue
@ -41,9 +41,3 @@ const selectOptions: SelectCreateDataType[] = [
  }
 ]
 </script>
-
-<style></style>
-<style lang="scss" scoped>
-@include go('chart-configurations-data') {
-}
-</style>
--- a/src/views/chart/ContentConfigurations/index.vue
+++ b/src/views/chart/ContentConfigurations/index.vue
@ -123,7 +123,8 @@ const expandHindle = () => {

 const selectTarget = computed(() => {
  const selectId = chartEditStore.getTargetChart.selectId
-  if (!selectId) return undefined
+  // 排除多个
+  if (selectId.length !== 1) return undefined
  return chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
 })

--- a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue
+++ b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue
@ -4,10 +4,7 @@
      class="line"
      v-for="item in line.lineArr"
      :key="item"
-      :class="[
-        item.includes('row') ? 'row' : 'col',
-        line['select'].has(item) && 'visible'
-      ]"
+      :class="[item.includes('row') ? 'row' : 'col', line['select'].has(item) && 'visible']"
      :style="useComponentStyle(line['select'].get(item))"
    ></div>
  </div>
@ -53,7 +50,7 @@ const useComponentStyle = (attr?: Partial<{ x: number; y: number }>) => {
 }

 // * 吸附距离
-const minDistance = computed(()=>{
+const minDistance = computed(() => {
  return settingStore.getChartAlignRange
 })

@ -72,9 +69,7 @@ const isSorption = (selectValue: number, componentValue: number) => {

 // * 当前目标
 const selectId = computed(() => chartEditStore.getTargetChart.selectId)
-const selectTarget = computed(
-  () => chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()]
-)
+const selectTarget = computed(() => chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()])
 const selectAttr = computed(() => selectTarget.value?.attr || {})

 // * 画布坐标
@ -95,7 +90,7 @@ const canvasPositionList = computed(() => {
 watch(
  () => chartEditStore.getMousePosition,
  throttle(() => {
-    if (!isComputedLine.value) return
+    if (!isComputedLine.value || selectId.value.length !== 1) return
    // 获取目标组件数据

    const selectW = selectAttr.value.w
@ -111,12 +106,12 @@ watch(
    const selectTopY = selectAttr.value.y
    const selectHalfY = selectTopY + selectH / 2
    const selectBottomY = selectTopY + selectH
-    const seletY = [selectTopY, selectHalfY, selectBottomY]
+    const selectY = [selectTopY, selectHalfY, selectBottomY]

    line.select.clear()
    line.sorptioned.y = false
    // 循环查询所有组件数据
-    const componentList = chartEditStore.getComponentList.map((e:CreateComponentType) => {
+    const componentList = chartEditStore.getComponentList.map((e: CreateComponentType) => {
      return {
        id: e.id,
        attr: e.attr
@ -127,7 +122,7 @@ watch(
    line.lineArr.forEach(lineItem => {
      componentList.forEach((component: typeof canvasPositionList.value) => {
        // 排除自身
-        if (selectId.value === component.id) return
+        if (selectId.value[0] === component.id) return
        const componentW = component.attr.w
        const componentH = component.attr.h

@ -163,24 +158,15 @@ watch(
          // 顶部
          if (isSorption(selectHalfY, componentTopY)) {
            line.select.set(lineItem, { y: componentTopY })
-            selectTarget.value.setPosition(
-              selectLeftX,
-              componentTopY - selectH / 2
-            )
+            selectTarget.value.setPosition(selectLeftX, componentTopY - selectH / 2)
          }
          if (isSorption(selectHalfY, componentHalfY)) {
            line.select.set(lineItem, { y: componentHalfY })
-            selectTarget.value.setPosition(
-              selectLeftX,
-              componentHalfY - selectH / 2
-            )
+            selectTarget.value.setPosition(selectLeftX, componentHalfY - selectH / 2)
          }
          if (isSorption(selectHalfY, componentBottomY)) {
            line.select.set(lineItem, { y: componentBottomY })
-            selectTarget.value.setPosition(
-              selectLeftX,
-              componentBottomY - selectH / 2
-            )
+            selectTarget.value.setPosition(selectLeftX, componentBottomY - selectH / 2)
          }
        }
        if (lineItem.includes('rowb')) {
@ -191,17 +177,11 @@ watch(
          }
          if (isSorption(selectBottomY, componentHalfY)) {
            line.select.set(lineItem, { y: componentHalfY })
-            selectTarget.value.setPosition(
-              selectLeftX,
-              componentHalfY - selectH
-            )
+            selectTarget.value.setPosition(selectLeftX, componentHalfY - selectH)
          }
          if (isSorption(selectBottomY, componentBottomY)) {
            line.select.set(lineItem, { y: componentBottomY })
-            selectTarget.value.setPosition(
-              selectLeftX,
-              componentBottomY - selectH
-            )
+            selectTarget.value.setPosition(selectLeftX, componentBottomY - selectH)
          }
        }

@ -223,24 +203,15 @@ watch(
        if (lineItem.includes('colc')) {
          if (isSorption(selectHalfX, componentLeftX)) {
            line.select.set(lineItem, { x: componentLeftX })
-            selectTarget.value.setPosition(
-              componentLeftX - selectW / 2,
-              selectTopY
-            )
+            selectTarget.value.setPosition(componentLeftX - selectW / 2, selectTopY)
          }
          if (isSorption(selectHalfX, componentHalfX)) {
            line.select.set(lineItem, { x: componentHalfX })
-            selectTarget.value.setPosition(
-              componentHalfX - selectW / 2,
-              selectTopY
-            )
+            selectTarget.value.setPosition(componentHalfX - selectW / 2, selectTopY)
          }
          if (isSorption(selectHalfX, componentRightX)) {
            line.select.set(lineItem, { x: componentRightX })
-            selectTarget.value.setPosition(
-              componentRightX - selectW / 2,
-              selectTopY
-            )
+            selectTarget.value.setPosition(componentRightX - selectW / 2, selectTopY)
          }
        }
        if (lineItem.includes('colr')) {
@ -254,14 +225,14 @@ watch(
          }
          if (isSorption(selectRightX, componentRightX)) {
            line.select.set(lineItem, { x: componentRightX })
-            selectTarget.value.setPosition( componentRightX - selectW, selectTopY )
+            selectTarget.value.setPosition(componentRightX - selectW, selectTopY)
          }
        }

        /*
          * 我也不知道为什么这个不行，还没时间调
          if(lineItem.includes('row')) {
-            seletY.forEach(sY => {
+            selectY.forEach(sY => {
              componentY.forEach(cY => {
                if (isSorption(sY, cY)) {
                  line.select.set(lineItem, { y: cY })
--- a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
+++ b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
@ -4,7 +4,7 @@
    <!-- 锚点 -->
    <div
      :class="`shape-point ${point}`"
-      v-for="(point, index) in (select? pointList : [])"
+      v-for="(point, index) in select ? pointList : []"
      :key="index"
      :style="usePointStyle(point, index, item.attr, cursorResize)"
      @mousedown="useMousePointHandle($event, point, item.attr)"
@ -13,10 +13,7 @@
    <!-- 选中 -->
    <div class="shape-modal" :style="useSizeStyle(item.attr)">
      <div class="shape-modal-select" :class="{ active: select }"></div>
-      <div
-        class="shape-modal-change"
-        :class="{ selectActive: select, hoverActive: hover }"
-     ></div>
+      <div class="shape-modal-change" :class="{ selectActive: select, hoverActive: hover }"></div>
    </div>
  </div>
 </template>
@ -52,8 +49,10 @@ const hover = computed(() => {
  return props.item.id === chartEditStore.getTargetChart.hoverId
 })

+// 兼容多值场景
 const select = computed(() => {
-  return props.item.id === chartEditStore.getTargetChart.selectId
+  const id = props.item.id
+  return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
 })
 </script>

@ -90,8 +89,7 @@ const select = computed(() => {
      transform: translate(-45%, -50%);
    }
    &.rt,
-    &.rb
-    {
+    &.rb {
      transform: translate(-30%, -30%);
    }
  }
--- a/src/views/chart/ContentLayers/components/LayersListItem/index.vue
+++ b/src/views/chart/ContentLayers/components/LayersListItem/index.vue
@ -43,7 +43,8 @@ const { image } = toRefs(props.componentData.chartConfig)

 // 计算当前选中目标
 const select = computed(() => {
-  return props.componentData.id === chartEditStore.getTargetChart.selectId
+  const id = props.componentData.id
+  return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
 })

 const hover = computed(() => {
--- a/src/views/chart/hooks/useKeyboard.hook.ts
+++ b/src/views/chart/hooks/useKeyboard.hook.ts
@ -75,9 +75,21 @@ const macKeyList: Array<string> = [
  macKeyboardValue.forward,
 ]

+// 处理键盘记录
+const keyRecordHandle = () => {
+  document.onkeydown = throttle((e: KeyboardEvent) => {
+    if(window.$KeyboardActive) window.$KeyboardActive.add(e.key.toLocaleLowerCase())
+    else window.$KeyboardActive = new Set([e.key])
+  }, 200)
+
+  document.onkeyup = throttle((e: KeyboardEvent) => {
+    if(window.$KeyboardActive) window.$KeyboardActive.delete(e.key.toLocaleLowerCase())
+  }, 200)
+}
+
 // 初始化监听事件
 export const useAddKeyboard = () => {
-  const switchHande = (keyboardValue: typeof winKeyboardValue, e: string) => {
+  const switchHandle = (keyboardValue: typeof winKeyboardValue, e: string) => {
    switch (e) {
      // ct+↑
      case keyboardValue.up:
@ -124,15 +136,20 @@ export const useAddKeyboard = () => {
    }
  }
  winKeyList.forEach((key: string) => {
-    switchHande(winKeyboardValue, key)
+    switchHandle(winKeyboardValue, key)
  })
  macKeyList.forEach((key: string) => {
-    switchHande(macKeyboardValue, key)
+    switchHandle(macKeyboardValue, key)
  })
+
+  keyRecordHandle()
 }

 // 卸载监听事件
 export const useRemoveKeyboard = () => {
+  document.onkeydown = () => {};
+  document.onkeyup = () => {};
+
  winKeyList.forEach((key: string) => {
    keymaster.unbind(key)
  })
--- a/types/global.d.ts
+++ b/types/global.d.ts
@ -5,6 +5,8 @@ interface Window {
  // 语言
  $t: any
  $vue: any
+  // 键盘按键记录
+  $KeyboardActive?: Set<string>
 }

 declare type Recordable<T = any> = Record<string, T>