From 593a48eea46adbce30102372f3781e810ae3c56c Mon Sep 17 00:00:00 2001
From: mtruning <1262327911@qq.com>
Date: Sun, 20 Mar 2022 18:11:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E7=BA=BF=E6=9D=A1?=
=?UTF-8?q?=E7=9A=84=20dataset=20=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../Charts/Bars/BarCrossrange/config.ts | 8 ++-
.../Charts/Bars/BarCrossrange/data.json | 40 ++++++++++++++
.../Charts/Bars/BarCrossrange/index.vue | 6 +--
.../Charts/Lines/LineCommon/config.ts | 5 +-
.../Charts/Lines/LineCommon/data.json | 33 ++++++++++++
.../Charts/Lines/LineCommon/index.vue | 34 +++++++-----
.../Charts/Lines/LineGradientSingle/config.ts | 5 +-
.../Charts/Lines/LineGradientSingle/data.json | 33 ++++++++++++
.../Charts/Lines/LineGradientSingle/index.vue | 54 ++++++++++---------
.../Charts/Lines/LineGradients/config.ts | 6 +--
.../Charts/Lines/LineGradients/data.json | 40 ++++++++++++++
.../Charts/Lines/LineGradients/index.vue | 52 ++++++++++--------
.../Charts/Pies/PieCommon/config.ts | 12 ++---
.../Charts/Pies/PieCommon/data.json | 33 ++++++++++++
.../Charts/Pies/PieCommon/index.vue | 4 +-
.../components/ChartData/index.vue | 2 +-
16 files changed, 277 insertions(+), 90 deletions(-)
create mode 100644 src/packages/components/Charts/Bars/BarCrossrange/data.json
create mode 100644 src/packages/components/Charts/Lines/LineCommon/data.json
create mode 100644 src/packages/components/Charts/Lines/LineGradientSingle/data.json
create mode 100644 src/packages/components/Charts/Lines/LineGradients/data.json
create mode 100644 src/packages/components/Charts/Pies/PieCommon/data.json
diff --git a/src/packages/components/Charts/Bars/BarCrossrange/config.ts b/src/packages/components/Charts/Bars/BarCrossrange/config.ts
index 5ccc5b75..72569058 100644
--- a/src/packages/components/Charts/Bars/BarCrossrange/config.ts
+++ b/src/packages/components/Charts/Bars/BarCrossrange/config.ts
@@ -2,6 +2,7 @@ import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
import { BarCrossrangeConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis']
@@ -26,33 +27,30 @@ export const option = {
show: true,
type: 'category',
},
+ dataset: { ...dataJson },
series: [
{
- name: 'data1',
type: 'bar',
barWidth: null,
itemStyle: {
color: null,
borderRadius: 0,
},
- data: [120, 200, 150, 80, 70, 110, 130],
},
{
- name: 'data2',
type: 'bar',
barWidth: null,
itemStyle: {
color: null,
borderRadius: 0,
},
- data: [130, 130, 312, 268, 155, 117, 160],
},
],
}
export default class Config extends publicConfig
implements CreateComponentType {
- public key: string = BarCrossrangeConfig.key
+ public key = BarCrossrangeConfig.key
public chartConfig = cloneDeep(BarCrossrangeConfig)
// 图表配置项
public option = echartOptionProfixHandle(option, includes)
diff --git a/src/packages/components/Charts/Bars/BarCrossrange/data.json b/src/packages/components/Charts/Bars/BarCrossrange/data.json
new file mode 100644
index 00000000..a28d4ee7
--- /dev/null
+++ b/src/packages/components/Charts/Bars/BarCrossrange/data.json
@@ -0,0 +1,40 @@
+{
+ "dimensions": ["product", "data1", "data2"],
+ "source": [
+ {
+ "product": "Mon",
+ "data1": 120,
+ "data2": 130
+ },
+ {
+ "product": "Tue",
+ "data1": 200,
+ "data2": 130
+ },
+ {
+ "product": "Wed",
+ "data1": 150,
+ "data2": 312
+ },
+ {
+ "product": "Thu",
+ "data1": 80,
+ "data2": 268
+ },
+ {
+ "product": "Fri",
+ "data1": 70,
+ "data2": 155
+ },
+ {
+ "product": "Sat",
+ "data1": 110,
+ "data2": 117
+ },
+ {
+ "product": "Sun",
+ "data1": 130,
+ "data2": 160
+ }
+ ]
+}
diff --git a/src/packages/components/Charts/Bars/BarCrossrange/index.vue b/src/packages/components/Charts/Bars/BarCrossrange/index.vue
index a53611ca..7fd87b19 100644
--- a/src/packages/components/Charts/Bars/BarCrossrange/index.vue
+++ b/src/packages/components/Charts/Bars/BarCrossrange/index.vue
@@ -5,12 +5,13 @@
<script setup lang="ts">
import { computed, PropType } from 'vue'
import VChart from 'vue-echarts'
-import { use, graphic } from 'echarts/core'
+import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { mergeTheme } from '@/packages/public/chart'
import config, { includes } from './config'
import {
+ DatasetComponent,
GridComponent,
TooltipComponent,
LegendComponent,
@@ -32,6 +33,7 @@ const props = defineProps({
})
use([
+ DatasetComponent,
CanvasRenderer,
BarChart,
GridComponent,
@@ -43,5 +45,3 @@ const option = computed(() => {
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/packages/components/Charts/Lines/LineCommon/config.ts b/src/packages/components/Charts/Lines/LineCommon/config.ts
index 45886c90..92a42cfd 100644
--- a/src/packages/components/Charts/Lines/LineCommon/config.ts
+++ b/src/packages/components/Charts/Lines/LineCommon/config.ts
@@ -2,6 +2,7 @@ import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
import { LineCommonConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
+import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis']
@@ -19,15 +20,14 @@ export const option = {
xAxis: {
show: true,
type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
show: true,
type: 'value'
},
+ dataset: { ...dataJson },
series: [
{
- name: 'data1',
type: 'line',
lineStyle: {
type: 'solid',
@@ -50,7 +50,6 @@ export const option = {
shadowBlur: 10,
shadowOffsetY: 20
},
- data: [120, 200, 150, 80, 70, 110, 130]
}
]
}
diff --git a/src/packages/components/Charts/Lines/LineCommon/data.json b/src/packages/components/Charts/Lines/LineCommon/data.json
new file mode 100644
index 00000000..b0dbe05f
--- /dev/null
+++ b/src/packages/components/Charts/Lines/LineCommon/data.json
@@ -0,0 +1,33 @@
+{
+ "dimensions": ["product", "data1"],
+ "source": [
+ {
+ "product": "Mon",
+ "data1": 120
+ },
+ {
+ "product": "Tue",
+ "data1": 200
+ },
+ {
+ "product": "Wed",
+ "data1": 150
+ },
+ {
+ "product": "Thu",
+ "data1": 80
+ },
+ {
+ "product": "Fri",
+ "data1": 70
+ },
+ {
+ "product": "Sat",
+ "data1": 110
+ },
+ {
+ "product": "Sun",
+ "data1": 130
+ }
+ ]
+}
diff --git a/src/packages/components/Charts/Lines/LineCommon/index.vue b/src/packages/components/Charts/Lines/LineCommon/index.vue
index a4473b7c..98f97c1e 100644
--- a/src/packages/components/Charts/Lines/LineCommon/index.vue
+++ b/src/packages/components/Charts/Lines/LineCommon/index.vue
@@ -10,9 +10,9 @@ import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
-import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
+import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
const props = defineProps({
themeSetting: {
@@ -30,6 +30,7 @@ const props = defineProps({
})
use([
+ DatasetComponent,
CanvasRenderer,
LineChart,
GridComponent,
@@ -44,18 +45,23 @@ const option = reactive({
// 初始化与渐变色处理
watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
- if (!document.location.hash.includes('preview')) {
- const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
- props.chartConfig.option.series.forEach((value: any) => {
- value.lineStyle.shadowColor = themeColor[2]
- value.lineStyle.color.colorStops.forEach((v: {color: string}, i:number) => {
- v.color = themeColor[i]
- })
+ if (!document.location.hash.includes('preview')) {
+ const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+ props.chartConfig.option.series.forEach((value: any) => {
+ value.lineStyle.shadowColor = themeColor[2]
+ value.lineStyle.color.colorStops.forEach((v: { color: string }, i: number) => {
+ v.color = themeColor[i]
})
- }
+ })
option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
- },
- {
- immediate: true
- })
+ }
+}, {
+ immediate: true,
+})
+
+watch(() => props.chartConfig.option.dataset, () => {
+ option.options = props.chartConfig.option
+}, {
+ deep: true
+})
</script>
\ No newline at end of file
diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/config.ts b/src/packages/components/Charts/Lines/LineGradientSingle/config.ts
index 511e8254..180c7cc5 100644
--- a/src/packages/components/Charts/Lines/LineGradientSingle/config.ts
+++ b/src/packages/components/Charts/Lines/LineGradientSingle/config.ts
@@ -3,6 +3,7 @@ import { LineGradientSingleConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import { graphic } from 'echarts/core'
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
+import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis']
@@ -20,15 +21,14 @@ const options = {
xAxis: {
show: true,
type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
show: true,
type: 'value'
},
+ dataset: { ...dataJson },
series: [
{
- name: 'data1',
type: 'line',
smooth: false,
lineStyle: {
@@ -49,7 +49,6 @@ const options = {
}
])
},
- data: [120, 200, 150, 80, 70, 110, 130]
}
]
}
diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/data.json b/src/packages/components/Charts/Lines/LineGradientSingle/data.json
new file mode 100644
index 00000000..b0dbe05f
--- /dev/null
+++ b/src/packages/components/Charts/Lines/LineGradientSingle/data.json
@@ -0,0 +1,33 @@
+{
+ "dimensions": ["product", "data1"],
+ "source": [
+ {
+ "product": "Mon",
+ "data1": 120
+ },
+ {
+ "product": "Tue",
+ "data1": 200
+ },
+ {
+ "product": "Wed",
+ "data1": 150
+ },
+ {
+ "product": "Thu",
+ "data1": 80
+ },
+ {
+ "product": "Fri",
+ "data1": 70
+ },
+ {
+ "product": "Sat",
+ "data1": 110
+ },
+ {
+ "product": "Sun",
+ "data1": 130
+ }
+ ]
+}
diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
index 69296b9d..f70fcc29 100644
--- a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
+++ b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
@@ -10,9 +10,9 @@ import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
-import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
+import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
const props = defineProps({
themeSetting: {
@@ -30,6 +30,7 @@ const props = defineProps({
})
use([
+ DatasetComponent,
CanvasRenderer,
LineChart,
GridComponent,
@@ -43,26 +44,31 @@ const option = reactive({
})
// 渐变色处理
-watch(()=>chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
- if (!document.location.hash.includes('preview')) {
- const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
- props.chartConfig.option.series.forEach((value: any, index: number) => {
- value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: themeColor[3]
- },
- {
- offset: 1,
- color: 'rgba(0,0,0, 0)'
- }
- ])
- themeColor[index]
- })
- }
- option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
- },
- {
- immediate: true
- })
+watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
+ if (!document.location.hash.includes('preview')) {
+ const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+ props.chartConfig.option.series.forEach((value: any, index: number) => {
+ value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: themeColor[3]
+ },
+ {
+ offset: 1,
+ color: 'rgba(0,0,0, 0)'
+ }
+ ])
+ themeColor[index]
+ })
+ }
+ option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+}, {
+ immediate: true
+})
+
+watch(() => props.chartConfig.option.dataset, () => {
+ option.options = props.chartConfig.option
+}, {
+ deep: true
+})
</script>
diff --git a/src/packages/components/Charts/Lines/LineGradients/config.ts b/src/packages/components/Charts/Lines/LineGradients/config.ts
index 5d0da506..9e386afc 100644
--- a/src/packages/components/Charts/Lines/LineGradients/config.ts
+++ b/src/packages/components/Charts/Lines/LineGradients/config.ts
@@ -3,6 +3,7 @@ import { LineGradientsConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import { graphic } from 'echarts/core'
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
+import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis']
@@ -26,9 +27,9 @@ const option = {
show: true,
type: 'value'
},
+ dataset: { ...dataJson },
series: [
{
- name: 'data1',
type: 'line',
smooth: false,
lineStyle: {
@@ -49,10 +50,8 @@ const option = {
}
])
},
- data: [120, 200, 150, 80, 70, 110, 130]
},
{
- name: 'data2',
type: 'line',
smooth: false,
lineStyle: {
@@ -73,7 +72,6 @@ const option = {
}
])
},
- data: [130, 130, 312, 268, 155, 117, 160]
}
]
}
diff --git a/src/packages/components/Charts/Lines/LineGradients/data.json b/src/packages/components/Charts/Lines/LineGradients/data.json
new file mode 100644
index 00000000..a28d4ee7
--- /dev/null
+++ b/src/packages/components/Charts/Lines/LineGradients/data.json
@@ -0,0 +1,40 @@
+{
+ "dimensions": ["product", "data1", "data2"],
+ "source": [
+ {
+ "product": "Mon",
+ "data1": 120,
+ "data2": 130
+ },
+ {
+ "product": "Tue",
+ "data1": 200,
+ "data2": 130
+ },
+ {
+ "product": "Wed",
+ "data1": 150,
+ "data2": 312
+ },
+ {
+ "product": "Thu",
+ "data1": 80,
+ "data2": 268
+ },
+ {
+ "product": "Fri",
+ "data1": 70,
+ "data2": 155
+ },
+ {
+ "product": "Sat",
+ "data1": 110,
+ "data2": 117
+ },
+ {
+ "product": "Sun",
+ "data1": 130,
+ "data2": 160
+ }
+ ]
+}
diff --git a/src/packages/components/Charts/Lines/LineGradients/index.vue b/src/packages/components/Charts/Lines/LineGradients/index.vue
index d70deb5a..541e50df 100644
--- a/src/packages/components/Charts/Lines/LineGradients/index.vue
+++ b/src/packages/components/Charts/Lines/LineGradients/index.vue
@@ -10,9 +10,9 @@ import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
-import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
+import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
const props = defineProps({
themeSetting: {
@@ -30,6 +30,7 @@ const props = defineProps({
})
use([
+ DatasetComponent,
CanvasRenderer,
LineChart,
GridComponent,
@@ -43,25 +44,30 @@ const option = reactive({
})
// 渐变色处理
-watch(()=>chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
- if (!document.location.hash.includes('preview')) {
- const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
- props.chartConfig.option.series.forEach((value: any, index: number) => {
- value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: themeColor[3 + index]
- },
- {
- offset: 1,
- color: 'rgba(0,0,0, 0)'
- }
- ])
- })
- }
- option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
- },
- {
- immediate: true
- })
+watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
+ if (!document.location.hash.includes('preview')) {
+ const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+ props.chartConfig.option.series.forEach((value: any, index: number) => {
+ value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: themeColor[3 + index]
+ },
+ {
+ offset: 1,
+ color: 'rgba(0,0,0, 0)'
+ }
+ ])
+ })
+ }
+ option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+}, {
+ immediate: true
+})
+
+watch(() => props.chartConfig.option.dataset, () => {
+ option.options = props.chartConfig.option
+}, {
+ deep: true
+})
</script>
diff --git a/src/packages/components/Charts/Pies/PieCommon/config.ts b/src/packages/components/Charts/Pies/PieCommon/config.ts
index 27f1653a..aae690c2 100644
--- a/src/packages/components/Charts/Pies/PieCommon/config.ts
+++ b/src/packages/components/Charts/Pies/PieCommon/config.ts
@@ -1,6 +1,7 @@
import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
import { PieCommonConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
+import dataJson from './data.json'
export const includes = ['legend']
@@ -12,9 +13,9 @@ const option = {
legend: {
show: true,
},
+ dataset: { ...dataJson },
series: [
{
- name: 'Access From',
type: 'pie',
radius: ['40%', '65%'],
center: ['50%', '60%'],
@@ -38,14 +39,7 @@ const option = {
},
labelLine: {
show: false
- },
- data: [
- { value: 1048, name: 'Search Engine' },
- { value: 735, name: 'Direct' },
- { value: 580, name: 'Email' },
- { value: 484, name: 'Union Ads' },
- { value: 300, name: 'Video Ads' }
- ]
+ }
}
]
}
diff --git a/src/packages/components/Charts/Pies/PieCommon/data.json b/src/packages/components/Charts/Pies/PieCommon/data.json
new file mode 100644
index 00000000..b0dbe05f
--- /dev/null
+++ b/src/packages/components/Charts/Pies/PieCommon/data.json
@@ -0,0 +1,33 @@
+{
+ "dimensions": ["product", "data1"],
+ "source": [
+ {
+ "product": "Mon",
+ "data1": 120
+ },
+ {
+ "product": "Tue",
+ "data1": 200
+ },
+ {
+ "product": "Wed",
+ "data1": 150
+ },
+ {
+ "product": "Thu",
+ "data1": 80
+ },
+ {
+ "product": "Fri",
+ "data1": 70
+ },
+ {
+ "product": "Sat",
+ "data1": 110
+ },
+ {
+ "product": "Sun",
+ "data1": 130
+ }
+ ]
+}
diff --git a/src/packages/components/Charts/Pies/PieCommon/index.vue b/src/packages/components/Charts/Pies/PieCommon/index.vue
index a82f2b15..04f59435 100644
--- a/src/packages/components/Charts/Pies/PieCommon/index.vue
+++ b/src/packages/components/Charts/Pies/PieCommon/index.vue
@@ -5,12 +5,13 @@
<script setup lang="ts">
import { computed, PropType } from 'vue'
import VChart from 'vue-echarts'
-import { use, graphic } from 'echarts/core'
+import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import { mergeTheme } from '@/packages/public/chart'
import config, { includes } from './config'
import {
+ DatasetComponent,
GridComponent,
TooltipComponent,
LegendComponent,
@@ -32,6 +33,7 @@ const props = defineProps({
})
use([
+ DatasetComponent,
CanvasRenderer,
PieChart,
GridComponent,
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/index.vue
index fcc92e93..ce81b219 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/index.vue
@@ -36,7 +36,7 @@
</n-timeline-item>
<n-timeline-item type="success" :title="TimelineTitleEnum.CONTENT">
<n-space vertical>
- <n-text prefix="bar" depth="3">数据格式需要符合 ECharts-setdata 规范</n-text>
+ <n-text depth="3">数据需要符合 ECharts-setdata 规范</n-text>
<n-space class="source-btn-box">
<n-upload
v-model:file-list="uploadFileListRef"