diff --git a/package-lock.json b/package-lock.json
index c375857fee6f087bcfe9b2332107d3780e367728..6ef44e35fe8feab4646ab74b5f4fcb79cf2035d1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@element-plus/icons": "^0.0.11",
         "@element-plus/icons-vue": "^2.0.6",
+        "@highlightjs/vue-plugin": "^2.1.0",
         "axios": "^0.27.2",
         "echarts": "5.3.2",
         "element-plus": "^2.1.11",
@@ -333,6 +334,15 @@
         "@floating-ui/core": "^0.7.3"
       }
     },
+    "node_modules/@highlightjs/vue-plugin": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/@highlightjs/vue-plugin/-/vue-plugin-2.1.0.tgz",
+      "integrity": "sha512-E+bmk4ncca+hBEYRV2a+1aIzIV0VSY/e5ArjpuSN9IO7wBJrzUE2u4ESCwrbQD7sAy+jWQjkV5qCCWgc+pu7CQ==",
+      "peerDependencies": {
+        "highlight.js": "^11.0.1",
+        "vue": "^3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -5028,6 +5038,12 @@
         "@floating-ui/core": "^0.7.3"
       }
     },
+    "@highlightjs/vue-plugin": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/@highlightjs/vue-plugin/-/vue-plugin-2.1.0.tgz",
+      "integrity": "sha512-E+bmk4ncca+hBEYRV2a+1aIzIV0VSY/e5ArjpuSN9IO7wBJrzUE2u4ESCwrbQD7sAy+jWQjkV5qCCWgc+pu7CQ==",
+      "requires": {}
+    },
     "@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
diff --git a/public/template/upload/avatarUploader.vue b/public/template/upload/avatarUploader.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a95e112068424cf623577c088798ac625c293730
--- /dev/null
+++ b/public/template/upload/avatarUploader.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import QuickUpload from '@/components/QuickUpload/index.vue'
+</script>
+
+<template>
+  <quick-upload
+    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+    type="avatar"
+  >
+  </quick-upload>
+</template>
diff --git a/public/template/upload/baseDefault.vue b/public/template/upload/baseDefault.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9efe4a83010ddd12893366196cdadc0001da9191
--- /dev/null
+++ b/public/template/upload/baseDefault.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import QuickToolbar from '@/components/QuickToolbar/index.vue'
+
+const handleAdd = () => {
+  console.log('handleAdd')
+}
+const handleBatchDelete = () => {
+  console.log('handleBatchDelete')
+}
+const handleImport = () => {
+  console.log('handleImport')
+}
+const handleExport = () => {
+  console.log('handleExport')
+}
+const handlePrint = () => {
+  console.log('handlePrint')
+}
+const handleRefresh = () => {
+  console.log('handleRefresh')
+}
+</script>
+<template>
+  <quick-toolbar
+    :table-toolbar="true"
+    @on-add="handleAdd"
+    @on-batch-delete="handleBatchDelete"
+    @on-import="handleImport"
+    @on-export="handleExport"
+    @on-print="handlePrint"
+    @on-refresh="handleRefresh"
+  ></quick-toolbar>
+</template>
diff --git a/src/components/QuickUpload/index.vue b/src/components/QuickUpload/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9de0795f84ba84b65144839af90d2bf2fd813c95
--- /dev/null
+++ b/src/components/QuickUpload/index.vue
@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { ref, defineProps, toRefs, Ref } from 'vue'
+import { Plus } from '@element-plus/icons-vue'
+import type {
+  ElMessage,
+  ElMessageBox,
+  UploadProps,
+  UploadUserFile,
+} from 'element-plus'
+
+const props = defineProps({
+  action: {
+    type: String,
+    default: 'https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15',
+  },
+  type: {
+    type: [Boolean, String],
+    default: false,
+  },
+})
+
+const { action, type } = toRefs(props) as {
+  action: Ref<string>
+  type: Ref<boolean | string>
+}
+
+const imageUrl = ref('')
+// const tip = ref('jpg/png files with a size less than 500KB.')
+// const multiple = ref(false)
+// const limit = ref(3)
+// const fileList = ref<UploadUserFile[]>([])
+</script>
+
+<template>
+  <el-upload class="upload-demo" :action="action">
+    <template v-if="type === 'avatar'">
+      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+    </template>
+    <template v-else>
+      <el-button type="primary">上传</el-button>
+    </template>
+  </el-upload>
+</template>
+
+<style scoped>
+.avatar-uploader .avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
+<style>
+::v-deep .avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color) !important;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+</style>
diff --git a/src/views/components/upload/avatarUploader.vue b/src/views/components/upload/avatarUploader.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a95e112068424cf623577c088798ac625c293730
--- /dev/null
+++ b/src/views/components/upload/avatarUploader.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import QuickUpload from '@/components/QuickUpload/index.vue'
+</script>
+
+<template>
+  <quick-upload
+    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+    type="avatar"
+  >
+  </quick-upload>
+</template>
diff --git a/src/views/components/upload/baseDefault.vue b/src/views/components/upload/baseDefault.vue
new file mode 100644
index 0000000000000000000000000000000000000000..597d808886e7dcbad8c72be0c42c0558de33b138
--- /dev/null
+++ b/src/views/components/upload/baseDefault.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import QuickUpload from '@/components/QuickUpload/index.vue'
+</script>
+
+<template>
+  <quick-upload
+    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+  ></quick-upload>
+</template>
diff --git a/src/views/components/upload/index.vue b/src/views/components/upload/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4419ff9ff718ad0a7116468ecceecbe1bf1d295b
--- /dev/null
+++ b/src/views/components/upload/index.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { reactive, onMounted } from 'vue'
+import QuickCode from '@/components/QuickCode/index.vue'
+import baseDefault from './baseDefault.vue'
+import avatarUploader from './avatarUploader.vue'
+import { getFile } from '@/api/file'
+
+const form = reactive({
+  defaultCode: '',
+  avatarCode: '',
+})
+onMounted(() => {
+  getFile('/template/upload/baseDefault.vue').then((res: any) => {
+    form.defaultCode = res
+  })
+  getFile('/template/upload/avatarUploader.vue').then((res: any) => {
+    debugger
+    form.avatarCode = res
+  })
+})
+</script>
+<template>
+  <div class="component-demo">
+    <el-card>
+      <template #header>
+        <div class="card-header card-name">
+          <h2>默认</h2>
+        </div>
+        <div class="card-description">
+          <p>常规上传</p>
+        </div>
+      </template>
+      <base-default></base-default>
+      <quick-code :autodetect="true" :code="form.defaultCode"></quick-code>
+    </el-card>
+    <el-card class="item" shadow="always">
+      <template #header>
+        <div class="card-header card-name">
+          <h2>头像</h2>
+        </div>
+        <div class="card-description">
+          <p>头像上传</p>
+        </div>
+      </template>
+      <avatar-uploader></avatar-uploader>
+      <quick-code :autodetect="true" :code="form.avatarCode"></quick-code>
+    </el-card>
+  </div>
+</template>
+<style lang="scss" scoped>
+.component-demo {
+  .card-name {
+  }
+  .card-description {
+    margin-top: 10px;
+  }
+  .item {
+    margin-top: 10px;
+  }
+}
+</style>