feat(frontend): Element Plus 改按需引入,首屏 425.1->158.8KB(R36)
- vite.config.js: 新增 unplugin-vue-components + ElementPlusResolver;
optimizeDeps.include 动态生成 118 项无扩展名 specifier(glob/.mjs 皆静默失效)
- main.js: 删 app.use(ElementPlus) 与全量 CSS;改 provideGlobalConfig(locale, app, true);
显式引入 4 个函数式组件样式(message/message-box/notification/loading)
- views/Upload.vue: 3 处 h(resolveComponent('el-xxx')) 改显式组件引用;清 2 处死导入
- devDep: unplugin-vue-components@^32.1.0
- .gitignore: 忽略 vite.config.js.timestamp-*.mjs
验证:dist 渲染 9/9 · dist 登录后 9/9 · dev 通道致命错误 0/告警 0
瘦身:首屏 425.1->158.8KB(-62.6%);主包 JS 1112.9->281.09KB
This commit is contained in:
@@ -136,7 +136,7 @@
|
||||
* 6. 上传历史列表
|
||||
* 7. 教师组双上传区(教学方案 + 说课PPT)
|
||||
*/
|
||||
import { ref, computed, onMounted, onUnmounted, h, resolveComponent } from 'vue'
|
||||
import { ref, computed, onMounted, onUnmounted, h } from 'vue'
|
||||
import { ElMessage, ElMessageBox, ElUpload, ElProgress, ElButton, ElTag, ElIcon } from 'element-plus'
|
||||
import { ArrowLeft, HomeFilled, Clock, UploadFilled, Delete } from '@element-plus/icons-vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
@@ -305,7 +305,7 @@ onUnmounted(() => {
|
||||
* file-upload-area 是一个内联组件
|
||||
* 为了保持 Vue SFC 的简洁性,我们用 defineComponent
|
||||
*/
|
||||
import { defineComponent, ref, reactive, h, resolveComponent, computed } from 'vue'
|
||||
import { defineComponent, ref, reactive, h, computed } from 'vue'
|
||||
import { ElMessage, ElUpload, ElProgress, ElButton, ElTag, ElIcon } from 'element-plus'
|
||||
import { UploadFilled, Delete } from '@element-plus/icons-vue'
|
||||
import * as uploadApi from '@/api/upload'
|
||||
@@ -455,7 +455,7 @@ const FileUploadArea = defineComponent({
|
||||
e.currentTarget.previousElementSibling?.click()
|
||||
},
|
||||
}, [
|
||||
h(resolveComponent('el-icon'), { size: 48 }, () => h(UploadFilled)),
|
||||
h(ElIcon, { size: 48 }, () => h(UploadFilled)),
|
||||
h('div', { class: 'drag-text' }, '拖拽文件到此处或 '),
|
||||
h('em', null, '点击上传'),
|
||||
h('div', { class: 'drag-hint' },
|
||||
@@ -488,7 +488,7 @@ const FileUploadArea = defineComponent({
|
||||
|
||||
// 上传进度
|
||||
uploading.value ? h('div', { class: 'upload-progress' }, [
|
||||
h(resolveComponent('el-progress'), {
|
||||
h(ElProgress, {
|
||||
percentage: uploadPercent.value,
|
||||
status: uploadPercent.value >= 100 ? 'success' : undefined,
|
||||
}),
|
||||
@@ -496,7 +496,7 @@ const FileUploadArea = defineComponent({
|
||||
|
||||
// 已上传文件信息
|
||||
uploadedInfo.value ? h('div', { class: 'uploaded-card' }, [
|
||||
h(resolveComponent('el-tag'), { type: 'success', size: 'small' }, () => '上传成功'),
|
||||
h(ElTag, { type: 'success', size: 'small' }, () => '上传成功'),
|
||||
h('div', { class: 'uploaded-name' }, uploadedInfo.value.fileName),
|
||||
h('div', { class: 'uploaded-meta' }, [
|
||||
h('span', null, formatFileSize(uploadedInfo.value.fileSize)),
|
||||
|
||||
Reference in New Issue
Block a user