From d0660ab59d071743e2f8d39ef75275e1ccfcfeb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Mon, 9 May 2022 13:22:21 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=94=9F=E4=BA=A7=E6=89=93=E5=8C=85?=
 =?UTF-8?q?=E7=BC=96=E8=AF=91=E6=8A=A5=E9=94=99=E9=97=AE=E9=A2=98=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 3998de871def78ea6f61b3ecd368411d50a2c6f9
---
 src/components/Hamburger/index.vue            | 42 ++++------
 src/components/LangSelect/index.vue           |  7 +-
 .../dashboard/components/Project/index.vue    |  4 +-
 src/views/error-page/401.vue                  | 71 +++++++++-------
 src/views/error-page/404.vue                  | 83 ++++++++++---------
 src/views/pms/goods/components/GoodsInfo.vue  | 40 +++++----
 vite.config.ts                                |  2 +-
 7 files changed, 129 insertions(+), 120 deletions(-)

diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 8502f533..3093a538 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -1,35 +1,29 @@
 <template>
   <div style="padding: 0 15px" @click="toggleClick">
-    <svg
-      :class="{ 'is-active': isActive }"
-      class="hamburger"
-      viewBox="0 0 1024 1024"
-      xmlns="http://www.w3.org/2000/svg"
-      width="64"
-      height="64"
-    >
+    <svg :class="{ 'is-active': isActive }" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
+      width="64" height="64">
       <path
-        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
-      />
+        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
     </svg>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'Hamburger',
-  props: {
-    isActive: {
-      type: Boolean,
-      default: false
-    }
+<script setup lang="ts">
+
+defineProps({
+  isActive: {
+    required: true,
+    type: Boolean,
+    default: false
   },
-  methods: {
-    toggleClick() {
-      this.$emit('toggleClick');
-    }
-  }
-};
+})
+
+const emit = defineEmits(['toggleClick']);
+
+function toggleClick() {
+  emit('toggleClick')
+}
+
 </script>
 
 <style scoped>
diff --git a/src/components/LangSelect/index.vue b/src/components/LangSelect/index.vue
index dd795e3c..34b23748 100644
--- a/src/components/LangSelect/index.vue
+++ b/src/components/LangSelect/index.vue
@@ -19,14 +19,13 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import useStore from '@/store';
-
-const { app } = useStore();
-const language = computed(() => app.language);
-
 import { useI18n } from 'vue-i18n';
 import { ElMessage } from 'element-plus';
 import SvgIcon from '@/components/SvgIcon/index.vue';
 
+const { app } = useStore();
+const language = computed(() => app.language);
+
 const { locale } = useI18n();
 
 function handleSetLanguage(lang: string) {
diff --git a/src/views/dashboard/components/Project/index.vue b/src/views/dashboard/components/Project/index.vue
index 60d1d429..d20d2640 100644
--- a/src/views/dashboard/components/Project/index.vue
+++ b/src/views/dashboard/components/Project/index.vue
@@ -93,9 +93,9 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
-  name: 'index'
+  name: 'index',
 };
 </script>
 
diff --git a/src/views/error-page/401.vue b/src/views/error-page/401.vue
index 280da73a..17a992e2 100644
--- a/src/views/error-page/401.vue
+++ b/src/views/error-page/401.vue
@@ -1,3 +1,33 @@
+<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
+<script lang="ts">
+export default {
+  name: 'Page401',
+};
+</script>
+
+<script setup lang="ts">
+import { reactive, toRefs } from 'vue';
+import { useRouter } from 'vue-router';
+
+const state = reactive({
+  errGif: new URL(
+    `../../assets/401_images/401.gif`,
+    import.meta.url).href,
+
+  ewizardClap:
+    'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
+  dialogVisible: false,
+})
+
+const { errGif, ewizardClap, dialogVisible } = toRefs(state)
+
+const router = useRouter();
+
+function back() {
+  router.back();
+}
+</script>
+
 <template>
   <div class="errPage-container">
     <el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back">
@@ -23,77 +53,56 @@
         </ul>
       </el-col>
       <el-col :span="12">
-        <img
-          :src="errGif"
-          width="313"
-          height="428"
-          alt="Girl has dropped her ice cream."
-        />
+        <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream." />
       </el-col>
     </el-row>
-    <el-dialog v-model:visible="dialogVisible" title="随便看">
+    <el-dialog v-model="dialogVisible" title="随便看">
       <img :src="ewizardClap" class="pan-img" />
     </el-dialog>
   </div>
 </template>
 
-<script>
-import errGif from '@/assets/401_images/401.gif';
-
-export default {
-  name: 'Page401',
-  data() {
-    return {
-      errGif: errGif + '?' + +new Date(),
-      ewizardClap:
-        'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
-      dialogVisible: false
-    };
-  },
-  methods: {
-    back() {
-      if (this.$route.query.noGoBack) {
-        this.$router.push({ path: '/dashboard' });
-      } else {
-        this.$router.go(-1);
-      }
-    }
-  }
-};
-</script>
 
 <style lang="scss" scoped>
 .errPage-container {
   width: 800px;
   max-width: 100%;
   margin: 100px auto;
+
   .pan-back-btn {
     background: #008489;
     color: #fff;
     border: none !important;
   }
+
   .pan-gif {
     margin: 0 auto;
     display: block;
   }
+
   .pan-img {
     display: block;
     margin: 0 auto;
     width: 100%;
   }
+
   .text-jumbo {
     font-size: 60px;
     font-weight: 700;
     color: #484848;
   }
+
   .list-unstyled {
     font-size: 14px;
+
     li {
       padding-bottom: 5px;
     }
+
     a {
       color: #008489;
       text-decoration: none;
+
       &:hover {
         text-decoration: underline;
       }
diff --git a/src/views/error-page/404.vue b/src/views/error-page/404.vue
index 3000e0e7..43315665 100644
--- a/src/views/error-page/404.vue
+++ b/src/views/error-page/404.vue
@@ -1,38 +1,32 @@
+<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
+<script lang="ts">
+export default {
+  name: 'Page404',
+};
+</script>
+
+<script setup lang="ts">
+
+function message() {
+  return 'The webmaster said that you can not enter this page...';
+}
+</script>
+
+
 <template>
   <div class="wscn-http404-container">
     <div class="wscn-http404">
       <div class="pic-404">
-        <img
-          class="pic-404__parent"
-          src="@/assets/404_images/404.png"
-          alt="404"
-        />
-        <img
-          class="pic-404__child left"
-          src="@/assets/404_images/404_cloud.png"
-          alt="404"
-        />
-        <img
-          class="pic-404__child mid"
-          src="@/assets/404_images/404_cloud.png"
-          alt="404"
-        />
-        <img
-          class="pic-404__child right"
-          src="@/assets/404_images/404_cloud.png"
-          alt="404"
-        />
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404" />
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404" />
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404" />
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404" />
       </div>
       <div class="bullshit">
         <div class="bullshit__oops">OOPS!</div>
         <div class="bullshit__info">
           All rights reserved
-          <a
-            style="color: #20a0ff"
-            href="https://wallstreetcn.com"
-            target="_blank"
-            >wallstreetcn</a
-          >
+          <a style="color: #20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
         </div>
         <div class="bullshit__headline">{{ message }}</div>
         <div class="bullshit__info">
@@ -45,17 +39,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'Page404',
-  computed: {
-    message() {
-      return 'The webmaster said that you can not enter this page...';
-    }
-  }
-};
-</script>
-
 <style lang="scss" scoped>
 .wscn-http404-container {
   transform: translate(-50%, -50%);
@@ -63,21 +46,26 @@ export default {
   top: 40%;
   left: 50%;
 }
+
 .wscn-http404 {
   position: relative;
   width: 1200px;
   padding: 0 50px;
   overflow: hidden;
+
   .pic-404 {
     position: relative;
     float: left;
     width: 600px;
     overflow: hidden;
+
     &__parent {
       width: 100%;
     }
+
     &__child {
       position: absolute;
+
       &.left {
         width: 80px;
         top: 17px;
@@ -89,6 +77,7 @@ export default {
         animation-fill-mode: forwards;
         animation-delay: 1s;
       }
+
       &.mid {
         width: 46px;
         top: 10px;
@@ -100,6 +89,7 @@ export default {
         animation-fill-mode: forwards;
         animation-delay: 1.2s;
       }
+
       &.right {
         width: 62px;
         top: 100px;
@@ -111,66 +101,78 @@ export default {
         animation-fill-mode: forwards;
         animation-delay: 1s;
       }
+
       @keyframes cloudLeft {
         0% {
           top: 17px;
           left: 220px;
           opacity: 0;
         }
+
         20% {
           top: 33px;
           left: 188px;
           opacity: 1;
         }
+
         80% {
           top: 81px;
           left: 92px;
           opacity: 1;
         }
+
         100% {
           top: 97px;
           left: 60px;
           opacity: 0;
         }
       }
+
       @keyframes cloudMid {
         0% {
           top: 10px;
           left: 420px;
           opacity: 0;
         }
+
         20% {
           top: 40px;
           left: 360px;
           opacity: 1;
         }
+
         70% {
           top: 130px;
           left: 180px;
           opacity: 1;
         }
+
         100% {
           top: 160px;
           left: 120px;
           opacity: 0;
         }
       }
+
       @keyframes cloudRight {
         0% {
           top: 100px;
           left: 500px;
           opacity: 0;
         }
+
         20% {
           top: 120px;
           left: 460px;
           opacity: 1;
         }
+
         80% {
           top: 180px;
           left: 340px;
           opacity: 1;
         }
+
         100% {
           top: 200px;
           left: 300px;
@@ -179,12 +181,14 @@ export default {
       }
     }
   }
+
   .bullshit {
     position: relative;
     float: left;
     width: 300px;
     padding: 30px 0;
     overflow: hidden;
+
     &__oops {
       font-size: 32px;
       font-weight: bold;
@@ -196,6 +200,7 @@ export default {
       animation-duration: 0.5s;
       animation-fill-mode: forwards;
     }
+
     &__headline {
       font-size: 20px;
       line-height: 24px;
@@ -208,6 +213,7 @@ export default {
       animation-delay: 0.1s;
       animation-fill-mode: forwards;
     }
+
     &__info {
       font-size: 13px;
       line-height: 21px;
@@ -219,6 +225,7 @@ export default {
       animation-delay: 0.2s;
       animation-fill-mode: forwards;
     }
+
     &__return-home {
       display: block;
       float: left;
@@ -237,11 +244,13 @@ export default {
       animation-delay: 0.3s;
       animation-fill-mode: forwards;
     }
+
     @keyframes slideUp {
       0% {
         transform: translateY(60px);
         opacity: 0;
       }
+
       100% {
         transform: translateY(0);
         opacity: 1;
diff --git a/src/views/pms/goods/components/GoodsInfo.vue b/src/views/pms/goods/components/GoodsInfo.vue
index 1d6421f1..1e4ddd93 100644
--- a/src/views/pms/goods/components/GoodsInfo.vue
+++ b/src/views/pms/goods/components/GoodsInfo.vue
@@ -53,25 +53,23 @@
             <single-upload v-model="item.url" :show-close="true" />
 
             <div v-if="item.url">
-              <el-button
-                type="text"
+              <el-link
+                type="danger"
                 class="button"
                 v-if="item.main == true"
-                style="color: #ff4d51"
-                >商品主图</el-button
+                >商品主图</el-link
               >
-              <el-button
-                type="text"
+              <el-link
+                type="info"
                 class="button"
                 v-else
                 @click="changeMainPicture(index)"
-                >设为主图</el-button
-              >
+                >设为主图</el-link>
             </div>
 
             <div v-else>
               <!-- 占位 -->
-              <el-button type="text" />
+              <el-link type="info" />
             </div>
           </el-card>
         </el-form-item>
@@ -107,15 +105,15 @@ const dataFormRef = ref(ElForm);
 const props = defineProps({
   modelValue: {
     type: Object,
-    default: () => {}
-  }
+    default: () => {},
+  },
 });
 
 const goodsInfo: any = computed({
   get: () => props.modelValue,
-  set: value => {
+  set: (value) => {
     emit('update:modelValue', value);
-  }
+  },
 });
 
 const state = reactive({
@@ -126,14 +124,14 @@ const state = reactive({
     { url: undefined, main: false },
     { url: undefined, main: false },
     { url: undefined, main: false },
-    { url: undefined, main: false }
+    { url: undefined, main: false },
   ] as Array<any>,
   rules: {
     name: [{ required: true, message: '请填写商品名称', trigger: 'blur' }],
     originPrice: [{ required: true, message: '请填写原价', trigger: 'blur' }],
     price: [{ required: true, message: '请填写现价', trigger: 'blur' }],
-    brandId: [{ required: true, message: '请选择商品品牌', trigger: 'blur' }]
-  }
+    brandId: [{ required: true, message: '请选择商品品牌', trigger: 'blur' }],
+  },
 });
 
 const { brandOptions, pictures, rules } = toRefs(state);
@@ -146,7 +144,7 @@ function loadData() {
   if (goodsId) {
     const mainPicUrl = goodsInfo.value.picUrl;
     if (mainPicUrl) {
-      state.pictures.filter(item => item.main)[0].url = mainPicUrl;
+      state.pictures.filter((item) => item.main)[0].url = mainPicUrl;
     }
     const subPicUrls = goodsInfo.value.subPicUrls;
     if (subPicUrls && subPicUrls.length > 0) {
@@ -179,14 +177,14 @@ function handleNext() {
     if (valid) {
       // 商品图片
       const mainPicUrl = state.pictures
-        .filter(item => item.main == true && item.url)
-        .map(item => item.url);
+        .filter((item) => item.main == true && item.url)
+        .map((item) => item.url);
       if (mainPicUrl && mainPicUrl.length > 0) {
         goodsInfo.value.picUrl = mainPicUrl[0];
       }
       const subPicUrl = state.pictures
-        .filter(item => item.main == false && item.url)
-        .map(item => item.url);
+        .filter((item) => item.main == false && item.url)
+        .map((item) => item.url);
       if (subPicUrl && subPicUrl.length > 0) {
         goodsInfo.value.subPicUrls = subPicUrl;
       }
diff --git a/vite.config.ts b/vite.config.ts
index 8782f9d2..45c85176 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -20,7 +20,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
     ],
     // 本地反向代理解决浏览器跨域限制
     server: {
-      host: 'localhost',
+      host: '0.0.0.0',
       port: Number(env.VITE_APP_PORT),
       open: true, // 运行自动打开浏览器
       proxy: {