From c4ff0d24b7634f96ded37e715ad69a1d182b5ea8 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Fri, 18 Mar 2022 20:36:05 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E5=85=A8?=
 =?UTF-8?q?=E5=B1=80=E6=8E=A5=E5=8F=A3=E9=85=8D=E7=BD=AE=EF=BC=8C=E5=8D=95?=
 =?UTF-8?q?=E4=B8=AA=E5=9B=BE=E8=A1=A8=E6=98=A0=E5=B0=84=E8=A1=A8=EF=BC=8C?=
 =?UTF-8?q?=E6=8A=BD=E7=A6=BB=E6=9F=B1=E7=8A=B6=E5=9B=BE=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F=EF=BC=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 18 ++--
 src/App.vue                                   | 16 ++--
 src/hooks/code.hook.ts                        |  9 ++
 src/hooks/index.ts                            |  3 +-
 src/hooks/theme.hook.ts                       |  8 +-
 .../Charts/Bars/BarCommon/config.ts           | 15 ++--
 .../Charts/Bars/BarCommon/data.json           | 40 +++++++++
 .../Charts/Bars/BarCommon/index.vue           |  7 +-
 src/packages/index.d.ts                       |  5 ++
 src/packages/public/chart.ts                  | 18 +++-
 src/packages/public/publicConfig.ts           |  1 +
 src/plugins/naive.ts                          |  4 +
 src/settings/chartThemes/global.theme.json    |  4 +
 .../chartEditStore/chartEditStore.d.ts        | 10 +--
 .../components/ChartDataSetting/index.vue     |  4 +-
 .../components/ChartAnimation/index.vue       | 12 +--
 .../components/ChartData/index.vue            | 89 ++++++++++++++++++-
 .../components/ChartSetting/index.vue         | 12 +--
 .../components/hooks/useTargetData.hook.ts    | 14 +++
 20 files changed, 226 insertions(+), 64 deletions(-)
 create mode 100644 src/hooks/code.hook.ts
 create mode 100644 src/packages/components/Charts/Bars/BarCommon/data.json
 create mode 100644 src/views/chart/ContentConfigurations/components/hooks/useTargetData.hook.ts

diff --git a/package.json b/package.json
index 9f11668d..5587098e 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "animate.css": "^4.1.1",
     "axios": "^0.23.0",
     "crypto-ts": "^1.0.2",
+    "highlight.js": "^11.5.0",
     "naive-ui": "^2.25.2",
     "pinia": "^2.0.6",
     "screenfull": "^6.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 006de1b7..93bb0d8b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,7 @@ specifiers:
   eslint-plugin-import: ^2.25.3
   eslint-plugin-prettier: ^4.0.0
   eslint-plugin-vue: ^8.2.0
+  highlight.js: ^11.5.0
   lodash: ~4.17.21
   mockjs: ^1.1.0
   naive-ui: ^2.25.2
@@ -47,6 +48,7 @@ dependencies:
   animate.css: r2.cnpmjs.org/animate.css/4.1.1
   axios: rg.cnpmjs.org/axios/0.23.0
   crypto-ts: r2.cnpmjs.org/crypto-ts/1.0.2
+  highlight.js: registry.npmjs.org/highlight.js/11.5.0
   naive-ui: registry.npmjs.org/naive-ui/2.25.2_vue@3.2.24
   pinia: rg.cnpmjs.org/pinia/2.0.6_typescript@4.5.2+vue@3.2.24
   screenfull: rg.cnpmjs.org/screenfull/6.0.0
@@ -2147,6 +2149,13 @@ packages:
     version: 4.0.0
     engines: {node: '>=8'}
 
+  registry.npmjs.org/highlight.js/11.5.0:
+    resolution: {integrity: sha512-SM6WDj5/C+VfIY8pZ6yW6Xa0Fm1tniYVYWYW1Q/DcMnISZFrC3aQAZZZFAAZtybKNrGId3p/DNbFTtcTXXgYBw==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/highlight.js/-/highlight.js-11.5.0.tgz}
+    name: highlight.js
+    version: 11.5.0
+    engines: {node: '>=12.0.0'}
+    dev: false
+
   registry.npmjs.org/jest-diff/27.5.1:
     resolution: {integrity: sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.1.tgz}
     name: jest-diff
@@ -2205,7 +2214,7 @@ packages:
       date-fns: rg.cnpmjs.org/date-fns/2.27.0
       date-fns-tz: rg.cnpmjs.org/date-fns-tz/1.1.6_date-fns@2.27.0
       evtd: rg.cnpmjs.org/evtd/0.2.3
-      highlight.js: rg.cnpmjs.org/highlight.js/11.3.1
+      highlight.js: registry.npmjs.org/highlight.js/11.5.0
       lodash: rg.cnpmjs.org/lodash/4.17.21
       lodash-es: rg.cnpmjs.org/lodash-es/4.17.21
       seemly: rg.cnpmjs.org/seemly/0.3.3
@@ -4596,13 +4605,6 @@ packages:
       tslib: registry.npmjs.org/tslib/2.3.1
     dev: true
 
-  rg.cnpmjs.org/highlight.js/11.3.1:
-    resolution: {integrity: sha1-gTB47zqlGcYXAPhP6QRyMcXcMpE=, registry: http://r.cnpmjs.org/, tarball: https://rg.cnpmjs.org/highlight.js/download/highlight.js-11.3.1.tgz}
-    name: highlight.js
-    version: 11.3.1
-    engines: {node: '>=12.0.0'}
-    dev: false
-
   rg.cnpmjs.org/html-tags/3.1.0:
     resolution: {integrity: sha1-e15vfmZen7QfMAB+2eDUHpf7IUA=, registry: http://r.cnpmjs.org/, tarball: https://rg.cnpmjs.org/html-tags/download/html-tags-3.1.0.tgz}
     name: html-tags
diff --git a/src/App.vue b/src/App.vue
index 7f644b1b..4de0dd1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,10 @@
 <template>
   <n-config-provider
     :locale="zhCN"
-    :theme="getDarkTheme"
+    :theme="darkTheme"
+    :hljs="hljsTheme"
     :date-locale="dateZhCN"
-    :theme-overrides="getThemeOverrides"
+    :theme-overrides="overridesTheme"
   >
     <app-provider>
       <I18n></I18n>
@@ -17,11 +18,14 @@ import { zhCN, dateZhCN, NConfigProvider } from 'naive-ui'
 import { AppProvider } from '@/components/AppProvider'
 import { I18n } from '@/components/I18n'
 
-import { getDarkThemeHook, getThemeOverridesHook } from '@/hooks'
+import { useDarkThemeHook, useThemeOverridesHook, useHook } from '@/hooks'
 
-// 返回暗黑主题
-const getDarkTheme = getDarkThemeHook()
+// 暗黑主题
+const darkTheme = useDarkThemeHook()
 
 // 主题配置
-const getThemeOverrides = getThemeOverridesHook()
+const overridesTheme = useThemeOverridesHook()
+
+// 代码主题
+const hljsTheme = useHook()
 </script>
diff --git a/src/hooks/code.hook.ts b/src/hooks/code.hook.ts
new file mode 100644
index 00000000..40b0c9e1
--- /dev/null
+++ b/src/hooks/code.hook.ts
@@ -0,0 +1,9 @@
+import hljs from 'highlight.js/lib/core'
+import json from 'highlight.js/lib/languages/json'
+import typescript from 'highlight.js/lib/languages/typescript'
+
+export const useHook = () => {
+  hljs.registerLanguage('json', json)
+  hljs.registerLanguage('typescript', typescript)
+  return hljs
+}
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 979e8387..b8cd73c8 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,2 +1,3 @@
 export * from '@/hooks/theme.hook'
-export * from '@/hooks/previewScale.hook'
\ No newline at end of file
+export * from '@/hooks/previewScale.hook'
+export * from '@/hooks/code.hook'
\ No newline at end of file
diff --git a/src/hooks/theme.hook.ts b/src/hooks/theme.hook.ts
index 107ea6b0..ae5e846a 100644
--- a/src/hooks/theme.hook.ts
+++ b/src/hooks/theme.hook.ts
@@ -7,10 +7,10 @@ import { toLight } from '@/utils'
 /**
  * 设置全局主题
  */
-export const getThemeOverridesHook = () => {
+export const useThemeOverridesHook = () => {
   const designStore = useDesignStore()
   const { getAppTheme } = toRefs(designStore)
-  const getDarkTheme = computed(
+  const darkTheme = computed(
     (): GlobalThemeOverrides => {
       // 通用
       const commonObj = {
@@ -40,11 +40,11 @@ export const getThemeOverridesHook = () => {
       return designStore.getDarkTheme ? dartObject : lightObject
     }
   )
-  return getDarkTheme
+  return darkTheme
 }
 
 // 返回暗黑主题
-export const getDarkThemeHook = () => {
+export const useDarkThemeHook = () => {
   const designStore = useDesignStore()
   return computed(() => (designStore.getDarkTheme ? darkTheme : undefined))
 }
diff --git a/src/packages/components/Charts/Bars/BarCommon/config.ts b/src/packages/components/Charts/Bars/BarCommon/config.ts
index 45430ac4..fc8ca4ff 100644
--- a/src/packages/components/Charts/Bars/BarCommon/config.ts
+++ b/src/packages/components/Charts/Bars/BarCommon/config.ts
@@ -3,7 +3,7 @@ import { BarCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
 
-export const includes = ['legend', 'xAxis', 'yAxis']
+export const includes = ['legend', 'xAxis', 'yAxis', 'dataset']
 
 export const option = {
   tooltip: {
@@ -15,12 +15,11 @@ export const option = {
     }
   },
   legend: {
-    show: true,
+    show: true
   },
   xAxis: {
     show: true,
-    type: 'category',
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    type: 'category'
   },
   yAxis: {
     show: true,
@@ -28,24 +27,20 @@ export const option = {
   },
   series: [
     {
-      name: 'data1',
       type: 'bar',
       barWidth: null,
       itemStyle: {
         color: null,
         borderRadius: 0
-      },
-      data: [120, 200, 150, 80, 70, 110, 130]
+      }
     },
     {
-      name: 'data2',
       type: 'bar',
       barWidth: null,
       itemStyle: {
         color: null,
         borderRadius: 0
-      },
-      data: [130, 130, 312, 268, 155, 117, 160]
+      }
     }
   ]
 }
diff --git a/src/packages/components/Charts/Bars/BarCommon/data.json b/src/packages/components/Charts/Bars/BarCommon/data.json
new file mode 100644
index 00000000..a28d4ee7
--- /dev/null
+++ b/src/packages/components/Charts/Bars/BarCommon/data.json
@@ -0,0 +1,40 @@
+{
+  "dimensions": ["product", "data1", "data2"],
+  "source": [
+    {
+      "product": "Mon",
+      "data1": 120,
+      "data2": 130
+    },
+    {
+      "product": "Tue",
+      "data1": 200,
+      "data2": 130
+    },
+    {
+      "product": "Wed",
+      "data1": 150,
+      "data2": 312
+    },
+    {
+      "product": "Thu",
+      "data1": 80,
+      "data2": 268
+    },
+    {
+      "product": "Fri",
+      "data1": 70,
+      "data2": 155
+    },
+    {
+      "product": "Sat",
+      "data1": 110,
+      "data2": 117
+    },
+    {
+      "product": "Sun",
+      "data1": 130,
+      "data2": 160
+    }
+  ]
+}
diff --git a/src/packages/components/Charts/Bars/BarCommon/index.vue b/src/packages/components/Charts/Bars/BarCommon/index.vue
index 729850b6..a76e9aef 100644
--- a/src/packages/components/Charts/Bars/BarCommon/index.vue
+++ b/src/packages/components/Charts/Bars/BarCommon/index.vue
@@ -9,8 +9,10 @@ import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
 import config, { includes } from './config'
-import { mergeTheme } from '@/packages/public/chart'
+import { mergeTheme, setData } from '@/packages/public/chart'
+import dataJson from './data.json'
 import {
+  DatasetComponent,
   GridComponent,
   TooltipComponent,
   LegendComponent
@@ -32,6 +34,7 @@ const props = defineProps({
 })
 
 use([
+  DatasetComponent,
   CanvasRenderer,
   BarChart,
   GridComponent,
@@ -40,6 +43,6 @@ use([
 ])
 
 const option = computed(() => {
-  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  return setData(mergeTheme(props.chartConfig.option, props.themeSetting, includes), dataJson)
 })
 </script>
diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts
index 405a8047..415a7f32 100644
--- a/src/packages/index.d.ts
+++ b/src/packages/index.d.ts
@@ -18,6 +18,11 @@ interface requestConfig {
   data: RequestConfigType
 }
 
+// Echarts 数据类型
+interface EchartsDataType {
+  dimensions: string[],
+  source: any[]
+}
 // 组件实例类
 export interface PublicConfigType extends requestConfig {
   id: string
diff --git a/src/packages/public/chart.ts b/src/packages/public/chart.ts
index 8c66a3e3..67d53411 100644
--- a/src/packages/public/chart.ts
+++ b/src/packages/public/chart.ts
@@ -1,5 +1,6 @@
 import merge from 'lodash/merge'
 import pick from 'lodash/pick'
+import { EchartsDataType } from '../index.d'
 import { globalThemeJson } from '@/settings/chartThemes/index'
 
 /**
@@ -9,7 +10,7 @@ import { globalThemeJson } from '@/settings/chartThemes/index'
  * @param excludes 排除元素
  * @returns object
  */
-export const mergeTheme = <T, U> (
+export const mergeTheme = <T, U>(
   option: T,
   themeSetting: U,
   includes: string[]
@@ -20,8 +21,19 @@ export const mergeTheme = <T, U> (
 /**
  * * ECharts option 统一前置处理
  * @param option
+ * @return option
  */
- export const echartOptionProfixHandle = (option: any, includes: string[]) => {
+export const echartOptionProfixHandle = (option: any, includes: string[]) => {
   option['backgroundColor'] = 'rgba(0,0,0,0)'
   return mergeTheme(option, globalThemeJson, includes)
-}
\ No newline at end of file
+}
+
+/**
+ * * 设置数据
+ * @param option
+ * @return option
+ */
+export const setData = (option: any, data: EchartsDataType) => {
+  option.dataset = data
+  return option
+}
diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts
index 7212d610..5ce24dab 100644
--- a/src/packages/public/publicConfig.ts
+++ b/src/packages/public/publicConfig.ts
@@ -17,6 +17,7 @@ export class publicConfig implements PublicConfigType {
     opacity: 1,
     animations: []
   }
+  // 数据
   public data = {
     requestDataType: RequestDataTypeEnum.STATIC
   }
diff --git a/src/plugins/naive.ts b/src/plugins/naive.ts
index 779456d3..3a5949e3 100644
--- a/src/plugins/naive.ts
+++ b/src/plugins/naive.ts
@@ -79,6 +79,8 @@ import {
   NUploadDragger,
   NTree,
   NSpin,
+  NTimeline,
+  NTimelineItem,
   NTimePicker,
   NBackTop,
   NSkeleton,
@@ -171,6 +173,8 @@ const naive = create({
     NUploadDragger,
     NTree,
     NSpin,
+    NTimeline,
+    NTimelineItem,
     NTimePicker,
     NBackTop,
     NSkeleton,
diff --git a/src/settings/chartThemes/global.theme.json b/src/settings/chartThemes/global.theme.json
index 410700c7..70f47e00 100644
--- a/src/settings/chartThemes/global.theme.json
+++ b/src/settings/chartThemes/global.theme.json
@@ -77,5 +77,9 @@
     "textStyle": {
       "color": "#B9B8CE"
     }
+  },
+  "dataset": {
+    "dimensions": [],
+    "source": []
   }
 }
\ No newline at end of file
diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts
index 9cf58a69..12b65527 100644
--- a/src/store/modules/chartEditStore/chartEditStore.d.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.d.ts
@@ -124,17 +124,17 @@ export enum ChartEditStoreEnum {
 // 数据相关
 export enum RequestDataTypeEnum {
   // 静态数据
-  STATIC = 'static',
+  STATIC,
   // 请求数据
-  AJAX = 'ajax'
+  AJAX
 }
 
 // 数据配置
 export type RequestConfigType = {
   // 获取数据的方式
-  requestDataType: RequestDataTypeEnum,
+  requestDataType: RequestDataTypeEnum
   // 请求源地址
-  requestUrl?: string,
+  requestUrl?: string
   requestInterval?: number
 }
 
@@ -154,4 +154,4 @@ export interface ChartEditStorage {
   [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
   [ChartEditStoreEnum.REQUEST_CONFIG]: RequestConfigType
   [ChartEditStoreEnum.COMPONENT_LIST]: CreateComponentType[]
-}
\ No newline at end of file
+}
diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartDataSetting/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartDataSetting/index.vue
index adf765b7..0154d3c5 100644
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartDataSetting/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartDataSetting/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="go-chart-data-setting">
     <setting-item-box name="源地址" :alone="true">
       <n-input
         v-model:value="requestConfig.requestUrl"
@@ -33,5 +33,3 @@ const requestConfig: Ref<RequestConfigType> = computed(() => {
   return chartEditStore.getRequestConfig
 })
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/src/views/chart/ContentConfigurations/components/ChartAnimation/index.vue b/src/views/chart/ContentConfigurations/components/ChartAnimation/index.vue
index c6f7c396..4e6920ca 100644
--- a/src/views/chart/ContentConfigurations/components/ChartAnimation/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartAnimation/index.vue
@@ -34,25 +34,19 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, Ref } from 'vue'
+import { ref } from 'vue'
 import { animations } from '@/settings/animations/index'
 import { CollapseItem } from '@/components/ChartItemSetting/index'
-import { CreateComponentType } from '@/packages/index.d'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { useTargetData } from '../hooks/useTargetData.hook'
 
 // 全局颜色
 const designStore = useDesignStore()
 const themeColor = ref(designStore.getAppTheme)
 
-const chartEditStore = useChartEditStore()
 const hoverPreviewAnimate = ref('')
 
-const targetData: Ref<CreateComponentType> = computed(() => {
-  const list = chartEditStore.getComponentList
-  const targetIndex = chartEditStore.fetchTargetIndex()
-  return list[targetIndex]
-})
+const { targetData } = useTargetData()
 
 // * 选中的动画样式
 const activeIndex = (value: string) => {
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/index.vue
index 1a693517..749b6ad7 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/index.vue
@@ -1,11 +1,94 @@
 <template>
-  <div>
-    数据
+  <div class="go-chart-configurations-data">
+    <setting-item-box v-if="targetData" name="请求方式" :alone="true">
+      <n-select
+        v-model:value="targetData.data.requestDataType"
+        :options="selcetOpeions"
+        @on-update="updateHandle"
+      />
+    </setting-item-box>
+    <n-timeline>
+      <n-timeline-item type="info" title="数据结构">
+        <n-table striped>
+          <thead>
+            <tr>
+              <th>字段</th>
+              <th>映射</th>
+              <th>状态</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) in dataStructure" :key="index">
+              <td>{{ item.field }}</td>
+              <td>{{ item.mapping }}</td>
+              <td>
+                <n-space>
+                  <n-badge
+                    dot
+                    :type="item.result ? 'success' : 'error'"
+                  ></n-badge>
+                  <n-text>匹配{{ item.result ? '成功' : '失败' }}</n-text>
+                </n-space>
+              </td>
+            </tr>
+          </tbody>
+        </n-table>
+      </n-timeline-item>
+      <n-timeline-item type="success" title="静态数据">
+        <n-code
+          v-for="(item, index) in code"
+          :key="index"
+          :code="item.data"
+          language="json"
+        ></n-code>
+      </n-timeline-item>
+    </n-timeline>
   </div>
 </template>
 
-<script setup lang="ts" >
+<script setup lang="ts">
+import { ref, toRaw } from 'vue'
+import { SettingItemBox } from '@/components/ChartItemSetting/index'
+import { RequestDataTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { useTargetData } from '../hooks/useTargetData.hook'
 
+const { targetData } = useTargetData()
+
+const code = toRaw((targetData.value.option as any).series)
+
+const selcetOpeions = [
+  {
+    label: '静态数据',
+    value: RequestDataTypeEnum.STATIC
+  },
+  {
+    label: '动态请求',
+    value: RequestDataTypeEnum.AJAX
+  }
+]
+
+const dataStructure = ref([
+  {
+    // 字段
+    field: 'x',
+    // 映射
+    mapping: 'xData',
+    // 结果
+    result: true
+  },
+  {
+    // 字段
+    field: 'y',
+    // 映射
+    mapping: 'yData',
+    // 结果
+    result: true
+  }
+])
+
+const updateHandle = (value: any) => {
+  console.log(value)
+}
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue b/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
index fcb4bedc..2f657b3e 100644
--- a/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
@@ -25,19 +25,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, Ref } from 'vue'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { GlobalSetting, PositionSetting, SizeSetting, StylesSetting } from '@/components/ChartItemSetting/index'
-import { CreateComponentType } from '@/packages/index.d'
 import { SettingItemBox } from '@/components/ChartItemSetting/index'
+import { useTargetData } from '../hooks/useTargetData.hook'
 
-const chartEditStore = useChartEditStore()
-
-const targetData: Ref<CreateComponentType> = computed(() => {
-  const list = chartEditStore.getComponentList
-  const targetIndex = chartEditStore.fetchTargetIndex()
-  return list[targetIndex]
-})
+const { targetData, chartEditStore } = useTargetData()
 
 </script>
 
diff --git a/src/views/chart/ContentConfigurations/components/hooks/useTargetData.hook.ts b/src/views/chart/ContentConfigurations/components/hooks/useTargetData.hook.ts
new file mode 100644
index 00000000..7347a78c
--- /dev/null
+++ b/src/views/chart/ContentConfigurations/components/hooks/useTargetData.hook.ts
@@ -0,0 +1,14 @@
+import { computed, Ref } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+// 获取当前对象数据
+export const useTargetData = () => {
+  const chartEditStore = useChartEditStore()
+  const targetData: Ref<CreateComponentType> = computed(() => {
+    const list = chartEditStore.getComponentList
+    const targetIndex = chartEditStore.fetchTargetIndex()
+    return list[targetIndex]
+  })
+  return { targetData, chartEditStore }
+}