From 60a293514d0afd6afbfcd5f5185ae906cb35271f Mon Sep 17 00:00:00 2001
From: lin-xin <2981207131@qq.com>
Date: Sat, 17 Dec 2022 13:37:31 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BA=86=E5=AF=BC?=
 =?UTF-8?q?=E5=85=A5=E5=AF=BC=E5=87=BAexcel=EF=BC=8C=E4=BB=A5=E5=8F=8A?=
 =?UTF-8?q?=E5=81=9A=E4=BA=86=E4=B8=80=E4=BA=9B=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts               |   1 +
 package-lock.json             |  61 +++++++
 package.json                  |   3 +-
 public/template.xlsx          | Bin 0 -> 10163 bytes
 src/App.vue                   |   8 +-
 src/assets/css/color-dark.css |   7 +-
 src/assets/css/main.css       |  64 --------
 src/components/sidebar.vue    | 289 ++++++++++++++++++----------------
 src/main.ts                   |  39 ++---
 src/router/index.ts           | 178 ++++++++++++---------
 src/views/dashboard.vue       |  11 +-
 src/views/export.vue          |  98 ++++++++++++
 src/views/form.vue            | 268 +++++++++++++++----------------
 src/views/import.vue          | 118 ++++++++++++++
 src/views/table.vue           |   2 +-
 src/views/upload.vue          | 100 +++++-------
 16 files changed, 740 insertions(+), 507 deletions(-)
 create mode 100644 public/template.xlsx
 create mode 100644 src/views/export.vue
 create mode 100644 src/views/import.vue

diff --git a/components.d.ts b/components.d.ts
index a9b470e..25a75fb 100644
--- a/components.d.ts
+++ b/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']
diff --git a/package-lock.json b/package-lock.json
index 641430d..eeec21e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -322,6 +322,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",
@@ -381,6 +386,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",
@@ -397,6 +411,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",
@@ -410,6 +429,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",
@@ -699,6 +723,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",
@@ -1024,6 +1053,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",
@@ -1232,6 +1269,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"
+			}
 		}
 	}
 }
diff --git a/package.json b/package.json
index c104840..e0fad80 100644
--- a/package.json
+++ b/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",
diff --git a/public/template.xlsx b/public/template.xlsx
new file mode 100644
index 0000000000000000000000000000000000000000..5d17cf71510bddf174eddf79cfd612017421f122
GIT binary patch
literal 10163
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
PKn93?o--8D%hUe=g`SFR

literal 0
HcmV?d00001

diff --git a/src/App.vue b/src/App.vue
index aade1f9..f0fca28 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,13 @@
 <template>
-	<router-view />
+    <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';
diff --git a/src/assets/css/color-dark.css b/src/assets/css/color-dark.css
index cfb621a..7f32276 100644
--- a/src/assets/css/color-dark.css
+++ b/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;
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 329d80b..34acd55 100644
--- a/src/assets/css/main.css
+++ b/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;
diff --git a/src/components/sidebar.vue b/src/components/sidebar.vue
index 3081907..1bfd9b5 100644
--- a/src/components/sidebar.vue
+++ b/src/components/sidebar.vue
@@ -1,53 +1,53 @@
 <template>
-	<div class="sidebar">
-		<el-menu
-			class="sidebar-el-menu"
-			:default-active="onRoutes"
-			:collapse="sidebar.collapse"
-			background-color="#324157"
-			text-color="#bfcbd9"
-			active-text-color="#20a0ff"
-			unique-opened
-			router
-		>
-			<template v-for="item in items">
-				<template v-if="item.subs">
-					<el-sub-menu :index="item.index" :key="item.index" v-permiss="item.permiss">
-						<template #title>
-							<el-icon>
-								<component :is="item.icon"></component>
-							</el-icon>
-							<span>{{ item.title }}</span>
-						</template>
-						<template v-for="subItem in item.subs">
-							<el-sub-menu
-								v-if="subItem.subs"
-								:index="subItem.index"
-								:key="subItem.index"
-								v-permiss="item.permiss"
-							>
-								<template #title>{{ subItem.title }}</template>
-								<el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
-									{{ threeItem.title }}
-								</el-menu-item>
-							</el-sub-menu>
-							<el-menu-item v-else :index="subItem.index" v-permiss="item.permiss">
-								{{ subItem.title }}
-							</el-menu-item>
-						</template>
-					</el-sub-menu>
-				</template>
-				<template v-else>
-					<el-menu-item :index="item.index" :key="item.index" v-permiss="item.permiss">
-						<el-icon>
-							<component :is="item.icon"></component>
-						</el-icon>
-						<template #title>{{ item.title }}</template>
-					</el-menu-item>
-				</template>
-			</template>
-		</el-menu>
-	</div>
+    <div class="sidebar">
+        <el-menu
+            class="sidebar-el-menu"
+            :default-active="onRoutes"
+            :collapse="sidebar.collapse"
+            background-color="#324157"
+            text-color="#bfcbd9"
+            active-text-color="#20a0ff"
+            unique-opened
+            router
+        >
+            <template v-for="item in items">
+                <template v-if="item.subs">
+                    <el-sub-menu :index="item.index" :key="item.index" v-permiss="item.permiss">
+                        <template #title>
+                            <el-icon>
+                                <component :is="item.icon"></component>
+                            </el-icon>
+                            <span>{{ item.title }}</span>
+                        </template>
+                        <template v-for="subItem in item.subs">
+                            <el-sub-menu
+                                v-if="subItem.subs"
+                                :index="subItem.index"
+                                :key="subItem.index"
+                                v-permiss="item.permiss"
+                            >
+                                <template #title>{{ subItem.title }}</template>
+                                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
+                                    {{ threeItem.title }}
+                                </el-menu-item>
+                            </el-sub-menu>
+                            <el-menu-item v-else :index="subItem.index" v-permiss="item.permiss">
+                                {{ subItem.title }}
+                            </el-menu-item>
+                        </template>
+                    </el-sub-menu>
+                </template>
+                <template v-else>
+                    <el-menu-item :index="item.index" :key="item.index" v-permiss="item.permiss">
+                        <el-icon>
+                            <component :is="item.icon"></component>
+                        </el-icon>
+                        <template #title>{{ item.title }}</template>
+                    </el-menu-item>
+                </template>
+            </template>
+        </el-menu>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -56,88 +56,105 @@ import { useSidebarStore } from '../store/sidebar';
 import { useRoute } from 'vue-router';
 
 const items = [
-	{
-		icon: 'Odometer',
-		index: '/dashboard',
-		title: '系统首页',
-		permiss: '1'
-	},
-	{
-		icon: 'Calendar',
-		index: '/table',
-		title: '基础表格',
-		permiss: '2'
-	},
-	{
-		icon: 'DocumentCopy',
-		index: '/tabs',
-		title: 'tab选项卡',
-		permiss: '3'
-	},
-	{
-		icon: 'Edit',
-		index: '3',
-		title: '表单相关',
-		permiss: '4',
-		subs: [
-			{
-				index: '/form',
-				title: '基本表单',
-				permiss: '5'
-			},
-			{
-				index: '/upload',
-				title: '文件上传',
-				permiss: '6'
-			},
-			{
-				index: '4',
-				title: '三级菜单',
-				permiss: '7',
-				subs: [
-					{
-						index: '/editor',
-						title: '富文本编辑器',
-						permiss: '8'
-					},
-					{
-						index: '/markdown',
-						title: 'markdown编辑器',
-						permiss: '9'
-					}
-				]
-			}
-		]
-	},
-	{
-		icon: 'Setting',
-		index: '/icon',
-		title: '自定义图标',
-		permiss: '10'
-	},
-	{
-		icon: 'PieChart',
-		index: '/charts',
-		title: 'schart图表',
-		permiss: '11'
-	},
-	{
-		icon: 'Warning',
-		index: '/permission',
-		title: '权限管理',
-		permiss: '13'
-	},
-	{
-		icon: 'CoffeeCup',
-		index: '/donate',
-		title: '支持作者',
-		permiss: '14'
-	}
+    {
+        icon: 'Odometer',
+        index: '/dashboard',
+        title: '系统首页',
+        permiss: '1',
+    },
+    {
+        icon: 'Calendar',
+        index: '1',
+        title: '表格相关',
+        permiss: '2',
+        subs: [
+            {
+                index: '/table',
+                title: '常用表格',
+                permiss: '2',
+            },
+            {
+                index: '/import',
+                title: '导入Excel',
+                permiss: '2',
+            },
+            {
+                index: '/export',
+                title: '导出Excel',
+                permiss: '2',
+            },
+        ],
+    },
+    {
+        icon: 'DocumentCopy',
+        index: '/tabs',
+        title: 'tab选项卡',
+        permiss: '3',
+    },
+    {
+        icon: 'Edit',
+        index: '3',
+        title: '表单相关',
+        permiss: '4',
+        subs: [
+            {
+                index: '/form',
+                title: '基本表单',
+                permiss: '5',
+            },
+            {
+                index: '/upload',
+                title: '文件上传',
+                permiss: '6',
+            },
+            {
+                index: '4',
+                title: '三级菜单',
+                permiss: '7',
+                subs: [
+                    {
+                        index: '/editor',
+                        title: '富文本编辑器',
+                        permiss: '8',
+                    },
+                    {
+                        index: '/markdown',
+                        title: 'markdown编辑器',
+                        permiss: '9',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        icon: 'Setting',
+        index: '/icon',
+        title: '自定义图标',
+        permiss: '10',
+    },
+    {
+        icon: 'PieChart',
+        index: '/charts',
+        title: 'schart图表',
+        permiss: '11',
+    },
+    {
+        icon: 'Warning',
+        index: '/permission',
+        title: '权限管理',
+        permiss: '13',
+    },
+    {
+        icon: 'CoffeeCup',
+        index: '/donate',
+        title: '支持作者',
+        permiss: '14',
+    },
 ];
 
 const route = useRoute();
 const onRoutes = computed(() => {
-	return route.path;
+    return route.path;
 });
 
 const sidebar = useSidebarStore();
@@ -145,20 +162,20 @@ const sidebar = useSidebarStore();
 
 <style scoped>
 .sidebar {
-	display: block;
-	position: absolute;
-	left: 0;
-	top: 70px;
-	bottom: 0;
-	overflow-y: scroll;
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 70px;
+    bottom: 0;
+    overflow-y: scroll;
 }
 .sidebar::-webkit-scrollbar {
-	width: 0;
+    width: 0;
 }
 .sidebar-el-menu:not(.el-menu--collapse) {
-	width: 250px;
+    width: 250px;
 }
 .sidebar > ul {
-	height: 100%;
+    height: 100%;
 }
 </style>
diff --git a/src/main.ts b/src/main.ts
index a06240b..2311764 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,34 +1,27 @@
-import {createApp} from 'vue'
-import { createPinia } from 'pinia'
-import ElementPlus from 'element-plus'
-import * as ElementPlusIconsVue from '@element-plus/icons-vue'
-import zhCn from 'element-plus/es/locale/lang/zh-cn'
-import App from './App.vue'
-import router from './router'
-import { usePermissStore } from './store/permiss'
-import 'element-plus/dist/index.css'
-import './assets/css/icon.css'
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import * as ElementPlusIconsVue from '@element-plus/icons-vue';
+import App from './App.vue';
+import router from './router';
+import { usePermissStore } from './store/permiss';
+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')
\ No newline at end of file
+app.mount('#app');
diff --git a/src/router/index.ts b/src/router/index.ts
index 3e06500..02e9668 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,133 +1,165 @@
-import {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router";
-import { usePermissStore } from '../store/permiss'
-import Home from "../views/home.vue";
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
+import { usePermissStore } from '../store/permiss';
+import Home from '../views/home.vue';
 
-const routes:RouteRecordRaw[] = [
+const routes: RouteRecordRaw[] = [
     {
         path: '/',
-        redirect: '/dashboard'
-    }, {
-        path: "/",
-        name: "Home",
+        redirect: '/dashboard',
+    },
+    {
+        path: '/',
+        name: 'Home',
         component: Home,
         children: [
             {
-                path: "/dashboard",
-                name: "dashboard",
+                path: '/dashboard',
+                name: 'dashboard',
                 meta: {
                     title: '系统首页',
-                    permiss: '1'
+                    permiss: '1',
                 },
-                component: () => import ( /* webpackChunkName: "dashboard" */ "../views/dashboard.vue")
-            }, {
-                path: "/table",
-                name: "basetable",
+                component: () => import(/* webpackChunkName: "dashboard" */ '../views/dashboard.vue'),
+            },
+            {
+                path: '/table',
+                name: 'basetable',
                 meta: {
                     title: '表格',
-                    permiss: '2'
+                    permiss: '2',
                 },
-                component: () => import ( /* webpackChunkName: "table" */ "../views/table.vue")
-            }, {
-                path: "/charts",
-                name: "basecharts",
+                component: () => import(/* webpackChunkName: "table" */ '../views/table.vue'),
+            },
+            {
+                path: '/charts',
+                name: 'basecharts',
                 meta: {
                     title: '图表',
-                    permiss: '11'
+                    permiss: '11',
                 },
-                component: () => import ( /* webpackChunkName: "charts" */ "../views/charts.vue")
-            }, {
-                path: "/form",
-                name: "baseform",
+                component: () => import(/* webpackChunkName: "charts" */ '../views/charts.vue'),
+            },
+            {
+                path: '/form',
+                name: 'baseform',
                 meta: {
                     title: '表单',
-                    permiss: '5'
+                    permiss: '5',
                 },
-                component: () => import ( /* webpackChunkName: "form" */ "../views/form.vue")
-            }, {
-                path: "/tabs",
-                name: "tabs",
+                component: () => import(/* webpackChunkName: "form" */ '../views/form.vue'),
+            },
+            {
+                path: '/tabs',
+                name: 'tabs',
                 meta: {
                     title: 'tab标签',
-                    permiss: '3'
+                    permiss: '3',
                 },
-                component: () => import ( /* webpackChunkName: "tabs" */ "../views/tabs.vue")
-            }, {
-                path: "/donate",
-                name: "donate",
+                component: () => import(/* webpackChunkName: "tabs" */ '../views/tabs.vue'),
+            },
+            {
+                path: '/donate',
+                name: 'donate',
                 meta: {
                     title: '鼓励作者',
-                    permiss: '14'
+                    permiss: '14',
                 },
-                component: () => import ( /* webpackChunkName: "donate" */ "../views/donate.vue")
-            }, {
-                path: "/permission",
-                name: "permission",
+                component: () => import(/* webpackChunkName: "donate" */ '../views/donate.vue'),
+            },
+            {
+                path: '/permission',
+                name: 'permission',
                 meta: {
                     title: '权限管理',
-                    permiss: '13'
+                    permiss: '13',
                 },
-                component: () => import ( /* webpackChunkName: "permission" */ "../views/permission.vue")
-            }, {
-                path: "/upload",
-                name: "upload",
+                component: () => import(/* webpackChunkName: "permission" */ '../views/permission.vue'),
+            },
+            {
+                path: '/upload',
+                name: 'upload',
                 meta: {
                     title: '上传插件',
-                    permiss: '6'
+                    permiss: '6',
                 },
-                component: () => import ( /* webpackChunkName: "upload" */ "../views/upload.vue")
-            }, {
-                path: "/icon",
-                name: "icon",
+                component: () => import(/* webpackChunkName: "upload" */ '../views/upload.vue'),
+            },
+            {
+                path: '/icon',
+                name: 'icon',
                 meta: {
                     title: '自定义图标',
-                    permiss: '10'
+                    permiss: '10',
                 },
-                component: () => import ( /* webpackChunkName: "icon" */ "../views/icon.vue")
-            },  {
+                component: () => import(/* webpackChunkName: "icon" */ '../views/icon.vue'),
+            },
+            {
                 path: '/user',
                 name: 'user',
                 meta: {
-                    title: '个人中心'
+                    title: '个人中心',
                 },
-                component: () => import (/* webpackChunkName: "user" */ '../views/user.vue')
-            }, {
+                component: () => import(/* webpackChunkName: "user" */ '../views/user.vue'),
+            },
+            {
                 path: '/editor',
                 name: 'editor',
                 meta: {
                     title: '富文本编辑器',
-                    permiss: '8'
+                    permiss: '8',
                 },
-                component: () => import (/* webpackChunkName: "editor" */ '../views/editor.vue')
-            }, {
+                component: () => import(/* webpackChunkName: "editor" */ '../views/editor.vue'),
+            },
+            {
                 path: '/markdown',
                 name: 'markdown',
                 meta: {
                     title: 'markdown编辑器',
-                    permiss: '9'
+                    permiss: '9',
                 },
-                component: () => import (/* webpackChunkName: "markdown" */ '../views/markdown.vue')
-            }
-        ]
-    }, {
-        path: "/login",
-        name: "Login",
+                component: () => import(/* webpackChunkName: "markdown" */ '../views/markdown.vue'),
+            },
+            {
+                path: '/export',
+                name: 'export',
+                meta: {
+                    title: '导出Excel',
+                    permiss: '2',
+                },
+                component: () => import(/* webpackChunkName: "export" */ '../views/export.vue'),
+            },
+            {
+                path: '/import',
+                name: 'import',
+                meta: {
+                    title: '导入Excel',
+                    permiss: '2',
+                },
+                component: () => import(/* webpackChunkName: "import" */ '../views/import.vue'),
+            },
+        ],
+    },
+    {
+        path: '/login',
+        name: 'Login',
         meta: {
-            title: '登录'
+            title: '登录',
         },
-        component: () => import ( /* webpackChunkName: "login" */ "../views/login.vue")
-    }, {
+        component: () => import(/* webpackChunkName: "login" */ '../views/login.vue'),
+    },
+    {
         path: '/403',
         name: '403',
         meta: {
-            title: '没有权限'
+            title: '没有权限',
         },
-        component: () => import (/* webpackChunkName: "403" */ '../views/403.vue')
+        component: () => import(/* webpackChunkName: "403" */ '../views/403.vue'),
     },
 ];
 
 const router = createRouter({
     history: createWebHashHistory(),
-    routes
+    routes,
 });
 
 router.beforeEach((to, from, next) => {
@@ -144,4 +176,4 @@ router.beforeEach((to, from, next) => {
     }
 });
 
-export default router;
\ No newline at end of file
+export default router;
diff --git a/src/views/dashboard.vue b/src/views/dashboard.vue
index 6ba78fa..5e6d039 100644
--- a/src/views/dashboard.vue
+++ b/src/views/dashboard.vue
@@ -26,10 +26,13 @@
 						</div>
 					</template>
 					Vue
-					<el-progress :percentage="71.3" color="#42b983"></el-progress>JavaScript
-					<el-progress :percentage="24.1" color="#f1e05a"></el-progress>CSS
-					<el-progress :percentage="13.7"></el-progress>HTML
-					<el-progress :percentage="5.9" color="#f56c6c"></el-progress>
+					<el-progress :percentage="79.4" color="#42b983"></el-progress>
+					TypeScript
+					<el-progress :percentage="14" color="#f1e05a"></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">
diff --git a/src/views/export.vue b/src/views/export.vue
new file mode 100644
index 0000000..21ecf6b
--- /dev/null
+++ b/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>
diff --git a/src/views/form.vue b/src/views/form.vue
index 2744e68..75609ae 100644
--- a/src/views/form.vue
+++ b/src/views/form.vue
@@ -1,66 +1,66 @@
 <template>
-	<div class="container">
-		<div class="form-box">
-			<el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
-				<el-form-item label="表单名称" prop="name">
-					<el-input v-model="form.name"></el-input>
-				</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="xtc" label="小天才" value="xtc"></el-option>
-						<el-option key="imoo" label="imoo" value="imoo"></el-option>
-					</el-select>
-				</el-form-item>
-				<el-form-item label="日期时间">
-					<el-col :span="11">
-						<el-form-item prop="date1">
-							<el-date-picker
-								type="date"
-								placeholder="选择日期"
-								v-model="form.date1"
-								style="width: 100%"
-							></el-date-picker>
-						</el-form-item>
-					</el-col>
-					<el-col class="line" :span="2">-</el-col>
-					<el-col :span="11">
-						<el-form-item prop="date2">
-							<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%">
-							</el-time-picker>
-						</el-form-item>
-					</el-col>
-				</el-form-item>
-				<el-form-item label="城市级联" prop="options">
-					<el-cascader :options="options" v-model="form.options"></el-cascader>
-				</el-form-item>
-				<el-form-item label="选择开关" prop="delivery">
-					<el-switch v-model="form.delivery"></el-switch>
-				</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="imoo" 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="imoo"></el-radio>
-					</el-radio-group>
-				</el-form-item>
-				<el-form-item label="文本框" prop="desc">
-					<el-input type="textarea" rows="5" v-model="form.desc"></el-input>
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" @click="onSubmit(formRef)">表单提交</el-button>
-					<el-button @click="onReset(formRef)">重置表单</el-button>
-				</el-form-item>
-			</el-form>
-		</div>
-	</div>
+    <div class="container">
+        <div class="form-box">
+            <el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
+                <el-form-item label="表单名称" prop="name">
+                    <el-input v-model="form.name"></el-input>
+                </el-form-item>
+                <el-form-item label="选择器" prop="region">
+                    <el-select v-model="form.region" placeholder="请选择">
+                        <el-option key="小明" label="小明" value="小明"></el-option>
+                        <el-option key="小红" label="小红" value="小红"></el-option>
+                        <el-option key="小白" label="小白" value="小白"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="日期时间">
+                    <el-col :span="11">
+                        <el-form-item prop="date1">
+                            <el-date-picker
+                                type="date"
+                                placeholder="选择日期"
+                                v-model="form.date1"
+                                style="width: 100%"
+                            ></el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                    <el-col class="line" :span="2">-</el-col>
+                    <el-col :span="11">
+                        <el-form-item prop="date2">
+                            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%">
+                            </el-time-picker>
+                        </el-form-item>
+                    </el-col>
+                </el-form-item>
+                <el-form-item label="城市级联" prop="options">
+                    <el-cascader :options="options" v-model="form.options"></el-cascader>
+                </el-form-item>
+                <el-form-item label="选择开关" prop="delivery">
+                    <el-switch v-model="form.delivery"></el-switch>
+                </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-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-group>
+                </el-form-item>
+                <el-form-item label="文本框" prop="desc">
+                    <el-input type="textarea" rows="5" v-model="form.desc"></el-input>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="onSubmit(formRef)">表单提交</el-button>
+                    <el-button @click="onReset(formRef)">重置表单</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts" name="baseform">
@@ -69,88 +69,88 @@ import { ElMessage } from 'element-plus';
 import type { FormInstance, FormRules } from 'element-plus';
 
 const options = [
-	{
-		value: 'guangdong',
-		label: '广东省',
-		children: [
-			{
-				value: 'guangzhou',
-				label: '广州市',
-				children: [
-					{
-						value: 'tianhe',
-						label: '天河区'
-					},
-					{
-						value: 'haizhu',
-						label: '海珠区'
-					}
-				]
-			},
-			{
-				value: 'dongguan',
-				label: '东莞市',
-				children: [
-					{
-						value: 'changan',
-						label: '长安镇'
-					},
-					{
-						value: 'humen',
-						label: '虎门镇'
-					}
-				]
-			}
-		]
-	},
-	{
-		value: 'hunan',
-		label: '湖南省',
-		children: [
-			{
-				value: 'changsha',
-				label: '长沙市',
-				children: [
-					{
-						value: 'yuelu',
-						label: '岳麓区'
-					}
-				]
-			}
-		]
-	}
+    {
+        value: 'guangdong',
+        label: '广东省',
+        children: [
+            {
+                value: 'guangzhou',
+                label: '广州市',
+                children: [
+                    {
+                        value: 'tianhe',
+                        label: '天河区',
+                    },
+                    {
+                        value: 'haizhu',
+                        label: '海珠区',
+                    },
+                ],
+            },
+            {
+                value: 'dongguan',
+                label: '东莞市',
+                children: [
+                    {
+                        value: 'changan',
+                        label: '长安镇',
+                    },
+                    {
+                        value: 'humen',
+                        label: '虎门镇',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        value: 'hunan',
+        label: '湖南省',
+        children: [
+            {
+                value: 'changsha',
+                label: '长沙市',
+                children: [
+                    {
+                        value: 'yuelu',
+                        label: '岳麓区',
+                    },
+                ],
+            },
+        ],
+    },
 ];
 const rules: FormRules = {
-	name: [{ required: true, message: '请输入表单名称', trigger: 'blur' }]
+    name: [{ required: true, message: '请输入表单名称', trigger: 'blur' }],
 };
 const formRef = ref<FormInstance>();
 const form = reactive({
-	name: '',
-	region: '',
-	date1: '',
-	date2: '',
-	delivery: true,
-	type: ['步步高'],
-	resource: '小天才',
-	desc: '',
-	options: []
+    name: '',
+    region: '',
+    date1: '',
+    date2: '',
+    delivery: true,
+    type: ['小明'],
+    resource: '小红',
+    desc: '',
+    options: [],
 });
 // 提交
 const onSubmit = (formEl: FormInstance | undefined) => {
-	// 表单校验
-	if (!formEl) return;
-	formEl.validate(valid => {
-		if (valid) {
-			console.log(form);
-			ElMessage.success('提交成功！');
-		} else {
-			return false;
-		}
-	});
+    // 表单校验
+    if (!formEl) return;
+    formEl.validate((valid) => {
+        if (valid) {
+            console.log(form);
+            ElMessage.success('提交成功！');
+        } else {
+            return false;
+        }
+    });
 };
 // 重置
 const onReset = (formEl: FormInstance | undefined) => {
-	if (!formEl) return;
-	formEl.resetFields();
+    if (!formEl) return;
+    formEl.resetFields();
 };
 </script>
diff --git a/src/views/import.vue b/src/views/import.vue
new file mode 100644
index 0000000..e0ca8c3
--- /dev/null
+++ b/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>
diff --git a/src/views/table.vue b/src/views/table.vue
index cd9453f..6888ccb 100644
--- a/src/views/table.vue
+++ b/src/views/table.vue
@@ -177,7 +177,7 @@ const saveEdit = () => {
 	font-size: 14px;
 }
 .red {
-	color: #ff0000;
+	color: #F56C6C;
 }
 .mr10 {
 	margin-right: 10px;
diff --git a/src/views/upload.vue b/src/views/upload.vue
index f935ec6..960edc3 100644
--- a/src/views/upload.vue
+++ b/src/views/upload.vue
@@ -1,76 +1,48 @@
 <template>
-	<div class="container">
-		<div class="content-title">支持拖拽</div>
-		<div class="plugins-tips">
-			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-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="container">
+        <div class="content-title">支持拖拽</div>
+        <div class="plugins-tips">
+            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-icon class="el-icon--upload"><upload-filled /></el-icon>
+            <div class="el-upload__text">
+                将文件拖到此处，或
+                <em>点击上传</em>
+            </div>
+        </el-upload>
 
-		<div class="content-title">支持裁剪</div>
-		<div class="plugins-tips">
-			vue-cropperjs：一个封装了 cropperjs 的 Vue 组件。 访问地址：
-			<a href="https://github.com/Agontuk/vue-cropperjs" target="_blank">vue-cropperjs</a>。 示例请查看
-			<router-link to="/user">个人中心</router-link>
-		</div>
-	</div>
+        <div class="content-title">支持裁剪</div>
+        <div class="plugins-tips">
+            vue-cropperjs：一个封装了 cropperjs 的 Vue 组件。 访问地址：
+            <a href="https://github.com/Agontuk/vue-cropperjs" target="_blank">vue-cropperjs</a>。 示例请查看
+            <router-link to="/user">个人中心</router-link>
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts">
-const handle = (rawFile:any)=>{
-	console.log(rawFile);
-}
+const handle = (rawFile: any) => {
+    console.log(rawFile);
+};
 </script>
 
 <style scoped>
 .content-title {
-	font-weight: 400;
-	line-height: 50px;
-	margin: 10px 0;
-	font-size: 22px;
-	color: #1f2f3d;
+    font-weight: 400;
+    line-height: 50px;
+    margin: 10px 0;
+    font-size: 22px;
+    color: #1f2f3d;
 }
-
-.pre-img {
-	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;
+.upload-demo {
+    width: 360px;
 }
 </style>

From f70c93715b5bf1c0804d9eecaedac008d9aec86d Mon Sep 17 00:00:00 2001
From: lin-xin <2981207131@qq.com>
Date: Sat, 17 Dec 2022 13:51:29 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/main.ts b/src/main.ts
index 2311764..43ae5c7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,6 +4,7 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue';
 import App from './App.vue';
 import router from './router';
 import { usePermissStore } from './store/permiss';
+import 'element-plus/dist/index.css';
 import './assets/css/icon.css';
 
 const app = createApp(App);