diff --git a/core/core-frontend/src/assets/svg/icon_file-font_colorful.svg b/core/core-frontend/src/assets/svg/icon_file-font_colorful.svg
new file mode 100644
index 0000000000..21e43cfc4a
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/icon_file-font_colorful.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.66669 4.16667C6.66669 3.24619 7.41288 2.5 8.33335 2.5H24.6548C24.8759 2.5 25.0878 2.5878 25.2441 2.74408L33.0893 10.5893C33.2456 10.7455 33.3334 10.9575 33.3334 11.1785V35.8333C33.3334 36.7538 32.5872 37.5 31.6667 37.5H8.33335C7.41288 37.5 6.66669 36.7538 6.66669 35.8333V4.16667Z" fill="#8F959E"/>
+<path d="M25 2.57495C25.09 2.6159 25.1728 2.67292 25.2441 2.74418L33.0893 10.5894C33.1605 10.6606 33.2175 10.7434 33.2585 10.8334H26.6667C25.7462 10.8334 25 10.0872 25 9.16677V2.57495Z" fill="#646A73"/>
+<path d="M17.5356 24.1H22.3756L19.9956 17.44H19.9556L17.5356 24.1ZM18.9556 15.72H21.0556L26.6356 30H24.5356L22.9756 25.7H16.9356L15.3356 30H13.3956L18.9556 15.72Z" fill="white"/>
+</svg>
diff --git a/core/core-frontend/src/components/icon-custom/src/Icon.vue b/core/core-frontend/src/components/icon-custom/src/Icon.vue
index b81164d617..5344b80761 100644
--- a/core/core-frontend/src/components/icon-custom/src/Icon.vue
+++ b/core/core-frontend/src/components/icon-custom/src/Icon.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 
 import _401 from '@/assets/svg/401.svg'
+import icon_file_font_colorful from '@/assets/svg/icon_file-font_colorful.svg'
 import relation_arrow_icon from '@/assets/svg/relation_arrow_icon.svg'
 import icon_data_visualization from '@/assets/svg/icon_data-visualization.svg'
 import icon_notification_filled from '@/assets/svg/icon_notification_filled.svg'
@@ -679,6 +680,7 @@ import icon_file_doc_colorful from '@/assets/svg/icon_file-doc_colorful.svg'
 import icon_font from '@/assets/svg/icon_font.svg'
 const iconMap = {
   '401': _401,
+  icon_file_font_colorful,
   relation_arrow_icon,
   icon_data_visualization,
   icon_notification_filled,
diff --git a/core/core-frontend/src/views/system/font/FontInfo.vue b/core/core-frontend/src/views/system/font/FontInfo.vue
new file mode 100644
index 0000000000..fd0299a756
--- /dev/null
+++ b/core/core-frontend/src/views/system/font/FontInfo.vue
@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    name?: string
+    size?: string
+  }>(),
+  {
+    name: '',
+    size: ''
+  }
+)
+
+const emits = defineEmits(['del'])
+const del = () => {
+  emits('del')
+}
+</script>
+
+<template>
+  <div class="font-info">
+    <el-icon class="font">
+      <Icon name="icon_file_font_colorful"></Icon>
+    </el-icon>
+    <div class="info">
+      <p class="name ellipsis">{{ name || '-' }}</p>
+      <p class="size ellipsis">{{ size || '-' }}</p>
+    </div>
+    <el-icon @click="del" class="delete">
+      <Icon name="icon_delete-trash_outlined"></Icon>
+    </el-icon>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.font-info {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 58px;
+  padding: 0 16px 0 12px;
+  border-radius: 4px;
+  border: 1px solid #dee0e3;
+  .font {
+    font-size: 40px;
+    margin-right: 8px;
+  }
+
+  .info {
+    font-family: '阿里巴巴普惠体 3.0 55 Regular L3';
+    font-style: normal;
+    font-weight: 400;
+    width: 80%;
+
+    .name {
+      color: #1f2329;
+      font-size: 14px;
+      line-height: 22px;
+      width: 100%;
+    }
+
+    .size {
+      color: #8f959e;
+      font-size: 12px;
+      line-height: 20px;
+    }
+  }
+
+  .delete {
+    cursor: pointer;
+    font-size: 16px;
+    margin-left: auto;
+  }
+}
+</style>
diff --git a/core/core-frontend/src/views/system/font/UploadDetail.vue b/core/core-frontend/src/views/system/font/UploadDetail.vue
new file mode 100644
index 0000000000..4a51071b24
--- /dev/null
+++ b/core/core-frontend/src/views/system/font/UploadDetail.vue
@@ -0,0 +1,144 @@
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import { uploadFile } from '@/api/datasource'
+import FontInfo from './FontInfo.vue'
+import { ElMessage } from 'element-plus-secondary'
+const state = reactive({
+  fileList: null
+})
+const loading = ref(false)
+const upload = ref()
+const uploadExcel = () => {
+  const formData = new FormData()
+  formData.append('file', state.fileList.raw)
+  loading.value = true
+  return uploadFile(formData)
+    .then(() => {
+      upload.value?.clearFiles()
+      loading.value = false
+    })
+    .catch(error => {
+      if (error.code === 'ECONNABORTED') {
+        ElMessage({
+          type: 'error',
+          message: error.message,
+          showClose: true
+        })
+      }
+      loading.value = false
+    })
+}
+const dialogTitle = ref('')
+const dialogVisible = ref(false)
+const isRename = ref(false)
+
+const init = (val, rename) => {
+  dialogTitle.value = val || '添加字体'
+  isRename.value = rename || false
+  dialogVisible.value = true
+}
+const ruleForm = reactive({
+  name: ''
+})
+
+const fontDel = () => {
+  state.fileList = null
+}
+
+const ruleFormRef = ref()
+const rules = {
+  name: [
+    { required: true, message: '请输入字体名称', trigger: 'blur' },
+    { min: 1, max: 50, message: '字符长度1-50', trigger: 'blur' }
+  ]
+}
+defineExpose({
+  init
+})
+
+const onChange = file => {
+  state.fileList = file
+}
+
+const uploadFail = response => {
+  let myError = response.toString()
+  myError.replace('Error: ', '')
+}
+
+const confirm = () => {
+  ruleFormRef.value.validate(val => {
+    if (val) {
+      state.fileList = null
+      dialogVisible.value = false
+    }
+  })
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="420">
+    <el-form
+      ref="ruleFormRef"
+      :model="ruleForm"
+      label-position="top"
+      :rules="rules"
+      label-width="auto"
+      class="demo-ruleForm"
+    >
+      <el-form-item label="字体名称" prop="name">
+        <el-input placeholder="请输入字体名称" v-model="ruleForm.name" />
+      </el-form-item>
+      <el-form-item v-if="!isRename" label="字库文件">
+        <el-upload
+          action=""
+          :multiple="false"
+          ref="uploadAgain"
+          :show-file-list="false"
+          accept=".ttf"
+          :on-change="onChange"
+          :http-request="uploadExcel"
+          :on-error="uploadFail"
+          name="file"
+          v-show="!state.fileList"
+        >
+          <template #trigger>
+            <el-button v-loading="loading" secondary>
+              <template #icon>
+                <Icon name="icon_upload_outlined"></Icon>
+              </template>
+              上传字库文件
+            </el-button>
+          </template>
+        </el-upload>
+        <FontInfo
+          @del="fontDel"
+          v-show="state.fileList"
+          size="52.2M"
+          name="OsakaMono.ttf"
+        ></FontInfo>
+        <el-upload
+          action=""
+          :multiple="false"
+          ref="uploadAgain"
+          :show-file-list="false"
+          accept=".ttf"
+          :on-change="onChange"
+          :http-request="uploadExcel"
+          :on-error="uploadFail"
+          name="file"
+          v-show="state.fileList"
+        >
+          <template #trigger>
+            <el-button text> 重新上传 </el-button>
+          </template>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirm"> 确定 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
diff --git a/core/core-frontend/src/views/system/font/index.vue b/core/core-frontend/src/views/system/font/index.vue
index d23abf3dfb..9a2321fc65 100644
--- a/core/core-frontend/src/views/system/font/index.vue
+++ b/core/core-frontend/src/views/system/font/index.vue
@@ -1,7 +1,12 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
+import UploadDetail from './UploadDetail.vue'
 const fontKeyword = ref('')
 const fontList = ref([1, 2, 3, 4, 5])
+const uploadDetail = ref()
+const uploadFont = (title, isRename?: boolean) => {
+  uploadDetail.value.init(title, isRename)
+}
 </script>
 
 <template>
@@ -33,14 +38,15 @@ const fontList = ref([1, 2, 3, 4, 5])
           更新时间：2022-04-20 20:35:08 <span class="line"></span> 字库文件：-
         </div>
         <div class="font-upload_btn">
-          <el-button secondary>上传字库文件</el-button>
+          <el-button @click="uploadFont('添加字体')" secondary>上传字库文件</el-button>
           <el-button secondary>设为默认字体</el-button>
-          <el-button secondary>重命名</el-button>
+          <el-button @click="uploadFont('重命名', true)" secondary>重命名</el-button>
           <el-button secondary>删除</el-button>
         </div>
       </div>
     </div>
   </div>
+  <UploadDetail ref="uploadDetail"></UploadDetail>
 </template>
 
 <style lang="less" scoped>