From b840e2f09cb3b24cfb16670fa7e0b0e44dc8384a Mon Sep 17 00:00:00 2001
From: pengxiaotian <673923162@qq.com>
Date: Sun, 15 Jan 2023 16:52:29 +0800
Subject: [PATCH 01/10] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E9=A5=BC?=
 =?UTF-8?q?=E5=9B=BE=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/data/pie/basic-pie.json                | 37 +++++++++++++
 src/components/index.ts                       |  2 +
 src/components/pie/basic-pie/index.ts         | 11 ++++
 src/components/pie/basic-pie/src/basic-pie.ts | 55 +++++++++++++++++++
 src/components/pie/basic-pie/src/config.json  |  1 +
 src/components/pie/basic-pie/src/config.vue   |  3 +
 src/components/pie/basic-pie/src/index.vue    | 31 +++++++++++
 src/data/system-components.ts                 |  2 +-
 8 files changed, 141 insertions(+), 1 deletion(-)
 create mode 100644 public/data/pie/basic-pie.json
 create mode 100644 src/components/pie/basic-pie/index.ts
 create mode 100644 src/components/pie/basic-pie/src/basic-pie.ts
 create mode 100644 src/components/pie/basic-pie/src/config.json
 create mode 100644 src/components/pie/basic-pie/src/config.vue
 create mode 100644 src/components/pie/basic-pie/src/index.vue

diff --git a/public/data/pie/basic-pie.json b/public/data/pie/basic-pie.json
new file mode 100644
index 00000000..645e49eb
--- /dev/null
+++ b/public/data/pie/basic-pie.json
@@ -0,0 +1,37 @@
+[
+  {
+    "type": "分类一",
+    "value": 10,
+    "colorField": 100
+  },
+  {
+    "type": "分类二",
+    "value": 20,
+    "colorField": 200
+  },
+  {
+    "type": "分类三",
+    "value": 30,
+    "colorField": 300
+  },
+  {
+    "type": "分类四",
+    "value": 40,
+    "colorField": 400
+  },
+  {
+    "type": "分类五",
+    "value": 50,
+    "colorField": 500
+  },
+  {
+    "type": "分类六",
+    "value": 60,
+    "colorField": 600
+  },
+  {
+    "type": "分类七",
+    "value": 70,
+    "colorField": 700
+  }
+]
diff --git a/src/components/index.ts b/src/components/index.ts
index edda4671..db2454df 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -18,6 +18,7 @@ import VDecoration from './media/decoration'
 import VMainImg from './media/main-img'
 import VDatePicker from './other/date-picker'
 import VTableBar from './table/table-bar'
+import VBasicPie from './pie/basic-pie'
 // -- prepend placeholder 1 --
 
 const components = [
@@ -38,6 +39,7 @@ const components = [
   VMainImg,
   VDatePicker,
   VTableBar,
+  VBasicPie,
 // -- prepend placeholder 2 --
 ]
 
diff --git a/src/components/pie/basic-pie/index.ts b/src/components/pie/basic-pie/index.ts
new file mode 100644
index 00000000..7949f956
--- /dev/null
+++ b/src/components/pie/basic-pie/index.ts
@@ -0,0 +1,11 @@
+import type { App } from 'vue'
+import type { SFCWithInstall } from '@/utils/types'
+import { loadAsyncComponent } from '@/utils/async-component'
+import BasicPie from './src/index.vue'
+
+BasicPie.install = (app: App): void => {
+  app.component('VBasicPie', BasicPie)
+  app.component('VBasicPieProp', loadAsyncComponent(() => import('./src/config.vue')))
+}
+
+export default BasicPie as SFCWithInstall<typeof BasicPie>
diff --git a/src/components/pie/basic-pie/src/basic-pie.ts b/src/components/pie/basic-pie/src/basic-pie.ts
new file mode 100644
index 00000000..2680c86d
--- /dev/null
+++ b/src/components/pie/basic-pie/src/basic-pie.ts
@@ -0,0 +1,55 @@
+import { DatavComponent } from '@/components/_models/datav-component'
+import {
+  ApiConfigMap, ApiDataConfigMap,
+  setApiConfig, setApiData,
+} from '@/components/_models/data-source'
+import { createField } from '@/components/_models/data-field'
+import { DataEventConfig } from '@/components/_models/data-event'
+import { getStaticData } from '@/api/data'
+
+/**
+ * BasicPie
+ */
+export class BasicPie extends DatavComponent {
+  config = {}
+
+  apis: Partial<ApiConfigMap>
+  apiData: Partial<ApiDataConfigMap>
+  events: Record<string, DataEventConfig>
+  actions: Record<string, DataEventConfig>
+
+  constructor() {
+    super('BasicPie', { w: 400, h: 240 })
+
+    this.initData()
+  }
+
+  initData() {
+    const fields = [
+      createField('value', { description: '', optional: true }),
+    ]
+
+    setApiConfig(this, {
+      fields: Object.assign({}, ...fields),
+    })
+
+    setApiData(this)
+
+    this.events = {}
+    this.actions = {}
+
+    return this
+  }
+
+  async loadData() {
+    try {
+      const path = 'pie/basic-pie'
+      const res = await getStaticData(this.id, path)
+      this.apiData.source.config.data = JSON.stringify(res.data)
+    } catch (error) {
+      throw error
+    }
+  }
+}
+
+export default BasicPie
diff --git a/src/components/pie/basic-pie/src/config.json b/src/components/pie/basic-pie/src/config.json
new file mode 100644
index 00000000..fe51488c
--- /dev/null
+++ b/src/components/pie/basic-pie/src/config.json
@@ -0,0 +1 @@
+[]
diff --git a/src/components/pie/basic-pie/src/config.vue b/src/components/pie/basic-pie/src/config.vue
new file mode 100644
index 00000000..7b8b46cb
--- /dev/null
+++ b/src/components/pie/basic-pie/src/config.vue
@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>
diff --git a/src/components/pie/basic-pie/src/index.vue b/src/components/pie/basic-pie/src/index.vue
new file mode 100644
index 00000000..023dd886
--- /dev/null
+++ b/src/components/pie/basic-pie/src/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="datav-wrapper">
+    BasicPie
+  </div>
+</template>
+
+<script lang='ts' setup>
+import { computed, toRef } from 'vue'
+import { useDataCenter, getFieldMap } from '@/components/_mixins/use-data-center'
+import { useApiStore } from '@/store/api'
+import { BasicPie } from './basic-pie'
+
+const props = defineProps<{
+  com: BasicPie
+}>()
+
+const apiStore = useApiStore()
+useDataCenter(props.com)
+
+const config = toRef(props.com, 'config')
+const attr = toRef(props.com, 'attr')
+
+const dv_data = computed(() => {
+  return apiStore.dataMap[props.com.id]?.source ?? {}
+})
+
+const dv_field = computed(() => {
+  return getFieldMap(props.com.apis.source.fields)
+})
+
+</script>
diff --git a/src/data/system-components.ts b/src/data/system-components.ts
index 1b921e23..8ccdf762 100644
--- a/src/data/system-components.ts
+++ b/src/data/system-components.ts
@@ -96,7 +96,7 @@ export const pie: ComDataType = {
       alias: '基本饼图',
       img: `${import.meta.env.VITE_APP_CDN}/com/basic-pie-160-116.png`,
       thum: `${import.meta.env.VITE_APP_CDN}/com-thum/basic-pie-368-208.png`,
-      used: false,
+      used: true,
     }, {
       name: 'VPieOneValue',
       alias: '指标占比饼图',

From 94feb0039c89aa6b4b0a95f0ed33f73a276eb683 Mon Sep 17 00:00:00 2001
From: pengxiaotian <673923162@qq.com>
Date: Mon, 16 Jan 2023 01:59:53 +0800
Subject: [PATCH 02/10] =?UTF-8?q?revert:=20=E9=87=8D=E5=86=99=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |  10 +-
 datav-cli-ui/assets/templates/config-tpl.hbs  |   6 +-
 .../templates/partials/prop-component-tpl.hbs | 130 ++-
 .../templates/partials/prop-config-tpl.hbs    |   2 +-
 .../templates/partials/prop-data-tpl.hbs      |  10 +-
 datav-cli-ui/components/config-form-item.vue  |  48 +-
 datav-cli-ui/components/config-form.vue       |   2 +
 datav-cli-ui/components/preview-prop-item.vue |  78 +-
 datav-cli-ui/components/preview-prop.vue      |   2 +
 datav-cli-ui/domains/prop-data.ts             |  11 +-
 datav-cli-ui/pages/attr-settings.vue          |   5 +
 datav-cli-ui/ui-components/index.ts           |   2 +
 src/api/data.ts                               |   6 +-
 src/components/_models/border-image.ts        |   1 +
 src/components/bar/basic-bar/src/basic-bar.ts |  14 +-
 src/components/bar/basic-bar/src/config.json  | 874 +++++++++++-----
 src/components/bar/basic-bar/src/config.vue   | 207 ++--
 src/components/bar/basic-bar/src/index.vue    |   4 +-
 .../button/full-screen/src/config.json        |  27 +-
 .../button/full-screen/src/config.vue         |  29 +-
 .../button/full-screen/src/full-screen.ts     |   2 -
 .../chart/word-cloud/src/config.json          | 172 +++-
 .../chart/word-cloud/src/config.vue           |  84 +-
 .../chart/word-cloud/src/word-cloud.ts        |  12 -
 .../line/basic-line/src/basic-line.ts         |  12 +-
 .../line/basic-line/src/config.json           | 934 ++++++++++++------
 src/components/line/basic-line/src/config.vue | 274 +++--
 src/components/line/basic-line/src/index.vue  |   4 +-
 .../map/china2d/src/china2d-area/config.json  |  45 +-
 .../map/china2d/src/china2d-area/config.vue   |  54 +-
 .../china2d/src/china2d-bubbles/config.json   |  49 +-
 .../china2d/src/china2d-bubbles/config.vue    |  25 +-
 .../map/china2d/src/china2d-bubbles/index.ts  |  20 +-
 .../src/china2d-flyingline/config.json        |  19 +-
 .../china2d/src/china2d-flyingline/config.vue |   1 +
 .../china2d/src/china2d-flyingline/index.ts   |   3 +-
 src/components/map/china2d/src/config.json    |  64 +-
 src/components/map/china2d/src/config.vue     |  37 +-
 src/components/media/bg-box/src/bg-box.ts     |   3 +-
 src/components/media/bg-box/src/config.json   | 142 ++-
 src/components/media/bg-box/src/config.vue    | 112 +--
 .../media/border-box/src/border-box.ts        |   3 +-
 .../media/border-box/src/config.json          |  14 +-
 .../media/border-box/src/config.vue           |  25 +-
 .../media/decoration/src/config.json          |  17 +-
 .../media/decoration/src/config.vue           |  36 +-
 .../media/decoration/src/decoration.ts        | 344 ++++---
 src/components/media/decoration/src/index.vue |   4 +-
 src/components/media/main-img/src/config.json |  54 +-
 src/components/media/main-img/src/config.vue  |  50 +-
 .../other/date-picker/src/config.json         | 162 ++-
 .../other/date-picker/src/config.vue          |  25 +-
 src/components/pie/basic-pie/src/basic-pie.ts |  19 +-
 src/components/pie/basic-pie/src/config.json  | 434 +++++++-
 src/components/pie/basic-pie/src/config.vue   |  32 +-
 .../table/carousel-table/src/config.json      |   2 +-
 .../table/carousel-table/src/config.vue       |  67 +-
 .../table/table-bar/src/config.json           |   4 +-
 src/components/table/table-bar/src/config.vue |  50 +-
 .../text/main-title/src/config.json           | 102 +-
 src/components/text/main-title/src/config.vue |  36 +-
 src/components/text/marquee/src/config.vue    |   8 +-
 .../text/number-title-flop/src/config.json    | 264 ++++-
 .../text/number-title-flop/src/config.vue     |  51 +-
 src/components/text/paragraph/src/config.json |  62 +-
 src/components/text/paragraph/src/config.vue  |  30 +-
 src/components/text/timer/src/config.json     |  77 +-
 src/components/text/timer/src/config.vue      |  61 +-
 src/components/ui/checkbox/index.ts           |   2 +
 src/components/ui/checkbox/src/index.vue      |  67 ++
 .../ui/field-collapse/src/index.vue           |   2 +-
 src/components/ui/field/src/index.vue         |   2 +-
 src/components/ui/index.ts                    |   2 +
 src/components/ui/input-number/src/index.vue  |  15 +-
 src/components/ui/input/src/index.vue         |  15 +-
 src/components/ui/radio-group/index.ts        |   2 +
 src/components/ui/radio-group/src/index.vue   |  94 ++
 src/components/ui/select-image/src/index.vue  |  15 +-
 src/components/ui/select-shape/src/index.vue  |  15 +-
 .../ui/select-suggest/src/index.vue           |  15 +-
 src/components/ui/select/src/index.vue        |  15 +-
 src/components/ui/slider-range/src/index.vue  |  15 +-
 src/components/ui/slider/src/index.vue        |  15 +-
 src/components/ui/switch/src/index.vue        |  29 +-
 src/components/ui/upload-image/src/index.vue  |  15 +-
 src/data/system-components.ts                 |   6 +-
 src/styles/checkbox.scss                      |   7 +
 src/styles/field.scss                         |   1 -
 src/styles/index.scss                         |   2 +
 src/styles/input.scss                         |  10 +
 src/styles/radio-group.scss                   |   7 +
 src/styles/switch.scss                        |   7 +
 src/styles/themes/naive-ui-theme-overrides.ts |   2 +-
 93 files changed, 3992 insertions(+), 1954 deletions(-)
 create mode 100644 src/components/ui/checkbox/index.ts
 create mode 100644 src/components/ui/checkbox/src/index.vue
 create mode 100644 src/components/ui/radio-group/index.ts
 create mode 100644 src/components/ui/radio-group/src/index.vue
 create mode 100644 src/styles/checkbox.scss
 create mode 100644 src/styles/switch.scss

diff --git a/README.md b/README.md
index 289f10e3..5d062e4e 100644
--- a/README.md
+++ b/README.md
@@ -69,15 +69,15 @@
 
 - 基础组件库
 - [ ] 柱图
-  * [x] 基本柱状图
-  * [ ] 弧形柱图
+  * [x] 柱状图
+  * [ ] 玉环图
   * [ ] 折线柱图
-  * [ ] 水平基本柱状图
+  * [ ] 条形图
 - [ ] 折线
-  * [x] 基本折线图
+  * [x] 折线图
   * [ ] 区域图
 - [ ] 饼图
-  * [ ] 基本饼图
+  * [ ] 饼图
   * [ ] 指标占比图
 - [ ] 关系
   * [ ] 树图
diff --git a/datav-cli-ui/assets/templates/config-tpl.hbs b/datav-cli-ui/assets/templates/config-tpl.hbs
index 8961058e..1fc8ab5b 100644
--- a/datav-cli-ui/assets/templates/config-tpl.hbs
+++ b/datav-cli-ui/assets/templates/config-tpl.hbs
@@ -14,11 +14,13 @@
 
 <script lang='ts' setup>
 import { toRef } from 'vue'
+{{#if selectOpts.length}}
 import {
   {{#each selectOpts}}
   {{this}},
   {{/each}}
 } from '@/data/select-options'
+{{/if}}
 import { {{comName}} } from './{{fileName}}'
 
 const props = defineProps<{
@@ -27,7 +29,5 @@ const props = defineProps<{
 
 const config = toRef(props.com, 'config')
 
-{{> prop-data-tpl
-  configs=configs
-}}
+{{> prop-data-tpl configs=configs }}
 </script>
diff --git a/datav-cli-ui/assets/templates/partials/prop-component-tpl.hbs b/datav-cli-ui/assets/templates/partials/prop-component-tpl.hbs
index 866f6a5e..e21e4bcd 100644
--- a/datav-cli-ui/assets/templates/partials/prop-component-tpl.hbs
+++ b/datav-cli-ui/assets/templates/partials/prop-component-tpl.hbs
@@ -8,6 +8,9 @@
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
 {{else if (eq config.component componentTypes.number)}}
 <g-input-number
@@ -29,6 +32,9 @@
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
 {{else if (eq config.component componentTypes.color)}}
 <g-color-picker
@@ -40,53 +46,69 @@
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
 {{else if (eq config.component componentTypes.checkbox)}}
-<n-checkbox
+<g-checkbox
   {{#if (and judgeEnum config.whichEnum.field)}}
   v-if="{{getSlotPath path virtualPath}}.{{config.whichEnum.field}} === '{{config.whichEnum.value}}'"
   {{/if}}
-  v-model:checked="{{ getPath path virtualPath }}"
+  v-model="{{ getPath path virtualPath }}"
+  {{#if (getInlineMode config.displayMode)}}
+  inline="{{config.displayMode}}"
+  label="{{config.alias}}"
+  {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
 {{else if (eq config.component componentTypes.switch)}}
-<n-switch
+<g-switch
   {{#if (and judgeEnum config.whichEnum.field)}}
   v-if="{{getSlotPath path virtualPath}}.{{config.whichEnum.field}} === '{{config.whichEnum.value}}'"
   {{/if}}
-  v-model:value="{{ getPath path virtualPath }}"
+  v-model="{{ getPath path virtualPath }}"
+  {{#if (getInlineMode config.displayMode)}}
+  inline="{{config.displayMode}}"
+  label="{{config.alias}}"
+  {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
-{{else if (eq config.component componentTypes.radio)}}
-<n-radio-group
+{{else if (eq config.component componentTypes.radioBase)}}
+<g-radio-group
   {{#if (and judgeEnum config.whichEnum.field)}}
   v-if="{{getSlotPath path virtualPath}}.{{config.whichEnum.field}} === '{{config.whichEnum.value}}'"
   {{/if}}
-  v-model:value="{{ getPath path virtualPath }}"
-  size="small"
->
-  <n-radio-button
-    v-for="pair in pairData{{config.id}}"
-    :key="pair.key"
-    :value="pair.key"
-  >
-    \{{ pair.value }}
-  </n-radio-button>
-</n-radio-group>
-{{else if (eq config.component componentTypes.radioBase)}}
-<n-radio-group
+  v-model="{{ getPath path virtualPath }}"
+  {{#if (getInlineMode config.displayMode)}}
+  inline="{{config.displayMode}}"
+  label="{{config.alias}}"
+  {{/if}}
+  :data="pairData{{config.id}}"
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
+/>
+{{else if (eq config.component componentTypes.radio)}}
+<g-radio-group
   {{#if (and judgeEnum config.whichEnum.field)}}
   v-if="{{getSlotPath path virtualPath}}.{{config.whichEnum.field}} === '{{config.whichEnum.value}}'"
   {{/if}}
-  v-model:value="{{ getPath path virtualPath }}"
-  size="small"
->
-  <n-radio
-    v-for="pair in pairData{{config.id}}"
-    :key="pair.key"
-    :value="pair.key"
-  >
-    \{{ pair.value }}
-  </n-radio>
-</n-radio-group>
+  v-model="{{ getPath path virtualPath }}"
+  {{#if (getInlineMode config.displayMode)}}
+  inline="{{config.displayMode}}"
+  label="{{config.alias}}"
+  {{/if}}
+  :data="pairData{{config.id}}"
+  is-button
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
+/>
 {{else if (eq config.component componentTypes.slider)}}
 <g-slider
   {{#if (and judgeEnum config.whichEnum.field)}}
@@ -107,6 +129,9 @@
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
 {{else if (eq config.component componentTypes.sliderRange)}}
 <g-slider-range
@@ -125,6 +150,9 @@
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
 {{else if (eq config.component componentTypes.select)}}
 <g-select
@@ -137,6 +165,9 @@
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
 {{else if (eq config.component componentTypes.uploadImage)}}
 <g-upload-image
@@ -148,6 +179,9 @@
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
 {{else if (eq config.component componentTypes.selectImage)}}
 <g-select-image
@@ -160,6 +194,9 @@
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
 {{else if (eq config.component componentTypes.selectSuggest)}}
 <g-select-suggest
@@ -173,6 +210,9 @@
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
 {{else if (eq config.component componentTypes.echartIcon)}}
 <g-select-shape
@@ -185,24 +225,27 @@
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
 {{else if (hasSelectOpts selectOpts config.component)}}
 {{#if config.flatValue}}
-<n-radio-group
+<g-radio-group
   {{#if (and judgeEnum config.whichEnum.field)}}
   v-if="{{getSlotPath path virtualPath}}.{{config.whichEnum.field}} === '{{config.whichEnum.value}}'"
   {{/if}}
-  v-model:value="{{ getPath path virtualPath }}"
-  size="small"
->
-  <n-radio-button
-    v-for="em in {{config.component}}s"
-    :key="em.id"
-    :value="em.id"
-  >
-    \{{ em.value }}
-  </n-radio-button>
-</n-radio-group>
+  v-model="{{ getPath path virtualPath }}"
+  {{#if (getInlineMode config.displayMode)}}
+  inline="{{config.displayMode}}"
+  label="{{config.alias}}"
+  {{/if}}
+  :data="{{config.component}}s"
+  is-button
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
+/>
 {{else}}
 <g-select
   {{#if (and judgeEnum config.whichEnum.field)}}
@@ -214,6 +257,9 @@
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
 {{/if}}
 {{else}}
diff --git a/datav-cli-ui/assets/templates/partials/prop-config-tpl.hbs b/datav-cli-ui/assets/templates/partials/prop-config-tpl.hbs
index 0e75aef9..4d72493c 100644
--- a/datav-cli-ui/assets/templates/partials/prop-config-tpl.hbs
+++ b/datav-cli-ui/assets/templates/partials/prop-config-tpl.hbs
@@ -53,7 +53,7 @@
   label="{{item.config.alias}}"
   mode="layout"
   default-layout="{{item.config.layout}}"
-  :features="{{{enumsToTpl item.config.features}}}"
+  :features="{{enumsToTpl item.config.features}}"
   :list="{{getSlotPath item.path item.virtualPath}}.{{item.key}}"
   :min="{{item.config.min}}"
   :max="{{item.config.max}}"
diff --git a/datav-cli-ui/assets/templates/partials/prop-data-tpl.hbs b/datav-cli-ui/assets/templates/partials/prop-data-tpl.hbs
index 1dcf256b..bea1cb75 100644
--- a/datav-cli-ui/assets/templates/partials/prop-data-tpl.hbs
+++ b/datav-cli-ui/assets/templates/partials/prop-data-tpl.hbs
@@ -15,7 +15,11 @@ const enumData{{item.config.id}} = [
 ]
 
 {{/unless}}
-{{> prop-data-tpl
-  configs=item.children
-}}
+{{#if (includes item.config.features 'add')}}
+const handleAdd{{capitalize item.key}}Item = () => {
+  throw new Error('handleAdd{{capitalize item.key}}Item Not Implemented')
+}
+
+{{/if}}
+{{> prop-data-tpl configs=item.children}}
 {{/each}}
diff --git a/datav-cli-ui/components/config-form-item.vue b/datav-cli-ui/components/config-form-item.vue
index a8178bd8..1671ca44 100644
--- a/datav-cli-ui/components/config-form-item.vue
+++ b/datav-cli-ui/components/config-form-item.vue
@@ -12,30 +12,25 @@
     v-model="strValue"
     size="medium"
   />
-  <n-checkbox
+  <g-checkbox
     v-else-if="componentType === componentTypes.checkbox"
-    v-model:checked="boolValue"
+    v-model="boolValue"
   />
-  <n-switch
+  <g-switch
     v-else-if="componentType === componentTypes.switch"
-    v-model:value="boolValue"
+    v-model="boolValue"
   />
-  <n-radio-group
-    v-else-if="componentType === componentTypes.radio"
-    v-model:value="strValue"
-  >
-    <n-radio-button v-for="pair in pairs" :key="pair.key" :value="pair.key">
-      {{ pair.value }}
-    </n-radio-button>
-  </n-radio-group>
-  <n-radio-group
+  <g-radio-group
     v-else-if="componentType === componentTypes.radioBase"
-    v-model:value="strValue"
-  >
-    <n-radio v-for="pair in pairs" :key="pair.key" :value="pair.key">
-      {{ pair.value }}
-    </n-radio>
-  </n-radio-group>
+    v-model="strValue"
+    :data="pairs"
+  />
+  <g-radio-group
+    v-else-if="componentType === componentTypes.radio"
+    v-model="strValue"
+    :data="pairs"
+    is-button
+  />
   <g-slider
     v-else-if="componentType === componentTypes.slider"
     v-model="numValue"
@@ -74,14 +69,12 @@
     :data="pairs"
   />
   <template v-else-if="AllOptionKeys.includes(componentType + 's')">
-    <n-radio-group
+    <g-radio-group
       v-if="flatValue"
-      v-model:value="strValue"
-    >
-      <n-radio-button v-for="em in selectOptions" :key="em.id" :value="em.id">
-        {{ em.value }}
-      </n-radio-button>
-    </n-radio-group>
+      v-model="strValue"
+      :data="selectOptions"
+      is-button
+    />
     <g-select
       v-else
       v-model="strValue"
@@ -93,8 +86,7 @@
 
 <script lang='ts' setup>
 import type { PropType } from 'vue'
-import { NCheckbox, NSwitch, NRadioGroup, NRadioButton, NRadio } from 'naive-ui'
-import { GInput, GInputNumber, GColorPicker, GSlider, GSliderRange, GUploadImage, GSelectImage, GSelectSuggest, GSelectShape, GSelect } from '~~/ui-components'
+import { GCheckbox, GInput, GInputNumber, GColorPicker, GSlider, GSwitch, GSliderRange, GUploadImage, GSelectImage, GSelectSuggest, GSelectShape, GSelect, GRadioGroup } from '~~/ui-components'
 import { PropDataType, ComponentType, AllOptionKeys, getSelectedOptions } from '~~/domains/prop-data'
 
 const props = defineProps({
diff --git a/datav-cli-ui/components/config-form.vue b/datav-cli-ui/components/config-form.vue
index 9b163379..fc94bb07 100644
--- a/datav-cli-ui/components/config-form.vue
+++ b/datav-cli-ui/components/config-form.vue
@@ -120,6 +120,8 @@
                 clearable
                 tag
                 :options="selectSuggests"
+                value-field="id"
+                label-field="value"
               />
             </n-form-item>
           </template>
diff --git a/datav-cli-ui/components/preview-prop-item.vue b/datav-cli-ui/components/preview-prop-item.vue
index 42ab99e2..d8d4d8f5 100644
--- a/datav-cli-ui/components/preview-prop-item.vue
+++ b/datav-cli-ui/components/preview-prop-item.vue
@@ -4,6 +4,7 @@
     v-model="strValue"
     :inline="mode"
     :label="mode ? label : ''"
+    :tooltip="tooltip"
   />
   <g-input-number
     v-else-if="componentType === componentTypes.number"
@@ -14,39 +15,46 @@
     :suffix="suffix"
     :inline="mode"
     :label="mode ? label : ''"
+    :tooltip="tooltip"
   />
   <g-color-picker
     v-else-if="componentType === componentTypes.color"
     v-model="strValue"
     :inline="mode"
     :label="mode ? label : ''"
+    :tooltip="tooltip"
   />
-  <n-checkbox
+  <g-checkbox
     v-else-if="componentType === componentTypes.checkbox"
-    v-model:checked="boolValue"
+    v-model="boolValue"
+    :inline="mode"
+    :label="mode ? label : ''"
+    :tooltip="tooltip"
   />
-  <n-switch
+  <g-switch
     v-else-if="componentType === componentTypes.switch"
-    v-model:value="boolValue"
+    v-model="boolValue"
+    :inline="mode"
+    :label="mode ? label : ''"
+    :tooltip="tooltip"
   />
-  <n-radio-group
-    v-else-if="componentType === componentTypes.radio"
-    v-model:value="strValue"
-    size="small"
-  >
-    <n-radio-button v-for="pair in pairs" :key="pair.key" :value="pair.key">
-      {{ pair.value }}
-    </n-radio-button>
-  </n-radio-group>
-  <n-radio-group
+  <g-radio-group
     v-else-if="componentType === componentTypes.radioBase"
-    v-model:value="strValue"
-    size="small"
-  >
-    <n-radio v-for="pair in pairs" :key="pair.key" :value="pair.key">
-      {{ pair.value }}
-    </n-radio>
-  </n-radio-group>
+    v-model="strValue"
+    :inline="mode"
+    :label="mode ? label : ''"
+    :tooltip="tooltip"
+    :data="pairs"
+  />
+  <g-radio-group
+    v-else-if="componentType === componentTypes.radio"
+    v-model="strValue"
+    :inline="mode"
+    :label="mode ? label : ''"
+    :tooltip="tooltip"
+    :data="pairs"
+    is-button
+  />
   <g-slider
     v-else-if="componentType === componentTypes.slider"
     v-model="numValue"
@@ -56,6 +64,7 @@
     :suffix="suffix"
     :inline="mode"
     :label="mode ? label : ''"
+    :tooltip="tooltip"
   />
   <g-slider-range
     v-else-if="componentType === componentTypes.sliderRange"
@@ -65,12 +74,14 @@
     :step="step"
     :inline="mode"
     :label="mode ? label : ''"
+    :tooltip="tooltip"
   />
   <g-upload-image
     v-else-if="componentType === componentTypes.uploadImage"
     v-model="strValue"
     :inline="mode"
     :label="mode ? label : ''"
+    :tooltip="tooltip"
   />
   <g-select-image
     v-else-if="componentType === componentTypes.selectImage"
@@ -78,6 +89,7 @@
     :images="[]"
     :inline="mode"
     :label="mode ? label : ''"
+    :tooltip="tooltip"
   />
   <g-select-suggest
     v-else-if="componentType === componentTypes.selectSuggest"
@@ -86,6 +98,7 @@
     :filters="enums"
     :inline="mode"
     :label="mode ? label : ''"
+    :tooltip="tooltip"
   />
   <g-select-shape
     v-else-if="componentType === componentTypes.echartIcon"
@@ -93,6 +106,7 @@
     :shapes="selectOptions"
     :inline="mode"
     :label="mode ? label : ''"
+    :tooltip="tooltip"
   />
   <g-select
     v-else-if="componentType === componentTypes.select"
@@ -100,23 +114,25 @@
     :data="pairs"
     :inline="mode"
     :label="mode ? label : ''"
+    :tooltip="tooltip"
   />
   <template v-else-if="AllOptionKeys.includes(componentType + 's')">
-    <n-radio-group
+    <g-radio-group
       v-if="flatValue"
-      v-model:value="strValue"
-      size="small"
-    >
-      <n-radio-button v-for="em in selectOptions" :key="em.id" :value="em.id">
-        {{ em.value }}
-      </n-radio-button>
-    </n-radio-group>
+      v-model="strValue"
+      :inline="mode"
+      :label="mode ? label : ''"
+      :tooltip="tooltip"
+      :data="selectOptions"
+      is-button
+    />
     <g-select
       v-else
       v-model="strValue"
       :data="selectOptions"
       :inline="mode"
       :label="mode ? label : ''"
+      :tooltip="tooltip"
     />
   </template>
   <span v-else>--</span>
@@ -124,8 +140,7 @@
 
 <script lang='ts' setup>
 import type { PropType } from 'vue'
-import { NCheckbox, NSwitch, NRadioGroup, NRadioButton, NRadio } from 'naive-ui'
-import { GInput, GInputNumber, GColorPicker, GSlider, GSliderRange, GUploadImage, GSelectImage, GSelectSuggest, GSelectShape, GSelect } from '~~/ui-components'
+import { GCheckbox, GInput, GInputNumber, GColorPicker, GSlider, GSwitch, GSliderRange, GUploadImage, GSelectImage, GSelectSuggest, GSelectShape, GSelect, GRadioGroup } from '~~/ui-components'
 import { PropDataType, ComponentType, AllOptionKeys, getSelectedOptions } from '~~/domains/prop-data'
 
 const props = defineProps({
@@ -177,6 +192,7 @@ const props = defineProps({
     }),
   },
   flatValue: Boolean,
+  tooltip: String,
 })
 
 const componentTypes = ref({ ...ComponentType })
diff --git a/datav-cli-ui/components/preview-prop.vue b/datav-cli-ui/components/preview-prop.vue
index c74809df..721431a9 100644
--- a/datav-cli-ui/components/preview-prop.vue
+++ b/datav-cli-ui/components/preview-prop.vue
@@ -16,6 +16,7 @@
         :pairs="item.config.pairs"
         :inline="item.config.displayMode"
         :flat-value="item.config.flatValue"
+        :tooltip="item.config.tip"
       />
       <template v-else-if="item.children && !item.config.isRange">
         <g-field-collapse
@@ -106,6 +107,7 @@
           :pairs="item.config.pairs"
           :inline="item.config.displayMode"
           :flat-value="item.config.flatValue"
+          :tooltip="item.config.tip"
         />
       </g-field>
     </template>
diff --git a/datav-cli-ui/domains/prop-data.ts b/datav-cli-ui/domains/prop-data.ts
index c253cc10..072072da 100644
--- a/datav-cli-ui/domains/prop-data.ts
+++ b/datav-cli-ui/domains/prop-data.ts
@@ -172,13 +172,16 @@ export const initPropData = (data: any, arr: PropDto[], prev: string) => {
       initPropData(val, dto.children, dto.path)
     } else if (isArray(val) && val.length > 0) {
       pc.type = PropDataType.array
-      pc.displayMode = DisplayMode.nest
       dto.children = []
-      // dto.cols = Object.keys(val[0])
-      if (isNumber(val[0])) {
+      if (val.length === 2 && isNumber(val[0]) && isNumber(val[1])) {
+        pc.isRange = true
+        pc.component = ComponentType.sliderRange
         pc.defaultValue = val
+      } else {
+        pc.displayMode = DisplayMode.nest
+        // dto.cols = Object.keys(val[0])
+        initPropData([val[0]], dto.children, dto.path)
       }
-      initPropData([val[0]], dto.children, dto.path)
     }
     arr.push(dto)
   }
diff --git a/datav-cli-ui/pages/attr-settings.vue b/datav-cli-ui/pages/attr-settings.vue
index dbbd8f63..61e4748b 100644
--- a/datav-cli-ui/pages/attr-settings.vue
+++ b/datav-cli-ui/pages/attr-settings.vue
@@ -63,6 +63,7 @@
                     language="html"
                     :code="templateCode"
                     :height="500"
+                    @blur="updateTemplateCode"
                   />
                 </n-tab-pane>
               </n-tabs>
@@ -217,6 +218,10 @@ const genTemplate = () => {
   }
 }
 
+const updateTemplateCode = (data: any) => {
+  templateCode.value = data.value
+}
+
 const writeFile = async () => {
   try {
     if (!comJsonKey.value) {
diff --git a/datav-cli-ui/ui-components/index.ts b/datav-cli-ui/ui-components/index.ts
index ce82740a..a41ceebd 100644
--- a/datav-cli-ui/ui-components/index.ts
+++ b/datav-cli-ui/ui-components/index.ts
@@ -15,4 +15,6 @@ export { default as GSliderRange } from '@/components/ui/slider-range'
 export { default as GSwitch } from '@/components/ui/switch'
 export { default as GTooltipPopover } from '@/components/ui/tooltip-popover'
 export { default as GUploadImage } from '@/components/ui/upload-image'
+export { default as GCheckbox } from '@/components/ui/checkbox'
+export { default as GRadioGroup } from '@/components/ui/radio-group'
 // -- prepend register placeholder --
diff --git a/src/api/data.ts b/src/api/data.ts
index fbd7eb03..ea4da995 100644
--- a/src/api/data.ts
+++ b/src/api/data.ts
@@ -1,5 +1,9 @@
 import axios from 'axios'
 
 export async function getStaticData(comId: string, comPath: string) {
-  return axios.get(`/data/${comPath}.json?comId=${comId}`)
+  if (comPath) {
+    return axios.get(`/data/${comPath}.json?comId=${comId}`)
+  }
+
+  return Promise.reject('Not Found')
 }
diff --git a/src/components/_models/border-image.ts b/src/components/_models/border-image.ts
index 09e319ad..69ab65f3 100644
--- a/src/components/_models/border-image.ts
+++ b/src/components/_models/border-image.ts
@@ -11,4 +11,5 @@ export interface BorderImage {
     slice: string
     repeat: string
   }
+  css?: Record<string, any>
 }
diff --git a/src/components/bar/basic-bar/src/basic-bar.ts b/src/components/bar/basic-bar/src/basic-bar.ts
index 7448d3f6..9d40f58f 100644
--- a/src/components/bar/basic-bar/src/basic-bar.ts
+++ b/src/components/bar/basic-bar/src/basic-bar.ts
@@ -47,8 +47,8 @@ export class BasicBar extends DatavEChartsComponent {
       position: 'top',
       textStyle: {
         fontSize: 12,
-        color: 'rgba(255, 255, 255, 0.6)',
         fontWeight: 'normal',
+        color: 'rgba(255, 255, 255, 0.6)',
       },
       offsetX: 0,
       offsetY: 0,
@@ -67,8 +67,8 @@ export class BasicBar extends DatavEChartsComponent {
         },
         textStyle: {
           fontSize: 12,
-          color: '#90a0ae',
           fontWeight: 'normal',
+          color: '#90a0ae',
         },
       },
       axisLine: {
@@ -95,8 +95,8 @@ export class BasicBar extends DatavEChartsComponent {
         align: 'center',
         textStyle: {
           fontSize: 12,
-          color: 'rgba(255, 255, 255, 0.6)',
           fontWeight: 'normal',
+          color: 'rgba(255, 255, 255, 0.6)',
         },
       },
       grid: {
@@ -127,8 +127,8 @@ export class BasicBar extends DatavEChartsComponent {
         },
         textStyle: {
           fontSize: 12,
-          color: '#90a0ae',
           fontWeight: 'normal',
+          color: '#90a0ae',
         },
       },
       axisLine: {
@@ -154,8 +154,8 @@ export class BasicBar extends DatavEChartsComponent {
         align: 'right',
         textStyle: {
           fontSize: 12,
-          color: 'rgba(255, 255, 255, 0.6)',
           fontWeight: 'normal',
+          color: 'rgba(255, 255, 255, 0.6)',
         },
       },
       grid: {
@@ -173,8 +173,8 @@ export class BasicBar extends DatavEChartsComponent {
       show: true,
       textStyle: {
         fontSize: 14,
-        color: '#fff',
         fontWeight: 'normal',
+        color: '#fff',
       },
       background: {
         padding: {
@@ -200,8 +200,8 @@ export class BasicBar extends DatavEChartsComponent {
       orient: 'horizontal',
       textStyle: {
         fontSize: 12,
-        color: '#90a0ae',
         fontWeight: 'normal',
+        color: '#90a0ae',
       },
       symbol: {
         show: true,
diff --git a/src/components/bar/basic-bar/src/config.json b/src/components/bar/basic-bar/src/config.json
index 054dd7db..5cacbcf5 100644
--- a/src/components/bar/basic-bar/src/config.json
+++ b/src/components/bar/basic-bar/src/config.json
@@ -2,6 +2,7 @@
   {
     "key": "global",
     "config": {
+      "id": 494,
       "type": "object",
       "component": "none",
       "alias": "全局",
@@ -24,7 +25,8 @@
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "global",
     "virtualPath": "",
@@ -32,6 +34,7 @@
       {
         "key": "fontFamily",
         "config": {
+          "id": 7030,
           "type": "string",
           "component": "fontFamily",
           "alias": "字体",
@@ -54,7 +57,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.fontFamily",
         "virtualPath": ""
@@ -62,6 +66,7 @@
       {
         "key": "margin",
         "config": {
+          "id": 8799,
           "type": "object",
           "component": "none",
           "alias": "边距",
@@ -84,7 +89,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.margin",
         "virtualPath": "",
@@ -92,6 +98,7 @@
           {
             "key": "top",
             "config": {
+              "id": 1672,
               "type": "number",
               "component": "number",
               "alias": "顶部",
@@ -114,7 +121,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "global.margin.top",
             "virtualPath": ""
@@ -122,6 +130,7 @@
           {
             "key": "bottom",
             "config": {
+              "id": 5887,
               "type": "number",
               "component": "number",
               "alias": "底部",
@@ -144,7 +153,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "global.margin.bottom",
             "virtualPath": ""
@@ -152,6 +162,7 @@
           {
             "key": "left",
             "config": {
+              "id": 3680,
               "type": "number",
               "component": "number",
               "alias": "左侧",
@@ -174,7 +185,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "global.margin.left",
             "virtualPath": ""
@@ -182,6 +194,7 @@
           {
             "key": "right",
             "config": {
+              "id": 626,
               "type": "number",
               "component": "number",
               "alias": "右侧",
@@ -204,7 +217,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "global.margin.right",
             "virtualPath": ""
@@ -220,6 +234,7 @@
       {
         "key": "innerPadding",
         "config": {
+          "id": 4249,
           "type": "number",
           "component": "slider",
           "alias": "组内间距",
@@ -242,7 +257,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.innerPadding",
         "virtualPath": ""
@@ -250,6 +266,7 @@
       {
         "key": "outerPadding",
         "config": {
+          "id": 6740,
           "type": "number",
           "component": "slider",
           "alias": "组间间距",
@@ -272,7 +289,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.outerPadding",
         "virtualPath": ""
@@ -280,6 +298,7 @@
       {
         "key": "barWidth",
         "config": {
+          "id": 1341,
           "type": "string",
           "component": "selectSuggest",
           "alias": "柱子宽度",
@@ -304,7 +323,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.barWidth",
         "virtualPath": ""
@@ -312,6 +332,7 @@
       {
         "key": "background",
         "config": {
+          "id": 7711,
           "type": "object",
           "component": "none",
           "alias": "背景色",
@@ -334,7 +355,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.background",
         "virtualPath": "",
@@ -342,6 +364,7 @@
           {
             "key": "show",
             "config": {
+              "id": 7607,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -364,7 +387,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "global.background.show",
             "virtualPath": ""
@@ -372,6 +396,7 @@
           {
             "key": "color",
             "config": {
+              "id": 7093,
               "type": "string",
               "component": "color",
               "alias": "颜色",
@@ -394,7 +419,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "global.background.color",
             "virtualPath": ""
@@ -418,6 +444,7 @@
   {
     "key": "label",
     "config": {
+      "id": 5026,
       "type": "object",
       "component": "none",
       "alias": "柱子标注",
@@ -440,7 +467,8 @@
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "label",
     "virtualPath": "",
@@ -448,6 +476,7 @@
       {
         "key": "show",
         "config": {
+          "id": 9074,
           "type": "boolean",
           "component": "switch",
           "alias": "",
@@ -470,7 +499,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "label.show",
         "virtualPath": ""
@@ -478,6 +508,7 @@
       {
         "key": "position",
         "config": {
+          "id": 516,
           "type": "string",
           "component": "echartsLablePosition",
           "alias": "位置",
@@ -500,7 +531,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "label.position",
         "virtualPath": ""
@@ -508,6 +540,7 @@
       {
         "key": "textStyle",
         "config": {
+          "id": 3532,
           "type": "object",
           "component": "none",
           "alias": "文本样式",
@@ -530,7 +563,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "label.textStyle",
         "virtualPath": "",
@@ -538,6 +572,7 @@
           {
             "key": "fontSize",
             "config": {
+              "id": 8788,
               "type": "number",
               "component": "number",
               "alias": "字号",
@@ -560,24 +595,26 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "label.textStyle.fontSize",
             "virtualPath": ""
           },
           {
-            "key": "color",
+            "key": "fontWeight",
             "config": {
+              "id": 3619,
               "type": "string",
-              "component": "color",
-              "alias": "颜色",
+              "component": "fontWeight",
+              "alias": "字体粗细",
               "tip": "",
               "displayMode": "inline",
               "features": [],
               "layout": "horizontal",
               "toggleCol": "",
               "isHide": false,
-              "defaultValue": "rgba(255, 255, 255, 0.6)",
+              "defaultValue": "normal",
               "min": 0,
               "max": 100,
               "step": 1,
@@ -590,24 +627,26 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
-            "path": "label.textStyle.color",
+            "path": "label.textStyle.fontWeight",
             "virtualPath": ""
           },
           {
-            "key": "fontWeight",
+            "key": "color",
             "config": {
+              "id": 2973,
               "type": "string",
-              "component": "fontWeight",
-              "alias": "字体粗细",
+              "component": "color",
+              "alias": "颜色",
               "tip": "",
-              "displayMode": "inline",
+              "displayMode": "inline-single",
               "features": [],
               "layout": "horizontal",
               "toggleCol": "",
               "isHide": false,
-              "defaultValue": "normal",
+              "defaultValue": "rgba(255, 255, 255, 0.6)",
               "min": 0,
               "max": 100,
               "step": 1,
@@ -620,21 +659,23 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
-            "path": "label.textStyle.fontWeight",
+            "path": "label.textStyle.color",
             "virtualPath": ""
           }
         ],
         "cols": [
           "fontSize",
-          "color",
-          "fontWeight"
+          "fontWeight",
+          "color"
         ]
       },
       {
         "key": "offsetX",
         "config": {
+          "id": 2737,
           "type": "number",
           "component": "slider",
           "alias": "水平偏移",
@@ -657,7 +698,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "label.offsetX",
         "virtualPath": ""
@@ -665,6 +707,7 @@
       {
         "key": "offsetY",
         "config": {
+          "id": 6611,
           "type": "number",
           "component": "slider",
           "alias": "垂直偏移",
@@ -687,7 +730,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "label.offsetY",
         "virtualPath": ""
@@ -704,6 +748,7 @@
   {
     "key": "xAxis",
     "config": {
+      "id": 6370,
       "type": "object",
       "component": "none",
       "alias": "X轴",
@@ -726,7 +771,8 @@
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "xAxis",
     "virtualPath": "",
@@ -734,6 +780,7 @@
       {
         "key": "show",
         "config": {
+          "id": 6365,
           "type": "boolean",
           "component": "switch",
           "alias": "",
@@ -756,7 +803,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "xAxis.show",
         "virtualPath": ""
@@ -764,6 +812,7 @@
       {
         "key": "type",
         "config": {
+          "id": 7227,
           "type": "string",
           "component": "axisType",
           "alias": "类型",
@@ -786,7 +835,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": true
+          "flatValue": true,
+          "isRange": false
         },
         "path": "xAxis.type",
         "virtualPath": ""
@@ -794,6 +844,7 @@
       {
         "key": "boundaryGap",
         "config": {
+          "id": 148,
           "type": "boolean",
           "component": "switch",
           "alias": "两端留白",
@@ -816,7 +867,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "xAxis.boundaryGap",
         "virtualPath": ""
@@ -824,6 +876,7 @@
       {
         "key": "title",
         "config": {
+          "id": 1058,
           "type": "object",
           "component": "none",
           "alias": "轴标题",
@@ -846,7 +899,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "xAxis.title",
         "virtualPath": "",
@@ -854,6 +908,7 @@
           {
             "key": "show",
             "config": {
+              "id": 3068,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -876,7 +931,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.title.show",
             "virtualPath": ""
@@ -884,6 +940,7 @@
           {
             "key": "name",
             "config": {
+              "id": 9010,
               "type": "string",
               "component": "input",
               "alias": "标题显示",
@@ -906,7 +963,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.title.name",
             "virtualPath": ""
@@ -914,6 +972,7 @@
           {
             "key": "location",
             "config": {
+              "id": 116,
               "type": "string",
               "component": "titleLocation",
               "alias": "位置",
@@ -936,7 +995,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.title.location",
             "virtualPath": ""
@@ -944,6 +1004,7 @@
           {
             "key": "display",
             "config": {
+              "id": 3012,
               "type": "object",
               "component": "none",
               "alias": "展示方式",
@@ -966,7 +1027,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.title.display",
             "virtualPath": "",
@@ -974,6 +1036,7 @@
               {
                 "key": "rotate",
                 "config": {
+                  "id": 7788,
                   "type": "number",
                   "component": "number",
                   "alias": "旋转",
@@ -996,7 +1059,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.title.display.rotate",
                 "virtualPath": ""
@@ -1004,6 +1068,7 @@
               {
                 "key": "offset",
                 "config": {
+                  "id": 1105,
                   "type": "number",
                   "component": "number",
                   "alias": "偏移",
@@ -1026,7 +1091,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.title.display.offset",
                 "virtualPath": ""
@@ -1040,6 +1106,7 @@
           {
             "key": "textStyle",
             "config": {
+              "id": 1087,
               "type": "object",
               "component": "none",
               "alias": "文本样式",
@@ -1062,7 +1129,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.title.textStyle",
             "virtualPath": "",
@@ -1070,6 +1138,7 @@
               {
                 "key": "fontSize",
                 "config": {
+                  "id": 4717,
                   "type": "number",
                   "component": "number",
                   "alias": "字号",
@@ -1092,24 +1161,26 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.title.textStyle.fontSize",
                 "virtualPath": ""
               },
               {
-                "key": "color",
+                "key": "fontWeight",
                 "config": {
+                  "id": 4749,
                   "type": "string",
-                  "component": "color",
-                  "alias": "颜色",
+                  "component": "fontWeight",
+                  "alias": "字体粗细",
                   "tip": "",
                   "displayMode": "inline",
                   "features": [],
                   "layout": "horizontal",
                   "toggleCol": "",
                   "isHide": false,
-                  "defaultValue": "#90a0ae",
+                  "defaultValue": "normal",
                   "min": 0,
                   "max": 100,
                   "step": 1,
@@ -1122,24 +1193,26 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
-                "path": "xAxis.title.textStyle.color",
+                "path": "xAxis.title.textStyle.fontWeight",
                 "virtualPath": ""
               },
               {
-                "key": "fontWeight",
+                "key": "color",
                 "config": {
+                  "id": 3702,
                   "type": "string",
-                  "component": "fontWeight",
-                  "alias": "字体粗细",
+                  "component": "color",
+                  "alias": "颜色",
                   "tip": "",
-                  "displayMode": "inline",
+                  "displayMode": "inline-single",
                   "features": [],
                   "layout": "horizontal",
                   "toggleCol": "",
                   "isHide": false,
-                  "defaultValue": "normal",
+                  "defaultValue": "#90a0ae",
                   "min": 0,
                   "max": 100,
                   "step": 1,
@@ -1152,16 +1225,17 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
-                "path": "xAxis.title.textStyle.fontWeight",
+                "path": "xAxis.title.textStyle.color",
                 "virtualPath": ""
               }
             ],
             "cols": [
               "fontSize",
-              "color",
-              "fontWeight"
+              "fontWeight",
+              "color"
             ]
           }
         ],
@@ -1176,6 +1250,7 @@
       {
         "key": "axisLine",
         "config": {
+          "id": 5174,
           "type": "object",
           "component": "none",
           "alias": "轴线",
@@ -1198,7 +1273,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "xAxis.axisLine",
         "virtualPath": "",
@@ -1206,6 +1282,7 @@
           {
             "key": "show",
             "config": {
+              "id": 8841,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -1228,7 +1305,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLine.show",
             "virtualPath": ""
@@ -1236,6 +1314,7 @@
           {
             "key": "type",
             "config": {
+              "id": 8247,
               "type": "string",
               "component": "lineStyle",
               "alias": "类型",
@@ -1258,7 +1337,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLine.type",
             "virtualPath": ""
@@ -1266,6 +1346,7 @@
           {
             "key": "width",
             "config": {
+              "id": 6228,
               "type": "number",
               "component": "number",
               "alias": "粗细",
@@ -1288,7 +1369,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLine.width",
             "virtualPath": ""
@@ -1296,6 +1378,7 @@
           {
             "key": "color",
             "config": {
+              "id": 6573,
               "type": "string",
               "component": "color",
               "alias": "颜色",
@@ -1318,7 +1401,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLine.color",
             "virtualPath": ""
@@ -1334,6 +1418,7 @@
       {
         "key": "axisTick",
         "config": {
+          "id": 374,
           "type": "object",
           "component": "none",
           "alias": "轴刻度",
@@ -1356,7 +1441,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "xAxis.axisTick",
         "virtualPath": "",
@@ -1364,6 +1450,7 @@
           {
             "key": "show",
             "config": {
+              "id": 2518,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -1386,7 +1473,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisTick.show",
             "virtualPath": ""
@@ -1394,6 +1482,7 @@
           {
             "key": "type",
             "config": {
+              "id": 4554,
               "type": "string",
               "component": "lineStyle",
               "alias": "类型",
@@ -1416,7 +1505,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisTick.type",
             "virtualPath": ""
@@ -1424,6 +1514,7 @@
           {
             "key": "width",
             "config": {
+              "id": 6697,
               "type": "number",
               "component": "number",
               "alias": "粗细",
@@ -1446,7 +1537,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisTick.width",
             "virtualPath": ""
@@ -1454,6 +1546,7 @@
           {
             "key": "color",
             "config": {
+              "id": 2161,
               "type": "string",
               "component": "color",
               "alias": "颜色",
@@ -1476,7 +1569,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisTick.color",
             "virtualPath": ""
@@ -1492,6 +1586,7 @@
       {
         "key": "axisLabel",
         "config": {
+          "id": 9549,
           "type": "object",
           "component": "none",
           "alias": "轴标签",
@@ -1514,7 +1609,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "xAxis.axisLabel",
         "virtualPath": "",
@@ -1522,6 +1618,7 @@
           {
             "key": "show",
             "config": {
+              "id": 8795,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -1544,7 +1641,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLabel.show",
             "virtualPath": ""
@@ -1552,6 +1650,7 @@
           {
             "key": "valueFormat",
             "config": {
+              "id": 6997,
               "type": "string",
               "component": "valueFormat",
               "alias": "显示格式",
@@ -1574,7 +1673,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLabel.valueFormat",
             "virtualPath": ""
@@ -1582,6 +1682,7 @@
           {
             "key": "timeFormat",
             "config": {
+              "id": 4992,
               "type": "string",
               "component": "timeFormat",
               "alias": "显示格式",
@@ -1604,7 +1705,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLabel.timeFormat",
             "virtualPath": ""
@@ -1612,6 +1714,7 @@
           {
             "key": "interval",
             "config": {
+              "id": 1455,
               "type": "string",
               "component": "selectSuggest",
               "alias": "间隔",
@@ -1639,7 +1742,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLabel.interval",
             "virtualPath": ""
@@ -1647,6 +1751,7 @@
           {
             "key": "display",
             "config": {
+              "id": 4679,
               "type": "object",
               "component": "none",
               "alias": "展示方式",
@@ -1669,7 +1774,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLabel.display",
             "virtualPath": "",
@@ -1677,6 +1783,7 @@
               {
                 "key": "rotate",
                 "config": {
+                  "id": 6107,
                   "type": "number",
                   "component": "number",
                   "alias": "旋转",
@@ -1699,7 +1806,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.axisLabel.display.rotate",
                 "virtualPath": ""
@@ -1707,6 +1815,7 @@
               {
                 "key": "margin",
                 "config": {
+                  "id": 8899,
                   "type": "number",
                   "component": "number",
                   "alias": "偏移",
@@ -1729,7 +1838,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.axisLabel.display.margin",
                 "virtualPath": ""
@@ -1743,6 +1853,7 @@
           {
             "key": "align",
             "config": {
+              "id": 831,
               "type": "string",
               "component": "hAlign",
               "alias": "对齐方式",
@@ -1765,7 +1876,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLabel.align",
             "virtualPath": ""
@@ -1773,6 +1885,7 @@
           {
             "key": "textStyle",
             "config": {
+              "id": 1685,
               "type": "object",
               "component": "none",
               "alias": "文本样式",
@@ -1795,7 +1908,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLabel.textStyle",
             "virtualPath": "",
@@ -1803,6 +1917,7 @@
               {
                 "key": "fontSize",
                 "config": {
+                  "id": 9372,
                   "type": "number",
                   "component": "number",
                   "alias": "字号",
@@ -1825,24 +1940,26 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.axisLabel.textStyle.fontSize",
                 "virtualPath": ""
               },
               {
-                "key": "color",
+                "key": "fontWeight",
                 "config": {
+                  "id": 8006,
                   "type": "string",
-                  "component": "color",
-                  "alias": "颜色",
+                  "component": "fontWeight",
+                  "alias": "字体粗细",
                   "tip": "",
                   "displayMode": "inline",
                   "features": [],
                   "layout": "horizontal",
                   "toggleCol": "",
                   "isHide": false,
-                  "defaultValue": "rgba(255, 255, 255, 0.6)",
+                  "defaultValue": "normal",
                   "min": 0,
                   "max": 100,
                   "step": 1,
@@ -1855,24 +1972,26 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
-                "path": "xAxis.axisLabel.textStyle.color",
+                "path": "xAxis.axisLabel.textStyle.fontWeight",
                 "virtualPath": ""
               },
               {
-                "key": "fontWeight",
+                "key": "color",
                 "config": {
+                  "id": 8364,
                   "type": "string",
-                  "component": "fontWeight",
-                  "alias": "字体粗细",
+                  "component": "color",
+                  "alias": "颜色",
                   "tip": "",
-                  "displayMode": "inline",
+                  "displayMode": "inline-single",
                   "features": [],
                   "layout": "horizontal",
                   "toggleCol": "",
                   "isHide": false,
-                  "defaultValue": "normal",
+                  "defaultValue": "rgba(255, 255, 255, 0.6)",
                   "min": 0,
                   "max": 100,
                   "step": 1,
@@ -1885,16 +2004,17 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
-                "path": "xAxis.axisLabel.textStyle.fontWeight",
+                "path": "xAxis.axisLabel.textStyle.color",
                 "virtualPath": ""
               }
             ],
             "cols": [
               "fontSize",
-              "color",
-              "fontWeight"
+              "fontWeight",
+              "color"
             ]
           }
         ],
@@ -1911,6 +2031,7 @@
       {
         "key": "grid",
         "config": {
+          "id": 48,
           "type": "object",
           "component": "none",
           "alias": "网格线",
@@ -1933,7 +2054,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "xAxis.grid",
         "virtualPath": "",
@@ -1941,6 +2063,7 @@
           {
             "key": "show",
             "config": {
+              "id": 9322,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -1963,7 +2086,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.grid.show",
             "virtualPath": ""
@@ -1971,6 +2095,7 @@
           {
             "key": "line",
             "config": {
+              "id": 6875,
               "type": "object",
               "component": "none",
               "alias": "线型样式",
@@ -1993,7 +2118,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.grid.line",
             "virtualPath": "",
@@ -2001,6 +2127,7 @@
               {
                 "key": "type",
                 "config": {
+                  "id": 9987,
                   "type": "string",
                   "component": "lineStyle",
                   "alias": "类型",
@@ -2023,7 +2150,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.grid.line.type",
                 "virtualPath": ""
@@ -2031,6 +2159,7 @@
               {
                 "key": "width",
                 "config": {
+                  "id": 3865,
                   "type": "number",
                   "component": "number",
                   "alias": "粗细",
@@ -2053,7 +2182,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.grid.line.width",
                 "virtualPath": ""
@@ -2061,6 +2191,7 @@
               {
                 "key": "color",
                 "config": {
+                  "id": 6897,
                   "type": "string",
                   "component": "color",
                   "alias": "颜色",
@@ -2083,7 +2214,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.grid.line.color",
                 "virtualPath": ""
@@ -2091,6 +2223,7 @@
               {
                 "key": "dashedLength",
                 "config": {
+                  "id": 4355,
                   "type": "number",
                   "component": "number",
                   "alias": "长度",
@@ -2113,7 +2246,8 @@
                     "field": "type",
                     "value": "dashed"
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.grid.line.dashedLength",
                 "virtualPath": ""
@@ -2121,6 +2255,7 @@
               {
                 "key": "dashedSpace",
                 "config": {
+                  "id": 9502,
                   "type": "number",
                   "component": "number",
                   "alias": "间距",
@@ -2143,7 +2278,8 @@
                     "field": "type",
                     "value": "dashed"
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.grid.line.dashedSpace",
                 "virtualPath": ""
@@ -2178,6 +2314,7 @@
   {
     "key": "yAxis",
     "config": {
+      "id": 8604,
       "type": "object",
       "component": "none",
       "alias": "Y轴",
@@ -2200,7 +2337,8 @@
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "yAxis",
     "virtualPath": "",
@@ -2208,6 +2346,7 @@
       {
         "key": "show",
         "config": {
+          "id": 6679,
           "type": "boolean",
           "component": "switch",
           "alias": "",
@@ -2230,7 +2369,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "yAxis.show",
         "virtualPath": ""
@@ -2238,6 +2378,7 @@
       {
         "key": "extent",
         "config": {
+          "id": 8491,
           "type": "object",
           "component": "none",
           "alias": "显示范围",
@@ -2260,7 +2401,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "yAxis.extent",
         "virtualPath": "",
@@ -2268,6 +2410,7 @@
           {
             "key": "min",
             "config": {
+              "id": 5142,
               "type": "string",
               "component": "selectSuggest",
               "alias": "最小值",
@@ -2293,7 +2436,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.extent.min",
             "virtualPath": ""
@@ -2301,6 +2445,7 @@
           {
             "key": "max",
             "config": {
+              "id": 2262,
               "type": "string",
               "component": "selectSuggest",
               "alias": "最大值",
@@ -2326,7 +2471,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.extent.max",
             "virtualPath": ""
@@ -2340,6 +2486,7 @@
       {
         "key": "splitNumber",
         "config": {
+          "id": 8977,
           "type": "number",
           "component": "number",
           "alias": "标签数量",
@@ -2362,7 +2509,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "yAxis.splitNumber",
         "virtualPath": ""
@@ -2370,6 +2518,7 @@
       {
         "key": "title",
         "config": {
+          "id": 2117,
           "type": "object",
           "component": "none",
           "alias": "轴标题",
@@ -2392,7 +2541,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "yAxis.title",
         "virtualPath": "",
@@ -2400,6 +2550,7 @@
           {
             "key": "show",
             "config": {
+              "id": 6051,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -2422,7 +2573,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.title.show",
             "virtualPath": ""
@@ -2430,6 +2582,7 @@
           {
             "key": "name",
             "config": {
+              "id": 7958,
               "type": "string",
               "component": "input",
               "alias": "标题显示",
@@ -2452,7 +2605,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.title.name",
             "virtualPath": ""
@@ -2460,6 +2614,7 @@
           {
             "key": "location",
             "config": {
+              "id": 414,
               "type": "string",
               "component": "titleLocation",
               "alias": "位置",
@@ -2482,7 +2637,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.title.location",
             "virtualPath": ""
@@ -2490,6 +2646,7 @@
           {
             "key": "display",
             "config": {
+              "id": 6569,
               "type": "object",
               "component": "none",
               "alias": "展示方式",
@@ -2512,7 +2669,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.title.display",
             "virtualPath": "",
@@ -2520,6 +2678,7 @@
               {
                 "key": "rotate",
                 "config": {
+                  "id": 619,
                   "type": "number",
                   "component": "number",
                   "alias": "旋转",
@@ -2542,7 +2701,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.title.display.rotate",
                 "virtualPath": ""
@@ -2550,6 +2710,7 @@
               {
                 "key": "offset",
                 "config": {
+                  "id": 8163,
                   "type": "number",
                   "component": "number",
                   "alias": "偏移",
@@ -2572,7 +2733,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.title.display.offset",
                 "virtualPath": ""
@@ -2586,6 +2748,7 @@
           {
             "key": "textStyle",
             "config": {
+              "id": 7983,
               "type": "object",
               "component": "none",
               "alias": "文本样式",
@@ -2608,7 +2771,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.title.textStyle",
             "virtualPath": "",
@@ -2616,6 +2780,7 @@
               {
                 "key": "fontSize",
                 "config": {
+                  "id": 1753,
                   "type": "number",
                   "component": "number",
                   "alias": "字号",
@@ -2638,24 +2803,26 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.title.textStyle.fontSize",
                 "virtualPath": ""
               },
               {
-                "key": "color",
+                "key": "fontWeight",
                 "config": {
+                  "id": 5390,
                   "type": "string",
-                  "component": "color",
-                  "alias": "颜色",
+                  "component": "fontWeight",
+                  "alias": "字体粗细",
                   "tip": "",
                   "displayMode": "inline",
                   "features": [],
                   "layout": "horizontal",
                   "toggleCol": "",
                   "isHide": false,
-                  "defaultValue": "#90a0ae",
+                  "defaultValue": "normal",
                   "min": 0,
                   "max": 100,
                   "step": 1,
@@ -2668,24 +2835,26 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
-                "path": "yAxis.title.textStyle.color",
+                "path": "yAxis.title.textStyle.fontWeight",
                 "virtualPath": ""
               },
               {
-                "key": "fontWeight",
+                "key": "color",
                 "config": {
+                  "id": 7331,
                   "type": "string",
-                  "component": "fontWeight",
-                  "alias": "字体粗细",
+                  "component": "color",
+                  "alias": "颜色",
                   "tip": "",
-                  "displayMode": "inline",
+                  "displayMode": "inline-single",
                   "features": [],
                   "layout": "horizontal",
                   "toggleCol": "",
                   "isHide": false,
-                  "defaultValue": "normal",
+                  "defaultValue": "#90a0ae",
                   "min": 0,
                   "max": 100,
                   "step": 1,
@@ -2698,16 +2867,17 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
-                "path": "yAxis.title.textStyle.fontWeight",
+                "path": "yAxis.title.textStyle.color",
                 "virtualPath": ""
               }
             ],
             "cols": [
               "fontSize",
-              "color",
-              "fontWeight"
+              "fontWeight",
+              "color"
             ]
           }
         ],
@@ -2722,6 +2892,7 @@
       {
         "key": "axisLine",
         "config": {
+          "id": 728,
           "type": "object",
           "component": "none",
           "alias": "轴线",
@@ -2744,7 +2915,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "yAxis.axisLine",
         "virtualPath": "",
@@ -2752,6 +2924,7 @@
           {
             "key": "show",
             "config": {
+              "id": 3758,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -2774,7 +2947,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisLine.show",
             "virtualPath": ""
@@ -2782,6 +2956,7 @@
           {
             "key": "type",
             "config": {
+              "id": 1610,
               "type": "string",
               "component": "lineStyle",
               "alias": "类型",
@@ -2804,7 +2979,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisLine.type",
             "virtualPath": ""
@@ -2812,6 +2988,7 @@
           {
             "key": "width",
             "config": {
+              "id": 3750,
               "type": "number",
               "component": "number",
               "alias": "粗细",
@@ -2834,7 +3011,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisLine.width",
             "virtualPath": ""
@@ -2842,6 +3020,7 @@
           {
             "key": "color",
             "config": {
+              "id": 3249,
               "type": "string",
               "component": "color",
               "alias": "颜色",
@@ -2864,7 +3043,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisLine.color",
             "virtualPath": ""
@@ -2880,6 +3060,7 @@
       {
         "key": "axisTick",
         "config": {
+          "id": 4274,
           "type": "object",
           "component": "none",
           "alias": "轴刻度",
@@ -2902,7 +3083,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "yAxis.axisTick",
         "virtualPath": "",
@@ -2910,6 +3092,7 @@
           {
             "key": "show",
             "config": {
+              "id": 2116,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -2932,7 +3115,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisTick.show",
             "virtualPath": ""
@@ -2940,6 +3124,7 @@
           {
             "key": "type",
             "config": {
+              "id": 5214,
               "type": "string",
               "component": "lineStyle",
               "alias": "类型",
@@ -2962,7 +3147,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisTick.type",
             "virtualPath": ""
@@ -2970,6 +3156,7 @@
           {
             "key": "width",
             "config": {
+              "id": 5093,
               "type": "number",
               "component": "number",
               "alias": "粗细",
@@ -2992,7 +3179,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisTick.width",
             "virtualPath": ""
@@ -3000,6 +3188,7 @@
           {
             "key": "color",
             "config": {
+              "id": 372,
               "type": "string",
               "component": "color",
               "alias": "颜色",
@@ -3022,7 +3211,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisTick.color",
             "virtualPath": ""
@@ -3038,6 +3228,7 @@
       {
         "key": "axisLabel",
         "config": {
+          "id": 4403,
           "type": "object",
           "component": "none",
           "alias": "轴标签",
@@ -3060,7 +3251,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "yAxis.axisLabel",
         "virtualPath": "",
@@ -3068,6 +3260,7 @@
           {
             "key": "show",
             "config": {
+              "id": 1986,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -3090,7 +3283,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisLabel.show",
             "virtualPath": ""
@@ -3098,6 +3292,7 @@
           {
             "key": "valueFormat",
             "config": {
+              "id": 1806,
               "type": "string",
               "component": "valueFormat",
               "alias": "显示格式",
@@ -3120,7 +3315,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisLabel.valueFormat",
             "virtualPath": ""
@@ -3128,6 +3324,7 @@
           {
             "key": "boundaryGap",
             "config": {
+              "id": 5788,
               "type": "number",
               "component": "number",
               "alias": "两端间距",
@@ -3150,7 +3347,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisLabel.boundaryGap",
             "virtualPath": ""
@@ -3158,6 +3356,7 @@
           {
             "key": "display",
             "config": {
+              "id": 9662,
               "type": "object",
               "component": "none",
               "alias": "展示方式",
@@ -3180,7 +3379,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisLabel.display",
             "virtualPath": "",
@@ -3188,6 +3388,7 @@
               {
                 "key": "rotate",
                 "config": {
+                  "id": 6386,
                   "type": "number",
                   "component": "number",
                   "alias": "旋转",
@@ -3210,7 +3411,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.axisLabel.display.rotate",
                 "virtualPath": ""
@@ -3218,6 +3420,7 @@
               {
                 "key": "margin",
                 "config": {
+                  "id": 8680,
                   "type": "number",
                   "component": "number",
                   "alias": "偏移",
@@ -3240,7 +3443,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.axisLabel.display.margin",
                 "virtualPath": ""
@@ -3254,6 +3458,7 @@
           {
             "key": "align",
             "config": {
+              "id": 3675,
               "type": "string",
               "component": "hAlign",
               "alias": "对齐方式",
@@ -3276,7 +3481,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisLabel.align",
             "virtualPath": ""
@@ -3284,6 +3490,7 @@
           {
             "key": "textStyle",
             "config": {
+              "id": 4759,
               "type": "object",
               "component": "none",
               "alias": "文本样式",
@@ -3306,7 +3513,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisLabel.textStyle",
             "virtualPath": "",
@@ -3314,6 +3522,7 @@
               {
                 "key": "fontSize",
                 "config": {
+                  "id": 4515,
                   "type": "number",
                   "component": "number",
                   "alias": "字号",
@@ -3336,24 +3545,26 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.axisLabel.textStyle.fontSize",
                 "virtualPath": ""
               },
               {
-                "key": "color",
+                "key": "fontWeight",
                 "config": {
+                  "id": 7395,
                   "type": "string",
-                  "component": "color",
-                  "alias": "颜色",
+                  "component": "fontWeight",
+                  "alias": "字体粗细",
                   "tip": "",
                   "displayMode": "inline",
                   "features": [],
                   "layout": "horizontal",
                   "toggleCol": "",
                   "isHide": false,
-                  "defaultValue": "rgba(255, 255, 255, 0.6)",
+                  "defaultValue": "normal",
                   "min": 0,
                   "max": 100,
                   "step": 1,
@@ -3366,24 +3577,26 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
-                "path": "yAxis.axisLabel.textStyle.color",
+                "path": "yAxis.axisLabel.textStyle.fontWeight",
                 "virtualPath": ""
               },
               {
-                "key": "fontWeight",
+                "key": "color",
                 "config": {
+                  "id": 9645,
                   "type": "string",
-                  "component": "fontWeight",
-                  "alias": "字体粗细",
+                  "component": "color",
+                  "alias": "颜色",
                   "tip": "",
-                  "displayMode": "inline",
+                  "displayMode": "inline-single",
                   "features": [],
                   "layout": "horizontal",
                   "toggleCol": "",
                   "isHide": false,
-                  "defaultValue": "normal",
+                  "defaultValue": "rgba(255, 255, 255, 0.6)",
                   "min": 0,
                   "max": 100,
                   "step": 1,
@@ -3396,16 +3609,17 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
-                "path": "yAxis.axisLabel.textStyle.fontWeight",
+                "path": "yAxis.axisLabel.textStyle.color",
                 "virtualPath": ""
               }
             ],
             "cols": [
               "fontSize",
-              "color",
-              "fontWeight"
+              "fontWeight",
+              "color"
             ]
           }
         ],
@@ -3421,6 +3635,7 @@
       {
         "key": "grid",
         "config": {
+          "id": 3070,
           "type": "object",
           "component": "none",
           "alias": "网格线",
@@ -3443,7 +3658,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "yAxis.grid",
         "virtualPath": "",
@@ -3451,6 +3667,7 @@
           {
             "key": "show",
             "config": {
+              "id": 8147,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -3473,7 +3690,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.grid.show",
             "virtualPath": ""
@@ -3481,6 +3699,7 @@
           {
             "key": "line",
             "config": {
+              "id": 2329,
               "type": "object",
               "component": "none",
               "alias": "线型样式",
@@ -3503,7 +3722,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.grid.line",
             "virtualPath": "",
@@ -3511,6 +3731,7 @@
               {
                 "key": "type",
                 "config": {
+                  "id": 6196,
                   "type": "string",
                   "component": "lineStyle",
                   "alias": "类型",
@@ -3533,7 +3754,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.grid.line.type",
                 "virtualPath": ""
@@ -3541,6 +3763,7 @@
               {
                 "key": "width",
                 "config": {
+                  "id": 1954,
                   "type": "number",
                   "component": "number",
                   "alias": "粗细",
@@ -3563,7 +3786,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.grid.line.width",
                 "virtualPath": ""
@@ -3571,6 +3795,7 @@
               {
                 "key": "color",
                 "config": {
+                  "id": 6942,
                   "type": "string",
                   "component": "color",
                   "alias": "颜色",
@@ -3593,7 +3818,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.grid.line.color",
                 "virtualPath": ""
@@ -3601,6 +3827,7 @@
               {
                 "key": "dashedLength",
                 "config": {
+                  "id": 6709,
                   "type": "number",
                   "component": "number",
                   "alias": "长度",
@@ -3623,7 +3850,8 @@
                     "field": "type",
                     "value": "dashed"
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.grid.line.dashedLength",
                 "virtualPath": ""
@@ -3631,6 +3859,7 @@
               {
                 "key": "dashedSpace",
                 "config": {
+                  "id": 3499,
                   "type": "number",
                   "component": "number",
                   "alias": "间距",
@@ -3653,7 +3882,8 @@
                     "field": "type",
                     "value": "dashed"
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.grid.line.dashedSpace",
                 "virtualPath": ""
@@ -3688,6 +3918,7 @@
   {
     "key": "tooltip",
     "config": {
+      "id": 3971,
       "type": "object",
       "component": "none",
       "alias": "提示框",
@@ -3710,7 +3941,8 @@
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "tooltip",
     "virtualPath": "",
@@ -3718,6 +3950,7 @@
       {
         "key": "show",
         "config": {
+          "id": 7536,
           "type": "boolean",
           "component": "switch",
           "alias": "",
@@ -3740,7 +3973,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "tooltip.show",
         "virtualPath": ""
@@ -3748,6 +3982,7 @@
       {
         "key": "textStyle",
         "config": {
+          "id": 3419,
           "type": "object",
           "component": "none",
           "alias": "文本样式",
@@ -3770,7 +4005,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "tooltip.textStyle",
         "virtualPath": "",
@@ -3778,6 +4014,7 @@
           {
             "key": "fontSize",
             "config": {
+              "id": 4713,
               "type": "number",
               "component": "number",
               "alias": "字号",
@@ -3800,24 +4037,26 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "tooltip.textStyle.fontSize",
             "virtualPath": ""
           },
           {
-            "key": "color",
+            "key": "fontWeight",
             "config": {
+              "id": 6155,
               "type": "string",
-              "component": "color",
-              "alias": "颜色",
+              "component": "fontWeight",
+              "alias": "字体粗细",
               "tip": "",
               "displayMode": "single",
               "features": [],
               "layout": "horizontal",
               "toggleCol": "",
               "isHide": false,
-              "defaultValue": "#fff",
+              "defaultValue": "normal",
               "min": 0,
               "max": 100,
               "step": 1,
@@ -3830,24 +4069,26 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
-            "path": "tooltip.textStyle.color",
+            "path": "tooltip.textStyle.fontWeight",
             "virtualPath": ""
           },
           {
-            "key": "fontWeight",
+            "key": "color",
             "config": {
+              "id": 5400,
               "type": "string",
-              "component": "fontWeight",
-              "alias": "字体粗细",
+              "component": "color",
+              "alias": "颜色",
               "tip": "",
               "displayMode": "single",
               "features": [],
               "layout": "horizontal",
               "toggleCol": "",
               "isHide": false,
-              "defaultValue": "normal",
+              "defaultValue": "#fff",
               "min": 0,
               "max": 100,
               "step": 1,
@@ -3860,21 +4101,23 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
-            "path": "tooltip.textStyle.fontWeight",
+            "path": "tooltip.textStyle.color",
             "virtualPath": ""
           }
         ],
         "cols": [
           "fontSize",
-          "color",
-          "fontWeight"
+          "fontWeight",
+          "color"
         ]
       },
       {
         "key": "background",
         "config": {
+          "id": 848,
           "type": "object",
           "component": "none",
           "alias": "弹框背景",
@@ -3897,7 +4140,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "tooltip.background",
         "virtualPath": "",
@@ -3905,6 +4149,7 @@
           {
             "key": "padding",
             "config": {
+              "id": 7246,
               "type": "object",
               "component": "none",
               "alias": "背景边距",
@@ -3927,7 +4172,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "tooltip.background.padding",
             "virtualPath": "",
@@ -3935,6 +4181,7 @@
               {
                 "key": "h",
                 "config": {
+                  "id": 4829,
                   "type": "number",
                   "component": "number",
                   "alias": "水平",
@@ -3957,7 +4204,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "tooltip.background.padding.h",
                 "virtualPath": ""
@@ -3965,6 +4213,7 @@
               {
                 "key": "v",
                 "config": {
+                  "id": 4429,
                   "type": "number",
                   "component": "number",
                   "alias": "垂直",
@@ -3987,7 +4236,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "tooltip.background.padding.v",
                 "virtualPath": ""
@@ -4001,6 +4251,7 @@
           {
             "key": "color",
             "config": {
+              "id": 5562,
               "type": "string",
               "component": "color",
               "alias": "背景色",
@@ -4023,7 +4274,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "tooltip.background.color",
             "virtualPath": ""
@@ -4037,6 +4289,7 @@
       {
         "key": "pointer",
         "config": {
+          "id": 9123,
           "type": "object",
           "component": "none",
           "alias": "轴指示器",
@@ -4059,7 +4312,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "tooltip.pointer",
         "virtualPath": "",
@@ -4067,6 +4321,7 @@
           {
             "key": "show",
             "config": {
+              "id": 4986,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -4089,7 +4344,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "tooltip.pointer.show",
             "virtualPath": ""
@@ -4097,6 +4353,7 @@
           {
             "key": "line",
             "config": {
+              "id": 5366,
               "type": "object",
               "component": "none",
               "alias": "线型样式",
@@ -4119,7 +4376,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "tooltip.pointer.line",
             "virtualPath": "",
@@ -4127,6 +4385,7 @@
               {
                 "key": "type",
                 "config": {
+                  "id": 604,
                   "type": "string",
                   "component": "lineStyle",
                   "alias": "类型",
@@ -4149,7 +4408,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "tooltip.pointer.line.type",
                 "virtualPath": ""
@@ -4157,6 +4417,7 @@
               {
                 "key": "width",
                 "config": {
+                  "id": 6867,
                   "type": "number",
                   "component": "number",
                   "alias": "粗细",
@@ -4179,7 +4440,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "tooltip.pointer.line.width",
                 "virtualPath": ""
@@ -4187,6 +4449,7 @@
               {
                 "key": "color",
                 "config": {
+                  "id": 3021,
                   "type": "string",
                   "component": "color",
                   "alias": "颜色",
@@ -4209,7 +4472,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "tooltip.pointer.line.color",
                 "virtualPath": ""
@@ -4217,6 +4481,7 @@
               {
                 "key": "dashedLength",
                 "config": {
+                  "id": 9297,
                   "type": "number",
                   "component": "number",
                   "alias": "长度",
@@ -4239,7 +4504,8 @@
                     "field": "type",
                     "value": "dashed"
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "tooltip.pointer.line.dashedLength",
                 "virtualPath": ""
@@ -4247,6 +4513,7 @@
               {
                 "key": "dashedSpace",
                 "config": {
+                  "id": 860,
                   "type": "number",
                   "component": "number",
                   "alias": "间距",
@@ -4269,7 +4536,8 @@
                     "field": "type",
                     "value": "dashed"
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "tooltip.pointer.line.dashedSpace",
                 "virtualPath": ""
@@ -4300,6 +4568,7 @@
   {
     "key": "legend",
     "config": {
+      "id": 3088,
       "type": "object",
       "component": "none",
       "alias": "图例",
@@ -4322,7 +4591,8 @@
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "legend",
     "virtualPath": "",
@@ -4330,6 +4600,7 @@
       {
         "key": "show",
         "config": {
+          "id": 6362,
           "type": "boolean",
           "component": "switch",
           "alias": "",
@@ -4352,7 +4623,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "legend.show",
         "virtualPath": ""
@@ -4360,6 +4632,7 @@
       {
         "key": "position",
         "config": {
+          "id": 2549,
           "type": "string",
           "component": "legendLocation",
           "alias": "位置",
@@ -4382,7 +4655,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "legend.position",
         "virtualPath": ""
@@ -4390,6 +4664,7 @@
       {
         "key": "orient",
         "config": {
+          "id": 183,
           "type": "string",
           "component": "orient",
           "alias": "布局方式",
@@ -4412,7 +4687,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": true
+          "flatValue": true,
+          "isRange": false
         },
         "path": "legend.orient",
         "virtualPath": ""
@@ -4420,6 +4696,7 @@
       {
         "key": "textStyle",
         "config": {
+          "id": 9983,
           "type": "object",
           "component": "none",
           "alias": "文本样式",
@@ -4442,7 +4719,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "legend.textStyle",
         "virtualPath": "",
@@ -4450,6 +4728,7 @@
           {
             "key": "fontSize",
             "config": {
+              "id": 3172,
               "type": "number",
               "component": "number",
               "alias": "字号",
@@ -4472,24 +4751,26 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "legend.textStyle.fontSize",
             "virtualPath": ""
           },
           {
-            "key": "color",
+            "key": "fontWeight",
             "config": {
+              "id": 5394,
               "type": "string",
-              "component": "color",
-              "alias": "颜色",
+              "component": "fontWeight",
+              "alias": "字体粗细",
               "tip": "",
               "displayMode": "inline",
               "features": [],
               "layout": "horizontal",
               "toggleCol": "",
               "isHide": false,
-              "defaultValue": "#90a0ae",
+              "defaultValue": "normal",
               "min": 0,
               "max": 100,
               "step": 1,
@@ -4502,24 +4783,26 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
-            "path": "legend.textStyle.color",
+            "path": "legend.textStyle.fontWeight",
             "virtualPath": ""
           },
           {
-            "key": "fontWeight",
+            "key": "color",
             "config": {
+              "id": 355,
               "type": "string",
-              "component": "fontWeight",
-              "alias": "字体粗细",
+              "component": "color",
+              "alias": "颜色",
               "tip": "",
               "displayMode": "inline-single",
               "features": [],
               "layout": "horizontal",
               "toggleCol": "",
               "isHide": false,
-              "defaultValue": "normal",
+              "defaultValue": "#90a0ae",
               "min": 0,
               "max": 100,
               "step": 1,
@@ -4532,21 +4815,23 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
-            "path": "legend.textStyle.fontWeight",
+            "path": "legend.textStyle.color",
             "virtualPath": ""
           }
         ],
         "cols": [
           "fontSize",
-          "color",
-          "fontWeight"
+          "fontWeight",
+          "color"
         ]
       },
       {
         "key": "symbol",
         "config": {
+          "id": 3689,
           "type": "object",
           "component": "none",
           "alias": "图例图标",
@@ -4569,7 +4854,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "legend.symbol",
         "virtualPath": "",
@@ -4577,6 +4863,7 @@
           {
             "key": "show",
             "config": {
+              "id": 6466,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -4599,7 +4886,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "legend.symbol.show",
             "virtualPath": ""
@@ -4607,6 +4895,7 @@
           {
             "key": "icon",
             "config": {
+              "id": 4635,
               "type": "string",
               "component": "echartIcon",
               "alias": "图标",
@@ -4629,7 +4918,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "legend.symbol.icon",
             "virtualPath": ""
@@ -4637,6 +4927,7 @@
           {
             "key": "width",
             "config": {
+              "id": 4474,
               "type": "number",
               "component": "number",
               "alias": "宽度",
@@ -4659,7 +4950,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "legend.symbol.width",
             "virtualPath": ""
@@ -4667,6 +4959,7 @@
           {
             "key": "height",
             "config": {
+              "id": 2789,
               "type": "number",
               "component": "number",
               "alias": "高度",
@@ -4689,7 +4982,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "legend.symbol.height",
             "virtualPath": ""
@@ -4697,6 +4991,7 @@
           {
             "key": "gap",
             "config": {
+              "id": 5656,
               "type": "number",
               "component": "number",
               "alias": "间隔",
@@ -4719,7 +5014,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "legend.symbol.gap",
             "virtualPath": ""
@@ -4736,6 +5032,7 @@
       {
         "key": "page",
         "config": {
+          "id": 3780,
           "type": "object",
           "component": "none",
           "alias": "翻页功能",
@@ -4758,7 +5055,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "legend.page",
         "virtualPath": "",
@@ -4766,6 +5064,7 @@
           {
             "key": "enabled",
             "config": {
+              "id": 3285,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -4788,7 +5087,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "legend.page.enabled",
             "virtualPath": ""
@@ -4796,6 +5096,7 @@
           {
             "key": "size",
             "config": {
+              "id": 7510,
               "type": "object",
               "component": "none",
               "alias": "容器尺寸",
@@ -4818,7 +5119,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "legend.page.size",
             "virtualPath": "",
@@ -4826,6 +5128,7 @@
               {
                 "key": "width",
                 "config": {
+                  "id": 2069,
                   "type": "number",
                   "component": "number",
                   "alias": "宽度",
@@ -4848,7 +5151,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "legend.page.size.width",
                 "virtualPath": ""
@@ -4856,6 +5160,7 @@
               {
                 "key": "height",
                 "config": {
+                  "id": 272,
                   "type": "number",
                   "component": "number",
                   "alias": "高度",
@@ -4878,7 +5183,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "legend.page.size.height",
                 "virtualPath": ""
@@ -4892,6 +5198,7 @@
           {
             "key": "button",
             "config": {
+              "id": 6776,
               "type": "object",
               "component": "none",
               "alias": "翻页按钮",
@@ -4914,7 +5221,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "legend.page.button",
             "virtualPath": "",
@@ -4922,6 +5230,7 @@
               {
                 "key": "size",
                 "config": {
+                  "id": 474,
                   "type": "number",
                   "component": "number",
                   "alias": "尺寸",
@@ -4944,7 +5253,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "legend.page.button.size",
                 "virtualPath": ""
@@ -4952,6 +5262,7 @@
               {
                 "key": "color",
                 "config": {
+                  "id": 2485,
                   "type": "string",
                   "component": "color",
                   "alias": "颜色",
@@ -4974,7 +5285,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "legend.page.button.color",
                 "virtualPath": ""
@@ -4982,6 +5294,7 @@
               {
                 "key": "inactiveColor",
                 "config": {
+                  "id": 6348,
                   "type": "string",
                   "component": "color",
                   "alias": "禁用颜色",
@@ -5004,7 +5317,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "legend.page.button.inactiveColor",
                 "virtualPath": ""
@@ -5019,6 +5333,7 @@
           {
             "key": "pageNumColor",
             "config": {
+              "id": 2165,
               "type": "string",
               "component": "color",
               "alias": "页码颜色",
@@ -5041,7 +5356,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "legend.page.pageNumColor",
             "virtualPath": ""
@@ -5067,6 +5383,7 @@
   {
     "key": "series",
     "config": {
+      "id": 1498,
       "type": "array",
       "component": "none",
       "alias": "系列",
@@ -5095,7 +5412,8 @@
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "series",
     "virtualPath": "",
@@ -5103,6 +5421,7 @@
       {
         "key": "0",
         "config": {
+          "id": 3243,
           "type": "object",
           "component": "none",
           "alias": "系列",
@@ -5125,7 +5444,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "series.0",
         "virtualPath": "",
@@ -5133,6 +5453,7 @@
           {
             "key": "type",
             "config": {
+              "id": 1226,
               "type": "string",
               "component": "input",
               "alias": "",
@@ -5155,7 +5476,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "series.0.type",
             "virtualPath": "slotProps.item.type"
@@ -5163,6 +5485,7 @@
           {
             "key": "id",
             "config": {
+              "id": 4245,
               "type": "string",
               "component": "input",
               "alias": "",
@@ -5172,7 +5495,7 @@
               "layout": "horizontal",
               "toggleCol": "",
               "isHide": true,
-              "defaultValue": "系列1_SZK4aP20xe",
+              "defaultValue": "系列1_lRv_NYgw5p",
               "min": 0,
               "max": 100,
               "step": 1,
@@ -5185,7 +5508,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "series.0.id",
             "virtualPath": "slotProps.item.id"
@@ -5193,6 +5517,7 @@
           {
             "key": "name",
             "config": {
+              "id": 7413,
               "type": "string",
               "component": "input",
               "alias": "系列名称",
@@ -5215,7 +5540,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "series.0.name",
             "virtualPath": "slotProps.item.name"
@@ -5223,6 +5549,7 @@
           {
             "key": "color",
             "config": {
+              "id": 595,
               "type": "object",
               "component": "none",
               "alias": "颜色配置",
@@ -5245,7 +5572,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "series.0.color",
             "virtualPath": "slotProps.item.color",
@@ -5253,6 +5581,7 @@
               {
                 "key": "type",
                 "config": {
+                  "id": 2002,
                   "type": "string",
                   "component": "fillType",
                   "alias": "填充类型",
@@ -5275,7 +5604,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": true
+                  "flatValue": true,
+                  "isRange": false
                 },
                 "path": "series.0.color.type",
                 "virtualPath": "slotProps.item.color.type"
@@ -5283,6 +5613,7 @@
               {
                 "key": "value",
                 "config": {
+                  "id": 9709,
                   "type": "string",
                   "component": "color",
                   "alias": "颜色",
@@ -5305,7 +5636,8 @@
                     "field": "type",
                     "value": "solid"
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.color.value",
                 "virtualPath": "slotProps.item.color.value"
@@ -5313,6 +5645,7 @@
               {
                 "key": "from",
                 "config": {
+                  "id": 1088,
                   "type": "string",
                   "component": "color",
                   "alias": "开始颜色",
@@ -5335,7 +5668,8 @@
                     "field": "type",
                     "value": "gradient"
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.color.from",
                 "virtualPath": "slotProps.item.color.from"
@@ -5343,6 +5677,7 @@
               {
                 "key": "to",
                 "config": {
+                  "id": 7070,
                   "type": "string",
                   "component": "color",
                   "alias": "结束颜色",
@@ -5365,7 +5700,8 @@
                     "field": "type",
                     "value": "gradient"
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.color.to",
                 "virtualPath": "slotProps.item.color.to"
@@ -5386,6 +5722,7 @@
   {
     "key": "animation",
     "config": {
+      "id": 544,
       "type": "object",
       "component": "none",
       "alias": "动画",
@@ -5408,7 +5745,8 @@
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "animation",
     "virtualPath": "",
@@ -5416,6 +5754,7 @@
       {
         "key": "enabled",
         "config": {
+          "id": 6565,
           "type": "boolean",
           "component": "switch",
           "alias": "",
@@ -5438,7 +5777,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "animation.enabled",
         "virtualPath": ""
@@ -5446,6 +5786,7 @@
       {
         "key": "duration",
         "config": {
+          "id": 1563,
           "type": "number",
           "component": "number",
           "alias": "持续时间",
@@ -5468,7 +5809,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "animation.duration",
         "virtualPath": ""
@@ -5476,6 +5818,7 @@
       {
         "key": "easing",
         "config": {
+          "id": 5730,
           "type": "string",
           "component": "animationEasing",
           "alias": "缓动效果",
@@ -5498,7 +5841,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "animation.easing",
         "virtualPath": ""
@@ -5506,6 +5850,7 @@
       {
         "key": "delay",
         "config": {
+          "id": 8349,
           "type": "number",
           "component": "number",
           "alias": "延迟",
@@ -5528,7 +5873,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "animation.delay",
         "virtualPath": ""
@@ -5541,4 +5887,4 @@
       "delay"
     ]
   }
-]
+]
\ No newline at end of file
diff --git a/src/components/bar/basic-bar/src/config.vue b/src/components/bar/basic-bar/src/config.vue
index 117a3ccf..cca04538 100644
--- a/src/components/bar/basic-bar/src/config.vue
+++ b/src/components/bar/basic-bar/src/config.vue
@@ -87,7 +87,7 @@
         <g-select-suggest
           v-model="config.global.barWidth"
           :data="selectSuggests"
-          :filters="['auto']"
+          :filters="enumData1341"
         />
       </g-field>
       <g-field-collapse
@@ -133,17 +133,17 @@
           inline="inline"
           label="字号"
         />
-        <g-color-picker
-          v-model="config.label.textStyle.color"
-          inline="inline"
-          label="颜色"
-        />
         <g-select
           v-model="config.label.textStyle.fontWeight"
           :data="fontWeights"
           inline="inline"
           label="字体粗细"
         />
+        <g-color-picker
+          v-model="config.label.textStyle.color"
+          inline="inline-single"
+          label="颜色"
+        />
       </g-field>
       <g-field
         :level="2"
@@ -177,25 +177,18 @@
         :level="2"
         label="类型"
       >
-        <n-radio-group
-          v-model:value="config.xAxis.type"
-          size="small"
-        >
-          <n-radio-button
-            v-for="em in axisTypes"
-            :key="em.id"
-            :value="em.id"
-          >
-            {{ em.value }}
-          </n-radio-button>
-        </n-radio-group>
+        <g-radio-group
+          v-model="config.xAxis.type"
+          :data="axisTypes"
+          is-button
+        />
       </g-field>
       <g-field
         :level="2"
         label="两端留白"
       >
-        <n-switch
-          v-model:value="config.xAxis.boundaryGap"
+        <g-switch
+          v-model="config.xAxis.boundaryGap"
         />
       </g-field>
       <g-field-collapse
@@ -258,17 +251,17 @@
             inline="inline"
             label="字号"
           />
-          <g-color-picker
-            v-model="config.xAxis.title.textStyle.color"
-            inline="inline"
-            label="颜色"
-          />
           <g-select
             v-model="config.xAxis.title.textStyle.fontWeight"
             :data="fontWeights"
             inline="inline"
             label="字体粗细"
           />
+          <g-color-picker
+            v-model="config.xAxis.title.textStyle.color"
+            inline="inline-single"
+            label="颜色"
+          />
         </g-field>
       </g-field-collapse>
       <g-field-collapse
@@ -347,7 +340,6 @@
         label="轴标签"
       >
         <g-field
-          v-if="config.xAxis.type === 'value'"
           :level="2"
           tooltip="整数参照 d, 浮点参照 .1f"
           label="显示格式"
@@ -358,7 +350,6 @@
           />
         </g-field>
         <g-field
-          v-if="config.xAxis.type === 'time'"
           :level="2"
           tooltip="时间请参照 YYYY/MM/DD HH:mm:ss"
           label="显示格式"
@@ -376,7 +367,7 @@
           <g-select-suggest
             v-model="config.xAxis.axisLabel.interval"
             :data="selectSuggests"
-            :filters="['auto', '0', '1', '2']"
+            :filters="enumData1455"
           />
         </g-field>
         <g-field
@@ -426,17 +417,17 @@
             inline="inline"
             label="字号"
           />
-          <g-color-picker
-            v-model="config.xAxis.axisLabel.textStyle.color"
-            inline="inline"
-            label="颜色"
-          />
           <g-select
             v-model="config.xAxis.axisLabel.textStyle.fontWeight"
             :data="fontWeights"
             inline="inline"
             label="字体粗细"
           />
+          <g-color-picker
+            v-model="config.xAxis.axisLabel.textStyle.color"
+            inline="inline-single"
+            label="颜色"
+          />
         </g-field>
       </g-field-collapse>
       <g-field-collapse
@@ -505,14 +496,14 @@
         <g-select-suggest
           v-model="config.yAxis.extent.min"
           :data="selectSuggests"
-          :filters="['auto', 'dataMin']"
+          :filters="enumData5142"
           inline="inline"
           label="最小值"
         />
         <g-select-suggest
           v-model="config.yAxis.extent.max"
           :data="selectSuggests"
-          :filters="['auto', 'dataMax']"
+          :filters="enumData2262"
           inline="inline"
           label="最大值"
         />
@@ -589,17 +580,17 @@
             inline="inline"
             label="字号"
           />
-          <g-color-picker
-            v-model="config.yAxis.title.textStyle.color"
-            inline="inline"
-            label="颜色"
-          />
           <g-select
             v-model="config.yAxis.title.textStyle.fontWeight"
             :data="fontWeights"
             inline="inline"
             label="字体粗细"
           />
+          <g-color-picker
+            v-model="config.yAxis.title.textStyle.color"
+            inline="inline-single"
+            label="颜色"
+          />
         </g-field>
       </g-field-collapse>
       <g-field-collapse
@@ -746,17 +737,17 @@
             inline="inline"
             label="字号"
           />
-          <g-color-picker
-            v-model="config.yAxis.axisLabel.textStyle.color"
-            inline="inline"
-            label="颜色"
-          />
           <g-select
             v-model="config.yAxis.axisLabel.textStyle.fontWeight"
             :data="fontWeights"
             inline="inline"
             label="字体粗细"
           />
+          <g-color-picker
+            v-model="config.yAxis.axisLabel.textStyle.color"
+            inline="inline-single"
+            label="颜色"
+          />
         </g-field>
       </g-field-collapse>
       <g-field-collapse
@@ -834,19 +825,19 @@
         </g-field>
         <g-field
           :level="2"
-          label="颜色"
+          label="字体粗细"
         >
-          <g-color-picker
-            v-model="config.tooltip.textStyle.color"
+          <g-select
+            v-model="config.tooltip.textStyle.fontWeight"
+            :data="fontWeights"
           />
         </g-field>
         <g-field
           :level="2"
-          label="字体粗细"
+          label="颜色"
         >
-          <g-select
-            v-model="config.tooltip.textStyle.fontWeight"
-            :data="fontWeights"
+          <g-color-picker
+            v-model="config.tooltip.textStyle.color"
           />
         </g-field>
       </g-field-collapse>
@@ -957,18 +948,11 @@
         :level="2"
         label="布局方式"
       >
-        <n-radio-group
-          v-model:value="config.legend.orient"
-          size="small"
-        >
-          <n-radio-button
-            v-for="em in orients"
-            :key="em.id"
-            :value="em.id"
-          >
-            {{ em.value }}
-          </n-radio-button>
-        </n-radio-group>
+        <g-radio-group
+          v-model="config.legend.orient"
+          :data="orients"
+          is-button
+        />
       </g-field>
       <g-field
         :level="2"
@@ -984,17 +968,17 @@
           inline="inline"
           label="字号"
         />
-        <g-color-picker
-          v-model="config.legend.textStyle.color"
-          inline="inline"
-          label="颜色"
-        />
         <g-select
           v-model="config.legend.textStyle.fontWeight"
           :data="fontWeights"
-          inline="inline-single"
+          inline="inline"
           label="字体粗细"
         />
+        <g-color-picker
+          v-model="config.legend.textStyle.color"
+          inline="inline-single"
+          label="颜色"
+        />
       </g-field>
       <g-field-collapse
         v-model="config.legend.symbol.show"
@@ -1138,18 +1122,11 @@
             :level="2"
             label="填充类型"
           >
-            <n-radio-group
-              v-model:value="slotProps.item.color.type"
-              size="small"
-            >
-              <n-radio-button
-                v-for="em in fillTypes"
-                :key="em.id"
-                :value="em.id"
-              >
-                {{ em.value }}
-              </n-radio-button>
-            </n-radio-group>
+            <g-radio-group
+              v-model="slotProps.item.color.type"
+              :data="fillTypes"
+              is-button
+            />
           </g-field>
           <g-field
             v-if="slotProps.item.color.type === 'solid'"
@@ -1221,8 +1198,8 @@
   </div>
 </template>
 
-<script lang='ts'>
-import { defineComponent, PropType, toRef } from 'vue'
+<script lang='ts' setup>
+import { toRef } from 'vue'
 import {
   fontFamilys,
   selectSuggests,
@@ -1242,41 +1219,35 @@ import {
 } from '@/data/select-options'
 import { BasicBar, BasicBarSeries } from './basic-bar'
 
-export default defineComponent({
-  name: 'VBasicBarProp',
-  props: {
-    com: {
-      type: Object as PropType<BasicBar>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const config = toRef(props.com, 'config')
+const props = defineProps<{
+  com: BasicBar
+}>()
+
+const config = toRef(props.com, 'config')
+
+const enumData1341 = [
+  'auto',
+]
+
+const enumData1455 = [
+  'auto',
+  '0',
+  '1',
+  '2',
+]
+
+const enumData5142 = [
+  'auto',
+  'dataMin',
+]
 
-    const handleAddSeriesItem = () => {
-      return new BasicBarSeries(`系列${config.value.series.length + 1}`)
-    }
+const enumData2262 = [
+  'auto',
+  'dataMax',
+]
 
-    return {
-      config,
-      handleAddSeriesItem,
+const handleAddSeriesItem = () => {
+  return new BasicBarSeries(`系列${config.value.series.length + 1}`)
+}
 
-      fontFamilys,
-      selectSuggests,
-      echartsLablePositions,
-      fontWeights,
-      axisTypes,
-      titleLocations,
-      lineStyles,
-      valueFormats,
-      timeFormats,
-      hAligns,
-      legendLocations,
-      orients,
-      echartIcons,
-      fillTypes,
-      animationEasings,
-    }
-  },
-})
 </script>
diff --git a/src/components/bar/basic-bar/src/index.vue b/src/components/bar/basic-bar/src/index.vue
index 4d5fccb3..72c84599 100644
--- a/src/components/bar/basic-bar/src/index.vue
+++ b/src/components/bar/basic-bar/src/index.vue
@@ -178,7 +178,9 @@ export default defineComponent({
         xAxis: {
           show: xAxis.show,
           type: xAxis.type,
-          boundaryGap: xAxis.boundaryGap,
+          boundaryGap: xAxis.type === 'category'
+            ? xAxis.boundaryGap : xAxis.boundaryGap
+              ? ['5%', '5%'] : ['0%', '0%'],
           name: xAxis.title.show ? xAxis.title.name : '',
           nameLocation: xAxis.title.location,
           nameRotate: xAxis.title.display.rotate,
diff --git a/src/components/button/full-screen/src/config.json b/src/components/button/full-screen/src/config.json
index 08073884..9eac662c 100644
--- a/src/components/button/full-screen/src/config.json
+++ b/src/components/button/full-screen/src/config.json
@@ -2,6 +2,7 @@
   {
     "key": "request",
     "config": {
+      "id": 1016,
       "type": "string",
       "component": "uploadImage",
       "alias": "全屏显示",
@@ -19,11 +20,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "request",
     "virtualPath": ""
@@ -31,6 +34,7 @@
   {
     "key": "exit",
     "config": {
+      "id": 4398,
       "type": "string",
       "component": "uploadImage",
       "alias": "退出全屏",
@@ -48,11 +52,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "exit",
     "virtualPath": ""
@@ -60,6 +66,7 @@
   {
     "key": "bgColor",
     "config": {
+      "id": 6975,
       "type": "string",
       "component": "color",
       "alias": "背景颜色",
@@ -77,11 +84,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "bgColor",
     "virtualPath": ""
@@ -89,6 +98,7 @@
   {
     "key": "borderRadius",
     "config": {
+      "id": 5965,
       "type": "number",
       "component": "slider",
       "alias": "圆角",
@@ -106,11 +116,13 @@
       "InfiniteMax": false,
       "suffix": "%",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "borderRadius",
     "virtualPath": ""
@@ -118,6 +130,7 @@
   {
     "key": "alwaysShow",
     "config": {
+      "id": 4338,
       "type": "boolean",
       "component": "switch",
       "alias": "始终显示图片背景",
@@ -135,13 +148,15 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "alwaysShow",
     "virtualPath": ""
   }
-]
+]
\ No newline at end of file
diff --git a/src/components/button/full-screen/src/config.vue b/src/components/button/full-screen/src/config.vue
index 6e41cf1e..7c306532 100644
--- a/src/components/button/full-screen/src/config.vue
+++ b/src/components/button/full-screen/src/config.vue
@@ -35,34 +35,21 @@
     <g-field
       label="始终显示图片背景"
     >
-      <n-switch
-        v-model:value="config.alwaysShow"
+      <g-switch
+        v-model="config.alwaysShow"
       />
     </g-field>
   </div>
 </template>
 
-<script lang='ts'>
-import { defineComponent, PropType, toRef } from 'vue'
-import {
-} from '@/data/select-options'
+<script lang='ts' setup>
+import { toRef } from 'vue'
 import { FullScreen } from './full-screen'
 
-export default defineComponent({
-  name: 'VFullScreenProp',
-  props: {
-    com: {
-      type: Object as PropType<FullScreen>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const config = toRef(props.com, 'config')
+const props = defineProps<{
+  com: FullScreen
+}>()
 
-    return {
-      config,
+const config = toRef(props.com, 'config')
 
-    }
-  },
-})
 </script>
diff --git a/src/components/button/full-screen/src/full-screen.ts b/src/components/button/full-screen/src/full-screen.ts
index 6348a244..bb195952 100644
--- a/src/components/button/full-screen/src/full-screen.ts
+++ b/src/components/button/full-screen/src/full-screen.ts
@@ -41,8 +41,6 @@ export class FullScreen extends DatavComponent {
 
   async loadData() {
     try {
-      // 组件静态数据来源，当前项目统一管理目录：public/data/*
-      // 如：public/data/demo/data.json 简写为 => demo/data
       const path = ''
       const res = await getStaticData(this.id, path)
       this.apiData.source.config.data = JSON.stringify(res.data)
diff --git a/src/components/chart/word-cloud/src/config.json b/src/components/chart/word-cloud/src/config.json
index dcefa5d1..5d03665d 100644
--- a/src/components/chart/word-cloud/src/config.json
+++ b/src/components/chart/word-cloud/src/config.json
@@ -2,6 +2,7 @@
   {
     "key": "global",
     "config": {
+      "id": 1625,
       "type": "object",
       "component": "none",
       "alias": "全局样式",
@@ -19,11 +20,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "global",
     "virtualPath": "",
@@ -31,6 +34,7 @@
       {
         "key": "fontFamily",
         "config": {
+          "id": 6065,
           "type": "string",
           "component": "fontFamily",
           "alias": "字体",
@@ -48,11 +52,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.fontFamily",
         "virtualPath": ""
@@ -60,6 +66,7 @@
       {
         "key": "max",
         "config": {
+          "id": 1721,
           "type": "number",
           "component": "slider",
           "alias": "最大字号",
@@ -77,11 +84,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.max",
         "virtualPath": ""
@@ -89,6 +98,7 @@
       {
         "key": "min",
         "config": {
+          "id": 7100,
           "type": "number",
           "component": "slider",
           "alias": "最小字号",
@@ -106,11 +116,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.min",
         "virtualPath": ""
@@ -118,6 +130,7 @@
       {
         "key": "rotationRange",
         "config": {
+          "id": 5428,
           "type": "object",
           "component": "none",
           "alias": "旋转范围",
@@ -135,11 +148,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.rotationRange",
         "virtualPath": "",
@@ -147,6 +162,7 @@
           {
             "key": "min",
             "config": {
+              "id": 5432,
               "type": "number",
               "component": "number",
               "alias": "最小角度",
@@ -164,11 +180,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "global.rotationRange.min",
             "virtualPath": ""
@@ -176,9 +194,10 @@
           {
             "key": "max",
             "config": {
+              "id": 3946,
               "type": "number",
               "component": "number",
-              "alias": "最小角度",
+              "alias": "最大角度",
               "tip": "",
               "displayMode": "inline",
               "features": [],
@@ -193,11 +212,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "global.rotationRange.max",
             "virtualPath": ""
@@ -211,6 +232,7 @@
       {
         "key": "rotate",
         "config": {
+          "id": 5462,
           "type": "number",
           "component": "slider",
           "alias": "旋转步长",
@@ -228,11 +250,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.rotate",
         "virtualPath": ""
@@ -240,6 +264,7 @@
       {
         "key": "drawType",
         "config": {
+          "id": 2085,
           "type": "string",
           "component": "radio",
           "alias": "绘制类型",
@@ -256,15 +281,23 @@
           "InfiniteMin": false,
           "InfiniteMax": false,
           "suffix": "",
-          "enums": [
-            "preset",
-            "image"
+          "enums": [],
+          "pairs": [
+            {
+              "key": "preset",
+              "value": "内置"
+            },
+            {
+              "key": "image",
+              "value": "自定义"
+            }
           ],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.drawType",
         "virtualPath": ""
@@ -272,8 +305,9 @@
       {
         "key": "shape",
         "config": {
+          "id": 7870,
           "type": "string",
-          "component": "radio",
+          "component": "select",
           "alias": "图形",
           "tip": "",
           "displayMode": "single",
@@ -288,17 +322,31 @@
           "InfiniteMin": false,
           "InfiniteMax": false,
           "suffix": "",
-          "enums": [
-            "circle",
-            "triangle",
-            "diamond",
-            "pentagon"
+          "enums": [],
+          "pairs": [
+            {
+              "key": "circle",
+              "value": "圆形"
+            },
+            {
+              "key": "triangle",
+              "value": "三矩形"
+            },
+            {
+              "key": "diamond",
+              "value": "菱形"
+            },
+            {
+              "key": "pentagon",
+              "value": "五角星"
+            }
           ],
           "whichEnum": {
             "field": "drawType",
             "value": "preset"
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.shape",
         "virtualPath": ""
@@ -306,6 +354,7 @@
       {
         "key": "image",
         "config": {
+          "id": 6143,
           "type": "string",
           "component": "uploadImage",
           "alias": "形状图片",
@@ -323,11 +372,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "drawType",
             "value": "image"
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.image",
         "virtualPath": ""
@@ -347,6 +398,7 @@
   {
     "key": "series",
     "config": {
+      "id": 643,
       "type": "array",
       "component": "none",
       "alias": "系列",
@@ -370,11 +422,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "series",
     "virtualPath": "",
@@ -382,6 +436,7 @@
       {
         "key": "0",
         "config": {
+          "id": 3589,
           "type": "object",
           "component": "none",
           "alias": "系列",
@@ -399,11 +454,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "series.0",
         "virtualPath": "",
@@ -411,6 +468,7 @@
           {
             "key": "type",
             "config": {
+              "id": 3819,
               "type": "string",
               "component": "input",
               "alias": "",
@@ -428,11 +486,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "series.0.type",
             "virtualPath": "slotProps.item.type"
@@ -440,6 +500,7 @@
           {
             "key": "id",
             "config": {
+              "id": 1458,
               "type": "string",
               "component": "input",
               "alias": "",
@@ -449,7 +510,7 @@
               "layout": "horizontal",
               "toggleCol": "",
               "isHide": true,
-              "defaultValue": "系列1_KNhwlz3Nnn",
+              "defaultValue": "0_qGiU7dtKL_",
               "min": 0,
               "max": 100,
               "step": 1,
@@ -457,11 +518,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "series.0.id",
             "virtualPath": "slotProps.item.id"
@@ -469,6 +532,7 @@
           {
             "key": "name",
             "config": {
+              "id": 5276,
               "type": "string",
               "component": "input",
               "alias": "系列名称",
@@ -486,11 +550,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "series.0.name",
             "virtualPath": "slotProps.item.name"
@@ -498,6 +564,7 @@
           {
             "key": "color",
             "config": {
+              "id": 754,
               "type": "string",
               "component": "color",
               "alias": "颜色",
@@ -515,11 +582,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "series.0.color",
             "virtualPath": "slotProps.item.color"
@@ -532,6 +601,7 @@
   {
     "key": "tooltip",
     "config": {
+      "id": 5274,
       "type": "object",
       "component": "none",
       "alias": "提示框",
@@ -549,11 +619,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "tooltip",
     "virtualPath": "",
@@ -561,6 +633,7 @@
       {
         "key": "show",
         "config": {
+          "id": 4704,
           "type": "boolean",
           "component": "switch",
           "alias": "",
@@ -578,11 +651,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "tooltip.show",
         "virtualPath": ""
@@ -590,6 +665,7 @@
       {
         "key": "textStyle",
         "config": {
+          "id": 5377,
           "type": "object",
           "component": "none",
           "alias": "文本样式",
@@ -607,11 +683,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "tooltip.textStyle",
         "virtualPath": "",
@@ -619,6 +697,7 @@
           {
             "key": "fontSize",
             "config": {
+              "id": 8259,
               "type": "number",
               "component": "number",
               "alias": "字号",
@@ -636,11 +715,13 @@
               "InfiniteMax": false,
               "suffix": "px",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "tooltip.textStyle.fontSize",
             "virtualPath": ""
@@ -648,6 +729,7 @@
           {
             "key": "color",
             "config": {
+              "id": 4836,
               "type": "string",
               "component": "color",
               "alias": "颜色",
@@ -665,11 +747,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "tooltip.textStyle.color",
             "virtualPath": ""
@@ -677,6 +761,7 @@
           {
             "key": "fontWeight",
             "config": {
+              "id": 8430,
               "type": "string",
               "component": "fontWeight",
               "alias": "字体粗细",
@@ -694,11 +779,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "tooltip.textStyle.fontWeight",
             "virtualPath": ""
@@ -713,6 +800,7 @@
       {
         "key": "backgroundColor",
         "config": {
+          "id": 6823,
           "type": "string",
           "component": "color",
           "alias": "背景颜色",
@@ -730,11 +818,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "tooltip.backgroundColor",
         "virtualPath": ""
@@ -749,6 +839,7 @@
   {
     "key": "animation",
     "config": {
+      "id": 6473,
       "type": "object",
       "component": "none",
       "alias": "",
@@ -766,11 +857,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "animation",
     "virtualPath": "",
@@ -778,6 +871,7 @@
       {
         "key": "enabled",
         "config": {
+          "id": 2114,
           "type": "boolean",
           "component": "switch",
           "alias": "",
@@ -795,11 +889,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "animation.enabled",
         "virtualPath": ""
@@ -809,4 +905,4 @@
       "enabled"
     ]
   }
-]
+]
\ No newline at end of file
diff --git a/src/components/chart/word-cloud/src/config.vue b/src/components/chart/word-cloud/src/config.vue
index 5ed9630e..ac3e8ef9 100644
--- a/src/components/chart/word-cloud/src/config.vue
+++ b/src/components/chart/word-cloud/src/config.vue
@@ -54,7 +54,7 @@
           :max="360"
           :step="1"
           inline="inline"
-          label="最小角度"
+          label="最大角度"
         />
       </g-field>
       <g-field
@@ -72,36 +72,20 @@
         :level="2"
         label="绘制类型"
       >
-        <n-radio-group
-          v-model:value="config.global.drawType"
-          size="small"
-        >
-          <n-radio-button
-            v-for="em in drawTypes"
-            :key="em.id"
-            :value="em.id"
-          >
-            {{ em.value }}
-          </n-radio-button>
-        </n-radio-group>
+        <g-radio-group
+          v-model="config.global.drawType"
+          :data="pairData2085"
+        />
       </g-field>
       <g-field
         v-if="config.global.drawType === 'preset'"
         :level="2"
         label="图形"
       >
-        <n-radio-group
-          v-model:value="config.global.shape"
-          size="small"
-        >
-          <n-radio-button
-            v-for="em in simpleShapes"
-            :key="em.id"
-            :value="em.id"
-          >
-            {{ em.value }}
-          </n-radio-button>
-        </n-radio-group>
+        <g-select
+          v-model="config.global.shape"
+          :data="pairData7870"
+        />
       </g-field>
       <g-field
         v-if="config.global.drawType === 'image'"
@@ -117,7 +101,7 @@
       label="系列"
       mode="layout"
       default-layout="horizontal"
-      :features="['vertical','horizontal','copy','add','remove']"
+      :features="['vertical', 'horizontal', 'copy', 'add', 'remove']"
       :list="config.series"
       :min="0"
       :max="100"
@@ -186,38 +170,34 @@
   </div>
 </template>
 
-<script lang='ts'>
-import { defineComponent, PropType, toRef } from 'vue'
+<script lang='ts' setup>
+import { toRef } from 'vue'
 import {
   fontFamilys,
   fontWeights,
 } from '@/data/select-options'
-import { WordCloud, WordCloudSeries, drawTypes, simpleShapes } from './word-cloud'
+import { WordCloud, WordCloudSeries } from './word-cloud'
+
+const props = defineProps<{
+  com: WordCloud
+}>()
+
+const config = toRef(props.com, 'config')
 
-export default defineComponent({
-  name: 'VWordCloudProp',
-  props: {
-    com: {
-      type: Object as PropType<WordCloud>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const config = toRef(props.com, 'config')
+const pairData2085 = [
+  { key: 'preset', value: '内置' },
+  { key: 'image', value: '自定义' },
+]
 
-    const handleAddSeriesItem = () => {
-      return new WordCloudSeries(`系列${config.value.series.length + 1}`, '#fff')
-    }
+const pairData7870 = [
+  { key: 'circle', value: '圆形' },
+  { key: 'triangle', value: '三矩形' },
+  { key: 'diamond', value: '菱形' },
+  { key: 'pentagon', value: '五角星' },
+]
 
-    return {
-      config,
+const handleAddSeriesItem = () => {
+  return new WordCloudSeries(`系列${config.value.series.length + 1}`, '#fff')
+}
 
-      fontFamilys,
-      fontWeights,
-      drawTypes,
-      simpleShapes,
-      handleAddSeriesItem,
-    }
-  },
-})
 </script>
diff --git a/src/components/chart/word-cloud/src/word-cloud.ts b/src/components/chart/word-cloud/src/word-cloud.ts
index 03471cb3..f400f1e2 100644
--- a/src/components/chart/word-cloud/src/word-cloud.ts
+++ b/src/components/chart/word-cloud/src/word-cloud.ts
@@ -97,16 +97,4 @@ export class WordCloud extends DatavEChartsComponent {
   }
 }
 
-export const drawTypes = [
-  { id: 'preset', value: '内置图形' },
-  { id: 'image', value: '自定义图形' },
-]
-
-export const simpleShapes = [
-  { id: 'circle', value: '圆形' },
-  { id: 'triangle', value: '三矩形' },
-  { id: 'diamond', value: '菱形' },
-  { id: 'pentagon', value: '五角星' },
-]
-
 export default WordCloud
diff --git a/src/components/line/basic-line/src/basic-line.ts b/src/components/line/basic-line/src/basic-line.ts
index cc27220e..9a298be4 100644
--- a/src/components/line/basic-line/src/basic-line.ts
+++ b/src/components/line/basic-line/src/basic-line.ts
@@ -88,8 +88,8 @@ export class BasicLine extends DatavEChartsComponent {
         },
         textStyle: {
           fontSize: 12,
-          color: '#90a0ae',
           fontWeight: 'normal',
+          color: '#90a0ae',
         },
       },
       axisLine: {
@@ -116,8 +116,8 @@ export class BasicLine extends DatavEChartsComponent {
         align: 'center',
         textStyle: {
           fontSize: 12,
-          color: 'rgba(255, 255, 255, 0.6)',
           fontWeight: 'normal',
+          color: 'rgba(255, 255, 255, 0.6)',
         },
       },
       grid: {
@@ -148,8 +148,8 @@ export class BasicLine extends DatavEChartsComponent {
         },
         textStyle: {
           fontSize: 12,
-          color: '#90a0ae',
           fontWeight: 'normal',
+          color: '#90a0ae',
         },
       },
       axisLine: {
@@ -176,8 +176,8 @@ export class BasicLine extends DatavEChartsComponent {
         align: 'right',
         textStyle: {
           fontSize: 12,
-          color: 'rgba(255, 255, 255, 0.6)',
           fontWeight: 'normal',
+          color: 'rgba(255, 255, 255, 0.6)',
         },
       },
       grid: {
@@ -196,8 +196,8 @@ export class BasicLine extends DatavEChartsComponent {
       triggerOn: 'mousemove',
       textStyle: {
         fontSize: 14,
-        color: '#fff',
         fontWeight: 'normal',
+        color: '#fff',
       },
       background: {
         padding: {
@@ -225,8 +225,8 @@ export class BasicLine extends DatavEChartsComponent {
       orient: 'horizontal',
       textStyle: {
         fontSize: 12,
-        color: '#90a0ae',
         fontWeight: 'normal',
+        color: '#90a0ae',
       },
       symbol: {
         show: true,
diff --git a/src/components/line/basic-line/src/config.json b/src/components/line/basic-line/src/config.json
index a781ee8e..f95ff966 100644
--- a/src/components/line/basic-line/src/config.json
+++ b/src/components/line/basic-line/src/config.json
@@ -2,6 +2,7 @@
   {
     "key": "global",
     "config": {
+      "id": 4205,
       "type": "object",
       "component": "none",
       "alias": "全局",
@@ -24,7 +25,8 @@
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "global",
     "virtualPath": "",
@@ -32,6 +34,7 @@
       {
         "key": "fontFamily",
         "config": {
+          "id": 8017,
           "type": "string",
           "component": "fontFamily",
           "alias": "字体",
@@ -54,7 +57,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.fontFamily",
         "virtualPath": ""
@@ -62,6 +66,7 @@
       {
         "key": "margin",
         "config": {
+          "id": 9764,
           "type": "object",
           "component": "none",
           "alias": "边距",
@@ -84,7 +89,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.margin",
         "virtualPath": "",
@@ -92,6 +98,7 @@
           {
             "key": "top",
             "config": {
+              "id": 4123,
               "type": "number",
               "component": "number",
               "alias": "顶部",
@@ -114,7 +121,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "global.margin.top",
             "virtualPath": ""
@@ -122,6 +130,7 @@
           {
             "key": "bottom",
             "config": {
+              "id": 7435,
               "type": "number",
               "component": "number",
               "alias": "底部",
@@ -144,7 +153,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "global.margin.bottom",
             "virtualPath": ""
@@ -152,6 +162,7 @@
           {
             "key": "left",
             "config": {
+              "id": 1148,
               "type": "number",
               "component": "number",
               "alias": "左侧",
@@ -174,7 +185,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "global.margin.left",
             "virtualPath": ""
@@ -182,6 +194,7 @@
           {
             "key": "right",
             "config": {
+              "id": 796,
               "type": "number",
               "component": "number",
               "alias": "右侧",
@@ -204,7 +217,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "global.margin.right",
             "virtualPath": ""
@@ -220,6 +234,7 @@
       {
         "key": "connectNulls",
         "config": {
+          "id": 1675,
           "type": "boolean",
           "component": "switch",
           "alias": "连接空数据",
@@ -242,7 +257,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.connectNulls",
         "virtualPath": ""
@@ -257,6 +273,7 @@
   {
     "key": "xAxis",
     "config": {
+      "id": 5188,
       "type": "object",
       "component": "none",
       "alias": "X轴",
@@ -279,7 +296,8 @@
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "xAxis",
     "virtualPath": "",
@@ -287,6 +305,7 @@
       {
         "key": "show",
         "config": {
+          "id": 1714,
           "type": "boolean",
           "component": "switch",
           "alias": "",
@@ -309,7 +328,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "xAxis.show",
         "virtualPath": ""
@@ -317,6 +337,7 @@
       {
         "key": "type",
         "config": {
+          "id": 2248,
           "type": "string",
           "component": "axisType",
           "alias": "数据类型",
@@ -339,7 +360,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": true
+          "flatValue": true,
+          "isRange": false
         },
         "path": "xAxis.type",
         "virtualPath": ""
@@ -347,6 +369,7 @@
       {
         "key": "extent",
         "config": {
+          "id": 4944,
           "type": "object",
           "component": "none",
           "alias": "显示范围",
@@ -369,7 +392,8 @@
             "field": "type",
             "value": "value"
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "xAxis.extent",
         "virtualPath": "",
@@ -377,6 +401,7 @@
           {
             "key": "min",
             "config": {
+              "id": 1220,
               "type": "string",
               "component": "selectSuggest",
               "alias": "最小值",
@@ -403,7 +428,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.extent.min",
             "virtualPath": ""
@@ -411,6 +437,7 @@
           {
             "key": "max",
             "config": {
+              "id": 9631,
               "type": "string",
               "component": "selectSuggest",
               "alias": "最大值",
@@ -437,7 +464,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.extent.max",
             "virtualPath": ""
@@ -451,6 +479,7 @@
       {
         "key": "boundaryGap",
         "config": {
+          "id": 8024,
           "type": "boolean",
           "component": "switch",
           "alias": "两端留白",
@@ -473,7 +502,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "xAxis.boundaryGap",
         "virtualPath": ""
@@ -481,6 +511,7 @@
       {
         "key": "title",
         "config": {
+          "id": 9891,
           "type": "object",
           "component": "none",
           "alias": "轴标题",
@@ -503,7 +534,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "xAxis.title",
         "virtualPath": "",
@@ -511,6 +543,7 @@
           {
             "key": "show",
             "config": {
+              "id": 1039,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -533,7 +566,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.title.show",
             "virtualPath": ""
@@ -541,6 +575,7 @@
           {
             "key": "name",
             "config": {
+              "id": 1179,
               "type": "string",
               "component": "input",
               "alias": "标题显示",
@@ -563,7 +598,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.title.name",
             "virtualPath": ""
@@ -571,6 +607,7 @@
           {
             "key": "location",
             "config": {
+              "id": 2361,
               "type": "string",
               "component": "titleLocation",
               "alias": "位置",
@@ -593,7 +630,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.title.location",
             "virtualPath": ""
@@ -601,6 +639,7 @@
           {
             "key": "display",
             "config": {
+              "id": 9561,
               "type": "object",
               "component": "none",
               "alias": "展示方式",
@@ -623,7 +662,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.title.display",
             "virtualPath": "",
@@ -631,6 +671,7 @@
               {
                 "key": "rotate",
                 "config": {
+                  "id": 4634,
                   "type": "number",
                   "component": "number",
                   "alias": "旋转",
@@ -653,7 +694,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.title.display.rotate",
                 "virtualPath": ""
@@ -661,6 +703,7 @@
               {
                 "key": "offset",
                 "config": {
+                  "id": 9787,
                   "type": "number",
                   "component": "number",
                   "alias": "偏移",
@@ -683,7 +726,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.title.display.offset",
                 "virtualPath": ""
@@ -697,6 +741,7 @@
           {
             "key": "textStyle",
             "config": {
+              "id": 8141,
               "type": "object",
               "component": "none",
               "alias": "文本样式",
@@ -719,7 +764,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.title.textStyle",
             "virtualPath": "",
@@ -727,6 +773,7 @@
               {
                 "key": "fontSize",
                 "config": {
+                  "id": 7609,
                   "type": "number",
                   "component": "number",
                   "alias": "字号",
@@ -749,24 +796,26 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.title.textStyle.fontSize",
                 "virtualPath": ""
               },
               {
-                "key": "color",
+                "key": "fontWeight",
                 "config": {
+                  "id": 2875,
                   "type": "string",
-                  "component": "color",
-                  "alias": "颜色",
+                  "component": "fontWeight",
+                  "alias": "字体粗细",
                   "tip": "",
                   "displayMode": "inline",
                   "features": [],
                   "layout": "horizontal",
                   "toggleCol": "",
                   "isHide": false,
-                  "defaultValue": "#90a0ae",
+                  "defaultValue": "normal",
                   "min": 0,
                   "max": 100,
                   "step": 1,
@@ -779,24 +828,26 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
-                "path": "xAxis.title.textStyle.color",
+                "path": "xAxis.title.textStyle.fontWeight",
                 "virtualPath": ""
               },
               {
-                "key": "fontWeight",
+                "key": "color",
                 "config": {
+                  "id": 2193,
                   "type": "string",
-                  "component": "fontWeight",
-                  "alias": "字体粗细",
+                  "component": "color",
+                  "alias": "颜色",
                   "tip": "",
-                  "displayMode": "inline",
+                  "displayMode": "inline-single",
                   "features": [],
                   "layout": "horizontal",
                   "toggleCol": "",
                   "isHide": false,
-                  "defaultValue": "normal",
+                  "defaultValue": "#90a0ae",
                   "min": 0,
                   "max": 100,
                   "step": 1,
@@ -809,16 +860,17 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
-                "path": "xAxis.title.textStyle.fontWeight",
+                "path": "xAxis.title.textStyle.color",
                 "virtualPath": ""
               }
             ],
             "cols": [
               "fontSize",
-              "color",
-              "fontWeight"
+              "fontWeight",
+              "color"
             ]
           }
         ],
@@ -833,6 +885,7 @@
       {
         "key": "axisLine",
         "config": {
+          "id": 1368,
           "type": "object",
           "component": "none",
           "alias": "轴线",
@@ -855,7 +908,8 @@
             "field": null,
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "xAxis.axisLine",
         "virtualPath": "",
@@ -863,6 +917,7 @@
           {
             "key": "show",
             "config": {
+              "id": 3128,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -885,7 +940,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLine.show",
             "virtualPath": ""
@@ -893,6 +949,7 @@
           {
             "key": "type",
             "config": {
+              "id": 7252,
               "type": "string",
               "component": "lineStyle",
               "alias": "类型",
@@ -915,7 +972,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLine.type",
             "virtualPath": ""
@@ -923,6 +981,7 @@
           {
             "key": "width",
             "config": {
+              "id": 1413,
               "type": "number",
               "component": "number",
               "alias": "粗细",
@@ -945,7 +1004,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLine.width",
             "virtualPath": ""
@@ -953,6 +1013,7 @@
           {
             "key": "color",
             "config": {
+              "id": 5045,
               "type": "string",
               "component": "color",
               "alias": "颜色",
@@ -975,7 +1036,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLine.color",
             "virtualPath": ""
@@ -991,6 +1053,7 @@
       {
         "key": "axisTick",
         "config": {
+          "id": 3913,
           "type": "object",
           "component": "none",
           "alias": "轴刻度",
@@ -1013,7 +1076,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "xAxis.axisTick",
         "virtualPath": "",
@@ -1021,6 +1085,7 @@
           {
             "key": "show",
             "config": {
+              "id": 633,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -1043,7 +1108,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisTick.show",
             "virtualPath": ""
@@ -1051,6 +1117,7 @@
           {
             "key": "type",
             "config": {
+              "id": 2146,
               "type": "string",
               "component": "lineStyle",
               "alias": "类型",
@@ -1073,7 +1140,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisTick.type",
             "virtualPath": ""
@@ -1081,6 +1149,7 @@
           {
             "key": "width",
             "config": {
+              "id": 5106,
               "type": "number",
               "component": "number",
               "alias": "粗细",
@@ -1103,7 +1172,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisTick.width",
             "virtualPath": ""
@@ -1111,6 +1181,7 @@
           {
             "key": "color",
             "config": {
+              "id": 2129,
               "type": "string",
               "component": "color",
               "alias": "颜色",
@@ -1133,7 +1204,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisTick.color",
             "virtualPath": ""
@@ -1149,6 +1221,7 @@
       {
         "key": "axisLabel",
         "config": {
+          "id": 1464,
           "type": "object",
           "component": "none",
           "alias": "轴标签",
@@ -1171,7 +1244,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "xAxis.axisLabel",
         "virtualPath": "",
@@ -1179,6 +1253,7 @@
           {
             "key": "show",
             "config": {
+              "id": 1435,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -1201,7 +1276,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLabel.show",
             "virtualPath": ""
@@ -1209,6 +1285,7 @@
           {
             "key": "valueFormat",
             "config": {
+              "id": 5684,
               "type": "string",
               "component": "valueFormat",
               "alias": "显示格式",
@@ -1231,7 +1308,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLabel.valueFormat",
             "virtualPath": ""
@@ -1239,6 +1317,7 @@
           {
             "key": "timeFormat",
             "config": {
+              "id": 3569,
               "type": "string",
               "component": "timeFormat",
               "alias": "显示格式",
@@ -1261,7 +1340,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLabel.timeFormat",
             "virtualPath": ""
@@ -1269,6 +1349,7 @@
           {
             "key": "interval",
             "config": {
+              "id": 2745,
               "type": "string",
               "component": "selectSuggest",
               "alias": "间隔",
@@ -1296,7 +1377,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLabel.interval",
             "virtualPath": ""
@@ -1304,6 +1386,7 @@
           {
             "key": "display",
             "config": {
+              "id": 5558,
               "type": "object",
               "component": "none",
               "alias": "展示方式",
@@ -1326,7 +1409,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLabel.display",
             "virtualPath": "",
@@ -1334,6 +1418,7 @@
               {
                 "key": "rotate",
                 "config": {
+                  "id": 908,
                   "type": "number",
                   "component": "number",
                   "alias": "旋转",
@@ -1356,7 +1441,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.axisLabel.display.rotate",
                 "virtualPath": ""
@@ -1364,6 +1450,7 @@
               {
                 "key": "margin",
                 "config": {
+                  "id": 7969,
                   "type": "number",
                   "component": "number",
                   "alias": "偏移",
@@ -1386,7 +1473,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.axisLabel.display.margin",
                 "virtualPath": ""
@@ -1400,6 +1488,7 @@
           {
             "key": "align",
             "config": {
+              "id": 5070,
               "type": "string",
               "component": "hAlign",
               "alias": "对齐方式",
@@ -1422,7 +1511,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLabel.align",
             "virtualPath": ""
@@ -1430,6 +1520,7 @@
           {
             "key": "textStyle",
             "config": {
+              "id": 9697,
               "type": "object",
               "component": "none",
               "alias": "文本样式",
@@ -1452,7 +1543,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.axisLabel.textStyle",
             "virtualPath": "",
@@ -1460,6 +1552,7 @@
               {
                 "key": "fontSize",
                 "config": {
+                  "id": 3577,
                   "type": "number",
                   "component": "number",
                   "alias": "字号",
@@ -1482,24 +1575,26 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.axisLabel.textStyle.fontSize",
                 "virtualPath": ""
               },
               {
-                "key": "color",
+                "key": "fontWeight",
                 "config": {
+                  "id": 8716,
                   "type": "string",
-                  "component": "color",
-                  "alias": "颜色",
+                  "component": "fontWeight",
+                  "alias": "字体粗细",
                   "tip": "",
                   "displayMode": "inline",
                   "features": [],
                   "layout": "horizontal",
                   "toggleCol": "",
                   "isHide": false,
-                  "defaultValue": "rgba(255, 255, 255, 0.6)",
+                  "defaultValue": "normal",
                   "min": 0,
                   "max": 100,
                   "step": 1,
@@ -1512,24 +1607,26 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
-                "path": "xAxis.axisLabel.textStyle.color",
+                "path": "xAxis.axisLabel.textStyle.fontWeight",
                 "virtualPath": ""
               },
               {
-                "key": "fontWeight",
+                "key": "color",
                 "config": {
+                  "id": 4854,
                   "type": "string",
-                  "component": "fontWeight",
-                  "alias": "字体粗细",
+                  "component": "color",
+                  "alias": "颜色",
                   "tip": "",
-                  "displayMode": "inline",
+                  "displayMode": "inline-single",
                   "features": [],
                   "layout": "horizontal",
                   "toggleCol": "",
                   "isHide": false,
-                  "defaultValue": "normal",
+                  "defaultValue": "rgba(255, 255, 255, 0.6)",
                   "min": 0,
                   "max": 100,
                   "step": 1,
@@ -1542,16 +1639,17 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
-                "path": "xAxis.axisLabel.textStyle.fontWeight",
+                "path": "xAxis.axisLabel.textStyle.color",
                 "virtualPath": ""
               }
             ],
             "cols": [
               "fontSize",
-              "color",
-              "fontWeight"
+              "fontWeight",
+              "color"
             ]
           }
         ],
@@ -1568,6 +1666,7 @@
       {
         "key": "grid",
         "config": {
+          "id": 5393,
           "type": "object",
           "component": "none",
           "alias": "网格线",
@@ -1590,7 +1689,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "xAxis.grid",
         "virtualPath": "",
@@ -1598,6 +1698,7 @@
           {
             "key": "show",
             "config": {
+              "id": 9198,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -1620,7 +1721,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.grid.show",
             "virtualPath": ""
@@ -1628,6 +1730,7 @@
           {
             "key": "line",
             "config": {
+              "id": 9784,
               "type": "object",
               "component": "none",
               "alias": "线型样式",
@@ -1650,7 +1753,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "xAxis.grid.line",
             "virtualPath": "",
@@ -1658,6 +1762,7 @@
               {
                 "key": "type",
                 "config": {
+                  "id": 6359,
                   "type": "string",
                   "component": "lineStyle",
                   "alias": "类型",
@@ -1680,7 +1785,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.grid.line.type",
                 "virtualPath": ""
@@ -1688,6 +1794,7 @@
               {
                 "key": "width",
                 "config": {
+                  "id": 5463,
                   "type": "number",
                   "component": "number",
                   "alias": "粗细",
@@ -1710,7 +1817,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.grid.line.width",
                 "virtualPath": ""
@@ -1718,6 +1826,7 @@
               {
                 "key": "color",
                 "config": {
+                  "id": 1323,
                   "type": "string",
                   "component": "color",
                   "alias": "颜色",
@@ -1740,7 +1849,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.grid.line.color",
                 "virtualPath": ""
@@ -1748,6 +1858,7 @@
               {
                 "key": "dashedLength",
                 "config": {
+                  "id": 4655,
                   "type": "number",
                   "component": "number",
                   "alias": "长度",
@@ -1770,7 +1881,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.grid.line.dashedLength",
                 "virtualPath": ""
@@ -1778,6 +1890,7 @@
               {
                 "key": "dashedSpace",
                 "config": {
+                  "id": 85,
                   "type": "number",
                   "component": "number",
                   "alias": "间隔",
@@ -1800,7 +1913,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "xAxis.grid.line.dashedSpace",
                 "virtualPath": ""
@@ -1836,6 +1950,7 @@
   {
     "key": "yAxis",
     "config": {
+      "id": 171,
       "type": "object",
       "component": "none",
       "alias": "Y轴",
@@ -1858,7 +1973,8 @@
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "yAxis",
     "virtualPath": "",
@@ -1866,6 +1982,7 @@
       {
         "key": "show",
         "config": {
+          "id": 9977,
           "type": "boolean",
           "component": "switch",
           "alias": "",
@@ -1888,7 +2005,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "yAxis.show",
         "virtualPath": ""
@@ -1896,6 +2014,7 @@
       {
         "key": "type",
         "config": {
+          "id": 3564,
           "type": "string",
           "component": "axisType",
           "alias": "数据类型",
@@ -1918,7 +2037,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": true
+          "flatValue": true,
+          "isRange": false
         },
         "path": "yAxis.type",
         "virtualPath": ""
@@ -1926,6 +2046,7 @@
       {
         "key": "extent",
         "config": {
+          "id": 3150,
           "type": "object",
           "component": "none",
           "alias": "显示范围",
@@ -1948,7 +2069,8 @@
             "field": "type",
             "value": "value"
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "yAxis.extent",
         "virtualPath": "",
@@ -1956,6 +2078,7 @@
           {
             "key": "min",
             "config": {
+              "id": 7690,
               "type": "string",
               "component": "selectSuggest",
               "alias": "最小值",
@@ -1982,7 +2105,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.extent.min",
             "virtualPath": ""
@@ -1990,6 +2114,7 @@
           {
             "key": "max",
             "config": {
+              "id": 8706,
               "type": "string",
               "component": "selectSuggest",
               "alias": "最大值",
@@ -2016,7 +2141,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.extent.max",
             "virtualPath": ""
@@ -2030,6 +2156,7 @@
       {
         "key": "title",
         "config": {
+          "id": 3694,
           "type": "object",
           "component": "none",
           "alias": "轴标题",
@@ -2052,7 +2179,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "yAxis.title",
         "virtualPath": "",
@@ -2060,6 +2188,7 @@
           {
             "key": "show",
             "config": {
+              "id": 2321,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -2082,7 +2211,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.title.show",
             "virtualPath": ""
@@ -2090,6 +2220,7 @@
           {
             "key": "name",
             "config": {
+              "id": 6369,
               "type": "string",
               "component": "input",
               "alias": "标题显示",
@@ -2112,7 +2243,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.title.name",
             "virtualPath": ""
@@ -2120,6 +2252,7 @@
           {
             "key": "location",
             "config": {
+              "id": 7077,
               "type": "string",
               "component": "titleLocation",
               "alias": "位置",
@@ -2142,7 +2275,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.title.location",
             "virtualPath": ""
@@ -2150,6 +2284,7 @@
           {
             "key": "display",
             "config": {
+              "id": 5440,
               "type": "object",
               "component": "none",
               "alias": "展示方式",
@@ -2172,7 +2307,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.title.display",
             "virtualPath": "",
@@ -2180,6 +2316,7 @@
               {
                 "key": "rotate",
                 "config": {
+                  "id": 5341,
                   "type": "number",
                   "component": "number",
                   "alias": "旋转",
@@ -2202,7 +2339,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.title.display.rotate",
                 "virtualPath": ""
@@ -2210,6 +2348,7 @@
               {
                 "key": "offset",
                 "config": {
+                  "id": 9439,
                   "type": "number",
                   "component": "number",
                   "alias": "偏移",
@@ -2232,7 +2371,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.title.display.offset",
                 "virtualPath": ""
@@ -2246,6 +2386,7 @@
           {
             "key": "textStyle",
             "config": {
+              "id": 9884,
               "type": "object",
               "component": "none",
               "alias": "文本样式",
@@ -2268,7 +2409,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.title.textStyle",
             "virtualPath": "",
@@ -2276,6 +2418,7 @@
               {
                 "key": "fontSize",
                 "config": {
+                  "id": 3701,
                   "type": "number",
                   "component": "number",
                   "alias": "字号",
@@ -2298,24 +2441,26 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.title.textStyle.fontSize",
                 "virtualPath": ""
               },
               {
-                "key": "color",
+                "key": "fontWeight",
                 "config": {
+                  "id": 6170,
                   "type": "string",
-                  "component": "color",
-                  "alias": "颜色",
+                  "component": "fontWeight",
+                  "alias": "字体粗细",
                   "tip": "",
                   "displayMode": "inline",
                   "features": [],
                   "layout": "horizontal",
                   "toggleCol": "",
                   "isHide": false,
-                  "defaultValue": "#90a0ae",
+                  "defaultValue": "normal",
                   "min": 0,
                   "max": 100,
                   "step": 1,
@@ -2328,24 +2473,26 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
-                "path": "yAxis.title.textStyle.color",
+                "path": "yAxis.title.textStyle.fontWeight",
                 "virtualPath": ""
               },
               {
-                "key": "fontWeight",
+                "key": "color",
                 "config": {
+                  "id": 9484,
                   "type": "string",
-                  "component": "fontWeight",
-                  "alias": "字体粗细",
+                  "component": "color",
+                  "alias": "颜色",
                   "tip": "",
-                  "displayMode": "inline",
+                  "displayMode": "inline-single",
                   "features": [],
                   "layout": "horizontal",
                   "toggleCol": "",
                   "isHide": false,
-                  "defaultValue": "normal",
+                  "defaultValue": "#90a0ae",
                   "min": 0,
                   "max": 100,
                   "step": 1,
@@ -2358,16 +2505,17 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
-                "path": "yAxis.title.textStyle.fontWeight",
+                "path": "yAxis.title.textStyle.color",
                 "virtualPath": ""
               }
             ],
             "cols": [
               "fontSize",
-              "color",
-              "fontWeight"
+              "fontWeight",
+              "color"
             ]
           }
         ],
@@ -2382,6 +2530,7 @@
       {
         "key": "axisLine",
         "config": {
+          "id": 5314,
           "type": "object",
           "component": "none",
           "alias": "轴线",
@@ -2404,7 +2553,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "yAxis.axisLine",
         "virtualPath": "",
@@ -2412,6 +2562,7 @@
           {
             "key": "show",
             "config": {
+              "id": 8549,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -2434,7 +2585,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisLine.show",
             "virtualPath": ""
@@ -2442,6 +2594,7 @@
           {
             "key": "type",
             "config": {
+              "id": 4638,
               "type": "string",
               "component": "lineStyle",
               "alias": "类型",
@@ -2464,7 +2617,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisLine.type",
             "virtualPath": ""
@@ -2472,6 +2626,7 @@
           {
             "key": "width",
             "config": {
+              "id": 3720,
               "type": "number",
               "component": "number",
               "alias": "粗细",
@@ -2494,7 +2649,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisLine.width",
             "virtualPath": ""
@@ -2502,6 +2658,7 @@
           {
             "key": "color",
             "config": {
+              "id": 7402,
               "type": "string",
               "component": "color",
               "alias": "颜色",
@@ -2524,7 +2681,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisLine.color",
             "virtualPath": ""
@@ -2540,6 +2698,7 @@
       {
         "key": "axisTick",
         "config": {
+          "id": 7480,
           "type": "object",
           "component": "none",
           "alias": "轴刻度",
@@ -2562,7 +2721,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "yAxis.axisTick",
         "virtualPath": "",
@@ -2570,6 +2730,7 @@
           {
             "key": "show",
             "config": {
+              "id": 8304,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -2592,7 +2753,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisTick.show",
             "virtualPath": ""
@@ -2600,6 +2762,7 @@
           {
             "key": "type",
             "config": {
+              "id": 8995,
               "type": "string",
               "component": "lineStyle",
               "alias": "类型",
@@ -2622,7 +2785,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisTick.type",
             "virtualPath": ""
@@ -2630,6 +2794,7 @@
           {
             "key": "width",
             "config": {
+              "id": 8659,
               "type": "number",
               "component": "number",
               "alias": "粗细",
@@ -2652,7 +2817,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisTick.width",
             "virtualPath": ""
@@ -2660,6 +2826,7 @@
           {
             "key": "color",
             "config": {
+              "id": 1848,
               "type": "string",
               "component": "color",
               "alias": "颜色",
@@ -2682,7 +2849,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisTick.color",
             "virtualPath": ""
@@ -2698,6 +2866,7 @@
       {
         "key": "axisLabel",
         "config": {
+          "id": 766,
           "type": "object",
           "component": "none",
           "alias": "轴标签",
@@ -2720,7 +2889,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "yAxis.axisLabel",
         "virtualPath": "",
@@ -2728,6 +2898,7 @@
           {
             "key": "show",
             "config": {
+              "id": 2512,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -2750,7 +2921,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisLabel.show",
             "virtualPath": ""
@@ -2758,6 +2930,7 @@
           {
             "key": "valueFormat",
             "config": {
+              "id": 1795,
               "type": "string",
               "component": "valueFormat",
               "alias": "显示格式",
@@ -2780,7 +2953,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisLabel.valueFormat",
             "virtualPath": ""
@@ -2788,6 +2962,7 @@
           {
             "key": "timeFormat",
             "config": {
+              "id": 1831,
               "type": "string",
               "component": "timeFormat",
               "alias": "显示格式",
@@ -2810,7 +2985,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisLabel.timeFormat",
             "virtualPath": ""
@@ -2818,6 +2994,7 @@
           {
             "key": "boundaryGap",
             "config": {
+              "id": 3227,
               "type": "number",
               "component": "number",
               "alias": "两端间距",
@@ -2840,7 +3017,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisLabel.boundaryGap",
             "virtualPath": ""
@@ -2848,6 +3026,7 @@
           {
             "key": "display",
             "config": {
+              "id": 7066,
               "type": "object",
               "component": "none",
               "alias": "展示方式",
@@ -2870,7 +3049,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisLabel.display",
             "virtualPath": "",
@@ -2878,6 +3058,7 @@
               {
                 "key": "rotate",
                 "config": {
+                  "id": 9323,
                   "type": "number",
                   "component": "number",
                   "alias": "旋转",
@@ -2900,7 +3081,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.axisLabel.display.rotate",
                 "virtualPath": ""
@@ -2908,6 +3090,7 @@
               {
                 "key": "margin",
                 "config": {
+                  "id": 4411,
                   "type": "number",
                   "component": "number",
                   "alias": "偏移",
@@ -2930,7 +3113,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.axisLabel.display.margin",
                 "virtualPath": ""
@@ -2944,6 +3128,7 @@
           {
             "key": "align",
             "config": {
+              "id": 1408,
               "type": "string",
               "component": "hAlign",
               "alias": "对齐方式",
@@ -2966,7 +3151,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisLabel.align",
             "virtualPath": ""
@@ -2974,6 +3160,7 @@
           {
             "key": "textStyle",
             "config": {
+              "id": 4185,
               "type": "object",
               "component": "none",
               "alias": "文本样式",
@@ -2996,7 +3183,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.axisLabel.textStyle",
             "virtualPath": "",
@@ -3004,6 +3192,7 @@
               {
                 "key": "fontSize",
                 "config": {
+                  "id": 3405,
                   "type": "number",
                   "component": "number",
                   "alias": "字号",
@@ -3026,24 +3215,26 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.axisLabel.textStyle.fontSize",
                 "virtualPath": ""
               },
               {
-                "key": "color",
+                "key": "fontWeight",
                 "config": {
+                  "id": 4139,
                   "type": "string",
-                  "component": "color",
-                  "alias": "颜色",
+                  "component": "fontWeight",
+                  "alias": "字体粗细",
                   "tip": "",
                   "displayMode": "inline",
                   "features": [],
                   "layout": "horizontal",
                   "toggleCol": "",
                   "isHide": false,
-                  "defaultValue": "rgba(255, 255, 255, 0.6)",
+                  "defaultValue": "normal",
                   "min": 0,
                   "max": 100,
                   "step": 1,
@@ -3056,24 +3247,26 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
-                "path": "yAxis.axisLabel.textStyle.color",
+                "path": "yAxis.axisLabel.textStyle.fontWeight",
                 "virtualPath": ""
               },
               {
-                "key": "fontWeight",
+                "key": "color",
                 "config": {
+                  "id": 8207,
                   "type": "string",
-                  "component": "fontWeight",
-                  "alias": "字体粗细",
+                  "component": "color",
+                  "alias": "颜色",
                   "tip": "",
-                  "displayMode": "inline",
+                  "displayMode": "inline-single",
                   "features": [],
                   "layout": "horizontal",
                   "toggleCol": "",
                   "isHide": false,
-                  "defaultValue": "normal",
+                  "defaultValue": "rgba(255, 255, 255, 0.6)",
                   "min": 0,
                   "max": 100,
                   "step": 1,
@@ -3086,16 +3279,17 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
-                "path": "yAxis.axisLabel.textStyle.fontWeight",
+                "path": "yAxis.axisLabel.textStyle.color",
                 "virtualPath": ""
               }
             ],
             "cols": [
               "fontSize",
-              "color",
-              "fontWeight"
+              "fontWeight",
+              "color"
             ]
           }
         ],
@@ -3112,6 +3306,7 @@
       {
         "key": "grid",
         "config": {
+          "id": 910,
           "type": "object",
           "component": "none",
           "alias": "网格线",
@@ -3134,7 +3329,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "yAxis.grid",
         "virtualPath": "",
@@ -3142,6 +3338,7 @@
           {
             "key": "show",
             "config": {
+              "id": 7997,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -3164,7 +3361,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.grid.show",
             "virtualPath": ""
@@ -3172,6 +3370,7 @@
           {
             "key": "line",
             "config": {
+              "id": 1603,
               "type": "object",
               "component": "none",
               "alias": "线型样式",
@@ -3194,7 +3393,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "yAxis.grid.line",
             "virtualPath": "",
@@ -3202,6 +3402,7 @@
               {
                 "key": "type",
                 "config": {
+                  "id": 8237,
                   "type": "string",
                   "component": "lineStyle",
                   "alias": "类型",
@@ -3224,7 +3425,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.grid.line.type",
                 "virtualPath": ""
@@ -3232,6 +3434,7 @@
               {
                 "key": "width",
                 "config": {
+                  "id": 3110,
                   "type": "number",
                   "component": "number",
                   "alias": "粗细",
@@ -3254,7 +3457,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.grid.line.width",
                 "virtualPath": ""
@@ -3262,6 +3466,7 @@
               {
                 "key": "color",
                 "config": {
+                  "id": 1453,
                   "type": "string",
                   "component": "color",
                   "alias": "颜色",
@@ -3284,7 +3489,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.grid.line.color",
                 "virtualPath": ""
@@ -3292,6 +3498,7 @@
               {
                 "key": "dashedLength",
                 "config": {
+                  "id": 6149,
                   "type": "number",
                   "component": "number",
                   "alias": "长度",
@@ -3314,7 +3521,8 @@
                     "field": "type",
                     "value": "dashed"
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.grid.line.dashedLength",
                 "virtualPath": ""
@@ -3322,6 +3530,7 @@
               {
                 "key": "dashedSpace",
                 "config": {
+                  "id": 5623,
                   "type": "number",
                   "component": "number",
                   "alias": "间距",
@@ -3344,7 +3553,8 @@
                     "field": "type",
                     "value": "dashed"
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "yAxis.grid.line.dashedSpace",
                 "virtualPath": ""
@@ -3379,6 +3589,7 @@
   {
     "key": "tooltip",
     "config": {
+      "id": 6432,
       "type": "object",
       "component": "none",
       "alias": "提示框",
@@ -3401,7 +3612,8 @@
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "tooltip",
     "virtualPath": "",
@@ -3409,6 +3621,7 @@
       {
         "key": "show",
         "config": {
+          "id": 6796,
           "type": "boolean",
           "component": "switch",
           "alias": "",
@@ -3431,7 +3644,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "tooltip.show",
         "virtualPath": ""
@@ -3439,6 +3653,7 @@
       {
         "key": "triggerOn",
         "config": {
+          "id": 1266,
           "type": "string",
           "component": "radio",
           "alias": "触发方式",
@@ -3470,7 +3685,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "tooltip.triggerOn",
         "virtualPath": ""
@@ -3478,11 +3694,12 @@
       {
         "key": "textStyle",
         "config": {
+          "id": 2995,
           "type": "object",
           "component": "none",
           "alias": "文本样式",
           "tip": "",
-          "displayMode": "nest",
+          "displayMode": "flat",
           "features": [],
           "layout": "horizontal",
           "toggleCol": "",
@@ -3500,7 +3717,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "tooltip.textStyle",
         "virtualPath": "",
@@ -3508,11 +3726,12 @@
           {
             "key": "fontSize",
             "config": {
+              "id": 4349,
               "type": "number",
               "component": "number",
               "alias": "字号",
               "tip": "",
-              "displayMode": "single",
+              "displayMode": "inline",
               "features": [],
               "layout": "horizontal",
               "toggleCol": "",
@@ -3530,24 +3749,26 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "tooltip.textStyle.fontSize",
             "virtualPath": ""
           },
           {
-            "key": "color",
+            "key": "fontWeight",
             "config": {
+              "id": 1107,
               "type": "string",
-              "component": "color",
-              "alias": "颜色",
+              "component": "fontWeight",
+              "alias": "字体粗细",
               "tip": "",
-              "displayMode": "single",
+              "displayMode": "inline",
               "features": [],
               "layout": "horizontal",
               "toggleCol": "",
               "isHide": false,
-              "defaultValue": "#fff",
+              "defaultValue": "normal",
               "min": 0,
               "max": 100,
               "step": 1,
@@ -3560,24 +3781,26 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
-            "path": "tooltip.textStyle.color",
+            "path": "tooltip.textStyle.fontWeight",
             "virtualPath": ""
           },
           {
-            "key": "fontWeight",
+            "key": "color",
             "config": {
+              "id": 2963,
               "type": "string",
-              "component": "fontWeight",
-              "alias": "字体粗细",
+              "component": "color",
+              "alias": "颜色",
               "tip": "",
-              "displayMode": "single",
+              "displayMode": "inline-single",
               "features": [],
               "layout": "horizontal",
               "toggleCol": "",
               "isHide": false,
-              "defaultValue": "normal",
+              "defaultValue": "#fff",
               "min": 0,
               "max": 100,
               "step": 1,
@@ -3590,21 +3813,23 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
-            "path": "tooltip.textStyle.fontWeight",
+            "path": "tooltip.textStyle.color",
             "virtualPath": ""
           }
         ],
         "cols": [
           "fontSize",
-          "color",
-          "fontWeight"
+          "fontWeight",
+          "color"
         ]
       },
       {
         "key": "background",
         "config": {
+          "id": 3686,
           "type": "object",
           "component": "none",
           "alias": "弹框背景",
@@ -3627,7 +3852,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "tooltip.background",
         "virtualPath": "",
@@ -3635,6 +3861,7 @@
           {
             "key": "padding",
             "config": {
+              "id": 8126,
               "type": "object",
               "component": "none",
               "alias": "背景边距",
@@ -3657,7 +3884,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "tooltip.background.padding",
             "virtualPath": "",
@@ -3665,6 +3893,7 @@
               {
                 "key": "h",
                 "config": {
+                  "id": 672,
                   "type": "number",
                   "component": "number",
                   "alias": "水平",
@@ -3687,7 +3916,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "tooltip.background.padding.h",
                 "virtualPath": ""
@@ -3695,6 +3925,7 @@
               {
                 "key": "v",
                 "config": {
+                  "id": 279,
                   "type": "number",
                   "component": "number",
                   "alias": "垂直",
@@ -3717,7 +3948,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "tooltip.background.padding.v",
                 "virtualPath": ""
@@ -3731,6 +3963,7 @@
           {
             "key": "color",
             "config": {
+              "id": 4998,
               "type": "string",
               "component": "color",
               "alias": "背景色",
@@ -3753,7 +3986,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "tooltip.background.color",
             "virtualPath": ""
@@ -3761,6 +3995,7 @@
           {
             "key": "borderColor",
             "config": {
+              "id": 8448,
               "type": "string",
               "component": "color",
               "alias": "边框颜色",
@@ -3783,7 +4018,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "tooltip.background.borderColor",
             "virtualPath": ""
@@ -3791,6 +4027,7 @@
           {
             "key": "borderWidth",
             "config": {
+              "id": 9205,
               "type": "number",
               "component": "number",
               "alias": "边框粗细",
@@ -3813,7 +4050,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "tooltip.background.borderWidth",
             "virtualPath": ""
@@ -3829,6 +4067,7 @@
       {
         "key": "pointer",
         "config": {
+          "id": 3422,
           "type": "object",
           "component": "none",
           "alias": "轴指示器",
@@ -3851,7 +4090,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "tooltip.pointer",
         "virtualPath": "",
@@ -3859,6 +4099,7 @@
           {
             "key": "show",
             "config": {
+              "id": 2834,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -3881,7 +4122,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "tooltip.pointer.show",
             "virtualPath": ""
@@ -3889,6 +4131,7 @@
           {
             "key": "line",
             "config": {
+              "id": 1741,
               "type": "object",
               "component": "none",
               "alias": "线型样式",
@@ -3911,7 +4154,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "tooltip.pointer.line",
             "virtualPath": "",
@@ -3919,6 +4163,7 @@
               {
                 "key": "type",
                 "config": {
+                  "id": 4787,
                   "type": "string",
                   "component": "lineStyle",
                   "alias": "类型",
@@ -3941,7 +4186,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "tooltip.pointer.line.type",
                 "virtualPath": ""
@@ -3949,6 +4195,7 @@
               {
                 "key": "width",
                 "config": {
+                  "id": 3301,
                   "type": "number",
                   "component": "number",
                   "alias": "粗细",
@@ -3971,7 +4218,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "tooltip.pointer.line.width",
                 "virtualPath": ""
@@ -3979,6 +4227,7 @@
               {
                 "key": "color",
                 "config": {
+                  "id": 4241,
                   "type": "string",
                   "component": "color",
                   "alias": "颜色",
@@ -4001,7 +4250,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "tooltip.pointer.line.color",
                 "virtualPath": ""
@@ -4009,6 +4259,7 @@
               {
                 "key": "dashedLength",
                 "config": {
+                  "id": 544,
                   "type": "number",
                   "component": "number",
                   "alias": "长度",
@@ -4031,7 +4282,8 @@
                     "field": "type",
                     "value": "dashed"
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "tooltip.pointer.line.dashedLength",
                 "virtualPath": ""
@@ -4039,6 +4291,7 @@
               {
                 "key": "dashedSpace",
                 "config": {
+                  "id": 1155,
                   "type": "number",
                   "component": "number",
                   "alias": "间距",
@@ -4061,7 +4314,8 @@
                     "field": "type",
                     "value": "dashed"
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "tooltip.pointer.line.dashedSpace",
                 "virtualPath": ""
@@ -4093,6 +4347,7 @@
   {
     "key": "legend",
     "config": {
+      "id": 6511,
       "type": "object",
       "component": "none",
       "alias": "图例",
@@ -4115,7 +4370,8 @@
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "legend",
     "virtualPath": "",
@@ -4123,6 +4379,7 @@
       {
         "key": "show",
         "config": {
+          "id": 4196,
           "type": "boolean",
           "component": "switch",
           "alias": "",
@@ -4145,7 +4402,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "legend.show",
         "virtualPath": ""
@@ -4153,6 +4411,7 @@
       {
         "key": "position",
         "config": {
+          "id": 5090,
           "type": "string",
           "component": "legendLocation",
           "alias": "位置",
@@ -4175,7 +4434,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "legend.position",
         "virtualPath": ""
@@ -4183,6 +4443,7 @@
       {
         "key": "orient",
         "config": {
+          "id": 3327,
           "type": "string",
           "component": "orient",
           "alias": "布局方式",
@@ -4205,7 +4466,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": true
+          "flatValue": true,
+          "isRange": false
         },
         "path": "legend.orient",
         "virtualPath": ""
@@ -4213,6 +4475,7 @@
       {
         "key": "textStyle",
         "config": {
+          "id": 1734,
           "type": "object",
           "component": "none",
           "alias": "文本样式",
@@ -4235,7 +4498,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "legend.textStyle",
         "virtualPath": "",
@@ -4243,6 +4507,7 @@
           {
             "key": "fontSize",
             "config": {
+              "id": 3417,
               "type": "number",
               "component": "number",
               "alias": "字号",
@@ -4265,24 +4530,26 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "legend.textStyle.fontSize",
             "virtualPath": ""
           },
           {
-            "key": "color",
+            "key": "fontWeight",
             "config": {
+              "id": 303,
               "type": "string",
-              "component": "color",
-              "alias": "颜色",
+              "component": "fontWeight",
+              "alias": "字体粗细",
               "tip": "",
               "displayMode": "inline",
               "features": [],
               "layout": "horizontal",
               "toggleCol": "",
               "isHide": false,
-              "defaultValue": "#90a0ae",
+              "defaultValue": "normal",
               "min": 0,
               "max": 100,
               "step": 1,
@@ -4295,24 +4562,26 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
-            "path": "legend.textStyle.color",
+            "path": "legend.textStyle.fontWeight",
             "virtualPath": ""
           },
           {
-            "key": "fontWeight",
+            "key": "color",
             "config": {
+              "id": 3566,
               "type": "string",
-              "component": "fontWeight",
-              "alias": "字体粗细",
+              "component": "color",
+              "alias": "颜色",
               "tip": "",
               "displayMode": "inline-single",
               "features": [],
               "layout": "horizontal",
               "toggleCol": "",
               "isHide": false,
-              "defaultValue": "normal",
+              "defaultValue": "#90a0ae",
               "min": 0,
               "max": 100,
               "step": 1,
@@ -4325,21 +4594,23 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
-            "path": "legend.textStyle.fontWeight",
+            "path": "legend.textStyle.color",
             "virtualPath": ""
           }
         ],
         "cols": [
           "fontSize",
-          "color",
-          "fontWeight"
+          "fontWeight",
+          "color"
         ]
       },
       {
         "key": "symbol",
         "config": {
+          "id": 1463,
           "type": "object",
           "component": "none",
           "alias": "图例图标",
@@ -4362,7 +4633,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "legend.symbol",
         "virtualPath": "",
@@ -4370,6 +4642,7 @@
           {
             "key": "show",
             "config": {
+              "id": 8003,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -4392,7 +4665,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "legend.symbol.show",
             "virtualPath": ""
@@ -4400,6 +4674,7 @@
           {
             "key": "icon",
             "config": {
+              "id": 2830,
               "type": "string",
               "component": "echartIcon",
               "alias": "图标",
@@ -4422,7 +4697,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "legend.symbol.icon",
             "virtualPath": ""
@@ -4430,6 +4706,7 @@
           {
             "key": "width",
             "config": {
+              "id": 8260,
               "type": "number",
               "component": "number",
               "alias": "宽度",
@@ -4452,7 +4729,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "legend.symbol.width",
             "virtualPath": ""
@@ -4460,6 +4738,7 @@
           {
             "key": "height",
             "config": {
+              "id": 3637,
               "type": "number",
               "component": "number",
               "alias": "高度",
@@ -4482,7 +4761,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "legend.symbol.height",
             "virtualPath": ""
@@ -4490,6 +4770,7 @@
           {
             "key": "gap",
             "config": {
+              "id": 7172,
               "type": "number",
               "component": "number",
               "alias": "间隔",
@@ -4512,7 +4793,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "legend.symbol.gap",
             "virtualPath": ""
@@ -4529,6 +4811,7 @@
       {
         "key": "page",
         "config": {
+          "id": 892,
           "type": "object",
           "component": "none",
           "alias": "翻页功能",
@@ -4551,7 +4834,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "legend.page",
         "virtualPath": "",
@@ -4559,6 +4843,7 @@
           {
             "key": "enabled",
             "config": {
+              "id": 3218,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -4581,7 +4866,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "legend.page.enabled",
             "virtualPath": ""
@@ -4589,6 +4875,7 @@
           {
             "key": "size",
             "config": {
+              "id": 873,
               "type": "object",
               "component": "none",
               "alias": "容器尺寸",
@@ -4611,7 +4898,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "legend.page.size",
             "virtualPath": "",
@@ -4619,6 +4907,7 @@
               {
                 "key": "width",
                 "config": {
+                  "id": 4382,
                   "type": "number",
                   "component": "number",
                   "alias": "宽度",
@@ -4641,7 +4930,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "legend.page.size.width",
                 "virtualPath": ""
@@ -4649,6 +4939,7 @@
               {
                 "key": "height",
                 "config": {
+                  "id": 124,
                   "type": "number",
                   "component": "number",
                   "alias": "高度",
@@ -4671,7 +4962,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "legend.page.size.height",
                 "virtualPath": ""
@@ -4685,6 +4977,7 @@
           {
             "key": "button",
             "config": {
+              "id": 1417,
               "type": "object",
               "component": "none",
               "alias": "翻页按钮",
@@ -4707,7 +5000,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "legend.page.button",
             "virtualPath": "",
@@ -4715,6 +5009,7 @@
               {
                 "key": "size",
                 "config": {
+                  "id": 6970,
                   "type": "number",
                   "component": "number",
                   "alias": "尺寸",
@@ -4737,7 +5032,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "legend.page.button.size",
                 "virtualPath": ""
@@ -4745,6 +5041,7 @@
               {
                 "key": "color",
                 "config": {
+                  "id": 7993,
                   "type": "string",
                   "component": "color",
                   "alias": "颜色",
@@ -4767,7 +5064,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "legend.page.button.color",
                 "virtualPath": ""
@@ -4775,6 +5073,7 @@
               {
                 "key": "inactiveColor",
                 "config": {
+                  "id": 5412,
                   "type": "string",
                   "component": "color",
                   "alias": "禁用颜色",
@@ -4797,7 +5096,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "legend.page.button.inactiveColor",
                 "virtualPath": ""
@@ -4812,6 +5112,7 @@
           {
             "key": "pageNumColor",
             "config": {
+              "id": 2289,
               "type": "string",
               "component": "color",
               "alias": "页码颜色",
@@ -4834,7 +5135,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "legend.page.pageNumColor",
             "virtualPath": ""
@@ -4860,6 +5162,7 @@
   {
     "key": "series",
     "config": {
+      "id": 7225,
       "type": "array",
       "component": "none",
       "alias": "系列",
@@ -4888,7 +5191,8 @@
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "series",
     "virtualPath": "",
@@ -4896,6 +5200,7 @@
       {
         "key": "0",
         "config": {
+          "id": 6764,
           "type": "object",
           "component": "none",
           "alias": "系列",
@@ -4918,7 +5223,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "series.0",
         "virtualPath": "",
@@ -4926,6 +5232,7 @@
           {
             "key": "type",
             "config": {
+              "id": 1873,
               "type": "string",
               "component": "input",
               "alias": "",
@@ -4948,7 +5255,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "series.0.type",
             "virtualPath": "slotProps.item.type"
@@ -4956,6 +5264,7 @@
           {
             "key": "id",
             "config": {
+              "id": 4738,
               "type": "string",
               "component": "input",
               "alias": "",
@@ -4965,7 +5274,7 @@
               "layout": "horizontal",
               "toggleCol": "",
               "isHide": true,
-              "defaultValue": "系列1_-AxbqvJM6_",
+              "defaultValue": "D0yvFjOW4t",
               "min": 0,
               "max": 100,
               "step": 1,
@@ -4978,7 +5287,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "series.0.id",
             "virtualPath": "slotProps.item.id"
@@ -4986,6 +5296,7 @@
           {
             "key": "name",
             "config": {
+              "id": 7778,
               "type": "string",
               "component": "input",
               "alias": "系列名称",
@@ -4995,7 +5306,7 @@
               "layout": "horizontal",
               "toggleCol": "",
               "isHide": false,
-              "defaultValue": "系列1",
+              "defaultValue": "",
               "min": 0,
               "max": 100,
               "step": 1,
@@ -5008,7 +5319,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "series.0.name",
             "virtualPath": "slotProps.item.name"
@@ -5016,6 +5328,7 @@
           {
             "key": "line",
             "config": {
+              "id": 6051,
               "type": "object",
               "component": "none",
               "alias": "折线",
@@ -5038,7 +5351,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "series.0.line",
             "virtualPath": "slotProps.item.line",
@@ -5046,6 +5360,7 @@
               {
                 "key": "color",
                 "config": {
+                  "id": 6693,
                   "type": "string",
                   "component": "color",
                   "alias": "颜色",
@@ -5068,7 +5383,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.line.color",
                 "virtualPath": "slotProps.item.line.color"
@@ -5076,6 +5392,7 @@
               {
                 "key": "style",
                 "config": {
+                  "id": 8777,
                   "type": "string",
                   "component": "lineStyle",
                   "alias": "类型",
@@ -5098,7 +5415,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.line.style",
                 "virtualPath": "slotProps.item.line.style"
@@ -5106,6 +5424,7 @@
               {
                 "key": "width",
                 "config": {
+                  "id": 6361,
                   "type": "number",
                   "component": "number",
                   "alias": "粗细",
@@ -5128,7 +5447,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.line.width",
                 "virtualPath": "slotProps.item.line.width"
@@ -5136,6 +5456,7 @@
               {
                 "key": "opacity",
                 "config": {
+                  "id": 749,
                   "type": "number",
                   "component": "slider",
                   "alias": "透明度",
@@ -5158,7 +5479,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.line.opacity",
                 "virtualPath": "slotProps.item.line.opacity"
@@ -5166,6 +5488,7 @@
               {
                 "key": "smooth",
                 "config": {
+                  "id": 5425,
                   "type": "number",
                   "component": "slider",
                   "alias": "曲线平滑程度",
@@ -5188,7 +5511,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.line.smooth",
                 "virtualPath": "slotProps.item.line.smooth"
@@ -5205,6 +5529,7 @@
           {
             "key": "point",
             "config": {
+              "id": 4993,
               "type": "object",
               "component": "none",
               "alias": "标记",
@@ -5227,7 +5552,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "series.0.point",
             "virtualPath": "slotProps.item.point",
@@ -5235,6 +5561,7 @@
               {
                 "key": "icon",
                 "config": {
+                  "id": 8816,
                   "type": "string",
                   "component": "echartIcon",
                   "alias": "符号",
@@ -5257,7 +5584,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.point.icon",
                 "virtualPath": "slotProps.item.point.icon"
@@ -5265,6 +5593,7 @@
               {
                 "key": "color",
                 "config": {
+                  "id": 3404,
                   "type": "string",
                   "component": "color",
                   "alias": "填充色",
@@ -5287,7 +5616,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.point.color",
                 "virtualPath": "slotProps.item.point.color"
@@ -5295,6 +5625,7 @@
               {
                 "key": "borderColor",
                 "config": {
+                  "id": 6359,
                   "type": "string",
                   "component": "color",
                   "alias": "描边颜色",
@@ -5317,7 +5648,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.point.borderColor",
                 "virtualPath": "slotProps.item.point.borderColor"
@@ -5325,6 +5657,7 @@
               {
                 "key": "borderWidth",
                 "config": {
+                  "id": 8475,
                   "type": "number",
                   "component": "number",
                   "alias": "描边粗细",
@@ -5347,7 +5680,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.point.borderWidth",
                 "virtualPath": "slotProps.item.point.borderWidth"
@@ -5355,6 +5689,7 @@
               {
                 "key": "borderType",
                 "config": {
+                  "id": 1330,
                   "type": "string",
                   "component": "lineStyle",
                   "alias": "描边类型",
@@ -5377,7 +5712,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.point.borderType",
                 "virtualPath": "slotProps.item.point.borderType"
@@ -5385,6 +5721,7 @@
               {
                 "key": "opacity",
                 "config": {
+                  "id": 6006,
                   "type": "number",
                   "component": "slider",
                   "alias": "透明度",
@@ -5407,7 +5744,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.point.opacity",
                 "virtualPath": "slotProps.item.point.opacity"
@@ -5425,6 +5763,7 @@
           {
             "key": "label",
             "config": {
+              "id": 5814,
               "type": "object",
               "component": "none",
               "alias": "标注",
@@ -5447,7 +5786,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "series.0.label",
             "virtualPath": "slotProps.item.label",
@@ -5455,6 +5795,7 @@
               {
                 "key": "show",
                 "config": {
+                  "id": 517,
                   "type": "boolean",
                   "component": "switch",
                   "alias": "",
@@ -5477,7 +5818,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.label.show",
                 "virtualPath": "slotProps.item.label.show"
@@ -5485,6 +5827,7 @@
               {
                 "key": "field",
                 "config": {
+                  "id": 1843,
                   "type": "string",
                   "component": "input",
                   "alias": "标注字段",
@@ -5507,7 +5850,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.label.field",
                 "virtualPath": "slotProps.item.label.field"
@@ -5515,6 +5859,7 @@
               {
                 "key": "valueFormat",
                 "config": {
+                  "id": 1320,
                   "type": "string",
                   "component": "valueFormat",
                   "alias": "数值格式",
@@ -5537,7 +5882,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.label.valueFormat",
                 "virtualPath": "slotProps.item.label.valueFormat"
@@ -5545,6 +5891,7 @@
               {
                 "key": "describe",
                 "config": {
+                  "id": 8494,
                   "type": "object",
                   "component": "none",
                   "alias": "前后缀",
@@ -5567,7 +5914,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.label.describe",
                 "virtualPath": "slotProps.item.label.describe",
@@ -5575,6 +5923,7 @@
                   {
                     "key": "prefix",
                     "config": {
+                      "id": 7903,
                       "type": "string",
                       "component": "input",
                       "alias": "前缀",
@@ -5597,7 +5946,8 @@
                         "field": "",
                         "value": ""
                       },
-                      "flatValue": false
+                      "flatValue": false,
+                      "isRange": false
                     },
                     "path": "series.0.label.describe.prefix",
                     "virtualPath": "slotProps.item.label.describe.prefix"
@@ -5605,6 +5955,7 @@
                   {
                     "key": "suffix",
                     "config": {
+                      "id": 7486,
                       "type": "string",
                       "component": "input",
                       "alias": "后缀",
@@ -5627,7 +5978,8 @@
                         "field": "",
                         "value": ""
                       },
-                      "flatValue": false
+                      "flatValue": false,
+                      "isRange": false
                     },
                     "path": "series.0.label.describe.suffix",
                     "virtualPath": "slotProps.item.label.describe.suffix"
@@ -5641,6 +5993,7 @@
               {
                 "key": "offset",
                 "config": {
+                  "id": 6702,
                   "type": "object",
                   "component": "none",
                   "alias": "相对偏移",
@@ -5663,7 +6016,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.label.offset",
                 "virtualPath": "slotProps.item.label.offset",
@@ -5671,6 +6025,7 @@
                   {
                     "key": "x",
                     "config": {
+                      "id": 4211,
                       "type": "number",
                       "component": "number",
                       "alias": "水平",
@@ -5693,7 +6048,8 @@
                         "field": "",
                         "value": ""
                       },
-                      "flatValue": false
+                      "flatValue": false,
+                      "isRange": false
                     },
                     "path": "series.0.label.offset.x",
                     "virtualPath": "slotProps.item.label.offset.x"
@@ -5701,6 +6057,7 @@
                   {
                     "key": "y",
                     "config": {
+                      "id": 5640,
                       "type": "number",
                       "component": "number",
                       "alias": "垂直",
@@ -5723,7 +6080,8 @@
                         "field": "",
                         "value": ""
                       },
-                      "flatValue": false
+                      "flatValue": false,
+                      "isRange": false
                     },
                     "path": "series.0.label.offset.y",
                     "virtualPath": "slotProps.item.label.offset.y"
@@ -5737,6 +6095,7 @@
               {
                 "key": "rotate",
                 "config": {
+                  "id": 2801,
                   "type": "number",
                   "component": "number",
                   "alias": "旋转角度",
@@ -5759,7 +6118,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.label.rotate",
                 "virtualPath": "slotProps.item.label.rotate"
@@ -5767,6 +6127,7 @@
               {
                 "key": "textStyle",
                 "config": {
+                  "id": 5043,
                   "type": "object",
                   "component": "none",
                   "alias": "文本样式",
@@ -5789,7 +6150,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.label.textStyle",
                 "virtualPath": "slotProps.item.label.textStyle",
@@ -5797,6 +6159,7 @@
                   {
                     "key": "fontSize",
                     "config": {
+                      "id": 1452,
                       "type": "number",
                       "component": "number",
                       "alias": "字号",
@@ -5819,7 +6182,8 @@
                         "field": "",
                         "value": ""
                       },
-                      "flatValue": false
+                      "flatValue": false,
+                      "isRange": false
                     },
                     "path": "series.0.label.textStyle.fontSize",
                     "virtualPath": "slotProps.item.label.textStyle.fontSize"
@@ -5827,6 +6191,7 @@
                   {
                     "key": "color",
                     "config": {
+                      "id": 79,
                       "type": "string",
                       "component": "color",
                       "alias": "颜色",
@@ -5849,7 +6214,8 @@
                         "field": "",
                         "value": ""
                       },
-                      "flatValue": false
+                      "flatValue": false,
+                      "isRange": false
                     },
                     "path": "series.0.label.textStyle.color",
                     "virtualPath": "slotProps.item.label.textStyle.color"
@@ -5857,6 +6223,7 @@
                   {
                     "key": "fontWeight",
                     "config": {
+                      "id": 9111,
                       "type": "string",
                       "component": "fontWeight",
                       "alias": "字体粗细",
@@ -5879,7 +6246,8 @@
                         "field": "",
                         "value": ""
                       },
-                      "flatValue": false
+                      "flatValue": false,
+                      "isRange": false
                     },
                     "path": "series.0.label.textStyle.fontWeight",
                     "virtualPath": "slotProps.item.label.textStyle.fontWeight"
@@ -5894,6 +6262,7 @@
               {
                 "key": "stroke",
                 "config": {
+                  "id": 3093,
                   "type": "object",
                   "component": "none",
                   "alias": "描边",
@@ -5916,7 +6285,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "series.0.label.stroke",
                 "virtualPath": "slotProps.item.label.stroke",
@@ -5924,6 +6294,7 @@
                   {
                     "key": "color",
                     "config": {
+                      "id": 7647,
                       "type": "string",
                       "component": "color",
                       "alias": "颜色",
@@ -5946,7 +6317,8 @@
                         "field": "",
                         "value": ""
                       },
-                      "flatValue": false
+                      "flatValue": false,
+                      "isRange": false
                     },
                     "path": "series.0.label.stroke.color",
                     "virtualPath": "slotProps.item.label.stroke.color"
@@ -5954,6 +6326,7 @@
                   {
                     "key": "width",
                     "config": {
+                      "id": 7708,
                       "type": "number",
                       "component": "number",
                       "alias": "粗细",
@@ -5976,7 +6349,8 @@
                         "field": "",
                         "value": ""
                       },
-                      "flatValue": false
+                      "flatValue": false,
+                      "isRange": false
                     },
                     "path": "series.0.label.stroke.width",
                     "virtualPath": "slotProps.item.label.stroke.width"
@@ -6007,6 +6381,7 @@
   {
     "key": "animation",
     "config": {
+      "id": 8760,
       "type": "object",
       "component": "none",
       "alias": "动画",
@@ -6029,7 +6404,8 @@
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "animation",
     "virtualPath": "",
@@ -6037,6 +6413,7 @@
       {
         "key": "enabled",
         "config": {
+          "id": 9518,
           "type": "boolean",
           "component": "switch",
           "alias": "",
@@ -6059,7 +6436,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "animation.enabled",
         "virtualPath": ""
@@ -6067,6 +6445,7 @@
       {
         "key": "duration",
         "config": {
+          "id": 6981,
           "type": "number",
           "component": "number",
           "alias": "持续时间",
@@ -6089,7 +6468,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "animation.duration",
         "virtualPath": ""
@@ -6097,6 +6477,7 @@
       {
         "key": "easing",
         "config": {
+          "id": 2579,
           "type": "string",
           "component": "animationEasing",
           "alias": "缓动效果",
@@ -6119,7 +6500,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "animation.easing",
         "virtualPath": ""
@@ -6127,6 +6509,7 @@
       {
         "key": "delay",
         "config": {
+          "id": 348,
           "type": "number",
           "component": "number",
           "alias": "延迟",
@@ -6149,7 +6532,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "animation.delay",
         "virtualPath": ""
@@ -6162,4 +6546,4 @@
       "delay"
     ]
   }
-]
+]
\ No newline at end of file
diff --git a/src/components/line/basic-line/src/config.vue b/src/components/line/basic-line/src/config.vue
index 5f2300f8..488b1902 100644
--- a/src/components/line/basic-line/src/config.vue
+++ b/src/components/line/basic-line/src/config.vue
@@ -59,8 +59,8 @@
         :level="2"
         label="连接空数据"
       >
-        <n-switch
-          v-model:value="config.global.connectNulls"
+        <g-switch
+          v-model="config.global.connectNulls"
         />
       </g-field>
     </g-field-collapse>
@@ -73,18 +73,11 @@
         :level="2"
         label="数据类型"
       >
-        <n-radio-group
-          v-model:value="config.xAxis.type"
-          size="small"
-        >
-          <n-radio-button
-            v-for="em in axisTypes"
-            :key="em.id"
-            :value="em.id"
-          >
-            {{ em.value }}
-          </n-radio-button>
-        </n-radio-group>
+        <g-radio-group
+          v-model="config.xAxis.type"
+          :data="axisTypes"
+          is-button
+        />
       </g-field>
       <g-field
         v-if="config.xAxis.type === 'value'"
@@ -96,14 +89,14 @@
         <g-select-suggest
           v-model="config.xAxis.extent.min"
           :data="selectSuggests"
-          :filters="['auto', 'dataMin', 'dataMax']"
+          :filters="enumData1220"
           inline="inline"
           label="最小值"
         />
         <g-select-suggest
           v-model="config.xAxis.extent.max"
           :data="selectSuggests"
-          :filters="['auto', 'dataMin', 'dataMax']"
+          :filters="enumData9631"
           inline="inline"
           label="最大值"
         />
@@ -112,8 +105,8 @@
         :level="2"
         label="两端留白"
       >
-        <n-switch
-          v-model:value="config.xAxis.boundaryGap"
+        <g-switch
+          v-model="config.xAxis.boundaryGap"
         />
       </g-field>
       <g-field-collapse
@@ -176,17 +169,17 @@
             inline="inline"
             label="字号"
           />
-          <g-color-picker
-            v-model="config.xAxis.title.textStyle.color"
-            inline="inline"
-            label="颜色"
-          />
           <g-select
             v-model="config.xAxis.title.textStyle.fontWeight"
             :data="fontWeights"
             inline="inline"
             label="字体粗细"
           />
+          <g-color-picker
+            v-model="config.xAxis.title.textStyle.color"
+            inline="inline-single"
+            label="颜色"
+          />
         </g-field>
       </g-field-collapse>
       <g-field-collapse
@@ -265,7 +258,6 @@
         label="轴标签"
       >
         <g-field
-          v-if="config.xAxis.type === 'value'"
           :level="2"
           tooltip="整数参照 d, 浮点参照 .1f"
           label="显示格式"
@@ -276,7 +268,6 @@
           />
         </g-field>
         <g-field
-          v-if="config.xAxis.type === 'time'"
           :level="2"
           tooltip="时间请参照 YYYY/MM/DD HH:mm:ss"
           label="显示格式"
@@ -294,7 +285,7 @@
           <g-select-suggest
             v-model="config.xAxis.axisLabel.interval"
             :data="selectSuggests"
-            :filters="['auto', '0', '1', '2']"
+            :filters="enumData2745"
           />
         </g-field>
         <g-field
@@ -344,17 +335,17 @@
             inline="inline"
             label="字号"
           />
-          <g-color-picker
-            v-model="config.xAxis.axisLabel.textStyle.color"
-            inline="inline"
-            label="颜色"
-          />
           <g-select
             v-model="config.xAxis.axisLabel.textStyle.fontWeight"
             :data="fontWeights"
             inline="inline"
             label="字体粗细"
           />
+          <g-color-picker
+            v-model="config.xAxis.axisLabel.textStyle.color"
+            inline="inline-single"
+            label="颜色"
+          />
         </g-field>
       </g-field-collapse>
       <g-field-collapse
@@ -417,18 +408,11 @@
         :level="2"
         label="数据类型"
       >
-        <n-radio-group
-          v-model:value="config.yAxis.type"
-          size="small"
-        >
-          <n-radio-button
-            v-for="em in axisTypes"
-            :key="em.id"
-            :value="em.id"
-          >
-            {{ em.value }}
-          </n-radio-button>
-        </n-radio-group>
+        <g-radio-group
+          v-model="config.yAxis.type"
+          :data="axisTypes"
+          is-button
+        />
       </g-field>
       <g-field
         v-if="config.yAxis.type === 'value'"
@@ -439,14 +423,14 @@
         <g-select-suggest
           v-model="config.yAxis.extent.min"
           :data="selectSuggests"
-          :filters="['auto', 'dataMin', 'dataMax']"
+          :filters="enumData7690"
           inline="inline"
           label="最小值"
         />
         <g-select-suggest
           v-model="config.yAxis.extent.max"
           :data="selectSuggests"
-          :filters="['auto', 'dataMin', 'dataMax']"
+          :filters="enumData8706"
           inline="inline"
           label="最大值"
         />
@@ -511,17 +495,17 @@
             inline="inline"
             label="字号"
           />
-          <g-color-picker
-            v-model="config.yAxis.title.textStyle.color"
-            inline="inline"
-            label="颜色"
-          />
           <g-select
             v-model="config.yAxis.title.textStyle.fontWeight"
             :data="fontWeights"
             inline="inline"
             label="字体粗细"
           />
+          <g-color-picker
+            v-model="config.yAxis.title.textStyle.color"
+            inline="inline-single"
+            label="颜色"
+          />
         </g-field>
       </g-field-collapse>
       <g-field-collapse
@@ -600,7 +584,6 @@
         label="轴标签"
       >
         <g-field
-          v-if="config.yAxis.type === 'value'"
           :level="2"
           tooltip="整数参照 d, 浮点参照 .1f"
           label="显示格式"
@@ -611,7 +594,6 @@
           />
         </g-field>
         <g-field
-          v-if="config.yAxis.type === 'time'"
           :level="2"
           tooltip="时间请参照 YYYY/MM/DD HH:mm:ss"
           label="显示格式"
@@ -680,17 +662,17 @@
             inline="inline"
             label="字号"
           />
-          <g-color-picker
-            v-model="config.yAxis.axisLabel.textStyle.color"
-            inline="inline"
-            label="颜色"
-          />
           <g-select
             v-model="config.yAxis.axisLabel.textStyle.fontWeight"
             :data="fontWeights"
             inline="inline"
             label="字体粗细"
           />
+          <g-color-picker
+            v-model="config.yAxis.axisLabel.textStyle.color"
+            inline="inline-single"
+            label="颜色"
+          />
         </g-field>
       </g-field-collapse>
       <g-field-collapse
@@ -755,55 +737,37 @@
         :level="2"
         label="触发方式"
       >
-        <n-radio-group
-          v-model:value="config.tooltip.triggerOn"
-          size="small"
-        >
-          <n-radio-button
-            v-for="pair in [
-              { key: 'mousemove', value: '悬浮' },
-              { key: 'click', value: '点击' },
-            ]"
-            :key="pair.key"
-            :value="pair.key"
-          >
-            {{ pair.value }}
-          </n-radio-button>
-        </n-radio-group>
+        <g-radio-group
+          v-model="config.tooltip.triggerOn"
+          :data="pairData1266"
+        />
       </g-field>
-      <g-field-collapse
+      <g-field
+        :level="2"
         label="文本样式"
+        :is-flat="true"
       >
-        <g-field
-          :level="2"
+        <g-input-number
+          v-model="config.tooltip.textStyle.fontSize"
+          :min="12"
+          :max="100"
+          :step="1"
+          suffix="px"
+          inline="inline"
           label="字号"
-        >
-          <g-input-number
-            v-model="config.tooltip.textStyle.fontSize"
-            :min="12"
-            :max="100"
-            :step="1"
-            suffix="px"
-          />
-        </g-field>
-        <g-field
-          :level="2"
-          label="颜色"
-        >
-          <g-color-picker
-            v-model="config.tooltip.textStyle.color"
-          />
-        </g-field>
-        <g-field
-          :level="2"
+        />
+        <g-select
+          v-model="config.tooltip.textStyle.fontWeight"
+          :data="fontWeights"
+          inline="inline"
           label="字体粗细"
-        >
-          <g-select
-            v-model="config.tooltip.textStyle.fontWeight"
-            :data="fontWeights"
-          />
-        </g-field>
-      </g-field-collapse>
+        />
+        <g-color-picker
+          v-model="config.tooltip.textStyle.color"
+          inline="inline-single"
+          label="颜色"
+        />
+      </g-field>
       <g-field-collapse
         label="弹框背景"
       >
@@ -931,18 +895,11 @@
         :level="2"
         label="布局方式"
       >
-        <n-radio-group
-          v-model:value="config.legend.orient"
-          size="small"
-        >
-          <n-radio-button
-            v-for="em in orients"
-            :key="em.id"
-            :value="em.id"
-          >
-            {{ em.value }}
-          </n-radio-button>
-        </n-radio-group>
+        <g-radio-group
+          v-model="config.legend.orient"
+          :data="orients"
+          is-button
+        />
       </g-field>
       <g-field
         :level="2"
@@ -958,17 +915,17 @@
           inline="inline"
           label="字号"
         />
-        <g-color-picker
-          v-model="config.legend.textStyle.color"
-          inline="inline"
-          label="颜色"
-        />
         <g-select
           v-model="config.legend.textStyle.fontWeight"
           :data="fontWeights"
-          inline="inline-single"
+          inline="inline"
           label="字体粗细"
         />
+        <g-color-picker
+          v-model="config.legend.textStyle.color"
+          inline="inline-single"
+          label="颜色"
+        />
       </g-field>
       <g-field-collapse
         v-model="config.legend.symbol.show"
@@ -1355,8 +1312,8 @@
   </div>
 </template>
 
-<script lang='ts'>
-import { defineComponent, PropType, toRef } from 'vue'
+<script lang='ts' setup>
+import { toRef } from 'vue'
 import {
   fontFamilys,
   axisTypes,
@@ -1374,39 +1331,50 @@ import {
 } from '@/data/select-options'
 import { BasicLine, BasicLineSeries } from './basic-line'
 
-export default defineComponent({
-  name: 'VBasicLineProp',
-  props: {
-    com: {
-      type: Object as PropType<BasicLine>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const config = toRef(props.com, 'config')
+const props = defineProps<{
+  com: BasicLine
+}>()
+
+const config = toRef(props.com, 'config')
+
+const enumData1220 = [
+  'auto',
+  'dataMin',
+  'dataMax',
+]
+
+const enumData9631 = [
+  'auto',
+  'dataMin',
+  'dataMax',
+]
+
+const enumData2745 = [
+  'auto',
+  '0',
+  '1',
+  '2',
+]
+
+const enumData7690 = [
+  'auto',
+  'dataMin',
+  'dataMax',
+]
+
+const enumData8706 = [
+  'auto',
+  'dataMin',
+  'dataMax',
+]
 
-    const handleAddSeriesItem = () => {
-      return new BasicLineSeries('')
-    }
+const pairData1266 = [
+  { key: 'mousemove', value: '悬浮' },
+  { key: 'click', value: '点击' },
+]
 
-    return {
-      config,
-      handleAddSeriesItem,
+const handleAddSeriesItem = () => {
+  return new BasicLineSeries('')
+}
 
-      fontFamilys,
-      axisTypes,
-      selectSuggests,
-      titleLocations,
-      fontWeights,
-      lineStyles,
-      valueFormats,
-      timeFormats,
-      hAligns,
-      legendLocations,
-      orients,
-      echartIcons,
-      animationEasings,
-    }
-  },
-})
 </script>
diff --git a/src/components/line/basic-line/src/index.vue b/src/components/line/basic-line/src/index.vue
index 5bc608b6..cf1b1331 100644
--- a/src/components/line/basic-line/src/index.vue
+++ b/src/components/line/basic-line/src/index.vue
@@ -190,7 +190,9 @@ const option = computed(() => {
     xAxis: {
       show: xAxis.show,
       type: xAxis.type,
-      boundaryGap: xAxis.boundaryGap,
+      boundaryGap: xAxis.type === 'category'
+        ? xAxis.boundaryGap : xAxis.boundaryGap
+          ? ['5%', '5%'] : ['0%', '0%'],
       name: xAxis.title.show ? xAxis.title.name : '',
       nameLocation: xAxis.title.location,
       nameRotate: xAxis.title.display.rotate,
diff --git a/src/components/map/china2d/src/china2d-area/config.json b/src/components/map/china2d/src/china2d-area/config.json
index dfab327a..052f9430 100644
--- a/src/components/map/china2d/src/china2d-area/config.json
+++ b/src/components/map/china2d/src/china2d-area/config.json
@@ -2,6 +2,7 @@
   {
     "key": "defaultStyle",
     "config": {
+      "id": 3795,
       "type": "object",
       "component": "none",
       "alias": "区域样式",
@@ -33,6 +34,7 @@
       {
         "key": "fill",
         "config": {
+          "id": 2760,
           "type": "object",
           "component": "none",
           "alias": "填充颜色",
@@ -64,6 +66,7 @@
           {
             "key": "minFillColor",
             "config": {
+              "id": 7141,
               "type": "string",
               "component": "color",
               "alias": "最小值",
@@ -95,6 +98,7 @@
           {
             "key": "maxFillColor",
             "config": {
+              "id": 6692,
               "type": "string",
               "component": "color",
               "alias": "最大值",
@@ -126,6 +130,7 @@
           {
             "key": "fillColor",
             "config": {
+              "id": 9609,
               "type": "string",
               "component": "color",
               "alias": "无数据",
@@ -164,6 +169,7 @@
       {
         "key": "stroke",
         "config": {
+          "id": 8550,
           "type": "object",
           "component": "none",
           "alias": "边线样式",
@@ -195,6 +201,7 @@
           {
             "key": "color",
             "config": {
+              "id": 3268,
               "type": "string",
               "component": "color",
               "alias": "颜色",
@@ -226,6 +233,7 @@
           {
             "key": "weight",
             "config": {
+              "id": 2477,
               "type": "number",
               "component": "slider",
               "alias": "粗细 [0, 20]",
@@ -257,6 +265,7 @@
           {
             "key": "dashArray",
             "config": {
+              "id": 3238,
               "type": "string",
               "component": "lineStyle",
               "alias": "线类型",
@@ -301,6 +310,7 @@
   {
     "key": "labelStyle",
     "config": {
+      "id": 6658,
       "type": "object",
       "component": "none",
       "alias": "标注",
@@ -332,6 +342,7 @@
       {
         "key": "show",
         "config": {
+          "id": 2303,
           "type": "boolean",
           "component": "switch",
           "alias": "",
@@ -363,6 +374,7 @@
       {
         "key": "fontFamily",
         "config": {
+          "id": 2025,
           "type": "string",
           "component": "fontFamily",
           "alias": "字体",
@@ -394,6 +406,7 @@
       {
         "key": "fontWeight",
         "config": {
+          "id": 8998,
           "type": "string",
           "component": "fontWeight",
           "alias": "文字粗细",
@@ -425,6 +438,7 @@
       {
         "key": "fontSize",
         "config": {
+          "id": 6170,
           "type": "number",
           "component": "number",
           "alias": "字号",
@@ -456,6 +470,7 @@
       {
         "key": "color",
         "config": {
+          "id": 7771,
           "type": "string",
           "component": "color",
           "alias": "颜色",
@@ -487,6 +502,7 @@
       {
         "key": "shadowColor",
         "config": {
+          "id": 1332,
           "type": "string",
           "component": "color",
           "alias": "阴影色",
@@ -528,6 +544,7 @@
   {
     "key": "tooltip",
     "config": {
+      "id": 1615,
       "type": "object",
       "component": "none",
       "alias": "弹框",
@@ -559,6 +576,7 @@
       {
         "key": "show",
         "config": {
+          "id": 476,
           "type": "boolean",
           "component": "switch",
           "alias": "",
@@ -590,6 +608,7 @@
       {
         "key": "infoField",
         "config": {
+          "id": 1855,
           "type": "boolean",
           "component": "switch",
           "alias": "info字段",
@@ -621,6 +640,7 @@
       {
         "key": "eventType",
         "config": {
+          "id": 929,
           "type": "string",
           "component": "radioBase",
           "alias": "事件类型",
@@ -661,6 +681,7 @@
       {
         "key": "styleType",
         "config": {
+          "id": 1776,
           "type": "string",
           "component": "radio",
           "alias": "配置选项",
@@ -701,6 +722,7 @@
       {
         "key": "textStyle",
         "config": {
+          "id": 8349,
           "type": "object",
           "component": "none",
           "alias": "文本样式",
@@ -732,6 +754,7 @@
           {
             "key": "fontFamily",
             "config": {
+              "id": 6036,
               "type": "string",
               "component": "fontFamily",
               "alias": "字体",
@@ -763,6 +786,7 @@
           {
             "key": "fontWeight",
             "config": {
+              "id": 550,
               "type": "string",
               "component": "fontWeight",
               "alias": "文字粗细",
@@ -794,6 +818,7 @@
           {
             "key": "fontSize",
             "config": {
+              "id": 1059,
               "type": "number",
               "component": "number",
               "alias": "字号",
@@ -825,6 +850,7 @@
           {
             "key": "color",
             "config": {
+              "id": 3470,
               "type": "string",
               "component": "color",
               "alias": "颜色",
@@ -864,6 +890,7 @@
       {
         "key": "lineHeight",
         "config": {
+          "id": 6571,
           "type": "number",
           "component": "slider",
           "alias": "行高比例",
@@ -895,6 +922,7 @@
       {
         "key": "borderRadius",
         "config": {
+          "id": 8925,
           "type": "number",
           "component": "slider",
           "alias": "圆角半径",
@@ -926,6 +954,7 @@
       {
         "key": "padding",
         "config": {
+          "id": 676,
           "type": "object",
           "component": "none",
           "alias": "外边距",
@@ -957,6 +986,7 @@
           {
             "key": "top",
             "config": {
+              "id": 8415,
               "type": "number",
               "component": "number",
               "alias": "上",
@@ -988,6 +1018,7 @@
           {
             "key": "bottom",
             "config": {
+              "id": 5631,
               "type": "number",
               "component": "number",
               "alias": "下",
@@ -1019,6 +1050,7 @@
           {
             "key": "left",
             "config": {
+              "id": 3864,
               "type": "number",
               "component": "number",
               "alias": "左",
@@ -1050,6 +1082,7 @@
           {
             "key": "right",
             "config": {
+              "id": 9368,
               "type": "number",
               "component": "number",
               "alias": "右",
@@ -1089,6 +1122,7 @@
       {
         "key": "bgColor",
         "config": {
+          "id": 5219,
           "type": "string",
           "component": "color",
           "alias": "背景色",
@@ -1133,6 +1167,7 @@
   {
     "key": "interactive",
     "config": {
+      "id": 6002,
       "type": "object",
       "component": "none",
       "alias": "交互配置",
@@ -1164,6 +1199,7 @@
       {
         "key": "isHover",
         "config": {
+          "id": 2095,
           "type": "object",
           "component": "none",
           "alias": "悬停样式",
@@ -1195,6 +1231,7 @@
           {
             "key": "show",
             "config": {
+              "id": 7308,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -1226,6 +1263,7 @@
           {
             "key": "fillColor",
             "config": {
+              "id": 5064,
               "type": "string",
               "component": "color",
               "alias": "填充颜色",
@@ -1257,6 +1295,7 @@
           {
             "key": "strokeColor",
             "config": {
+              "id": 2276,
               "type": "string",
               "component": "color",
               "alias": "边线颜色",
@@ -1288,6 +1327,7 @@
           {
             "key": "weight",
             "config": {
+              "id": 7348,
               "type": "number",
               "component": "number",
               "alias": "边线粗细 [0, 20]",
@@ -1327,6 +1367,7 @@
       {
         "key": "clickZoom",
         "config": {
+          "id": 6932,
           "type": "object",
           "component": "none",
           "alias": "点击聚焦",
@@ -1358,6 +1399,7 @@
           {
             "key": "show",
             "config": {
+              "id": 8480,
               "type": "boolean",
               "component": "switch",
               "alias": "",
@@ -1389,6 +1431,7 @@
           {
             "key": "zoomPad",
             "config": {
+              "id": 9137,
               "type": "number",
               "component": "slider",
               "alias": "聚焦范围比 [1, 3]",
@@ -1429,4 +1472,4 @@
       "clickZoom"
     ]
   }
-]
+]
\ No newline at end of file
diff --git a/src/components/map/china2d/src/china2d-area/config.vue b/src/components/map/china2d/src/china2d-area/config.vue
index bae25695..c358d1bc 100644
--- a/src/components/map/china2d/src/china2d-area/config.vue
+++ b/src/components/map/china2d/src/china2d-area/config.vue
@@ -114,49 +114,28 @@
         tooltip="请设置info字段作为弹窗内容，info支持配置html标签；如不选，则兼容name和value作为弹窗内容"
         label="info字段"
       >
-        <n-switch
-          v-model:value="config.tooltip.infoField"
+        <g-switch
+          v-model="config.tooltip.infoField"
         />
       </g-field>
       <g-field
         :level="2"
         label="事件类型"
       >
-        <n-radio-group
-          v-model:value="config.tooltip.eventType"
-          size="small"
-        >
-          <n-radio
-            v-for="pair in [
-              { key: 'click', value: '点击区域' },
-              { key: 'mousemove', value: '鼠标移入时' },
-            ]"
-            :key="pair.key"
-            :value="pair.key"
-          >
-            {{ pair.value }}
-          </n-radio>
-        </n-radio-group>
+        <g-radio-group
+          v-model="config.tooltip.eventType"
+          :data="pairData929"
+        />
       </g-field>
       <g-field
         :level="2"
         label="配置选项"
       >
-        <n-radio-group
-          v-model:value="config.tooltip.styleType"
-          size="small"
-        >
-          <n-radio-button
-            v-for="pair in [
-              { key: 'parent', value: '父容器默认' },
-              { key: 'custom', value: '自定义配置' },
-            ]"
-            :key="pair.key"
-            :value="pair.key"
-          >
-            {{ pair.value }}
-          </n-radio-button>
-        </n-radio-group>
+        <g-radio-group
+          v-model="config.tooltip.styleType"
+          :data="pairData1776"
+          is-button
+        />
       </g-field>
       <g-field
         v-if="config.tooltip.styleType === 'custom'"
@@ -329,4 +308,15 @@ const props = defineProps<{
 }>()
 
 const config = toRef(props.com, 'config')
+
+const pairData929 = [
+  { key: 'click', value: '点击区域' },
+  { key: 'mousemove', value: '鼠标移入时' },
+]
+
+const pairData1776 = [
+  { key: 'parent', value: '父容器默认' },
+  { key: 'custom', value: '自定义配置' },
+]
+
 </script>
diff --git a/src/components/map/china2d/src/china2d-bubbles/config.json b/src/components/map/china2d/src/china2d-bubbles/config.json
index 02778c40..1141e8c4 100644
--- a/src/components/map/china2d/src/china2d-bubbles/config.json
+++ b/src/components/map/china2d/src/china2d-bubbles/config.json
@@ -2,6 +2,7 @@
   {
     "key": "defaultStyle",
     "config": {
+      "id": 9170,
       "type": "object",
       "component": "none",
       "alias": "默认样式",
@@ -33,6 +34,7 @@
       {
         "key": "effectType",
         "config": {
+          "id": 2390,
           "type": "string",
           "component": "radioBase",
           "alias": "动画效果",
@@ -69,6 +71,7 @@
       {
         "key": "sizeRange",
         "config": {
+          "id": 4914,
           "type": "array",
           "component": "sliderRange",
           "alias": "气泡大小",
@@ -99,43 +102,12 @@
         },
         "path": "defaultStyle.sizeRange",
         "virtualPath": "",
-        "children": [
-          {
-            "key": "0",
-            "config": {
-              "type": "number",
-              "component": "number",
-              "alias": "",
-              "tip": "",
-              "displayMode": "single",
-              "features": [],
-              "layout": "horizontal",
-              "toggleCol": "",
-              "isHide": false,
-              "defaultValue": 5,
-              "min": 0,
-              "max": 100,
-              "step": 1,
-              "InfiniteMin": false,
-              "InfiniteMax": false,
-              "suffix": "",
-              "enums": [],
-              "pairs": [],
-              "whichEnum": {
-                "field": "",
-                "value": ""
-              },
-              "flatValue": false,
-              "isRange": false
-            },
-            "path": "defaultStyle.sizeRange.0",
-            "virtualPath": ""
-          }
-        ]
+        "children": []
       },
       {
         "key": "offset",
         "config": {
+          "id": 8919,
           "type": "number",
           "component": "slider",
           "alias": "呼吸范围",
@@ -167,6 +139,7 @@
       {
         "key": "opacity",
         "config": {
+          "id": 1377,
           "type": "number",
           "component": "slider",
           "alias": "透明度",
@@ -198,6 +171,7 @@
       {
         "key": "period",
         "config": {
+          "id": 1624,
           "type": "number",
           "component": "slider",
           "alias": "动画时长",
@@ -229,6 +203,7 @@
       {
         "key": "number",
         "config": {
+          "id": 6251,
           "type": "number",
           "component": "slider",
           "alias": "波纹数量",
@@ -260,6 +235,7 @@
       {
         "key": "brushType",
         "config": {
+          "id": 460,
           "type": "string",
           "component": "selectImage",
           "alias": "绘制方式",
@@ -302,6 +278,7 @@
   {
     "key": "typeSeries",
     "config": {
+      "id": 223,
       "type": "array",
       "component": "none",
       "alias": "气泡类型",
@@ -339,6 +316,7 @@
       {
         "key": "0",
         "config": {
+          "id": 6487,
           "type": "object",
           "component": "none",
           "alias": "类型",
@@ -370,6 +348,7 @@
           {
             "key": "bubbleType",
             "config": {
+              "id": 6791,
               "type": "string",
               "component": "input",
               "alias": "类型过滤值",
@@ -401,6 +380,7 @@
           {
             "key": "bubbleKey",
             "config": {
+              "id": 3423,
               "type": "string",
               "component": "echartIcon",
               "alias": "气泡类型",
@@ -432,6 +412,7 @@
           {
             "key": "fillColor",
             "config": {
+              "id": 6184,
               "type": "string",
               "component": "color",
               "alias": "填充颜色",
@@ -465,4 +446,4 @@
       }
     ]
   }
-]
+]
\ No newline at end of file
diff --git a/src/components/map/china2d/src/china2d-bubbles/config.vue b/src/components/map/china2d/src/china2d-bubbles/config.vue
index 51ff3338..cec5a6d7 100644
--- a/src/components/map/china2d/src/china2d-bubbles/config.vue
+++ b/src/components/map/china2d/src/china2d-bubbles/config.vue
@@ -7,20 +7,10 @@
         :level="2"
         label="动画效果"
       >
-        <n-radio-group
-          v-model:value="config.defaultStyle.effectType"
-          size="small"
-        >
-          <n-radio
-            v-for="pair in [
-              { key: 'ripple', value: '涟漪动效' },
-            ]"
-            :key="pair.key"
-            :value="pair.key"
-          >
-            {{ pair.value }}
-          </n-radio>
-        </n-radio-group>
+        <g-radio-group
+          v-model="config.defaultStyle.effectType"
+          :data="pairData2390"
+        />
       </g-field>
       <g-field
         :level="2"
@@ -132,7 +122,7 @@
 
 <script lang='ts' setup>
 import { toRef } from 'vue'
-import { China2dBubbles, bubbleTypes, brushTypes } from './index'
+import { China2dBubbles, brushTypes, bubbleTypes } from './index'
 
 const props = defineProps<{
   com: China2dBubbles
@@ -140,6 +130,10 @@ const props = defineProps<{
 
 const config = toRef(props.com, 'config')
 
+const pairData2390 = [
+  { key: 'ripple', value: '涟漪动效' },
+]
+
 const handleAddTypeSeriesItem = () => {
   return {
     bubbleType: '1',
@@ -147,4 +141,5 @@ const handleAddTypeSeriesItem = () => {
     fillColor: 'rgba(198, 236, 238, 1)',
   }
 }
+
 </script>
diff --git a/src/components/map/china2d/src/china2d-bubbles/index.ts b/src/components/map/china2d/src/china2d-bubbles/index.ts
index f76ea0e0..5388da9f 100644
--- a/src/components/map/china2d/src/china2d-bubbles/index.ts
+++ b/src/components/map/china2d/src/china2d-bubbles/index.ts
@@ -79,16 +79,6 @@ export class China2dBubbles extends DatavComponent {
 
 export default China2dBubbles
 
-export const bubbleTypes = [
-  { id: 'circle', value: '圆形', icon: 'shape-circle' },
-  { id: 'rect', value: '矩形', icon: 'shape-rect' },
-  { id: 'roundRect', value: '圆角矩形', icon: 'shape-round-rect' },
-  { id: 'triangle', value: '三矩形', icon: 'shape-triangle' },
-  { id: 'diamond', value: '菱形', icon: 'shape-diamond' },
-  { id: 'arrow', value: '箭头', icon: 'shape-arrow' },
-  { id: 'pin', value: '针头', icon: 'shape-pin' },
-]
-
 export const brushTypes = [
   {
     id: 'fill',
@@ -101,3 +91,13 @@ export const brushTypes = [
     src: 'https://files.pengxiaotian.com/com-materiel/bubble-2-162-104.png',
   },
 ]
+
+export const bubbleTypes = [
+  { id: 'circle', value: '圆形', icon: 'shape-circle' },
+  { id: 'rect', value: '矩形', icon: 'shape-rect' },
+  { id: 'roundRect', value: '圆角矩形', icon: 'shape-round-rect' },
+  { id: 'triangle', value: '三矩形', icon: 'shape-triangle' },
+  { id: 'diamond', value: '菱形', icon: 'shape-diamond' },
+  { id: 'arrow', value: '箭头', icon: 'shape-arrow' },
+  { id: 'pin', value: '针头', icon: 'shape-pin' },
+]
diff --git a/src/components/map/china2d/src/china2d-flyingline/config.json b/src/components/map/china2d/src/china2d-flyingline/config.json
index eb40f721..524eceab 100644
--- a/src/components/map/china2d/src/china2d-flyingline/config.json
+++ b/src/components/map/china2d/src/china2d-flyingline/config.json
@@ -2,6 +2,7 @@
   {
     "key": "flyinglineStyle",
     "config": {
+      "id": 834,
       "type": "object",
       "component": "none",
       "alias": "飞线样式",
@@ -33,6 +34,7 @@
       {
         "key": "fromColor",
         "config": {
+          "id": 1410,
           "type": "string",
           "component": "color",
           "alias": "起点颜色",
@@ -64,6 +66,7 @@
       {
         "key": "toColor",
         "config": {
+          "id": 6163,
           "type": "string",
           "component": "color",
           "alias": "终点颜色",
@@ -95,6 +98,7 @@
       {
         "key": "k",
         "config": {
+          "id": 7113,
           "type": "number",
           "component": "slider",
           "alias": "飞线渐变",
@@ -126,6 +130,7 @@
       {
         "key": "trailLength",
         "config": {
+          "id": 5709,
           "type": "number",
           "component": "slider",
           "alias": "飞线长度",
@@ -157,6 +162,7 @@
       {
         "key": "trailSize",
         "config": {
+          "id": 3874,
           "type": "number",
           "component": "slider",
           "alias": "飞线粗细",
@@ -188,6 +194,7 @@
       {
         "key": "curveness",
         "config": {
+          "id": 3418,
           "type": "number",
           "component": "slider",
           "alias": "飞线曲率",
@@ -219,6 +226,7 @@
       {
         "key": "constantSpeed",
         "config": {
+          "id": 7789,
           "type": "number",
           "component": "slider",
           "alias": "飞行速度",
@@ -250,6 +258,7 @@
       {
         "key": "period",
         "config": {
+          "id": 1604,
           "type": "number",
           "component": "slider",
           "alias": "飞行时长",
@@ -281,6 +290,7 @@
       {
         "key": "lineWidth",
         "config": {
+          "id": 5492,
           "type": "number",
           "component": "slider",
           "alias": "轨迹粗细",
@@ -312,6 +322,7 @@
       {
         "key": "opacity",
         "config": {
+          "id": 8615,
           "type": "number",
           "component": "slider",
           "alias": "轨迹透明度",
@@ -357,6 +368,7 @@
   {
     "key": "flareStyle",
     "config": {
+      "id": 7963,
       "type": "object",
       "component": "none",
       "alias": "耀斑样式",
@@ -388,6 +400,7 @@
       {
         "key": "show",
         "config": {
+          "id": 5541,
           "type": "boolean",
           "component": "switch",
           "alias": "",
@@ -419,6 +432,7 @@
       {
         "key": "type",
         "config": {
+          "id": 7382,
           "type": "string",
           "component": "echartIcon",
           "alias": "类型",
@@ -450,6 +464,7 @@
       {
         "key": "color",
         "config": {
+          "id": 6640,
           "type": "string",
           "component": "color",
           "alias": "颜色",
@@ -481,6 +496,7 @@
       {
         "key": "size",
         "config": {
+          "id": 8571,
           "type": "number",
           "component": "slider",
           "alias": "大小",
@@ -512,6 +528,7 @@
       {
         "key": "lineWidth",
         "config": {
+          "id": 2980,
           "type": "number",
           "component": "number",
           "alias": "",
@@ -549,4 +566,4 @@
       "lineWidth"
     ]
   }
-]
+]
\ No newline at end of file
diff --git a/src/components/map/china2d/src/china2d-flyingline/config.vue b/src/components/map/china2d/src/china2d-flyingline/config.vue
index 66d11843..5e80c11a 100644
--- a/src/components/map/china2d/src/china2d-flyingline/config.vue
+++ b/src/components/map/china2d/src/china2d-flyingline/config.vue
@@ -157,4 +157,5 @@ const props = defineProps<{
 }>()
 
 const config = toRef(props.com, 'config')
+
 </script>
diff --git a/src/components/map/china2d/src/china2d-flyingline/index.ts b/src/components/map/china2d/src/china2d-flyingline/index.ts
index 7ef77a95..493d51ca 100644
--- a/src/components/map/china2d/src/china2d-flyingline/index.ts
+++ b/src/components/map/china2d/src/china2d-flyingline/index.ts
@@ -73,6 +73,8 @@ export class China2dFlyingline extends DatavComponent {
   }
 }
 
+export default China2dFlyingline
+
 export const flareTypes = [
   { id: 'circle', value: '圆形', icon: 'shape-circle' },
   { id: 'rect', value: '矩形', icon: 'shape-rect' },
@@ -86,4 +88,3 @@ export const flareIcons = {
   airplane: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
 }
 
-export default China2dFlyingline
diff --git a/src/components/map/china2d/src/config.json b/src/components/map/china2d/src/config.json
index 5368a442..03c3daa1 100644
--- a/src/components/map/china2d/src/config.json
+++ b/src/components/map/china2d/src/config.json
@@ -2,6 +2,7 @@
   {
     "key": "global",
     "config": {
+      "id": 2481,
       "type": "object",
       "component": "none",
       "alias": "全局配置",
@@ -33,6 +34,7 @@
       {
         "key": "bgColor",
         "config": {
+          "id": 4349,
           "type": "string",
           "component": "color",
           "alias": "地图背景",
@@ -64,6 +66,7 @@
       {
         "key": "zoom",
         "config": {
+          "id": 1962,
           "type": "object",
           "component": "none",
           "alias": "地图缩放",
@@ -95,6 +98,7 @@
           {
             "key": "range",
             "config": {
+              "id": 481,
               "type": "array",
               "component": "sliderRange",
               "alias": "缩放范围 [0, 20]",
@@ -125,43 +129,12 @@
             },
             "path": "global.zoom.range",
             "virtualPath": "",
-            "children": [
-              {
-                "key": "0",
-                "config": {
-                  "type": "number",
-                  "component": "number",
-                  "alias": "",
-                  "tip": "",
-                  "displayMode": "single",
-                  "features": [],
-                  "layout": "horizontal",
-                  "toggleCol": "",
-                  "isHide": false,
-                  "defaultValue": 0,
-                  "min": 0,
-                  "max": 100,
-                  "step": 1,
-                  "InfiniteMin": false,
-                  "InfiniteMax": false,
-                  "suffix": "",
-                  "enums": [],
-                  "pairs": [],
-                  "whichEnum": {
-                    "field": "",
-                    "value": ""
-                  },
-                  "flatValue": false,
-                  "isRange": false
-                },
-                "path": "global.zoom.range.0",
-                "virtualPath": ""
-              }
-            ]
+            "children": []
           },
           {
             "key": "value",
             "config": {
+              "id": 6054,
               "type": "number",
               "component": "slider",
               "alias": "默认级别 [0, 20]",
@@ -171,7 +144,7 @@
               "layout": "horizontal",
               "toggleCol": "",
               "isHide": false,
-              "defaultValue": 4.5,
+              "defaultValue": 1.5,
               "min": 0,
               "max": 20,
               "step": 0.1,
@@ -199,6 +172,7 @@
       {
         "key": "center",
         "config": {
+          "id": 830,
           "type": "object",
           "component": "none",
           "alias": "地图中心",
@@ -230,6 +204,7 @@
           {
             "key": "lng",
             "config": {
+              "id": 4172,
               "type": "number",
               "component": "slider",
               "alias": "经度",
@@ -261,6 +236,7 @@
           {
             "key": "lat",
             "config": {
+              "id": 2910,
               "type": "number",
               "component": "slider",
               "alias": "纬度",
@@ -305,6 +281,7 @@
   {
     "key": "tooltip",
     "config": {
+      "id": 6014,
       "type": "object",
       "component": "none",
       "alias": "弹框设置",
@@ -336,6 +313,7 @@
       {
         "key": "textStyle",
         "config": {
+          "id": 698,
           "type": "object",
           "component": "none",
           "alias": "文本样式",
@@ -367,6 +345,7 @@
           {
             "key": "fontFamily",
             "config": {
+              "id": 3075,
               "type": "string",
               "component": "fontFamily",
               "alias": "字体",
@@ -398,6 +377,7 @@
           {
             "key": "fontWeight",
             "config": {
+              "id": 1107,
               "type": "string",
               "component": "fontWeight",
               "alias": "文字粗细",
@@ -429,6 +409,7 @@
           {
             "key": "fontSize",
             "config": {
+              "id": 5753,
               "type": "number",
               "component": "number",
               "alias": "字号",
@@ -460,6 +441,7 @@
           {
             "key": "color",
             "config": {
+              "id": 2320,
               "type": "string",
               "component": "color",
               "alias": "颜色",
@@ -499,6 +481,7 @@
       {
         "key": "lineHeight",
         "config": {
+          "id": 8620,
           "type": "number",
           "component": "slider",
           "alias": "行高比例",
@@ -530,6 +513,7 @@
       {
         "key": "borderRadius",
         "config": {
+          "id": 8323,
           "type": "number",
           "component": "slider",
           "alias": "圆角半径",
@@ -561,6 +545,7 @@
       {
         "key": "padding",
         "config": {
+          "id": 7521,
           "type": "object",
           "component": "none",
           "alias": "外边距",
@@ -592,6 +577,7 @@
           {
             "key": "top",
             "config": {
+              "id": 3491,
               "type": "number",
               "component": "number",
               "alias": "上",
@@ -623,6 +609,7 @@
           {
             "key": "bottom",
             "config": {
+              "id": 6218,
               "type": "number",
               "component": "number",
               "alias": "下",
@@ -654,6 +641,7 @@
           {
             "key": "left",
             "config": {
+              "id": 8615,
               "type": "number",
               "component": "number",
               "alias": "左",
@@ -685,6 +673,7 @@
           {
             "key": "right",
             "config": {
+              "id": 2589,
               "type": "number",
               "component": "number",
               "alias": "右",
@@ -724,6 +713,7 @@
       {
         "key": "bgColor",
         "config": {
+          "id": 1139,
           "type": "string",
           "component": "color",
           "alias": "背景色",
@@ -764,6 +754,7 @@
   {
     "key": "interactive",
     "config": {
+      "id": 7575,
       "type": "object",
       "component": "none",
       "alias": "交互配置",
@@ -795,6 +786,7 @@
       {
         "key": "dragging",
         "config": {
+          "id": 5068,
           "type": "boolean",
           "component": "switch",
           "alias": "开启拖拽",
@@ -826,6 +818,7 @@
       {
         "key": "scrollWheelZoom",
         "config": {
+          "id": 1713,
           "type": "boolean",
           "component": "switch",
           "alias": "开启缩放",
@@ -857,6 +850,7 @@
       {
         "key": "isInteractive",
         "config": {
+          "id": 4611,
           "type": "boolean",
           "component": "switch",
           "alias": "地图交互",
@@ -892,4 +886,4 @@
       "isInteractive"
     ]
   }
-]
+]
\ No newline at end of file
diff --git a/src/components/map/china2d/src/config.vue b/src/components/map/china2d/src/config.vue
index f79822e7..f28c8535 100644
--- a/src/components/map/china2d/src/config.vue
+++ b/src/components/map/china2d/src/config.vue
@@ -167,55 +167,42 @@
         :level="2"
         label="开启拖拽"
       >
-        <n-switch
-          v-model:value="config.interactive.dragging"
+        <g-switch
+          v-model="config.interactive.dragging"
         />
       </g-field>
       <g-field
         :level="2"
         label="开启缩放"
       >
-        <n-switch
-          v-model:value="config.interactive.scrollWheelZoom"
+        <g-switch
+          v-model="config.interactive.scrollWheelZoom"
         />
       </g-field>
       <g-field
         :level="2"
         label="地图交互"
       >
-        <n-switch
-          v-model:value="config.interactive.isInteractive"
+        <g-switch
+          v-model="config.interactive.isInteractive"
         />
       </g-field>
     </g-field-collapse>
   </div>
 </template>
 
-<script lang='ts'>
-import { defineComponent, PropType, toRef } from 'vue'
+<script lang='ts' setup>
+import { toRef } from 'vue'
 import {
   fontFamilys,
   fontWeights,
 } from '@/data/select-options'
 import { China2d } from './china2d'
 
-export default defineComponent({
-  name: 'VChina2dProp',
-  props: {
-    com: {
-      type: Object as PropType<China2d>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const config = toRef(props.com, 'config')
+const props = defineProps<{
+  com: China2d
+}>()
 
-    return {
-      config,
+const config = toRef(props.com, 'config')
 
-      fontFamilys,
-      fontWeights,
-    }
-  },
-})
 </script>
diff --git a/src/components/media/bg-box/src/bg-box.ts b/src/components/media/bg-box/src/bg-box.ts
index 362c8129..4fb6fce9 100644
--- a/src/components/media/bg-box/src/bg-box.ts
+++ b/src/components/media/bg-box/src/bg-box.ts
@@ -89,6 +89,8 @@ export class BgBox extends DatavComponent {
   async loadData() {}
 }
 
+export default BgBox
+
 export const presetImages: BorderImage[] = [
   ...BorderBoxPresetImages,
   {
@@ -273,4 +275,3 @@ export const presetImages: BorderImage[] = [
   },
 ]
 
-export default BgBox
diff --git a/src/components/media/bg-box/src/config.json b/src/components/media/bg-box/src/config.json
index 97597130..e42f6bb1 100644
--- a/src/components/media/bg-box/src/config.json
+++ b/src/components/media/bg-box/src/config.json
@@ -2,6 +2,7 @@
   {
     "key": "borderRadius",
     "config": {
+      "id": 2169,
       "type": "number",
       "component": "number",
       "alias": "圆角",
@@ -24,7 +25,8 @@
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "borderRadius",
     "virtualPath": ""
@@ -32,6 +34,7 @@
   {
     "key": "fills",
     "config": {
+      "id": 977,
       "type": "array",
       "component": "none",
       "alias": "填充",
@@ -60,7 +63,8 @@
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "fills",
     "virtualPath": "",
@@ -68,6 +72,7 @@
       {
         "key": "0",
         "config": {
+          "id": 6016,
           "type": "object",
           "component": "none",
           "alias": "填充",
@@ -90,7 +95,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "fills.0",
         "virtualPath": "",
@@ -98,6 +104,7 @@
           {
             "key": "fill",
             "config": {
+              "id": 2799,
               "type": "string",
               "component": "color",
               "alias": "填充",
@@ -120,7 +127,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "fills.0.fill",
             "virtualPath": "slotProps.item.fill"
@@ -128,6 +136,7 @@
           {
             "key": "opacity",
             "config": {
+              "id": 6991,
               "type": "number",
               "component": "number",
               "alias": "透明度",
@@ -150,7 +159,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "fills.0.opacity",
             "virtualPath": "slotProps.item.opacity"
@@ -163,6 +173,7 @@
   {
     "key": "border",
     "config": {
+      "id": 5508,
       "type": "object",
       "component": "none",
       "alias": "边框",
@@ -185,7 +196,8 @@
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "border",
     "virtualPath": "",
@@ -193,6 +205,7 @@
       {
         "key": "show",
         "config": {
+          "id": 5970,
           "type": "boolean",
           "component": "switch",
           "alias": "",
@@ -215,7 +228,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "border.show",
         "virtualPath": ""
@@ -223,6 +237,7 @@
       {
         "key": "type",
         "config": {
+          "id": 8683,
           "type": "string",
           "component": "radio",
           "alias": "边框类型",
@@ -258,7 +273,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "border.type",
         "virtualPath": ""
@@ -266,6 +282,7 @@
       {
         "key": "flat",
         "config": {
+          "id": 6420,
           "type": "object",
           "component": "none",
           "alias": "边框配置",
@@ -288,7 +305,8 @@
             "field": "type",
             "value": "flat"
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "border.flat",
         "virtualPath": "",
@@ -296,6 +314,7 @@
           {
             "key": "width",
             "config": {
+              "id": 4072,
               "type": "number",
               "component": "number",
               "alias": "粗细",
@@ -318,7 +337,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "border.flat.width",
             "virtualPath": ""
@@ -326,6 +346,7 @@
           {
             "key": "style",
             "config": {
+              "id": 7362,
               "type": "string",
               "component": "lineStyle",
               "alias": "样式",
@@ -348,7 +369,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "border.flat.style",
             "virtualPath": ""
@@ -356,6 +378,7 @@
           {
             "key": "color",
             "config": {
+              "id": 5722,
               "type": "string",
               "component": "color",
               "alias": "颜色",
@@ -378,7 +401,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "border.flat.color",
             "virtualPath": ""
@@ -393,6 +417,7 @@
       {
         "key": "linearGradient",
         "config": {
+          "id": 9003,
           "type": "object",
           "component": "none",
           "alias": "边框配置",
@@ -415,7 +440,8 @@
             "field": "type",
             "value": "linearGradient"
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "border.linearGradient",
         "virtualPath": "",
@@ -423,6 +449,7 @@
           {
             "key": "width",
             "config": {
+              "id": 2122,
               "type": "number",
               "component": "number",
               "alias": "粗细",
@@ -445,7 +472,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "border.linearGradient.width",
             "virtualPath": ""
@@ -453,6 +481,7 @@
           {
             "key": "color",
             "config": {
+              "id": 5774,
               "type": "object",
               "component": "none",
               "alias": "渐变色",
@@ -475,7 +504,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "border.linearGradient.color",
             "virtualPath": "",
@@ -483,6 +513,7 @@
               {
                 "key": "angle",
                 "config": {
+                  "id": 4154,
                   "type": "number",
                   "component": "number",
                   "alias": "角度",
@@ -505,7 +536,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "border.linearGradient.color.angle",
                 "virtualPath": ""
@@ -513,6 +545,7 @@
               {
                 "key": "stops",
                 "config": {
+                  "id": 1551,
                   "type": "array",
                   "component": "none",
                   "alias": "节点",
@@ -541,7 +574,8 @@
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "border.linearGradient.color.stops",
                 "virtualPath": "",
@@ -549,6 +583,7 @@
                   {
                     "key": "0",
                     "config": {
+                      "id": 4947,
                       "type": "object",
                       "component": "none",
                       "alias": "节点",
@@ -571,7 +606,8 @@
                         "field": "",
                         "value": ""
                       },
-                      "flatValue": false
+                      "flatValue": false,
+                      "isRange": false
                     },
                     "path": "border.linearGradient.color.stops.0",
                     "virtualPath": "",
@@ -579,6 +615,7 @@
                       {
                         "key": "offset",
                         "config": {
+                          "id": 8303,
                           "type": "number",
                           "component": "number",
                           "alias": "位置",
@@ -601,7 +638,8 @@
                             "field": "",
                             "value": ""
                           },
-                          "flatValue": false
+                          "flatValue": false,
+                          "isRange": false
                         },
                         "path": "border.linearGradient.color.stops.0.offset",
                         "virtualPath": "slotProps.item.offset"
@@ -609,6 +647,7 @@
                       {
                         "key": "color",
                         "config": {
+                          "id": 3720,
                           "type": "string",
                           "component": "color",
                           "alias": "颜色",
@@ -631,7 +670,8 @@
                             "field": "",
                             "value": ""
                           },
-                          "flatValue": false
+                          "flatValue": false,
+                          "isRange": false
                         },
                         "path": "border.linearGradient.color.stops.0.color",
                         "virtualPath": "slotProps.item.color"
@@ -656,6 +696,7 @@
       {
         "key": "imageType",
         "config": {
+          "id": 406,
           "type": "string",
           "component": "radio",
           "alias": "配置方式",
@@ -687,7 +728,8 @@
             "field": "type",
             "value": "image"
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "border.imageType",
         "virtualPath": ""
@@ -695,6 +737,7 @@
       {
         "key": "presetImage",
         "config": {
+          "id": 8798,
           "type": "string",
           "component": "selectImage",
           "alias": "边框配置",
@@ -717,7 +760,8 @@
             "field": "imageType",
             "value": "preset"
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "border.presetImage",
         "virtualPath": ""
@@ -725,6 +769,7 @@
       {
         "key": "customImage",
         "config": {
+          "id": 819,
           "type": "object",
           "component": "none",
           "alias": "边框配置",
@@ -747,7 +792,8 @@
             "field": "imageType",
             "value": "custom"
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "border.customImage",
         "virtualPath": "",
@@ -755,6 +801,7 @@
           {
             "key": "source",
             "config": {
+              "id": 5794,
               "type": "string",
               "component": "uploadImage",
               "alias": "图片",
@@ -777,7 +824,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "border.customImage.source",
             "virtualPath": ""
@@ -785,6 +833,7 @@
           {
             "key": "slice",
             "config": {
+              "id": 1370,
               "type": "string",
               "component": "input",
               "alias": "切片",
@@ -807,7 +856,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "border.customImage.slice",
             "virtualPath": ""
@@ -815,6 +865,7 @@
           {
             "key": "width",
             "config": {
+              "id": 3020,
               "type": "string",
               "component": "input",
               "alias": "宽度",
@@ -837,7 +888,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "border.customImage.width",
             "virtualPath": ""
@@ -845,6 +897,7 @@
           {
             "key": "outset",
             "config": {
+              "id": 3569,
               "type": "string",
               "component": "input",
               "alias": "外扩",
@@ -867,7 +920,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "border.customImage.outset",
             "virtualPath": ""
@@ -875,6 +929,7 @@
           {
             "key": "repeat",
             "config": {
+              "id": 3049,
               "type": "string",
               "component": "repeatType",
               "alias": "平铺类型",
@@ -897,7 +952,8 @@
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "border.customImage.repeat",
             "virtualPath": ""
@@ -925,6 +981,7 @@
   {
     "key": "filter",
     "config": {
+      "id": 5294,
       "type": "object",
       "component": "none",
       "alias": "滤镜",
@@ -947,7 +1004,8 @@
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "filter",
     "virtualPath": "",
@@ -955,6 +1013,7 @@
       {
         "key": "blur",
         "config": {
+          "id": 1227,
           "type": "string",
           "component": "input",
           "alias": "模糊",
@@ -977,7 +1036,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "filter.blur",
         "virtualPath": ""
@@ -990,6 +1050,7 @@
   {
     "key": "backdropFilter",
     "config": {
+      "id": 7356,
       "type": "object",
       "component": "none",
       "alias": "背景过滤器",
@@ -1012,7 +1073,8 @@
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "backdropFilter",
     "virtualPath": "",
@@ -1020,6 +1082,7 @@
       {
         "key": "blur",
         "config": {
+          "id": 6151,
           "type": "string",
           "component": "input",
           "alias": "磨玻璃模糊",
@@ -1042,7 +1105,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "backdropFilter.blur",
         "virtualPath": ""
@@ -1055,6 +1119,7 @@
   {
     "key": "urlConfig",
     "config": {
+      "id": 3438,
       "type": "object",
       "component": "none",
       "alias": "超链接配置",
@@ -1077,7 +1142,8 @@
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "urlConfig",
     "virtualPath": "",
@@ -1085,6 +1151,7 @@
       {
         "key": "url",
         "config": {
+          "id": 8067,
           "type": "string",
           "component": "input",
           "alias": "超链接",
@@ -1107,7 +1174,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "urlConfig.url",
         "virtualPath": ""
@@ -1115,6 +1183,7 @@
       {
         "key": "ifBlank",
         "config": {
+          "id": 9480,
           "type": "boolean",
           "component": "switch",
           "alias": "是否新打开窗口",
@@ -1137,7 +1206,8 @@
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "urlConfig.ifBlank",
         "virtualPath": ""
@@ -1148,4 +1218,4 @@
       "ifBlank"
     ]
   }
-]
+]
\ No newline at end of file
diff --git a/src/components/media/bg-box/src/config.vue b/src/components/media/bg-box/src/config.vue
index 948a09b0..15ab3bb8 100644
--- a/src/components/media/bg-box/src/config.vue
+++ b/src/components/media/bg-box/src/config.vue
@@ -55,22 +55,11 @@
         :level="2"
         label="边框类型"
       >
-        <n-radio-group
-          v-model:value="config.border.type"
-          size="small"
-        >
-          <n-radio-button
-            v-for="pair in [
-              { key: 'flat', value: '纯色' },
-              { key: 'linearGradient', value: '渐变' },
-              { key: 'image', value: '图片' },
-            ]"
-            :key="pair.key"
-            :value="pair.key"
-          >
-            {{ pair.value }}
-          </n-radio-button>
-        </n-radio-group>
+        <g-radio-group
+          v-model="config.border.type"
+          :data="pairData8683"
+          is-button
+        />
       </g-field>
       <g-field
         v-if="config.border.type === 'flat'"
@@ -171,24 +160,14 @@
         :level="2"
         label="配置方式"
       >
-        <n-radio-group
-          v-model:value="config.border.imageType"
-          size="small"
-        >
-          <n-radio-button
-            v-for="pair in [
-              { key: 'preset', value: '预设边框' },
-              { key: 'custom', value: '自定义边框' },
-            ]"
-            :key="pair.key"
-            :value="pair.key"
-          >
-            {{ pair.value }}
-          </n-radio-button>
-        </n-radio-group>
+        <g-radio-group
+          v-model="config.border.imageType"
+          :data="pairData406"
+          is-button
+        />
       </g-field>
       <g-field
-        v-if="config.border.type === 'image' && config.border.imageType === 'preset'"
+        v-if="config.border.imageType === 'preset'"
         :level="2"
         label="边框配置"
       >
@@ -198,7 +177,7 @@
         />
       </g-field>
       <g-field
-        v-if="config.border.type === 'image' && config.border.imageType === 'custom'"
+        v-if="config.border.imageType === 'custom'"
         :level="2"
         label="边框配置"
         :is-flat="true"
@@ -271,56 +250,51 @@
         :level="2"
         label="是否新打开窗口"
       >
-        <n-switch
-          v-model:value="config.urlConfig.ifBlank"
+        <g-switch
+          v-model="config.urlConfig.ifBlank"
         />
       </g-field>
     </g-field-collapse>
   </div>
 </template>
 
-<script lang='ts'>
-import { defineComponent, PropType, toRef } from 'vue'
+<script lang='ts' setup>
+import { toRef } from 'vue'
 import {
   lineStyles,
   repeatTypes,
 } from '@/data/select-options'
 import { BgBox, presetImages } from './bg-box'
 
-export default defineComponent({
-  name: 'VBgBoxProp',
-  props: {
-    com: {
-      type: Object as PropType<BgBox>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const config = toRef(props.com, 'config')
+const props = defineProps<{
+  com: BgBox
+}>()
+
+const config = toRef(props.com, 'config')
+
+const handleAddFillsItem = () => {
+  return {
+    fill: '#333',
+    opacity: 10,
+  }
+}
 
-    const handleAddFillsItem = () => {
-      return {
-        fill: '#333',
-        opacity: 10,
-      }
-    }
+const pairData8683 = [
+  { key: 'flat', value: '纯色' },
+  { key: 'linearGradient', value: '渐变' },
+  { key: 'image', value: '图片' },
+]
 
-    const handleAddStopsItem = () => {
-      return {
-        offset: 0,
-        color: '#f60',
-      }
-    }
+const handleAddStopsItem = () => {
+  return {
+    offset: 0,
+    color: '#f60',
+  }
+}
 
-    return {
-      config,
+const pairData406 = [
+  { key: 'preset', value: '预设边框' },
+  { key: 'custom', value: '自定义边框' },
+]
 
-      lineStyles,
-      repeatTypes,
-      presetImages,
-      handleAddFillsItem,
-      handleAddStopsItem,
-    }
-  },
-})
 </script>
diff --git a/src/components/media/border-box/src/border-box.ts b/src/components/media/border-box/src/border-box.ts
index 57b16016..a8bab687 100644
--- a/src/components/media/border-box/src/border-box.ts
+++ b/src/components/media/border-box/src/border-box.ts
@@ -40,6 +40,8 @@ export class BorderBox extends DatavComponent {
   async loadData() {}
 }
 
+export default BorderBox
+
 export const presetImages: BorderImage[] = [
   {
     id: 'box1',
@@ -187,4 +189,3 @@ export const presetImages: BorderImage[] = [
   },
 ]
 
-export default BorderBox
diff --git a/src/components/media/border-box/src/config.json b/src/components/media/border-box/src/config.json
index bdf140c4..678ceef6 100644
--- a/src/components/media/border-box/src/config.json
+++ b/src/components/media/border-box/src/config.json
@@ -2,6 +2,7 @@
   {
     "key": "boxStyle",
     "config": {
+      "id": 9653,
       "type": "object",
       "component": "none",
       "alias": "框",
@@ -19,11 +20,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "boxStyle",
     "virtualPath": "",
@@ -31,6 +34,7 @@
       {
         "key": "style",
         "config": {
+          "id": 4207,
           "type": "string",
           "component": "selectImage",
           "alias": "样式",
@@ -40,7 +44,7 @@
           "layout": "horizontal",
           "toggleCol": "",
           "isHide": false,
-          "defaultValue": "box1",
+          "defaultValue": "box15",
           "min": 0,
           "max": 100,
           "step": 1,
@@ -48,11 +52,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "boxStyle.style",
         "virtualPath": ""
@@ -62,4 +68,4 @@
       "style"
     ]
   }
-]
+]
\ No newline at end of file
diff --git a/src/components/media/border-box/src/config.vue b/src/components/media/border-box/src/config.vue
index 63b55758..c3feedd7 100644
--- a/src/components/media/border-box/src/config.vue
+++ b/src/components/media/border-box/src/config.vue
@@ -16,25 +16,14 @@
   </div>
 </template>
 
-<script lang='ts'>
-import { defineComponent, PropType, toRef } from 'vue'
+<script lang='ts' setup>
+import { toRef } from 'vue'
 import { BorderBox, presetImages } from './border-box'
 
-export default defineComponent({
-  name: 'VBorderBoxProp',
-  props: {
-    com: {
-      type: Object as PropType<BorderBox>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const config = toRef(props.com, 'config')
+const props = defineProps<{
+  com: BorderBox
+}>()
+
+const config = toRef(props.com, 'config')
 
-    return {
-      config,
-      presetImages,
-    }
-  },
-})
 </script>
diff --git a/src/components/media/decoration/src/config.json b/src/components/media/decoration/src/config.json
index 72a197b4..048165fe 100644
--- a/src/components/media/decoration/src/config.json
+++ b/src/components/media/decoration/src/config.json
@@ -2,6 +2,7 @@
   {
     "key": "global",
     "config": {
+      "id": 2870,
       "type": "object",
       "component": "none",
       "alias": "全局",
@@ -19,11 +20,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "global",
     "virtualPath": "",
@@ -31,6 +34,7 @@
       {
         "key": "img",
         "config": {
+          "id": 2657,
           "type": "string",
           "component": "selectImage",
           "alias": "装饰元素",
@@ -48,11 +52,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.img",
         "virtualPath": ""
@@ -60,6 +66,7 @@
       {
         "key": "opacity",
         "config": {
+          "id": 9224,
           "type": "number",
           "component": "slider",
           "alias": "透明度",
@@ -77,11 +84,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.opacity",
         "virtualPath": ""
@@ -92,4 +101,4 @@
       "opacity"
     ]
   }
-]
+]
\ No newline at end of file
diff --git a/src/components/media/decoration/src/config.vue b/src/components/media/decoration/src/config.vue
index 605982b7..f75e36d2 100644
--- a/src/components/media/decoration/src/config.vue
+++ b/src/components/media/decoration/src/config.vue
@@ -9,7 +9,7 @@
       >
         <g-select-image
           v-model="config.global.img"
-          :images="images"
+          :images="presetImages"
         />
       </g-field>
       <g-field
@@ -27,36 +27,14 @@
   </div>
 </template>
 
-<script lang='ts'>
-import { defineComponent, PropType, toRef } from 'vue'
+<script lang='ts' setup>
+import { toRef } from 'vue'
 import { Decoration, presetImages } from './decoration'
-import { BorderImage } from '@/components/_models/border-image'
 
-export default defineComponent({
-  name: 'VDecorationProp',
-  props: {
-    com: {
-      type: Object as PropType<Decoration>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const config = toRef(props.com, 'config')
+const props = defineProps<{
+  com: Decoration
+}>()
 
-    const images: BorderImage[] = []
-    for (const key in presetImages) {
-      const item = presetImages[key]
-      images.push({
-        id: key,
-        name: key,
-        src: item.url,
-      })
-    }
+const config = toRef(props.com, 'config')
 
-    return {
-      config,
-      images,
-    }
-  },
-})
 </script>
diff --git a/src/components/media/decoration/src/decoration.ts b/src/components/media/decoration/src/decoration.ts
index dffc73e4..f7472802 100644
--- a/src/components/media/decoration/src/decoration.ts
+++ b/src/components/media/decoration/src/decoration.ts
@@ -3,6 +3,7 @@ import {
   ApiConfigMap, ApiDataConfigMap,
 } from '@/components/_models/data-source'
 import { DataEventConfig } from '@/components/_models/data-event'
+import { BorderImage } from '@/components/_models/border-image'
 
 /**
  * Decoration
@@ -40,391 +41,496 @@ export class Decoration extends DatavComponent {
   async loadData() {}
 }
 
-export const presetImages: {
-  [key: string]: {
-    url: string
-    css: Record<string, string>
-  }
-} = {
-  gif1: {
-    url: 'https://img.alicdn.com/tps/TB1tFMtPXXXXXXyXpXXXXXXXXXX-1920-1080.gif',
+export default Decoration
+
+export const presetImages: BorderImage[] = [
+  {
+    id: 'gif1',
+    name: 'gif1',
+    src: 'https://files.pengxiaotian.com/deco/gif1-1920-1080.gif',
     css: {
       'background-position': 'left bottom',
     },
   },
-  gif2: {
-    url: 'https://img.alicdn.com/tps/TB1Pg3pPXXXXXcxXpXXXXXXXXXX-1920-1080.gif',
+  {
+    id: 'gif2',
+    name: 'gif2',
+    src: 'https://files.pengxiaotian.com/deco/gif2-1920-1080.gif',
     css: {
       'background-position': 'center',
     },
   },
-  gif3: {
-    url: 'https://img.alicdn.com/tps/TB1XLAgPXXXXXbCXFXXXXXXXXXX-1080-824.gif',
+  {
+    id: 'gif3',
+    name: 'gif3',
+    src: 'https://files.pengxiaotian.com/deco/gif3-1080-824.gif',
     css: {
       'background-position': 'right top',
     },
   },
-  gif4: {
-    url: 'https://img.alicdn.com/tps/TB1LArQPXXXXXcLapXXXXXXXXXX-1080-824.gif',
+  {
+    id: 'gif4',
+    name: 'gif4',
+    src: 'https://files.pengxiaotian.com/deco/gif4-1080-824.gif',
     css: {
       'background-position': 'right bottom',
     },
   },
-  gif5: {
-    url: 'https://img.alicdn.com/tps/TB18er0PXXXXXXwapXXXXXXXXXX-1920-1080.gif',
+  {
+    id: 'gif5',
+    name: 'gif5',
+    src: 'https://files.pengxiaotian.com/deco/gif5-1920-1080.gif',
     css: {
       'background-position': 'left top',
     },
   },
-  gif6: {
-    url: 'https://img.alicdn.com/tps/TB12FP6PXXXXXczXVXXXXXXXXXX-1626-356.gif',
+  {
+    id: 'gif6',
+    name: 'gif6',
+    src: 'https://files.pengxiaotian.com/deco/gif6-1626-356.gif',
     css: {
       'background-position': 'center',
     },
   },
-  gif7: {
-    url: 'https://img.alicdn.com/tps/TB1ZXD8PXXXXXX1aXXXXXXXXXXX-94-1461.gif',
+  {
+    id: 'gif7',
+    name: 'gif7',
+    src: 'https://files.pengxiaotian.com/deco/gif7-94-1461.gif',
     css: {
       'background-size': 'contain',
       'background-position': 'left top',
     },
   },
-  gif8: {
-    url: 'https://img.alicdn.com/tps/TB1Z8MHPFXXXXacaXXXXXXXXXXX-500-54.gif',
+  {
+    id: 'gif8',
+    name: 'gif8',
+    src: 'https://files.pengxiaotian.com/deco/gif8-500-54.gif',
     css: {
       'background-size': 'contain',
       'background-position': 'left top',
     },
   },
-  gif9: {
-    url: 'https://img.alicdn.com/tps/TB1tIIKPFXXXXXIXVXXXXXXXXXX-500-64.gif',
+  {
+    id: 'gif9',
+    name: 'gif9',
+    src: 'https://files.pengxiaotian.com/deco/gif9-500-64.gif',
     css: {
       'background-size': 'contain',
       'background-position': 'left top',
     },
   },
-  gif10: {
-    url: 'https://img.alicdn.com/tps/TB10bUCPFXXXXajapXXXXXXXXXX-782-259.gif',
+  {
+    id: 'gif10',
+    name: 'gif10',
+    src: 'https://files.pengxiaotian.com/deco/gif10-782-259.gif',
     css: {
       'background-size': 'contain',
       'background-position': 'left top',
     },
   },
-  gif11: {
-    url: 'https://img.alicdn.com/tfs/TB15JPjtMTqK1RjSZPhXXXfOFXa-280-800.png',
+  {
+    id: 'gif11',
+    name: 'gif11',
+    src: 'https://files.pengxiaotian.com/deco/gif11-280-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif12: {
-    url: 'https://img.alicdn.com/tfs/TB1_PYmtMHqK1RjSZJnXXbNLpXa-254-800.png',
+  {
+    id: 'gif12',
+    name: 'gif12',
+    src: 'https://files.pengxiaotian.com/deco/gif12-254-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif13: {
-    url: 'https://img.alicdn.com/tfs/TB16KbftSzqK1RjSZPxXXc4tVXa-800-171.png',
+  {
+    id: 'gif13',
+    name: 'gif13',
+    src: 'https://files.pengxiaotian.com/deco/gif13-800-171.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif14: {
-    url: 'https://img.alicdn.com/tfs/TB1Zo2ntQvoK1RjSZFwXXciCFXa-800-103.png',
+  {
+    id: 'gif14',
+    name: 'gif14',
+    src: 'https://files.pengxiaotian.com/deco/gif14-800-103.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif15: {
-    url: 'https://img.alicdn.com/tfs/TB1R7fqtMHqK1RjSZFkXXX.WFXa-800-143.png',
+  {
+    id: 'gif15',
+    name: 'gif15',
+    src: 'https://files.pengxiaotian.com/deco/gif15-800-143.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif16: {
-    url: 'https://img.alicdn.com/tfs/TB1A26ntHvpK1RjSZFqXXcXUVXa-800-154.png',
+  {
+    id: 'gif16',
+    name: 'gif16',
+    src: 'https://files.pengxiaotian.com/deco/gif16-800-154.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif17: {
-    url: 'https://img.alicdn.com/tfs/TB19EDvtNYaK1RjSZFnXXa80pXa-254-800.png',
+  {
+    id: 'gif17',
+    name: 'gif17',
+    src: 'https://files.pengxiaotian.com/deco/gif17-254-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif18: {
-    url: 'https://img.alicdn.com/tfs/TB115YhtMDqK1RjSZSyXXaxEVXa-800-143.png',
+  {
+    id: 'gif18',
+    name: 'gif18',
+    src: 'https://files.pengxiaotian.com/deco/gif18-800-143.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif19: {
-    url: 'https://img.alicdn.com/tfs/TB1F3bqtQzoK1RjSZFlXXai4VXa-113-800.png',
+  {
+    id: 'gif19',
+    name: 'gif19',
+    src: 'https://files.pengxiaotian.com/deco/gif19-113-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif20: {
-    url: 'https://img.alicdn.com/tfs/TB1pZLmtFzqK1RjSZFCXXbbxVXa-840-700.png',
+  {
+    id: 'gif20',
+    name: 'gif20',
+    src: 'https://files.pengxiaotian.com/deco/gif20-840-700.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif21: {
-    url: 'https://img.alicdn.com/tfs/TB1NT_ltFzqK1RjSZFoXXbfcXXa-368-800.png',
+  {
+    id: 'gif21',
+    name: 'gif21',
+    src: 'https://files.pengxiaotian.com/deco/gif21-368-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif22: {
-    url: 'https://img.alicdn.com/tfs/TB1YUbltFzqK1RjSZFoXXbfcXXa-800-103.png',
+  {
+    id: 'gif22',
+    name: 'gif22',
+    src: 'https://files.pengxiaotian.com/deco/gif22-800-103.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif23: {
-    url: 'https://img.alicdn.com/tfs/TB1AgnntQvoK1RjSZPfXXXPKFXa-800-86.png',
+  {
+    id: 'gif23',
+    name: 'gif23',
+    src: 'https://files.pengxiaotian.com/deco/gif23-800-86.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif24: {
-    url: 'https://img.alicdn.com/tfs/TB1mtbmtFzqK1RjSZFCXXbbxVXa-456-800.png',
+  {
+    id: 'gif24',
+    name: 'gif24',
+    src: 'https://files.pengxiaotian.com/deco/gif24-456-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif25: {
-    url: 'https://img.alicdn.com/tfs/TB1eOYKtNnaK1RjSZFtXXbC2VXa-132-800.png',
+  {
+    id: 'gif25',
+    name: 'gif25',
+    src: 'https://files.pengxiaotian.com/deco/gif25-132-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif26: {
-    url: 'https://img.alicdn.com/tfs/TB101HktSzqK1RjSZFHXXb3CpXa-184-800.png',
+  {
+    id: 'gif26',
+    name: 'gif26',
+    src: 'https://files.pengxiaotian.com/deco/gif26-184-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif27: {
-    url: 'https://img.alicdn.com/tfs/TB1t_PftRLoK1RjSZFuXXXn0XXa-800-800.png',
+  {
+    id: 'gif27',
+    name: 'gif27',
+    src: 'https://files.pengxiaotian.com/deco/gif27-800-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif28: {
-    url: 'https://img.alicdn.com/tfs/TB1m5_KtNnaK1RjSZFtXXbC2VXa-800-800.png',
+  {
+    id: 'gif28',
+    name: 'gif28',
+    src: 'https://files.pengxiaotian.com/deco/gif28-800-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif29: {
-    url: 'https://img.alicdn.com/tfs/TB1KtritHPpK1RjSZFFXXa5PpXa-254-800.png',
+  {
+    id: 'gif29',
+    name: 'gif29',
+    src: 'https://files.pengxiaotian.com/deco/gif29-254-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif30: {
-    url: 'https://img.alicdn.com/tfs/TB1oujktMHqK1RjSZFPXXcwapXa-500-500.png',
+  {
+    id: 'gif30',
+    name: 'gif30',
+    src: 'https://files.pengxiaotian.com/deco/gif30-500-500.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif31: {
-    url: 'https://img.alicdn.com/tfs/TB1WxTntQvoK1RjSZPfXXXPKFXa-1000-800.png',
+  {
+    id: 'gif31',
+    name: 'gif31',
+    src: 'https://files.pengxiaotian.com/deco/gif31-1000-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif32: {
-    url: 'https://img.alicdn.com/tfs/TB1aQPltMHqK1RjSZFgXXa7JXXa-800-800.png',
+  {
+    id: 'gif32',
+    name: 'gif32',
+    src: 'https://files.pengxiaotian.com/deco/gif32-800-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif33: {
-    url: 'https://img.alicdn.com/tfs/TB1HYbwtNYaK1RjSZFnXXa80pXa-800-800.png',
+  {
+    id: 'gif33',
+    name: 'gif33',
+    src: 'https://files.pengxiaotian.com/deco/gif33-800-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif34: {
-    url: 'https://img.alicdn.com/tfs/TB1dg2jtMTqK1RjSZPhXXXfOFXa-800-800.png',
+  {
+    id: 'gif34',
+    name: 'gif34',
+    src: 'https://files.pengxiaotian.com/deco/gif34-800-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif35: {
-    url: 'https://img.alicdn.com/tfs/TB1Y6zntHvpK1RjSZFqXXcXUVXa-800-800.png',
+  {
+    id: 'gif35',
+    name: 'gif35',
+    src: 'https://files.pengxiaotian.com/deco/gif35-800-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif36: {
-    url: 'https://img.alicdn.com/tfs/TB1.sLotQvoK1RjSZFwXXciCFXa-800-800.png',
+  {
+    id: 'gif36',
+    name: 'gif36',
+    src: 'https://files.pengxiaotian.com/deco/gif36-800-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif37: {
-    url: 'https://img.alicdn.com/tfs/TB1OhvktMHqK1RjSZFPXXcwapXa-800-800.png',
+  {
+    id: 'gif37',
+    name: 'gif37',
+    src: 'https://files.pengxiaotian.com/deco/gif37-800-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif38: {
-    url: 'https://img.alicdn.com/tfs/TB1aU_itNTpK1RjSZFGXXcHqFXa-800-800.png',
+  {
+    id: 'gif38',
+    name: 'gif38',
+    src: 'https://files.pengxiaotian.com/deco/gif38-800-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif39: {
-    url: 'https://img.alicdn.com/tfs/TB1iFrotQPoK1RjSZKbXXX1IXXa-1200-1200.png',
+  {
+    id: 'gif39',
+    name: 'gif39',
+    src: 'https://files.pengxiaotian.com/deco/gif39-1200-1200.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif40: {
-    url: 'https://img.alicdn.com/tfs/TB1uSTjtH2pK1RjSZFsXXaNlXXa-800-800.png',
+  {
+    id: 'gif40',
+    name: 'gif40',
+    src: 'https://files.pengxiaotian.com/deco/gif40-800-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif41: {
-    url: 'https://img.alicdn.com/tfs/TB1nXLptQvoK1RjSZFDXXXY3pXa-800-800.png',
+  {
+    id: 'gif41',
+    name: 'gif41',
+    src: 'https://files.pengxiaotian.com/deco/gif41-800-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif42: {
-    url: 'https://img.alicdn.com/tfs/TB1ZMDntHrpK1RjSZTEXXcWAVXa-800-200.png',
+  {
+    id: 'gif42',
+    name: 'gif42',
+    src: 'https://files.pengxiaotian.com/deco/gif42-800-200.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif43: {
-    url: 'https://img.alicdn.com/tfs/TB1MtTmtFzqK1RjSZFoXXbfcXXa-800-200.png',
+  {
+    id: 'gif43',
+    name: 'gif43',
+    src: 'https://files.pengxiaotian.com/deco/gif43-800-200.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif44: {
-    url: 'https://img.alicdn.com/tfs/TB1UffotQvoK1RjSZFwXXciCFXa-800-200.png',
+  {
+    id: 'gif44',
+    name: 'gif44',
+    src: 'https://files.pengxiaotian.com/deco/gif44-800-200.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif45: {
-    url: 'https://img.alicdn.com/tfs/TB1LdnitSzqK1RjSZFLXXcn2XXa-800-200.png',
+  {
+    id: 'gif45',
+    name: 'gif45',
+    src: 'https://files.pengxiaotian.com/deco/gif45-800-200.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif46: {
-    url: 'https://img.alicdn.com/tfs/TB1o.fKtNnaK1RjSZFtXXbC2VXa-800-200.png',
+  {
+    id: 'gif46',
+    name: 'gif46',
+    src: 'https://files.pengxiaotian.com/deco/gif46-800-200.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif47: {
-    url: 'https://img.alicdn.com/tfs/TB19K_mtSzqK1RjSZFpXXakSXXa-800-200.png',
+  {
+    id: 'gif47',
+    name: 'gif47',
+    src: 'https://files.pengxiaotian.com/deco/gif47-800-200.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif48: {
-    url: 'https://img.alicdn.com/tfs/TB1tefhtNTpK1RjSZR0XXbEwXXa-300-800.png',
+  {
+    id: 'gif48',
+    name: 'gif48',
+    src: 'https://files.pengxiaotian.com/deco/gif48-300-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif49: {
-    url: 'https://img.alicdn.com/tfs/TB1MAYktSzqK1RjSZFHXXb3CpXa-800-200.png',
+  {
+    id: 'gif49',
+    name: 'gif49',
+    src: 'https://files.pengxiaotian.com/deco/gif49-800-200.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif50: {
-    url: 'https://img.alicdn.com/tfs/TB1VefitSzqK1RjSZFLXXcn2XXa-800-65.png',
+  {
+    id: 'gif50',
+    name: 'gif50',
+    src: 'https://files.pengxiaotian.com/deco/gif50-800-65.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif51: {
-    url: 'https://img.alicdn.com/tfs/TB1iirptNTpK1RjSZFMXXbG_VXa-800-200.png',
+  {
+    id: 'gif51',
+    name: 'gif51',
+    src: 'https://files.pengxiaotian.com/deco/gif51-800-200.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif52: {
-    url: 'https://img.alicdn.com/tfs/TB1lFbktH2pK1RjSZFsXXaNlXXa-800-800.png',
+  {
+    id: 'gif52',
+    name: 'gif52',
+    src: 'https://files.pengxiaotian.com/deco/gif52-800-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif53: {
-    url: 'https://img.alicdn.com/tfs/TB1m7zmtFzqK1RjSZFCXXbbxVXa-800-200.png',
+  {
+    id: 'gif53',
+    name: 'gif53',
+    src: 'https://files.pengxiaotian.com/deco/gif53-800-200.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif54: {
-    url: 'https://img.alicdn.com/tfs/TB1Df6mtFzqK1RjSZFoXXbfcXXa-800-200.png',
+  {
+    id: 'gif54',
+    name: 'gif54',
+    src: 'https://files.pengxiaotian.com/deco/gif54-800-200.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-  gif55: {
-    url: 'https://img.alicdn.com/tfs/TB1sg6mtSzqK1RjSZFpXXakSXXa-800-800.png',
+  {
+    id: 'gif55',
+    name: 'gif55',
+    src: 'https://files.pengxiaotian.com/deco/gif55-800-800.png',
     css: {
       'background-position': 'center',
       'background-size': 'contain',
     },
   },
-}
-
-export default Decoration
+]
diff --git a/src/components/media/decoration/src/index.vue b/src/components/media/decoration/src/index.vue
index 923e30f6..b09547b6 100644
--- a/src/components/media/decoration/src/index.vue
+++ b/src/components/media/decoration/src/index.vue
@@ -29,12 +29,12 @@ export default defineComponent({
     })
 
     const imgBoxStyle = computed(() => {
-      const gif = presetImages[config.value.global.img]
+      const gif = presetImages.find(m => m.id === config.value.global.img)
       return {
         width: '100%',
         height: '100%',
         opacity: config.value.global.opacity,
-        'background-image': `url(${gif.url})`,
+        'background-image': `url(${gif.src})`,
         'background-size': '100%',
         'background-repeat': 'no-repeat',
         'background-position': 'center',
diff --git a/src/components/media/main-img/src/config.json b/src/components/media/main-img/src/config.json
index 0c0a06b1..45029c5c 100644
--- a/src/components/media/main-img/src/config.json
+++ b/src/components/media/main-img/src/config.json
@@ -2,6 +2,7 @@
   {
     "key": "imageType",
     "config": {
+      "id": 869,
       "type": "string",
       "component": "imageType",
       "alias": "图片类型",
@@ -19,11 +20,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": true
+      "flatValue": true,
+      "isRange": false
     },
     "path": "imageType",
     "virtualPath": ""
@@ -31,6 +34,7 @@
   {
     "key": "backgroundImage",
     "config": {
+      "id": 6028,
       "type": "string",
       "component": "uploadImage",
       "alias": "背景图",
@@ -48,11 +52,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "backgroundImage",
     "virtualPath": ""
@@ -60,6 +66,7 @@
   {
     "key": "vectorImage",
     "config": {
+      "id": 8705,
       "type": "string",
       "component": "uploadImage",
       "alias": "矢量图",
@@ -77,11 +84,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "imageType",
         "value": "vector"
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "vectorImage",
     "virtualPath": ""
@@ -89,6 +98,7 @@
   {
     "key": "vectorFill",
     "config": {
+      "id": 8762,
       "type": "string",
       "component": "color",
       "alias": "填充色",
@@ -106,11 +116,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "imageType",
         "value": "vector"
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "vectorFill",
     "virtualPath": ""
@@ -118,6 +130,7 @@
   {
     "key": "repeat",
     "config": {
+      "id": 3260,
       "type": "string",
       "component": "repeatType",
       "alias": "图片重复",
@@ -135,11 +148,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "repeat",
     "virtualPath": ""
@@ -147,6 +162,7 @@
   {
     "key": "radius",
     "config": {
+      "id": 1272,
       "type": "number",
       "component": "number",
       "alias": "圆角",
@@ -156,7 +172,7 @@
       "layout": "horizontal",
       "toggleCol": "",
       "isHide": false,
-      "defaultValue": 0,
+      "defaultValue": 1,
       "min": 0,
       "max": 100,
       "step": 1,
@@ -164,11 +180,13 @@
       "InfiniteMax": true,
       "suffix": "px",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "radius",
     "virtualPath": ""
@@ -176,6 +194,7 @@
   {
     "key": "urlConfig",
     "config": {
+      "id": 492,
       "type": "object",
       "component": "none",
       "alias": "超链接配置",
@@ -193,11 +212,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "urlConfig",
     "virtualPath": "",
@@ -205,6 +226,7 @@
       {
         "key": "url",
         "config": {
+          "id": 9326,
           "type": "string",
           "component": "input",
           "alias": "超链接",
@@ -222,11 +244,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "urlConfig.url",
         "virtualPath": ""
@@ -234,6 +258,7 @@
       {
         "key": "ifBlank",
         "config": {
+          "id": 8402,
           "type": "boolean",
           "component": "switch",
           "alias": "是否打开新窗口",
@@ -251,11 +276,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "urlConfig.ifBlank",
         "virtualPath": ""
@@ -269,6 +296,7 @@
   {
     "key": "cursor",
     "config": {
+      "id": 4851,
       "type": "boolean",
       "component": "switch",
       "alias": "手势光标",
@@ -286,13 +314,15 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "cursor",
     "virtualPath": ""
   }
-]
+]
\ No newline at end of file
diff --git a/src/components/media/main-img/src/config.vue b/src/components/media/main-img/src/config.vue
index 9ff8f453..902ec979 100644
--- a/src/components/media/main-img/src/config.vue
+++ b/src/components/media/main-img/src/config.vue
@@ -3,18 +3,11 @@
     <g-field
       label="图片类型"
     >
-      <n-radio-group
-        v-model:value="config.imageType"
-        size="small"
-      >
-        <n-radio-button
-          v-for="em in imageTypes"
-          :key="em.id"
-          :value="em.id"
-        >
-          {{ em.value }}
-        </n-radio-button>
-      </n-radio-group>
+      <g-radio-group
+        v-model="config.imageType"
+        :data="imageTypes"
+        is-button
+      />
     </g-field>
     <g-field
       label="背景图"
@@ -73,46 +66,33 @@
         :level="2"
         label="是否打开新窗口"
       >
-        <n-switch
-          v-model:value="config.urlConfig.ifBlank"
+        <g-switch
+          v-model="config.urlConfig.ifBlank"
         />
       </g-field>
     </g-field-collapse>
     <g-field
       label="手势光标"
     >
-      <n-switch
-        v-model:value="config.cursor"
+      <g-switch
+        v-model="config.cursor"
       />
     </g-field>
   </div>
 </template>
 
-<script lang='ts'>
-import { defineComponent, PropType, toRef } from 'vue'
+<script lang='ts' setup>
+import { toRef } from 'vue'
 import {
   imageTypes,
   repeatTypes,
 } from '@/data/select-options'
 import { MainImg } from './main-img'
 
-export default defineComponent({
-  name: 'VMainImgProp',
-  props: {
-    com: {
-      type: Object as PropType<MainImg>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const config = toRef(props.com, 'config')
+const props = defineProps<{
+  com: MainImg
+}>()
 
-    return {
-      config,
+const config = toRef(props.com, 'config')
 
-      imageTypes,
-      repeatTypes,
-    }
-  },
-})
 </script>
diff --git a/src/components/other/date-picker/src/config.json b/src/components/other/date-picker/src/config.json
index 92139758..125fbfe0 100644
--- a/src/components/other/date-picker/src/config.json
+++ b/src/components/other/date-picker/src/config.json
@@ -2,6 +2,7 @@
   {
     "key": "global",
     "config": {
+      "id": 9366,
       "type": "object",
       "component": "none",
       "alias": "全局样式",
@@ -19,11 +20,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "global",
     "virtualPath": "",
@@ -31,6 +34,7 @@
       {
         "key": "date",
         "config": {
+          "id": 2288,
           "type": "string",
           "component": "input",
           "alias": "日期",
@@ -48,11 +52,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.date",
         "virtualPath": ""
@@ -60,6 +66,7 @@
       {
         "key": "fontFamily",
         "config": {
+          "id": 7500,
           "type": "string",
           "component": "fontFamily",
           "alias": "字体",
@@ -77,11 +84,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.fontFamily",
         "virtualPath": ""
@@ -95,6 +104,7 @@
   {
     "key": "input",
     "config": {
+      "id": 4720,
       "type": "object",
       "component": "none",
       "alias": "文本框",
@@ -112,11 +122,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "input",
     "virtualPath": "",
@@ -124,6 +136,7 @@
       {
         "key": "size",
         "config": {
+          "id": 2448,
           "type": "object",
           "component": "none",
           "alias": "大小",
@@ -141,11 +154,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "input.size",
         "virtualPath": "",
@@ -153,6 +168,7 @@
           {
             "key": "width",
             "config": {
+              "id": 8534,
               "type": "number",
               "component": "number",
               "alias": "宽度",
@@ -170,11 +186,13 @@
               "InfiniteMax": false,
               "suffix": "px",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "input.size.width",
             "virtualPath": ""
@@ -182,6 +200,7 @@
           {
             "key": "height",
             "config": {
+              "id": 258,
               "type": "number",
               "component": "number",
               "alias": "高度",
@@ -199,11 +218,13 @@
               "InfiniteMax": false,
               "suffix": "px",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "input.size.height",
             "virtualPath": ""
@@ -217,6 +238,7 @@
       {
         "key": "border",
         "config": {
+          "id": 6858,
           "type": "object",
           "component": "none",
           "alias": "边框",
@@ -234,11 +256,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "input.border",
         "virtualPath": "",
@@ -246,6 +270,7 @@
           {
             "key": "width",
             "config": {
+              "id": 5262,
               "type": "number",
               "component": "number",
               "alias": "宽度",
@@ -263,11 +288,13 @@
               "InfiniteMax": false,
               "suffix": "px",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "input.border.width",
             "virtualPath": ""
@@ -275,6 +302,7 @@
           {
             "key": "color",
             "config": {
+              "id": 6047,
               "type": "string",
               "component": "color",
               "alias": "颜色",
@@ -292,11 +320,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "input.border.color",
             "virtualPath": ""
@@ -304,6 +334,7 @@
           {
             "key": "radius",
             "config": {
+              "id": 1610,
               "type": "number",
               "component": "number",
               "alias": "圆角",
@@ -321,11 +352,13 @@
               "InfiniteMax": false,
               "suffix": "px",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "input.border.radius",
             "virtualPath": ""
@@ -340,6 +373,7 @@
       {
         "key": "bgColor",
         "config": {
+          "id": 4971,
           "type": "string",
           "component": "color",
           "alias": "背景颜色",
@@ -357,11 +391,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "input.bgColor",
         "virtualPath": ""
@@ -369,6 +405,7 @@
       {
         "key": "fontSize",
         "config": {
+          "id": 8881,
           "type": "number",
           "component": "number",
           "alias": "文字字号",
@@ -386,11 +423,13 @@
           "InfiniteMax": false,
           "suffix": "px",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "input.fontSize",
         "virtualPath": ""
@@ -398,6 +437,7 @@
       {
         "key": "fontColor",
         "config": {
+          "id": 8649,
           "type": "string",
           "component": "color",
           "alias": "文字颜色",
@@ -415,11 +455,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "input.fontColor",
         "virtualPath": ""
@@ -427,6 +469,7 @@
       {
         "key": "separator",
         "config": {
+          "id": 7248,
           "type": "string",
           "component": "input",
           "alias": "时间分隔符",
@@ -444,11 +487,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "input.separator",
         "virtualPath": ""
@@ -456,6 +501,7 @@
       {
         "key": "pos",
         "config": {
+          "id": 8705,
           "type": "string",
           "component": "hAlign",
           "alias": "文字位置",
@@ -473,11 +519,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "input.pos",
         "virtualPath": ""
@@ -496,6 +544,7 @@
   {
     "key": "calendar",
     "config": {
+      "id": 1464,
       "type": "object",
       "component": "none",
       "alias": "日历",
@@ -513,11 +562,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "calendar",
     "virtualPath": "",
@@ -525,6 +576,7 @@
       {
         "key": "fontSize",
         "config": {
+          "id": 7095,
           "type": "number",
           "component": "number",
           "alias": "文字字号",
@@ -542,11 +594,13 @@
           "InfiniteMax": false,
           "suffix": "px",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "calendar.fontSize",
         "virtualPath": ""
@@ -554,6 +608,7 @@
       {
         "key": "fontColor",
         "config": {
+          "id": 2281,
           "type": "string",
           "component": "color",
           "alias": "文字颜色",
@@ -571,11 +626,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "calendar.fontColor",
         "virtualPath": ""
@@ -583,6 +640,7 @@
       {
         "key": "bgColor",
         "config": {
+          "id": 502,
           "type": "string",
           "component": "color",
           "alias": "日历背景",
@@ -600,11 +658,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "calendar.bgColor",
         "virtualPath": ""
@@ -612,6 +672,7 @@
       {
         "key": "selectBGColor",
         "config": {
+          "id": 5338,
           "type": "string",
           "component": "color",
           "alias": "选择器背景",
@@ -629,11 +690,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "calendar.selectBGColor",
         "virtualPath": ""
@@ -641,6 +704,7 @@
       {
         "key": "border",
         "config": {
+          "id": 884,
           "type": "object",
           "component": "none",
           "alias": "外边框",
@@ -658,11 +722,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "calendar.border",
         "virtualPath": "",
@@ -670,6 +736,7 @@
           {
             "key": "width",
             "config": {
+              "id": 2592,
               "type": "number",
               "component": "number",
               "alias": "宽度",
@@ -687,11 +754,13 @@
               "InfiniteMax": false,
               "suffix": "px",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "calendar.border.width",
             "virtualPath": ""
@@ -699,6 +768,7 @@
           {
             "key": "color",
             "config": {
+              "id": 7519,
               "type": "string",
               "component": "color",
               "alias": "颜色",
@@ -716,11 +786,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "calendar.border.color",
             "virtualPath": ""
@@ -728,6 +800,7 @@
           {
             "key": "radius",
             "config": {
+              "id": 3733,
               "type": "number",
               "component": "number",
               "alias": "圆角",
@@ -745,11 +818,13 @@
               "InfiniteMax": false,
               "suffix": "px",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "calendar.border.radius",
             "virtualPath": ""
@@ -764,6 +839,7 @@
       {
         "key": "paddingBorder",
         "config": {
+          "id": 9900,
           "type": "object",
           "component": "none",
           "alias": "内边框",
@@ -781,11 +857,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "calendar.paddingBorder",
         "virtualPath": "",
@@ -793,6 +871,7 @@
           {
             "key": "width",
             "config": {
+              "id": 4659,
               "type": "number",
               "component": "number",
               "alias": "宽度",
@@ -810,11 +889,13 @@
               "InfiniteMax": false,
               "suffix": "px",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "calendar.paddingBorder.width",
             "virtualPath": ""
@@ -822,6 +903,7 @@
           {
             "key": "color",
             "config": {
+              "id": 915,
               "type": "string",
               "component": "color",
               "alias": "颜色",
@@ -839,11 +921,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "calendar.paddingBorder.color",
             "virtualPath": ""
@@ -851,6 +935,7 @@
           {
             "key": "padding",
             "config": {
+              "id": 4628,
               "type": "number",
               "component": "number",
               "alias": "内边距",
@@ -868,11 +953,13 @@
               "InfiniteMax": false,
               "suffix": "px",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "calendar.paddingBorder.padding",
             "virtualPath": ""
@@ -887,6 +974,7 @@
       {
         "key": "select",
         "config": {
+          "id": 1113,
           "type": "object",
           "component": "none",
           "alias": "选择器内边距",
@@ -904,11 +992,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "calendar.select",
         "virtualPath": "",
@@ -916,6 +1006,7 @@
           {
             "key": "time",
             "config": {
+              "id": 7485,
               "type": "number",
               "component": "number",
               "alias": "时间",
@@ -933,11 +1024,13 @@
               "InfiniteMax": false,
               "suffix": "px",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "calendar.select.time",
             "virtualPath": ""
@@ -945,6 +1038,7 @@
           {
             "key": "today",
             "config": {
+              "id": 3389,
               "type": "number",
               "component": "number",
               "alias": "今",
@@ -962,11 +1056,13 @@
               "InfiniteMax": false,
               "suffix": "px",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "calendar.select.today",
             "virtualPath": ""
@@ -988,4 +1084,4 @@
       "select"
     ]
   }
-]
+]
\ No newline at end of file
diff --git a/src/components/other/date-picker/src/config.vue b/src/components/other/date-picker/src/config.vue
index 48eccc99..38242589 100644
--- a/src/components/other/date-picker/src/config.vue
+++ b/src/components/other/date-picker/src/config.vue
@@ -249,31 +249,18 @@
   </div>
 </template>
 
-<script lang='ts'>
-import { defineComponent, PropType, toRef } from 'vue'
+<script lang='ts' setup>
+import { toRef } from 'vue'
 import {
   fontFamilys,
   hAligns,
 } from '@/data/select-options'
 import { DatePicker } from './date-picker'
 
-export default defineComponent({
-  name: 'VDatePickerProp',
-  props: {
-    com: {
-      type: Object as PropType<DatePicker>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const config = toRef(props.com, 'config')
+const props = defineProps<{
+  com: DatePicker
+}>()
 
-    return {
-      config,
+const config = toRef(props.com, 'config')
 
-      fontFamilys,
-      hAligns,
-    }
-  },
-})
 </script>
diff --git a/src/components/pie/basic-pie/src/basic-pie.ts b/src/components/pie/basic-pie/src/basic-pie.ts
index 2680c86d..6d8f753f 100644
--- a/src/components/pie/basic-pie/src/basic-pie.ts
+++ b/src/components/pie/basic-pie/src/basic-pie.ts
@@ -11,7 +11,24 @@ import { getStaticData } from '@/api/data'
  * BasicPie
  */
 export class BasicPie extends DatavComponent {
-  config = {}
+  config = {
+    name: '',
+    isUse: false,
+    value: 0,
+    fontSize: 12,
+    textStyle: {
+      color: '',
+      value: 0,
+      isUse: false,
+      fontSize: 12,
+    },
+    border: {
+      size: 1,
+      color: '#fff',
+      type: 'solid',
+    },
+    ran: [10, 20],
+  }
 
   apis: Partial<ApiConfigMap>
   apiData: Partial<ApiDataConfigMap>
diff --git a/src/components/pie/basic-pie/src/config.json b/src/components/pie/basic-pie/src/config.json
index fe51488c..f8714bbb 100644
--- a/src/components/pie/basic-pie/src/config.json
+++ b/src/components/pie/basic-pie/src/config.json
@@ -1 +1,433 @@
-[]
+[
+  {
+    "key": "name",
+    "config": {
+      "id": 2682,
+      "type": "string",
+      "component": "input",
+      "alias": "名称",
+      "tip": "",
+      "displayMode": "single",
+      "features": [],
+      "layout": "horizontal",
+      "toggleCol": "",
+      "isHide": false,
+      "defaultValue": "",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "InfiniteMin": false,
+      "InfiniteMax": false,
+      "suffix": "",
+      "enums": [],
+      "pairs": [],
+      "whichEnum": {
+        "field": "",
+        "value": ""
+      },
+      "flatValue": false,
+      "isRange": false
+    },
+    "path": "name",
+    "virtualPath": ""
+  },
+  {
+    "key": "isUse",
+    "config": {
+      "id": 1287,
+      "type": "boolean",
+      "component": "switch",
+      "alias": "使用",
+      "tip": "",
+      "displayMode": "single",
+      "features": [],
+      "layout": "horizontal",
+      "toggleCol": "",
+      "isHide": false,
+      "defaultValue": false,
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "InfiniteMin": false,
+      "InfiniteMax": false,
+      "suffix": "",
+      "enums": [],
+      "pairs": [],
+      "whichEnum": {
+        "field": "",
+        "value": ""
+      },
+      "flatValue": false,
+      "isRange": false
+    },
+    "path": "isUse",
+    "virtualPath": ""
+  },
+  {
+    "key": "value",
+    "config": {
+      "id": 3812,
+      "type": "number",
+      "component": "number",
+      "alias": "值",
+      "tip": "",
+      "displayMode": "single",
+      "features": [],
+      "layout": "horizontal",
+      "toggleCol": "",
+      "isHide": false,
+      "defaultValue": 0,
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "InfiniteMin": false,
+      "InfiniteMax": false,
+      "suffix": "",
+      "enums": [],
+      "pairs": [],
+      "whichEnum": {
+        "field": "",
+        "value": ""
+      },
+      "flatValue": false,
+      "isRange": false
+    },
+    "path": "value",
+    "virtualPath": ""
+  },
+  {
+    "key": "fontSize",
+    "config": {
+      "id": 841,
+      "type": "number",
+      "component": "number",
+      "alias": "字体",
+      "tip": "",
+      "displayMode": "single",
+      "features": [],
+      "layout": "horizontal",
+      "toggleCol": "",
+      "isHide": false,
+      "defaultValue": 12,
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "InfiniteMin": false,
+      "InfiniteMax": false,
+      "suffix": "",
+      "enums": [],
+      "pairs": [],
+      "whichEnum": {
+        "field": "",
+        "value": ""
+      },
+      "flatValue": false,
+      "isRange": false
+    },
+    "path": "fontSize",
+    "virtualPath": ""
+  },
+  {
+    "key": "textStyle",
+    "config": {
+      "id": 8087,
+      "type": "object",
+      "component": "none",
+      "alias": "文本样式",
+      "tip": "",
+      "displayMode": "flat",
+      "features": [],
+      "layout": "horizontal",
+      "toggleCol": "",
+      "isHide": false,
+      "defaultValue": null,
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "InfiniteMin": false,
+      "InfiniteMax": false,
+      "suffix": "",
+      "enums": [],
+      "pairs": [],
+      "whichEnum": {
+        "field": "",
+        "value": ""
+      },
+      "flatValue": false,
+      "isRange": false
+    },
+    "path": "textStyle",
+    "virtualPath": "",
+    "children": [
+      {
+        "key": "color",
+        "config": {
+          "id": 2231,
+          "type": "string",
+          "component": "input",
+          "alias": "颜色",
+          "tip": "测试的颜色",
+          "displayMode": "inline",
+          "features": [],
+          "layout": "horizontal",
+          "toggleCol": "",
+          "isHide": false,
+          "defaultValue": "",
+          "min": 0,
+          "max": 100,
+          "step": 1,
+          "InfiniteMin": false,
+          "InfiniteMax": false,
+          "suffix": "",
+          "enums": [],
+          "pairs": [],
+          "whichEnum": {
+            "field": "",
+            "value": ""
+          },
+          "flatValue": false,
+          "isRange": false
+        },
+        "path": "textStyle.color",
+        "virtualPath": ""
+      },
+      {
+        "key": "value",
+        "config": {
+          "id": 8802,
+          "type": "number",
+          "component": "input",
+          "alias": "值",
+          "tip": "用来测试的值",
+          "displayMode": "inline",
+          "features": [],
+          "layout": "horizontal",
+          "toggleCol": "",
+          "isHide": false,
+          "defaultValue": 0,
+          "min": 0,
+          "max": 100,
+          "step": 1,
+          "InfiniteMin": false,
+          "InfiniteMax": false,
+          "suffix": "",
+          "enums": [],
+          "pairs": [],
+          "whichEnum": {
+            "field": "",
+            "value": ""
+          },
+          "flatValue": false,
+          "isRange": false
+        },
+        "path": "textStyle.value",
+        "virtualPath": ""
+      },
+      {
+        "key": "isUse",
+        "config": {
+          "id": 9342,
+          "type": "boolean",
+          "component": "switch",
+          "alias": "",
+          "tip": "",
+          "displayMode": "inline",
+          "features": [],
+          "layout": "horizontal",
+          "toggleCol": "",
+          "isHide": false,
+          "defaultValue": false,
+          "min": 0,
+          "max": 100,
+          "step": 1,
+          "InfiniteMin": false,
+          "InfiniteMax": false,
+          "suffix": "",
+          "enums": [],
+          "pairs": [],
+          "whichEnum": {
+            "field": "",
+            "value": ""
+          },
+          "flatValue": false,
+          "isRange": false
+        },
+        "path": "textStyle.isUse",
+        "virtualPath": ""
+      },
+      {
+        "key": "fontSize",
+        "config": {
+          "id": 8399,
+          "type": "number",
+          "component": "number",
+          "alias": "",
+          "tip": "",
+          "displayMode": "inline",
+          "features": [],
+          "layout": "horizontal",
+          "toggleCol": "",
+          "isHide": false,
+          "defaultValue": 12,
+          "min": 0,
+          "max": 100,
+          "step": 1,
+          "InfiniteMin": false,
+          "InfiniteMax": false,
+          "suffix": "",
+          "enums": [],
+          "pairs": [],
+          "whichEnum": {
+            "field": "",
+            "value": ""
+          },
+          "flatValue": false,
+          "isRange": false
+        },
+        "path": "textStyle.fontSize",
+        "virtualPath": ""
+      }
+    ],
+    "cols": [
+      "color",
+      "value",
+      "isUse",
+      "fontSize"
+    ]
+  },
+  {
+    "key": "border",
+    "config": {
+      "id": 2366,
+      "type": "object",
+      "component": "none",
+      "alias": "边框",
+      "tip": "",
+      "displayMode": "nest",
+      "features": [],
+      "layout": "horizontal",
+      "toggleCol": "",
+      "isHide": false,
+      "defaultValue": null,
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "InfiniteMin": false,
+      "InfiniteMax": false,
+      "suffix": "",
+      "enums": [],
+      "pairs": [],
+      "whichEnum": {
+        "field": "",
+        "value": ""
+      },
+      "flatValue": false,
+      "isRange": false
+    },
+    "path": "border",
+    "virtualPath": "",
+    "children": [
+      {
+        "key": "size",
+        "config": {
+          "id": 4713,
+          "type": "number",
+          "component": "number",
+          "alias": "尺寸",
+          "tip": "",
+          "displayMode": "single",
+          "features": [],
+          "layout": "horizontal",
+          "toggleCol": "",
+          "isHide": false,
+          "defaultValue": 1,
+          "min": 0,
+          "max": 100,
+          "step": 1,
+          "InfiniteMin": false,
+          "InfiniteMax": false,
+          "suffix": "",
+          "enums": [],
+          "pairs": [],
+          "whichEnum": {
+            "field": "",
+            "value": ""
+          },
+          "flatValue": false,
+          "isRange": false
+        },
+        "path": "border.size",
+        "virtualPath": ""
+      },
+      {
+        "key": "color",
+        "config": {
+          "id": 6862,
+          "type": "string",
+          "component": "color",
+          "alias": "颜色",
+          "tip": "",
+          "displayMode": "single",
+          "features": [],
+          "layout": "horizontal",
+          "toggleCol": "",
+          "isHide": false,
+          "defaultValue": "#fff",
+          "min": 0,
+          "max": 100,
+          "step": 1,
+          "InfiniteMin": false,
+          "InfiniteMax": false,
+          "suffix": "",
+          "enums": [],
+          "pairs": [],
+          "whichEnum": {
+            "field": "",
+            "value": ""
+          },
+          "flatValue": false,
+          "isRange": false
+        },
+        "path": "border.color",
+        "virtualPath": ""
+      },
+      {
+        "key": "type",
+        "config": {
+          "id": 6192,
+          "type": "string",
+          "component": "lineStyle",
+          "alias": "类型",
+          "tip": "",
+          "displayMode": "single",
+          "features": [],
+          "layout": "horizontal",
+          "toggleCol": "",
+          "isHide": false,
+          "defaultValue": "solid",
+          "min": 0,
+          "max": 100,
+          "step": 1,
+          "InfiniteMin": false,
+          "InfiniteMax": false,
+          "suffix": "",
+          "enums": [],
+          "pairs": [],
+          "whichEnum": {
+            "field": "",
+            "value": ""
+          },
+          "flatValue": true,
+          "isRange": false
+        },
+        "path": "border.type",
+        "virtualPath": ""
+      }
+    ],
+    "cols": [
+      "size",
+      "color",
+      "type"
+    ]
+  }
+]
\ No newline at end of file
diff --git a/src/components/pie/basic-pie/src/config.vue b/src/components/pie/basic-pie/src/config.vue
index 7b8b46cb..d5c88ce8 100644
--- a/src/components/pie/basic-pie/src/config.vue
+++ b/src/components/pie/basic-pie/src/config.vue
@@ -1,3 +1,33 @@
 <template>
-  <div></div>
+  <div class="setting-panel-gui">
+    <g-field
+      label="文本样式"
+      :is-flat="true"
+    >
+      <g-input
+        v-model="config.textStyle.color"
+        inline="inline"
+        label="颜色"
+      />
+      <g-input
+        v-model="config.textStyle.value"
+        inline="inline"
+        label="值"
+      />
+    </g-field>
+  </div>
 </template>
+
+<script lang='ts' setup>
+import { toRef } from 'vue'
+import {
+} from '@/data/select-options'
+import { BasicPie } from './basic-pie'
+
+const props = defineProps<{
+  com: BasicPie
+}>()
+
+const config = toRef(props.com, 'config')
+
+</script>
diff --git a/src/components/table/carousel-table/src/config.json b/src/components/table/carousel-table/src/config.json
index eabb8b80..20b9f914 100644
--- a/src/components/table/carousel-table/src/config.json
+++ b/src/components/table/carousel-table/src/config.json
@@ -316,7 +316,7 @@
               "layout": "horizontal",
               "toggleCol": "",
               "isHide": false,
-              "defaultValue": true,
+              "defaultValue": false,
               "min": 0,
               "max": 100,
               "step": 1,
diff --git a/src/components/table/carousel-table/src/config.vue b/src/components/table/carousel-table/src/config.vue
index 7defa7db..5d902123 100644
--- a/src/components/table/carousel-table/src/config.vue
+++ b/src/components/table/carousel-table/src/config.vue
@@ -18,8 +18,8 @@
         :level="2"
         label="自动轮播"
       >
-        <n-switch
-          v-model:value="config.global.isLoop"
+        <g-switch
+          v-model="config.global.isLoop"
         />
       </g-field>
       <g-field
@@ -40,18 +40,10 @@
           :level="2"
           label="动画模式"
         >
-          <n-radio-group
-            v-model:value="config.global.animation.mode"
-            size="small"
-          >
-            <n-radio
-              v-for="pair in pairData2024"
-              :key="pair.key"
-              :value="pair.key"
-            >
-              {{ pair.value }}
-            </n-radio>
-          </n-radio-group>
+          <g-radio-group
+            v-model="config.global.animation.mode"
+            :data="pairData2024"
+          />
         </g-field>
         <g-field
           :level="2"
@@ -69,8 +61,8 @@
           :level="2"
           label="单页不轮播"
         >
-          <n-switch
-            v-model:value="config.global.animation.singleStop"
+          <g-switch
+            v-model="config.global.animation.singleStop"
           />
         </g-field>
       </g-field-collapse>
@@ -84,8 +76,8 @@
           tooltip="关闭时, 可指定高亮行"
           label="自动依次高亮"
         >
-          <n-switch
-            v-model:value="config.global.highLight.isOrder"
+          <g-switch
+            v-model="config.global.highLight.isOrder"
           />
         </g-field>
         <g-field
@@ -172,8 +164,8 @@
         :level="2"
         label="空值隐藏行"
       >
-        <n-switch
-          v-model:value="config.global.ifRowHidden"
+        <g-switch
+          v-model="config.global.ifRowHidden"
         />
       </g-field>
       <g-field-collapse
@@ -183,16 +175,16 @@
           :level="2"
           label="是否滚动"
         >
-          <n-switch
-            v-model:value="config.global.textAnimate.ifRun"
+          <g-switch
+            v-model="config.global.textAnimate.ifRun"
           />
         </g-field>
         <g-field
           :level="2"
           label="匀速滚动"
         >
-          <n-switch
-            v-model:value="config.global.textAnimate.isSpeed"
+          <g-switch
+            v-model="config.global.textAnimate.isSpeed"
           />
         </g-field>
         <g-field
@@ -448,18 +440,10 @@
           :level="2"
           label="内容类型"
         >
-          <n-radio-group
-            v-model:value="slotProps.item.dataType"
-            size="small"
-          >
-            <n-radio
-              v-for="pair in pairData7136"
-              :key="pair.key"
-              :value="pair.key"
-            >
-              {{ pair.value }}
-            </n-radio>
-          </n-radio-group>
+          <g-radio-group
+            v-model="slotProps.item.dataType"
+            :data="pairData7136"
+          />
         </g-field>
         <g-field
           v-if="slotProps.item.dataType === 'img'"
@@ -522,8 +506,8 @@
           :level="2"
           label="自动换行"
         >
-          <n-switch
-            v-model:value="slotProps.item.isBr"
+          <g-switch
+            v-model="slotProps.item.isBr"
           />
         </g-field>
         <g-field
@@ -595,12 +579,13 @@ const pairData2024 = [
   { key: 'bottom', value: '逐条滚动' },
 ]
 
+const handleAddSeriesItem = () => {
+  return new CarouselTableSeries('series1', '类别一')
+}
+
 const pairData7136 = [
   { key: 'text', value: '文本' },
   { key: 'img', value: '图片' },
 ]
 
-const handleAddSeriesItem = () => {
-  return new CarouselTableSeries('series1', '类别一')
-}
 </script>
diff --git a/src/components/table/table-bar/src/config.json b/src/components/table/table-bar/src/config.json
index 857406a4..0fba0740 100644
--- a/src/components/table/table-bar/src/config.json
+++ b/src/components/table/table-bar/src/config.json
@@ -1804,7 +1804,7 @@
               "layout": "horizontal",
               "toggleCol": "",
               "isHide": false,
-              "defaultValue": "solid",
+              "defaultValue": "gradient",
               "min": 0,
               "max": 100,
               "step": 1,
@@ -2277,4 +2277,4 @@
       "height"
     ]
   }
-]
+]
\ No newline at end of file
diff --git a/src/components/table/table-bar/src/config.vue b/src/components/table/table-bar/src/config.vue
index 01844632..f4968b00 100644
--- a/src/components/table/table-bar/src/config.vue
+++ b/src/components/table/table-bar/src/config.vue
@@ -17,8 +17,8 @@
         :level="2"
         label="开启动画"
       >
-        <n-switch
-          v-model:value="config.global.animation"
+        <g-switch
+          v-model="config.global.animation"
         />
       </g-field>
       <g-field
@@ -61,8 +61,8 @@
         tooltip="开启自动轮播后, 配置不会立即生效, 将会在下一次轮播后生效"
         label="自动轮播"
       >
-        <n-switch
-          v-model:value="config.global.loop"
+        <g-switch
+          v-model="config.global.loop"
         />
       </g-field>
       <g-field
@@ -266,16 +266,16 @@
         :level="2"
         label="显示百分数"
       >
-        <n-switch
-          v-model:value="config.number.percentage"
+        <g-switch
+          v-model="config.number.percentage"
         />
       </g-field>
       <g-field
         :level="2"
         label="千分位分隔符"
       >
-        <n-switch
-          v-model:value="config.number.separatingChart"
+        <g-switch
+          v-model="config.number.separatingChart"
         />
       </g-field>
       <g-field
@@ -333,18 +333,11 @@
         :level="2"
         label="填充类型"
       >
-        <n-radio-group
-          v-model:value="config.bar.fillColorType"
-          size="small"
-        >
-          <n-radio-button
-            v-for="em in fillTypes"
-            :key="em.id"
-            :value="em.id"
-          >
-            {{ em.value }}
-          </n-radio-button>
-        </n-radio-group>
+        <g-radio-group
+          v-model="config.bar.fillColorType"
+          :data="fillTypes"
+          is-button
+        />
       </g-field>
       <g-field
         v-if="config.bar.fillColorType === 'solid'"
@@ -416,18 +409,11 @@
           :level="2"
           label="填充类型"
         >
-          <n-radio-group
-            v-model:value="config.bar.threshold.fillColorType"
-            size="small"
-          >
-            <n-radio-button
-              v-for="em in fillTypes"
-              :key="em.id"
-              :value="em.id"
-            >
-              {{ em.value }}
-            </n-radio-button>
-          </n-radio-group>
+          <g-radio-group
+            v-model="config.bar.threshold.fillColorType"
+            :data="fillTypes"
+            is-button
+          />
         </g-field>
         <g-field
           v-if="config.bar.threshold.fillColorType === 'solid'"
diff --git a/src/components/text/main-title/src/config.json b/src/components/text/main-title/src/config.json
index be0a9a5d..6459a1a1 100644
--- a/src/components/text/main-title/src/config.json
+++ b/src/components/text/main-title/src/config.json
@@ -2,6 +2,7 @@
   {
     "key": "title",
     "config": {
+      "id": 1391,
       "type": "string",
       "component": "input",
       "alias": "标题名",
@@ -19,11 +20,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "title",
     "virtualPath": ""
@@ -31,6 +34,7 @@
   {
     "key": "textStyle",
     "config": {
+      "id": 9800,
       "type": "object",
       "component": "none",
       "alias": "文本样式",
@@ -48,11 +52,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "textStyle",
     "virtualPath": "",
@@ -60,6 +66,7 @@
       {
         "key": "fontFamily",
         "config": {
+          "id": 8913,
           "type": "string",
           "component": "fontFamily",
           "alias": "字体",
@@ -77,11 +84,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "textStyle.fontFamily",
         "virtualPath": ""
@@ -89,6 +98,7 @@
       {
         "key": "fontSize",
         "config": {
+          "id": 6899,
           "type": "number",
           "component": "number",
           "alias": "字号",
@@ -106,11 +116,13 @@
           "InfiniteMax": false,
           "suffix": "px",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "textStyle.fontSize",
         "virtualPath": ""
@@ -118,6 +130,7 @@
       {
         "key": "color",
         "config": {
+          "id": 3505,
           "type": "string",
           "component": "color",
           "alias": "颜色",
@@ -135,11 +148,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "textStyle.color",
         "virtualPath": ""
@@ -147,6 +162,7 @@
       {
         "key": "fontWeight",
         "config": {
+          "id": 7134,
           "type": "string",
           "component": "fontWeight",
           "alias": "字体粗细",
@@ -164,11 +180,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "textStyle.fontWeight",
         "virtualPath": ""
@@ -184,6 +202,7 @@
   {
     "key": "textAlign",
     "config": {
+      "id": 399,
       "type": "string",
       "component": "justifyContent",
       "alias": "对齐方式",
@@ -201,11 +220,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "textAlign",
     "virtualPath": ""
@@ -213,6 +234,7 @@
   {
     "key": "writingMode",
     "config": {
+      "id": 36,
       "type": "string",
       "component": "writingMode",
       "alias": "文字排列方式",
@@ -230,11 +252,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "writingMode",
     "virtualPath": ""
@@ -242,6 +266,7 @@
   {
     "key": "letterSpacing",
     "config": {
+      "id": 2136,
       "type": "number",
       "component": "number",
       "alias": "文字间隔",
@@ -259,11 +284,13 @@
       "InfiniteMax": false,
       "suffix": "px",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "letterSpacing",
     "virtualPath": ""
@@ -271,6 +298,7 @@
   {
     "key": "backgroundStyle",
     "config": {
+      "id": 9580,
       "type": "object",
       "component": "none",
       "alias": "背景样式",
@@ -288,11 +316,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "backgroundStyle",
     "virtualPath": "",
@@ -300,6 +330,7 @@
       {
         "key": "show",
         "config": {
+          "id": 6472,
           "type": "boolean",
           "component": "switch",
           "alias": "",
@@ -317,11 +348,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "backgroundStyle.show",
         "virtualPath": ""
@@ -329,6 +362,7 @@
       {
         "key": "bgColor",
         "config": {
+          "id": 3604,
           "type": "string",
           "component": "color",
           "alias": "背景色",
@@ -346,11 +380,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "backgroundStyle.bgColor",
         "virtualPath": ""
@@ -358,6 +394,7 @@
       {
         "key": "borderRadius",
         "config": {
+          "id": 4496,
           "type": "number",
           "component": "number",
           "alias": "圆角",
@@ -375,11 +412,13 @@
           "InfiniteMax": false,
           "suffix": "px",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "backgroundStyle.borderRadius",
         "virtualPath": ""
@@ -387,6 +426,7 @@
       {
         "key": "borderColor",
         "config": {
+          "id": 4103,
           "type": "string",
           "component": "color",
           "alias": "边框颜色",
@@ -404,11 +444,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "backgroundStyle.borderColor",
         "virtualPath": ""
@@ -416,6 +458,7 @@
       {
         "key": "borderStyle",
         "config": {
+          "id": 8553,
           "type": "string",
           "component": "lineStyle",
           "alias": "边框粗细",
@@ -433,11 +476,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "backgroundStyle.borderStyle",
         "virtualPath": ""
@@ -445,6 +490,7 @@
       {
         "key": "borderWidth",
         "config": {
+          "id": 2645,
           "type": "number",
           "component": "number",
           "alias": "边框粗细",
@@ -462,11 +508,13 @@
           "InfiniteMax": false,
           "suffix": "px",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "backgroundStyle.borderWidth",
         "virtualPath": ""
@@ -484,6 +532,7 @@
   {
     "key": "ellipsis",
     "config": {
+      "id": 8993,
       "type": "boolean",
       "component": "switch",
       "alias": "省略号",
@@ -501,11 +550,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "ellipsis",
     "virtualPath": ""
@@ -513,6 +564,7 @@
   {
     "key": "urlConfig",
     "config": {
+      "id": 9058,
       "type": "object",
       "component": "none",
       "alias": "超链接配置",
@@ -530,11 +582,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "urlConfig",
     "virtualPath": "",
@@ -542,6 +596,7 @@
       {
         "key": "url",
         "config": {
+          "id": 1030,
           "type": "string",
           "component": "input",
           "alias": "超链接",
@@ -559,11 +614,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "urlConfig.url",
         "virtualPath": ""
@@ -571,6 +628,7 @@
       {
         "key": "isBlank",
         "config": {
+          "id": 7538,
           "type": "boolean",
           "component": "switch",
           "alias": "是否新开窗口",
@@ -588,11 +646,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "urlConfig.isBlank",
         "virtualPath": ""
@@ -603,4 +663,4 @@
       "isBlank"
     ]
   }
-]
+]
\ No newline at end of file
diff --git a/src/components/text/main-title/src/config.vue b/src/components/text/main-title/src/config.vue
index 7686c550..75660100 100644
--- a/src/components/text/main-title/src/config.vue
+++ b/src/components/text/main-title/src/config.vue
@@ -137,8 +137,8 @@
       tooltip="溢出文本加省略号"
       label="省略号"
     >
-      <n-switch
-        v-model:value="config.ellipsis"
+      <g-switch
+        v-model="config.ellipsis"
       />
     </g-field>
     <g-field-collapse
@@ -157,16 +157,16 @@
         :level="2"
         label="是否新开窗口"
       >
-        <n-switch
-          v-model:value="config.urlConfig.isBlank"
+        <g-switch
+          v-model="config.urlConfig.isBlank"
         />
       </g-field>
     </g-field-collapse>
   </div>
 </template>
 
-<script lang='ts'>
-import { defineComponent, PropType, toRef } from 'vue'
+<script lang='ts' setup>
+import { toRef } from 'vue'
 import {
   fontFamilys,
   fontWeights,
@@ -176,26 +176,10 @@ import {
 } from '@/data/select-options'
 import { MainTitle } from './main-title'
 
-export default defineComponent({
-  name: 'VMainTitleProp',
-  props: {
-    com: {
-      type: Object as PropType<MainTitle>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const config = toRef(props.com, 'config')
+const props = defineProps<{
+  com: MainTitle
+}>()
 
-    return {
-      config,
+const config = toRef(props.com, 'config')
 
-      fontFamilys,
-      fontWeights,
-      justifyContents,
-      writingModes,
-      lineStyles,
-    }
-  },
-})
 </script>
diff --git a/src/components/text/marquee/src/config.vue b/src/components/text/marquee/src/config.vue
index 848cf528..545b29c8 100644
--- a/src/components/text/marquee/src/config.vue
+++ b/src/components/text/marquee/src/config.vue
@@ -46,15 +46,15 @@
     <g-field
       label="是否轮播"
     >
-      <n-switch
-        v-model:value="config.loop"
+      <g-switch
+        v-model="config.loop"
       />
     </g-field>
     <g-field
       label="定速播放"
     >
-      <n-switch
-        v-model:value="config.ifSpeed"
+      <g-switch
+        v-model="config.ifSpeed"
       />
     </g-field>
     <g-field
diff --git a/src/components/text/number-title-flop/src/config.json b/src/components/text/number-title-flop/src/config.json
index c9dcb01f..fd5dd4f4 100644
--- a/src/components/text/number-title-flop/src/config.json
+++ b/src/components/text/number-title-flop/src/config.json
@@ -2,6 +2,7 @@
   {
     "key": "global",
     "config": {
+      "id": 704,
       "type": "object",
       "component": "none",
       "alias": "全局",
@@ -19,11 +20,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "global",
     "virtualPath": "",
@@ -31,6 +34,7 @@
       {
         "key": "fontFamily",
         "config": {
+          "id": 5994,
           "type": "string",
           "component": "fontFamily",
           "alias": "字体",
@@ -48,11 +52,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.fontFamily",
         "virtualPath": ""
@@ -60,6 +66,7 @@
       {
         "key": "arrangement",
         "config": {
+          "id": 2545,
           "type": "string",
           "component": "select",
           "alias": "排列方式",
@@ -77,11 +84,26 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [
+            {
+              "key": "top",
+              "value": "标题在上"
+            },
+            {
+              "key": "left",
+              "value": "标题在左"
+            },
+            {
+              "key": "bottom",
+              "value": "标题在下"
+            }
+          ],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.arrangement",
         "virtualPath": ""
@@ -89,6 +111,7 @@
       {
         "key": "distance",
         "config": {
+          "id": 9104,
           "type": "number",
           "component": "slider",
           "alias": "间隔",
@@ -106,11 +129,13 @@
           "InfiniteMax": false,
           "suffix": "px",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "global.distance",
         "virtualPath": ""
@@ -125,6 +150,7 @@
   {
     "key": "title",
     "config": {
+      "id": 7575,
       "type": "object",
       "component": "none",
       "alias": "标题",
@@ -142,11 +168,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "title",
     "virtualPath": "",
@@ -154,6 +182,7 @@
       {
         "key": "content",
         "config": {
+          "id": 188,
           "type": "string",
           "component": "input",
           "alias": "标题名",
@@ -163,7 +192,7 @@
           "layout": "horizontal",
           "toggleCol": "",
           "isHide": false,
-          "defaultValue": "我是标题",
+          "defaultValue": "Typesomething",
           "min": 0,
           "max": 100,
           "step": 1,
@@ -171,11 +200,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "title.content",
         "virtualPath": ""
@@ -183,6 +214,7 @@
       {
         "key": "textStyle",
         "config": {
+          "id": 9031,
           "type": "object",
           "component": "none",
           "alias": "文本样式",
@@ -200,11 +232,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "title.textStyle",
         "virtualPath": "",
@@ -212,6 +246,7 @@
           {
             "key": "fontSize",
             "config": {
+              "id": 2728,
               "type": "number",
               "component": "number",
               "alias": "字号",
@@ -229,11 +264,13 @@
               "InfiniteMax": false,
               "suffix": "px",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "title.textStyle.fontSize",
             "virtualPath": ""
@@ -241,6 +278,7 @@
           {
             "key": "color",
             "config": {
+              "id": 5884,
               "type": "string",
               "component": "color",
               "alias": "字体颜色",
@@ -258,11 +296,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "title.textStyle.color",
             "virtualPath": ""
@@ -270,6 +310,7 @@
           {
             "key": "fontWeight",
             "config": {
+              "id": 2392,
               "type": "string",
               "component": "fontWeight",
               "alias": "字体粗细",
@@ -287,11 +328,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "title.textStyle.fontWeight",
             "virtualPath": ""
@@ -299,6 +342,7 @@
           {
             "key": "textAlign",
             "config": {
+              "id": 8237,
               "type": "string",
               "component": "justifyContent",
               "alias": "对齐方式",
@@ -308,7 +352,7 @@
               "layout": "horizontal",
               "toggleCol": "",
               "isHide": false,
-              "defaultValue": "left",
+              "defaultValue": "flex-start",
               "min": 0,
               "max": 100,
               "step": 1,
@@ -316,11 +360,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "title.textStyle.textAlign",
             "virtualPath": ""
@@ -342,6 +388,7 @@
   {
     "key": "counter",
     "config": {
+      "id": 5731,
       "type": "object",
       "component": "none",
       "alias": "翻牌器",
@@ -359,11 +406,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "counter",
     "virtualPath": "",
@@ -371,6 +420,7 @@
       {
         "key": "fontFamily",
         "config": {
+          "id": 3713,
           "type": "string",
           "component": "fontFamily",
           "alias": "字体",
@@ -388,11 +438,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "counter.fontFamily",
         "virtualPath": ""
@@ -400,6 +452,7 @@
       {
         "key": "justifyContent",
         "config": {
+          "id": 1867,
           "type": "string",
           "component": "justifyContent",
           "alias": "水平对齐",
@@ -417,11 +470,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "counter.justifyContent",
         "virtualPath": ""
@@ -429,6 +484,7 @@
       {
         "key": "margin",
         "config": {
+          "id": 3977,
           "type": "object",
           "component": "none",
           "alias": "间距",
@@ -446,11 +502,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "counter.margin",
         "virtualPath": "",
@@ -458,6 +516,7 @@
           {
             "key": "preNum",
             "config": {
+              "id": 2042,
               "type": "number",
               "component": "number",
               "alias": "前缀-数字",
@@ -475,11 +534,13 @@
               "InfiniteMax": false,
               "suffix": "px",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "counter.margin.preNum",
             "virtualPath": ""
@@ -487,6 +548,7 @@
           {
             "key": "numSuff",
             "config": {
+              "id": 1755,
               "type": "number",
               "component": "number",
               "alias": "数字-后缀",
@@ -504,11 +566,13 @@
               "InfiniteMax": false,
               "suffix": "px",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "counter.margin.numSuff",
             "virtualPath": ""
@@ -522,6 +586,7 @@
       {
         "key": "prefix",
         "config": {
+          "id": 3159,
           "type": "object",
           "component": "none",
           "alias": "前缀",
@@ -539,11 +604,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "counter.prefix",
         "virtualPath": "",
@@ -551,6 +618,7 @@
           {
             "key": "content",
             "config": {
+              "id": 3947,
               "type": "string",
               "component": "input",
               "alias": "内容",
@@ -568,11 +636,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "counter.prefix.content",
             "virtualPath": ""
@@ -580,6 +650,7 @@
           {
             "key": "textStyle",
             "config": {
+              "id": 3114,
               "type": "object",
               "component": "none",
               "alias": "文本样式",
@@ -597,11 +668,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "counter.prefix.textStyle",
             "virtualPath": "",
@@ -609,6 +682,7 @@
               {
                 "key": "fontSize",
                 "config": {
+                  "id": 9346,
                   "type": "number",
                   "component": "number",
                   "alias": "字号",
@@ -626,11 +700,13 @@
                   "InfiniteMax": false,
                   "suffix": "px",
                   "enums": [],
+                  "pairs": [],
                   "whichEnum": {
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "counter.prefix.textStyle.fontSize",
                 "virtualPath": ""
@@ -638,6 +714,7 @@
               {
                 "key": "color",
                 "config": {
+                  "id": 4175,
                   "type": "string",
                   "component": "color",
                   "alias": "字体颜色",
@@ -655,11 +732,13 @@
                   "InfiniteMax": false,
                   "suffix": "",
                   "enums": [],
+                  "pairs": [],
                   "whichEnum": {
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "counter.prefix.textStyle.color",
                 "virtualPath": ""
@@ -667,6 +746,7 @@
               {
                 "key": "fontWeight",
                 "config": {
+                  "id": 862,
                   "type": "string",
                   "component": "fontWeight",
                   "alias": "字体粗细",
@@ -684,11 +764,13 @@
                   "InfiniteMax": false,
                   "suffix": "",
                   "enums": [],
+                  "pairs": [],
                   "whichEnum": {
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "counter.prefix.textStyle.fontWeight",
                 "virtualPath": ""
@@ -709,6 +791,7 @@
       {
         "key": "suffix",
         "config": {
+          "id": 9867,
           "type": "object",
           "component": "none",
           "alias": "后缀",
@@ -726,11 +809,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "counter.suffix",
         "virtualPath": "",
@@ -738,6 +823,7 @@
           {
             "key": "content",
             "config": {
+              "id": 7366,
               "type": "string",
               "component": "input",
               "alias": "内容",
@@ -755,11 +841,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "counter.suffix.content",
             "virtualPath": ""
@@ -767,6 +855,7 @@
           {
             "key": "textStyle",
             "config": {
+              "id": 9254,
               "type": "object",
               "component": "none",
               "alias": "文本样式",
@@ -784,11 +873,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "counter.suffix.textStyle",
             "virtualPath": "",
@@ -796,6 +887,7 @@
               {
                 "key": "fontSize",
                 "config": {
+                  "id": 7739,
                   "type": "number",
                   "component": "number",
                   "alias": "字号",
@@ -813,11 +905,13 @@
                   "InfiniteMax": false,
                   "suffix": "px",
                   "enums": [],
+                  "pairs": [],
                   "whichEnum": {
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "counter.suffix.textStyle.fontSize",
                 "virtualPath": ""
@@ -825,6 +919,7 @@
               {
                 "key": "color",
                 "config": {
+                  "id": 5758,
                   "type": "string",
                   "component": "color",
                   "alias": "字体颜色",
@@ -842,11 +937,13 @@
                   "InfiniteMax": false,
                   "suffix": "",
                   "enums": [],
+                  "pairs": [],
                   "whichEnum": {
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "counter.suffix.textStyle.color",
                 "virtualPath": ""
@@ -854,6 +951,7 @@
               {
                 "key": "fontWeight",
                 "config": {
+                  "id": 8595,
                   "type": "string",
                   "component": "fontWeight",
                   "alias": "字体粗细",
@@ -871,11 +969,13 @@
                   "InfiniteMax": false,
                   "suffix": "",
                   "enums": [],
+                  "pairs": [],
                   "whichEnum": {
                     "field": "",
                     "value": ""
                   },
-                  "flatValue": false
+                  "flatValue": false,
+                  "isRange": false
                 },
                 "path": "counter.suffix.textStyle.fontWeight",
                 "virtualPath": ""
@@ -905,6 +1005,7 @@
   {
     "key": "numbers",
     "config": {
+      "id": 5634,
       "type": "object",
       "component": "none",
       "alias": "数字",
@@ -922,11 +1023,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "numbers",
     "virtualPath": "",
@@ -934,6 +1037,7 @@
       {
         "key": "textStyle",
         "config": {
+          "id": 3287,
           "type": "object",
           "component": "none",
           "alias": "文本样式",
@@ -951,11 +1055,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "numbers.textStyle",
         "virtualPath": "",
@@ -963,6 +1069,7 @@
           {
             "key": "fontSize",
             "config": {
+              "id": 1965,
               "type": "number",
               "component": "number",
               "alias": "字号",
@@ -980,11 +1087,13 @@
               "InfiniteMax": false,
               "suffix": "px",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "numbers.textStyle.fontSize",
             "virtualPath": ""
@@ -992,6 +1101,7 @@
           {
             "key": "color",
             "config": {
+              "id": 8883,
               "type": "string",
               "component": "color",
               "alias": "字体颜色",
@@ -1009,11 +1119,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "numbers.textStyle.color",
             "virtualPath": ""
@@ -1021,6 +1133,7 @@
           {
             "key": "fontWeight",
             "config": {
+              "id": 4943,
               "type": "string",
               "component": "fontWeight",
               "alias": "字体粗细",
@@ -1038,11 +1151,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "numbers.textStyle.fontWeight",
             "virtualPath": ""
@@ -1057,6 +1172,7 @@
       {
         "key": "marginRight",
         "config": {
+          "id": 8721,
           "type": "number",
           "component": "slider",
           "alias": "数字间隔",
@@ -1074,11 +1190,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "numbers.marginRight",
         "virtualPath": ""
@@ -1086,6 +1204,7 @@
       {
         "key": "bgColor",
         "config": {
+          "id": 3410,
           "type": "string",
           "component": "color",
           "alias": "背景色",
@@ -1103,11 +1222,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "numbers.bgColor",
         "virtualPath": ""
@@ -1115,6 +1236,7 @@
       {
         "key": "bgRadius",
         "config": {
+          "id": 6458,
           "type": "number",
           "component": "slider",
           "alias": "背景圆角",
@@ -1132,11 +1254,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "numbers.bgRadius",
         "virtualPath": ""
@@ -1144,6 +1268,7 @@
       {
         "key": "bgSeparating",
         "config": {
+          "id": 37,
           "type": "boolean",
           "component": "switch",
           "alias": "分隔符背景",
@@ -1161,11 +1286,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "numbers.bgSeparating",
         "virtualPath": ""
@@ -1173,6 +1300,7 @@
       {
         "key": "digit",
         "config": {
+          "id": 6864,
           "type": "number",
           "component": "slider",
           "alias": "默认位数",
@@ -1190,11 +1318,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "numbers.digit",
         "virtualPath": ""
@@ -1202,6 +1332,7 @@
       {
         "key": "decimal",
         "config": {
+          "id": 2437,
           "type": "number",
           "component": "slider",
           "alias": "小数点位数",
@@ -1219,11 +1350,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "numbers.decimal",
         "virtualPath": ""
@@ -1231,6 +1364,7 @@
       {
         "key": "divisor",
         "config": {
+          "id": 8526,
           "type": "number",
           "component": "number",
           "alias": "除数",
@@ -1248,11 +1382,13 @@
           "InfiniteMax": true,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "numbers.divisor",
         "virtualPath": ""
@@ -1260,6 +1396,7 @@
       {
         "key": "separatingChart",
         "config": {
+          "id": 4031,
           "type": "boolean",
           "component": "switch",
           "alias": "千位分隔符",
@@ -1277,11 +1414,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "numbers.separatingChart",
         "virtualPath": ""
@@ -1289,6 +1428,7 @@
       {
         "key": "separatingSymbol",
         "config": {
+          "id": 6775,
           "type": "string",
           "component": "input",
           "alias": "千位分隔符符号",
@@ -1306,11 +1446,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "numbers.separatingSymbol",
         "virtualPath": ""
@@ -1318,6 +1460,7 @@
       {
         "key": "decimalSymbol",
         "config": {
+          "id": 4769,
           "type": "string",
           "component": "input",
           "alias": "小数分隔符符号",
@@ -1335,11 +1478,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "numbers.decimalSymbol",
         "virtualPath": ""
@@ -1347,6 +1492,7 @@
       {
         "key": "fixedWidth",
         "config": {
+          "id": 2780,
           "type": "number",
           "component": "number",
           "alias": "定宽",
@@ -1364,11 +1510,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "numbers.fixedWidth",
         "virtualPath": ""
@@ -1376,6 +1524,7 @@
       {
         "key": "increment",
         "config": {
+          "id": 223,
           "type": "boolean",
           "component": "switch",
           "alias": "数据抖动修正",
@@ -1393,11 +1542,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "numbers.increment",
         "virtualPath": ""
@@ -1405,6 +1556,7 @@
       {
         "key": "animation",
         "config": {
+          "id": 4522,
           "type": "boolean",
           "component": "switch",
           "alias": "开启动画",
@@ -1422,11 +1574,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "numbers.animation",
         "virtualPath": ""
@@ -1434,6 +1588,7 @@
       {
         "key": "sameDataFlip",
         "config": {
+          "id": 7625,
           "type": "boolean",
           "component": "switch",
           "alias": "始终动画",
@@ -1451,11 +1606,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "numbers.sameDataFlip",
         "virtualPath": ""
@@ -1463,6 +1620,7 @@
       {
         "key": "duration",
         "config": {
+          "id": 3724,
           "type": "number",
           "component": "number",
           "alias": "动画时长",
@@ -1480,11 +1638,13 @@
           "InfiniteMax": true,
           "suffix": "ms",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "numbers.duration",
         "virtualPath": ""
@@ -1509,4 +1669,4 @@
       "duration"
     ]
   }
-]
+]
\ No newline at end of file
diff --git a/src/components/text/number-title-flop/src/config.vue b/src/components/text/number-title-flop/src/config.vue
index d2044595..d8d2c7d6 100644
--- a/src/components/text/number-title-flop/src/config.vue
+++ b/src/components/text/number-title-flop/src/config.vue
@@ -19,7 +19,7 @@
       >
         <g-select
           v-model="config.global.arrangement"
-          :data="arrangements"
+          :data="pairData2545"
         />
       </g-field>
       <g-field
@@ -274,8 +274,8 @@
         :level="2"
         label="分隔符背景"
       >
-        <n-switch
-          v-model:value="config.numbers.bgSeparating"
+        <g-switch
+          v-model="config.numbers.bgSeparating"
         />
       </g-field>
       <g-field
@@ -313,8 +313,8 @@
         :level="2"
         label="千位分隔符"
       >
-        <n-switch
-          v-model:value="config.numbers.separatingChart"
+        <g-switch
+          v-model="config.numbers.separatingChart"
         />
       </g-field>
       <g-field
@@ -350,8 +350,8 @@
         :level="2"
         label="开启动画"
       >
-        <n-switch
-          v-model:value="config.numbers.animation"
+        <g-switch
+          v-model="config.numbers.animation"
         />
       </g-field>
       <g-field
@@ -369,8 +369,8 @@
   </div>
 </template>
 
-<script lang='ts'>
-import { defineComponent, PropType, toRef } from 'vue'
+<script lang='ts' setup>
+import { toRef } from 'vue'
 import {
   fontFamilys,
   fontWeights,
@@ -378,31 +378,16 @@ import {
 } from '@/data/select-options'
 import { NumberTitleFlop } from './number-title-flop'
 
-export default defineComponent({
-  name: 'VNumberTitleFlopProp',
-  props: {
-    com: {
-      type: Object as PropType<NumberTitleFlop>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const config = toRef(props.com, 'config')
+const props = defineProps<{
+  com: NumberTitleFlop
+}>()
 
-    const arrangements = [
-      { id: 'top', value: '标题在上' },
-      { id: 'left', value: '标题在左' },
-      { id: 'bottom', value: '标题在下' },
-    ]
+const config = toRef(props.com, 'config')
 
-    return {
-      config,
-      arrangements,
+const pairData2545 = [
+  { key: 'top', value: '标题在上' },
+  { key: 'left', value: '标题在左' },
+  { key: 'bottom', value: '标题在下' },
+]
 
-      fontFamilys,
-      fontWeights,
-      justifyContents,
-    }
-  },
-})
 </script>
diff --git a/src/components/text/paragraph/src/config.json b/src/components/text/paragraph/src/config.json
index 7fc05762..4e378ac4 100644
--- a/src/components/text/paragraph/src/config.json
+++ b/src/components/text/paragraph/src/config.json
@@ -2,6 +2,7 @@
   {
     "key": "content",
     "config": {
+      "id": 8239,
       "type": "string",
       "component": "input",
       "alias": "段落内容",
@@ -19,11 +20,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "content",
     "virtualPath": ""
@@ -31,6 +34,7 @@
   {
     "key": "textStyle",
     "config": {
+      "id": 602,
       "type": "object",
       "component": "none",
       "alias": "文本样式",
@@ -48,11 +52,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "textStyle",
     "virtualPath": "",
@@ -60,6 +66,7 @@
       {
         "key": "fontFamily",
         "config": {
+          "id": 8681,
           "type": "string",
           "component": "fontFamily",
           "alias": "字体",
@@ -77,11 +84,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "textStyle.fontFamily",
         "virtualPath": ""
@@ -89,6 +98,7 @@
       {
         "key": "fontSize",
         "config": {
+          "id": 9101,
           "type": "number",
           "component": "number",
           "alias": "字号",
@@ -106,11 +116,13 @@
           "InfiniteMax": false,
           "suffix": "px",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "textStyle.fontSize",
         "virtualPath": ""
@@ -118,6 +130,7 @@
       {
         "key": "color",
         "config": {
+          "id": 690,
           "type": "string",
           "component": "color",
           "alias": "字体颜色",
@@ -135,11 +148,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "textStyle.color",
         "virtualPath": ""
@@ -147,6 +162,7 @@
       {
         "key": "fontWeight",
         "config": {
+          "id": 4324,
           "type": "string",
           "component": "fontWeight",
           "alias": "字体粗细",
@@ -164,11 +180,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "textStyle.fontWeight",
         "virtualPath": ""
@@ -184,6 +202,7 @@
   {
     "key": "scroll",
     "config": {
+      "id": 3789,
       "type": "object",
       "component": "none",
       "alias": "文本滚落",
@@ -201,11 +220,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "scroll",
     "virtualPath": "",
@@ -213,6 +234,7 @@
       {
         "key": "duration",
         "config": {
+          "id": 9580,
           "type": "number",
           "component": "number",
           "alias": "滚动持续时间",
@@ -230,11 +252,13 @@
           "InfiniteMax": true,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "scroll.duration",
         "virtualPath": ""
@@ -242,6 +266,7 @@
       {
         "key": "overScroll",
         "config": {
+          "id": 7596,
           "type": "boolean",
           "component": "switch",
           "alias": "溢出滚动",
@@ -259,11 +284,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "scroll.overScroll",
         "virtualPath": ""
@@ -277,6 +304,7 @@
   {
     "key": "lineHeight",
     "config": {
+      "id": 6530,
       "type": "number",
       "component": "slider",
       "alias": "行高",
@@ -294,11 +322,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "lineHeight",
     "virtualPath": ""
@@ -306,6 +336,7 @@
   {
     "key": "textAlign",
     "config": {
+      "id": 7716,
       "type": "string",
       "component": "hAlign",
       "alias": "对齐方式",
@@ -323,11 +354,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "textAlign",
     "virtualPath": ""
@@ -335,6 +368,7 @@
   {
     "key": "textIndent",
     "config": {
+      "id": 2335,
       "type": "number",
       "component": "slider",
       "alias": "首行缩进",
@@ -352,13 +386,15 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "textIndent",
     "virtualPath": ""
   }
-]
+]
\ No newline at end of file
diff --git a/src/components/text/paragraph/src/config.vue b/src/components/text/paragraph/src/config.vue
index 5cc9d565..3becce39 100644
--- a/src/components/text/paragraph/src/config.vue
+++ b/src/components/text/paragraph/src/config.vue
@@ -69,8 +69,8 @@
         tooltip="仅当文本溢出时有效"
         label="溢出滚动"
       >
-        <n-switch
-          v-model:value="config.scroll.overScroll"
+        <g-switch
+          v-model="config.scroll.overScroll"
         />
       </g-field>
     </g-field-collapse>
@@ -105,8 +105,8 @@
   </div>
 </template>
 
-<script lang='ts'>
-import { defineComponent, PropType, toRef } from 'vue'
+<script lang='ts' setup>
+import { toRef } from 'vue'
 import {
   fontFamilys,
   fontWeights,
@@ -114,24 +114,10 @@ import {
 } from '@/data/select-options'
 import { Paragraph } from './paragraph'
 
-export default defineComponent({
-  name: 'VParagraphProp',
-  props: {
-    com: {
-      type: Object as PropType<Paragraph>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const config = toRef(props.com, 'config')
+const props = defineProps<{
+  com: Paragraph
+}>()
 
-    return {
-      config,
+const config = toRef(props.com, 'config')
 
-      fontFamilys,
-      fontWeights,
-      hAligns,
-    }
-  },
-})
 </script>
diff --git a/src/components/text/timer/src/config.json b/src/components/text/timer/src/config.json
index ae1ac008..17396df6 100644
--- a/src/components/text/timer/src/config.json
+++ b/src/components/text/timer/src/config.json
@@ -2,6 +2,7 @@
   {
     "key": "iconStyle",
     "config": {
+      "id": 2203,
       "type": "object",
       "component": "none",
       "alias": "图标样式",
@@ -19,11 +20,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "iconStyle",
     "virtualPath": "",
@@ -31,6 +34,7 @@
       {
         "key": "show",
         "config": {
+          "id": 1931,
           "type": "boolean",
           "component": "switch",
           "alias": "",
@@ -48,11 +52,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "iconStyle.show",
         "virtualPath": ""
@@ -60,6 +66,7 @@
       {
         "key": "size",
         "config": {
+          "id": 3302,
           "type": "number",
           "component": "slider",
           "alias": "大小",
@@ -77,11 +84,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "iconStyle.size",
         "virtualPath": ""
@@ -89,6 +98,7 @@
       {
         "key": "color",
         "config": {
+          "id": 6051,
           "type": "string",
           "component": "color",
           "alias": "颜色",
@@ -106,11 +116,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "iconStyle.color",
         "virtualPath": ""
@@ -118,6 +130,7 @@
       {
         "key": "marginRight",
         "config": {
+          "id": 7409,
           "type": "number",
           "component": "slider",
           "alias": "边距",
@@ -135,11 +148,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "iconStyle.marginRight",
         "virtualPath": ""
@@ -155,6 +170,7 @@
   {
     "key": "time",
     "config": {
+      "id": 9333,
       "type": "object",
       "component": "none",
       "alias": "时间器",
@@ -172,11 +188,13 @@
       "InfiniteMax": false,
       "suffix": "",
       "enums": [],
+      "pairs": [],
       "whichEnum": {
         "field": "",
         "value": ""
       },
-      "flatValue": false
+      "flatValue": false,
+      "isRange": false
     },
     "path": "time",
     "virtualPath": "",
@@ -184,6 +202,7 @@
       {
         "key": "textStyle",
         "config": {
+          "id": 9462,
           "type": "object",
           "component": "none",
           "alias": "文本样式",
@@ -201,11 +220,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "time.textStyle",
         "virtualPath": "",
@@ -213,6 +234,7 @@
           {
             "key": "fontFamily",
             "config": {
+              "id": 6763,
               "type": "string",
               "component": "fontFamily",
               "alias": "字体",
@@ -230,11 +252,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "time.textStyle.fontFamily",
             "virtualPath": ""
@@ -242,6 +266,7 @@
           {
             "key": "fontSize",
             "config": {
+              "id": 7364,
               "type": "number",
               "component": "number",
               "alias": "字号",
@@ -259,11 +284,13 @@
               "InfiniteMax": false,
               "suffix": "px",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "time.textStyle.fontSize",
             "virtualPath": ""
@@ -271,6 +298,7 @@
           {
             "key": "color",
             "config": {
+              "id": 9634,
               "type": "string",
               "component": "color",
               "alias": "字体颜色",
@@ -288,11 +316,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "time.textStyle.color",
             "virtualPath": ""
@@ -300,6 +330,7 @@
           {
             "key": "fontWeight",
             "config": {
+              "id": 8507,
               "type": "string",
               "component": "fontWeight",
               "alias": "字体粗细",
@@ -317,11 +348,13 @@
               "InfiniteMax": false,
               "suffix": "",
               "enums": [],
+              "pairs": [],
               "whichEnum": {
                 "field": "",
                 "value": ""
               },
-              "flatValue": false
+              "flatValue": false,
+              "isRange": false
             },
             "path": "time.textStyle.fontWeight",
             "virtualPath": ""
@@ -337,6 +370,7 @@
       {
         "key": "format",
         "config": {
+          "id": 4875,
           "type": "string",
           "component": "input",
           "alias": "格式化",
@@ -354,11 +388,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "time.format",
         "virtualPath": ""
@@ -366,6 +402,7 @@
       {
         "key": "duration",
         "config": {
+          "id": 6281,
           "type": "number",
           "component": "number",
           "alias": "间隔时间",
@@ -383,11 +420,13 @@
           "InfiniteMax": true,
           "suffix": "ms",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": false
+          "flatValue": false,
+          "isRange": false
         },
         "path": "time.duration",
         "virtualPath": ""
@@ -395,6 +434,7 @@
       {
         "key": "horizontal",
         "config": {
+          "id": 3748,
           "type": "string",
           "component": "justifyContent",
           "alias": "水平对齐",
@@ -412,11 +452,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": true
+          "flatValue": true,
+          "isRange": false
         },
         "path": "time.horizontal",
         "virtualPath": ""
@@ -424,6 +466,7 @@
       {
         "key": "vertical",
         "config": {
+          "id": 8100,
           "type": "string",
           "component": "align",
           "alias": "垂直对齐",
@@ -441,11 +484,13 @@
           "InfiniteMax": false,
           "suffix": "",
           "enums": [],
+          "pairs": [],
           "whichEnum": {
             "field": "",
             "value": ""
           },
-          "flatValue": true
+          "flatValue": true,
+          "isRange": false
         },
         "path": "time.vertical",
         "virtualPath": ""
@@ -459,4 +504,4 @@
       "vertical"
     ]
   }
-]
+]
\ No newline at end of file
diff --git a/src/components/text/timer/src/config.vue b/src/components/text/timer/src/config.vue
index 1f2a753f..1632daa7 100644
--- a/src/components/text/timer/src/config.vue
+++ b/src/components/text/timer/src/config.vue
@@ -106,42 +106,28 @@
         :level="2"
         label="水平对齐"
       >
-        <n-radio-group
-          v-model:value="config.time.horizontal"
-          size="small"
-        >
-          <n-radio-button
-            v-for="em in justifyContents"
-            :key="em.id"
-            :value="em.id"
-          >
-            {{ em.value }}
-          </n-radio-button>
-        </n-radio-group>
+        <g-radio-group
+          v-model="config.time.horizontal"
+          :data="justifyContents"
+          is-button
+        />
       </g-field>
       <g-field
         :level="2"
         label="垂直对齐"
       >
-        <n-radio-group
-          v-model:value="config.time.vertical"
-          size="small"
-        >
-          <n-radio-button
-            v-for="em in aligns"
-            :key="em.id"
-            :value="em.id"
-          >
-            {{ em.value }}
-          </n-radio-button>
-        </n-radio-group>
+        <g-radio-group
+          v-model="config.time.vertical"
+          :data="aligns"
+          is-button
+        />
       </g-field>
     </g-field-collapse>
   </div>
 </template>
 
-<script lang='ts'>
-import { defineComponent, PropType, toRef } from 'vue'
+<script lang='ts' setup>
+import { toRef } from 'vue'
 import {
   fontFamilys,
   fontWeights,
@@ -150,25 +136,10 @@ import {
 } from '@/data/select-options'
 import { Timer } from './timer'
 
-export default defineComponent({
-  name: 'VTimerProp',
-  props: {
-    com: {
-      type: Object as PropType<Timer>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const config = toRef(props.com, 'config')
+const props = defineProps<{
+  com: Timer
+}>()
 
-    return {
-      config,
+const config = toRef(props.com, 'config')
 
-      fontFamilys,
-      fontWeights,
-      justifyContents,
-      aligns,
-    }
-  },
-})
 </script>
diff --git a/src/components/ui/checkbox/index.ts b/src/components/ui/checkbox/index.ts
new file mode 100644
index 00000000..3bb21c38
--- /dev/null
+++ b/src/components/ui/checkbox/index.ts
@@ -0,0 +1,2 @@
+import Checkbox from './src/index.vue'
+export default Checkbox
diff --git a/src/components/ui/checkbox/src/index.vue b/src/components/ui/checkbox/src/index.vue
new file mode 100644
index 00000000..7b23a7c3
--- /dev/null
+++ b/src/components/ui/checkbox/src/index.vue
@@ -0,0 +1,67 @@
+<template>
+  <div
+    class="datav-gui g-checkbox"
+    :class="[
+      {
+        '--inline': !!inline,
+        '--single': inline === 'inline-single',
+        '--disabled': disabled,
+      }
+    ]"
+  >
+    <div class="g-checkbox-inner">
+      <n-checkbox
+        :checked="modelValue"
+        :size="size"
+        :disabled="disabled"
+        @update:checked="handleInput"
+      />
+    </div>
+    <template v-if="tooltip && label">
+      <n-tooltip placement="top">
+        <template #trigger>
+          <span class="g-input__caption-with-description">
+            {{ label }}
+          </span>
+        </template>
+        {{ tooltip }}
+      </n-tooltip>
+    </template>
+    <span v-else-if="label" class="g-input__caption">
+      {{ label }}
+    </span>
+  </div>
+</template>
+
+<script lang='ts' setup>
+import { PropType } from 'vue'
+import { NCheckbox, NTooltip } from 'naive-ui'
+import { UPDATE_MODEL_EVENT } from '@/utils/constants'
+
+defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: String as PropType<'medium' | 'small' | 'large'>,
+    default: 'medium',
+  },
+  inline: {
+    type: [Boolean, String],
+    default: false,
+  },
+  disabled: Boolean,
+  tooltip: String,
+})
+
+const emits = defineEmits([UPDATE_MODEL_EVENT])
+
+const handleInput = (value: boolean) => {
+  emits(UPDATE_MODEL_EVENT, value)
+}
+</script>
diff --git a/src/components/ui/field-collapse/src/index.vue b/src/components/ui/field-collapse/src/index.vue
index 00b97c1c..f8436c0b 100644
--- a/src/components/ui/field-collapse/src/index.vue
+++ b/src/components/ui/field-collapse/src/index.vue
@@ -30,7 +30,7 @@
                 {{ label }}
               </label>
             </template>
-            <span v-html="tooltip"></span>
+            {{ tooltip }}
           </n-tooltip>
         </template>
         <label v-else class="g-field-title" :title="label">
diff --git a/src/components/ui/field/src/index.vue b/src/components/ui/field/src/index.vue
index f8c16ef5..d6810cb1 100644
--- a/src/components/ui/field/src/index.vue
+++ b/src/components/ui/field/src/index.vue
@@ -24,7 +24,7 @@
               {{ label }}
             </label>
           </template>
-          <span v-html="tooltip"></span>
+          {{ tooltip }}
         </n-tooltip>
       </template>
       <label v-else class="g-field-title" :title="label">
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index 27645d5f..2cb133d3 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -32,6 +32,8 @@ const install = (app: App): void => {
   app.component('GSwitch', defineAsyncComponent(() => import('./switch')))
   app.component('GTooltipPopover', defineAsyncComponent(() => import('./tooltip-popover')))
   app.component('GUploadImage', defineAsyncComponent(() => import('./upload-image')))
+  app.component('GCheckbox', defineAsyncComponent(() => import('./checkbox')))
+  app.component('GRadioGroup', defineAsyncComponent(() => import('./radio-group')))
   // -- prepend async register placeholder --
 
   // async registry with loading
diff --git a/src/components/ui/input-number/src/index.vue b/src/components/ui/input-number/src/index.vue
index 42ed4fb2..724f1b09 100644
--- a/src/components/ui/input-number/src/index.vue
+++ b/src/components/ui/input-number/src/index.vue
@@ -26,7 +26,17 @@
         </template>
       </n-input-number>
     </n-config-provider>
-    <span v-if="label" class="g-input__caption">
+    <template v-if="tooltip && label">
+      <n-tooltip placement="top">
+        <template #trigger>
+          <span class="g-input__caption-with-description">
+            {{ label }}
+          </span>
+        </template>
+        {{ tooltip }}
+      </n-tooltip>
+    </template>
+    <span v-else-if="label" class="g-input__caption">
       {{ label }}
     </span>
   </div>
@@ -34,7 +44,7 @@
 
 <script lang='ts' setup>
 import { PropType } from 'vue'
-import { NConfigProvider, NInputNumber } from 'naive-ui'
+import { NConfigProvider, NInputNumber, NTooltip } from 'naive-ui'
 import type { Size } from 'naive-ui/es/input-number/src/interface'
 import { UPDATE_MODEL_EVENT } from '@/utils/constants'
 
@@ -69,6 +79,7 @@ const props = defineProps({
   },
   prefix: String,
   suffix: String,
+  tooltip: String,
 })
 const emits = defineEmits([UPDATE_MODEL_EVENT])
 
diff --git a/src/components/ui/input/src/index.vue b/src/components/ui/input/src/index.vue
index 9f543720..712952a5 100644
--- a/src/components/ui/input/src/index.vue
+++ b/src/components/ui/input/src/index.vue
@@ -14,7 +14,17 @@
       placeholder=""
       @update:value="handleInput"
     />
-    <span v-if="label" class="g-input__caption">
+    <template v-if="tooltip && label">
+      <n-tooltip placement="top">
+        <template #trigger>
+          <span class="g-input__caption-with-description">
+            {{ label }}
+          </span>
+        </template>
+        {{ tooltip }}
+      </n-tooltip>
+    </template>
+    <span v-else-if="label" class="g-input__caption">
       {{ label }}
     </span>
   </div>
@@ -22,7 +32,7 @@
 
 <script lang='ts' setup>
 import { PropType } from 'vue'
-import { NInput } from 'naive-ui'
+import { NInput, NTooltip } from 'naive-ui'
 import type { Size } from 'naive-ui/es/input/src/interface'
 import { UPDATE_MODEL_EVENT } from '@/utils/constants'
 
@@ -43,6 +53,7 @@ defineProps({
     type: [Boolean, String],
     default: false,
   },
+  tooltip: String,
 })
 const emits = defineEmits([UPDATE_MODEL_EVENT])
 
diff --git a/src/components/ui/radio-group/index.ts b/src/components/ui/radio-group/index.ts
new file mode 100644
index 00000000..fa792c26
--- /dev/null
+++ b/src/components/ui/radio-group/index.ts
@@ -0,0 +1,2 @@
+import RadioGroup from './src/index.vue'
+export default RadioGroup
diff --git a/src/components/ui/radio-group/src/index.vue b/src/components/ui/radio-group/src/index.vue
new file mode 100644
index 00000000..12352195
--- /dev/null
+++ b/src/components/ui/radio-group/src/index.vue
@@ -0,0 +1,94 @@
+<template>
+  <div
+    class="datav-gui g-radio-group"
+    :class="[
+      {
+        '--inline': !!inline,
+        '--single': inline === 'inline-single',
+        '--disabled': disabled,
+      }
+    ]"
+  >
+    <div class="g-radio-group-inner">
+      <n-radio-group
+        :value="modelValue"
+        :size="size"
+        :disabled="disabled"
+        @update:value="handleInput"
+      >
+        <template v-if="isButton">
+          <n-radio-button v-for="pair in opts" :key="pair.value" :value="pair.value">
+            {{ pair.label }}
+          </n-radio-button>
+        </template>
+        <template v-else>
+          <n-radio v-for="pair in opts" :key="pair.value" :value="pair.value">
+            {{ pair.label }}
+          </n-radio>
+        </template>
+      </n-radio-group>
+    </div>
+    <template v-if="tooltip && label">
+      <n-tooltip placement="top">
+        <template #trigger>
+          <span class="g-input__caption-with-description">
+            {{ label }}
+          </span>
+        </template>
+        {{ tooltip }}
+      </n-tooltip>
+    </template>
+    <span v-else-if="label" class="g-input__caption">
+      {{ label }}
+    </span>
+  </div>
+</template>
+
+<script lang='ts' setup>
+import { computed, PropType } from 'vue'
+import { NRadioGroup, NRadioButton, NRadio, NTooltip } from 'naive-ui'
+import { UPDATE_MODEL_EVENT } from '@/utils/constants'
+
+const props =  defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: String as PropType<'medium' | 'small' | 'large'>,
+    default: 'small',
+  },
+  inline: {
+    type: [Boolean, String],
+    default: false,
+  },
+  data: {
+    type: Array as PropType<{
+      id?: string
+      key?: string
+      value: string
+    }[]>,
+    default: () => [],
+  },
+  disabled: Boolean,
+  isButton: Boolean,
+  tooltip: String,
+})
+
+const emits = defineEmits([UPDATE_MODEL_EVENT])
+
+const opts = computed(() => {
+  return props.data.map(m => ({
+    label: m.value,
+    value: m.id || m.key,
+  }))
+})
+
+const handleInput = (value: boolean) => {
+  emits(UPDATE_MODEL_EVENT, value)
+}
+</script>
diff --git a/src/components/ui/select-image/src/index.vue b/src/components/ui/select-image/src/index.vue
index 4e8579cd..0bae4a84 100644
--- a/src/components/ui/select-image/src/index.vue
+++ b/src/components/ui/select-image/src/index.vue
@@ -34,7 +34,17 @@
             </span>
           </div>
         </div>
-        <span v-if="label" class="g-input__caption">
+        <template v-if="tooltip && label">
+          <n-tooltip placement="top">
+            <template #trigger>
+              <span class="g-input__caption-with-description">
+                {{ label }}
+              </span>
+            </template>
+            {{ tooltip }}
+          </n-tooltip>
+        </template>
+        <span v-else-if="label" class="g-input__caption">
           {{ label }}
         </span>
       </div>
@@ -62,7 +72,7 @@
 
 <script lang='ts' setup>
 import { PropType, computed, ref } from 'vue'
-import { NPopover, NIcon } from 'naive-ui'
+import { NPopover, NIcon, NTooltip } from 'naive-ui'
 import { UPDATE_MODEL_EVENT } from '@/utils/constants'
 import { BorderImage } from '@/components/_models/border-image'
 import { IconSelectArrow } from '@/icons'
@@ -90,6 +100,7 @@ const props = defineProps({
     type: String as PropType<Placement>,
     default: 'left',
   },
+  tooltip: String,
 })
 const emits = defineEmits([UPDATE_MODEL_EVENT])
 
diff --git a/src/components/ui/select-shape/src/index.vue b/src/components/ui/select-shape/src/index.vue
index 77a1e528..a54f4f5c 100644
--- a/src/components/ui/select-shape/src/index.vue
+++ b/src/components/ui/select-shape/src/index.vue
@@ -16,7 +16,17 @@
       :disabled="disabled"
       @update:value="handleInput"
     />
-    <span v-if="label" class="g-input__caption">
+    <template v-if="tooltip && label">
+      <n-tooltip placement="top">
+        <template #trigger>
+          <span class="g-input__caption-with-description">
+            {{ label }}
+          </span>
+        </template>
+        {{ tooltip }}
+      </n-tooltip>
+    </template>
+    <span v-else-if="label" class="g-input__caption">
       {{ label }}
     </span>
   </div>
@@ -24,7 +34,7 @@
 
 <script lang='ts' setup>
 import { PropType, h } from 'vue'
-import { NSelect } from 'naive-ui'
+import { NSelect, NTooltip } from 'naive-ui'
 import type { Size } from 'naive-ui/es/select/src/interface'
 import { UPDATE_MODEL_EVENT } from '@/utils/constants'
 import OptionLabel from './option-label.vue'
@@ -57,6 +67,7 @@ const props = defineProps({
     default: false,
   },
   disabled: Boolean,
+  tooltip: String,
 })
 const emits = defineEmits([UPDATE_MODEL_EVENT])
 
diff --git a/src/components/ui/select-suggest/src/index.vue b/src/components/ui/select-suggest/src/index.vue
index 3c2ca263..667d39d2 100644
--- a/src/components/ui/select-suggest/src/index.vue
+++ b/src/components/ui/select-suggest/src/index.vue
@@ -20,7 +20,17 @@
       value-field="id"
       @update:value="handleInput"
     />
-    <span v-if="label" class="g-input__caption">
+    <template v-if="tooltip && label">
+      <n-tooltip placement="top">
+        <template #trigger>
+          <span class="g-input__caption-with-description">
+            {{ label }}
+          </span>
+        </template>
+        {{ tooltip }}
+      </n-tooltip>
+    </template>
+    <span v-else-if="label" class="g-input__caption">
       {{ label }}
     </span>
   </div>
@@ -28,7 +38,7 @@
 
 <script lang='ts' setup>
 import { PropType, toRefs, computed } from 'vue'
-import { NSelect } from 'naive-ui'
+import { NSelect, NTooltip } from 'naive-ui'
 import type { Size } from 'naive-ui/es/select/src/interface'
 import { UPDATE_MODEL_EVENT } from '@/utils/constants'
 
@@ -60,6 +70,7 @@ const props = defineProps({
   },
   disabled: Boolean,
   filters: Array as PropType<(number | string)[]>,
+  tooltip: String,
 })
 
 const emits = defineEmits([UPDATE_MODEL_EVENT])
diff --git a/src/components/ui/select/src/index.vue b/src/components/ui/select/src/index.vue
index c9d0ba7c..b483e069 100644
--- a/src/components/ui/select/src/index.vue
+++ b/src/components/ui/select/src/index.vue
@@ -16,7 +16,17 @@
       :disabled="disabled"
       @update:value="handleInput"
     />
-    <span v-if="label" class="g-input__caption">
+    <template v-if="tooltip && label">
+      <n-tooltip placement="top">
+        <template #trigger>
+          <span class="g-input__caption-with-description">
+            {{ label }}
+          </span>
+        </template>
+        {{ tooltip }}
+      </n-tooltip>
+    </template>
+    <span v-else-if="label" class="g-input__caption">
       {{ label }}
     </span>
   </div>
@@ -24,7 +34,7 @@
 
 <script lang='ts' setup>
 import { PropType, computed } from 'vue'
-import { NSelect } from 'naive-ui'
+import { NSelect, NTooltip } from 'naive-ui'
 import type { Size } from 'naive-ui/es/select/src/interface'
 import { UPDATE_MODEL_EVENT } from '@/utils/constants'
 
@@ -54,6 +64,7 @@ const props = defineProps({
     default: false,
   },
   disabled: Boolean,
+  tooltip: String,
 })
 const emits = defineEmits([UPDATE_MODEL_EVENT])
 
diff --git a/src/components/ui/slider-range/src/index.vue b/src/components/ui/slider-range/src/index.vue
index fdb0d880..ab97f463 100644
--- a/src/components/ui/slider-range/src/index.vue
+++ b/src/components/ui/slider-range/src/index.vue
@@ -25,7 +25,17 @@
         />
       </div>
     </n-config-provider>
-    <span v-if="label" class="g-input__caption">
+    <template v-if="tooltip && label">
+      <n-tooltip placement="top">
+        <template #trigger>
+          <span class="g-input__caption-with-description">
+            {{ label }}
+          </span>
+        </template>
+        {{ tooltip }}
+      </n-tooltip>
+    </template>
+    <span v-else-if="label" class="g-input__caption">
       {{ label }}
     </span>
   </div>
@@ -33,7 +43,7 @@
 
 <script lang='ts' setup>
 import { PropType } from 'vue'
-import { NConfigProvider, NSlider } from 'naive-ui'
+import { NConfigProvider, NSlider, NTooltip } from 'naive-ui'
 import { UPDATE_MODEL_EVENT } from '@/utils/constants'
 
 const props = defineProps({
@@ -66,6 +76,7 @@ const props = defineProps({
     default: false,
   },
   disabled: Boolean,
+  tooltip: String,
 })
 const emits = defineEmits([UPDATE_MODEL_EVENT])
 
diff --git a/src/components/ui/slider/src/index.vue b/src/components/ui/slider/src/index.vue
index 3cb14fab..9e610ea9 100644
--- a/src/components/ui/slider/src/index.vue
+++ b/src/components/ui/slider/src/index.vue
@@ -31,7 +31,17 @@
         </n-input-number>
       </div>
     </n-config-provider>
-    <span v-if="label" class="g-input__caption">
+    <template v-if="tooltip && label">
+      <n-tooltip placement="top">
+        <template #trigger>
+          <span class="g-input__caption-with-description">
+            {{ label }}
+          </span>
+        </template>
+        {{ tooltip }}
+      </n-tooltip>
+    </template>
+    <span v-else-if="label" class="g-input__caption">
       {{ label }}
     </span>
   </div>
@@ -39,7 +49,7 @@
 
 <script lang='ts' setup>
 import { PropType } from 'vue'
-import { NConfigProvider, NSlider, NInputNumber } from 'naive-ui'
+import { NConfigProvider, NSlider, NInputNumber, NTooltip } from 'naive-ui'
 import type { Size } from 'naive-ui/es/input-number/src/interface'
 import { UPDATE_MODEL_EVENT } from '@/utils/constants'
 
@@ -74,6 +84,7 @@ const props = defineProps({
   },
   suffix: String,
   disabled: Boolean,
+  tooltip: String,
 })
 const emits = defineEmits([UPDATE_MODEL_EVENT])
 
diff --git a/src/components/ui/switch/src/index.vue b/src/components/ui/switch/src/index.vue
index 92716fe6..3a665512 100644
--- a/src/components/ui/switch/src/index.vue
+++ b/src/components/ui/switch/src/index.vue
@@ -9,13 +9,25 @@
       }
     ]"
   >
-    <n-switch
-      :value="modelValue"
-      :size="size"
-      :disabled="disabled"
-      @update:value="handleInput"
-    />
-    <span v-if="label" class="g-input__caption">
+    <div class="g-switch-inner">
+      <n-switch
+        :value="modelValue"
+        :size="size"
+        :disabled="disabled"
+        @update:value="handleInput"
+      />
+    </div>
+    <template v-if="tooltip && label">
+      <n-tooltip placement="top">
+        <template #trigger>
+          <span class="g-input__caption-with-description">
+            {{ label }}
+          </span>
+        </template>
+        {{ tooltip }}
+      </n-tooltip>
+    </template>
+    <span v-else-if="label" class="g-input__caption">
       {{ label }}
     </span>
   </div>
@@ -23,7 +35,7 @@
 
 <script lang='ts' setup>
 import { PropType } from 'vue'
-import { NSwitch } from 'naive-ui'
+import { NSwitch, NTooltip } from 'naive-ui'
 import { UPDATE_MODEL_EVENT } from '@/utils/constants'
 
 defineProps({
@@ -44,6 +56,7 @@ defineProps({
     default: false,
   },
   disabled: Boolean,
+  tooltip: String,
 })
 
 const emits = defineEmits([UPDATE_MODEL_EVENT])
diff --git a/src/components/ui/upload-image/src/index.vue b/src/components/ui/upload-image/src/index.vue
index e12b669f..f8c8cd35 100644
--- a/src/components/ui/upload-image/src/index.vue
+++ b/src/components/ui/upload-image/src/index.vue
@@ -53,7 +53,17 @@
         </n-spin>
       </n-upload-dragger>
     </n-upload>
-    <span v-if="label" class="g-input__caption">
+    <template v-if="tooltip && label">
+      <n-tooltip placement="top">
+        <template #trigger>
+          <span class="g-input__caption-with-description">
+            {{ label }}
+          </span>
+        </template>
+        {{ tooltip }}
+      </n-tooltip>
+    </template>
+    <span v-else-if="label" class="g-input__caption">
       {{ label }}
     </span>
   </div>
@@ -61,7 +71,7 @@
 
 <script lang='ts' setup>
 import { ref, watch } from 'vue'
-import { useMessage, UploadFileInfo, NInput, NUpload, NIcon, NSpin, NUploadDragger } from 'naive-ui'
+import { useMessage, UploadFileInfo, NInput, NUpload, NIcon, NSpin, NUploadDragger, NTooltip } from 'naive-ui'
 import { UPDATE_MODEL_EVENT } from '@/utils/constants'
 import { generateId } from '@/utils/util'
 import { uploadHost, previewHost, validAllowImg } from '@/utils/upload-util'
@@ -94,6 +104,7 @@ const props = defineProps({
     type: [Boolean, String],
     default: false,
   },
+  tooltip: String,
 })
 const emits = defineEmits([UPDATE_MODEL_EVENT])
 
diff --git a/src/data/system-components.ts b/src/data/system-components.ts
index 8ccdf762..b1bcb5e3 100644
--- a/src/data/system-components.ts
+++ b/src/data/system-components.ts
@@ -48,7 +48,7 @@ export const horizontalBar: ComDataType = {
   data: [
     {
       name: 'VHoriBasicBar',
-      alias: '水平基本柱状图',
+      alias: '条形图',
       img: `${import.meta.env.VITE_APP_CDN}/com/hori-basic-bar-332-144.png`,
       thum: `${import.meta.env.VITE_APP_CDN}/com-thum/hori-basic-bar-368-208.png`,
       used: false,
@@ -63,7 +63,7 @@ export const line: ComDataType = {
   data: [
     {
       name: 'VBasicLine',
-      alias: '基本折线图',
+      alias: '折线图',
       img: `${import.meta.env.VITE_APP_CDN}/com/basic-line-332-144.png`,
       thum: `${import.meta.env.VITE_APP_CDN}/com-thum/basic-line-368-208.png`,
       used: true,
@@ -93,7 +93,7 @@ export const pie: ComDataType = {
   data: [
     {
       name: 'VBasicPie',
-      alias: '基本饼图',
+      alias: '饼图',
       img: `${import.meta.env.VITE_APP_CDN}/com/basic-pie-160-116.png`,
       thum: `${import.meta.env.VITE_APP_CDN}/com-thum/basic-pie-368-208.png`,
       used: true,
diff --git a/src/styles/checkbox.scss b/src/styles/checkbox.scss
new file mode 100644
index 00000000..39af6bb6
--- /dev/null
+++ b/src/styles/checkbox.scss
@@ -0,0 +1,7 @@
+.g-checkbox {
+  .g-checkbox-inner {
+    width: 100%;
+    height: 28px;
+    line-height: 28px;
+  }
+}
diff --git a/src/styles/field.scss b/src/styles/field.scss
index ce1629ac..94b17632 100644
--- a/src/styles/field.scss
+++ b/src/styles/field.scss
@@ -43,7 +43,6 @@
 
 .g-field-container {
   width: 196px;
-  line-height: 28px;
 
   &.--flat {
     display: flex;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b924dae3..8b12f7ee 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -3,6 +3,7 @@
 @import "./common";
 
 /* DataV UI */
+@import "./checkbox";
 @import "./button";
 @import "./cascader";
 @import "./collapse";
@@ -24,6 +25,7 @@
 @import "./select-shape";
 @import "./select";
 @import "./slider";
+@import "./switch";
 @import "./tabs";
 @import "./tooltip-popover";
 @import "./tooltip";
diff --git a/src/styles/input.scss b/src/styles/input.scss
index 01a65188..011c15e6 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -15,6 +15,16 @@
   @include utils-ellipsis();
 }
 
+.g-input__caption-with-description {
+  @extend .g-input__caption;
+
+  display: inline-block;
+  max-width: 100%;
+  width: auto;
+  cursor: help;
+  text-decoration: underline dotted;
+}
+
 .new-input {
   height: 24px;
   line-height: 24px;
diff --git a/src/styles/radio-group.scss b/src/styles/radio-group.scss
index d5e67629..b7a1bd13 100644
--- a/src/styles/radio-group.scss
+++ b/src/styles/radio-group.scss
@@ -1,3 +1,10 @@
+.g-radio-group {
+  .g-radio-group-inner {
+    height: 28px;
+    line-height: 28px;
+  }
+}
+
 .n-radio-group {
   .n-radio-button {
     padding: 0 8px;
diff --git a/src/styles/switch.scss b/src/styles/switch.scss
new file mode 100644
index 00000000..9fd6d7de
--- /dev/null
+++ b/src/styles/switch.scss
@@ -0,0 +1,7 @@
+.g-switch {
+  .g-switch-inner {
+    width: 100%;
+    height: 28px;
+    line-height: 28px;
+  }
+}
diff --git a/src/styles/themes/naive-ui-theme-overrides.ts b/src/styles/themes/naive-ui-theme-overrides.ts
index dd2c020c..8e97354f 100644
--- a/src/styles/themes/naive-ui-theme-overrides.ts
+++ b/src/styles/themes/naive-ui-theme-overrides.ts
@@ -175,7 +175,7 @@ const themeOverrides: GlobalThemeOverrides = {
   },
   Radio: {
     fontSizeSmall: '12px',
-    buttonHeightSmall: '24px',
+    buttonHeightSmall: '28px',
     buttonTextColor: vars2.guiFontColor,
     buttonTextColorActive: '#fff',
     buttonColor: vars2.darkColor,

From 6d5baf8a69d6cf9a3460e0a88ae7224f39567b59 Mon Sep 17 00:00:00 2001
From: pengxiaotian <673923162@qq.com>
Date: Sun, 29 Jan 2023 18:05:12 +0800
Subject: [PATCH 03/10] =?UTF-8?q?feat(dev):=20=E5=BC=80=E5=8F=91=20color-m?=
 =?UTF-8?q?apping=20ui=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 datav-cli-ui/components/preview-prop.vue      |   2 +-
 datav-cli-ui/ui-components/index.ts           |   1 +
 src/components/ui/checkbox/src/index.vue      |   2 +-
 src/components/ui/color-mapping/index.ts      |   2 +
 src/components/ui/color-mapping/src/index.vue | 127 ++++++++++++++++++
 src/components/ui/color-picker/src/index.vue  |   2 +-
 src/components/ui/index.ts                    |   1 +
 src/components/ui/input-number/src/index.vue  |   2 +-
 src/components/ui/input/src/index.vue         |   4 +-
 src/components/ui/slider-range/src/index.vue  |   2 +-
 src/components/ui/slider/src/index.vue        |   2 +-
 src/components/ui/switch/src/index.vue        |   2 +-
 .../ui/tooltip-popover/src/index.vue          |   2 +-
 src/styles/color-mapping.scss                 |  13 ++
 14 files changed, 154 insertions(+), 10 deletions(-)
 create mode 100644 src/components/ui/color-mapping/index.ts
 create mode 100644 src/components/ui/color-mapping/src/index.vue
 create mode 100644 src/styles/color-mapping.scss

diff --git a/datav-cli-ui/components/preview-prop.vue b/datav-cli-ui/components/preview-prop.vue
index 721431a9..4e810c7c 100644
--- a/datav-cli-ui/components/preview-prop.vue
+++ b/datav-cli-ui/components/preview-prop.vue
@@ -115,7 +115,7 @@
 </template>
 
 <script lang='ts' setup>
-import { PropType } from 'vue'
+import type { PropType } from 'vue'
 import { PropDataType, PropDto } from '~~/domains/prop-data'
 import { GField, GFieldCollapse } from '~~/ui-components'
 
diff --git a/datav-cli-ui/ui-components/index.ts b/datav-cli-ui/ui-components/index.ts
index a41ceebd..f6db0577 100644
--- a/datav-cli-ui/ui-components/index.ts
+++ b/datav-cli-ui/ui-components/index.ts
@@ -17,4 +17,5 @@ export { default as GTooltipPopover } from '@/components/ui/tooltip-popover'
 export { default as GUploadImage } from '@/components/ui/upload-image'
 export { default as GCheckbox } from '@/components/ui/checkbox'
 export { default as GRadioGroup } from '@/components/ui/radio-group'
+export { default as GColorMapping } from '@/components/ui/color-mapping'
 // -- prepend register placeholder --
diff --git a/src/components/ui/checkbox/src/index.vue b/src/components/ui/checkbox/src/index.vue
index 7b23a7c3..7053cc91 100644
--- a/src/components/ui/checkbox/src/index.vue
+++ b/src/components/ui/checkbox/src/index.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script lang='ts' setup>
-import { PropType } from 'vue'
+import type { PropType } from 'vue'
 import { NCheckbox, NTooltip } from 'naive-ui'
 import { UPDATE_MODEL_EVENT } from '@/utils/constants'
 
diff --git a/src/components/ui/color-mapping/index.ts b/src/components/ui/color-mapping/index.ts
new file mode 100644
index 00000000..f4f25a91
--- /dev/null
+++ b/src/components/ui/color-mapping/index.ts
@@ -0,0 +1,2 @@
+import ColorMapping from './src/index.vue'
+export default ColorMapping
diff --git a/src/components/ui/color-mapping/src/index.vue b/src/components/ui/color-mapping/src/index.vue
new file mode 100644
index 00000000..287cd12a
--- /dev/null
+++ b/src/components/ui/color-mapping/src/index.vue
@@ -0,0 +1,127 @@
+<template>
+  <div
+    class="datav-gui g-color-mapping"
+    :class="[
+      {
+        '--inline': !!inline,
+        '--single': inline === 'inline-single',
+      }
+    ]"
+  >
+    <div class="g-color-mapping-fixed">
+      <n-input
+        :value="fillDto.fixed.value"
+        :size="size"
+        @update:value="handleFixedColor"
+      />
+      <n-color-picker
+        :value="fillDto.fixed.value"
+        :size="size"
+        show-alpha
+        :style="{
+          width: 'var(--n-height)',
+          flex: `0 0 var(--n-height)`
+        }"
+        @update:value="handleFixedColor"
+      />
+    </div>
+    <div class="g-color-mapping-scale">
+      <div class="g-color-mapping-scale-selection">
+        <div>{{ fillDto.scale.scheme }}</div>
+        <n-button text size="small">
+          <n-icon :component="IconArrowRight" />
+        </n-button>
+      </div>
+      <div class="g-color-mapping-scale-config">
+        <n-collapse-transition :show="showPanel">
+          感知度，方法论，组合拳，引爆点，点线面，精细化，差异化，平台化，结构化，影响力，耦合性，便捷性，一致性，端到端，短平快，护城河，体验感，颗粒度
+        </n-collapse-transition>
+      </div>
+    </div>
+    <template v-if="tooltip && label">
+      <n-tooltip placement="top">
+        <template #trigger>
+          <span class="g-input__caption-with-description">
+            {{ label }}
+          </span>
+        </template>
+        {{ tooltip }}
+      </n-tooltip>
+    </template>
+    <span v-else-if="label" class="g-input__caption">
+      {{ label }}
+    </span>
+  </div>
+</template>
+
+<script lang='ts' setup>
+import { ref } from 'vue'
+import type { PropType } from 'vue'
+import { NInput, NColorPicker, NTooltip, NButton, NIcon, NCollapseTransition } from 'naive-ui'
+import { IconArrowRight } from '@/icons'
+import { UPDATE_MODEL_EVENT } from '@/utils/constants'
+
+defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: String as PropType<'small' | 'medium' | 'large'>,
+    default: 'small',
+  },
+  inline: {
+    type: [Boolean, String],
+    default: false,
+  },
+  tooltip: String,
+})
+const emits = defineEmits([UPDATE_MODEL_EVENT])
+
+const showPanel = ref(false)
+const fillDto = ref({
+  mapping: true,
+  fixed: {
+    type: 'flat',
+    value: '#1c81ff',
+  },
+  scale: {
+    type: 'ordinal',
+    custom: false,
+    scheme: 'cat-7',
+    abnormal: 'transparent',
+    excepted: 'yellow',
+    pin: [
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+    ],
+    range: [
+      '#32FFA1',
+      '#50BA58',
+      '#00CEFF',
+      '#E7E342',
+      '#FF6A00',
+      '#8C57E4',
+      '#1C81FF',
+    ],
+    domain: [
+      '',
+      '',
+      '',
+      '',
+      '',
+      '',
+      '',
+    ],
+  },
+})
+
+const handleFixedColor = (value: string | number) => {
+  emits(UPDATE_MODEL_EVENT, value)
+}
+</script>
diff --git a/src/components/ui/color-picker/src/index.vue b/src/components/ui/color-picker/src/index.vue
index f5ccfab7..74212c45 100644
--- a/src/components/ui/color-picker/src/index.vue
+++ b/src/components/ui/color-picker/src/index.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script lang='ts' setup>
-import { PropType } from 'vue'
+import type { PropType } from 'vue'
 import { NInput, NColorPicker } from 'naive-ui'
 import { UPDATE_MODEL_EVENT } from '@/utils/constants'
 
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index 2cb133d3..26744e74 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -34,6 +34,7 @@ const install = (app: App): void => {
   app.component('GUploadImage', defineAsyncComponent(() => import('./upload-image')))
   app.component('GCheckbox', defineAsyncComponent(() => import('./checkbox')))
   app.component('GRadioGroup', defineAsyncComponent(() => import('./radio-group')))
+  app.component('GColorMapping', defineAsyncComponent(() => import('./color-mapping')))
   // -- prepend async register placeholder --
 
   // async registry with loading
diff --git a/src/components/ui/input-number/src/index.vue b/src/components/ui/input-number/src/index.vue
index 724f1b09..23a7088f 100644
--- a/src/components/ui/input-number/src/index.vue
+++ b/src/components/ui/input-number/src/index.vue
@@ -43,7 +43,7 @@
 </template>
 
 <script lang='ts' setup>
-import { PropType } from 'vue'
+import type { PropType } from 'vue'
 import { NConfigProvider, NInputNumber, NTooltip } from 'naive-ui'
 import type { Size } from 'naive-ui/es/input-number/src/interface'
 import { UPDATE_MODEL_EVENT } from '@/utils/constants'
diff --git a/src/components/ui/input/src/index.vue b/src/components/ui/input/src/index.vue
index 712952a5..6d3df245 100644
--- a/src/components/ui/input/src/index.vue
+++ b/src/components/ui/input/src/index.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script lang='ts' setup>
-import { PropType } from 'vue'
+import type { PropType } from 'vue'
 import { NInput, NTooltip } from 'naive-ui'
 import type { Size } from 'naive-ui/es/input/src/interface'
 import { UPDATE_MODEL_EVENT } from '@/utils/constants'
@@ -57,7 +57,7 @@ defineProps({
 })
 const emits = defineEmits([UPDATE_MODEL_EVENT])
 
-const handleInput = (value: string | number) => {
+const handleInput = (value: string) => {
   emits(UPDATE_MODEL_EVENT, value)
 }
 </script>
diff --git a/src/components/ui/slider-range/src/index.vue b/src/components/ui/slider-range/src/index.vue
index ab97f463..535ab817 100644
--- a/src/components/ui/slider-range/src/index.vue
+++ b/src/components/ui/slider-range/src/index.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script lang='ts' setup>
-import { PropType } from 'vue'
+import type { PropType } from 'vue'
 import { NConfigProvider, NSlider, NTooltip } from 'naive-ui'
 import { UPDATE_MODEL_EVENT } from '@/utils/constants'
 
diff --git a/src/components/ui/slider/src/index.vue b/src/components/ui/slider/src/index.vue
index 9e610ea9..154d7185 100644
--- a/src/components/ui/slider/src/index.vue
+++ b/src/components/ui/slider/src/index.vue
@@ -48,7 +48,7 @@
 </template>
 
 <script lang='ts' setup>
-import { PropType } from 'vue'
+import type { PropType } from 'vue'
 import { NConfigProvider, NSlider, NInputNumber, NTooltip } from 'naive-ui'
 import type { Size } from 'naive-ui/es/input-number/src/interface'
 import { UPDATE_MODEL_EVENT } from '@/utils/constants'
diff --git a/src/components/ui/switch/src/index.vue b/src/components/ui/switch/src/index.vue
index 3a665512..28f8ca01 100644
--- a/src/components/ui/switch/src/index.vue
+++ b/src/components/ui/switch/src/index.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script lang='ts' setup>
-import { PropType } from 'vue'
+import type { PropType } from 'vue'
 import { NSwitch, NTooltip } from 'naive-ui'
 import { UPDATE_MODEL_EVENT } from '@/utils/constants'
 
diff --git a/src/components/ui/tooltip-popover/src/index.vue b/src/components/ui/tooltip-popover/src/index.vue
index f98c90ca..3e6e446b 100644
--- a/src/components/ui/tooltip-popover/src/index.vue
+++ b/src/components/ui/tooltip-popover/src/index.vue
@@ -27,7 +27,7 @@
   </n-config-provider>
 </template>
 <script lang='ts' setup>
-import { PropType } from 'vue'
+import type { PropType } from 'vue'
 import { NConfigProvider, NPopover } from 'naive-ui'
 import type { PopoverTrigger } from 'naive-ui/es/popover/src/interface'
 
diff --git a/src/styles/color-mapping.scss b/src/styles/color-mapping.scss
new file mode 100644
index 00000000..df8ac1f6
--- /dev/null
+++ b/src/styles/color-mapping.scss
@@ -0,0 +1,13 @@
+.g-color-mapping {
+  width: 100%;
+}
+
+.g-color-mapping-fixed {
+  display: flex;
+  justify-content: space-between;
+}
+
+.g-color-mapping-scale-selection {
+  display: flex;
+  justify-content: space-between;
+}

From 182cb3aac93374e7b1902a0a57b8eabbced57cc0 Mon Sep 17 00:00:00 2001
From: pengxiaotian <673923162@qq.com>
Date: Sun, 29 Jan 2023 21:28:30 +0800
Subject: [PATCH 04/10] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20visual=20col?=
 =?UTF-8?q?ors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/partials/prop-component-tpl.hbs | 22 +++---
 datav-cli-ui/components/config-form-item.vue  | 10 +--
 datav-cli-ui/components/config-form.vue       |  2 +-
 datav-cli-ui/components/preview-prop-item.vue | 14 ++--
 src/components/pie/basic-pie/src/basic-pie.ts | 77 +++++++++++++++----
 src/data/colors.ts                            | 36 ++++++---
 6 files changed, 114 insertions(+), 47 deletions(-)

diff --git a/datav-cli-ui/assets/templates/partials/prop-component-tpl.hbs b/datav-cli-ui/assets/templates/partials/prop-component-tpl.hbs
index e21e4bcd..f4389b9e 100644
--- a/datav-cli-ui/assets/templates/partials/prop-component-tpl.hbs
+++ b/datav-cli-ui/assets/templates/partials/prop-component-tpl.hbs
@@ -154,13 +154,12 @@
   tooltip="{{{config.tip}}}"
   {{/if}}
 />
-{{else if (eq config.component componentTypes.select)}}
-<g-select
+{{else if (eq config.component componentTypes.uploadImage)}}
+<g-upload-image
   {{#if (and judgeEnum config.whichEnum.field)}}
   v-if="{{getSlotPath path virtualPath}}.{{config.whichEnum.field}} === '{{config.whichEnum.value}}'"
   {{/if}}
   v-model="{{ getPath path virtualPath }}"
-  :data="pairData{{config.id}}"
   {{#if (getInlineMode config.displayMode)}}
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
@@ -169,12 +168,13 @@
   tooltip="{{{config.tip}}}"
   {{/if}}
 />
-{{else if (eq config.component componentTypes.uploadImage)}}
-<g-upload-image
+{{else if (eq config.component componentTypes.selectImage)}}
+<g-select-image
   {{#if (and judgeEnum config.whichEnum.field)}}
   v-if="{{getSlotPath path virtualPath}}.{{config.whichEnum.field}} === '{{config.whichEnum.value}}'"
   {{/if}}
   v-model="{{ getPath path virtualPath }}"
+  :images="[]"
   {{#if (getInlineMode config.displayMode)}}
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
@@ -183,13 +183,13 @@
   tooltip="{{{config.tip}}}"
   {{/if}}
 />
-{{else if (eq config.component componentTypes.selectImage)}}
-<g-select-image
+{{else if (eq config.component componentTypes.echartIcon)}}
+<g-select-shape
   {{#if (and judgeEnum config.whichEnum.field)}}
   v-if="{{getSlotPath path virtualPath}}.{{config.whichEnum.field}} === '{{config.whichEnum.value}}'"
   {{/if}}
   v-model="{{ getPath path virtualPath }}"
-  :images="[]"
+  :shapes="{{config.component}}s"
   {{#if (getInlineMode config.displayMode)}}
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
@@ -214,13 +214,13 @@
   tooltip="{{{config.tip}}}"
   {{/if}}
 />
-{{else if (eq config.component componentTypes.echartIcon)}}
-<g-select-shape
+{{else if (eq config.component componentTypes.select)}}
+<g-select
   {{#if (and judgeEnum config.whichEnum.field)}}
   v-if="{{getSlotPath path virtualPath}}.{{config.whichEnum.field}} === '{{config.whichEnum.value}}'"
   {{/if}}
   v-model="{{ getPath path virtualPath }}"
-  :shapes="{{config.component}}s"
+  :data="pairData{{config.id}}"
   {{#if (getInlineMode config.displayMode)}}
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
diff --git a/datav-cli-ui/components/config-form-item.vue b/datav-cli-ui/components/config-form-item.vue
index 1671ca44..b89aa77e 100644
--- a/datav-cli-ui/components/config-form-item.vue
+++ b/datav-cli-ui/components/config-form-item.vue
@@ -52,17 +52,17 @@
     v-model="strValue"
     :images="[]"
   />
+  <g-select-shape
+    v-else-if="componentType === componentTypes.echartIcon"
+    v-model="strValue"
+    :shapes="selectOptions"
+  />
   <g-select-suggest
     v-else-if="componentType === componentTypes.selectSuggest"
     v-model="strValue"
     :data="selectOptions"
     :filters="enums"
   />
-  <g-select-shape
-    v-else-if="componentType === componentTypes.echartIcon"
-    v-model="strValue"
-    :shapes="selectOptions"
-  />
   <g-select
     v-else-if="componentType === componentTypes.select"
     v-model="strValue"
diff --git a/datav-cli-ui/components/config-form.vue b/datav-cli-ui/components/config-form.vue
index fc94bb07..ee51a440 100644
--- a/datav-cli-ui/components/config-form.vue
+++ b/datav-cli-ui/components/config-form.vue
@@ -22,7 +22,7 @@
         <n-form-item label="显示模式">
           <n-select v-model:value="item.config.displayMode" :options="displayModes" />
         </n-form-item>
-        <n-form-item>
+        <n-form-item v-if="item.config.type === PropDataType.array">
           <template #label>
             <n-tooltip>
               <template #trigger>
diff --git a/datav-cli-ui/components/preview-prop-item.vue b/datav-cli-ui/components/preview-prop-item.vue
index d8d4d8f5..1fe3e5a5 100644
--- a/datav-cli-ui/components/preview-prop-item.vue
+++ b/datav-cli-ui/components/preview-prop-item.vue
@@ -91,19 +91,19 @@
     :label="mode ? label : ''"
     :tooltip="tooltip"
   />
-  <g-select-suggest
-    v-else-if="componentType === componentTypes.selectSuggest"
+  <g-select-shape
+    v-else-if="componentType === componentTypes.echartIcon"
     v-model="strValue"
-    :data="selectOptions"
-    :filters="enums"
+    :shapes="selectOptions"
     :inline="mode"
     :label="mode ? label : ''"
     :tooltip="tooltip"
   />
-  <g-select-shape
-    v-else-if="componentType === componentTypes.echartIcon"
+  <g-select-suggest
+    v-else-if="componentType === componentTypes.selectSuggest"
     v-model="strValue"
-    :shapes="selectOptions"
+    :data="selectOptions"
+    :filters="enums"
     :inline="mode"
     :label="mode ? label : ''"
     :tooltip="tooltip"
diff --git a/src/components/pie/basic-pie/src/basic-pie.ts b/src/components/pie/basic-pie/src/basic-pie.ts
index 6d8f753f..ad76c1c8 100644
--- a/src/components/pie/basic-pie/src/basic-pie.ts
+++ b/src/components/pie/basic-pie/src/basic-pie.ts
@@ -12,22 +12,71 @@ import { getStaticData } from '@/api/data'
  */
 export class BasicPie extends DatavComponent {
   config = {
-    name: '',
-    isUse: false,
-    value: 0,
-    fontSize: 12,
-    textStyle: {
-      color: '',
-      value: 0,
-      isUse: false,
-      fontSize: 12,
+    margin: {
+      show: false,
+      top: 40,
+      bottom: 30,
+      left: 30,
+      right: 20,
     },
-    border: {
-      size: 1,
-      color: '#fff',
-      type: 'solid',
+    radius: {
+      inner: 75,
+      outer: 80,
+    },
+    fill: {
+      mapping: true,
+      fixed: {
+        type: 'flat',
+        value: '#1c81ff',
+      },
+      scale: {
+        type: 'ordinal',
+        scheme: 'cat-7',
+        range: [
+          '#32FFA1',
+          '#50BA58',
+          '#00CEFF',
+          '#E7E342',
+          '#FF6A00',
+          '#8C57E4',
+          '#1C81FF',
+        ],
+        pin: [
+          false,
+          false,
+          false,
+          false,
+          false,
+          false,
+          false,
+        ],
+        custom: false,
+        domain: [
+          '',
+          '',
+          '',
+          '',
+          '',
+          '',
+          '',
+        ],
+        abnormal: 'transparent',
+      },
+    },
+    line: {
+      lineStyle: 'solid',
+      lineWidth: 1,
+      lineColor: 'rgba(255, 255, 255, 0.25)',
+      dashedLength: 3,
+      dashedSpace: 8,
+      dottedLength: 2,
+      dottedSpace: 4,
+    },
+    isCombine: {
+      show: true,
+      piecesCount: 20,
+      defineType: '其他',
     },
-    ran: [10, 20],
   }
 
   apis: Partial<ApiConfigMap>
diff --git a/src/data/colors.ts b/src/data/colors.ts
index 67893868..282c09aa 100644
--- a/src/data/colors.ts
+++ b/src/data/colors.ts
@@ -1,9 +1,27 @@
-export const presetColors = [
-  '#00baff',
-  '#3de7c9',
-  '#94e08a',
-  '#ffffff',
-  '#fbf320',
-  '#ff69fa',
-  '#ff05ca',
-]
+export const presetCatColors = {
+  'cat-1': ['#12939A', '#DDB27C', '#88572C', '#FF991F', '#F15C17', '#223F9A', '#46AEFF', '#FFFB76', '#79954F', '#978B63', '#FF9C6F', '#98B1FF'],
+  'cat-2': ['#8CD4C6', '#FEFFB3', '#BFBADB', '#FA8073', '#80B1D2', '#FCB460', '#B5DD6B', '#FBCEE2', '#D9D9D9', '#BF7FBC', '#CCECC7', '#F6E44B'],
+  'cat-3': ['#A2CFE6', '#1F77B6', '#B3DF8A', '#2DA32B', '#FC9A99', '#F7393B', '#FDBE6F', '#FE7F02', '#CBB1D8', '#6A3D9C', '#FDFF99', '#B1592B'],
+  'cat-4': ['#8EDBAD', '#12D862', '#6AA7FF', '#0058D7', '#ED95FF', '#B72AD4', '#FFDD97', '#FEAD02', '#63E5B6', '#3D9C7A', '#6261FF', '#302EEF'],
+  'cat-5': ['#B3E2CD', '#66C2A5', '#FDCDAC', '#D88C6F', '#CBD5E8', '#8DA0CB', '#F4CAE4', '#C391B0', '#E6F5C9', '#A7CA6F', '#FFF2AE', '#E5D177'],
+  'cat-6': ['#D15B5B', '#41994A', '#5F5DA5', '#BC6C89', '#D77E55', '#468085', '#035C9F', '#8862C7', '#346E8C', '#D2B144', '#A66142', '#485B98'],
+  'cat-7': ['#32FFA1', '#50BA58', '#00CEFF', '#E7E342', '#FF6A00', '#8C57E4', '#1C81FF', '#FFFB76', '#79954F', '#978B63', '#FF9C6F', '#98B1FF'],
+}
+
+export const presetSeqColors = {
+  'seq-1': ['#ffffcc','#f8fecc','#f1fecc','#ebfdcd','#e4fccd','#ddfccd','#d6fbcd','#cffacd','#c9face','#c2f9ce','#bbf8ce','#b4f8ce','#adf7ce','#a7f6cf','#a0f6cf','#99f5cf','#92f5cf','#8cf4d0','#85f3d0','#7ef3d0','#77f2d0','#70f1d0','#6af1d1','#63f0d1','#5cefd1','#55efd1','#4eeed1','#48edd2','#41edd2','#3aecd2'],
+  'seq-2': ['#34fff5','#33f9f4','#33f2f4','#32ecf3','#31e5f2','#31dff1','#30d8f1','#2fd2f0','#2ecbef','#2ec5ee','#2dbeee','#2cb8ed','#2cb1ec','#2babec','#2aa4eb','#2a9eea','#2997e9','#2891e9','#288ae8','#2784e7','#267de7','#2677e6','#2570e5','#246ae4','#2363e4','#235de3','#2256e2','#2150e1','#2149e1','#2043e0'],
+  'seq-3': ['#ffdc84','#ffd782','#ffd281','#ffcd7f','#ffc87e','#ffc37c','#ffbe7a','#ffb979','#feb477','#feaf76','#feaa74','#fea573','#fea071','#fe9b6f','#fe966e','#fe906c','#fe8b6b','#fe8669','#fe8167','#fe7c66','#fe7764','#fe7263','#fd6d61','#fd6860','#fd635e','#fd5e5c','#fd595b','#fd5459','#fd4f58','#fd4a56'],
+  'seq-4': ['#6dd400','#69d508','#65d610','#62d818','#5ed920','#5ada28','#56db30','#53dc38','#4fde41','#4bdf49','#47e051','#44e159','#40e261','#3ce469','#38e571','#35e679','#31e781','#2de989','#29ea91','#26eb99','#22eca1','#1eeda9','#1aefb2','#17f0ba','#13f1c2','#0ff2ca','#0bf3d2','#08f5da','#04f6e2','#00f7ea'],
+  'seq-5': ['#d74aff','#d34bff','#d04cff','#cc4cff','#c94dff','#c54eff','#c24fff','#be50ff','#bb51ff','#b751ff','#b352ff','#b053ff','#ac54ff','#a955ff','#a556ff','#a256ff','#9e57ff','#9b58ff','#9759ff','#945aff','#905bff','#8c5bff','#895cff','#855dff','#825eff','#7e5fff','#7b60ff','#7760ff','#7461ff','#7062ff'],
+  'seq-6': ['#44d7b6','#4ad4b1','#51d0ad','#57cda8','#5ec9a3','#64c69f','#6bc29a','#71bf95','#78bb90','#7eb88c','#84b587','#8bb182','#91ae7e','#98aa79','#9ea774','#a5a370','#aba06b','#b29c66','#b89962','#bf955d','#c59258','#cb8f54','#d28b4f','#d8884a','#df8445','#e58141','#ec7d3c','#f27a37','#f97633','#ff732e'],
+}
+
+export const presetDivColors = {
+  'div-1': ['#ff5738','#fc6246','#f86d53','#f57961','#f2846f','#ee8f7d','#eb9a8a','#e8a698','#e5b1a6','#e1bcb4','#dec7c1','#dbd3cf','#d7dedd','#d4e9ea','#d1f4f8','#c8f6ff','#baefff','#abe7ff','#9de0ff','#8fd8ff','#80d1ff','#72caff','#64c2ff','#56bbff','#47b3ff','#39acff','#2ba4ff','#1d9dff','#0e95ff','#008eff'],
+  'div-2': ['#7845ff','#8150fe','#8b5bfd','#9465fd','#9d70fc','#a77bfb','#b086fa','#b990f9','#c29bf8','#cca6f8','#d5b1f7','#debbf6','#e8c6f5','#f1d1f4','#fadcf3','#ffdbee','#ffd0e5','#ffc5db','#ffb9d2','#ffaec8','#ffa3bf','#ff97b5','#ff8cac','#ff81a2','#ff7699','#ff6a8f','#ff5f86','#ff547c','#ff4873','#ff3d69'],
+  'div-3': ['#ff683d','#ff704a','#ff7956','#ff8163','#ff896f','#ff927c','#ff9a88','#ffa295','#ffaba1','#ffb3ae','#ffbbbb','#ffc4c7','#ffccd4','#ffd4e0','#ffdded','#f6dff1','#e5dcec','#d3d9e7','#c1d5e2','#b0d2dd','#9eced8','#8dcbd3','#7bc8ce','#6ac4c9','#58c1c4','#46bec0','#35babb','#23b7b6','#12b3b1','#00b0ac'],
+  'div-4': ['#5b0bff','#661afe','#7229fd','#7d37fd','#8846fc','#9455fb','#9f64fa','#aa72f9','#b581f8','#c190f8','#cc9ff7','#d7adf6','#e3bcf5','#eecbf4','#f9daf3','#ffdbf2','#ffd0f1','#ffc5f0','#ffb9ef','#ffaeed','#ffa3ec','#ff97eb','#ff8cea','#ff81e8','#ff76e7','#ff6ae6','#ff5fe5','#ff54e3','#ff48e2','#ff3de1'],
+  'div-5': ['#ff704c','#ff7858','#ff8063','#ff876f','#ff8f7a','#ff9786','#ff9f91','#ffa79d','#ffaea8','#ffb6b4','#ffbebf','#ffc6cb','#ffced6','#ffd5e2','#ffdded','#ffdfeb','#ffdada','#ffd6c9','#ffd2b8','#ffcda8','#ffc997','#ffc486','#ffc075','#ffbb65','#ffb754','#ffb343','#ffae32','#ffaa22','#ffa511','#ffa100'],
+  'div-6': ['#4db156','#59b461','#66b86c','#72bb76','#7ebe81','#8ac28c','#97c597','#a3c8a2','#afcbad','#bbcfb7','#c8d2c2','#d4d5cd','#e0d9d8','#eddce3','#f9dfee','#f8def3','#ebd8f4','#ded3f5','#d0cdf6','#c3c7f7','#b5c2f8','#a8bcf8','#9bb6f9','#8db0fa','#80abfb','#73a5fc','#659ffd','#5899fd','#4a94fe','#3d8eff'],
+}

From 4246c503a04b6baaac8c4c60743148f61f038c45 Mon Sep 17 00:00:00 2001
From: pengxiaotian <673923162@qq.com>
Date: Mon, 6 Feb 2023 10:02:12 +0800
Subject: [PATCH 05/10] =?UTF-8?q?feat:=20=E5=BC=80=E6=9C=BA=E5=BF=AB?=
 =?UTF-8?q?=E9=80=9F=E5=A4=87=E4=BB=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/data/colors.ts       | 14 +++++++-------
 src/icons/connect.vue    | 12 ++++++++++++
 src/icons/disconnect.vue | 12 ++++++++++++
 src/icons/index.ts       |  2 ++
 src/styles/index.scss    |  3 ++-
 5 files changed, 35 insertions(+), 8 deletions(-)
 create mode 100644 src/icons/connect.vue
 create mode 100644 src/icons/disconnect.vue

diff --git a/src/data/colors.ts b/src/data/colors.ts
index 282c09aa..7db9747d 100644
--- a/src/data/colors.ts
+++ b/src/data/colors.ts
@@ -1,11 +1,11 @@
 export const presetCatColors = {
-  'cat-1': ['#12939A', '#DDB27C', '#88572C', '#FF991F', '#F15C17', '#223F9A', '#46AEFF', '#FFFB76', '#79954F', '#978B63', '#FF9C6F', '#98B1FF'],
-  'cat-2': ['#8CD4C6', '#FEFFB3', '#BFBADB', '#FA8073', '#80B1D2', '#FCB460', '#B5DD6B', '#FBCEE2', '#D9D9D9', '#BF7FBC', '#CCECC7', '#F6E44B'],
-  'cat-3': ['#A2CFE6', '#1F77B6', '#B3DF8A', '#2DA32B', '#FC9A99', '#F7393B', '#FDBE6F', '#FE7F02', '#CBB1D8', '#6A3D9C', '#FDFF99', '#B1592B'],
-  'cat-4': ['#8EDBAD', '#12D862', '#6AA7FF', '#0058D7', '#ED95FF', '#B72AD4', '#FFDD97', '#FEAD02', '#63E5B6', '#3D9C7A', '#6261FF', '#302EEF'],
-  'cat-5': ['#B3E2CD', '#66C2A5', '#FDCDAC', '#D88C6F', '#CBD5E8', '#8DA0CB', '#F4CAE4', '#C391B0', '#E6F5C9', '#A7CA6F', '#FFF2AE', '#E5D177'],
-  'cat-6': ['#D15B5B', '#41994A', '#5F5DA5', '#BC6C89', '#D77E55', '#468085', '#035C9F', '#8862C7', '#346E8C', '#D2B144', '#A66142', '#485B98'],
-  'cat-7': ['#32FFA1', '#50BA58', '#00CEFF', '#E7E342', '#FF6A00', '#8C57E4', '#1C81FF', '#FFFB76', '#79954F', '#978B63', '#FF9C6F', '#98B1FF'],
+  'cat-1': ['#12939a', '#ddb27c', '#88572c', '#ff991f', '#f15c17', '#223f9a', '#46aeff', '#fffb76', '#79954f', '#978b63', '#ff9c6f', '#98b1ff'],
+  'cat-2': ['#8cd4c6', '#feffb3', '#bfbadb', '#fa8073', '#80b1d2', '#fcb460', '#b5dd6b', '#fbcee2', '#d9d9d9', '#bf7fbc', '#ccecc7', '#f6e44b'],
+  'cat-3': ['#a2cfe6', '#1f77b6', '#b3df8a', '#2da32b', '#fc9a99', '#f7393b', '#fdbe6f', '#fe7f02', '#cbb1d8', '#6a3d9c', '#fdff99', '#b1592b'],
+  'cat-4': ['#8edbad', '#12d862', '#6aa7ff', '#0058d7', '#ed95ff', '#b72ad4', '#ffdd97', '#fead02', '#63e5b6', '#3d9c7a', '#6261ff', '#302eef'],
+  'cat-5': ['#b3e2cd', '#66c2a5', '#fdcdac', '#d88c6f', '#cbd5e8', '#8da0cb', '#f4cae4', '#c391b0', '#e6f5c9', '#a7ca6f', '#fff2ae', '#e5d177'],
+  'cat-6': ['#d15b5b', '#41994a', '#5f5da5', '#bc6c89', '#d77e55', '#468085', '#035c9f', '#8862c7', '#346e8c', '#d2b144', '#a66142', '#485b98'],
+  'cat-7': ['#32ffa1', '#50ba58', '#00ceff', '#e7e342', '#ff6a00', '#8c57e4', '#1c81ff', '#fffb76', '#79954f', '#978b63', '#ff9c6f', '#98b1ff'],
 }
 
 export const presetSeqColors = {
diff --git a/src/icons/connect.vue b/src/icons/connect.vue
new file mode 100644
index 00000000..f6be7664
--- /dev/null
+++ b/src/icons/connect.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg
+    t="1675072477408"
+    class="icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="8647"
+    width="64"
+    height="64"
+  ><path d="M576.6295598 359.68919933c0 4.38406204 3.60624458 7.99030663 7.99030663 7.99030663L748.95148238 367.67950596c76.08468966 0 144.32049404 60.17478708 144.24978336 144.24978336 0 84.14570696-68.16509371 144.24978336-144.24978336 144.24978336l-164.33161595 0c-4.38406204 0-7.99030663 3.60624458-7.99030663 7.99030663l0 56.28569978c0 4.38406204 3.60624458 7.99030663 7.99030663 7.99030663L748.95148238 728.44538572c119.64246738 0 216.44538572-96.80291834 216.37467504-216.37467504s-96.80291834-216.44538572-216.37467504-216.37467504l-164.33161595 0c-4.38406204 0-7.99030663 3.60624458-7.99030663 7.99030662L576.6295598 359.68919933zM58.6031319 512c0 119.64246738 96.80291834 216.44538572 216.37467505 216.37467504L439.38013357 728.44538572c4.38406204 0 7.99030663-3.60624458 7.99030663-7.99030663l0-56.14427842c0-4.38406204-3.60624458-7.99030663-7.99030663-7.99030663l-164.33161595 0c-76.08468966 0-144.32049404-60.17478708-144.24978336-144.24978336 0-84.14570696 68.16509371-144.24978336 144.24978336-144.24978336L439.38013357 367.82092732c4.38406204 0 7.99030663-3.60624458 7.99030663-7.99030663l0-56.28569978c0-4.38406204-3.60624458-7.99030663-7.99030663-7.99030663l-164.33161595 0c-119.5717567 0.07071068-216.37467504 96.87362902-216.44538572 216.44538572z" p-id="8648" /><path d="M343.85000743 541.4156421c0 4.38406204 3.60624458 7.99030663 7.99030663 7.99030662L672.08897526 549.4766594c4.38406204 0 7.99030663-3.60624458 7.99030663-7.99030662l0-56.00285707c0-4.38406204-3.60624458-7.99030663-7.99030663-7.99030663l-320.17795052 0c-4.38406204 0-7.99030663 3.60624458-7.99030663 7.99030663l-0.07071068 55.93214639z" p-id="8649" /></svg>
+</template>
diff --git a/src/icons/disconnect.vue b/src/icons/disconnect.vue
new file mode 100644
index 00000000..87afb429
--- /dev/null
+++ b/src/icons/disconnect.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg
+    t="1675072509781"
+    class="icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="8802"
+    width="64"
+    height="64"
+  ><path d="M58.6031319 512c0 119.64246738 96.80291834 216.44538572 216.37467505 216.37467504l137.03729419 0 0-72.12489168-137.03729419 0c-76.08468966 0-144.32049404-60.17478708-144.24978337-144.24978336 0-84.14570696 68.16509371-144.24978336 144.24978337-144.24978336l137.03729419 0 0-72.26631304-137.03729419 0c-119.50104602 0.14142136-216.30396436 96.9443397-216.37467505 216.5160964zM748.95148238 367.67950596c76.08468966 0 144.32049404 60.17478708 144.24978336 144.24978336 0 84.14570696-68.16509371 144.24978336-144.24978336 144.24978336l-137.0372942 0 0 72.26631304 137.0372942 0c119.64246738 0 216.44538572-96.80291834 216.37467504-216.37467504s-96.80291834-216.44538572-216.37467504-216.37467504l-137.0372942 0 0 72.12489168 137.0372942-0.14142136zM476.00826484 903.94928881c0 4.38406204 3.60624458 7.99030663 7.99030663 7.99030663L540.00142853 911.93959544c4.38406204 0 7.99030663-3.60624458 7.99030663-7.99030663l0-784.03999898c0-4.38406204-3.60624458-7.99030663-7.99030663-7.99030663l-56.00285706 0c-4.38406204 0-7.99030663 3.60624458-7.99030663 7.99030663L476.00826484 903.94928881z" p-id="8803" /></svg>
+</template>
diff --git a/src/icons/index.ts b/src/icons/index.ts
index 73fb9065..1ee9be41 100644
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -104,4 +104,6 @@ export { default as IconAlignHorizontal } from './align-horizontal.vue'
 export { default as IconAlignVertical } from './align-vertical.vue'
 export { default as IconShapePin } from './shape-pin.vue'
 export { default as IconShapeAirplane } from './shape-airplane.vue'
+export { default as IconConnect } from './connect.vue'
+export { default as IconDisconnect } from './disconnect.vue'
 // -- prepend export placeholder --
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 8b12f7ee..5fef8c06 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -3,10 +3,11 @@
 @import "./common";
 
 /* DataV UI */
-@import "./checkbox";
 @import "./button";
 @import "./cascader";
+@import "./checkbox";
 @import "./collapse";
+@import "./color-mapping";
 @import "./color-picker";
 @import "./dialog";
 @import "./drawer";

From eecdc2575d7703317d1efd32e5ca8aa037c7671a Mon Sep 17 00:00:00 2001
From: pengxiaotian <673923162@qq.com>
Date: Tue, 16 May 2023 15:12:17 +0800
Subject: [PATCH 06/10] =?UTF-8?q?chore:=20=E8=B0=83=E6=95=B4=E4=B8=80?=
 =?UTF-8?q?=E4=B8=8B=E7=8E=AF=E5=A2=83=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 datav-cli-ui/types/shims-vue.d.ts             |   6 +-
 package.json                                  |   1 -
 plop-templates/datav/index-ts.hbs             |   1 -
 pnpm-lock.yaml                                | 144 ------------------
 src/components/bar/basic-bar/index.ts         |   1 -
 src/components/button/full-screen/index.ts    |   1 -
 src/components/chart/word-cloud/index.ts      |   1 -
 src/components/line/basic-line/index.ts       |   1 -
 src/components/map/china2d/index.ts           |   1 -
 src/components/media/bg-box/index.ts          |   1 -
 src/components/media/border-box/index.ts      |   1 -
 src/components/media/decoration/index.ts      |   1 -
 src/components/media/main-img/index.ts        |   1 -
 src/components/other/date-picker/index.ts     |   1 -
 src/components/pie/basic-pie/index.ts         |   1 -
 src/components/table/carousel-table/index.ts  |   1 -
 src/components/table/table-bar/index.ts       |   1 -
 src/components/text/main-title/index.ts       |   1 -
 src/components/text/marquee/index.ts          |   1 -
 .../text/number-title-flop/index.ts           |   1 -
 src/components/text/paragraph/index.ts        |   1 -
 src/components/text/timer/index.ts            |   1 -
 src/styles/themes/naive-ui-theme-overrides.ts | 131 ++++++++--------
 src/styles/themes/var.scss                    |   8 +-
 src/typings/global.d.ts                       |   2 +
 src/typings/shims-vue.d.ts                    |  10 --
 src/utils/types.ts                            |   4 -
 vite.config.ts                                |   5 +-
 28 files changed, 69 insertions(+), 261 deletions(-)

diff --git a/datav-cli-ui/types/shims-vue.d.ts b/datav-cli-ui/types/shims-vue.d.ts
index 762f0fac..6a9769d4 100644
--- a/datav-cli-ui/types/shims-vue.d.ts
+++ b/datav-cli-ui/types/shims-vue.d.ts
@@ -1,7 +1,3 @@
 declare module '*.hbs' {
-  const plainText: string
-
-  export {
-    plainText,
-  }
+  export const plainText: string
 }
diff --git a/package.json b/package.json
index e1a99263..401725a0 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,6 @@
     "typescript": "^4.9.4",
     "unplugin-element-plus": "^0.4.1",
     "vite": "^3.2.5",
-    "vite-plugin-plain-text": "^1.2.1",
     "vue-tsc": "^1.0.13"
   },
   "lint-staged": {
diff --git a/plop-templates/datav/index-ts.hbs b/plop-templates/datav/index-ts.hbs
index 264c9ae4..93f5caa8 100644
--- a/plop-templates/datav/index-ts.hbs
+++ b/plop-templates/datav/index-ts.hbs
@@ -1,5 +1,4 @@
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@/utils/types'
 import { loadAsyncComponent } from '@/utils/async-component'
 import {{ pascalCase name }} from './src/index.vue'
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 88db8529..ddae91df 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -58,7 +58,6 @@ specifiers:
   typescript: ^4.9.4
   unplugin-element-plus: ^0.4.1
   vite: ^3.2.5
-  vite-plugin-plain-text: ^1.2.1
   vue: ^3.2.45
   vue-echarts: ^6.2.4
   vue-i18n: ^9.2.2
@@ -129,7 +128,6 @@ devDependencies:
   typescript: 4.9.4
   unplugin-element-plus: 0.4.1_vite@3.2.5
   vite: 3.2.5_sass@1.56.2
-  vite-plugin-plain-text: 1.2.1
   vue-tsc: 1.0.13_typescript@4.9.4
 
 packages:
@@ -1777,142 +1775,6 @@ packages:
       state-local: 1.0.7
     dev: false
 
-  /@napi-rs/magic-string-android-arm-eabi/0.3.4:
-    resolution: {integrity: sha512-sszAYxqtzzJ4FDerDNHcqL9NhqPhj8W4DNiOanXYy50mA5oojlRtaAFPiB5ZMrWDBM32v5Q30LrmxQ4eTtu2Dg==}
-    engines: {node: '>= 10'}
-    cpu: [arm]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@napi-rs/magic-string-android-arm64/0.3.4:
-    resolution: {integrity: sha512-jdQ6HuO0X5rkX4MauTcWR4HWdgjakTOmmzqXg8L26+jOHVVG1LZE+Su5qvV4bP8vMb2h+vPE+JsnwqSmWymu3Q==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@napi-rs/magic-string-darwin-arm64/0.3.4:
-    resolution: {integrity: sha512-6NmMtvURce9/oq09XBZmuIeI6lPLGtEJ2ZPO/QzL3nLZa6wygiCnO/sFACKYNg5/73ET5HMMTeuogE1JI+r2Lw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@napi-rs/magic-string-darwin-x64/0.3.4:
-    resolution: {integrity: sha512-f9LmfMiUAKDOtl0meOuLYeVb6OERrgGzrTg1Tn3R3fTAShM2kxRbfAuPE9ljuXxIFzOv/uqRNLSl/LqCJwpREA==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@napi-rs/magic-string-freebsd-x64/0.3.4:
-    resolution: {integrity: sha512-rqduQ4odiDK4QdM45xHWRTU4wtFIfpp8g8QGpz+3qqg7ivldDqbbNOrBaf6Oeu77uuEvWggnkyuChotfKgJdJQ==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@napi-rs/magic-string-linux-arm-gnueabihf/0.3.4:
-    resolution: {integrity: sha512-pVaJEdEpiPqIfq3M4+yMAATS7Z9muDcWYn8H7GFH1ygh8GwgLgKfy/n/lG2M6zp18Mwd0x7E2E/qg9GgCyUzoQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@napi-rs/magic-string-linux-arm64-gnu/0.3.4:
-    resolution: {integrity: sha512-9FwoAih/0tzEZx0BjYYIxWkSRMjonIn91RFM3q3MBs/evmThXUYXUqLNa1PPIkK1JoksswtDi48qWWLt8nGflQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@napi-rs/magic-string-linux-arm64-musl/0.3.4:
-    resolution: {integrity: sha512-wCR7R+WPOcAKmVQc1s6h6HwfwW1vL9pM8BjUY9Ljkdb8wt1LmZEmV2Sgfc1SfbRQzbyl+pKeufP6adRRQVzYDA==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@napi-rs/magic-string-linux-x64-gnu/0.3.4:
-    resolution: {integrity: sha512-sbxFDpYnt5WFbxQ1xozwOvh5A7IftqSI0WnE9O7KsQIOi0ej2dvFbfOW4tmFkvH/YP8KJELo5AhP2+kEq1DpYA==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@napi-rs/magic-string-linux-x64-musl/0.3.4:
-    resolution: {integrity: sha512-jN4h/7e2Ul8v3UK5IZu38NXLMdzVWhY4uEDlnwuUAhwRh26wBQ1/pLD97Uy/Z3dFNBQPcsv60XS9fOM1YDNT6w==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@napi-rs/magic-string-win32-arm64-msvc/0.3.4:
-    resolution: {integrity: sha512-gMUyTRHLWpzX2ntJFCbW2Gnla9Y/WUmbkZuW5SBAo/Jo8QojHn76Y4PNgnoXdzcsV9b/45RBxurYKAfFg9WTyg==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@napi-rs/magic-string-win32-ia32-msvc/0.3.4:
-    resolution: {integrity: sha512-QIMauMOvEHgL00K9np/c9CT/CRtLOz3mRTQqcZ9XGzSoAMrpxH71KSpDJrKl7h7Ro6TZ+hJ0C3T+JVuTCZNv4A==}
-    engines: {node: '>= 10'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@napi-rs/magic-string-win32-x64-msvc/0.3.4:
-    resolution: {integrity: sha512-V8FMSf828MzOI3P6/765MR7zHU6CUZqiyPhmAnwYoKFNxfv7oCviN/G6NcENeCdcYOvNgh5fYzaNLB96ndId5A==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@napi-rs/magic-string/0.3.4:
-    resolution: {integrity: sha512-DEWl/B99RQsyMT3F9bvrXuhL01/eIQp/dtNSE3G1jQ4mTGRcP4iHWxoPZ577WrbjUinrNgvRA5+08g8fkPgimQ==}
-    engines: {node: '>= 10'}
-    optionalDependencies:
-      '@napi-rs/magic-string-android-arm-eabi': 0.3.4
-      '@napi-rs/magic-string-android-arm64': 0.3.4
-      '@napi-rs/magic-string-darwin-arm64': 0.3.4
-      '@napi-rs/magic-string-darwin-x64': 0.3.4
-      '@napi-rs/magic-string-freebsd-x64': 0.3.4
-      '@napi-rs/magic-string-linux-arm-gnueabihf': 0.3.4
-      '@napi-rs/magic-string-linux-arm64-gnu': 0.3.4
-      '@napi-rs/magic-string-linux-arm64-musl': 0.3.4
-      '@napi-rs/magic-string-linux-x64-gnu': 0.3.4
-      '@napi-rs/magic-string-linux-x64-musl': 0.3.4
-      '@napi-rs/magic-string-win32-arm64-msvc': 0.3.4
-      '@napi-rs/magic-string-win32-ia32-msvc': 0.3.4
-      '@napi-rs/magic-string-win32-x64-msvc': 0.3.4
-    dev: true
-
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -7203,12 +7065,6 @@ packages:
       vue: 3.2.45
     dev: false
 
-  /vite-plugin-plain-text/1.2.1:
-    resolution: {integrity: sha512-XPMpU0fJy3v2XD+m9tn1VoyOE4z96C8N/qd5uQ7TogLyR3++gLQ9ZCnRMvNE9zR2BD0SIAd9grRRmKl/CT0ptQ==}
-    dependencies:
-      '@napi-rs/magic-string': 0.3.4
-    dev: true
-
   /vite/3.2.5_sass@1.56.2:
     resolution: {integrity: sha512-4mVEpXpSOgrssFZAOmGIr85wPHKvaDAcXqxVxVRZhljkJOMZi1ibLibzjLHzJvcok8BMguLc7g1W6W/GqZbLdQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
diff --git a/src/components/bar/basic-bar/index.ts b/src/components/bar/basic-bar/index.ts
index 642276fb..15a0b8f7 100644
--- a/src/components/bar/basic-bar/index.ts
+++ b/src/components/bar/basic-bar/index.ts
@@ -1,5 +1,4 @@
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@/utils/types'
 import { loadAsyncComponent } from '@/utils/async-component'
 import BasicBar from './src/index.vue'
 
diff --git a/src/components/button/full-screen/index.ts b/src/components/button/full-screen/index.ts
index 4e17f9d7..a9643d11 100644
--- a/src/components/button/full-screen/index.ts
+++ b/src/components/button/full-screen/index.ts
@@ -1,5 +1,4 @@
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@/utils/types'
 import { loadAsyncComponent } from '@/utils/async-component'
 import FullScreen from './src/index.vue'
 
diff --git a/src/components/chart/word-cloud/index.ts b/src/components/chart/word-cloud/index.ts
index 820ad213..d33cfbce 100644
--- a/src/components/chart/word-cloud/index.ts
+++ b/src/components/chart/word-cloud/index.ts
@@ -1,5 +1,4 @@
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@/utils/types'
 import { loadAsyncComponent } from '@/utils/async-component'
 import WordCloud from './src/index.vue'
 
diff --git a/src/components/line/basic-line/index.ts b/src/components/line/basic-line/index.ts
index 127be927..ed278d0e 100644
--- a/src/components/line/basic-line/index.ts
+++ b/src/components/line/basic-line/index.ts
@@ -1,5 +1,4 @@
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@/utils/types'
 import { loadAsyncComponent } from '@/utils/async-component'
 import BasicLine from './src/index.vue'
 
diff --git a/src/components/map/china2d/index.ts b/src/components/map/china2d/index.ts
index 59de9285..059aacef 100644
--- a/src/components/map/china2d/index.ts
+++ b/src/components/map/china2d/index.ts
@@ -1,5 +1,4 @@
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@/utils/types'
 import { loadAsyncComponent } from '@/utils/async-component'
 import China2d from './src/index.vue'
 import China2dArea from './src/china2d-area/index.vue'
diff --git a/src/components/media/bg-box/index.ts b/src/components/media/bg-box/index.ts
index 0c5fe007..177170dd 100644
--- a/src/components/media/bg-box/index.ts
+++ b/src/components/media/bg-box/index.ts
@@ -1,5 +1,4 @@
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@/utils/types'
 import { loadAsyncComponent } from '@/utils/async-component'
 import BgBox from './src/index.vue'
 
diff --git a/src/components/media/border-box/index.ts b/src/components/media/border-box/index.ts
index 0c1a34cf..6118cfd8 100644
--- a/src/components/media/border-box/index.ts
+++ b/src/components/media/border-box/index.ts
@@ -1,5 +1,4 @@
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@/utils/types'
 import { loadAsyncComponent } from '@/utils/async-component'
 import BorderBox from './src/index.vue'
 
diff --git a/src/components/media/decoration/index.ts b/src/components/media/decoration/index.ts
index fa647790..a586708d 100644
--- a/src/components/media/decoration/index.ts
+++ b/src/components/media/decoration/index.ts
@@ -1,5 +1,4 @@
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@/utils/types'
 import { loadAsyncComponent } from '@/utils/async-component'
 import Decoration from './src/index.vue'
 
diff --git a/src/components/media/main-img/index.ts b/src/components/media/main-img/index.ts
index 0896999e..f0f129ff 100644
--- a/src/components/media/main-img/index.ts
+++ b/src/components/media/main-img/index.ts
@@ -1,5 +1,4 @@
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@/utils/types'
 import { loadAsyncComponent } from '@/utils/async-component'
 import MainImg from './src/index.vue'
 
diff --git a/src/components/other/date-picker/index.ts b/src/components/other/date-picker/index.ts
index 63fb22e4..f46a5484 100644
--- a/src/components/other/date-picker/index.ts
+++ b/src/components/other/date-picker/index.ts
@@ -1,5 +1,4 @@
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@/utils/types'
 import { loadAsyncComponent } from '@/utils/async-component'
 import DatePicker from './src/index.vue'
 
diff --git a/src/components/pie/basic-pie/index.ts b/src/components/pie/basic-pie/index.ts
index 7949f956..701c5fbe 100644
--- a/src/components/pie/basic-pie/index.ts
+++ b/src/components/pie/basic-pie/index.ts
@@ -1,5 +1,4 @@
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@/utils/types'
 import { loadAsyncComponent } from '@/utils/async-component'
 import BasicPie from './src/index.vue'
 
diff --git a/src/components/table/carousel-table/index.ts b/src/components/table/carousel-table/index.ts
index e529175f..682fc4b8 100644
--- a/src/components/table/carousel-table/index.ts
+++ b/src/components/table/carousel-table/index.ts
@@ -1,5 +1,4 @@
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@/utils/types'
 import { loadAsyncComponent } from '@/utils/async-component'
 import CarouselTable from './src/index.vue'
 
diff --git a/src/components/table/table-bar/index.ts b/src/components/table/table-bar/index.ts
index 91f99c71..02c0b80f 100644
--- a/src/components/table/table-bar/index.ts
+++ b/src/components/table/table-bar/index.ts
@@ -1,5 +1,4 @@
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@/utils/types'
 import { loadAsyncComponent } from '@/utils/async-component'
 import TableBar from './src/index.vue'
 
diff --git a/src/components/text/main-title/index.ts b/src/components/text/main-title/index.ts
index b95c8711..38368d57 100644
--- a/src/components/text/main-title/index.ts
+++ b/src/components/text/main-title/index.ts
@@ -1,5 +1,4 @@
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@/utils/types'
 import { loadAsyncComponent } from '@/utils/async-component'
 import MainTitle from './src/index.vue'
 
diff --git a/src/components/text/marquee/index.ts b/src/components/text/marquee/index.ts
index 87f4c847..443517ed 100644
--- a/src/components/text/marquee/index.ts
+++ b/src/components/text/marquee/index.ts
@@ -1,5 +1,4 @@
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@/utils/types'
 import { loadAsyncComponent } from '@/utils/async-component'
 import Marquee from './src/index.vue'
 
diff --git a/src/components/text/number-title-flop/index.ts b/src/components/text/number-title-flop/index.ts
index 8195c1b4..a655261d 100644
--- a/src/components/text/number-title-flop/index.ts
+++ b/src/components/text/number-title-flop/index.ts
@@ -1,5 +1,4 @@
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@/utils/types'
 import { loadAsyncComponent } from '@/utils/async-component'
 import NumberTitleFlop from './src/index.vue'
 
diff --git a/src/components/text/paragraph/index.ts b/src/components/text/paragraph/index.ts
index c1360b51..fb55c38a 100644
--- a/src/components/text/paragraph/index.ts
+++ b/src/components/text/paragraph/index.ts
@@ -1,5 +1,4 @@
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@/utils/types'
 import { loadAsyncComponent } from '@/utils/async-component'
 import Paragraph from './src/index.vue'
 
diff --git a/src/components/text/timer/index.ts b/src/components/text/timer/index.ts
index 5e3feae4..68c824c1 100644
--- a/src/components/text/timer/index.ts
+++ b/src/components/text/timer/index.ts
@@ -1,5 +1,4 @@
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@/utils/types'
 import { loadAsyncComponent } from '@/utils/async-component'
 import Timer from './src/index.vue'
 
diff --git a/src/styles/themes/naive-ui-theme-overrides.ts b/src/styles/themes/naive-ui-theme-overrides.ts
index 8e97354f..ca43f7e3 100644
--- a/src/styles/themes/naive-ui-theme-overrides.ts
+++ b/src/styles/themes/naive-ui-theme-overrides.ts
@@ -5,18 +5,14 @@ const vars: Partial<GlobalTheme['common']> = {
   primaryColor: '#2681ff',
   primaryColorHover: '#409fff',
   primaryColorPressed: '#2681ff',
-
   errorColor: '#f15532',
   warningColor: '#f27a24',
   infoColor: '#90a0ae',
   successColor: '#50e3c2',
-
   textColor1: '#ffffff',
-
   borderColor: '#3a4659',
   borderRadius: '0',
   borderRadiusSmall: '0',
-
   boxShadow1: 'none',
   boxShadow2: 'none',
   boxShadow3: 'none',
@@ -24,6 +20,11 @@ const vars: Partial<GlobalTheme['common']> = {
 
 const vars2 = {
   darkColor: '#262c33',
+  bgColor1: '#0b0c0d',
+  bgColor2: '#1d262e',
+  border: '1px solid #0b0c0d',
+  borderPrimary: '1px solid #2681ff',
+  borderColor: '#0b0c0d',
   guiPrimaryColor: '#2483ff',
   guiComponentBgColor: '#262c33',
   guiComponentBgColorDark: '#262c32',
@@ -32,12 +33,6 @@ const vars2 = {
   guiComponentBgColorDisabled: '#13161a',
   guiFontColor: '#a1aeb3',
   guiFontColorDescription: '#5c6366',
-  borderColor: '#0b0c0d',
-  border: '1px solid #0b0c0d',
-  borderPrimary: '1px solid #2681ff',
-  guiBgColorDark: '#111417',
-  bgColor1: '#0b0c0d',
-  bgColor2: '#1d262e',
 }
 
 const themeOverrides: GlobalThemeOverrides = {
@@ -45,50 +40,41 @@ const themeOverrides: GlobalThemeOverrides = {
     ...vars,
   },
   Button: { // small 和 medium 一样大
-    iconSizeTiny: '12px',
-
-    heightTiny: '26px',
-    heightSmall: '32px',
-    heightMedium: '32px',
-
-    paddingTiny: '0 15px',
-    paddingSmall: '0 24px',
-    paddingMedium: '0 24px',
-
     color: '#0000',
     colorHover: vars.primaryColorHover,
     colorPressed: vars.primaryColorPressed,
     colorFocus: vars.primaryColor,
-
+    colorDisabled: '#282f3a',
     colorFocusPrimary: vars.primaryColor,
 
     border: `1px solid ${vars.primaryColor}`,
     borderHover: `1px solid ${vars.primaryColorHover}`,
     borderPressed: `1px solid ${vars.primaryColorPressed}`,
     borderFocus: `1px solid ${vars.primaryColor}`,
-
+    borderDisabled: '1px solid #0000',
     borderFocusPrimary: `1px solid ${vars.primaryColor}`,
 
     textColor: vars.primaryColor,
     textColorHover: '#fff',
     textColorPressed: '#fff',
     textColorFocus: '#fff',
+    textColorDisabled: '#90a0ae',
 
     textColorGhost: vars.primaryColor,
     textColorGhostHover: '#fff',
     textColorGhostPressed: '#fff',
     textColorGhostFocus: vars.primaryColor,
 
-    colorDisabled: '#282f3a',
-    textColorDisabled: '#90a0ae',
-    borderDisabled: '1px solid #0000',
+    iconSizeTiny: '12px',
+    heightTiny: '26px',
+    heightSmall: '32px',
+    heightMedium: '32px',
+
+    paddingTiny: '0 15px',
+    paddingSmall: '0 24px',
+    paddingMedium: '0 24px',
   },
   Message: {
-    minWidth: '380px',
-    padding: '15px 15px 15px 20px',
-    fontSize: '12px',
-    iconSize: '16px',
-    borderRadius: '0',
     textColorError: '#fff',
     textColorSuccess: '#fff',
     textColorWarning: '#fff',
@@ -102,52 +88,57 @@ const themeOverrides: GlobalThemeOverrides = {
     closeIconColorHoverSuccess: vars.infoColor,
     closeIconColorWarning: '#fff',
     closeIconColorHoverWarning: vars.infoColor,
+    padding: '15px 15px 15px 20px',
+    borderRadius: '0',
+    minWidth: '380px',
+    fontSize: '12px',
+    iconSize: '16px',
   },
   Dialog: {
     color: '#303640',
-    padding: '16px 20px',
     textColor: '#fff',
-    closeIconColor: vars.primaryColor,
-    closeIconColorHover: vars.primaryColor,
-    closeIconColorPressed: vars.primaryColor,
-    closeColorHover: '#0000',
-    closeColorPressed: '#0000',
-    closeMargin: '16px 20px 0 0',
+    padding: '16px 20px',
     iconSize: '65px',
     iconColor: '#ff4f43',
     iconMargin: '0 0 10px 0',
     contentMargin: '10px -20px 0',
+    closeMargin: '16px 20px 0 0',
+    closeColorHover: '#0000',
+    closeColorPressed: '#0000',
+    closeIconColor: vars.primaryColor,
+    closeIconColorHover: vars.primaryColor,
+    closeIconColorPressed: vars.primaryColor,
   },
   Dropdown: {
-    fontSizeMedium: '12px',
     padding: '0',
     borderRadius: '1px',
     color: vars2.darkColor,
     prefixColor: '#fff',
+    dividerColor: '#1a1b1d',
     optionColorHover: '#1a1b1d',
     optionTextColor: '#fff',
     optionTextColorHover: '#fff',
     optionHeightMedium: '30px',
     optionIconSizeMedium: '12px',
     optionIconPrefixWidthMedium: '12px',
-    dividerColor: '#1a1b1d',
+    fontSizeMedium: '12px',
   },
   Switch: {
-    buttonWidthMedium: '10px',
+    railColor: '#0b0c0d',
+    railColorActive: vars2.guiPrimaryColor,
+    boxShadowFocus: 'none',
+
     buttonHeightMedium: '10px',
+    buttonWidthMedium: '10px',
     buttonWidthPressedMedium: '14px',
-    railWidthMedium: '26px',
     railHeightMedium: '12px',
+    railWidthMedium: '26px',
 
-    buttonWidthSmall: '6px',
     buttonHeightSmall: '6px',
+    buttonWidthSmall: '6px',
     buttonWidthPressedSmall: '8px',
-    railWidthSmall: '16px',
     railHeightSmall: '8px',
-
-    railColor: '#0b0c0d',
-    railColorActive: vars2.guiPrimaryColor,
-    boxShadowFocus: 'none',
+    railWidthSmall: '16px',
   },
   Tooltip: {
     padding: '5px',
@@ -165,51 +156,51 @@ const themeOverrides: GlobalThemeOverrides = {
     railColor: '#bcc9d4',
   },
   Checkbox: {
-    sizeMedium: '14px',
-    fontSizeMedium: '12px',
-    textColor: vars.textColor1,
     color: '#0000',
     colorChecked: '#0000',
+    textColor: vars.textColor1,
     checkMarkColor: vars.primaryColor,
     boxShadowFocus: 'none',
+    sizeMedium: '14px',
+    fontSizeMedium: '12px',
   },
   Radio: {
-    fontSizeSmall: '12px',
-    buttonHeightSmall: '28px',
+    color: '#0000',
+    textColor: vars.textColor1,
     buttonTextColor: vars2.guiFontColor,
     buttonTextColorActive: '#fff',
     buttonColor: vars2.darkColor,
     buttonColorActive: vars2.guiPrimaryColor,
     buttonBoxShadow: 'none',
-    buttonBoxShadowFocus: 'none',
     buttonBoxShadowHover: 'none',
+    buttonBoxShadowFocus: 'none',
     buttonBorderColor: vars2.borderColor,
-    color: '#0000',
-    textColor: vars.textColor1,
     boxShadowFocus: 'var(--n-box-shadow-active)',
+    fontSizeSmall: '12px',
+    buttonHeightSmall: '28px',
   },
   Input: {
-    fontSizeSmall: '12px',
+    iconColor: vars.textColor1,
     textColor: vars.textColor1,
     color: vars2.guiComponentBgColor,
     colorFocus: vars2.guiComponentBgColor,
     border: vars2.border,
     borderHover: vars2.borderPrimary,
     borderFocus: vars2.borderPrimary,
-    boxShadowFocus: 'none',
-    iconColor: vars.textColor1,
     suffixTextColor: vars2.guiFontColorDescription,
-    paddingSmall: '0 8px',
     groupLabelColor: vars2.guiComponentBgColor,
     groupLabelTextColor: vars.textColor1,
     groupLabelBorder: vars2.border,
+    boxShadowFocus: 'none',
+    paddingSmall: '0 8px',
+    fontSizeSmall: '12px',
     heightMedium: '32px',
   },
   ColorPicker: {
-    border: vars2.border,
     color: vars2.guiComponentBgColor,
-    panelFontSize: '12px',
     textColor: vars.textColor1,
+    border: vars2.border,
+    panelFontSize: '12px',
     heightMedium: '32px',
   },
   Upload: {
@@ -218,23 +209,22 @@ const themeOverrides: GlobalThemeOverrides = {
   },
   Drawer: {
     color: '#1d2126',
-    bodyPadding: '0 20px 80px 20px',
-    textColor: vars.primaryColor,
     titleFontWeight: 'normal',
+    textColor: vars.primaryColor,
+    bodyPadding: '0 20px 80px 20px',
     headerBorderBottom: '1px solid rgba(255, 255, 255, 0.15)',
+    closeColorHover: '#0000',
+    closeColorPressed: '#0000',
     closeIconColor: vars.primaryColor,
     closeIconColorHover: vars.primaryColor,
     closeIconColorPressed: vars.primaryColor,
-    closeColorHover: '#0000',
-    closeColorPressed: '#0000',
   },
   Select: {
     peers: {
       InternalSelection: {
-        fontSizeSmall: '12px',
-        textColor: vars.textColor1,
         arrowColor: vars.textColor1,
         caretColor: vars.primaryColor,
+        textColor: vars.textColor1,
         color: vars2.guiComponentBgColor,
         colorActive: vars2.guiComponentBgColor,
         colorDisabled: vars2.guiComponentBgColor,
@@ -246,11 +236,10 @@ const themeOverrides: GlobalThemeOverrides = {
         boxShadowActive: 'none',
         paddingSingle: '0 24px 0 8px',
         placeholderColor: '#c0c4cc',
+        fontSizeSmall: '12px',
         heightMedium: '32px',
       },
       InternalSelectMenu: {
-        optionFontSizeSmall: '12px',
-        optionFontSizeMedium: '12px',
         color: '#1d2126',
         optionColorActive: '#1b3964',
         optionColorPending: '#1b3964',
@@ -259,6 +248,8 @@ const themeOverrides: GlobalThemeOverrides = {
         optionTextColorActive: '#fff',
         optionHeightSmall: '28px',
         optionHeightMedium: '28px',
+        optionFontSizeSmall: '12px',
+        optionFontSizeMedium: '12px',
       },
     },
   },
@@ -302,9 +293,9 @@ const themeOverrides: GlobalThemeOverrides = {
     optionColorHover: '#1b3964',
     peers: {
       InternalSelection: {
-        textColor: vars.textColor1,
         arrowColor: vars.textColor1,
         caretColor: vars.primaryColor,
+        textColor: vars.textColor1,
         color: vars2.guiComponentBgColor,
         colorActive: vars2.guiComponentBgColor,
         colorDisabled: vars2.guiComponentBgColor,
diff --git a/src/styles/themes/var.scss b/src/styles/themes/var.scss
index 73a6530d..d689429a 100644
--- a/src/styles/themes/var.scss
+++ b/src/styles/themes/var.scss
@@ -79,6 +79,8 @@
   --datav-gui-component-bgcolor-hover: #303640;
   --datav-gui-component-bgcolor-active: #262b33;
   --datav-gui-component-bgcolor-disabled: #13161a;
+  --datav-gui-component-border-color: #0b0c0d;
+  --datav-gui-component-border: 1px solid var(--datav-gui-component-border-color);
   --datav-gui-font-color-base: #a1aeb3;
   --datav-gui-font-color-1: #fff;
   --datav-gui-font-color-2: #c3d3d9;
@@ -92,15 +94,13 @@
   --datav-gui-editor-bgcolor-disabled: #1f2329;
   --datav-gui-fullscreen-bgcolor: #222425;
   --datav-gui-slider-track-color: linear-gradient(to right, #74f0ff, #2681ff);
-  --datav-gui-component-border-color: #0b0c0d;
-  --datav-gui-component-border: 1px solid var(--datav-gui-component-border-color);
   --datav-gui-select-option-bgcolor: #1d2126;
   --datav-gui-select-option-bgcolor-hover: #1b3964;
   --datav-gui-select-color-selected: #fff;
-  --datav-gui-cp-border: 1px solid #141210;
-  --datav-gui-cp-title-padding-left: 0;
   --datav-gui-new-select-border: 1px solid #282f3a;
   --datav-gui-new-select-bgcolor: #0e1013;
+  --datav-gui-cp-border: 1px solid #141210;
+  --datav-gui-cp-title-padding-left: 0;
   --datav-gui-empty-color: #909399;
   --datav-gui-tabs-card-num: 3;
 }
diff --git a/src/typings/global.d.ts b/src/typings/global.d.ts
index 404c55f1..87743450 100644
--- a/src/typings/global.d.ts
+++ b/src/typings/global.d.ts
@@ -1 +1,3 @@
 declare const __DEV__: boolean
+
+declare type SFCWithInstall<T> = T & { install(app: App): void; }
diff --git a/src/typings/shims-vue.d.ts b/src/typings/shims-vue.d.ts
index ecac7d82..8ecc0ed6 100644
--- a/src/typings/shims-vue.d.ts
+++ b/src/typings/shims-vue.d.ts
@@ -1,17 +1,7 @@
 declare module '*.vue' {
   import type { App, defineComponent } from 'vue'
-
   const component: ReturnType<typeof defineComponent> & {
     install(app: App): void
   }
-
   export default component
 }
-
-declare module '*.hbs' {
-  const plainText: string
-
-  export {
-    plainText,
-  }
-}
diff --git a/src/utils/types.ts b/src/utils/types.ts
index ea47bd1a..a8f2fec3 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -1,11 +1,7 @@
-import type { App } from 'vue'
 import type { ECBasicOption } from 'echarts/types/dist/shared'
 
-declare type SFCWithInstall<T> = T & { install(app: App): void; }
-
 declare type AnimationEasing = ECBasicOption['animationEasing'];
 
 export {
-  SFCWithInstall,
   AnimationEasing,
 }
diff --git a/vite.config.ts b/vite.config.ts
index b130c821..0350185b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,10 +1,8 @@
 import type { ConfigEnv } from 'vite'
 import { loadEnv, defineConfig } from 'vite'
+import { resolve } from 'path'
 import vue from '@vitejs/plugin-vue'
 import ElementPlus from 'unplugin-element-plus/vite'
-import plainText from 'vite-plugin-plain-text'
-
-import { resolve } from 'path'
 
 function pathResolve(dir: string) {
   return resolve(process.cwd(), '.', dir)
@@ -21,7 +19,6 @@ export default ({ mode }: ConfigEnv) => {
     plugins: [
       vue(),
       ElementPlus(),
-      plainText(/\.hbs$/),
     ],
     server: {
       host: '0.0.0.0',

From 2664129fa6f407ed2c675ecd81979b2ceb1a399d Mon Sep 17 00:00:00 2001
From: pengxiaotian <673923162@qq.com>
Date: Tue, 16 May 2023 18:37:31 +0800
Subject: [PATCH 07/10] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/_mixins/use-data-center.ts     | 126 ++----------------
 src/components/_utils/set-component-data.ts   | 110 +++++++++++++++
 src/store/api.ts                              |  14 +-
 src/utils/util.ts                             |  34 ++---
 .../data-center-panel/source-drawer.vue       |   2 +-
 5 files changed, 140 insertions(+), 146 deletions(-)
 create mode 100644 src/components/_utils/set-component-data.ts

diff --git a/src/components/_mixins/use-data-center.ts b/src/components/_mixins/use-data-center.ts
index e6de544c..3196ce84 100644
--- a/src/components/_mixins/use-data-center.ts
+++ b/src/components/_mixins/use-data-center.ts
@@ -1,17 +1,11 @@
 import { ref, toRefs, watch, onUnmounted } from 'vue'
-import { debounce, isPlainObject, isArray } from 'lodash-es'
-import { hasOwn } from '@/utils/util'
-import { useMessageUtil } from '@/utils/naive-ui-util'
+import { debounce } from 'lodash-es'
 import { useEditorStore } from '@/store/editor'
-import { useFilterStore } from '@/store/filter'
-import { useToolbarStore } from '@/store/toolbar'
-import { useApiStore } from '@/store/api'
-import { useDebugStore } from '@/store/debug'
 import { useBlueprintStore } from '@/store/blueprint'
 import { DatavComponent } from '@/components/_models/datav-component'
 import { FieldConfig } from '@/components/_models/data-field'
-import { ApiKeyName, ApiConfig, ApiDataConfig, FieldStatus } from '@/components/_models/data-source'
-import { execFilter } from '@/components/_models/data-filter'
+import { ApiKeyName, ApiConfig } from '@/components/_models/data-source'
+import { setComponentData } from '../_utils/set-component-data'
 
 export const getFieldMap = (fields: Record<string, FieldConfig>) => {
   const fieldMap: Record<string, string> = Object.create(null)
@@ -21,101 +15,6 @@ export const getFieldMap = (fields: Record<string, FieldConfig>) => {
   return fieldMap
 }
 
-const setFieldStatus = (fields: Record<string, FieldConfig>, status: FieldStatus) => {
-  return Object.keys(fields)
-    .reduce((prev, curr) => {
-      prev[curr] = status
-      return prev
-    }, Object.create(null)) as Record<string, FieldStatus>
-}
-
-const checkDataSchema = (data: any, fields: Record<string, FieldConfig>) => {
-  let _data = null
-  if (isPlainObject(data)) {
-    _data = data
-  } else if (isArray(data)) {
-    _data = data[0]
-  }
-
-  return Object.entries(fields)
-    .reduce((prev, [key, fc]) => {
-      if (_data && hasOwn(_data, fc.map || key)) {
-        prev[key] = FieldStatus.success
-      } else if (fc.optional) {
-        prev[key] = FieldStatus.optional
-      } else {
-        prev[key] = FieldStatus.failed
-      }
-      return prev
-    }, Object.create(null)) as Record<string, FieldStatus>
-}
-
-export const setComponentData = async (
-  comId: string,
-  apiKey: ApiKeyName,
-  aConfig: ApiConfig,
-  adConfig: ApiDataConfig,
-) => {
-  const apiStore = useApiStore()
-  const toolbarStore = useToolbarStore()
-  const filterStore = useFilterStore()
-  const debugStore = useDebugStore()
-  toolbarStore.addLoading()
-
-  // 初始化字段状态
-  debugStore.setFieldStatus(comId, apiKey, setFieldStatus(aConfig.fields, FieldStatus.loading))
-
-  let isError = false
-  let res: any
-
-  try {
-    // 获取源数据
-    res = await apiStore.requestData(comId, aConfig, adConfig)
-    debugStore.setOrigin(comId, apiKey, res)
-  } catch (error) {
-    isError = true
-    res = { isError, message: error.message }
-    debugStore.setDataStatus(comId, apiKey, 'api', res.message)
-  }
-
-  if (!isError) {
-    try {
-      // 使用过滤器筛选数据
-      if (adConfig.config.useFilter) {
-        res = execFilter(filterStore.dataFilters, adConfig.pageFilters, res)
-      } else {
-        debugStore.setDataStatus(comId, apiKey, 'filter', '')
-      }
-    } catch (error) {
-      isError = true
-      res = { isError, message: error.message }
-      debugStore.setDataStatus(comId, apiKey, 'filter', res.message)
-    }
-  }
-
-  if (isError) {
-    useMessageUtil().error(res.message)
-  }
-
-  // 传入组件的数据
-  apiStore.setData(comId, apiKey, res)
-
-  // 当数据接口请求完成时
-  // blueprintStore.onApiRequestCompleted()
-
-  // TODO: remove mock
-  setTimeout(() => {
-    debugStore.setFieldStatus(
-      comId,
-      apiKey,
-      isError
-        ? setFieldStatus(aConfig.fields, FieldStatus.failed)
-        : checkDataSchema(res, aConfig.fields),
-    )
-    toolbarStore.removeLoading()
-  }, 3000)
-}
-
 export const useDataCenter = (com: DatavComponent) => {
   const editorStore = useEditorStore()
   const blueprintStore = useBlueprintStore()
@@ -134,9 +33,9 @@ export const useDataCenter = (com: DatavComponent) => {
   }
 
   const autoRefreshAllData = () => {
-    apiKeys.forEach(apiKey => {
+    for (const apiKey of apiKeys) {
       autoRefreshData(apiKey, apis.value[apiKey])
-    })
+    }
   }
 
   const initData = (apiKey: ApiKeyName, ac: ApiConfig) => {
@@ -149,18 +48,18 @@ export const useDataCenter = (com: DatavComponent) => {
     })
   }
 
-  const stopAutoRefreshAllData = () => {
-    timers.value.forEach(t => stopAutoRefreshData(t))
-  }
-
   const stopAutoRefreshData = (id?: number) => {
     clearInterval(id)
   }
 
+  const stopAutoRefreshAllData = () => {
+    timers.value.forEach(t => stopAutoRefreshData(t))
+  }
+
   const initAllData = () => {
-    apiKeys.forEach(apiKey => {
+    for (const apiKey of apiKeys) {
       initData(apiKey, apis.value[apiKey])
-    })
+    }
   }
 
   initAllData()
@@ -174,6 +73,9 @@ export const useDataCenter = (com: DatavComponent) => {
     blueprintStore.clearEvent(com.id)
   })
 
+  // 当数据接口请求完成时
+  // blueprintStore.onApiRequestCompleted()
+
   // ------初始化默认公共动作------
   const requestData = debounce(() => {
     stopAutoRefreshAllData()
diff --git a/src/components/_utils/set-component-data.ts b/src/components/_utils/set-component-data.ts
new file mode 100644
index 00000000..12d2e4ee
--- /dev/null
+++ b/src/components/_utils/set-component-data.ts
@@ -0,0 +1,110 @@
+import { isPlainObject, isArray } from 'lodash-es'
+import { hasOwn, sleep } from '@/utils/util'
+import { useMessageUtil } from '@/utils/naive-ui-util'
+import { useFilterStore } from '@/store/filter'
+import { useToolbarStore } from '@/store/toolbar'
+import { useApiStore } from '@/store/api'
+import { useDebugStore } from '@/store/debug'
+import { FieldConfig } from '@/components/_models/data-field'
+import { ApiKeyName, ApiConfig, ApiDataConfig, FieldStatus } from '@/components/_models/data-source'
+import { execFilter } from '@/components/_models/data-filter'
+
+const checkDataSchema = (data: any, fields: Record<string, FieldConfig>) => {
+  let _data = null
+  if (isPlainObject(data)) {
+    _data = data
+  } else if (isArray(data)) {
+    _data = data[0]
+  }
+
+  return Object.entries(fields)
+    .reduce((prev, [key, fc]) => {
+      if (_data && hasOwn(_data, fc.map || key)) {
+        prev[key] = FieldStatus.success
+      } else if (fc.optional) {
+        prev[key] = FieldStatus.optional
+      } else {
+        prev[key] = FieldStatus.failed
+      }
+      return prev
+    }, Object.create(null)) as Record<string, FieldStatus>
+}
+
+const setFieldStatus = (fields: Record<string, FieldConfig>, status: FieldStatus) => {
+  return Object.keys(fields)
+    .reduce((prev, curr) => {
+      prev[curr] = status
+      return prev
+    }, Object.create(null)) as Record<string, FieldStatus>
+}
+
+export const setComponentData = async (
+  comId: string,
+  apiKey: ApiKeyName,
+  apiCfg: ApiConfig,
+  apiDataCfg: ApiDataConfig,
+  options?: {
+    onFinish?: () => void
+  },
+) => {
+  const apiStore = useApiStore()
+  const filterStore = useFilterStore()
+  const debugStore = useDebugStore()
+  const toolbarStore = useToolbarStore()
+  toolbarStore.addLoading()
+
+  //----------初始化字段状态----------
+  debugStore.setFieldStatus(
+    comId,
+    apiKey,
+    setFieldStatus(apiCfg.fields, FieldStatus.loading),
+  )
+
+  let isError = false
+  let res = null
+
+  //----------获取源数据----------
+  try {
+    res = await apiStore.requestData(apiDataCfg)
+    debugStore.setOrigin(comId, apiKey, res)
+  } catch (error) {
+    isError = true
+    res = { isError, message: error.message }
+    debugStore.setDataStatus(comId, apiKey, 'api', res.message)
+  }
+
+  //----------使用过滤器筛选数据----------
+  if (!isError) {
+    try {
+      if (apiDataCfg.config.useFilter) {
+        res = execFilter(filterStore.dataFilters, apiDataCfg.pageFilters, res)
+      }
+    } catch (error) {
+      isError = true
+      res = { isError, message: error.message }
+    }
+    debugStore.setDataStatus(comId, apiKey, 'filter', isError ? res.message : '')
+  }
+
+  //----------如果有错误就提示----------
+  if (isError) {
+    useMessageUtil().error(res.message)
+  }
+
+  //----------保存要传入组件的数据----------
+  apiStore.setData(comId, apiKey, res)
+
+  //----------执行完成后----------
+  options?.onFinish?.()
+
+  // TODO: remove mock
+  sleep(3000)
+
+  toolbarStore.removeLoading()
+  debugStore.setFieldStatus(
+    comId,
+    apiKey,
+    isError ? setFieldStatus(apiCfg.fields, FieldStatus.failed)
+      : checkDataSchema(res, apiCfg.fields),
+  )
+}
diff --git a/src/store/api.ts b/src/store/api.ts
index a0536eef..7b56d3bd 100644
--- a/src/store/api.ts
+++ b/src/store/api.ts
@@ -1,10 +1,10 @@
 import { defineStore } from 'pinia'
 import { set } from 'lodash-es'
 import {
-  ApiKeyName, ApiConfig, ApiDataConfig,
+  ApiKeyName, ApiDataConfig,
   ApiType, ApiRequestMethod,
 } from '@/components/_models/data-source'
-import { isUrl, toJson, replaceTextParams } from '@/utils/util'
+import { isUrl, jsonToObject, replaceTextParams } from '@/utils/util'
 import requestUtil from '@/components/_utils/request-util'
 import { useEventStore } from './event'
 
@@ -24,9 +24,9 @@ export const useApiStore = defineStore('api', {
     async setData(comId: string, apiKey: ApiKeyName, data: any) {
       set(this.dataMap, `${comId}.${apiKey}`, data)
     },
-    async requestData(comId: string, aConfig: ApiConfig, adConfig: ApiDataConfig) {
+    async requestData(apiDataCfg: ApiDataConfig) {
       const eventStore = useEventStore()
-      const { type, config } = adConfig
+      const { type, config } = apiDataCfg
       let res: unknown
       if (type === ApiType.static) {
         res = config.data
@@ -41,7 +41,7 @@ export const useApiStore = defineStore('api', {
 
         try {
           const conf = {
-            headers: toJson(config.apiHeaders, {}),
+            headers: jsonToObject(config.apiHeaders, {}),
             withCredentials: config.cookie,
           }
 
@@ -49,14 +49,14 @@ export const useApiStore = defineStore('api', {
           if (config.apiMethod === ApiRequestMethod.GET) {
             res = await requestUtil.get(url, conf)
           } else {
-            res = await requestUtil.post(url, toJson(config.apiBody, {}), conf)
+            res = await requestUtil.post(url, jsonToObject(config.apiBody, {}), conf)
           }
         } catch {
           throw Error('connectFailed')
         }
       }
 
-      return toJson(res, [])
+      return jsonToObject(res, [])
     },
   },
 })
diff --git a/src/utils/util.ts b/src/utils/util.ts
index cffb912a..af450fb0 100644
--- a/src/utils/util.ts
+++ b/src/utils/util.ts
@@ -1,4 +1,4 @@
-import { isString, extend, isEmpty } from 'lodash-es'
+import { isString } from 'lodash-es'
 import shortid from 'shortid'
 
 const hasOwnProperty = Object.prototype.hasOwnProperty
@@ -16,7 +16,7 @@ export const generateId = (prefix?: string) => {
  * Generating a random int in range (0, max - 1)
  * @param max {number}
  */
-export function getRandomInt(max: number) {
+export const getRandomInt = (max: number) => {
   return Math.floor(Math.random() * Math.floor(max))
 }
 
@@ -29,28 +29,15 @@ export const isBool = (val: unknown) => typeof val === 'boolean'
 export const isNumber = (val: unknown) => typeof val === 'number'
 export const isUndefined = (val: unknown) => val === void 0
 export const isObject = (val: unknown) => Object.prototype.toString.call(val) === '[object Object]'
-
 export const isUrl = (val: string) => /^[a-zA-z]+:\/\/[^\s]*$/.test(val)
 
-export function objToArray(obj) {
-  if (Array.isArray(obj)) {
-    return obj
-  }
-  return isEmpty(obj) ? [] : [obj]
-}
-
-export function deduplicate<T>(arr: T[]) {
-  return Array.from(new Set(arr))
+export const macMetaOrCtrl = (ev: MouseEvent | KeyboardEvent) => {
+  const ismac = isMac()
+  return (!ismac && ev.ctrlKey) || (ismac && ev.metaKey)
 }
 
-export function toObject<T>(arr: Array<T>) {
-  const res: Record<string, T> = Object.create(null)
-  for (let i = 0; i < arr.length; i++) {
-    if (arr[i]) {
-      extend(res, arr[i])
-    }
-  }
-  return res
+export const sleep = (time: number) => {
+  return new Promise<void>(resolve => setTimeout(resolve, time))
 }
 
 export function ArrayToObject<T extends string | Object>(arr: Array<T>, key?: string, value?: string) {
@@ -68,7 +55,7 @@ export function ArrayToObject<T extends string | Object>(arr: Array<T>, key?: st
   }, map)
 }
 
-export function toJson<T>(data: any, defaultValue: T) {
+export function jsonToObject<T>(data: any, defaultValue: T): T {
   try {
     if (!data) {
       return defaultValue
@@ -122,8 +109,3 @@ export const replaceTextParams = (text: string, data: Record<string, string>) =>
     return data[key.substring(1)] ?? key
   })
 }
-
-export const macMetaOrCtrl = (ev: MouseEvent | KeyboardEvent) => {
-  const ismac = isMac()
-  return (!ismac && ev.ctrlKey) || (ismac && ev.metaKey)
-}
diff --git a/src/views/screen-editor/config-panel/data-center-panel/source-drawer.vue b/src/views/screen-editor/config-panel/data-center-panel/source-drawer.vue
index b5b7c72f..4f6a01c8 100644
--- a/src/views/screen-editor/config-panel/data-center-panel/source-drawer.vue
+++ b/src/views/screen-editor/config-panel/data-center-panel/source-drawer.vue
@@ -100,9 +100,9 @@
 import { defineComponent, ref, computed, provide, inject } from 'vue'
 import { loadAsyncComponent } from '@/utils/async-component'
 import { createDataSources, ApiType, createDataConfigForApi } from '@/components/_models/data-source'
+import { setComponentData } from '@/components/_utils/set-component-data'
 import { useDebugStore } from '@/store/debug'
 import { useApiStore } from '@/store/api'
-import { setComponentData } from '@/components/_mixins/use-data-center'
 import { IconSearch, IconRefresh } from '@/icons'
 import FieldGrid from '../components/field-grid.vue'
 import { comInjectionKey, sourcePanelInjectionKey, sourceDrawerInjectionKey } from '../config'

From dc56104d1b2d459f1e4ba811159449eecb322687 Mon Sep 17 00:00:00 2001
From: pengxiaotian <673923162@qq.com>
Date: Mon, 29 May 2023 00:13:44 +0800
Subject: [PATCH 08/10] =?UTF-8?q?refactor:=20=E5=8D=B8=E8=BD=BD=20element-?=
 =?UTF-8?q?plus,=20el-tabs=20=E6=94=B9=E4=B8=BA=20n-tabs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   4 +-
 pnpm-lock.yaml                                | 194 +-----------------
 src/styles/tabs.scss                          |  34 ++-
 .../screen-editor/components-panel/index.vue  |  66 ++++--
 .../screen-editor/components-panel/style.scss |  38 +---
 .../screen-editor/components-panel/tabs.scss  |  79 -------
 vite.config.ts                                |   3 -
 7 files changed, 98 insertions(+), 320 deletions(-)
 delete mode 100644 src/views/screen-editor/components-panel/tabs.scss

diff --git a/package.json b/package.json
index e1a99263..caf5d07b 100644
--- a/package.json
+++ b/package.json
@@ -27,14 +27,13 @@
     "dayjs": "^1.11.7",
     "echarts": "^5.4.1",
     "echarts-wordcloud": "^2.1.0",
-    "element-plus": "2.0.5",
     "gsap": "^3.11.3",
     "html2canvas": "^1.4.1",
     "js-cookie": "^3.0.1",
     "lodash-es": "^4.17.21",
     "mockjs": "^1.1.0",
     "monaco-editor": "0.33.0",
-    "naive-ui": "^2.34.2",
+    "naive-ui": "^2.34.4",
     "number-precision": "^1.5.2",
     "particles.vue3": "^2.6.0",
     "pinia": "^2.0.28",
@@ -79,7 +78,6 @@
     "stylelint-config-standard": "^29.0.0",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4",
-    "unplugin-element-plus": "^0.4.1",
     "vite": "^3.2.5",
     "vite-plugin-plain-text": "^1.2.1",
     "vue-tsc": "^1.0.13"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 88db8529..957274f3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -27,7 +27,6 @@ specifiers:
   dayjs: ^1.11.7
   echarts: ^5.4.1
   echarts-wordcloud: ^2.1.0
-  element-plus: 2.0.5
   eslint: ^8.29.0
   eslint-plugin-import: ^2.26.0
   eslint-plugin-vue: ^9.8.0
@@ -39,7 +38,7 @@ specifiers:
   lodash-es: ^4.17.21
   mockjs: ^1.1.0
   monaco-editor: 0.33.0
-  naive-ui: ^2.34.2
+  naive-ui: ^2.34.4
   number-precision: ^1.5.2
   particles.vue3: ^2.6.0
   pinia: ^2.0.28
@@ -56,7 +55,6 @@ specifiers:
   tslib: ^2.4.1
   tsparticles: ^2.6.0
   typescript: ^4.9.4
-  unplugin-element-plus: ^0.4.1
   vite: ^3.2.5
   vite-plugin-plain-text: ^1.2.1
   vue: ^3.2.45
@@ -75,14 +73,13 @@ dependencies:
   dayjs: 1.11.7
   echarts: 5.4.1
   echarts-wordcloud: 2.1.0_echarts@5.4.1
-  element-plus: 2.0.5_av5yg3gsrldpody4kdkwsqlxfu
   gsap: 3.11.3
   html2canvas: 1.4.1
   js-cookie: 3.0.1
   lodash-es: 4.17.21
   mockjs: 1.1.0
   monaco-editor: 0.33.0
-  naive-ui: 2.34.2_vue@3.2.45
+  naive-ui: 2.34.4_vue@3.2.45
   number-precision: 1.5.2
   particles.vue3: 2.6.0
   pinia: 2.0.28_prq2uz4lho2pwp6irk4cfkrxwu
@@ -127,7 +124,6 @@ devDependencies:
   stylelint-config-standard: 29.0.0_stylelint@14.16.0
   tslib: 2.4.1
   typescript: 4.9.4
-  unplugin-element-plus: 0.4.1_vite@3.2.5
   vite: 3.2.5_sass@1.56.2
   vite-plugin-plain-text: 1.2.1
   vue-tsc: 1.0.13_typescript@4.9.4
@@ -1624,19 +1620,6 @@ packages:
       postcss-selector-parser: 6.0.11
     dev: true
 
-  /@ctrl/tinycolor/3.4.0:
-    resolution: {integrity: sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ==}
-    engines: {node: '>=10'}
-    dev: false
-
-  /@element-plus/icons-vue/1.0.1_vue@3.2.45:
-    resolution: {integrity: sha512-xdT0Jr+Z53rz4+B2knhYjzRzFZ5MoXXWKXEuxFA4nImGr2jCt5Q+VBFiBYRgctnB0ZWmk6iHAqK344zdzQIEEg==}
-    peerDependencies:
-      vue: ^3.2.0
-    dependencies:
-      vue: 3.2.45
-    dev: false
-
   /@emotion/hash/0.8.0:
     resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
     dev: false
@@ -1934,18 +1917,6 @@ packages:
       fastq: 1.13.0
     dev: true
 
-  /@popperjs/core/2.11.2:
-    resolution: {integrity: sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==}
-    dev: false
-
-  /@rollup/pluginutils/4.2.1:
-    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
-    engines: {node: '>= 8.0.0'}
-    dependencies:
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-    dev: true
-
   /@tsconfig/node10/1.0.8:
     resolution: {integrity: sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg==}
     dev: true
@@ -2384,22 +2355,6 @@ packages:
   /@vue/shared/3.2.45:
     resolution: {integrity: sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==}
 
-  /@vueuse/core/7.7.1_vue@3.2.45:
-    resolution: {integrity: sha512-PRRgbATMpoeUmkCEBtUeJgOwtew8s+4UsEd+Pm7MhkjL2ihCNrSqxNVtM6NFE4uP2sWnkGcZpCjPuNSxowJ1Ow==}
-    peerDependencies:
-      '@vue/composition-api': ^1.1.0
-      vue: ^2.6.0 || ^3.2.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-      vue:
-        optional: true
-    dependencies:
-      '@vueuse/shared': 7.7.1_vue@3.2.45
-      vue: 3.2.45
-      vue-demi: 0.12.1_vue@3.2.45
-    dev: false
-
   /@vueuse/core/8.9.4_vue@3.2.45:
     resolution: {integrity: sha512-B/Mdj9TK1peFyWaPof+Zf/mP9XuGAngaJZBwPaXBvU3aCTZlx3ltlrFFFyMV4iGBwsjSCeUCgZrtkEj9dS2Y3Q==}
     peerDependencies:
@@ -2422,21 +2377,6 @@ packages:
     resolution: {integrity: sha512-IwSfzH80bnJMzqhaapqJl9JRIiyQU0zsRGEgnxN6jhq7992cPUJIRfV+JHRIZXjYqbwt07E1gTEp0R0zPJ1aqw==}
     dev: false
 
-  /@vueuse/shared/7.7.1_vue@3.2.45:
-    resolution: {integrity: sha512-rN2qd22AUl7VdBxihagWyhUNHCyVk9IpvBTTfHoLH9G7rGE552X1f+zeCfehuno0zXif13jPw+icW/wn2a0rnQ==}
-    peerDependencies:
-      '@vue/composition-api': ^1.1.0
-      vue: ^2.6.0 || ^3.2.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-      vue:
-        optional: true
-    dependencies:
-      vue: 3.2.45
-      vue-demi: 0.12.1_vue@3.2.45
-    dev: false
-
   /@vueuse/shared/8.9.4_vue@3.2.45:
     resolution: {integrity: sha512-wt+T30c4K6dGRMVqPddexEVLa28YwxW5OFIPmzUHICjphfAuBFTTdDoyqREZNDOFJZ44ARH1WWQNCUK8koJ+Ag==}
     peerDependencies:
@@ -2610,10 +2550,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /async-validator/4.0.7:
-    resolution: {integrity: sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ==}
-    dev: false
-
   /async-validator/4.2.5:
     resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
     dev: false
@@ -3503,28 +3439,6 @@ packages:
     resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
     dev: true
 
-  /element-plus/2.0.5_av5yg3gsrldpody4kdkwsqlxfu:
-    resolution: {integrity: sha512-zeyICvdDHSs7nwOGPAfI0B3y1HfH8o6IcKI5OA5JnHxildoQHqMycB0PPdEXAewzrsuCNigo6ihrwD9OuhDLHA==}
-    peerDependencies:
-      vue: ^3.2.0
-    dependencies:
-      '@ctrl/tinycolor': 3.4.0
-      '@element-plus/icons-vue': 1.0.1_vue@3.2.45
-      '@popperjs/core': 2.11.2
-      '@vueuse/core': 7.7.1_vue@3.2.45
-      async-validator: 4.0.7
-      dayjs: 1.11.7
-      lodash: 4.17.21
-      lodash-es: 4.17.21
-      lodash-unified: 1.0.2_3ib2ivapxullxkx3xftsimdk7u
-      memoize-one: 6.0.0
-      normalize-wheel-es: 1.1.1
-      vue: 3.2.45
-    transitivePeerDependencies:
-      - '@types/lodash-es'
-      - '@vue/composition-api'
-    dev: false
-
   /emoji-regex/8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
     dev: true
@@ -3570,10 +3484,6 @@ packages:
       unbox-primitive: 1.0.1
     dev: true
 
-  /es-module-lexer/0.10.5:
-    resolution: {integrity: sha512-+7IwY/kiGAacQfY+YBhKMvEmyAJnw5grTUgjG85Pe7vcUI/6b7pZjZG8nQ7+48YhzEAEqrEgD2dCz/JIK+AYvw==}
-    dev: true
-
   /es-to-primitive/1.2.1:
     resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
     engines: {node: '>= 0.4'}
@@ -5063,18 +4973,6 @@ packages:
     resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
     dev: false
 
-  /lodash-unified/1.0.2_3ib2ivapxullxkx3xftsimdk7u:
-    resolution: {integrity: sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g==}
-    peerDependencies:
-      '@types/lodash-es': '*'
-      lodash: '*'
-      lodash-es: '*'
-    dependencies:
-      '@types/lodash-es': 4.17.6
-      lodash: 4.17.21
-      lodash-es: 4.17.21
-    dev: false
-
   /lodash.camelcase/4.3.0:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
     dev: true
@@ -5181,13 +5079,6 @@ packages:
     dependencies:
       sourcemap-codec: 1.4.8
 
-  /magic-string/0.26.2:
-    resolution: {integrity: sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==}
-    engines: {node: '>=12'}
-    dependencies:
-      sourcemap-codec: 1.4.8
-    dev: true
-
   /make-error/1.3.6:
     resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
     dev: true
@@ -5218,10 +5109,6 @@ packages:
     resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
     dev: true
 
-  /memoize-one/6.0.0:
-    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
-    dev: false
-
   /meow/8.1.2:
     resolution: {integrity: sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==}
     engines: {node: '>=10'}
@@ -5382,8 +5269,8 @@ packages:
     resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
     dev: true
 
-  /naive-ui/2.34.2_vue@3.2.45:
-    resolution: {integrity: sha512-JyvtVqHzS0O0DyPFFg95cJW0fp2WCEPsjXbeplkxFIfJHCgp5KC75PjnBycryegjPiZNLn9WlRDxXU5emEqRfg==}
+  /naive-ui/2.34.4_vue@3.2.45:
+    resolution: {integrity: sha512-aPG8PDfhSzIzn/jSC9y3Jb3Pe2wHJ7F0cFV1EWlbImSrZECeUmoc+fIcOSWbizoztkKfaUAeKwYdMl09MKkj1g==}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
@@ -5405,7 +5292,7 @@ packages:
       vdirs: 0.1.8_vue@3.2.45
       vooks: 0.2.12_vue@3.2.45
       vue: 3.2.45
-      vueuc: 0.4.49_vue@3.2.45
+      vueuc: 0.4.51_vue@3.2.45
     dev: false
 
   /nanoid/2.1.11:
@@ -5483,10 +5370,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /normalize-wheel-es/1.1.1:
-    resolution: {integrity: sha512-157VNH4CngrcsvF8xOVOe22cwniIR3nxSltdctvQeHZj8JttEeOXffK28jucWfWBXs0QNetAumjc1GiInnwX4w==}
-    dev: false
-
   /npm-run-path/4.0.1:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
@@ -7096,45 +6979,6 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unplugin-element-plus/0.4.1_vite@3.2.5:
-    resolution: {integrity: sha512-x8L35sppkbtnAf+aSPXNsLPjCUrM0mWKgujqMIgrHiDQaGbpMlNnbN2kjP5CMclykNOw8fUCreEhtxPyzg8tmw==}
-    engines: {node: '>=14.19.0'}
-    dependencies:
-      '@rollup/pluginutils': 4.2.1
-      es-module-lexer: 0.10.5
-      magic-string: 0.26.2
-      unplugin: 0.7.2_vite@3.2.5
-    transitivePeerDependencies:
-      - esbuild
-      - rollup
-      - vite
-      - webpack
-    dev: true
-
-  /unplugin/0.7.2_vite@3.2.5:
-    resolution: {integrity: sha512-m7thX4jP8l5sETpLdUASoDOGOcHaOVtgNyrYlToyQUvILUtEzEnngRBrHnAX3IKqooJVmXpoa/CwQ/QqzvGaHQ==}
-    peerDependencies:
-      esbuild: '>=0.13'
-      rollup: ^2.50.0
-      vite: ^2.3.0 || ^3.0.0-0
-      webpack: 4 || 5
-    peerDependenciesMeta:
-      esbuild:
-        optional: true
-      rollup:
-        optional: true
-      vite:
-        optional: true
-      webpack:
-        optional: true
-    dependencies:
-      acorn: 8.8.0
-      chokidar: 3.5.3
-      vite: 3.2.5_sass@1.56.2
-      webpack-sources: 3.2.3
-      webpack-virtual-modules: 0.4.6
-    dev: true
-
   /update-browserslist-db/1.0.10_browserslist@4.21.4:
     resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==}
     hasBin: true
@@ -7252,21 +7096,6 @@ packages:
       vue: 3.2.45
     dev: false
 
-  /vue-demi/0.12.1_vue@3.2.45:
-    resolution: {integrity: sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    peerDependencies:
-      '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^3.0.0-0 || ^2.6.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-    dependencies:
-      vue: 3.2.45
-    dev: false
-
   /vue-demi/0.13.5_vue@3.2.45:
     resolution: {integrity: sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw==}
     engines: {node: '>=12'}
@@ -7370,8 +7199,8 @@ packages:
       '@vue/server-renderer': 3.2.45_vue@3.2.45
       '@vue/shared': 3.2.45
 
-  /vueuc/0.4.49_vue@3.2.45:
-    resolution: {integrity: sha512-WarAC44a/Yx78CxkAgROYLq+LkAeCGA/6wHidVoFmHLbzyF3SiP2nzRNGD/8zJeJInXv18EnWK6A//eGgMMq8w==}
+  /vueuc/0.4.51_vue@3.2.45:
+    resolution: {integrity: sha512-pLiMChM4f+W8czlIClGvGBYo656lc2Y0/mXFSCydcSmnCR1izlKPGMgiYBGjbY9FDkFG8a2HEVz7t0DNzBWbDw==}
     peerDependencies:
       vue: ^3.0.11
     dependencies:
@@ -7391,15 +7220,6 @@ packages:
       defaults: 1.0.3
     dev: true
 
-  /webpack-sources/3.2.3:
-    resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
-    engines: {node: '>=10.13.0'}
-    dev: true
-
-  /webpack-virtual-modules/0.4.6:
-    resolution: {integrity: sha512-5tyDlKLqPfMqjT3Q9TAqf2YqjwmnUleZwzJi1A5qXnlBCdj2AtOJ6wAWdglTIDOPgOiOrXeBeFcsQ8+aGQ6QbA==}
-    dev: true
-
   /which-boxed-primitive/1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
     dependencies:
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index df62d6b6..fb7a7e09 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -1,6 +1,20 @@
 .n-tabs {
   height: 100%;
 
+  .n-tab-pane {
+    height: 100%;
+    background: var(--datav-nav-bg-active);
+  }
+
+  &.n-tabs--left {
+    .n-tab-pane {
+      height: 100%;
+      overflow-y: scroll;
+      background: var(--datav-nav-bg);
+      flex: 1;
+    }
+  }
+
   .n-tabs-nav.n-tabs-nav--card-type {
     .n-tabs-wrapper {
       width: 100%;
@@ -29,8 +43,22 @@
     }
   }
 
-  .n-tab-pane {
-    height: 100%;
-    background: var(--datav-nav-bg-active);
+  .n-tabs-nav.n-tabs-nav--line-type {
+    &.n-tabs-nav--left {
+      background: var(--datav-left-nav-bg);
+
+      .n-tabs-tab {
+        &.n-tabs-tab--active {
+          background: var(--datav-left-nav-active-bg);
+        }
+      }
+
+      &.n-tabs-nav--line-type {
+        .n-tabs-bar {
+          right: 0;
+          left: 0;
+        }
+      }
+    }
   }
 }
diff --git a/src/views/screen-editor/components-panel/index.vue b/src/views/screen-editor/components-panel/index.vue
index 0c339dbb..5a817c1b 100644
--- a/src/views/screen-editor/components-panel/index.vue
+++ b/src/views/screen-editor/components-panel/index.vue
@@ -21,12 +21,29 @@
         </n-tooltip>
       </div>
       <div class="components-panel-wrapper" @dragover="dragOver">
-        <el-tabs tab-position="left" @tab-click="handleTabClick">
-          <el-tab-pane v-for="cate in categories" :key="cate.type">
-            <template #label>
+        <n-tabs
+          type="line"
+          size="small"
+          placement="left"
+          :tab-style="{
+            height: '64px',
+            width: '48px',
+          }"
+          :style="{
+            '--n-pane-padding-top': '0',
+            '--n-tab-gap-vertical': '0',
+            '--n-tab-padding-vertical': '14px 12px',
+          }"
+        >
+          <n-tab-pane
+            v-for="cate in categories"
+            :key="cate.type"
+            :name="cate.type"
+          >
+            <template #tab>
               <n-tooltip placement="left" :delay="500">
                 <template #trigger>
-                  <div>
+                  <div @click="handleTabClick">
                     <g-com-icon :icon="cate.icon" class="com-tab-icon" />
                     <span class="com-tab-title">{{ cate.name }}</span>
                   </div>
@@ -34,10 +51,28 @@
                 {{ cate.name }}
               </n-tooltip>
             </template>
-
-            <el-tabs v-if="cate.data.length > 2" tab-position="left" class="el-tabs-l2">
-              <el-tab-pane v-for="subcate in (cate.data as ComDataType[])" :key="subcate.type">
-                <template #label>
+            <n-tabs
+              v-if="cate.data.length > 2"
+              size="small"
+              placement="left"
+              :tab-style="{
+                height: '46px',
+                width: '60px',
+              }"
+              :style="{
+                '--n-bar-color': '#0000',
+                '--n-pane-padding-top': '0',
+                '--n-tab-gap-vertical': '0',
+                '--n-tab-padding-vertical': '14px 12px'
+              }"
+              class="n-tabs-l2"
+            >
+              <n-tab-pane
+                v-for="subcate in (cate.data as ComDataType[])"
+                :key="subcate.type"
+                :name="subcate.type"
+              >
+                <template #tab>
                   <span class="com-tab-title">{{ subcate.name }}</span>
                 </template>
                 <div class="components-single-menu-wp">
@@ -74,8 +109,8 @@
                     </ul>
                   </div>
                 </div>
-              </el-tab-pane>
-            </el-tabs>
+              </n-tab-pane>
+            </n-tabs>
 
             <div v-else class="components-multi-menu">
               <div class="components-single-menu --wider">
@@ -116,8 +151,8 @@
                 </template>
               </div>
             </div>
-          </el-tab-pane>
-        </el-tabs>
+          </n-tab-pane>
+        </n-tabs>
       </div>
     </div>
   </div>
@@ -126,11 +161,7 @@
 <script lang='ts' setup>
 import { ref, computed } from 'vue'
 import { cloneDeep } from 'lodash-es'
-
-import 'element-plus/es/components/tabs/style/css'
-import 'element-plus/es/components/tab-pane/style/css'
-import { ElTabs, ElTabPane } from 'element-plus'
-
+import { NTabs, NTabPane } from 'naive-ui'
 import { PanelType, useToolbarStore } from '@/store/toolbar'
 import { useEditorStore } from '@/store/editor'
 import { classifications, ComDataType, ComDataDto } from '@/data/system-components'
@@ -204,5 +235,4 @@ const dragOver = (ev: DragEvent) => {
 
 <style lang="scss">
 @import './style';
-@import './tabs';
 </style>
diff --git a/src/views/screen-editor/components-panel/style.scss b/src/views/screen-editor/components-panel/style.scss
index d42e889c..0d369ac9 100644
--- a/src/views/screen-editor/components-panel/style.scss
+++ b/src/views/screen-editor/components-panel/style.scss
@@ -84,6 +84,7 @@ $panel-width: 324px;
   .com-tab-title {
     font-size: 12px;
     width: 100%;
+    height: 16px;
     line-height: 16px;
     color: var(--datav-font-color);
     white-space: nowrap;
@@ -93,16 +94,10 @@ $panel-width: 324px;
     font-weight: normal;
   }
 
-  .el-tabs__item {
-    height: auto;
-    line-height: normal;
-    padding: 14px 5px !important;
-
-    &.is-left {
-      text-align: center;
-    }
+  .n-tabs-tab {
+    text-align: center;
 
-    &.is-active {
+    &.n-tabs-tab--active {
       .com-tab-icon,
       .com-tab-title {
         color: var(--datav-main-color);
@@ -110,25 +105,14 @@ $panel-width: 324px;
     }
   }
 
-  .el-tabs-l2 {
-    .el-tabs__header {
-      width: 60px;
-
-      .el-tabs__nav-wrap {
-        background: var(--datav-left-nav-active-bg);
-      }
-    }
-
-    .el-tabs__active-bar {
-      display: none;
-    }
-
-    .el-tabs__item {
-      text-align: left !important;
-      padding: 16px 7px !important;
+  .n-tabs-l2 {
+    .n-tabs-nav.n-tabs-nav--left {
+      background: var(--datav-left-nav-active-bg);
 
-      &.is-active {
-        background: var(--datav-layer-bg-dark);
+      .n-tabs-tab {
+        &.n-tabs-tab--active {
+          background: var(--datav-layer-bg-dark);
+        }
       }
     }
   }
diff --git a/src/views/screen-editor/components-panel/tabs.scss b/src/views/screen-editor/components-panel/tabs.scss
deleted file mode 100644
index 80a29811..00000000
--- a/src/views/screen-editor/components-panel/tabs.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-.el-tabs {
-  height: 100%;
-
-  .el-tabs__content {
-    height: 100%;
-
-    .el-tab-pane {
-      height: 100%;
-    }
-  }
-
-  .el-tabs__nav-next,
-  .el-tabs__nav-prev {
-    color: #f2f2f2;
-    transition: 0.2s;
-
-    &:hover {
-      color: var(--datav-main-color);
-      background: var(--datav-nav-bg-hover);
-    }
-  }
-}
-
-.el-tabs--left {
-  display: flex;
-  height: 100%;
-
-  .el-tabs__header {
-    width: 48px;
-
-    &.is-left {
-      margin-right: 0;
-    }
-  }
-
-  .el-tabs__nav-wrap {
-    height: 100%;
-    background: var(--datav-left-nav-bg);
-
-    &.is-left {
-      margin-right: 0;
-
-      &::after {
-        right: auto;
-        background-color: transparent;
-      }
-    }
-  }
-
-  .el-tabs__active-bar {
-    background-color: var(--datav-main-color);
-
-    &.is-left {
-      right: auto;
-      min-height: 67px;
-    }
-  }
-
-  .el-tabs__item {
-    padding: 0 16px;
-    color: var(--datav-font-color);
-
-    &:hover {
-      color: var(--datav-main-hover-color);
-    }
-
-    &.is-active {
-      color: var(--datav-main-color);
-      background: var(--datav-left-nav-active-bg);
-    }
-  }
-
-  .el-tabs__content {
-    height: 100%;
-    overflow-y: scroll;
-    background: var(--datav-nav-bg);
-    flex: 1;
-  }
-}
diff --git a/vite.config.ts b/vite.config.ts
index b130c821..7344682c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,6 @@
 import type { ConfigEnv } from 'vite'
 import { loadEnv, defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import ElementPlus from 'unplugin-element-plus/vite'
 import plainText from 'vite-plugin-plain-text'
 
 import { resolve } from 'path'
@@ -20,7 +19,6 @@ export default ({ mode }: ConfigEnv) => {
     base: env.VITE_PUBLIC_PATH,
     plugins: [
       vue(),
-      ElementPlus(),
       plainText(/\.hbs$/),
     ],
     server: {
@@ -50,7 +48,6 @@ export default ({ mode }: ConfigEnv) => {
         'dayjs',
         'echarts',
         'echarts-wordcloud',
-        'element-plus',
         'gsap',
         'html2canvas',
         'js-cookie',

From 1f270cd27226181ff66b6a26a5ffa6cb6e40f961 Mon Sep 17 00:00:00 2001
From: pengxiaotian <673923162@qq.com>
Date: Fri, 25 Aug 2023 18:56:00 +0800
Subject: [PATCH 09/10] =?UTF-8?q?feat(dev):=20=E5=BC=80=E5=8F=91color-mapp?=
 =?UTF-8?q?ing=20ui=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/partials/prop-component-tpl.hbs |   5 +
 .../templates/partials/prop-config-tpl.hbs    |   3 +
 datav-cli-ui/assets/templates/register.ts     |   1 +
 datav-cli-ui/components/config-form-item.vue  |  13 +-
 datav-cli-ui/components/config-form.vue       |   1 +
 datav-cli-ui/components/preview-prop-item.vue |  13 +-
 datav-cli-ui/components/preview-prop.vue      |   8 +-
 datav-cli-ui/domains/prop-data.ts             |  15 +-
 datav-cli-ui/pages/attr-settings.vue          |   2 +-
 package.json                                  |   2 +
 pnpm-lock.yaml                                |  19 +
 src/components/pie/basic-pie/src/basic-pie.ts |  37 +-
 src/components/ui/color-mapping/src/index.vue | 397 ++++++++++----
 .../ui/color-mapping/src/interface.ts         |  25 +
 .../src/scheme-select-popover.vue             |  69 +++
 src/components/ui/color-mapping/src/utils.ts  |  32 ++
 src/components/ui/field/src/index.vue         |  70 +--
 src/data/colors.ts                            |  34 +-
 src/icons/index.ts                            |   3 +
 src/icons/pin-fill.vue                        |  12 +
 src/icons/pin.vue                             |  12 +
 src/icons/sort.vue                            |  12 +
 src/styles/color-mapping.scss                 | 485 +++++++++++++++++-
 src/styles/tooltip.scss                       |   2 +-
 src/utils/color-util.ts                       |  54 ++
 src/utils/util.ts                             |  11 +-
 26 files changed, 1153 insertions(+), 184 deletions(-)
 create mode 100644 src/components/ui/color-mapping/src/interface.ts
 create mode 100644 src/components/ui/color-mapping/src/scheme-select-popover.vue
 create mode 100644 src/components/ui/color-mapping/src/utils.ts
 create mode 100644 src/icons/pin-fill.vue
 create mode 100644 src/icons/pin.vue
 create mode 100644 src/icons/sort.vue
 create mode 100644 src/utils/color-util.ts

diff --git a/datav-cli-ui/assets/templates/partials/prop-component-tpl.hbs b/datav-cli-ui/assets/templates/partials/prop-component-tpl.hbs
index f4389b9e..f97ee30c 100644
--- a/datav-cli-ui/assets/templates/partials/prop-component-tpl.hbs
+++ b/datav-cli-ui/assets/templates/partials/prop-component-tpl.hbs
@@ -93,6 +93,11 @@
   tooltip="{{{config.tip}}}"
   {{/if}}
 />
+{{else if (eq config.component componentTypes.colorMap)}}
+<g-color-mapping
+  label="{{config.alias}}"
+  :data="{{ getPath path virtualPath }}"
+/>
 {{else if (eq config.component componentTypes.radio)}}
 <g-radio-group
   {{#if (and judgeEnum config.whichEnum.field)}}
diff --git a/datav-cli-ui/assets/templates/partials/prop-config-tpl.hbs b/datav-cli-ui/assets/templates/partials/prop-config-tpl.hbs
index 4d72493c..3bb05a25 100644
--- a/datav-cli-ui/assets/templates/partials/prop-config-tpl.hbs
+++ b/datav-cli-ui/assets/templates/partials/prop-config-tpl.hbs
@@ -148,6 +148,9 @@
   tooltip="{{{item.config.tip}}}"
   {{/if}}
   label="{{item.config.alias}}"
+  {{#if (isCustom item.config.component)}}
+  custom="{{{item.config.tip}}}"
+  {{/if}}
 >
   {{> prop-component-tpl
     componentTypes=../componentTypes
diff --git a/datav-cli-ui/assets/templates/register.ts b/datav-cli-ui/assets/templates/register.ts
index ec77f591..5ce921f1 100644
--- a/datav-cli-ui/assets/templates/register.ts
+++ b/datav-cli-ui/assets/templates/register.ts
@@ -69,6 +69,7 @@ Handlebars.registerHelper('isTypeOf', (configList, key, type) => {
   return item ? item.config.type === type : false
 })
 Handlebars.registerHelper('isEmptyArray', (arr: any[]) => !arr || arr.length === 0)
+Handlebars.registerHelper('isCustom', type => type === 'colorMap')
 
 // ------Partials------
 Handlebars.registerPartial('prop-config-tpl', propConfigTpl)
diff --git a/datav-cli-ui/components/config-form-item.vue b/datav-cli-ui/components/config-form-item.vue
index b89aa77e..c3a97f68 100644
--- a/datav-cli-ui/components/config-form-item.vue
+++ b/datav-cli-ui/components/config-form-item.vue
@@ -31,6 +31,12 @@
     :data="pairs"
     is-button
   />
+  <g-color-mapping
+    v-else-if="componentType === componentTypes.colorMap"
+    :data="defaultValue"
+    :label="label"
+    style="width: 332px;"
+  />
   <g-slider
     v-else-if="componentType === componentTypes.slider"
     v-model="numValue"
@@ -86,7 +92,7 @@
 
 <script lang='ts' setup>
 import type { PropType } from 'vue'
-import { GCheckbox, GInput, GInputNumber, GColorPicker, GSlider, GSwitch, GSliderRange, GUploadImage, GSelectImage, GSelectSuggest, GSelectShape, GSelect, GRadioGroup } from '~~/ui-components'
+import { GCheckbox, GInput, GInputNumber, GColorPicker, GSlider, GSwitch, GSliderRange, GUploadImage, GSelectImage, GSelectSuggest, GSelectShape, GSelect, GRadioGroup, GColorMapping } from '~~/ui-components'
 import { PropDataType, ComponentType, AllOptionKeys, getSelectedOptions } from '~~/domains/prop-data'
 
 const props = defineProps({
@@ -98,9 +104,7 @@ const props = defineProps({
     type: String as PropType<ComponentType>,
     required: true,
   },
-  defaultValue: {
-    type: [String, Number, Boolean, Array, Object],
-  },
+  defaultValue: Object as PropType<any>,
   enums: {
     type: Array as PropType<string[]>,
     default: () => [],
@@ -110,6 +114,7 @@ const props = defineProps({
     default: () => [],
   },
   flatValue: Boolean,
+  label: String,
 })
 
 const componentTypes = ref({ ...ComponentType })
diff --git a/datav-cli-ui/components/config-form.vue b/datav-cli-ui/components/config-form.vue
index ee51a440..674a17e2 100644
--- a/datav-cli-ui/components/config-form.vue
+++ b/datav-cli-ui/components/config-form.vue
@@ -62,6 +62,7 @@
               :enums="item.config.enums"
               :pairs="item.config.pairs"
               :flat-value="item.config.flatValue"
+              :label="item.config.alias"
             />
           </n-form-item>
           <n-form-item>
diff --git a/datav-cli-ui/components/preview-prop-item.vue b/datav-cli-ui/components/preview-prop-item.vue
index 1fe3e5a5..4521ce69 100644
--- a/datav-cli-ui/components/preview-prop-item.vue
+++ b/datav-cli-ui/components/preview-prop-item.vue
@@ -55,6 +55,13 @@
     :data="pairs"
     is-button
   />
+  <g-color-mapping
+    v-else-if="componentType === componentTypes.colorMap"
+    :data="defaultValue"
+    :inline="mode"
+    :label="label"
+    :tooltip="tooltip"
+  />
   <g-slider
     v-else-if="componentType === componentTypes.slider"
     v-model="numValue"
@@ -140,7 +147,7 @@
 
 <script lang='ts' setup>
 import type { PropType } from 'vue'
-import { GCheckbox, GInput, GInputNumber, GColorPicker, GSlider, GSwitch, GSliderRange, GUploadImage, GSelectImage, GSelectSuggest, GSelectShape, GSelect, GRadioGroup } from '~~/ui-components'
+import { GCheckbox, GInput, GInputNumber, GColorPicker, GSlider, GSwitch, GSliderRange, GUploadImage, GSelectImage, GSelectSuggest, GSelectShape, GSelect, GRadioGroup, GColorMapping } from '~~/ui-components'
 import { PropDataType, ComponentType, AllOptionKeys, getSelectedOptions } from '~~/domains/prop-data'
 
 const props = defineProps({
@@ -152,9 +159,7 @@ const props = defineProps({
     type: String as PropType<ComponentType>,
     required: true,
   },
-  defaultValue: {
-    type: [String, Number, Boolean, Array, Object],
-  },
+  defaultValue: null,
   min: {
     type: Number,
     default: -Infinity,
diff --git a/datav-cli-ui/components/preview-prop.vue b/datav-cli-ui/components/preview-prop.vue
index 4e810c7c..12bc0b01 100644
--- a/datav-cli-ui/components/preview-prop.vue
+++ b/datav-cli-ui/components/preview-prop.vue
@@ -93,6 +93,7 @@
         :label="item.config.alias"
         :tooltip="item.config.tip"
         :level="level"
+        :custom="isCustom(item.config.component)"
       >
         <preview-prop-item
           :key="item.config.component"
@@ -103,6 +104,7 @@
           :max="item.config.InfiniteMax ? Infinity : item.config.max"
           :step="item.config.step"
           :suffix="item.config.suffix"
+          :label="item.config.alias"
           :enums="item.config.enums"
           :pairs="item.config.pairs"
           :inline="item.config.displayMode"
@@ -116,7 +118,7 @@
 
 <script lang='ts' setup>
 import type { PropType } from 'vue'
-import { PropDataType, PropDto } from '~~/domains/prop-data'
+import { PropDataType, PropDto, ComponentType } from '~~/domains/prop-data'
 import { GField, GFieldCollapse } from '~~/ui-components'
 
 const props = defineProps({
@@ -150,4 +152,8 @@ const judgeDisplay = (item: PropDto) => {
 
   return isok
 }
+
+const isCustom = (type: ComponentType) => {
+  return type === ComponentType.colorMap
+}
 </script>
diff --git a/datav-cli-ui/domains/prop-data.ts b/datav-cli-ui/domains/prop-data.ts
index 072072da..bd051f70 100644
--- a/datav-cli-ui/domains/prop-data.ts
+++ b/datav-cli-ui/domains/prop-data.ts
@@ -1,5 +1,5 @@
 import { isArray, isString } from 'lodash-es'
-import { isNumber, isBool, isObject, getRandomInt } from '@/utils/util'
+import { isNumber, isBool, isObject, getRandomInt, hasOwn } from '@/utils/util'
 import { ToolboxType } from '@/domains/editor'
 import * as selectOptions from '@/data/select-options'
 
@@ -51,6 +51,7 @@ export enum ComponentType {
   valueFormat = 'valueFormat',
   timeFormat = 'timeFormat',
   imageType = 'imageType',
+  colorMap = 'colorMap',
 }
 
 export enum DisplayMode {
@@ -166,10 +167,16 @@ export const initPropData = (data: any, arr: PropDto[], prev: string) => {
       pc.defaultValue = val
     } else if (isObject(val)) {
       pc.type = PropDataType.object
-      pc.displayMode = DisplayMode.nest
-      dto.children = []
       dto.cols = key === '0' ? [] : Object.keys(val)
-      initPropData(val, dto.children, dto.path)
+      if (hasOwn(val, 'mapping') && hasOwn(val, 'scale')) {
+        pc.component = ComponentType.colorMap
+        pc.displayMode = DisplayMode.flat
+        pc.defaultValue = val
+      } else {
+        pc.displayMode = DisplayMode.nest
+        dto.children = []
+        initPropData(val, dto.children, dto.path)
+      }
     } else if (isArray(val) && val.length > 0) {
       pc.type = PropDataType.array
       dto.children = []
diff --git a/datav-cli-ui/pages/attr-settings.vue b/datav-cli-ui/pages/attr-settings.vue
index 61e4748b..3d31a3a6 100644
--- a/datav-cli-ui/pages/attr-settings.vue
+++ b/datav-cli-ui/pages/attr-settings.vue
@@ -98,7 +98,7 @@ const nMessage = useMessage()
 
 const comModules = shallowRef<Record<string, () => Promise<any>>>(null)
 const sysComs = getSystemDataVComponents()
-const comKey = ref<string>(null)
+const comKey = ref<string>('basic-pie')
 const comTsKey = ref('')
 const comJsonKey = ref('')
 const activeTab = ref<'config' | 'code'| 'template'>('config')
diff --git a/package.json b/package.json
index 401725a0..b4d1a5cf 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,8 @@
     "particles.vue3": "^2.6.0",
     "pinia": "^2.0.28",
     "shortid": "^2.2.16",
+    "tinycolor2": "^1.6.0",
+    "tinygradient": "^1.1.5",
     "tsparticles": "^2.6.0",
     "vue": "^3.2.45",
     "vue-echarts": "^6.2.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ddae91df..442bf70d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,6 +53,8 @@ specifiers:
   stylelint: ^14.16.0
   stylelint-config-prettier: ^9.0.4
   stylelint-config-standard: ^29.0.0
+  tinycolor2: ^1.6.0
+  tinygradient: ^1.1.5
   tslib: ^2.4.1
   tsparticles: ^2.6.0
   typescript: ^4.9.4
@@ -86,6 +88,8 @@ dependencies:
   particles.vue3: 2.6.0
   pinia: 2.0.28_prq2uz4lho2pwp6irk4cfkrxwu
   shortid: 2.2.16
+  tinycolor2: 1.6.0
+  tinygradient: 1.1.5
   tsparticles: 2.6.0
   vue: 3.2.45
   vue-echarts: 6.2.4_echarts@5.4.1+vue@3.2.45
@@ -1916,6 +1920,10 @@ packages:
       '@types/node': 18.11.9
     dev: true
 
+  /@types/tinycolor2/1.4.3:
+    resolution: {integrity: sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ==}
+    dev: false
+
   /@types/web-bluetooth/0.0.14:
     resolution: {integrity: sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A==}
     dev: false
@@ -6480,6 +6488,17 @@ packages:
       readable-stream: 3.6.0
     dev: true
 
+  /tinycolor2/1.6.0:
+    resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
+    dev: false
+
+  /tinygradient/1.1.5:
+    resolution: {integrity: sha512-8nIfc2vgQ4TeLnk2lFj4tRLvvJwEfQuabdsmvDdQPT0xlk9TaNtpGd6nNRxXoK6vQhN6RSzj+Cnp5tTQmpxmbw==}
+    dependencies:
+      '@types/tinycolor2': 1.4.3
+      tinycolor2: 1.6.0
+    dev: false
+
   /title-case/3.0.3:
     resolution: {integrity: sha512-e1zGYRvbffpcHIrnuqT0Dh+gEJtDaxDSoG4JAIpq4oDFyooziLBIiYQv0GBT4FUAnUop5uZ1hiIAj7oAF6sOCA==}
     dependencies:
diff --git a/src/components/pie/basic-pie/src/basic-pie.ts b/src/components/pie/basic-pie/src/basic-pie.ts
index ad76c1c8..3c890dcc 100644
--- a/src/components/pie/basic-pie/src/basic-pie.ts
+++ b/src/components/pie/basic-pie/src/basic-pie.ts
@@ -33,34 +33,19 @@ export class BasicPie extends DatavComponent {
         type: 'ordinal',
         scheme: 'cat-7',
         range: [
-          '#32FFA1',
-          '#50BA58',
-          '#00CEFF',
-          '#E7E342',
-          '#FF6A00',
-          '#8C57E4',
-          '#1C81FF',
-        ],
-        pin: [
-          false,
-          false,
-          false,
-          false,
-          false,
-          false,
-          false,
+          '{"stops":[{"offset":1,"color":"rgba(36, 131, 255, 0.97)"},{"offset":100,"color":"#88bafe"}],"angle":90}',
+          '{"stops":[{"offset":0,"color":"rgb(77, 177, 86)"},{"offset":100,"color":"rgb(128, 252, 139)"}],"angle":90}',
+          '{"stops":[{"offset":0,"color":"rgb(5, 186, 242)"},{"offset":99,"color":"rgb(68, 239, 242)"}],"angle":90}',
+          '{"stops":[{"offset":0,"color":"#f2ed29"},{"offset":99,"color":"#f9f68a"}],"angle":90}',
+          '{"stops":[{"offset":0,"color":"rgb(239, 81, 9)"},{"offset":98,"color":"rgb(249, 135, 1)"}],"angle":90}',
+          '{"stops":[{"offset":2,"color":"#8c57e4"},{"offset":100,"color":"rgba(224, 131, 255, 0.97)"}],"angle":90}',
+          '{"stops":[{"offset":0,"color":"rgba(36, 131, 255, 0.97)"},{"offset":99,"color":"rgb(131, 183, 252)"}],"angle":90}',
         ],
+        domain: [0, 166, 332, 498, 664, 830, 1000],
+        pin: [],
         custom: false,
-        domain: [
-          '',
-          '',
-          '',
-          '',
-          '',
-          '',
-          '',
-        ],
-        abnormal: 'transparent',
+        excepted: 'yellow',
+        abnormal: '#808080',
       },
     },
     line: {
diff --git a/src/components/ui/color-mapping/src/index.vue b/src/components/ui/color-mapping/src/index.vue
index 287cd12a..bd90c893 100644
--- a/src/components/ui/color-mapping/src/index.vue
+++ b/src/components/ui/color-mapping/src/index.vue
@@ -1,67 +1,200 @@
 <template>
-  <div
-    class="datav-gui g-color-mapping"
-    :class="[
-      {
-        '--inline': !!inline,
-        '--single': inline === 'inline-single',
-      }
-    ]"
-  >
-    <div class="g-color-mapping-fixed">
-      <n-input
-        :value="fillDto.fixed.value"
-        :size="size"
-        @update:value="handleFixedColor"
-      />
-      <n-color-picker
-        :value="fillDto.fixed.value"
-        :size="size"
-        show-alpha
-        :style="{
-          width: 'var(--n-height)',
-          flex: `0 0 var(--n-height)`
-        }"
-        @update:value="handleFixedColor"
-      />
-    </div>
-    <div class="g-color-mapping-scale">
-      <div class="g-color-mapping-scale-selection">
-        <div>{{ fillDto.scale.scheme }}</div>
-        <n-button text size="small">
-          <n-icon :component="IconArrowRight" />
-        </n-button>
-      </div>
-      <div class="g-color-mapping-scale-config">
-        <n-collapse-transition :show="showPanel">
-          感知度，方法论，组合拳，引爆点，点线面，精细化，差异化，平台化，结构化，影响力，耦合性，便捷性，一致性，端到端，短平快，护城河，体验感，颗粒度
-        </n-collapse-transition>
-      </div>
-    </div>
-    <template v-if="tooltip && label">
+  <div class="datav-gui g-color-mapping">
+    <div class="g-color-mapping-header">
       <n-tooltip placement="top">
         <template #trigger>
-          <span class="g-input__caption-with-description">
-            {{ label }}
-          </span>
+          <n-icon
+            :component="data.mapping ? IconConnect : IconDisconnect"
+            class="g-color-mapping-show"
+            @click="data.mapping = !data.mapping"
+          />
         </template>
-        {{ tooltip }}
+        {{ data.mapping ? '关闭' : '开启' }}视觉映射
       </n-tooltip>
-    </template>
-    <span v-else-if="label" class="g-input__caption">
-      {{ label }}
-    </span>
+      <div class="g-field-title">{{ label }}</div>
+      <div class="g-color-mapping-header-right">
+        <template v-if="data.mapping">
+          <SchemeSelectPopover
+            v-if="!showPanel"
+            :value="data.scale.scheme"
+            :colors="viewColors"
+            :preset-colors="presetColors"
+            is-preset
+            @update:value="selectPresetColor"
+          />
+          <n-icon
+            :component="IconArrowRight"
+            class="--arrow"
+            :style="`transform: rotate(${showPanel ? '90deg' : '0'})`"
+            @click="toggleShowPanel"
+          />
+        </template>
+        <div v-else class="g-color-mapping-fixed">
+          <n-input :value="data.fixed.value" :size="size" />
+          <n-color-picker
+            :value="data.fixed.value"
+            :size="size"
+            show-alpha
+            :style="{
+              width: 'var(--n-height)',
+              flex: `0 0 var(--n-height)`
+            }"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="g-color-mapping-content">
+      <n-collapse-transition :show="showPanel">
+        <div class="g-color-mapping-main">
+          <div class="--setting">
+            <div class="--setting-name">映射类型</div>
+            <div class="--setting-content">
+              <n-radio-group
+                :value="data.scale.type"
+                :size="size"
+                @update:value="onUpdateScaleType"
+              >
+                <n-radio-button value="ordinal" label="名词分类" />
+                <n-radio-button value="linear" label="数值连续" />
+                <n-radio-button value="threshold" label="数值分区" />
+              </n-radio-group>
+            </div>
+          </div>
+          <div class="--setting">
+            <div class="--setting-name">颜色模板</div>
+            <div class="--setting-content">
+              <SchemeSelectPopover
+                :value="data.scale.scheme"
+                :colors="presetColor"
+                :preset-colors="presetColors"
+                @update:value="selectPresetColor"
+              />
+            </div>
+          </div>
+          <div class="--mapping-box">
+            <div class="--mapping-area --ordinal">
+              <div class="--min"></div>
+              <div class="--mapping-main">
+                <div class="--color-area">
+                  <div
+                    v-for="(pc, idx) in presetColor"
+                    :key="idx"
+                    class="--color-editor"
+                  >
+                    <n-icon :component="IconDelete" class="--delete" />
+                    <div class="--color-block color-block">
+                      <span class="--block" :style="`background: ${pc};`"></span>
+                    </div>
+                    <div class="--color-changer --with-pin">
+                      <div class="datav-gui-fill datav-gui-component --normal">
+                        <span class="datav-gui-fill-default">
+                          <span class="--block" :style="`background: ${pc};`"></span>
+                        </span>
+                        <input class="datav-gui-fill-input" style="display: block;">
+                      </div>
+                      <n-tooltip placement="top">
+                        <template #trigger>
+                          <n-icon
+                            :component="IconPinFill"
+                            class="--color-pin"
+                          />
+                        </template>
+                        已「钉住」，颜色不会随切换模板而更改
+                      </n-tooltip>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="--excepted --custom">
+                <div class="--color-area">
+                  <div class="--color-editor">
+                    <n-icon :component="IconDelete" class="--delete" />
+                    <div class="--color-block color-block">
+                      <span class="--block" :style="`background: ${data.scale.abnormal};`"></span>
+                    </div>
+                    <div class="--color-changer --with-pin">
+                      <div class="datav-gui-fill datav-gui-component --normal">
+                        <span class="datav-gui-fill-default">
+                          <span class="--block" :style="`background: ${data.scale.abnormal};`"></span>
+                        </span>
+                        <input class="datav-gui-fill-input" style="display: block;">
+                      </div>
+                      <n-icon
+                        :component="IconPin"
+                        class="--color-pin"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="--value-area">
+                  <div class="--value-editor">
+                    <div class="--color-dot color-block">
+                      <span style="background: rgb(128 128 128);"></span>
+                    </div>
+                    <input
+                      class="datav-input datav-input--disabled"
+                      placeholder="输入字段值"
+                      spellcheck="false"
+                      value="异常值"
+                    >
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="--function-area">
+              <div class="--step-setting">
+                <div class="--setting-name">数量</div>
+                <div class="--setting-content">
+                  <g-input-number
+                    v-model="colorNum"
+                    size="small"
+                  />
+                </div>
+              </div>
+              <span class="--btn">
+                <n-icon :component="IconSort" /> 反序
+              </span>
+              <div class="--custom-setting">
+                <div class="--setting-name" title="自定义映射">自定义映射</div>
+                <div class="--setting-content">
+                  <n-switch
+                    v-model:value="data.scale.custom"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </n-collapse-transition>
+    </div>
   </div>
 </template>
 
 <script lang='ts' setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import type { PropType } from 'vue'
-import { NInput, NColorPicker, NTooltip, NButton, NIcon, NCollapseTransition } from 'naive-ui'
-import { IconArrowRight } from '@/icons'
-import { UPDATE_MODEL_EVENT } from '@/utils/constants'
+import {
+  NIcon, NInput, NColorPicker, NRadioGroup, NRadioButton,
+  NSwitch, NTooltip, NCollapseTransition,
+} from 'naive-ui'
+import tinygradient from 'tinygradient'
+import { cloneDeep } from 'lodash-es'
+import {
+  IconArrowRight, IconConnect, IconDelete, IconDisconnect,
+  IconSort, IconPin, IconPinFill,
+} from '@/icons'
+import { presetCatColors, presetSeqColors, presetDivColors } from '@/data/colors'
+import { jsonToColor } from '@/utils/color-util'
+import GInputNumber from '@/components/ui/input-number'
+import { getDefaultColor } from './utils'
+import { ColorMappingConfig, ColorMappingScaleType } from './interface'
+import SchemeSelectPopover from './scheme-select-popover.vue'
 
-defineProps({
+const props = defineProps({
+  data: {
+    type: Object as PropType<ColorMappingConfig>,
+    required: true,
+  },
   label: {
     type: String,
     default: '',
@@ -70,16 +203,11 @@ defineProps({
     type: String as PropType<'small' | 'medium' | 'large'>,
     default: 'small',
   },
-  inline: {
-    type: [Boolean, String],
-    default: false,
-  },
-  tooltip: String,
 })
-const emits = defineEmits([UPDATE_MODEL_EVENT])
 
 const showPanel = ref(false)
-const fillDto = ref({
+const colorNum = ref(2)
+const fillDto = ref<ColorMappingConfig>({
   mapping: true,
   fixed: {
     type: 'flat',
@@ -89,39 +217,130 @@ const fillDto = ref({
     type: 'ordinal',
     custom: false,
     scheme: 'cat-7',
+    domain: [0, 0, 0, 0, 0, 0, 0],
+    pin: [false, false, false, false, false, false, false],
+    range: ['#32ffa1', '#50ba58', '#00ceff', '#e7e342', '#ff6a00', '#8c57e4', '#1c81ff'],
     abnormal: 'transparent',
     excepted: 'yellow',
-    pin: [
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-    ],
-    range: [
-      '#32FFA1',
-      '#50BA58',
-      '#00CEFF',
-      '#E7E342',
-      '#FF6A00',
-      '#8C57E4',
-      '#1C81FF',
-    ],
-    domain: [
-      '',
-      '',
-      '',
-      '',
-      '',
-      '',
-      '',
-    ],
   },
 })
 
-const handleFixedColor = (value: string | number) => {
-  emits(UPDATE_MODEL_EVENT, value)
+const viewColors = computed(() => {
+  const { scale } = props.data
+  let list = []
+  if (scale.type === 'ordinal') {
+    list = scale.range.map(c => jsonToColor(c))
+  } else if (scale.type === 'linear') {
+    list = [tinygradient(scale.range).css('linear', '90deg')]
+  } else if (scale.type === 'threshold') {
+    list = scale.range
+  }
+  return list
+})
+
+const presetColors = computed(() => {
+  const { scale } = props.data
+  let list = []
+  if (scale.type === 'ordinal') {
+    list = Object.entries(presetCatColors)
+      .map(m => ({
+        scheme: m[0],
+        colors: m[1].slice(0, 6),
+      }))
+  } else if (scale.type === 'linear') {
+    const arr1 = Object.entries(presetSeqColors)
+      .map(([scheme, arr]) => ({
+        scheme,
+        colors: [tinygradient(arr).css('linear', '90deg')],
+      }))
+
+    const arr2 = Object.entries(presetDivColors)
+      .map(([scheme, arr]) => ({
+        scheme,
+        colors: [tinygradient([
+          { color: arr[0], pos: 0 },
+          { color: arr[1], pos: 0.33 },
+          { color: arr[2], pos: 1 },
+        ]).css('linear', '90deg')],
+      }))
+    list = [...arr1, ...arr2]
+  } else if (scale.type === 'threshold') {
+    const arr1 = Object.entries(presetSeqColors)
+      .map(([scheme, arr]) => ({
+        scheme,
+        colors: tinygradient(arr).rgb(6),
+      }))
+    const arr2 = Object.entries(presetDivColors)
+      .map(([scheme, arr]) => ({
+        scheme,
+        colors: getDivColors(arr, 11),
+      }))
+    list = [...arr1, ...arr2]
+  }
+  return list
+})
+
+const presetColor = computed(() => {
+  const pc = presetColors.value.find(m => m.scheme === props.data.scale.scheme)
+  return pc ? pc.colors : []
+})
+
+const getDivColors = (divColors: string[], num: number) => {
+  return tinygradient(divColors).rgb(num).reduce((prev, curr, idx) => {
+    if (idx % 2 === 0) {
+      prev.push(curr)
+    }
+    return prev
+  }, [])
+}
+
+const onUpdateScaleType = (type: ColorMappingScaleType) => {
+  const { scale } = props.data
+  props.data[scale.type] = cloneDeep(scale)
+  props.data.scale = {
+    type,
+    ...(props.data[type] || getDefaultColor(type)),
+  }
+  colorNum.value = props.data.scale.range.length
+}
+
+const selectPresetColor = (val: string) => {
+  props.data.scale.scheme = val
+  const { type } = props.data.scale
+  let colorRange = []
+  if (type === 'ordinal') {
+    colorRange = presetCatColors[val].slice(0, colorNum.value)
+  } else if (type === 'linear') {
+    if (val.startsWith('seq')) {
+      colorRange = tinygradient(presetSeqColors[val]).rgb(colorNum.value)
+    } else if (val.startsWith('div')) {
+      const arr = presetDivColors[val]
+      if (colorNum.value === 2) {
+        colorRange = tinygradient([arr[0], arr[2]]).rgb(colorNum.value)
+      } else if (colorNum.value & 1) {
+        colorRange = tinygradient(arr).rgb(colorNum.value)
+      } else {
+        colorRange = getDivColors(arr, colorNum.value * 2 - 1)
+      }
+    }
+  } else if (type === 'threshold') {
+    if (val.startsWith('seq')) {
+      colorRange = tinygradient(presetSeqColors[val]).rgb(colorNum.value)
+    } else if (val.startsWith('div')) {
+      const arr = presetDivColors[val]
+      if (colorNum.value === 2) {
+        colorRange = tinygradient([arr[0], arr[2]]).rgb(colorNum.value)
+      } else if (colorNum.value & 1) {
+        colorRange = tinygradient(arr).rgb(colorNum.value)
+      } else {
+        colorRange = getDivColors(arr, colorNum.value * 2 - 1)
+      }
+    }
+  }
+  props.data.scale.range = colorRange
+}
+
+const toggleShowPanel = () => {
+  showPanel.value = !showPanel.value
 }
 </script>
diff --git a/src/components/ui/color-mapping/src/interface.ts b/src/components/ui/color-mapping/src/interface.ts
new file mode 100644
index 00000000..95e606ec
--- /dev/null
+++ b/src/components/ui/color-mapping/src/interface.ts
@@ -0,0 +1,25 @@
+export type ColorMappingScaleType = 'ordinal' | 'linear' | 'threshold'
+
+export interface ColorMappingScaleConfig {
+  scheme: string
+  range: string[]
+  domain: number[]
+  pin: boolean[]
+  custom: boolean
+  abnormal: string
+  excepted: string
+}
+
+export interface ColorMappingConfig {
+  mapping: boolean
+  fixed: {
+    type: string
+    value: string
+  }
+  scale: {
+    type: ColorMappingScaleType
+  } & ColorMappingScaleConfig
+  ordinal?: ColorMappingScaleConfig
+  linear?: ColorMappingScaleConfig
+  threshold?: ColorMappingScaleConfig
+}
diff --git a/src/components/ui/color-mapping/src/scheme-select-popover.vue b/src/components/ui/color-mapping/src/scheme-select-popover.vue
new file mode 100644
index 00000000..6aeacb47
--- /dev/null
+++ b/src/components/ui/color-mapping/src/scheme-select-popover.vue
@@ -0,0 +1,69 @@
+<template>
+  <n-popover
+    raw
+    :show-arrow="false"
+    trigger="click"
+    placement="bottom"
+    class="g-color-mapping-scheme-select-popover"
+  >
+    <template #trigger>
+      <div class="g-color-mapping-scheme-select">
+        <div class="--scheme">
+          <div
+            v-for="c in colors"
+            :key="c"
+            class="--block"
+            :style="`background: ${c};`"
+          ></div>
+        </div>
+      </div>
+    </template>
+    <template v-if="isPreset">
+      <div class="--scheme-select-title">当前映射</div>
+      <div class="--scheme-wp">
+        <div class="--scheme">
+          <div
+            v-for="c in colors"
+            :key="c"
+            class="--block"
+            :style="`background: ${c};`"
+          ></div>
+        </div>
+      </div>
+      <div class="--scheme-select-title">选择模板</div>
+    </template>
+    <div
+      v-for="pc in presetColors"
+      :key="pc.scheme"
+      class="--scheme-wp"
+      :class="value === pc.scheme ? '--selected' : ''"
+      @click="selectPresetColor(pc.scheme)"
+    >
+      <div class="--scheme">
+        <div
+          v-for="c in pc.colors"
+          :key="c"
+          class="--block"
+          :style="`background: ${c};`"
+        ></div>
+      </div>
+    </div>
+  </n-popover>
+</template>
+
+<script lang="ts" setup>
+import { NPopover } from 'naive-ui'
+
+defineProps<{
+  value: string
+  colors: string[]
+  presetColors: any[]
+  isPreset?: boolean
+}>()
+
+const emits = defineEmits(['update:value'])
+
+const selectPresetColor = (val: string) => {
+  emits('update:value', val)
+}
+</script>
diff --git a/src/components/ui/color-mapping/src/utils.ts b/src/components/ui/color-mapping/src/utils.ts
new file mode 100644
index 00000000..5d82b49b
--- /dev/null
+++ b/src/components/ui/color-mapping/src/utils.ts
@@ -0,0 +1,32 @@
+import { ColorMappingScaleType } from './interface'
+
+export const getDefaultColor = (scaleType: ColorMappingScaleType) => {
+  if (scaleType === 'ordinal') {
+    return {
+      scheme: 'cat-7',
+      range: [
+        '{"stops":[{"offset":1,"color":"rgba(36, 131, 255, 0.97)"},{"offset":100,"color":"#88bafe"}],"angle":90}',
+        '{"stops":[{"offset":0,"color":"rgb(77, 177, 86)"},{"offset":100,"color":"rgb(128, 252, 139)"}],"angle":90}',
+        '{"stops":[{"offset":0,"color":"rgb(5, 186, 242)"},{"offset":99,"color":"rgb(68, 239, 242)"}],"angle":90}',
+        '{"stops":[{"offset":0,"color":"#f2ed29"},{"offset":99,"color":"#f9f68a"}],"angle":90}',
+        '{"stops":[{"offset":0,"color":"rgb(239, 81, 9)"},{"offset":98,"color":"rgb(249, 135, 1)"}],"angle":90}',
+        '{"stops":[{"offset":2,"color":"#8c57e4"},{"offset":100,"color":"rgba(224, 131, 255, 0.97)"}],"angle":90}',
+        '{"stops":[{"offset":0,"color":"rgba(36, 131, 255, 0.97)"},{"offset":99,"color":"rgb(131, 183, 252)"}],"angle":90}',
+      ],
+      domain: [0, 166, 332, 498, 664, 830, 1000],
+      pin: [],
+      custom: false,
+      excepted: 'yellow',
+      abnormal: '#808080',
+    }
+  }
+  return {
+    scheme: 'seq-7',
+    range: ['#96ccff', '#7fb9ff', '#69a6ff', '#5293ff', '#3b7fff', '#256cff', '#0e59ff'],
+    domain: [0, 166, 332, 498, 664, 830, 1000],
+    pin: [],
+    custom: false,
+    excepted: 'yellow',
+    abnormal: '#808080',
+  }
+}
diff --git a/src/components/ui/field/src/index.vue b/src/components/ui/field/src/index.vue
index d6810cb1..60c16218 100644
--- a/src/components/ui/field/src/index.vue
+++ b/src/components/ui/field/src/index.vue
@@ -7,40 +7,45 @@
       }
     ]"
   >
-    <n-gi class="g-field" v-bind="labelStyle">
-      <i class="g-field-show-placeholder">
-        <n-switch
-          v-if="toggle"
-          :value="modelValue"
-          size="small"
-          @click.stop
-          @update:value="toggleVisible"
-        />
-      </i>
-      <template v-if="tooltip">
-        <n-tooltip placement="top">
-          <template #trigger>
-            <label class="g-field-title-with-description" :title="label">
-              {{ label }}
-            </label>
-          </template>
-          {{ tooltip }}
-        </n-tooltip>
-      </template>
-      <label v-else class="g-field-title" :title="label">
-        {{ label }}
-      </label>
-    </n-gi>
-    <n-gi
-      class="g-field-container"
-      :class="{ '--flat': isFlat }"
-      v-bind="contentStyle"
-    >
+    <n-gi v-if="custom" :span="24">
       <slot></slot>
-      <span v-if="caption" class="g-field-caption" :title="caption">
-        {{ caption }}
-      </span>
     </n-gi>
+    <template v-else>
+      <n-gi class="g-field" v-bind="labelStyle">
+        <i class="g-field-show-placeholder">
+          <n-switch
+            v-if="toggle"
+            :value="modelValue"
+            size="small"
+            @click.stop
+            @update:value="toggleVisible"
+          />
+        </i>
+        <template v-if="tooltip">
+          <n-tooltip placement="top">
+            <template #trigger>
+              <label class="g-field-title-with-description" :title="label">
+                {{ label }}
+              </label>
+            </template>
+            {{ tooltip }}
+          </n-tooltip>
+        </template>
+        <label v-else class="g-field-title" :title="label">
+          {{ label }}
+        </label>
+      </n-gi>
+      <n-gi
+        class="g-field-container"
+        :class="{ '--flat': isFlat }"
+        v-bind="contentStyle"
+      >
+        <slot></slot>
+        <span v-if="caption" class="g-field-caption" :title="caption">
+          {{ caption }}
+        </span>
+      </n-gi>
+    </template>
   </n-grid>
 </template>
 
@@ -72,6 +77,7 @@ const props = defineProps({
     type: Number,
     default: 9,
   },
+  custom: Boolean,
 })
 const emits = defineEmits([UPDATE_MODEL_EVENT])
 
diff --git a/src/data/colors.ts b/src/data/colors.ts
index 7db9747d..2f2d96c0 100644
--- a/src/data/colors.ts
+++ b/src/data/colors.ts
@@ -1,27 +1,29 @@
-export const presetCatColors = {
+export const presetCatColors: Record<string, string[]> = {
+  'cat-7': ['#ff6a00', '#1c81ff', '#50ba58', '#3dffdc', '#fbe947', '#1dcfff', '#725cfa', '#4fdd5a', '#ffa900', '#f94144', '#0260ff', '#4d9eff'],
   'cat-1': ['#12939a', '#ddb27c', '#88572c', '#ff991f', '#f15c17', '#223f9a', '#46aeff', '#fffb76', '#79954f', '#978b63', '#ff9c6f', '#98b1ff'],
   'cat-2': ['#8cd4c6', '#feffb3', '#bfbadb', '#fa8073', '#80b1d2', '#fcb460', '#b5dd6b', '#fbcee2', '#d9d9d9', '#bf7fbc', '#ccecc7', '#f6e44b'],
   'cat-3': ['#a2cfe6', '#1f77b6', '#b3df8a', '#2da32b', '#fc9a99', '#f7393b', '#fdbe6f', '#fe7f02', '#cbb1d8', '#6a3d9c', '#fdff99', '#b1592b'],
   'cat-4': ['#8edbad', '#12d862', '#6aa7ff', '#0058d7', '#ed95ff', '#b72ad4', '#ffdd97', '#fead02', '#63e5b6', '#3d9c7a', '#6261ff', '#302eef'],
   'cat-5': ['#b3e2cd', '#66c2a5', '#fdcdac', '#d88c6f', '#cbd5e8', '#8da0cb', '#f4cae4', '#c391b0', '#e6f5c9', '#a7ca6f', '#fff2ae', '#e5d177'],
   'cat-6': ['#d15b5b', '#41994a', '#5f5da5', '#bc6c89', '#d77e55', '#468085', '#035c9f', '#8862c7', '#346e8c', '#d2b144', '#a66142', '#485b98'],
-  'cat-7': ['#32ffa1', '#50ba58', '#00ceff', '#e7e342', '#ff6a00', '#8c57e4', '#1c81ff', '#fffb76', '#79954f', '#978b63', '#ff9c6f', '#98b1ff'],
 }
 
-export const presetSeqColors = {
-  'seq-1': ['#ffffcc','#f8fecc','#f1fecc','#ebfdcd','#e4fccd','#ddfccd','#d6fbcd','#cffacd','#c9face','#c2f9ce','#bbf8ce','#b4f8ce','#adf7ce','#a7f6cf','#a0f6cf','#99f5cf','#92f5cf','#8cf4d0','#85f3d0','#7ef3d0','#77f2d0','#70f1d0','#6af1d1','#63f0d1','#5cefd1','#55efd1','#4eeed1','#48edd2','#41edd2','#3aecd2'],
-  'seq-2': ['#34fff5','#33f9f4','#33f2f4','#32ecf3','#31e5f2','#31dff1','#30d8f1','#2fd2f0','#2ecbef','#2ec5ee','#2dbeee','#2cb8ed','#2cb1ec','#2babec','#2aa4eb','#2a9eea','#2997e9','#2891e9','#288ae8','#2784e7','#267de7','#2677e6','#2570e5','#246ae4','#2363e4','#235de3','#2256e2','#2150e1','#2149e1','#2043e0'],
-  'seq-3': ['#ffdc84','#ffd782','#ffd281','#ffcd7f','#ffc87e','#ffc37c','#ffbe7a','#ffb979','#feb477','#feaf76','#feaa74','#fea573','#fea071','#fe9b6f','#fe966e','#fe906c','#fe8b6b','#fe8669','#fe8167','#fe7c66','#fe7764','#fe7263','#fd6d61','#fd6860','#fd635e','#fd5e5c','#fd595b','#fd5459','#fd4f58','#fd4a56'],
-  'seq-4': ['#6dd400','#69d508','#65d610','#62d818','#5ed920','#5ada28','#56db30','#53dc38','#4fde41','#4bdf49','#47e051','#44e159','#40e261','#3ce469','#38e571','#35e679','#31e781','#2de989','#29ea91','#26eb99','#22eca1','#1eeda9','#1aefb2','#17f0ba','#13f1c2','#0ff2ca','#0bf3d2','#08f5da','#04f6e2','#00f7ea'],
-  'seq-5': ['#d74aff','#d34bff','#d04cff','#cc4cff','#c94dff','#c54eff','#c24fff','#be50ff','#bb51ff','#b751ff','#b352ff','#b053ff','#ac54ff','#a955ff','#a556ff','#a256ff','#9e57ff','#9b58ff','#9759ff','#945aff','#905bff','#8c5bff','#895cff','#855dff','#825eff','#7e5fff','#7b60ff','#7760ff','#7461ff','#7062ff'],
-  'seq-6': ['#44d7b6','#4ad4b1','#51d0ad','#57cda8','#5ec9a3','#64c69f','#6bc29a','#71bf95','#78bb90','#7eb88c','#84b587','#8bb182','#91ae7e','#98aa79','#9ea774','#a5a370','#aba06b','#b29c66','#b89962','#bf955d','#c59258','#cb8f54','#d28b4f','#d8884a','#df8445','#e58141','#ec7d3c','#f27a37','#f97633','#ff732e'],
+export const presetSeqColors: Record<string, string[]> = {
+  'seq-7': ['#96ccff', '#0e59ff'],
+  'seq-1': ['#ffffcc', '#3aecd2'],
+  'seq-2': ['#34fff5', '#2043e0'],
+  'seq-3': ['#ffdc84', '#fd4a56'],
+  'seq-4': ['#6dd400', '#00f7ea'],
+  'seq-5': ['#d74aff', '#7062ff'],
+  'seq-6': ['#44d7b6', '#ff732e'],
 }
 
-export const presetDivColors = {
-  'div-1': ['#ff5738','#fc6246','#f86d53','#f57961','#f2846f','#ee8f7d','#eb9a8a','#e8a698','#e5b1a6','#e1bcb4','#dec7c1','#dbd3cf','#d7dedd','#d4e9ea','#d1f4f8','#c8f6ff','#baefff','#abe7ff','#9de0ff','#8fd8ff','#80d1ff','#72caff','#64c2ff','#56bbff','#47b3ff','#39acff','#2ba4ff','#1d9dff','#0e95ff','#008eff'],
-  'div-2': ['#7845ff','#8150fe','#8b5bfd','#9465fd','#9d70fc','#a77bfb','#b086fa','#b990f9','#c29bf8','#cca6f8','#d5b1f7','#debbf6','#e8c6f5','#f1d1f4','#fadcf3','#ffdbee','#ffd0e5','#ffc5db','#ffb9d2','#ffaec8','#ffa3bf','#ff97b5','#ff8cac','#ff81a2','#ff7699','#ff6a8f','#ff5f86','#ff547c','#ff4873','#ff3d69'],
-  'div-3': ['#ff683d','#ff704a','#ff7956','#ff8163','#ff896f','#ff927c','#ff9a88','#ffa295','#ffaba1','#ffb3ae','#ffbbbb','#ffc4c7','#ffccd4','#ffd4e0','#ffdded','#f6dff1','#e5dcec','#d3d9e7','#c1d5e2','#b0d2dd','#9eced8','#8dcbd3','#7bc8ce','#6ac4c9','#58c1c4','#46bec0','#35babb','#23b7b6','#12b3b1','#00b0ac'],
-  'div-4': ['#5b0bff','#661afe','#7229fd','#7d37fd','#8846fc','#9455fb','#9f64fa','#aa72f9','#b581f8','#c190f8','#cc9ff7','#d7adf6','#e3bcf5','#eecbf4','#f9daf3','#ffdbf2','#ffd0f1','#ffc5f0','#ffb9ef','#ffaeed','#ffa3ec','#ff97eb','#ff8cea','#ff81e8','#ff76e7','#ff6ae6','#ff5fe5','#ff54e3','#ff48e2','#ff3de1'],
-  'div-5': ['#ff704c','#ff7858','#ff8063','#ff876f','#ff8f7a','#ff9786','#ff9f91','#ffa79d','#ffaea8','#ffb6b4','#ffbebf','#ffc6cb','#ffced6','#ffd5e2','#ffdded','#ffdfeb','#ffdada','#ffd6c9','#ffd2b8','#ffcda8','#ffc997','#ffc486','#ffc075','#ffbb65','#ffb754','#ffb343','#ffae32','#ffaa22','#ffa511','#ffa100'],
-  'div-6': ['#4db156','#59b461','#66b86c','#72bb76','#7ebe81','#8ac28c','#97c597','#a3c8a2','#afcbad','#bbcfb7','#c8d2c2','#d4d5cd','#e0d9d8','#eddce3','#f9dfee','#f8def3','#ebd8f4','#ded3f5','#d0cdf6','#c3c7f7','#b5c2f8','#a8bcf8','#9bb6f9','#8db0fa','#80abfb','#73a5fc','#659ffd','#5899fd','#4a94fe','#3d8eff'],
+export const presetDivColors: Record<string, string[]> = {
+  'div-7': ['#1c81ff', '#ffffff', '#ff6a00'],
+  'div-1': ['#ff5738', '#cffaff', '#008eff'],
+  'div-2': ['#7845ff', '#ffe1f3', '#ff3d69'],
+  'div-3': ['#ff683d', '#ffe1f3', '#00b0ac'],
+  'div-4': ['#5b0bff', '#ffe1f3', '#ff3de1'],
+  'div-5': ['#ff704c', '#ffe1f3', '#ffa100'],
+  'div-6': ['#4db156', '#ffe1f3', '#3d8eff'],
 }
diff --git a/src/icons/index.ts b/src/icons/index.ts
index 1ee9be41..24d702c6 100644
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -106,4 +106,7 @@ export { default as IconShapePin } from './shape-pin.vue'
 export { default as IconShapeAirplane } from './shape-airplane.vue'
 export { default as IconConnect } from './connect.vue'
 export { default as IconDisconnect } from './disconnect.vue'
+export { default as IconSort } from './sort.vue'
+export { default as IconPin } from './pin.vue'
+export { default as IconPinFill } from './pin-fill.vue'
 // -- prepend export placeholder --
diff --git a/src/icons/pin-fill.vue b/src/icons/pin-fill.vue
new file mode 100644
index 00000000..f3abc65b
--- /dev/null
+++ b/src/icons/pin-fill.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg
+    t="1692959967951"
+    class="icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="9453"
+    width="200"
+    height="200"
+  ><path d="M648.728381 130.779429a73.142857 73.142857 0 0 1 22.674286 15.433142l191.561143 191.756191a73.142857 73.142857 0 0 1-22.137905 118.564571l-67.876572 30.061715-127.341714 127.488-10.093714 140.239238a73.142857 73.142857 0 0 1-124.684191 46.445714l-123.66019-123.782095-210.724572 211.699809-51.833904-51.614476 210.846476-211.821714-127.926857-128.024381a73.142857 73.142857 0 0 1 46.299428-124.635429l144.237715-10.776381 125.074285-125.220571 29.379048-67.779048a73.142857 73.142857 0 0 1 96.207238-38.034285z" p-id="9454" /></svg>
+</template>
diff --git a/src/icons/pin.vue b/src/icons/pin.vue
new file mode 100644
index 00000000..d81dc27f
--- /dev/null
+++ b/src/icons/pin.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg
+    t="1692959957220"
+    class="icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="9314"
+    width="200"
+    height="200"
+  ><path d="M648.728381 130.779429a73.142857 73.142857 0 0 1 22.674286 15.433142l191.561143 191.756191a73.142857 73.142857 0 0 1-22.137905 118.564571l-67.876572 30.061715-127.341714 127.488-10.093714 140.239238a73.142857 73.142857 0 0 1-124.684191 46.445714l-123.66019-123.782095-210.724572 211.699809-51.833904-51.614476 210.846476-211.821714-127.926857-128.024381a73.142857 73.142857 0 0 1 46.299428-124.635429l144.237715-10.776381 125.074285-125.220571 29.379048-67.779048a73.142857 73.142857 0 0 1 96.207238-38.034285z m-29.086476 67.120761l-34.913524 80.530286-154.087619 154.331429-171.398095 12.751238 303.323428 303.542857 12.044191-167.399619 156.233143-156.428191 80.384-35.59619-191.585524-191.73181z" p-id="9315" /></svg>
+</template>
diff --git a/src/icons/sort.vue b/src/icons/sort.vue
new file mode 100644
index 00000000..0b37f59c
--- /dev/null
+++ b/src/icons/sort.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg
+    t="1692959936783"
+    class="icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="9175"
+    width="200"
+    height="200"
+  ><path d="M673.158095 252.830476v634.026667h-71.923809V172.251429c0-10.142476 4.022857-19.846095 11.215238-26.989715a38.546286 38.546286 0 0 1 54.296381 0L926.47619 403.553524l-50.883047 50.566095-202.435048-201.289143zM350.841905 768.121905V134.095238h71.923809v719.823238l-0.902095 6.460953c-1.26781 8.045714-2.56 9.728-9.703619 18.992761l-8.045714 4.388572c-17.92 9.45981-20.577524 7.996952-43.154286-4.388572L97.52381 617.374476l50.883047-50.541714 202.435048 201.264762z" p-id="9176" /></svg>
+</template>
diff --git a/src/styles/color-mapping.scss b/src/styles/color-mapping.scss
index df8ac1f6..56859dff 100644
--- a/src/styles/color-mapping.scss
+++ b/src/styles/color-mapping.scss
@@ -2,12 +2,495 @@
   width: 100%;
 }
 
+.g-color-mapping-header {
+  width: 100%;
+  border: none;
+  font-size: 12px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .g-color-mapping-show {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 4px;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--datav-gui-hover-color);
+    }
+  }
+
+  .g-field-title {
+    flex: 1;
+  }
+}
+
+.g-color-mapping-header-right {
+  width: 196px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  .--arrow {
+    font-size: 14px;
+    cursor: pointer;
+    margin-left: 4px;
+    transition: transform 0.3s ease-in-out;
+
+    &:hover {
+      color: var(--datav-gui-hover-color);
+    }
+  }
+}
+
+// .g-color-mapping-content {
+//   margin-top: 8px;
+// }
+
+.g-color-mapping-main {
+  padding: 0 8px 0 20px;
+
+  .--setting {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 8px 0;
+
+    .--setting-name {
+      flex: 1;
+      font-size: 12px;
+      color: var(--datav-gui-font-color-1);
+    }
+
+    .--setting-content {
+      width: 196px;
+    }
+  }
+
+  .--mapping-box {
+    width: 100%;
+    height: 260px;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--datav-gui-component-border-color);
+    background: var(--datav-gui-bgcolor-front);
+
+    .--mapping-area {
+      width: 100%;
+      flex: 1;
+      height: 0;
+      overflow-x: hidden;
+      overflow-y: scroll;
+      padding: 8px 12px 8px 0;
+      background: var(--datav-gui-component-bgcolor);
+      position: relative;
+
+      .--min,
+      .--max {
+        width: 100%;
+        height: 16px;
+        line-height: 16px;
+        font-size: 12px;
+        padding-left: 20px;
+        color: var(--datav-gui-font-color-description);
+      }
+
+      .--mapping-main {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        position: relative;
+      }
+
+      .--color-area {
+        width: 100%;
+      }
+
+      .--color-editor {
+        position: relative;
+        width: 100%;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .--delete {
+          width: 24px;
+          height: 100%;
+          font-size: 14px;
+          color: var(--datav-gui-font-color-1);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .--color-block {
+          width: 12px;
+          height: 100%;
+        }
+
+        &:first-child {
+          .--color-block {
+            border-top-left-radius: 2px;
+            border-top-right-radius: 2px;
+          }
+        }
+
+        .--color-changer {
+          flex: 1;
+          height: 24px;
+          margin-left: 20px;
+          border: 1px solid var(--datav-gui-component-border-color);
+          background-color: var(--datav-gui-bgcolor-back);
+          border-radius: 2px;
+          transition: width 0.3s ease-in-out;
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .datav-gui-fill {
+            background: none;
+            border: none;
+            padding-right: 6px;
+
+            .datav-gui-fill-default {
+              border: 1px solid var(--datav-gui-component-border-color);
+              background-image: url(data:image/png;base64,R0lGODdhCgAKAPAAAOXl5f///ywAAAAACgAKAEACEIQdqXt9GxyETrI279OIgwIAOw==);
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              width: 24px;
+              height: 14px;
+              border-radius: 2px;
+              overflow: hidden;
+              cursor: pointer;
+              margin-left: 5px;
+
+              > .--block {
+                display: block;
+                width: 100%;
+                height: 100%;
+              }
+            }
+
+            .datav-gui-fill-input {
+              background: transparent;
+              padding-left: 5px;
+              border: none;
+              width: 0;
+              flex: 1;
+              font-size: 12px;
+              color: var(--datav-gui-font-color-description);
+            }
+          }
+
+          .--color-pin {
+            font-size: 14px;
+            padding-right: 4px;
+            color: var(--datav-gui-font-color-description);
+            position: absolute;
+            right: 0;
+            top: 4px;
+            cursor: pointer;
+            font-style: normal;
+            transition: transform 0.3s ease-in-out;
+
+            &:hover {
+              color: var(--datav-gui-font-color-base);
+            }
+          }
+
+          &.--with-pin {
+            .datav-gui-fill {
+              padding-right: 20px;
+            }
+          }
+
+          &::before {
+            content: '';
+            display: block;
+            width: 4px;
+            height: 4px;
+            background: #fff;
+            border-radius: 4px;
+            position: absolute;
+            left: -29px;
+          }
+
+          &::after {
+            content: '';
+            display: block;
+            height: 1px;
+            width: 26px;
+            position: absolute;
+            left: -28px;
+            border-top: 1px dotted #fff;
+          }
+
+          &:hover {
+            border-color: var(--datav-gui-primary-color);
+          }
+        }
+      }
+
+      .--excepted {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        position: relative;
+
+        &:last-child {
+          margin-top: 12px;
+        }
+
+        &.--custom {
+          .--color-area {
+            width: 58%;
+          }
+
+          .--value-area {
+            width: 42%;
+            padding-left: 20px;
+          }
+        }
+      }
+
+      .--value-editor {
+        position: relative;
+        width: 100%;
+        height: 36px;
+        display: flex;
+        align-items: center;
+
+        &::before {
+          content: '';
+          width: 20px;
+          height: 1px;
+          display: block;
+          border-top: 1px dotted var(--datav-gui-font-color-description);
+          position: absolute;
+          left: -20px;
+        }
+
+        .--color-dot {
+          display: block;
+          width: 6px;
+          height: 6px;
+          border-radius: 3px;
+          border: 1px solid var(--datav-gui-component-border-color);
+          position: absolute;
+          left: -3px;
+        }
+
+        .datav-input {
+          display: block;
+          border-radius: 2px;
+          height: 24px;
+          width: 100%;
+          background: var(--datav-gui-bgcolor-back);
+        }
+      }
+    }
+
+    .--function-area {
+      width: 100%;
+      height: 34px;
+      line-height: 34px;
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+
+      .--step-setting {
+        margin: 0 4px 0 8px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+
+        .--setting-name {
+          margin-right: 4px;
+        }
+
+        .--setting-content {
+          width: 50px;
+        }
+      }
+
+      .--btn {
+        cursor: pointer;
+        padding: 0 4px;
+        display: flex;
+        align-items: center;
+        color: var(--datav-gui-primary-color);
+      }
+
+      .--custom-setting {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        height: 100%;
+        padding-right: 8px;
+
+        .--setting-name {
+          height: 100%;
+          padding-right: 4px;
+          max-width: 70px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  .color-block {
+    background-image: url(data:image/png;base64,R0lGODdhCgAKAPAAAOXl5f///ywAAAAACgAKAEACEIQdqXt9GxyETrI279OIgwIAOw==);
+    overflow: hidden;
+
+    > .--block {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .datav-gui-fill {
+    width: 100%;
+    height: 24px;
+    background: var(--datav-gui-component-bgcolor);
+    border: 1px solid var(--datav-gui-component-border-color);
+    font-size: 12px;
+    color: var(--datav-gui-font-color-1);
+    outline: none;
+    box-shadow: none;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+  }
+
+  .datav-input.datav-input--disabled {
+    line-height: 16px;
+    font-size: 12px;
+    color: var(--datav-font-color-disabled);
+    cursor: not-allowed;
+    border: var(--datav-border-disabled);
+  }
+}
+
 .g-color-mapping-fixed {
   display: flex;
   justify-content: space-between;
+  width: 100%;
 }
 
-.g-color-mapping-scale-selection {
+.g-color-mapping-scheme-select {
+  width: calc(196px - 18px);
+  flex: 1;
+  height: 28px;
+  line-height: 28px;
+  background: var(--datav-gui-component-bgcolor);
+  border: 1px solid var(--datav-gui-component-border-color);
+  padding: 9px 6px;
+  cursor: pointer;
   display: flex;
+  align-items: center;
   justify-content: space-between;
+
+  &:hover {
+    border-color: var(--datav-gui-primary-color);
+  }
+
+  .--scheme {
+    flex: 1;
+    height: 100%;
+    border-radius: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .--block {
+    flex: 1;
+    height: 100%;
+
+    &:first-child {
+      border-radius: 2px 0 0 2px;
+    }
+
+    &:last-child {
+      border-radius: 0 2px 2px 0;
+    }
+  }
+}
+
+.g-color-mapping-scheme-select-popover {
+  max-height: 254px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 4px 8px 8px;
+  background: var(--datav-gui-component-bgcolor);
+
+  .--scheme-wp {
+    width: 158px;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family: sans-serif;
+    font-size: 12px;
+    border: 1px solid transparent;
+    cursor: pointer;
+
+    &.--selected,
+    &:hover {
+      background: var(--datav-gui-bgcolor-back);
+      border-color: var(--datav-gui-component-bgcolor-hover);
+    }
+
+    .--scheme {
+      width: 100%;
+      height: 8px;
+      border-radius: 2px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .--block {
+      flex: 1;
+      height: 100%;
+
+      &:first-child {
+        border-radius: 2px 0 0 2px;
+      }
+
+      &:last-child {
+        border-radius: 0 2px 2px 0;
+      }
+    }
+  }
+
+  .--scheme-select-title {
+    width: 100%;
+    height: 24px;
+    line-height: 24px;
+    font-size: 12px;
+    margin-top: 8px;
+    border-bottom: 1px solid var(--datav-gui-border-color);
+    color: var(--datav-gui-font-color-2);
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
diff --git a/src/styles/tooltip.scss b/src/styles/tooltip.scss
index 2d86dc91..4982fe84 100644
--- a/src/styles/tooltip.scss
+++ b/src/styles/tooltip.scss
@@ -1,3 +1,3 @@
 .n-tooltip {
-  max-width: 215px;
+  max-width: 227px;
 }
diff --git a/src/utils/color-util.ts b/src/utils/color-util.ts
new file mode 100644
index 00000000..40982258
--- /dev/null
+++ b/src/utils/color-util.ts
@@ -0,0 +1,54 @@
+export const isColor = (targetColor: string) => {
+  const opt = new Option()
+  opt.style.background = targetColor
+  return !!opt.style.background
+}
+
+export const colorToJson = (targetColor: string, defaultColor: string) => {
+  if (targetColor) {
+    const opt = new Option()
+    let isGradient = false
+    const arr = targetColor.split(';').map(m => m.trim())
+    if (arr.length > 2) {
+      isGradient = true
+      let str = arr[0]
+      for (let i = 1; i < arr.length; i++) {
+        str += `, ${arr[i]}%`
+      }
+      opt.style.background = `linear-gradient(${str})`
+    } else {
+      opt.style.background = targetColor
+    }
+
+    if (opt.style.background) {
+      if (isGradient) {
+        const angle = parseFloat(arr[0])
+        const stops = []
+        for (let i = 1; i < arr.length; i++) {
+          const [color, offset] = arr[i].split(' ')
+          stops.push({
+            color: color.trim(),
+            offset: parseFloat(offset),
+          })
+        }
+        return JSON.stringify({ angle, stops })
+      }
+      return targetColor
+    }
+  }
+  return defaultColor
+}
+
+export const jsonToColor = (colorStr: string, transform = true) => {
+  if (isColor(colorStr)) {
+    return colorStr
+  }
+
+  const { angle, stops } = JSON.parse(colorStr)
+  let str = `${angle}deg`
+  for (let i = 0; i < stops.length; i++) {
+    const { color, offset } = stops[i]
+    str += transform ? `,${color} ${offset}%` : `;${color} ${offset}`
+  }
+  return transform ? `linear-gradient(${str})` : str
+}
diff --git a/src/utils/util.ts b/src/utils/util.ts
index af450fb0..8c70df1f 100644
--- a/src/utils/util.ts
+++ b/src/utils/util.ts
@@ -2,7 +2,6 @@ import { isString } from 'lodash-es'
 import shortid from 'shortid'
 
 const hasOwnProperty = Object.prototype.hasOwnProperty
-export const hasOwn = (val: object, key: string | symbol) => hasOwnProperty.call(val, key)
 
 /**
  * Generate shortId
@@ -25,12 +24,14 @@ export const isEdge = () => navigator.userAgent.indexOf('Edge') > -1
 export const isFirefox = () => !!window.navigator.userAgent.match(/firefox/i)
 export const isMac = () => /macintosh|mac os x/i.test(navigator.userAgent)
 
-export const isBool = (val: unknown) => typeof val === 'boolean'
-export const isNumber = (val: unknown) => typeof val === 'number'
-export const isUndefined = (val: unknown) => val === void 0
-export const isObject = (val: unknown) => Object.prototype.toString.call(val) === '[object Object]'
+export const isBool = (val: unknown): val is boolean => typeof val === 'boolean'
+export const isNumber = (val: unknown): val is number => typeof val === 'number'
+export const isUndefined = (val: unknown): val is undefined => val === void 0
+export const isObject = (val: unknown): val is object => Object.prototype.toString.call(val) === '[object Object]'
 export const isUrl = (val: string) => /^[a-zA-z]+:\/\/[^\s]*$/.test(val)
 
+export const hasOwn = (val: object, key: string | symbol) => hasOwnProperty.call(val, key)
+
 export const macMetaOrCtrl = (ev: MouseEvent | KeyboardEvent) => {
   const ismac = isMac()
   return (!ismac && ev.ctrlKey) || (ismac && ev.metaKey)

From 7e49461ba44e313fca9510453d43d79ba43dae1c Mon Sep 17 00:00:00 2001
From: pengxiaotian <673923162@qq.com>
Date: Fri, 1 Sep 2023 17:54:00 +0800
Subject: [PATCH 10/10] =?UTF-8?q?feat(dev):=20=E5=BC=80=E5=8F=91color-mapp?=
 =?UTF-8?q?ing=20ui=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 pnpm-lock.yaml                                |   3 +-
 src/components/pie/basic-pie/src/basic-pie.ts |   4 +-
 .../ui/color-mapping/src/color-editor.vue     |  64 ++++
 src/components/ui/color-mapping/src/index.vue | 361 +++++++++++-------
 .../ui/color-mapping/src/interface.ts         |   2 +-
 src/components/ui/color-mapping/src/utils.ts  |  12 +-
 .../ui/color-mapping/src/value-editor.vue     |  56 +++
 src/components/ui/input-number/src/index.vue  |  27 +-
 src/components/ui/input/src/new-input.vue     |   3 +-
 src/styles/color-mapping.scss                 | 140 +++----
 src/styles/input.scss                         |   2 +-
 src/styles/themes/naive-ui-theme-overrides.ts |  12 +
 13 files changed, 470 insertions(+), 217 deletions(-)
 create mode 100644 src/components/ui/color-mapping/src/color-editor.vue
 create mode 100644 src/components/ui/color-mapping/src/value-editor.vue

diff --git a/package.json b/package.json
index b4d1a5cf..f90efa0d 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "@types/lodash-es": "^4.17.6",
     "@types/mockjs": "^1.0.7",
     "@types/shortid": "^0.0.29",
+    "@types/tinycolor2": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^5.46.0",
     "@typescript-eslint/parser": "^5.46.0",
     "@vitejs/plugin-vue": "^3.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 442bf70d..258f3b38 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,6 +12,7 @@ specifiers:
   '@types/lodash-es': ^4.17.6
   '@types/mockjs': ^1.0.7
   '@types/shortid': ^0.0.29
+  '@types/tinycolor2': ^1.4.3
   '@typescript-eslint/eslint-plugin': ^5.46.0
   '@typescript-eslint/parser': ^5.46.0
   '@vitejs/plugin-vue': ^3.2.0
@@ -107,6 +108,7 @@ devDependencies:
   '@types/lodash-es': 4.17.6
   '@types/mockjs': 1.0.7
   '@types/shortid': 0.0.29
+  '@types/tinycolor2': 1.4.3
   '@typescript-eslint/eslint-plugin': 5.46.0_5mle7isnkfgjmrghnnczirv6iy
   '@typescript-eslint/parser': 5.46.0_ha6vam6werchizxrnqvarmz2zu
   '@vitejs/plugin-vue': 3.2.0_vite@3.2.5+vue@3.2.45
@@ -1922,7 +1924,6 @@ packages:
 
   /@types/tinycolor2/1.4.3:
     resolution: {integrity: sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ==}
-    dev: false
 
   /@types/web-bluetooth/0.0.14:
     resolution: {integrity: sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A==}
diff --git a/src/components/pie/basic-pie/src/basic-pie.ts b/src/components/pie/basic-pie/src/basic-pie.ts
index 3c890dcc..eaebc4c8 100644
--- a/src/components/pie/basic-pie/src/basic-pie.ts
+++ b/src/components/pie/basic-pie/src/basic-pie.ts
@@ -41,8 +41,8 @@ export class BasicPie extends DatavComponent {
           '{"stops":[{"offset":2,"color":"#8c57e4"},{"offset":100,"color":"rgba(224, 131, 255, 0.97)"}],"angle":90}',
           '{"stops":[{"offset":0,"color":"rgba(36, 131, 255, 0.97)"},{"offset":99,"color":"rgb(131, 183, 252)"}],"angle":90}',
         ],
-        domain: [0, 166, 332, 498, 664, 830, 1000],
-        pin: [],
+        domain: ['', '', '', '', '', '', ''],
+        pin: [false, false, false, false, false, false, false],
         custom: false,
         excepted: 'yellow',
         abnormal: '#808080',
diff --git a/src/components/ui/color-mapping/src/color-editor.vue b/src/components/ui/color-mapping/src/color-editor.vue
new file mode 100644
index 00000000..61f586b4
--- /dev/null
+++ b/src/components/ui/color-mapping/src/color-editor.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="--color-editor">
+    <n-icon v-if="showDelete" :component="IconDelete" class="--delete" />
+    <i v-else class="--delete"></i>
+    <div
+      class="--color-block g-color-mapping__color-block"
+      :style="{
+        visibility: hideColorBlock ? 'hidden' : 'visible'
+      }"
+    >
+      <span class="--block" :style="`background: ${color};`"></span>
+    </div>
+    <div class="--color-changer --with-pin">
+      <div class="--color-fill">
+        <span class="--color-fill-default g-color-mapping__color-block">
+          <span class="--block" :style="`background: ${color};`"></span>
+        </span>
+        <input
+          :value="value"
+          class="--color-fill-input"
+          @blur="handleValue"
+        >
+      </div>
+      <n-tooltip v-if="showPin" placement="top">
+        <template #trigger>
+          <n-icon
+            :component="pin ? IconPinFill : IconPin"
+            class="--color-pin"
+            @click="handlePin(pin)"
+          />
+        </template>
+        {{ pin ? '已「钉住」，颜色不' : '未「钉住」，颜色将' }}随切换模板而更改
+      </n-tooltip>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NTooltip, NIcon } from 'naive-ui'
+import { IconDelete, IconPin, IconPinFill } from '@/icons'
+
+defineProps<{
+  color: string
+  value: string
+  pin?: boolean
+  showPin?: boolean
+  showDelete?: boolean
+  hideColorBlock?: boolean
+}>()
+
+const emits = defineEmits(['update-data'])
+
+const handleValue = (event: any) => {
+  onUpdateData('color', event.target.value)
+}
+
+const handlePin = (val: boolean) => {
+  onUpdateData('pin', !val)
+}
+
+const onUpdateData = (key: string, value: any) => {
+  emits('update-data', { key, value })
+}
+</script>
diff --git a/src/components/ui/color-mapping/src/index.vue b/src/components/ui/color-mapping/src/index.vue
index bd90c893..3acfce9e 100644
--- a/src/components/ui/color-mapping/src/index.vue
+++ b/src/components/ui/color-mapping/src/index.vue
@@ -44,123 +44,119 @@
       </div>
     </div>
     <div class="g-color-mapping-content">
-      <n-collapse-transition :show="showPanel">
-        <div class="g-color-mapping-main">
-          <div class="--setting">
-            <div class="--setting-name">映射类型</div>
-            <div class="--setting-content">
-              <n-radio-group
-                :value="data.scale.type"
-                :size="size"
-                @update:value="onUpdateScaleType"
-              >
-                <n-radio-button value="ordinal" label="名词分类" />
-                <n-radio-button value="linear" label="数值连续" />
-                <n-radio-button value="threshold" label="数值分区" />
-              </n-radio-group>
-            </div>
+      <n-collapse-transition :show="showPanel" class="g-color-mapping-main">
+        <div class="--setting">
+          <div class="--setting-name">映射类型</div>
+          <div class="--setting-content">
+            <n-radio-group
+              :value="data.scale.type"
+              :size="size"
+              @update:value="onUpdateScaleType"
+            >
+              <n-radio-button value="ordinal" label="名词分类" />
+              <n-radio-button value="linear" label="数值连续" />
+              <n-radio-button value="threshold" label="数值分区" />
+            </n-radio-group>
           </div>
-          <div class="--setting">
-            <div class="--setting-name">颜色模板</div>
-            <div class="--setting-content">
-              <SchemeSelectPopover
-                :value="data.scale.scheme"
-                :colors="presetColor"
-                :preset-colors="presetColors"
-                @update:value="selectPresetColor"
-              />
-            </div>
+        </div>
+        <div class="--setting">
+          <div class="--setting-name">颜色模板</div>
+          <div class="--setting-content">
+            <SchemeSelectPopover
+              :value="data.scale.scheme"
+              :colors="presetColor"
+              :preset-colors="presetColors"
+              @update:value="selectPresetColor"
+            />
           </div>
-          <div class="--mapping-box">
-            <div class="--mapping-area --ordinal">
-              <div class="--min"></div>
-              <div class="--mapping-main">
-                <div class="--color-area">
-                  <div
-                    v-for="(pc, idx) in presetColor"
-                    :key="idx"
-                    class="--color-editor"
-                  >
-                    <n-icon :component="IconDelete" class="--delete" />
-                    <div class="--color-block color-block">
-                      <span class="--block" :style="`background: ${pc};`"></span>
-                    </div>
-                    <div class="--color-changer --with-pin">
-                      <div class="datav-gui-fill datav-gui-component --normal">
-                        <span class="datav-gui-fill-default">
-                          <span class="--block" :style="`background: ${pc};`"></span>
-                        </span>
-                        <input class="datav-gui-fill-input" style="display: block;">
-                      </div>
-                      <n-tooltip placement="top">
-                        <template #trigger>
-                          <n-icon
-                            :component="IconPinFill"
-                            class="--color-pin"
-                          />
-                        </template>
-                        已「钉住」，颜色不会随切换模板而更改
-                      </n-tooltip>
-                    </div>
-                  </div>
-                </div>
+        </div>
+        <div class="--mapping-box">
+          <div :class="`--mapping-area --${data.scale.type} ${data.scale.custom ? '--custom' : ''}`">
+            <div class="--min">
+              {{ (data.scale.type !== 'ordinal' && !data.scale.custom) ? 'min' : '' }}
+            </div>
+            <div :class="`--mapping-main ${data.scale.custom ? '--custom' : ''}`">
+              <div class="--color-area">
+                <template v-for="(pc, idx) in presetDomain" :key="idx">
+                  <ColorEditor
+                    v-if="!(data.scale.type === 'threshold' && data.scale.custom && idx === presetDomain.length - 1)"
+                    :color="pc.color"
+                    :value="pc.colorVal"
+                    :pin="pc.pin"
+                    :show-delete="data.scale.custom"
+                    show-pin
+                    :hide-color-block="data.scale.type === 'linear' && idx === presetDomain.length - 1"
+                    @update-data="onUpdateColor(idx, $event)"
+                  />
+                </template>
+                <ColorEditor
+                  v-if="showExceptedEditor"
+                  :color="data.scale.excepted"
+                  :value="data.scale.excepted"
+                  @update-data="onUpdateColor('excepted', $event)"
+                />
               </div>
-              <div class="--excepted --custom">
-                <div class="--color-area">
-                  <div class="--color-editor">
-                    <n-icon :component="IconDelete" class="--delete" />
-                    <div class="--color-block color-block">
-                      <span class="--block" :style="`background: ${data.scale.abnormal};`"></span>
-                    </div>
-                    <div class="--color-changer --with-pin">
-                      <div class="datav-gui-fill datav-gui-component --normal">
-                        <span class="datav-gui-fill-default">
-                          <span class="--block" :style="`background: ${data.scale.abnormal};`"></span>
-                        </span>
-                        <input class="datav-gui-fill-input" style="display: block;">
-                      </div>
-                      <n-icon
-                        :component="IconPin"
-                        class="--color-pin"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div class="--value-area">
-                  <div class="--value-editor">
-                    <div class="--color-dot color-block">
-                      <span style="background: rgb(128 128 128);"></span>
-                    </div>
-                    <input
-                      class="datav-input datav-input--disabled"
-                      placeholder="输入字段值"
-                      spellcheck="false"
-                      value="异常值"
-                    >
-                  </div>
-                </div>
+              <div v-if="data.scale.custom" class="--value-area">
+                <ValueEditor
+                  v-for="(pc, idx) in presetDomain"
+                  :key="idx"
+                  :type="data.scale.type === 'ordinal' ? 'string' : 'number'"
+                  :value="pc.domain"
+                  :color="pc.color"
+                  @update-data="onUpdateValue(idx, $event)"
+                />
+                <ValueEditor
+                  v-if="showExceptedEditor"
+                  type="string"
+                  value="其他值"
+                  :color="data.scale.excepted"
+                  readonly
+                  tooltip="未在映射列表中的值"
+                />
               </div>
             </div>
-            <div class="--function-area">
-              <div class="--step-setting">
-                <div class="--setting-name">数量</div>
-                <div class="--setting-content">
-                  <g-input-number
-                    v-model="colorNum"
-                    size="small"
-                  />
-                </div>
+            <div v-if="data.scale.type !== 'ordinal' && !data.scale.custom" class="--max">
+              max
+            </div>
+            <div class="--excepted --custom">
+              <div class="--color-area">
+                <ColorEditor
+                  :color="data.scale.abnormal"
+                  :value="data.scale.abnormal"
+                  @update-data="onUpdateColor('abnormal', $event)"
+                />
               </div>
-              <span class="--btn">
-                <n-icon :component="IconSort" /> 反序
-              </span>
-              <div class="--custom-setting">
-                <div class="--setting-name" title="自定义映射">自定义映射</div>
-                <div class="--setting-content">
-                  <n-switch
-                    v-model:value="data.scale.custom"
-                  />
-                </div>
+              <div class="--value-area">
+                <ValueEditor
+                  type="string"
+                  value="异常值"
+                  :color="data.scale.abnormal"
+                  readonly
+                  tooltip="undefined/null/NaN"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="--function-area">
+            <div v-if="data.scale.custom" class="--step-setting">
+              <div class="--setting-name">数量</div>
+              <div class="--setting-content">
+                <g-input-number
+                  v-model="colorNum"
+                  size="tiny"
+                />
+              </div>
+            </div>
+            <span v-else class="--btn" @click="addItem">
+              <n-icon :component="IconPlus" /> 添加
+            </span>
+            <span class="--btn">
+              <n-icon :component="IconSort" /> 反序
+            </span>
+            <div class="--custom-setting">
+              <div class="--setting-name" title="自定义映射">自定义映射</div>
+              <div class="--setting-content">
+                <n-switch v-model:value="data.scale.custom" />
               </div>
             </div>
           </div>
@@ -171,24 +167,24 @@
 </template>
 
 <script lang='ts' setup>
-import { computed, ref } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import type { PropType } from 'vue'
+import tinygradient from 'tinygradient'
+import tinycolor2 from 'tinycolor2'
+import { cloneDeep } from 'lodash-es'
 import {
   NIcon, NInput, NColorPicker, NRadioGroup, NRadioButton,
   NSwitch, NTooltip, NCollapseTransition,
 } from 'naive-ui'
-import tinygradient from 'tinygradient'
-import { cloneDeep } from 'lodash-es'
-import {
-  IconArrowRight, IconConnect, IconDelete, IconDisconnect,
-  IconSort, IconPin, IconPinFill,
-} from '@/icons'
+import { IconArrowRight, IconConnect, IconDisconnect, IconPlus, IconSort } from '@/icons'
 import { presetCatColors, presetSeqColors, presetDivColors } from '@/data/colors'
-import { jsonToColor } from '@/utils/color-util'
+import { isColor, colorToJson, jsonToColor } from '@/utils/color-util'
 import GInputNumber from '@/components/ui/input-number'
 import { getDefaultColor } from './utils'
 import { ColorMappingConfig, ColorMappingScaleType } from './interface'
 import SchemeSelectPopover from './scheme-select-popover.vue'
+import ColorEditor from './color-editor.vue'
+import ValueEditor from './value-editor.vue'
 
 const props = defineProps({
   data: {
@@ -238,6 +234,44 @@ const viewColors = computed(() => {
   return list
 })
 
+const presetDomain = computed(() => {
+  const { scale } = props.data
+  let list: {
+    color: string
+    colorVal: string
+    domain: number | string
+    pin: boolean
+  }[] = []
+  if (scale.type === 'ordinal') {
+    const arr1 = scale.range.map(c => jsonToColor(c))
+    const arr2 = scale.range.map(c => jsonToColor(c, false))
+    list = scale.domain.map((m, idx) => ({
+      color: arr1[idx],
+      colorVal: arr2[idx],
+      domain: m,
+      pin: scale.pin[idx],
+    }))
+  } else if (scale.type === 'linear') {
+    list = scale.domain.map((m, idx) => ({
+      color: scale.range[idx],
+      colorVal: scale.range[idx],
+      domain: m,
+      pin: scale.pin[idx],
+    }))
+  } else if (scale.type === 'threshold') {
+    const num = scale.custom ? scale.domain.length : scale.range.length
+    for (let i = 0; i < num; i++) {
+      list.push({
+        color: scale.range[i],
+        colorVal: scale.range[i],
+        domain: scale.domain[i],
+        pin: scale.pin[i],
+      })
+    }
+  }
+  return list
+})
+
 const presetColors = computed(() => {
   const { scale } = props.data
   let list = []
@@ -268,12 +302,12 @@ const presetColors = computed(() => {
     const arr1 = Object.entries(presetSeqColors)
       .map(([scheme, arr]) => ({
         scheme,
-        colors: tinygradient(arr).rgb(6),
+        colors: tinygradient(arr).rgb(6).map(m => m.toHexString()),
       }))
     const arr2 = Object.entries(presetDivColors)
       .map(([scheme, arr]) => ({
         scheme,
-        colors: getDivColors(arr, 11),
+        colors: getDivColors(arr, 11).map(m => m.toHexString()),
       }))
     list = [...arr1, ...arr2]
   }
@@ -285,6 +319,11 @@ const presetColor = computed(() => {
   return pc ? pc.colors : []
 })
 
+const showExceptedEditor = computed(() => {
+  const { type, custom, domain } = props.data.scale
+  return custom && type === 'ordinal' && !domain.some(m => !m)
+})
+
 const getDivColors = (divColors: string[], num: number) => {
   return tinygradient(divColors).rgb(num).reduce((prev, curr, idx) => {
     if (idx % 2 === 0) {
@@ -304,17 +343,22 @@ const onUpdateScaleType = (type: ColorMappingScaleType) => {
   colorNum.value = props.data.scale.range.length
 }
 
-const selectPresetColor = (val: string) => {
-  props.data.scale.scheme = val
-  const { type } = props.data.scale
+const getCurrentColorRange = () => {
+  const { type, scheme } = props.data.scale
   let colorRange = []
   if (type === 'ordinal') {
-    colorRange = presetCatColors[val].slice(0, colorNum.value)
-  } else if (type === 'linear') {
-    if (val.startsWith('seq')) {
-      colorRange = tinygradient(presetSeqColors[val]).rgb(colorNum.value)
-    } else if (val.startsWith('div')) {
-      const arr = presetDivColors[val]
+    const arr = presetCatColors[scheme]
+    const len = Math.ceil(colorNum.value / arr.length)
+    const bigArr = []
+    for (let i = 0; i < len; i++) {
+      bigArr.push(...arr)
+    }
+    colorRange = bigArr.slice(0, colorNum.value)
+  } else {
+    if (scheme.startsWith('seq')) {
+      colorRange = tinygradient(presetSeqColors[scheme]).rgb(colorNum.value)
+    } else if (scheme.startsWith('div')) {
+      const arr = presetDivColors[scheme]
       if (colorNum.value === 2) {
         colorRange = tinygradient([arr[0], arr[2]]).rgb(colorNum.value)
       } else if (colorNum.value & 1) {
@@ -323,24 +367,59 @@ const selectPresetColor = (val: string) => {
         colorRange = getDivColors(arr, colorNum.value * 2 - 1)
       }
     }
-  } else if (type === 'threshold') {
-    if (val.startsWith('seq')) {
-      colorRange = tinygradient(presetSeqColors[val]).rgb(colorNum.value)
-    } else if (val.startsWith('div')) {
-      const arr = presetDivColors[val]
-      if (colorNum.value === 2) {
-        colorRange = tinygradient([arr[0], arr[2]]).rgb(colorNum.value)
-      } else if (colorNum.value & 1) {
-        colorRange = tinygradient(arr).rgb(colorNum.value)
+    colorRange = colorRange.map(m => m.toHexString())
+  }
+  return colorRange
+}
+
+const selectPresetColor = (val: string) => {
+  props.data.scale.scheme = val
+  props.data.scale.range = getCurrentColorRange()
+}
+
+const onUpdateColor = (index: number | string, data: any) => {
+  if (index === 'excepted') {
+    props.data.scale.excepted = data.value
+  } else if (index === 'abnormal') {
+    props.data.scale.abnormal = data.value
+  } else if (typeof index === 'number') {
+    if (data.key === 'pin') {
+      props.data.scale.pin[index] = data.pin
+    } else {
+      if (isColor(data.value)) {
+        props.data.scale.range[index] = tinycolor2(data.value).toHexString()
       } else {
-        colorRange = getDivColors(arr, colorNum.value * 2 - 1)
+        const pcs = getCurrentColorRange()
+        props.data.scale.range[index] = colorToJson(data.value, pcs[index])
       }
     }
   }
-  props.data.scale.range = colorRange
+}
+
+const onUpdateValue = (index: number, val: string | number) => {
+  props.data.scale.domain[index] = val
+}
+
+const addItem = () => {
+  colorNum.value += 1
+  const { scale } = props.data
+  if (scale.type === 'ordinal') {
+    const pcs = getCurrentColorRange()
+    scale.range.push(pcs[colorNum.value - 1])
+    scale.domain.push('')
+  } else {
+    scale.range.push('#969696')
+    const ev = scale.domain[scale.domain.length - 1] as number
+    scale.domain.push(ev >= 0 ? ev + 1 : 0)
+  }
+  scale.pin.push(false)
 }
 
 const toggleShowPanel = () => {
   showPanel.value = !showPanel.value
 }
+
+onMounted(() => {
+  colorNum.value = props.data.scale.range.length
+})
 </script>
diff --git a/src/components/ui/color-mapping/src/interface.ts b/src/components/ui/color-mapping/src/interface.ts
index 95e606ec..db8b57f4 100644
--- a/src/components/ui/color-mapping/src/interface.ts
+++ b/src/components/ui/color-mapping/src/interface.ts
@@ -3,7 +3,7 @@ export type ColorMappingScaleType = 'ordinal' | 'linear' | 'threshold'
 export interface ColorMappingScaleConfig {
   scheme: string
   range: string[]
-  domain: number[]
+  domain: (string | number)[]
   pin: boolean[]
   custom: boolean
   abnormal: string
diff --git a/src/components/ui/color-mapping/src/utils.ts b/src/components/ui/color-mapping/src/utils.ts
index 5d82b49b..4a722b22 100644
--- a/src/components/ui/color-mapping/src/utils.ts
+++ b/src/components/ui/color-mapping/src/utils.ts
@@ -13,18 +13,22 @@ export const getDefaultColor = (scaleType: ColorMappingScaleType) => {
         '{"stops":[{"offset":2,"color":"#8c57e4"},{"offset":100,"color":"rgba(224, 131, 255, 0.97)"}],"angle":90}',
         '{"stops":[{"offset":0,"color":"rgba(36, 131, 255, 0.97)"},{"offset":99,"color":"rgb(131, 183, 252)"}],"angle":90}',
       ],
-      domain: [0, 166, 332, 498, 664, 830, 1000],
-      pin: [],
+      domain: Array(7).fill(''),
+      pin: Array(7).fill(false),
       custom: false,
       excepted: 'yellow',
       abnormal: '#808080',
     }
   }
+
+  const num = scaleType === 'linear' ? 7 : 8
+  const domain = Array(num).fill(0).map((m, i) => Math.floor(1000 / (num - 1)) * i)
+  domain[num - 1] = Math.max(1000, domain[num - 1])
   return {
     scheme: 'seq-7',
     range: ['#96ccff', '#7fb9ff', '#69a6ff', '#5293ff', '#3b7fff', '#256cff', '#0e59ff'],
-    domain: [0, 166, 332, 498, 664, 830, 1000],
-    pin: [],
+    domain,
+    pin: Array(7).fill(false),
     custom: false,
     excepted: 'yellow',
     abnormal: '#808080',
diff --git a/src/components/ui/color-mapping/src/value-editor.vue b/src/components/ui/color-mapping/src/value-editor.vue
new file mode 100644
index 00000000..9dc53e4e
--- /dev/null
+++ b/src/components/ui/color-mapping/src/value-editor.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="--value-editor">
+    <div class="--color-dot g-color-mapping__color-block">
+      <span class="--block" :style="`background: ${color}`"></span>
+    </div>
+    <n-tooltip :disabled="!tooltip">
+      <template #trigger>
+        <new-input
+          v-if="type === 'string'"
+          :model-value="value"
+          :disabled="readonly"
+          spellcheck="false"
+          placeholder="输入字段值"
+          class="--value-input"
+          @change="onUpdateData"
+        />
+        <g-input-number
+          v-else
+          :model-value="value"
+          size="tiny"
+          :readonly="readonly"
+          suffix="*"
+          placeholder="输入字段值"
+          :input-theme="{
+            color: 'var(--datav-gui-bgcolor-back)',
+            colorFocus: 'var(--datav-gui-bgcolor-back)',
+            suffixTextColor: 'var(--datav-gui-error-color)',
+          }"
+          @update:value="onUpdateData"
+        />
+      </template>
+      {{ tooltip }}
+    </n-tooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NTooltip } from 'naive-ui'
+import GInputNumber from '@/components/ui/input-number'
+import NewInput from '@/components/ui/input/src/new-input.vue'
+
+defineProps<{
+  type: string
+  value: any
+  color: string
+  readonly?: boolean
+  tooltip?: string
+  suffix?: string
+}>()
+
+const emits = defineEmits(['update-data'])
+
+const onUpdateData = (val: string | number) => {
+  emits('update-data', val)
+}
+</script>
diff --git a/src/components/ui/input-number/src/index.vue b/src/components/ui/input-number/src/index.vue
index 23a7088f..458a1295 100644
--- a/src/components/ui/input-number/src/index.vue
+++ b/src/components/ui/input-number/src/index.vue
@@ -15,7 +15,8 @@
         :min="min"
         :max="max"
         :step="step"
-        placeholder=""
+        :readonly="readonly"
+        :placeholder="placeholder"
         @update:value="handleInput"
       >
         <template v-if="suffix" #suffix>
@@ -24,6 +25,12 @@
         <template v-if="prefix" #prefix>
           {{ prefix }}
         </template>
+        <template #minus-icon>
+          -
+        </template>
+        <template #add-icon>
+          +
+        </template>
       </n-input-number>
     </n-config-provider>
     <template v-if="tooltip && label">
@@ -80,6 +87,15 @@ const props = defineProps({
   prefix: String,
   suffix: String,
   tooltip: String,
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  inputTheme: Object,
 })
 const emits = defineEmits([UPDATE_MODEL_EVENT])
 
@@ -90,13 +106,22 @@ const handleInput = (value: number) => {
 const themeOverrides = {
   Button: {
     textColorText: 'var(--datav-font-color)',
+    // small
     fontSizeMedium: '12px',
     iconSizeMedium: '12px',
   },
+  Input: {
+    ...(props.inputTheme || {}),
+  },
 }
 
 if (props.size === 'medium') {
   themeOverrides.Button.fontSizeMedium = '14px'
   themeOverrides.Button.iconSizeMedium = '14px'
 }
+
+if (props.size === 'tiny') {
+  themeOverrides.Button.fontSizeMedium = '10px'
+  themeOverrides.Button.iconSizeMedium = '10px'
+}
 </script>
diff --git a/src/components/ui/input/src/new-input.vue b/src/components/ui/input/src/new-input.vue
index 6c5801e7..656cc039 100644
--- a/src/components/ui/input/src/new-input.vue
+++ b/src/components/ui/input/src/new-input.vue
@@ -3,7 +3,7 @@
     ref="inputRef"
     :value="modelValue"
     autocomplete="off"
-    class="new-input"
+    class="datav-new-input"
     :class="{ 'is-disabled': disabled }"
     :disabled="disabled"
     :autofocus="autofocus"
@@ -33,7 +33,6 @@ export default defineComponent({
 
     const handleInput = (event: any) => {
       const { value } = event.target
-
       ctx.emit(UPDATE_MODEL_EVENT, value)
     }
 
diff --git a/src/styles/color-mapping.scss b/src/styles/color-mapping.scss
index 56859dff..d5719c95 100644
--- a/src/styles/color-mapping.scss
+++ b/src/styles/color-mapping.scss
@@ -6,7 +6,7 @@
   width: 100%;
   border: none;
   font-size: 12px;
-  color: #fff;
+  color: var(--datav-gui-font-color-1);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -128,6 +128,7 @@
           display: flex;
           align-items: center;
           justify-content: center;
+          cursor: pointer;
         }
 
         .--color-block {
@@ -135,13 +136,6 @@
           height: 100%;
         }
 
-        &:first-child {
-          .--color-block {
-            border-top-left-radius: 2px;
-            border-top-right-radius: 2px;
-          }
-        }
-
         .--color-changer {
           flex: 1;
           height: 24px;
@@ -155,32 +149,32 @@
           align-items: center;
           justify-content: space-between;
 
-          .datav-gui-fill {
-            background: none;
-            border: none;
+          .--color-fill {
             padding-right: 6px;
-
-            .datav-gui-fill-default {
+            width: 100%;
+            height: 24px;
+            font-size: 12px;
+            color: var(--datav-gui-font-color-1);
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            position: relative;
+
+            .--color-fill-default {
               border: 1px solid var(--datav-gui-component-border-color);
-              background-image: url(data:image/png;base64,R0lGODdhCgAKAPAAAOXl5f///ywAAAAACgAKAEACEIQdqXt9GxyETrI279OIgwIAOw==);
               display: flex;
               align-items: center;
               justify-content: center;
               width: 24px;
               height: 14px;
               border-radius: 2px;
-              overflow: hidden;
               cursor: pointer;
               margin-left: 5px;
-
-              > .--block {
-                display: block;
-                width: 100%;
-                height: 100%;
-              }
             }
 
-            .datav-gui-fill-input {
+            .--color-fill-input {
+              display: block;
               background: transparent;
               padding-left: 5px;
               border: none;
@@ -193,10 +187,9 @@
 
           .--color-pin {
             font-size: 14px;
-            padding-right: 4px;
             color: var(--datav-gui-font-color-description);
             position: absolute;
-            right: 0;
+            right: 4px;
             top: 4px;
             cursor: pointer;
             font-style: normal;
@@ -208,7 +201,7 @@
           }
 
           &.--with-pin {
-            .datav-gui-fill {
+            .--color-fill {
               padding-right: 20px;
             }
           }
@@ -238,6 +231,13 @@
             border-color: var(--datav-gui-primary-color);
           }
         }
+
+        &:first-child {
+          .--color-block {
+            border-top-left-radius: 2px;
+            border-top-right-radius: 2px;
+          }
+        }
       }
 
       .--excepted {
@@ -249,16 +249,17 @@
         &:last-child {
           margin-top: 12px;
         }
+      }
 
-        &.--custom {
-          .--color-area {
-            width: 58%;
-          }
+      .--mapping-main.--custom,
+      .--excepted.--custom, {
+        .--color-area {
+          width: 58%;
+        }
 
-          .--value-area {
-            width: 42%;
-            padding-left: 20px;
-          }
+        .--value-area {
+          width: 42%;
+          padding-left: 20px;
         }
       }
 
@@ -287,14 +288,40 @@
           border: 1px solid var(--datav-gui-component-border-color);
           position: absolute;
           left: -3px;
+          z-index: 1;
         }
 
-        .datav-input {
-          display: block;
-          border-radius: 2px;
-          height: 24px;
-          width: 100%;
-          background: var(--datav-gui-bgcolor-back);
+        .--value-input:not(.is-disabled) {
+          color: var(--datav-gui-font-color-1);
+        }
+      }
+
+      &.--linear .--mapping-main {
+        .--color-block {
+          transform: translateY(18px);
+        }
+      }
+
+      &.--threshold {
+        .--mapping-main {
+          .--value-area {
+            transform: translateY(-18px);
+          }
+
+          .--value-editor::after {
+            content: '';
+            width: 126px;
+            height: 3px;
+            border-radius: 1px;
+            display: block;
+            background: var(--datav-gui-font-color-description);
+            position: absolute;
+            left: -148px;
+          }
+        }
+
+        &.--custom .--excepted {
+          transform: translateY(-24px);
         }
       }
     }
@@ -351,7 +378,16 @@
     }
   }
 
-  .color-block {
+  .datav-new-input {
+    border-radius: 2px;
+    background: var(--datav-gui-bgcolor-back);
+
+    &:hover {
+      color: var(--datav-gui-font-color-1);
+    }
+  }
+
+  .g-color-mapping__color-block {
     background-image: url(data:image/png;base64,R0lGODdhCgAKAPAAAOXl5f///ywAAAAACgAKAEACEIQdqXt9GxyETrI279OIgwIAOw==);
     overflow: hidden;
 
@@ -361,30 +397,6 @@
       height: 100%;
     }
   }
-
-  .datav-gui-fill {
-    width: 100%;
-    height: 24px;
-    background: var(--datav-gui-component-bgcolor);
-    border: 1px solid var(--datav-gui-component-border-color);
-    font-size: 12px;
-    color: var(--datav-gui-font-color-1);
-    outline: none;
-    box-shadow: none;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    position: relative;
-  }
-
-  .datav-input.datav-input--disabled {
-    line-height: 16px;
-    font-size: 12px;
-    color: var(--datav-font-color-disabled);
-    cursor: not-allowed;
-    border: var(--datav-border-disabled);
-  }
 }
 
 .g-color-mapping-fixed {
diff --git a/src/styles/input.scss b/src/styles/input.scss
index 011c15e6..5e1280b8 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -25,7 +25,7 @@
   text-decoration: underline dotted;
 }
 
-.new-input {
+.datav-new-input {
   height: 24px;
   line-height: 24px;
   display: inline-block;
diff --git a/src/styles/themes/naive-ui-theme-overrides.ts b/src/styles/themes/naive-ui-theme-overrides.ts
index ca43f7e3..7f5a3c65 100644
--- a/src/styles/themes/naive-ui-theme-overrides.ts
+++ b/src/styles/themes/naive-ui-theme-overrides.ts
@@ -195,6 +195,18 @@ const themeOverrides: GlobalThemeOverrides = {
     paddingSmall: '0 8px',
     fontSizeSmall: '12px',
     heightMedium: '32px',
+    heightTiny: '24px',
+  },
+  InputNumber: {
+    peers: {
+      Input: {
+        heightTiny: '24px',
+      },
+      Button: {
+        iconSizeTiny: '10px',
+        fontSizeTiny: '10px',
+      },
+    },
   },
   ColorPicker: {
     color: vars2.guiComponentBgColor,