diff --git a/src/assets/image/error/401.gif b/src/assets/image/error/401.gif
new file mode 100644
index 0000000..cd6e0d9
Binary files /dev/null and b/src/assets/image/error/401.gif differ
diff --git a/src/assets/image/error/404.jpeg b/src/assets/image/error/404.jpeg
new file mode 100644
index 0000000..58e8269
Binary files /dev/null and b/src/assets/image/error/404.jpeg differ
diff --git a/src/assets/image/error/404s.png b/src/assets/image/error/404s.png
new file mode 100644
index 0000000..3d8e230
Binary files /dev/null and b/src/assets/image/error/404s.png differ
diff --git a/src/components/u-upload/index.vue b/src/components/u-upload/index.vue
new file mode 100644
index 0000000..4a49826
--- /dev/null
+++ b/src/components/u-upload/index.vue
@@ -0,0 +1,73 @@
+<template>
+    <el-upload
+            action=""
+            :before-upload="beforeUploadAction"
+            list-type="picture-card"
+            :on-preview="handlePictureCardPreview"
+            :on-remove="handleRemove"
+            :file-list="fileList"
+    >
+        <el-icon><Plus /></el-icon>
+    </el-upload>
+
+    <el-dialog v-model="dialogVisible" width="50%" top="80px">
+        <img w-full :src="dialogImageUrl" alt="预览图片" style="width: 100%"/>
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+    import {onMounted, ref, watch} from 'vue'
+    import { Plus } from '@element-plus/icons-vue'
+
+    import type { UploadProps, UploadUserFile } from 'element-plus'
+    import {ElMessage} from "element-plus";
+    let emit = defineEmits(['update'])
+    let props = defineProps({
+        modelValue:Array
+    })
+    let fileList = ref([
+
+    ])
+
+    const dialogImageUrl = ref('')
+    const dialogVisible = ref(false)
+
+    const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
+        console.log(uploadFile, uploadFiles)
+    }
+
+    const beforeUploadAction = (file, fileLi)=>{
+        return new Promise((resolve, reject) => {
+            var reader = new FileReader()
+            let reg = (/\.jpg$|\.jpeg$|\.gif$|\.png$/i)
+            reader.readAsDataURL(file)
+            let name = file.name
+            if(reg.test(name)){
+                reader.onload = (e:FileReader)=>{
+                    fileList.value.push({
+                        name:name,
+                        url:e.target.result
+                    })
+                    emit('update',fileList.value)
+                    resolve(e.target.result)
+                }
+            }else{
+                ElMessage.error('请上传图片')
+                reject()
+            }
+        })
+    }
+
+    const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
+        dialogImageUrl.value = uploadFile.url!
+        dialogVisible.value = true
+    }
+
+    onMounted(()=>{
+        watch(()=>props.modelValue,(value)=>{
+            fileList.value = value
+        },{
+            immediate:true
+        })
+    })
+</script>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 9e09566..ff7e4ee 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, nextTick, onMounted, reactive, ref, watch} from "vue";
+  import {computed, nextTick, onMounted, reactive, ref, watch} from "vue";
   import ScrollPane from "./ScrollPane.vue";
   import { useStore } from 'vuex'
   import {useRoute,useRouter} from 'vue-router'
@@ -145,8 +145,16 @@ import {computed, nextTick, onMounted, reactive, ref, watch} from "vue";
       addTags()
       moveToCurrentTag()
     })
+
+    router.beforeEach(async (to, from, next)=>{
+      if(from.fullPath==='/error/404'&&to.fullPath==="/home") {
+        await store.dispatch('tagsView/removeView', [from.fullPath])
+      }
+      next()
+    })
   })
 
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 0b3fe6c..6f5adee 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -102,6 +102,7 @@
     padding: 20px;
     /*background: #f6f8f9;*/
     padding-top: 110px;
+    position: relative;
   }
   .app-main-hide-tag{
     padding-top: 80px;
diff --git a/src/router/index.ts b/src/router/index.ts
index 6de9c07..351088b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -9,6 +9,7 @@ import othersRouter from './modules/other'
 import externalLink from './modules/externalLink'
 import permissionRouter from './modules/permission'
 import tableRouter from './modules/table'
+import errorRouter from './modules/error'
 
 
 interface extendRoute {
@@ -23,6 +24,7 @@ export const constantRoutes: Array<RouteRecordRaw&extendRoute> = [
     hidden: true,
     meta: { title: '登录',}
   },
+
   {
     path: '/',
     name: 'layout',
@@ -44,14 +46,17 @@ export const constantRoutes: Array<RouteRecordRaw&extendRoute> = [
 export const asyncRoutes = [
   tableRouter,
   chartsRouter,
-
   chatRouter,
   componentsRouter,
   othersRouter,
-
   externalLink,
+  errorRouter,
   permissionRouter,
 
+  {
+    path: '/:pathMatch(.*)',
+    redirect: '/error/404'
+  }
 ]
 
 
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
index fce1e45..cf25b30 100644
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -43,6 +43,12 @@ const componentsRouter = {
             name: 'button',
             meta: { title: '按钮', noCache: true  }
         },
+        {
+            path: 'upload',
+            component: () => import('@/views/components-demo/upload.vue'),
+            name: 'upload',
+            meta: { title: '上传图片', noCache: true  }
+        },
     ]
 }
 
diff --git a/src/router/modules/error.ts b/src/router/modules/error.ts
new file mode 100644
index 0000000..9d57c59
--- /dev/null
+++ b/src/router/modules/error.ts
@@ -0,0 +1,32 @@
+
+
+/** When your routing table is too long, you can split it into small modules**/
+
+import Layout from "@/layout/index.vue";
+
+const errorRouter = {
+    path: '/error',
+    component: Layout,
+    redirect: 'noRedirect',
+    name: 'error',
+    meta: {
+        title: '错误页面',
+        icon: 'School'
+    },
+    children: [
+        {
+            path: '404',
+            component: () => import('@/views/error/404.vue'),
+            name: '404',
+            meta: { title: '404', noCache: true }
+        },
+        {
+            path: '401',
+            component: () => import('@/views/error/401.vue'),
+            name: '401',
+            meta: { title: '401', noCache: true }
+        },
+    ]
+}
+
+export default errorRouter
diff --git a/src/store/modules/tagsView.ts b/src/store/modules/tagsView.ts
index 41310bd..9ae4021 100644
--- a/src/store/modules/tagsView.ts
+++ b/src/store/modules/tagsView.ts
@@ -14,6 +14,9 @@ const mutations = {
             })
         )
     },
+    REMOVE_VISITED_VIEW: (state, routes) => {
+        state.visitedViews = state.visitedViews.filter(item=>!routes.includes(item.path))
+    },
     CLEAR_VISITED_VIEW:(state, view) => {
         state.visitedViews = []
         state.cachedViews = []
@@ -44,6 +47,13 @@ const actions = {
         dispatch('addVisitedView', view)
         // dispatch('addCachedView', view)
     },
+    removeView({ commit }, views){
+        return new Promise((resolve, reject) => {
+            commit('REMOVE_VISITED_VIEW', views)
+            resolve(null)
+        })
+
+    },
     addVisitedView({ commit }, view) {
         commit('ADD_VISITED_VIEW', view)
     },
diff --git a/src/views/components-demo/upload.vue b/src/views/components-demo/upload.vue
new file mode 100644
index 0000000..833f057
--- /dev/null
+++ b/src/views/components-demo/upload.vue
@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <u-upload @update="update" v-model="imgs"/>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import UUpload from '@/components/u-upload/index.vue'
+    import TwoPng from '@/assets/3.png'
+    import {reactive, ref} from 'vue'
+    const imgs  = ref([{
+        url:TwoPng,
+        name:'female.png',
+        uid:'1651408956803',
+        status:'success'
+    }])
+
+    const update = (val)=>{
+        console.log('valll======',val)
+    }
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/views/error/401.vue b/src/views/error/401.vue
new file mode 100644
index 0000000..c230e64
--- /dev/null
+++ b/src/views/error/401.vue
@@ -0,0 +1,70 @@
+
+<template>
+    <div class="m-error-page">
+        <div class="error-page">
+            <div class="img">
+                <img :src="fourPng" style="width: 100%">
+            </div>
+            <div>
+                <div class="oops">抱歉!</div>
+                <div class="text" style="margin-bottom: 20px">你没有权限去该页面...</div>
+                <el-button type="primary" @click="goBackHome">返回首页</el-button></div>
+
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import fourPng from '@/assets/image/error/401.gif'
+    import {useRouter} from 'vue-router'
+    const router = useRouter()
+
+    const goBackHome = ()=>{
+        router.push({
+            path:'/'
+        })
+    }
+</script>
+
+<style lang="scss" scoped>
+    .m-error-page{
+        width:100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        min-height: calc(100vh - 205px);
+        justify-content: center;
+    }
+    .error-page{
+        /*position: absolute;*/
+        /*top: 0;*/
+        padding-top: 20px;
+        /*left: 0;*/
+        /*right: 0;*/
+        /*background: white;*/
+        /*bottom: 0;*/
+        display: flex;
+        align-items: center;
+        .img{
+            width: 500px;
+        }
+        .oops{
+            font-size: 32px;
+            line-height: 40px;
+            color: #1482f0;
+            margin-bottom: 20px;
+            -webkit-animation-fill-mode: forwards;
+            animation-fill-mode: forwards;
+        }
+        .text{
+            font-size: 20px;
+            line-height: 24px;
+            color: #222;
+            margin-bottom: 10px;
+            -webkit-animation-delay: .1s;
+            animation-delay: .1s;
+            -webkit-animation-fill-mode: forwards;
+            animation-fill-mode: forwards;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/error/403.vue b/src/views/error/403.vue
deleted file mode 100644
index 8b13789..0000000
--- a/src/views/error/403.vue
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/views/error/404.vue b/src/views/error/404.vue
index 8b13789..9e4de6e 100644
--- a/src/views/error/404.vue
+++ b/src/views/error/404.vue
@@ -1 +1,71 @@
 
+<template>
+    <div class="m-error-page">
+        <div class="error-page">
+            <div class="img">
+                <img :src="fourPng" style="width: 100%">
+            </div>
+            <div>
+                <div class="oops">抱歉!</div>
+                <div class="text">当前页面不存在...</div>
+                <div style="margin-bottom: 20px;font-size: 13px;color: grey;">请检查您输入的URL是否正确，或单击下面的按钮返回主页。</div>
+                <el-button type="primary" @click="goBackHome">返回首页</el-button></div>
+
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import fourPng from '@/assets/image/error/404s.png'
+    import {useRouter} from 'vue-router'
+    const router = useRouter()
+
+    const goBackHome = ()=>{
+        router.push({
+            path:'/'
+        })
+    }
+</script>
+
+<style lang="scss" scoped>
+    .m-error-page{
+        width:100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        min-height: calc(100vh - 205px);
+        justify-content: center;
+    }
+    .error-page{
+        /*position: absolute;*/
+        /*top: 0;*/
+        padding-top: 20px;
+        /*left: 0;*/
+        /*right: 0;*/
+        /*background: white;*/
+        /*bottom: 0;*/
+        display: flex;
+        align-items: center;
+        .img{
+            width: 500px;
+        }
+        .oops{
+            font-size: 32px;
+            line-height: 40px;
+            color: #1482f0;
+            margin-bottom: 20px;
+            -webkit-animation-fill-mode: forwards;
+            animation-fill-mode: forwards;
+        }
+        .text{
+            font-size: 20px;
+            line-height: 24px;
+            color: #222;
+            margin-bottom: 10px;
+            -webkit-animation-delay: .1s;
+            animation-delay: .1s;
+            -webkit-animation-fill-mode: forwards;
+            animation-fill-mode: forwards;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/other/cropper/index.vue b/src/views/other/cropper/index.vue
index 86b1b76..ca800d9 100644
--- a/src/views/other/cropper/index.vue
+++ b/src/views/other/cropper/index.vue
@@ -189,7 +189,7 @@
 }
 .m-cropper{
   width: 100%;
-  height: 500px;
+  /*height: 500px;*/
   display: flex;
   .left{
     width: 400px;