diff --git a/deliver-front/vue/components.d.ts b/deliver-front/vue/components.d.ts
index 2736f720b6c96a662dfdd4b5077b3b0341858785..3c605da25d7a7d95b5046356e76e133b5abfdce1 100644
--- a/deliver-front/vue/components.d.ts
+++ b/deliver-front/vue/components.d.ts
@@ -37,7 +37,6 @@ declare module 'vue' {
     ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
-    AResult: typeof import('ant-design-vue/es')['Result']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
@@ -47,7 +46,6 @@ declare module 'vue' {
     ATable: typeof import('ant-design-vue/es')['Table']
     ATag: typeof import('ant-design-vue/es')['Tag']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
-    AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
     Banner: typeof import('./src/components/Banner/index.vue')['default']
     Code: typeof import('./src/components/Code/index.vue')['default']
     Echarts: typeof import('./src/components/Echarts/index.vue')['default']
diff --git a/deliver-front/vue/src/api/dashboard.ts b/deliver-front/vue/src/api/dashboard.ts
index ffdea4e98cda2292b46dd04f4990d4285ae6232d..caf9e3e96b9e0d08c3122383c0485eaf02893cbc 100644
--- a/deliver-front/vue/src/api/dashboard.ts
+++ b/deliver-front/vue/src/api/dashboard.ts
@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import { R } from '@/types/type'
 
 export interface DashboardHeadData {
 	numberOfMessagesToday?: string
@@ -7,45 +8,75 @@ export interface DashboardHeadData {
 	numberOfApps?: string
 }
 
-type barDataPoint = [string, number, number]
-interface pieDataPoint {
+type MessageInfo = [string, string, string]
+export interface MessageInfoList {
+	messageInfoList: MessageInfo[]
+}
+
+interface DashboardInfo {
 	value: number
 	name: string
 }
+export interface DashboardInfoList {
+	dashboardInfoList: Array<DashboardInfo>
+}
 
-export type messageDataSource = barDataPoint[]
-export type templeteDataSource = pieDataPoint[]
-export type channelDataSource = pieDataPoint[]
-export type userDataSource = pieDataPoint[]
-
-export async function getDashboardHeadData(): Promise<any> {
+/**
+ * 请求控制面板头部数据
+ * @returns {Promise<R<DashboardHeadData>>} 控制面板头部数据
+ */
+export async function getDashboardHeadData(): Promise<R<DashboardHeadData>> {
 	return await request({
 		url: '/dashboard/getDashboardHeadData',
 		method: 'post'
 	})
 }
-export async function getMessageInfo(data: { dateSelect: number }): Promise<any> {
+
+/**
+ * 请求消息配置数据
+ * @param {{dateSelect: number}} data - 0、1、2、3 分别代表 日、周、月、年
+ * @returns {Promise<R<DashboardHeadData>>} 消息配置数据
+ */
+export async function getMessageInfo(data: { dateSelect: number }): Promise<R<MessageInfoList>> {
 	return await request({
 		url: '/dashboard/getMessageInfo/vue',
 		method: 'post',
 		data
 	})
 }
-export async function getTemplateInfo(data: { dateSelect: number }): Promise<any> {
+
+/**
+ * 请求模板配置数据
+ * @param {{dateSelect: number}} data - 0、1、2、3 分别代表 日、周、月、年
+ * @returns {Promise<R<DashboardHeadData>>} 模板配置数据
+ */
+export async function getTemplateInfo(data: { dateSelect: number }): Promise<R<DashboardInfoList>> {
 	return await request({
 		url: '/dashboard/getTemplateInfo',
 		method: 'post',
 		data
 	})
 }
-export async function getAppInfo(data: { dateSelect: number }): Promise<any> {
+
+/**
+ * 请求 APP 配置数据
+ * @param {{dateSelect: number}} data - 0、1、2、3 分别代表 日、周、月、年
+ * @returns {Promise<R<DashboardHeadData>>} APP 配置数据
+ */
+export async function getAppInfo(data: { dateSelect: number }): Promise<R<DashboardInfoList>> {
 	return await request({
 		url: '/dashboard/getAppInfo',
 		method: 'post',
 		data
 	})
 }
-export async function getPushUserInfo(data: { dateSelect: number }): Promise<any> {
+
+/**
+ * 请求推送用户配置数据
+ * @param {{dateSelect: number}} data - 0、1、2、3 分别代表 日、周、月、年
+ * @returns {Promise<R<DashboardHeadData>>} 推送用户数据
+ */
+export async function getPushUserInfo(data: { dateSelect: number }): Promise<R<DashboardInfoList>> {
 	return await request({
 		url: '/dashboard/getPushUserInfo',
 		method: 'post',
diff --git a/deliver-front/vue/src/components/Echarts/index.vue b/deliver-front/vue/src/components/Echarts/index.vue
index 14a0ca73fa2fc97eef6a909f82340389e2b466e7..3674218dd8bbe1d5ebb710370ad981f2ff81fd9b 100644
--- a/deliver-front/vue/src/components/Echarts/index.vue
+++ b/deliver-front/vue/src/components/Echarts/index.vue
@@ -34,16 +34,16 @@ const initChart = (): void => {
 const dashboardStore = useDashboardStore()
 const selectChange = async (e: any): Promise<void> => {
 	switch (e.target.name) {
-		case 'chartsMessage':
+		case 'chartsMessageOption':
 			myChart.setOption(await dashboardStore.getMessageInfo(e.target.value), { notMerge: true })
 			break
-		case 'chartsTemplate':
+		case 'chartsTemplateOption':
 			myChart.setOption(await dashboardStore.getTemplateInfo(e.target.value), { notMerge: true })
 			break
-		case 'chartsChannel':
+		case 'chartsAppOption':
 			myChart.setOption(await dashboardStore.getAppInfo(e.target.value), { notMerge: true })
 			break
-		case 'chartsAccount':
+		case 'chartsPushUserOption':
 			myChart.setOption(await dashboardStore.getPushUserInfo(e.target.value), { notMerge: true })
 			break
 		default:
diff --git a/deliver-front/vue/src/store/modules/dashboard.ts b/deliver-front/vue/src/store/modules/dashboard.ts
index 9d9e5443867fd72a57614c48b2cf9ecb29fa7a51..c1a3c9ea27817b2a2d81e03b7e1fcced89be8c2f 100644
--- a/deliver-front/vue/src/store/modules/dashboard.ts
+++ b/deliver-front/vue/src/store/modules/dashboard.ts
@@ -4,9 +4,18 @@ import {
 	getMessageInfo,
 	getTemplateInfo,
 	getAppInfo,
-	getPushUserInfo
+	getPushUserInfo,
+	DashboardHeadData
 } from '@/api/dashboard'
 import { type EChartsOption } from 'echarts'
+export interface EChartsOptionData {
+	chartsMessageOption?: EChartsOption
+	chartsTemplateOption?: EChartsOption
+	chartsAppOption?: EChartsOption
+	chartsPushUserOption?: EChartsOption
+}
+
+//echarts配置选项
 const chartsMessageOption: EChartsOption = {
 	legend: {
 		top: '20%'
@@ -50,7 +59,7 @@ const chartsTemplateOption: EChartsOption = {
 		}
 	]
 }
-const chartsChannelOption: EChartsOption = {
+const chartsAppOption: EChartsOption = {
 	tooltip: {
 		trigger: 'item'
 	},
@@ -83,7 +92,7 @@ const chartsChannelOption: EChartsOption = {
 		}
 	]
 }
-const chartsAccountOption: EChartsOption = {
+const chartsPushUserOption: EChartsOption = {
 	tooltip: {
 		trigger: 'item'
 	},
@@ -118,15 +127,39 @@ const chartsAccountOption: EChartsOption = {
 
 export const useDashboardStore = defineStore('dashboard', {
 	state: () => {
-		return {
-			num: 0
-		}
+		return {}
 	},
 	actions: {
-		async getDashboardHeadData() {
+		/**
+		 * 同时获取echarts四个数据
+		 * @returns {Promise<any>} 四个echarts配置数据
+		 */
+		async getDashboardData(): Promise<any> {
+			try {
+				const res = await Promise.all([
+					this.getMessageInfo(1),
+					this.getTemplateInfo(1),
+					this.getAppInfo(1),
+					this.getPushUserInfo(1)
+				])
+				return res
+			} catch (error) {
+				console.log('Error:', error)
+				throw error
+			}
+		},
+		/**
+		 * 获取控制面板头部数据
+		 * @returns {Promise<DashboardHeadData>} 控制面板头部数据
+		 */
+		async getDashboardHeadData(): Promise<DashboardHeadData> {
 			const dashboardHeadData = await getDashboardHeadData()
 			return dashboardHeadData.data
 		},
+		/**
+		 * 获取消息配置数据
+		 * @returns {Promise<EChartsOption>} 消息配置数据
+		 */
 		async getMessageInfo(dateSelect: number): Promise<EChartsOption> {
 			const messageData = await getMessageInfo({ dateSelect })
 			if (chartsMessageOption.dataset !== undefined) {
@@ -137,26 +170,38 @@ export const useDashboardStore = defineStore('dashboard', {
 			}
 			return chartsMessageOption
 		},
+		/**
+		 * 获取模板配置数据
+		 * @returns {Promise<EChartsOption>} 模板配置数据
+		 */
 		async getTemplateInfo(dateSelect: number): Promise<EChartsOption> {
-			const messageData = await getTemplateInfo({ dateSelect })
+			const templateInfo = await getTemplateInfo({ dateSelect })
 			if (chartsTemplateOption.series !== undefined) {
-				chartsTemplateOption.series[0].data = messageData.data?.dashboardInfoList
+				chartsTemplateOption.series[0].data = templateInfo.data.dashboardInfoList
 			}
 			return chartsTemplateOption
 		},
+		/**
+		 * 获取 APP 配置数据
+		 * @returns {Promise<EChartsOption>} APP 配置数据
+		 */
 		async getAppInfo(dateSelect: number): Promise<EChartsOption> {
-			const messageData = await getAppInfo({ dateSelect })
-			if (chartsChannelOption.series !== undefined) {
-				chartsChannelOption.series[0].data = messageData.data?.dashboardInfoList
+			const appInfo = await getAppInfo({ dateSelect })
+			if (chartsAppOption.series !== undefined) {
+				chartsAppOption.series[0].data = appInfo.data.dashboardInfoList
 			}
-			return chartsChannelOption
+			return chartsAppOption
 		},
+		/**
+		 * 获取推送用户配置数据
+		 * @returns {Promise<DashboardHeadData>} 推送用户配置数据
+		 */
 		async getPushUserInfo(dateSelect: number): Promise<EChartsOption> {
-			const messageData = await getPushUserInfo({ dateSelect })
-			if (chartsAccountOption.series !== undefined) {
-				chartsAccountOption.series[0].data = messageData.data?.dashboardInfoList
+			const pushUserInfo = await getPushUserInfo({ dateSelect })
+			if (chartsPushUserOption.series !== undefined) {
+				chartsPushUserOption.series[0].data = pushUserInfo.data.dashboardInfoList
 			}
-			return chartsAccountOption
+			return chartsPushUserOption
 		}
 	},
 	getters: {}
diff --git a/deliver-front/vue/src/types/type.ts b/deliver-front/vue/src/types/type.ts
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..96be2ecab5e4716c9bd726af2bf52979e3f93ca7 100644
--- a/deliver-front/vue/src/types/type.ts
+++ b/deliver-front/vue/src/types/type.ts
@@ -0,0 +1,5 @@
+export interface R<T> {
+	code: number
+	data: T
+	errorMessage: string | null
+}
diff --git a/deliver-front/vue/src/utils/iconFont.ts b/deliver-front/vue/src/utils/iconFont.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7defca581af60e0525b80d74642b0cb127b07107
--- /dev/null
+++ b/deliver-front/vue/src/utils/iconFont.ts
@@ -0,0 +1,5 @@
+import { createFromIconfontCN } from '@ant-design/icons-vue'
+
+export const IconFont = createFromIconfontCN({
+	scriptUrl: '//at.alicdn.com/t/c/font_4352695_8g0j2gcyhes.js'
+})
diff --git a/deliver-front/vue/src/utils/mapping.ts b/deliver-front/vue/src/utils/mapping.ts
new file mode 100644
index 0000000000000000000000000000000000000000..94a4e283d734bcf2161435f6c24ee12a9a28e147
--- /dev/null
+++ b/deliver-front/vue/src/utils/mapping.ts
@@ -0,0 +1,9 @@
+export const globalMap = new Map()
+globalMap.set('numberOfMessagesToday', '今日消息量')
+globalMap.set('numberOfPlatformFiles', '平台文件数')
+globalMap.set('accumulatedTemplateOwnership', '累计模板数')
+globalMap.set('numberOfApps', '渠道 APP 数')
+globalMap.set('chartsMessageOption', '消息详情')
+globalMap.set('chartsTemplateOption', '模板使用 TOP5')
+globalMap.set('chartsAppOption', '渠道 APP 使用 TOP5')
+globalMap.set('chartsPushUserOption', '推送用户 TOP5')
diff --git a/deliver-front/vue/src/views/Dashboard/index.vue b/deliver-front/vue/src/views/Dashboard/index.vue
index 9b4a6908a532de61bbc853b72e10657ecea884b9..f0fe3153b193cf0dc55ea5ffa9ed7c03503c60c6 100644
--- a/deliver-front/vue/src/views/Dashboard/index.vue
+++ b/deliver-front/vue/src/views/Dashboard/index.vue
@@ -1,43 +1,51 @@
 <script lang="ts" setup>
-import {
-	MessageOutlined,
-	FunnelPlotOutlined,
-	FileTextOutlined,
-	AppstoreOutlined,
-	QuestionCircleTwoTone
-} from '@ant-design/icons-vue'
 import Echarts from '@/components/Echarts/index.vue'
 import { useDashboardStore } from '@/store/modules/dashboard'
-import { type DashboardHeadData } from '@/api/dashboard'
-import { onMounted, ref } from 'vue'
-import { type EChartsOption } from 'echarts'
+import { onBeforeMount, reactive, ref } from 'vue'
+import { EChartsOptionData } from '@/store/modules/dashboard'
+import { globalMap } from '@/utils/mapping'
+import { IconFont } from '@/utils/iconFont'
+import { DashboardHeadData } from '@/api/dashboard'
 const dashboardStore = useDashboardStore()
+const echartsOptionData = reactive<EChartsOptionData>({
+	chartsMessageOption: {},
+	chartsTemplateOption: {},
+	chartsAppOption: {},
+	chartsPushUserOption: {}
+})
 const dashboardHeadData = ref<DashboardHeadData>({})
-const chartsMessageOption = ref<EChartsOption>({})
-const chartsTemplateOption = ref<EChartsOption>({})
-const chartsApplOption = ref<EChartsOption>({})
-const chartsUserOption = ref<EChartsOption>({})
-const getDashboardHeadData = async (): Promise<void> => {
-	dashboardHeadData.value = await dashboardStore.getDashboardHeadData()
-}
-const getMessageInfo = async (dataselect: number): Promise<void> => {
-	chartsMessageOption.value = await dashboardStore.getMessageInfo(dataselect)
-}
-const getTemplateInfo = async (dataselect: number): Promise<void> => {
-	chartsTemplateOption.value = await dashboardStore.getTemplateInfo(dataselect)
-}
-const getAppInfo = async (dataselect: number): Promise<void> => {
-	chartsApplOption.value = await dashboardStore.getAppInfo(dataselect)
+
+/**
+ *  将请求的数组变成对象
+ * @returns {Promise<void>}
+ */
+const getEChartsOptionData = async (): Promise<void> => {
+	try {
+		const res = await dashboardStore.getDashboardData()
+		Object.keys(echartsOptionData).forEach((key, index) => (echartsOptionData[key] = res[index]))
+	} catch (err) {
+		console.log('err', err)
+	}
 }
-const getPushUserInfo = async (dataselect: number): Promise<void> => {
-	chartsUserOption.value = await dashboardStore.getPushUserInfo(dataselect)
+
+/**
+ *  请求控制面板头部数据
+ * @returns {Promise<void>}
+ */
+const getDashboardHeadData = async (): Promise<void> => {
+	try {
+		dashboardHeadData.value = await dashboardStore.getDashboardHeadData()
+	} catch (error) {
+		console.log(error)
+	}
 }
-onMounted(async () => {
-	await getDashboardHeadData()
-	await getMessageInfo(1)
-	await getTemplateInfo(1)
-	await getAppInfo(1)
-	await getPushUserInfo(1)
+
+// 控制面板头部图标名称
+const icons = ['icon-message', 'icon-file', 'icon-template', 'icon-app']
+
+onBeforeMount(() => {
+	getDashboardHeadData()
+	getEChartsOptionData()
 })
 </script>
 
@@ -45,72 +53,19 @@ onMounted(async () => {
 	<div id="dashboard-container">
 		<div class="dashboard-info">
 			<a-row justify="space-between" align="middle" :gutter="24">
-				<a-col :span="6">
-					<a-card style="height: 96px">
-						<div class="card-statistic">
-							<span class="icon"><MessageOutlined /></span>
-							<a-statistic :value="dashboardHeadData.numberOfMessagesToday">
-								<template #title>
-									<span>今日消息量</span>
-									<a-tooltip placement="right">
-										<template #title>
-											<span>今日消息量</span>
-										</template>
-										<question-circle-two-tone style="margin-left: 5px" />
-									</a-tooltip>
-								</template>
-							</a-statistic>
-						</div>
-					</a-card>
-				</a-col>
-				<a-col :span="6">
+				<a-col :span="6" v-for="(value, name, index) in dashboardHeadData" :key="name">
 					<a-card style="height: 96px">
 						<div class="card-statistic">
-							<span class="icon"><FileTextOutlined /></span>
-							<a-statistic :value="dashboardHeadData.numberOfPlatformFiles">
+							<span class="icon">
+								<icon-font :type="icons[index]" />
+							</span>
+							<a-statistic :value="value">
 								<template #title>
-									<span>平台文件数</span>
+									<span>{{ globalMap.get(name) }}</span>
 									<a-tooltip placement="right">
 										<template #title>
-											<span>平台文件数</span>
+											<span>{{ globalMap.get(name) }}</span>
 										</template>
-										<question-circle-two-tone style="margin-left: 5px" />
-									</a-tooltip>
-								</template>
-							</a-statistic>
-						</div>
-					</a-card>
-				</a-col>
-				<a-col :span="6">
-					<a-card style="height: 96px">
-						<div class="card-statistic">
-							<span class="icon"><FunnelPlotOutlined /></span>
-							<a-statistic :value="dashboardHeadData.accumulatedTemplateOwnership">
-								<template #title>
-									<span>累计模板数</span>
-									<a-tooltip placement="right">
-										<template #title>
-											<span>累计模板数</span>
-										</template>
-										<question-circle-two-tone style="margin-left: 5px" />
-									</a-tooltip>
-								</template>
-							</a-statistic>
-						</div>
-					</a-card>
-				</a-col>
-				<a-col :span="6">
-					<a-card style="height: 96px">
-						<div class="card-statistic">
-							<span class="icon"><AppstoreOutlined /></span>
-							<a-statistic :value="dashboardHeadData.numberOfApps">
-								<template #title>
-									<span>渠道 APP 数</span>
-									<a-tooltip placement="right">
-										<template #title>
-											<span>渠道 APP 数</span>
-										</template>
-										<question-circle-two-tone style="margin-left: 5px" />
 									</a-tooltip>
 								</template>
 							</a-statistic>
@@ -121,36 +76,9 @@ onMounted(async () => {
 		</div>
 		<div class="dashboard-charts">
 			<a-row justify="space-between" align="middle" :gutter="[24, 24]">
-				<a-col :span="12">
-					<a-card>
-						<Echarts
-							cardName="消息详情"
-							name="chartsMessage"
-							:option="chartsMessageOption"></Echarts>
-					</a-card>
-				</a-col>
-				<a-col :span="12">
-					<a-card>
-						<Echarts
-							cardName="模板使用 TOP5"
-							name="chartsTemplate"
-							:option="chartsTemplateOption"></Echarts>
-					</a-card>
-				</a-col>
-				<a-col :span="12">
-					<a-card>
-						<Echarts
-							cardName="渠道 APP 使用 TOP5"
-							name="chartsChannel"
-							:option="chartsApplOption"></Echarts>
-					</a-card>
-				</a-col>
-				<a-col :span="12">
+				<a-col :span="12" v-for="(value, name) in echartsOptionData" :key="name">
 					<a-card>
-						<Echarts
-							cardName="推送用户 TOP5"
-							name="chartsAccount"
-							:option="chartsUserOption"></Echarts>
+						<Echarts :cardName="globalMap.get(name)" :name="name" :option="value"></Echarts>
 					</a-card>
 				</a-col>
 			</a-row>
@@ -162,11 +90,11 @@ onMounted(async () => {
 	display: flex;
 }
 
-.icon {
+.anticon {
 	width: 50px;
 	height: 50px;
 	margin-right: 15px;
-	font-size: 24px;
+	font-size: 25px;
 	line-height: 50px;
 	color: #1890ff;
 	text-align: center;