perf(src/packages): 重新图表更多里的自定义native-ui进度，修改绑定数值未改变问题

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { OverrideProcessConfig } from './index'
+import { chartInitConfig } from '@/settings/designSetting'
+import cloneDeep from 'lodash/cloneDeep'
+
+
+export const types = [
+  {
+    label: '线形',
+    value: 'line'
+  },
+  {
+    label: '圆形',
+    value: 'circle'
+  },
+  {
+    label: '仪表盘',
+    value: 'dashboard'
+  },
+]
+
+export const indicatorPlacements = [
+  {
+    label: '内部',
+    value: 'inside'
+  },
+  {
+    label: '外部',
+    value: 'outside'
+  }
+]
+
+export const option = {
+  dataset: 36,
+  // 默认类型
+  type: types[2].value,
+  // 进行时效果
+  processing: true,
+  // 主颜色
+  color: '#4992FFFF',
+  // 轨道颜色
+  railColor: '#3e3e3f', 
+  // 指标
+  unit: '%',
+  // 指标大小
+  indicatorTextSize: 34,
+  // 指标位置（线条时可用）
+  indicatorPlacement: 'outside',
+  // 指标颜色
+  indicatorTextColor: '#FFFFFFFF',
+  // 偏移角度
+  offsetDegree: 0
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideProcessConfig.key
+  public attr = { ...chartInitConfig, h: 500, zIndex: -1 }
+  public chartConfig = cloneDeep(OverrideProcessConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <!-- 默认展开 -->
+  <CollapseItem name="进度条" :expanded="true">
+    <SettingItemBox name="内容">
+      <SettingItem name="数值">
+        <!-- 与 config.ts 里的 option 对应 --><!-- n-input-number 是 NaiveUI 的控件 -->
+        <n-input-number v-model:value="optionData.dataset" size="small" :min="0" placeholder="进度值"></n-input-number>
+      </SettingItem>
+      <setting-item name="单位">
+        <n-input v-model:value="optionData.unit" size="small"></n-input>
+      </setting-item>
+    </SettingItemBox>
+
+    <SettingItemBox name="轨道">
+      <SettingItem name="形状">
+        <n-select v-model:value="optionData.type" :options="types" placeholder="选择形状" />
+      </SettingItem>
+
+      <!-- 颜色粗细等等... -->
+      <SettingItem name="进度条颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="轨道颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.railColor"></n-color-picker>
+      </SettingItem>
+      <setting-item name="偏移角度" v-if="optionData.type !== types[0].value">
+        <n-input-number v-model:value="optionData.offsetDegree" size="small"></n-input-number>
+      </setting-item>
+      <SettingItem v-if="optionData.type == types[0].value">
+        <n-space>
+          <n-switch v-model:value="optionData.processing" size="small" />
+          <n-text>进行时动画</n-text>
+        </n-space>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="指标">
+      <SettingItem name="位置" v-if="optionData.type == types[0].value">
+        <n-select v-model:value="optionData.indicatorPlacement" :options="indicatorPlacements" placeholder="选择形状" />
+      </SettingItem>
+      <SettingItem name="文本颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.indicatorTextColor"></n-color-picker>
+      </SettingItem>
+       <setting-item name="文本大小">
+        <n-input-number v-model:value="optionData.indicatorTextSize" size="small"></n-input-number>
+      </setting-item>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+// 以下是封装的设置模块布局组件，具体效果可在官网查看
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+// 获取 option 的数据，便于使用 typeof 获取类型
+import { option, types, indicatorPlacements } from './config'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

+
+
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Charts/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideProcess', true)
+
+export const OverrideProcessConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义NaiveUI-进度',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'process.png'
+}

+<template>
+  <n-progress
+    :type="type"
+    :height="h"
+    :processing="processing"
+    :percentage="dataset"
+    :indicator-placement="indicatorPlacement"
+    :color="color"
+    :rail-color="railColor"
+    :offset-degree="offsetDegree"
+  >
+    <n-text
+      :style="{
+        color: indicatorTextColor,
+        fontSize: `${indicatorTextSize}px`
+      }"
+    >
+      {{ dataset }} {{ unit }}
+    </n-text>
+  </n-progress>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, watch } from 'vue'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import config from './config'
+import { toNumber } from '@/utils'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+// 取配置数据
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  type,
+  unit,
+  color,
+  processing,
+  railColor,
+  indicatorTextColor,
+  indicatorPlacement,
+  indicatorTextSize,
+  offsetDegree,
+  dataset
+} = toRefs(props.chartConfig.option)
+
+// 手动更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    try {
+      dataset.value = toNumber(newData, 2)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
+  dataset.value = toNumber(newData, 2)
+})
+</script>

@@ -16,6 +16,7 @@ import { OverrideTextGradientConfig } from '@/packages/components/external/Infor
 import { OverrideBarCommonConfig } from '@/packages/components/external/Charts/Bars/OverrideBarCommon'
 import { OverrideBarCommonConfig } from '@/packages/components/external/Charts/Bars/OverrideBarCommon'
 import { OverrideLineCommonConfig } from '@/packages/components/external/Charts/Lines/OverrideLineCommon'
 import { OverrideLineCommonConfig } from '@/packages/components/external/Charts/Lines/OverrideLineCommon'
 import { OverrideLineGradientsConfig } from '@/packages/components/external/Charts/Lines/OverrideLineGradients'
 import { OverrideLineGradientsConfig } from '@/packages/components/external/Charts/Lines/OverrideLineGradients'
+import { OverrideProcessConfig } from '@/packages/components/external/Charts/Mores/OverrideProcess'
 
 
 export function useInjectLib(packagesList: EPackagesType) {
 export function useInjectLib(packagesList: EPackagesType) {
   packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
   packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
@@ -35,6 +36,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideBarCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideBarCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineGradientsConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineGradientsConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideProcessConfig)
 }
 }
 
 
 /**
 /**