Merge branch 'master' into master

components.d.ts

@@ -24,6 +24,7 @@ declare module '@vue/runtime-core' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']

package-lock.json

@@ -2193,6 +2193,11 @@
 			"integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
 			"dev": true
 		},
+		"adler-32": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+			"integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A=="
+		},
 		"anymatch": {
 			"version": "3.1.2",
 			"resolved": "https://repo.huaweicloud.com/repository/npm/anymatch/-/anymatch-3.1.2.tgz",
@@ -2252,6 +2257,15 @@
 				"fill-range": "^7.0.1"
 			}
 		},
+		"cfb": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+			"integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+			"requires": {
+				"adler-32": "~1.3.0",
+				"crc-32": "~1.2.0"
+			}
+		},
 		"chokidar": {
 			"version": "3.5.3",
 			"resolved": "https://repo.huaweicloud.com/repository/npm/chokidar/-/chokidar-3.5.3.tgz",
@@ -2268,6 +2282,11 @@
 				"readdirp": "~3.6.0"
 			}
 		},
+		"codepage": {
+			"version": "1.15.0",
+			"resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+			"integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA=="
+		},
 		"combined-stream": {
 			"version": "1.0.8",
 			"resolved": "https://repo.huaweicloud.com/repository/npm/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2281,6 +2300,11 @@
 			"resolved": "https://repo.huaweicloud.com/repository/npm/core-js-pure/-/core-js-pure-3.24.1.tgz",
 			"integrity": "sha512-r1nJk41QLLPyozHUUPmILCEMtMw24NG4oWK6RbsDdjzQgg9ZvrUsPBj1MnG0wXXp1DCDU6j+wUvEmBSrtRbLXg=="
 		},
+		"crc-32": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+			"integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ=="
+		},
 		"cropperjs": {
 			"version": "1.5.12",
 			"resolved": "https://repo.huaweicloud.com/repository/npm/cropperjs/-/cropperjs-1.5.12.tgz",
@@ -2570,6 +2594,11 @@
 				"mime-types": "^2.1.12"
 			}
 		},
+		"frac": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+			"integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA=="
+		},
 		"fsevents": {
 			"version": "2.3.2",
 			"resolved": "https://repo.huaweicloud.com/repository/npm/fsevents/-/fsevents-2.3.2.tgz",
@@ -2896,6 +2925,14 @@
 			"resolved": "https://repo.huaweicloud.com/repository/npm/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
 			"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
 		},
+		"ssf": {
+			"version": "0.11.2",
+			"resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+			"integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+			"requires": {
+				"frac": "~1.1.2"
+			}
+		},
 		"strip-literal": {
 			"version": "0.4.0",
 			"resolved": "https://repo.huaweicloud.com/repository/npm/strip-literal/-/strip-literal-0.4.0.tgz",
@@ -3105,6 +3142,30 @@
 			"resolved": "https://repo.huaweicloud.com/repository/npm/webpack-virtual-modules/-/webpack-virtual-modules-0.4.4.tgz",
 			"integrity": "sha512-h9atBP/bsZohWpHnr+2sic8Iecb60GxftXsWNLLLSqewgIsGzByd2gcIID4nXcG+3tNe4GQG3dLcff3kXupdRA==",
 			"dev": true
+		},
+		"wmf": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+			"integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw=="
+		},
+		"word": {
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+			"integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA=="
+		},
+		"xlsx": {
+			"version": "0.18.5",
+			"resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+			"integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+			"requires": {
+				"adler-32": "~1.3.0",
+				"cfb": "~1.2.1",
+				"codepage": "~1.15.0",
+				"crc-32": "~1.2.1",
+				"ssf": "~0.11.2",
+				"wmf": "~1.0.1",
+				"word": "~0.3.0"
+			}
 		}
 	}
 }

package.json

@@ -17,7 +17,8 @@
 		"vue-cropperjs": "^5.0.0",
 		"vue-router": "^4.1.3",
 		"vue-schart": "^2.0.0",
-		"wangeditor": "^4.7.15"
+		"wangeditor": "^4.7.15",
+		"xlsx": "^0.18.5"
 	},
 	"devDependencies": {
 		"@vitejs/plugin-vue": "^3.0.0",

src/App.vue

@@ -1,7 +1,13 @@
 <template>
+    <el-config-provider :locale="zhCn">
         <router-view />
+    </el-config-provider>
 </template>
 
+<script setup lang="ts">
+import { ElConfigProvider } from 'element-plus';
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
+</script>
 <style>
 @import './assets/css/main.css';
 @import './assets/css/color-dark.css';

src/assets/css/color-dark.css

@@ -10,12 +10,7 @@
 .plugins-tips a{
     color: #20a0ff;
 }
-.el-upload--text em {
+
-    color: #20a0ff;
-}
-.pure-button{
-    background: #20a0ff;
-}
 .tags-li.active {
     border: 1px solid #409EFF;
     background-color: #409EFF;

src/assets/css/main.css

@@ -111,70 +111,6 @@ a {
     padding-bottom: 0;
 }
 
-/*Upload*/
-
-.pure-button {
-    width: 150px;
-    height: 40px;
-    line-height: 40px;
-    text-align: center;
-    color: #fff;
-    border-radius: 3px;
-}
-
-.g-core-image-corp-container .info-aside {
-    height: 45px;
-}
-
-.el-upload--text {
-    background-color: #fff;
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    box-sizing: border-box;
-    width: 360px;
-    height: 180px;
-    text-align: center;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-}
-
-.el-upload--text .el-icon-upload {
-    font-size: 67px;
-    color: #97a8be;
-    margin: 40px 0 16px;
-    line-height: 50px;
-}
-
-.el-upload--text {
-    color: #97a8be;
-    font-size: 14px;
-    text-align: center;
-}
-
-.el-upload--text em {
-    font-style: normal;
-}
-
-/*VueEditor*/
-
-.ql-container {
-    min-height: 400px;
-}
-
-.ql-snow .ql-tooltip {
-    transform: translateX(117.5px) translateY(10px) !important;
-}
-
-.editor-btn {
-    margin-top: 20px;
-}
-
-/*markdown*/
-
-.v-note-wrapper .v-note-panel {
-    min-height: 500px;
-}
 
 [class*=" el-icon-"], [class^=el-icon-] {
     speak: none;

src/components/sidebar.vue

@@ -60,19 +60,36 @@ const items = [
         icon: 'Odometer',
         index: '/dashboard',
         title: '系统首页',
-		permiss: '1'
+        permiss: '1',
     },
     {
         icon: 'Calendar',
+        index: '1',
+        title: '表格相关',
+        permiss: '2',
+        subs: [
+            {
                 index: '/table',
-		title: '基础表格',
+                title: '常用表格',
-		permiss: '2'
+                permiss: '2',
+            },
+            {
+                index: '/import',
+                title: '导入Excel',
+                permiss: '2',
+            },
+            {
+                index: '/export',
+                title: '导出Excel',
+                permiss: '2',
+            },
+        ],
     },
     {
         icon: 'DocumentCopy',
         index: '/tabs',
         title: 'tab选项卡',
-		permiss: '3'
+        permiss: '3',
     },
     {
         icon: 'Edit',
@@ -83,12 +100,12 @@ const items = [
             {
                 index: '/form',
                 title: '基本表单',
-				permiss: '5'
+                permiss: '5',
             },
             {
                 index: '/upload',
                 title: '文件上传',
-				permiss: '6'
+                permiss: '6',
             },
             {
                 index: '4',
@@ -98,41 +115,41 @@ const items = [
                     {
                         index: '/editor',
                         title: '富文本编辑器',
-						permiss: '8'
+                        permiss: '8',
                     },
                     {
                         index: '/markdown',
                         title: 'markdown编辑器',
-						permiss: '9'
+                        permiss: '9',
-					}
+                    },
-				]
+                ],
-			}
+            },
-		]
+        ],
     },
     {
         icon: 'Setting',
         index: '/icon',
         title: '自定义图标',
-		permiss: '10'
+        permiss: '10',
     },
     {
         icon: 'PieChart',
         index: '/charts',
         title: 'schart图表',
-		permiss: '11'
+        permiss: '11',
     },
     {
         icon: 'Warning',
         index: '/permission',
         title: '权限管理',
-		permiss: '13'
+        permiss: '13',
     },
     {
         icon: 'CoffeeCup',
         index: '/donate',
         title: '支持作者',
-		permiss: '14'
+        permiss: '14',
-	}
+    },
 ];
 
 const route = useRoute();

src/main.ts

@@ -1,34 +1,28 @@
-import {createApp} from 'vue'
+import { createApp } from 'vue';
-import { createPinia } from 'pinia'
+import { createPinia } from 'pinia';
-import ElementPlus from 'element-plus'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue';
-import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import App from './App.vue';
-import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import router from './router';
-import App from './App.vue'
+import { usePermissStore } from './store/permiss';
-import router from './router'
+import 'element-plus/dist/index.css';
-import { usePermissStore } from './store/permiss'
+import './assets/css/icon.css';
-import 'element-plus/dist/index.css'
-import './assets/css/icon.css'
 
+const app = createApp(App);
+app.use(createPinia());
+app.use(router);
 
-const app = createApp(App)
-
-app.use(createPinia())
-app.use(router)
-app.use(ElementPlus, {
-    locale: zhCn,
-})
 // 注册elementplus图标
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-    app.component(key, component)
+    app.component(key, component);
 }
 // 自定义权限指令
-const permiss = usePermissStore()
+const permiss = usePermissStore();
 app.directive('permiss', {
     mounted(el, binding) {
-        if(!permiss.key.includes(String(binding.value))){
+        if (!permiss.key.includes(String(binding.value))) {
             el['hidden'] = true;
         }
-    }
+    },
-})
+});
 
-app.mount('#app')
+app.mount('#app');

src/views/dashboard.vue

@@ -26,10 +26,13 @@
 						</div>
 					</template>
 					Vue
-					<el-progress :percentage="71.3" color="#42b983"></el-progress>JavaScript
+					<el-progress :percentage="79.4" color="#42b983"></el-progress>
-					<el-progress :percentage="24.1" color="#f1e05a"></el-progress>CSS
+					TypeScript
-					<el-progress :percentage="13.7"></el-progress>HTML
+					<el-progress :percentage="14" color="#f1e05a"></el-progress>
-					<el-progress :percentage="5.9" color="#f56c6c"></el-progress>
+					CSS
+					<el-progress :percentage="5.6"></el-progress>
+					HTML
+					<el-progress :percentage="1" color="#f56c6c"></el-progress>
 				</el-card>
 			</el-col>
 			<el-col :span="16">

src/views/export.vue

@@ -0,0 +1,98 @@
+<template>
+    <div>
+        <div class="container">
+            <div class="handle-box">
+                <el-button type="primary" @click="exportXlsx">导出Excel</el-button>
+            </div>
+            <el-table :data="tableData" border class="table" header-cell-class-name="table-header">
+                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
+                <el-table-column prop="name" label="姓名"></el-table-column>
+                <el-table-column prop="sno" label="学号"></el-table-column>
+                <el-table-column prop="class" label="班级"></el-table-column>
+                <el-table-column prop="age" label="年龄"></el-table-column>
+                <el-table-column prop="sex" label="性别"></el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" name="export">
+import { ref } from 'vue';
+import * as XLSX from 'xlsx';
+
+interface TableItem {
+    id: number;
+    name: string;
+    sno: string;
+    class: string;
+    age: string;
+    sex: string;
+}
+
+const tableData = ref<TableItem[]>([]);
+// 获取表格数据
+const getData = () => {
+    tableData.value = [
+        {
+            id: 1,
+            name: '小明',
+            sno: 'S001',
+            class: '一班',
+            age: '10',
+            sex: '男',
+        },
+        {
+            id: 2,
+            name: '小红',
+            sno: 'S002',
+            class: '一班',
+            age: '9',
+            sex: '女',
+        },
+    ];
+};
+getData();
+
+const list = [['序号', '姓名', '学号', '班级', '年龄', '性别']];
+const exportXlsx = () => {
+    tableData.value.map((item: any, i: number) => {
+        const arr: any[] = [i + 1];
+        arr.push(...[item.name, item.sno, item.class, item.age, item.sex]);
+        list.push(arr);
+    });
+    let WorkSheet = XLSX.utils.aoa_to_sheet(list);
+    let new_workbook = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(new_workbook, WorkSheet, '第一页');
+    XLSX.writeFile(new_workbook, `表格.xlsx`);
+};
+</script>
+
+<style scoped>
+.handle-box {
+    margin-bottom: 20px;
+}
+
+.handle-select {
+    width: 120px;
+}
+
+.handle-input {
+    width: 300px;
+}
+.table {
+    width: 100%;
+    font-size: 14px;
+}
+.red {
+    color: #f56c6c;
+}
+.mr10 {
+    margin-right: 10px;
+}
+.table-td-thumb {
+    display: block;
+    margin: auto;
+    width: 40px;
+    height: 40px;
+}
+</style>

src/views/form.vue

@@ -7,9 +7,9 @@
                 </el-form-item>
                 <el-form-item label="选择器" prop="region">
                     <el-select v-model="form.region" placeholder="请选择">
-						<el-option key="bbk" label="步步高" value="bbk"></el-option>
+                        <el-option key="小明" label="小明" value="小明"></el-option>
-						<el-option key="xtc" label="小天才" value="xtc"></el-option>
+                        <el-option key="小红" label="小红" value="小红"></el-option>
-						<el-option key="imoo" label="imoo" value="imoo"></el-option>
+                        <el-option key="小白" label="小白" value="小白"></el-option>
                     </el-select>
                 </el-form-item>
                 <el-form-item label="日期时间">
@@ -39,16 +39,16 @@
                 </el-form-item>
                 <el-form-item label="多选框" prop="type">
                     <el-checkbox-group v-model="form.type">
-						<el-checkbox label="步步高" name="type"></el-checkbox>
+                        <el-checkbox label="小明" name="type"></el-checkbox>
-						<el-checkbox label="小天才" name="type"></el-checkbox>
+                        <el-checkbox label="小红" name="type"></el-checkbox>
-						<el-checkbox label="imoo" name="type"></el-checkbox>
+                        <el-checkbox label="小白" name="type"></el-checkbox>
                     </el-checkbox-group>
                 </el-form-item>
                 <el-form-item label="单选框" prop="resource">
                     <el-radio-group v-model="form.resource">
-						<el-radio label="步步高"></el-radio>
+                        <el-radio label="小明"></el-radio>
-						<el-radio label="小天才"></el-radio>
+                        <el-radio label="小红"></el-radio>
-						<el-radio label="imoo"></el-radio>
+                        <el-radio label="小白"></el-radio>
                     </el-radio-group>
                 </el-form-item>
                 <el-form-item label="文本框" prop="desc">
@@ -79,13 +79,13 @@ const options = [
                 children: [
                     {
                         value: 'tianhe',
-						label: '天河区'
+                        label: '天河区',
                     },
                     {
                         value: 'haizhu',
-						label: '海珠区'
+                        label: '海珠区',
-					}
+                    },
-				]
+                ],
             },
             {
                 value: 'dongguan',
@@ -93,15 +93,15 @@ const options = [
                 children: [
                     {
                         value: 'changan',
-						label: '长安镇'
+                        label: '长安镇',
                     },
                     {
                         value: 'humen',
-						label: '虎门镇'
+                        label: '虎门镇',
-					}
+                    },
-				]
+                ],
-			}
+            },
-		]
+        ],
     },
     {
         value: 'hunan',
@@ -113,15 +113,15 @@ const options = [
                 children: [
                     {
                         value: 'yuelu',
-						label: '岳麓区'
+                        label: '岳麓区',
-					}
+                    },
-				]
+                ],
-			}
+            },
-		]
+        ],
-	}
+    },
 ];
 const rules: FormRules = {
-	name: [{ required: true, message: '请输入表单名称', trigger: 'blur' }]
+    name: [{ required: true, message: '请输入表单名称', trigger: 'blur' }],
 };
 const formRef = ref<FormInstance>();
 const form = reactive({
@@ -130,16 +130,16 @@ const form = reactive({
     date1: '',
     date2: '',
     delivery: true,
-	type: ['步步高'],
+    type: ['小明'],
-	resource: '小天才',
+    resource: '小红',
     desc: '',
-	options: []
+    options: [],
 });
 // 提交
 const onSubmit = (formEl: FormInstance | undefined) => {
     // 表单校验
     if (!formEl) return;
-	formEl.validate(valid => {
+    formEl.validate((valid) => {
         if (valid) {
             console.log(form);
             ElMessage.success('提交成功！');

src/views/import.vue

@@ -0,0 +1,118 @@
+<template>
+    <div>
+        <div class="container">
+            <div class="handle-box">
+                <el-upload
+                    action="#"
+                    :limit="1"
+                    accept=".xlsx, .xls"
+                    :show-file-list="false"
+                    :before-upload="beforeUpload"
+                    :http-request="handleMany"
+                >
+                    <el-button class="mr10" type="success">批量导入</el-button>
+                </el-upload>
+                <el-link href="/template.xlsx" target="_blank">下载模板</el-link>
+            </div>
+            <el-table :data="tableData" border class="table" header-cell-class-name="table-header">
+                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
+                <el-table-column prop="name" label="姓名"></el-table-column>
+                <el-table-column prop="sno" label="学号"></el-table-column>
+                <el-table-column prop="class" label="班级"></el-table-column>
+                <el-table-column prop="age" label="年龄"></el-table-column>
+                <el-table-column prop="sex" label="性别"></el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" name="import">
+import { UploadProps } from 'element-plus';
+import { ref, reactive } from 'vue';
+import * as XLSX from 'xlsx';
+
+interface TableItem {
+    id: number;
+    name: string;
+    sno: string;
+    class: string;
+    age: string;
+    sex: string;
+}
+
+const tableData = ref<TableItem[]>([]);
+// 获取表格数据
+const getData = () => {
+    tableData.value = [
+        {
+            id: 1,
+            name: '小明',
+            sno: 'S001',
+            class: '一班',
+            age: '10',
+            sex: '男',
+        },
+        {
+            id: 2,
+            name: '小红',
+            sno: 'S002',
+            class: '一班',
+            age: '9',
+            sex: '女',
+        },
+    ];
+};
+getData();
+
+const importList = ref<any>([]);
+const beforeUpload: UploadProps['beforeUpload'] = async (rawFile) => {
+    importList.value = await analysisExcel(rawFile);
+    return true;
+};
+const analysisExcel = (file: any) => {
+    return new Promise(function (resolve, reject) {
+        const reader = new FileReader();
+        reader.onload = function (e: any) {
+            const data = e.target.result;
+            let datajson = XLSX.read(data, {
+                type: 'binary',
+            });
+
+            const sheetName = datajson.SheetNames[0];
+            const result = XLSX.utils.sheet_to_json(datajson.Sheets[sheetName]);
+            resolve(result);
+        };
+        reader.readAsBinaryString(file);
+    });
+};
+
+const handleMany = async () => {
+    // 把数据传给服务器后获取最新列表，这里只是示例，不做请求
+    const list = importList.value.map((item: any, index: number) => {
+        return {
+            id: index,
+            name: item['姓名'],
+            sno: item['学号'],
+            class: item['班级'],
+            age: item['年龄'],
+            sex: item['性别'],
+        };
+    });
+    tableData.value.push(...list);
+};
+</script>
+
+<style scoped>
+.handle-box {
+    display: flex;
+    margin-bottom: 20px;
+}
+
+.table {
+    width: 100%;
+    font-size: 14px;
+}
+.mr10 {
+    margin-right: 10px;
+}
+</style>

src/views/table.vue

@@ -177,7 +177,7 @@ const saveEdit = () => {
 	font-size: 14px;
 }
 .red {
-	color: #ff0000;
+	color: #F56C6C;
 }
 .mr10 {
 	margin-right: 10px;

src/views/upload.vue

@@ -5,15 +5,18 @@
             Element Plus自带上传组件。 访问地址：
             <a href="https://element-plus.org/zh-CN/component/upload.html" target="_blank">Element Plus Upload</a>
         </div>
-		<el-upload class="upload-demo" drag action="http://jsonplaceholder.typicode.com/api/posts/" multiple :on-change="handle">
+        <el-upload
+            class="upload-demo"
+            drag
+            action="http://jsonplaceholder.typicode.com/api/posts/"
+            multiple
+            :on-change="handle"
+        >
             <el-icon class="el-icon--upload"><upload-filled /></el-icon>
             <div class="el-upload__text">
                 将文件拖到此处，或
                 <em>点击上传</em>
             </div>
-			<template #tip>
-				<div class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
-			</template>
         </el-upload>
 
         <div class="content-title">支持裁剪</div>
@@ -26,9 +29,9 @@
 </template>
 
 <script setup lang="ts">
-const handle = (rawFile:any)=>{
+const handle = (rawFile: any) => {
     console.log(rawFile);
-}
+};
 </script>
 
 <style scoped>
@@ -39,38 +42,7 @@ const handle = (rawFile:any)=>{
     font-size: 22px;
     color: #1f2f3d;
 }
-
+.upload-demo {
-.pre-img {
+    width: 360px;
-	width: 100px;
-	height: 100px;
-	background: #f8f8f8;
-	border: 1px solid #eee;
-	border-radius: 5px;
-}
-.crop-demo {
-	display: flex;
-	align-items: flex-end;
-}
-.crop-demo-btn {
-	position: relative;
-	width: 100px;
-	height: 40px;
-	line-height: 40px;
-	padding: 0 20px;
-	margin-left: 30px;
-	background-color: #409eff;
-	color: #fff;
-	font-size: 14px;
-	border-radius: 4px;
-	box-sizing: border-box;
-}
-.crop-input {
-	position: absolute;
-	width: 100px;
-	height: 40px;
-	left: 0;
-	top: 0;
-	opacity: 0;
-	cursor: pointer;
 }
 </style>