升级Vue3，iView替换ElementPlus

- 删除babel配置、更新依赖与入口初始化
- 全量替换UI组件、样式适配，新增迁移文档与标签/过滤器自动化替换脚本

seller/src/views/error-page/403.vue

@@ -1,19 +1,18 @@
-
 <template>
   <div class="error403">
     <div class="error403-body-con">
-      <Card>
-        <div class="error403-body-con-title">4<span class="error403-0-span">
-            <Icon type="android-lock"></Icon>
-          </span><span class="error403-key-span">
-            <Icon size="220" type="ios-bolt"></Icon>
-          </span></div>
+      <el-card>
+        <div class="error403-body-con-title">
+          4<span class="error403-0-span">🔒</span><span class="error403-key-span">⚡</span>
+        </div>
         <p class="error403-body-con-message">You don't have permission</p>
         <div class="error403-btn-con">
-          <Button @click="goHome" size="large" style="width: 200px;" type="text">返回首页</Button>
-          <Button @click="backPage" size="large" style="width: 200px;margin-left: 40px;" type="primary">返回上一页</Button>
+          <el-button size="large" style="width: 200px" @click="goHome">返回首页</el-button>
+          <el-button size="large" type="primary" style="width: 200px; margin-left: 40px" @click="backPage">
+            返回上一页
+          </el-button>
         </div>
-      </Card>
+      </el-card>
     </div>
   </div>
 </template>
@@ -33,6 +32,7 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 @keyframes error403animation {
   0% {
@@ -82,14 +82,8 @@ export default {
         border: 20px solid #ed3f14;
         color: #ed3f14;
         margin-right: 10px;
-        i {
-          display: inline-block;
-          font-size: 120px;
-          position: absolute;
-          left: 50%;
-          top: 50%;
-          transform: translate(-50%, -50%);
-        }
+        font-size: 80px;
+        line-height: 130px;
       }
       .error403-key-span {
         display: inline-block;
@@ -98,15 +92,8 @@ export default {
         height: 190px;
         border-radius: 50%;
         margin-right: 10px;
-        i {
-          display: inline-block;
-          font-size: 190px;
-          position: absolute;
-          left: 20px;
-          transform: translate(-50%, -60%);
-          transform-origin: center bottom;
-          animation: error403animation 2.8s ease 0s infinite;
-        }
+        font-size: 80px;
+        animation: error403animation 2.8s ease 0s infinite;
       }
     }
     &-message {
@@ -125,4 +112,3 @@ export default {
   }
 }
 </style>
-

seller/src/views/error-page/404.vue

@@ -1,91 +1,95 @@
-
 <template>
-    <div class="error404">
-        <div class="error404-body-con">
-            <Card>
-                <div class="error404-body-con-title">4<span><Icon type="ios-navigate-outline"></Icon></span>4</div>
-                <p class="error404-body-con-message">YOU&nbsp;&nbsp;LOOK&nbsp;&nbsp;LOST</p>
-                <div class="error404-btn-con">
-                    <Button @click="goHome" size="large" style="width: 200px;" type="text">返回首页</Button>
-                    <Button @click="backPage" size="large" style="width: 200px;margin-left: 40px;" type="primary">返回上一页</Button>
-                </div>
-            </Card>
+  <div class="error404">
+    <div class="error404-body-con">
+      <el-card>
+        <div class="error404-body-con-title">
+          4<span>🧭</span>4
         </div>
+        <p class="error404-body-con-message">YOU&nbsp;&nbsp;LOOK&nbsp;&nbsp;LOST</p>
+        <div class="error404-btn-con">
+          <el-button size="large" style="width: 200px" @click="goHome">返回首页</el-button>
+          <el-button size="large" type="primary" style="width: 200px; margin-left: 40px" @click="backPage">
+            返回上一页
+          </el-button>
+        </div>
+      </el-card>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'Error404',
-    methods: {
-        backPage () {
-            this.$router.go(-1);
-        },
-        goHome () {
-            this.$router.push({
-                name: 'home_index'
-            });
-        }
-    }
+  name: "Error404",
+  methods: {
+    backPage() {
+      this.$router.go(-1);
+    },
+    goHome() {
+      this.$router.push({
+        name: "home_index",
+      });
+    },
+  },
 };
 </script>
+
 <style lang="scss" scoped>
-   @keyframes error404animation {
-    0% {
-        transform: rotateZ(0deg);
-    }
-    20% {
-        transform: rotateZ(-60deg);
-    }
-    40% {
-        transform: rotateZ(-10deg);
-    }
-    60% {
-        transform: rotateZ(50deg);
-    }
-    80% {
-        transform: rotateZ(-20deg);
-    }
-    100% {
-        transform: rotateZ(0deg);
-    }
+@keyframes error404animation {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  20% {
+    transform: rotateZ(-60deg);
+  }
+  40% {
+    transform: rotateZ(-10deg);
+  }
+  60% {
+    transform: rotateZ(50deg);
+  }
+  80% {
+    transform: rotateZ(-20deg);
+  }
+  100% {
+    transform: rotateZ(0deg);
+  }
 }
-.error404{
-    &-body-con{
-        width: 700px;
-        height: 500px;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%,-50%);
-        &-title{
-            text-align: center;
-            font-size: 240px;
-            font-weight: 700;
-            color: #2d8cf0;
-            height: 260px;
-            line-height: 260px;
-            margin-top: 40px;
-            span{
-                display: inline-block;
-                color: #19be6b;
-                font-size: 230px;
-                animation: error404animation 3s ease 0s infinite alternate;
-            }
-        }
-        &-message{
-            display: block;
-            text-align: center;
-            font-size: 30px;
-            font-weight: 500;
-            letter-spacing: 12px;
-            color: #dddde2;
-        }
+.error404 {
+  &-body-con {
+    width: 700px;
+    height: 500px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    &-title {
+      text-align: center;
+      font-size: 240px;
+      font-weight: 700;
+      color: #2d8cf0;
+      height: 260px;
+      line-height: 260px;
+      margin-top: 40px;
+      span {
+        display: inline-block;
+        color: #19be6b;
+        font-size: 120px;
+        animation: error404animation 3s ease 0s infinite alternate;
+      }
     }
-    &-btn-con{
-        text-align: center;
-        padding: 20px 0;
-        margin-bottom: 40px;
+    &-message {
+      display: block;
+      text-align: center;
+      font-size: 30px;
+      font-weight: 500;
+      letter-spacing: 12px;
+      color: #dddde2;
     }
+  }
+  &-btn-con {
+    text-align: center;
+    padding: 20px 0;
+    margin-bottom: 40px;
+  }
 }
 </style>

seller/src/views/error-page/500.vue

@@ -1,107 +1,102 @@
-
-
 <template>
-    <div class="error500">
-        <div class="error500-body-con">
-            <Card>
-                <div class="error500-body-con-title">
-                    5<span class="error500-0-span"><Icon type="social-freebsd-devil"></Icon></span><span class="error500-0-span"><Icon type="social-freebsd-devil"></Icon></span>
-                </div>
-                <p class="error500-body-con-message">Oops! the server is wrong</p>
-                <div class="error500-btn-con">
-                    <Button @click="goHome" size="large" style="width: 200px;" type="text">返回首页</Button>
-                    <Button @click="backPage" size="large" style="width: 200px;margin-left: 40px;" type="primary">返回上一页</Button>
-                </div>
-            </Card>
+  <div class="error500">
+    <div class="error500-body-con">
+      <el-card>
+        <div class="error500-body-con-title">
+          5<span class="error500-0-span">😈</span><span class="error500-0-span">😈</span>
         </div>
+        <p class="error500-body-con-message">Oops! the server is wrong</p>
+        <div class="error500-btn-con">
+          <el-button size="large" style="width: 200px" @click="goHome">返回首页</el-button>
+          <el-button size="large" type="primary" style="width: 200px; margin-left: 40px" @click="backPage">
+            返回上一页
+          </el-button>
+        </div>
+      </el-card>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'Error500',
-    methods: {
-        backPage () {
-            this.$router.go(-1);
-        },
-        goHome () {
-            this.$router.push({
-                name: 'home_index'
-            });
-        }
-    }
+  name: "Error500",
+  methods: {
+    backPage() {
+      this.$router.go(-1);
+    },
+    goHome() {
+      this.$router.push({
+        name: "home_index",
+      });
+    },
+  },
 };
 </script>
+
 <style lang="scss" scoped>
-   @keyframes error500animation {
-    0% {
-        transform: rotateZ(0deg);
-    }
-    20% {
-        transform: rotateZ(-10deg);
-    }
-    40% {
-        transform: rotateZ(5deg);
-    }
-    60% {
-        transform: rotateZ(-5deg);
-    }
-    80% {
-        transform: rotateZ(10deg);
-    }
-    100% {
-        transform: rotateZ(0deg);
-    }
+@keyframes error500animation {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  20% {
+    transform: rotateZ(-10deg);
+  }
+  40% {
+    transform: rotateZ(5deg);
+  }
+  60% {
+    transform: rotateZ(-5deg);
+  }
+  80% {
+    transform: rotateZ(10deg);
+  }
+  100% {
+    transform: rotateZ(0deg);
+  }
 }
-.error500{
-    &-body-con{
-        width: 700px;
-        height: 500px;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%,-50%);
-        &-title{
-            text-align: center;
-            font-size: 240px;
-            font-weight: 700;
-            color: #2d8cf0;
-            height: 260px;
-            line-height: 260px;
-            margin-top: 40px;
-            .error500-0-span{
-                display: inline-block;
-                position: relative;
-                width: 170px;
-                height: 170px;
-                border-radius: 50%;
-                border: 20px solid #ed3f14;
-                color: #ed3f14;
-                margin-right: 10px;
-                i{
-                    display: inline-block;
-                    font-size: 120px;
-                    position: absolute;
-                    bottom: -10px;
-                    left: 10px;
-                    transform-origin: center bottom;
-                    animation: error500animation 3s ease 0s infinite alternate;
-                }
-            }
-        }
-        &-message{
-            display: block;
-            text-align: center;
-            font-size: 30px;
-            font-weight: 500;
-            letter-spacing: 4px;
-            color: #dddde2;
-        }
+.error500 {
+  &-body-con {
+    width: 700px;
+    height: 500px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    &-title {
+      text-align: center;
+      font-size: 240px;
+      font-weight: 700;
+      color: #2d8cf0;
+      height: 260px;
+      line-height: 260px;
+      margin-top: 40px;
+      .error500-0-span {
+        display: inline-block;
+        position: relative;
+        width: 120px;
+        height: 120px;
+        border-radius: 50%;
+        border: 20px solid #ed3f14;
+        color: #ed3f14;
+        margin-right: 10px;
+        font-size: 60px;
+        line-height: 80px;
+        animation: error500animation 3s ease 0s infinite alternate;
+      }
     }
-    &-btn-con{
-        text-align: center;
-        padding: 20px 0;
-        margin-bottom: 40px;
+    &-message {
+      display: block;
+      text-align: center;
+      font-size: 30px;
+      font-weight: 500;
+      letter-spacing: 4px;
+      color: #dddde2;
     }
+  }
+  &-btn-con {
+    text-align: center;
+    padding: 20px 0;
+    margin-bottom: 40px;
+  }
 }
 </style>