feat: 整理配置方案

package.json

@@ -27,6 +27,7 @@
     "unplugin-element-plus": "^0.8.0",
     "vue": "^3.4.21",
     "vue-codemirror": "^6.1.1",
+    "vue-hooks-plus": "^2.2.0",
     "vue-router": "^4.3.3",
     "vuedraggable": "^4.1.0"
   },

pnpm-lock.yaml

@@ -59,6 +59,9 @@ dependencies:
   vue-codemirror:
     specifier: ^6.1.1
     version: 6.1.1(codemirror@6.0.1)(vue@3.4.27)
+  vue-hooks-plus:
+    specifier: ^2.2.0
+    version: 2.2.0(vue@3.4.27)
   vue-router:
     specifier: ^4.3.3
     version: 4.3.3(vue@3.4.27)
@@ -679,6 +682,10 @@ packages:
   /@types/estree@1.0.5:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
+  /@types/js-cookie@3.0.6:
+    resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==}
+    dev: false
+
   /@types/lodash-es@4.17.12:
     resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
     dependencies:
@@ -1002,6 +1009,17 @@ packages:
       load-tsconfig: 0.2.5
     dev: true
 
+  /call-bind@1.0.7:
+    resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-define-property: 1.0.0
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.4
+      set-function-length: 1.2.2
+    dev: false
+
   /chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -1109,6 +1127,20 @@ packages:
       ms: 2.1.2
     dev: true
 
+  /decode-uri-component@0.2.2:
+    resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==}
+    engines: {node: '>=0.10'}
+    dev: false
+
+  /define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-define-property: 1.0.0
+      es-errors: 1.3.0
+      gopd: 1.0.1
+    dev: false
+
   /delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -1175,6 +1207,18 @@ packages:
       prr: 1.0.1
     optional: true
 
+  /es-define-property@1.0.0:
+    resolution: {integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      get-intrinsic: 1.2.4
+    dev: false
+
+  /es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+    dev: false
+
   /es-module-lexer@1.5.3:
     resolution: {integrity: sha512-i1gCgmR9dCl6Vil6UKPI/trA69s08g/syhiDK9TG0Nf1RJjjFI+AzoWW7sPufzkgYAn861skuCwJa0pIIHYxvg==}
     dev: false
@@ -1239,6 +1283,11 @@ packages:
     dependencies:
       to-regex-range: 5.0.1
 
+  /filter-obj@1.1.0:
+    resolution: {integrity: sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /finalhandler@1.1.2:
     resolution: {integrity: sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==}
     engines: {node: '>= 0.8'}
@@ -1280,17 +1329,61 @@ packages:
     requiresBuild: true
     optional: true
 
+  /function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+    dev: false
+
+  /get-intrinsic@1.2.4:
+    resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      has-proto: 1.0.3
+      has-symbols: 1.0.3
+      hasown: 2.0.2
+    dev: false
+
   /glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
     dependencies:
       is-glob: 4.0.3
 
+  /gopd@1.0.1:
+    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
+    dependencies:
+      get-intrinsic: 1.2.4
+    dev: false
+
   /graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
     requiresBuild: true
     optional: true
 
+  /has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+    dependencies:
+      es-define-property: 1.0.0
+    dev: false
+
+  /has-proto@1.0.3:
+    resolution: {integrity: sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==}
+    engines: {node: '>= 0.4'}
+    dev: false
+
+  /has-symbols@1.0.3:
+    resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
+    engines: {node: '>= 0.4'}
+    dev: false
+
+  /hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      function-bind: 1.1.2
+    dev: false
+
   /he@1.2.0:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
@@ -1339,6 +1432,11 @@ packages:
   /is-what@3.14.1:
     resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
 
+  /js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
+    dev: false
+
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
     dev: false
@@ -1510,6 +1608,11 @@ packages:
     resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
     dev: false
 
+  /object-inspect@1.13.2:
+    resolution: {integrity: sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==}
+    engines: {node: '>= 0.4'}
+    dev: false
+
   /on-finished@2.3.0:
     resolution: {integrity: sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==}
     engines: {node: '>= 0.8'}
@@ -1582,6 +1685,23 @@ packages:
     requiresBuild: true
     optional: true
 
+  /qs@6.12.1:
+    resolution: {integrity: sha512-zWmv4RSuB9r2mYQw3zxQuHWeU+42aKi1wWig/j4ele4ygELZ7PEO6MM7rim9oAQH2A5MWfsAVf/jPvTPgCbvUQ==}
+    engines: {node: '>=0.6'}
+    dependencies:
+      side-channel: 1.0.6
+    dev: false
+
+  /query-string@7.1.3:
+    resolution: {integrity: sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==}
+    engines: {node: '>=6'}
+    dependencies:
+      decode-uri-component: 0.2.2
+      filter-obj: 1.1.0
+      split-on-first: 1.1.0
+      strict-uri-encode: 2.0.0
+    dev: false
+
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
@@ -1647,6 +1767,11 @@ packages:
     requiresBuild: true
     optional: true
 
+  /screenfull@5.2.0:
+    resolution: {integrity: sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /scroll-into-view-if-needed@2.2.31:
     resolution: {integrity: sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==}
     dependencies:
@@ -1665,10 +1790,32 @@ packages:
     hasBin: true
     dev: true
 
+  /set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.4
+      gopd: 1.0.1
+      has-property-descriptors: 1.0.2
+    dev: false
+
   /shallow-equal@1.2.1:
     resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==}
     dev: false
 
+  /side-channel@1.0.6:
+    resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.4
+      object-inspect: 1.13.2
+    dev: false
+
   /sortablejs@1.14.0:
     resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
     dev: false
@@ -1683,11 +1830,21 @@ packages:
     requiresBuild: true
     optional: true
 
+  /split-on-first@1.1.0:
+    resolution: {integrity: sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==}
+    engines: {node: '>=6'}
+    dev: false
+
   /statuses@1.5.0:
     resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==}
     engines: {node: '>= 0.6'}
     dev: true
 
+  /strict-uri-encode@2.0.0:
+    resolution: {integrity: sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==}
+    engines: {node: '>=4'}
+    dev: false
+
   /style-mod@4.1.2:
     resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
     dev: false
@@ -1851,6 +2008,21 @@ packages:
       vue: 3.4.27(typescript@5.4.5)
     dev: false
 
+  /vue-hooks-plus@2.2.0(vue@3.4.27):
+    resolution: {integrity: sha512-Zad8X7hsddVGtNizYVeAFp35N8Y82IOrwWfy1GgkOZwg/hhYs/oEjPBtTU6FV4fOGEpJ7trP2MffRO5J1iohHw==}
+    peerDependencies:
+      vue: ^3.2.25
+    dependencies:
+      '@types/js-cookie': 3.0.6
+      '@vue/devtools-api': 6.6.3
+      js-cookie: 3.0.5
+      lodash: 4.17.21
+      qs: 6.12.1
+      query-string: 7.1.3
+      screenfull: 5.2.0
+      vue: 3.4.27(typescript@5.4.5)
+    dev: false
+
   /vue-router@4.3.3(vue@3.4.27):
     resolution: {integrity: sha512-8Q+u+WP4N2SXY38FDcF2H1dUEbYVHVPtPCPZj/GTZx8RCbiB8AtJP9+YIxn4Vs0svMTNQcLIzka4GH7Utkx9xQ==}
     peerDependencies:

src/components/Charts/Bar/BasicBar/src/Config.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="config-tab">
     <ElRadioGroup v-model="activeTab">
-      <ElRadioButton label="1">数据</ElRadioButton>
-      <ElRadioButton label="2">样式</ElRadioButton>
+      <ElRadioButton value="1">数据</ElRadioButton>
+      <ElRadioButton value="2">样式</ElRadioButton>
     </ElRadioGroup>
   </div>
 

src/components/Charts/Bar/BasicBar/src/index.vue

@@ -3,13 +3,14 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, computed } from "vue";
+import { defineProps } from "vue";
 import Echarts from '@/components/Charts/Echarts.vue';
 import { basicBarProps } from "./props";
-import { omit } from 'lodash';
+import { useChartOptions } from "@/components/Charts/hooks/useChartOptions";
 
 const props = defineProps(basicBarProps);
-const options = computed(() => omit(props, ['width', 'height', ]));
+const { options } = useChartOptions(props);
+
 </script>
 
 <style scoped></style>

src/components/Charts/Bar/BasicBar/src/props.ts

@@ -1,5 +1,7 @@
 import { type PropType } from "vue";
 import { EChartsOption } from "echarts";
+import { getNormalizedChart } from "@/utils/common";
+import { dataSource } from "@/utils/common";
 
 export const basicBarProps = {
   width: {
@@ -10,6 +12,7 @@ export const basicBarProps = {
     type: Number as PropType<number>,
     default: 260,
   },
+  dataSource,
   // 标题
   title: {
     type: Object as PropType<EChartsOption["title"]>,
@@ -46,6 +49,10 @@ export const basicBarProps = {
   dataset: {
     type: Object as PropType<EChartsOption["dataset"]>,
   },
+  // color
+  color: {
+    type: Object as PropType<EChartsOption["color"]>
+  }
 };
 
 export const defaultPropsValue: EChartsOption = {
@@ -55,57 +62,27 @@ export const defaultPropsValue: EChartsOption = {
       height: 260,
     },
   },
-  props: {
+  props: getNormalizedChart({
     title: {
       text: "柱状图标题",
-      left: "center",
-      top: 8,
-      textStyle: {
-        color: "#fff",
-        fontSize: 16,
-      },
-    },
-    legend: {
-      textStyle: {
-        color: "#fff",
-      },
-      top: 32,
     },
-    grid: {
-      bottom: 34,
-      right: 20,
-      top: 60,
-    },
-    tooltip: {},
     xAxis: {
-      type: "category",
-      axisLabel: {
-        color: "#9fadbf",
-      },
+      data: ['轴标签A', '轴标签B', '轴标签C', '轴标签D']
     },
-    yAxis: {
-      axisLabel: {
-        color: "#9fadbf",
+  }),
+  dataSource: {
+    xData: ['轴标签A', '轴标签B', '轴标签C', '轴标签D'],
+    series: [
+      {
+        type: 'bar',
+        name: '系列1',
+        data: [89.3, 92.1, 94.4, 85.4]
       },
-      splitLine: {
-        lineStyle: {
-          type: "dashed",
-          color: "#36485f",
-        },
+      {
+        type: 'bar',
+        name: '系列2',
+        data: [95.8, 89.4, 91.2, 76.9]
       },
-    },
-    series: [
-      { type: "bar", itemStyle: { color: "#1890ff" } },
-      { type: "bar", itemStyle: { color: "#2fc25b" } },
-    ],
-    dataset: {
-      dimensions: ["serie", "系列1", "系列2"],
-      source: [
-        { serie: "轴标签A", 系列1: 43.3, 系列2: 85.8 },
-        { serie: "轴标签B", 系列1: 43.3, 系列2: 85.8 },
-        { serie: "轴标签C", 系列1: 43.3, 系列2: 85.8 },
-        { serie: "轴标签D", 系列1: 43.3, 系列2: 85.8 },
-      ],
-    },
-  },
+    ]
+  }
 };

src/components/Charts/DataConfig.vue

@@ -1,19 +1,19 @@
 <template>
   <Form size="small" layout="horizontal" :model="formModel" :label-col="{span: 6}">
-    <Form.Item label="数据类型">
-      <RadioGroup v-model:value="formModel.dataSourceType">
-        <Radio :value="DataSourceType.STATIC">静态数据</Radio>
-        <Radio :value="DataSourceType.API">接口</Radio>
-      </RadioGroup>
+    <Form.Item label="类型">
+      <Select v-model:value="formModel.sourceType">
+        <SelectOption :value="DataSourceType.STATIC">静态数据</SelectOption>
+        <SelectOption :value="DataSourceType.API">动态数据</SelectOption>
+      </Select>
     </Form.Item>
     <!-- 静态数据 -->
-    <template v-if="formModel.dataSourceType === DataSourceType.STATIC">
-      <Form.Item label="数据源">
-
+    <template v-if="formModel.sourceType === DataSourceType.STATIC">
+      <Form.Item label="数据">
+        <Button type="default" size="small" @click="handleStaticData">编辑</Button>
       </Form.Item>
     </template>
     <!-- 接口 -->
-    <template v-else-if="formModel.dataSourceType === DataSourceType.API">
+    <template v-else-if="formModel.sourceType === DataSourceType.API">
       <Form.Item label="接口地址" prop="url">
         <Input.TextArea placeholder="请输入接口地址"></Input.TextArea>
       </Form.Item>
@@ -24,33 +24,66 @@
         </RadioGroup>
       </Form.Item>
       <Form.Item label="请求参数">
-        <Button type="default">编辑</Button>
-        <CodeEditorModal visible/>
+        <Button type="default" size="small">编辑</Button>
       </Form.Item>
       <Form.Item label="请求头">
-        <Button type="default">编辑</Button>
+        <Button type="default" size="small">编辑</Button>
       </Form.Item>
       <Form.Item label="刷新时间">
         <InputNumber :min="0" :max="1000" />
       </Form.Item>
       <Form.Item label="数据处理">
-        <Button type="default">编辑</Button>
+        <Button type="default" size="small">编辑</Button>
       </Form.Item>
     </template>
   </Form>
+  <CodeEditorModal ref="codeEditorRef" title="编辑数据"/>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { Form, RadioGroup, Radio, Input, Button, InputNumber } from 'ant-design-vue';
+import type { Ref } from 'vue';
+import { Form, RadioGroup, Radio, Input, Button, InputNumber, Select, SelectOption } from 'ant-design-vue';
 import { DataSourceType } from '@/enum';
-import { CodeEditorModal } from '@/components/CodeEditor';
+import { CodeEditorModal, type CodeEditorModalInstance } from '@/components/CodeEditor';
+
 
+/**
+ * 通用数据data约定内容结构
+ * {
+ *  xData: ['x轴标签A', 'x轴标签B', 'x轴标签C', 'x轴标签D'],
+ *  yData: ['y轴数据A', 'y轴数据B', 'y轴数据C', 'y轴数据D'],
+ * // 根据不同类型的图表配置不同的series
+ *  series: [
+ *    {
+ *      name: '系列A',
+ *      data: [10, 20, 30, 40]
+ *    },
+ *    {
+ *      name: '系列B',
+ *      data: [10, 20, 30, 40]
+ *    }
+ *  ]
+ * }
+ */
 const formModel = ref({
-  dataSourceType: DataSourceType.STATIC,
+  sourceType: DataSourceType.STATIC,
+  // 静态数据相关
+  data: [],
+  // 接口相关
   url: '',
   method: 'GET',
+  params: '',
+  headers: '',
+  refreshTime: 0,
+  // 数据处理
+  dataProcess: () => {},
 })
+
+const codeEditorRef = ref<Ref<CodeEditorModalInstance> | null>(null);
+const handleStaticData = () => {
+  codeEditorRef.value?.open();
+}
 </script>
 
 <style scoped>

src/components/Charts/hooks/useChartOptions.ts

@@ -0,0 +1,18 @@
+import { computed, watch, ref } from "vue";
+import { omit } from 'lodash';
+import { EChartsOption } from "echarts";
+import { useRequest } from "vue-hooks-plus";
+
+export const useChartOptions = (props: Record<string, any>) => {
+  const options = ref<EChartsOption>(omit(props, ['width', 'height', 'dataSource']) as EChartsOption);
+
+  const { run, refresh, cancel, data, loading} = useRequest(props.dataSource.url, {
+    defaultParams: props.dataSource.params,
+    manual: false
+  })
+
+  return {
+    options,
+    loading
+  }
+}

src/components/CodeEditor/index.ts

@@ -1,5 +1,11 @@
 import CodeEditorModal from './src/index.vue';
 
+export type CodeEditorModalInstance = {
+  open: () => void;
+  close: () => void;
+  getCode: () => string;
+};
+
 export {
-  CodeEditorModal
+  CodeEditorModal,
 }

src/components/CodeEditor/src/Editor.vue

@@ -7,6 +7,7 @@
     :auto-focus="true"
     :indent-with-tab="true"
     :extensions="[javascript(), oneDark]"
+    :model-value="modelValue"
   />
 </template>
 
@@ -17,6 +18,7 @@ import { oneDark } from '@codemirror/theme-one-dark';
 import { javascript } from '@codemirror/lang-javascript';
 
 const editorRef = ref(null);
+const modelValue = ref('');
 </script>
 
 <style scoped>

src/components/CodeEditor/src/index.vue

@@ -4,27 +4,31 @@
     :title="title"
     :width="800"
   >
-    <Editor />
+    <Editor code="hello world"/>
   </Modal>
 </template>
 
 <script setup lang="ts">
 import { Modal  } from 'ant-design-vue';
-import { ref, defineProps, withDefaults, watch } from 'vue';
+import { ref, defineProps, withDefaults, watch, defineExpose } from 'vue';
 import Editor from './Editor.vue';
 
 interface IProp {
-  visible: boolean;
-  title: string;
+  title?: string;
 }
 const props = withDefaults(defineProps<IProp>(), {
-  visible: false,
   title: '编辑',
+  code: ''
 });
-const open = ref(props.visible);
+const emit = defineEmits(['update:modelValue']);
+const open = ref(false);
 
-watch(() => props.visible, (val) => {
-  open.value = val;
+defineExpose({
+  open: () => {open.value = true},
+  close: () => {open.value = false},
+  getCode: () => {
+    return props.code;
+  }
 });
 </script>
 

src/components/CusForm/src/BackgroundSelect.vue

@@ -74,7 +74,7 @@ const handleChangeColor = (type: any) => {
   display: flex;
   align-items: center;
   margin: 12px 0;
-  ::v-deep .el-color-picker {
+  :deep .el-color-picker {
     margin-right: 8px;
   }
 }

src/components/CusForm/src/ColorSelect.vue

@@ -50,7 +50,7 @@ watch(
   display: flex;
   align-items: center;
   margin: 12px 0;
-  ::v-deep .el-color-picker {
+  :deep .el-color-picker {
     margin-right: 8px;
   }
 }

src/config/chartDefaultConfig.ts

@@ -0,0 +1,51 @@
+import { EChartsOption } from "echarts"
+import { colorPreset } from "./colorDefaultConfig"
+
+// 图表默认配置项
+export const chartDefaultConfig: EChartsOption = {
+  // 调色盘-预设颜色
+  color: colorPreset[0].color,
+  // 标题
+  title: {
+    left: "center",
+    top: 8,
+    textStyle: {
+      color: "#fff",
+      fontSize: 16,
+    },
+  },
+  // 图例
+  legend: {
+    textStyle: {
+      color: "#fff",
+    },
+    top: 32,
+  },
+  // 布局
+  grid: {
+    bottom: 34,
+    right: 20,
+    top: 60,
+  },
+  // 提示框
+  tooltip: {},
+  // x轴
+  xAxis: {
+    type: "category",
+    axisLabel: {
+      color: "#9fadbf",
+    },
+  },
+  // y轴
+  yAxis: {
+    axisLabel: {
+      color: "#9fadbf",
+    },
+    splitLine: {
+      lineStyle: {
+        type: "dashed",
+        color: "#36485f",
+      },
+    },
+  },
+}

src/config/colorDefaultConfig.ts

@@ -0,0 +1,23 @@
+// 颜色预设集合
+export const colorPreset = [
+  {
+    name: '清新',
+    color: ['#00a8e1', '#99cc00', '#e30039', '#fcd300', '#800080']
+  },
+  {
+    name: '复古',
+    color: ['#FFA69E', '#FAE3D9', '#B8F2E6', '#56E39F', '#3A837D']
+  },
+  {
+    name: '商务',
+    color: ['#194f97', '#555555', '#bd6b08', '#00686b', '#c82d31']
+  },
+  {
+    name: '经典',
+    color: ['#002c53', '#ffa510', '#0c84c6', '#ffffff', '#f74d4d']
+  },
+  {
+    name: '怀旧',
+    color: ['#3b6291', '#943c39', '#779043', '#624c7c', '#388498']
+  }
+]

src/config/containerDefaultConfig.ts

@@ -0,0 +1,55 @@
+// 组件容器基本设置
+export const containerDefaultConfig = {
+  /* ===================================== 通用容器样式 ============================================ */
+  style: {
+    background: {
+      type: "color", // none, color, image
+      color: "rgba(0, 0, 0, 0.1)",
+      image: "",
+      fillType: "",
+    },
+    border: {
+      type: "none",
+      color: "#000",
+      width: 0,
+    },
+    borderRadius: {
+      type: "all", // all, custom
+      value: 2, // 整体圆角值
+      unit: "px", // 单位
+      units: ["px", "%"], // 单位列表
+      topLeft: 0,
+      topRight: 0,
+      bottomLeft: 0,
+      bottomRight: 0,
+    },
+    boxShadow: {
+      enabled: false,
+      color: "#000",
+      offsetX: 0,
+      offsetY: 0,
+      blurRadius: 0,
+      spreadRadius: 0,
+      inset: false,
+    },
+    backdropFilter: {
+      enabled: false,
+      blur: 0,
+    }
+  },
+  /* ===================================== 通用容器属性 ============================================ */
+  props: {
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    rotateX: 0,
+    rotateY: 0,
+    rotateZ: 0,
+    opacity: 1,
+  },
+};

src/utils/common.ts

@@ -1,66 +1,40 @@
+import type { DataSource } from '#/echart';
 import { defaultsDeep } from "lodash";
-
-const containerSetting = {
-  /* ===================================== 通用容器样式 ============================================ */
-  style: {
-    background: {
-      type: "color", // none, color, image
-      color: "rgba(0, 0, 0, 0.1)",
-      image: "",
-      fillType: "",
-    },
-    border: {
-      type: "none",
-      color: "#000",
-      width: 0,
-    },
-    borderRadius: {
-      type: "all", // all, custom
-      value: 2, // 整体圆角值
-      unit: "px", // 单位
-      units: ["px", "%"], // 单位列表
-      topLeft: 0,
-      topRight: 0,
-      bottomLeft: 0,
-      bottomRight: 0,
-    },
-    boxShadow: {
-      enabled: false,
-      color: "#000",
-      offsetX: 0,
-      offsetY: 0,
-      blurRadius: 0,
-      spreadRadius: 0,
-      inset: false,
-    },
-    backdropFilter: {
-      enabled: false,
-      blur: 0,
-    }
-  },
-  /* ===================================== 通用容器属性 ============================================ */
-  props: {
-    width: 0,
-    height: 0,
-    x: 0,
-    y: 0,
-    paddingLeft: 0,
-    paddingRight: 0,
-    paddingTop: 0,
-    paddingBottom: 0,
-    rotateX: 0,
-    rotateY: 0,
-    rotateZ: 0,
-    opacity: 1,
-  },
-};
+import { containerDefaultConfig } from "@/config/containerDefaultConfig";
+import { chartDefaultConfig } from "@/config/chartDefaultConfig";
+import { EChartsOption } from "echarts";
+import { PropType } from "vue";
+import { DataSourceType } from "@/enum/index";
 
 /**
- * 获取归一化的容器组件属性
- *
+ * 获取容器组件属性
  *  @param {Record<string, any>} config - 传入属性
- *  @returns {Record<string, any>} - 返回归一化后的属性
+ *  @returns {Record<string, any>} - 返回与默认配置合并后的属性
  */
 export function getNormalizedContainer(config: Record<string, any>) {
-  return defaultsDeep(config, containerSetting);
+  return defaultsDeep(config, containerDefaultConfig);
+}
+
+/**
+ * 获取图表组件属性
+ *  @param {Record<string, any>} config - 传入属性
+ *  @returns {Record<string, any>} - 返回与默认配置合并后的属性
+ */
+export function getNormalizedChart(config: EChartsOption) {
+  return defaultsDeep(config, chartDefaultConfig);
+}
+
+// 图表组件数据来源prop
+export const dataSource = {
+  type: Object as PropType<DataSource>,
+  default: () => ({
+    sourceType: DataSourceType.STATIC,
+    data: [],
+    url: "",
+    method: "GET",
+    params: {},
+    headers: {},
+    refreshTime: 0,
+    dataProcess: () => [],
+  }),
 }

src/utils/request.ts

@@ -1,26 +0,0 @@
-import axios from 'axios';
-
-export const axiosInstance = axios.create({
-  baseURL: '',
-  timeout: 10000,
-});
-
-axiosInstance.interceptors.request.use(
-  (config) => {
-    return config;
-  },
-  (error) => {
-    return Promise.reject(error);
-  }
-);
-
-axiosInstance.interceptors.response.use(
-  (response) => {
-    return response;
-  },
-  (error) => {
-    return Promise.reject(error);
-  }
-);
-
-export default axiosInstance;

src/views/designer/component/ComponentLibary.vue

@@ -194,13 +194,13 @@ const handleDragEnd = () => {
   .custom-collapse-panel {
     border-radius: 0;
     background: #fff;
-    ::v-deep .ant-collapse-header {
+    :deep .ant-collapse-header {
       padding: 4px 16px;
       border-bottom: solid 1px #f0f0f0;
       background: @bg-color;
       font-size: 13px;
     }
-    ::v-deep .ant-collapse-content-box {
+    :deep .ant-collapse-content-box {
       padding: 16px;
       padding-bottom: 24px;
     }
@@ -228,7 +228,7 @@ const handleDragEnd = () => {
 
 .ant-menu-light {
   background: none;
-  ::v-deep {
+  :deep {
     .ant-menu-item:not(.ant-menu-item-selected):hover {
       background: #eff8ff;
     }
@@ -253,7 +253,7 @@ const handleDragEnd = () => {
     }
   }
 }
-::v-deep {
+:deep {
   .ant-layout-sider-trigger {
     background: none;
     color: #666;

types/echart.d.ts

@@ -0,0 +1,20 @@
+import { DataSourceType } from "@/enum/index";
+
+// chart数据源
+export interface DataSource {
+  // 类型
+  sourceType: DataSourceType.STATIC,
+  // 数据
+  data?: any[],
+  // 接口相关
+  url?: string,
+  // 请求方式
+  method?: 'GET' | 'POST',
+  // 请求参数
+  params?: any,
+  // 请求头
+  headers?: Record<string, any>,
+  refreshTime?: number,
+  // 数据处理
+  dataProcess: () => any[],
+}