Merge pull request #20 from Octoveau/release

v1.0.0单点登录系统

.env

@@ -1,2 +1,4 @@
 VUE_APP_PORT='8800'
-VUE_APP_TARGET_API='http://47.109.22.178:8401'
+VUE_APP_TARGET_API='http://47.109.22.178:8401'
+VUE_APP_IMAGES_TARGET='http://www.octoveau.cn/images'
+

.github/workflows/deploy.yml

@@ -2,7 +2,7 @@ name: deploy sso-admin-portal 🚀
 on:
   push:
     branches:
-      - main
+      - release
 jobs:
   build-sso-admin-portal-deploy:
     runs-on: ubuntu-latest

.prettierrc

@@ -7,6 +7,5 @@
   "trailingComma": "es5",
   "htmlWhitespaceSensitivity": "ignore",
   "endOfLine": "auto",
-  "proseWrap": "never"
-
+  "proseWrap": "never",
 }

bin/default.conf

@@ -5,6 +5,9 @@ server {
     error_log  /var/log/nginx/error.log  error;
     root /usr/share/nginx/html;
     index index.html;
+    location  /sso-login/openapi/ {
+      proxy_pass  http://47.109.22.178:8401/openapi/;
+    }
     location  /sso-login/api/ {
       proxy_pass  http://47.109.22.178:8401/api/;
     }

public/index.html

@@ -12,14 +12,14 @@
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <script>
+    <!-- <script>
       var Wwidth = window.innerWidth;
       window.addEventListener('resize', function () {
         /// 宽度变化大于50像素的时候刷新整个窗口以适应新宽度
         if (Math.abs(Wwidth - window.innerWidth) > 100) {
           window.location.reload();
         }
       });
-    </script>
+    </script> -->
   </body>
 </html>

src/App.vue

@@ -15,7 +15,7 @@ export default {
 <style lang="less">
 #app {
   min-width: 1400px;
-  overflow-x: hidden;
+  overflow: hidden;
   height: 100%;
 }
 </style>

src/api/auth.js

@@ -19,3 +19,12 @@ export const smsCode = (phone) =>
       phone,
     },
   });
+
+//根据siteKey登录之后获取ticket
+export const getAuthTicket = (data) =>
+  service.post('/api/auth/ticket', data, {
+    isNotShowError: true,
+  });
+
+//退出登录
+export const logoutSso = (token) => service.post(`/openapi/auth/sites/${token}/logout`);

src/api/interceptors.js

@@ -17,9 +17,9 @@ const handleRespCode = (respData) => {
     case 500:
       Message.error(respData.message || ERROR_MSG_500);
       break;
-    default:
-      Message.error(respData.message || ERROR_MSG_COMMON);
-      break;
+    // default:
+    //   Message.error(respData.message || ERROR_MSG_COMMON);
+    //   break;
   }
 };
 const setupInterceptors = (request) => {
@@ -49,7 +49,7 @@ const setupInterceptors = (request) => {
   // 响应拦截器
   request.interceptors.response.use(
     (resp) => {
-      //从xios里取出api返回的data
+      //从axios里取出api返回的data
       let respData = resp.data;
       if (respData.code !== 200) {
         handleRespCode(respData);
@@ -59,7 +59,7 @@ const setupInterceptors = (request) => {
     //httpcode不在200-300时候会到异常拦截器，请求异常
     (error) => {
       let message = error?.message || error?.message || ERROE_MSG;
-      Message.error(message);
+      error.config.isNotShowError ? void 0 : Message.error(message);
       return Promise.reject(error);
     }
   );

src/components/Auth/AuthBack.vue

@@ -9,7 +9,6 @@
         </header>
       </slot>
     </div>
-
     <div class="container">
       <slot name="container"></slot>
     </div>
@@ -20,12 +19,11 @@
 </template>
 
 <script>
-import footerImg from '@/assets/images/footer.png';
 export default {
   data() {
     return {
       mainScreenWidth: null,
-      footerImg,
+      footerImg: `${process.env.VUE_APP_IMAGES_TARGET}/footer.png`,
     };
   },
   mounted() {
@@ -55,7 +53,7 @@ export default {
 .back-section {
   position: relative;
   height: 100vh;
-  background-image: url('../../assets/images/ssoback.png');
+  background-image: url('http://www.octoveau.cn/images/ssoback.png');
   background-repeat: no-repeat;
   background-position: top;
   background-size: 100% 100%;

src/components/Loading/PacmanLoader.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="v-spinner" v-show="loading">
+    <div class="v-pacman v-pacman2" v-bind:style="[spinnerStyle, animationStyle, spinnerDelay2]"></div>
+    <div class="v-pacman v-pacman3" v-bind:style="[spinnerStyle, animationStyle, spinnerDelay3]"></div>
+    <div class="v-pacman v-pacman4" v-bind:style="[spinnerStyle, animationStyle, spinnerDelay4]"></div>
+    <div class="v-pacman v-pacman5" v-bind:style="[spinnerStyle, animationStyle, spinnerDelay5]"></div>
+    <div class="shanxing">
+      <div class="sx1"></div>
+      <div class="sx2"></div>
+    </div>
+    <div class="footer" data-text="正在退出中...">正在退出中...</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PacmanLoader',
+  props: {
+    loading: {
+      type: Boolean,
+      default: true,
+    },
+    color: {
+      type: String,
+      default: '#409eff',
+    },
+    size: {
+      type: String,
+      default: '40px',
+    },
+    margin: {
+      type: String,
+      default: '2px',
+    },
+    radius: {
+      type: String,
+      default: '100%',
+    },
+  },
+  data() {
+    return {
+      spinnerDelay2: {
+        animationDelay: '0.25s',
+      },
+      spinnerDelay3: {
+        animationDelay: '0.50s',
+      },
+      spinnerDelay4: {
+        animationDelay: '0.75s',
+      },
+      spinnerDelay5: {
+        animationDelay: '1s',
+      },
+    };
+  },
+  computed: {
+    spinnerStyle() {
+      return {
+        backgroundColor: this.color,
+        width: this.size,
+        height: this.size,
+        margin: this.margin,
+        borderRadius: this.radius,
+      };
+    },
+    border1() {
+      return this.size + ' solid transparent';
+    },
+    border2() {
+      return this.size + ' solid ' + this.color;
+    },
+    spinnerStyle1() {
+      return {
+        width: 0,
+        height: 0,
+        borderTop: this.border2,
+        borderRight: this.border1,
+        borderBottom: this.border2,
+        borderLeft: this.border2,
+        borderRadius: this.size,
+      };
+    },
+    animationStyle() {
+      return {
+        width: '16px',
+        height: '16px',
+        transform: 'translate(0, ' + -parseFloat(this.size) / 4 + 'px)',
+        position: 'absolute',
+        'z-index': 100,
+        top: '75px',
+        left: '220px',
+        animationName: 'v-pacmanStretchDelay',
+        animationDuration: '1s',
+        animationIterationCount: 'infinite',
+        animationTimingFunction: 'linear',
+        animationFillMode: 'both',
+      };
+    },
+  },
+};
+</script>
+
+<style>
+.footer {
+  margin-top: 32px;
+  position: relative;
+  font-size: 20px;
+  color: #ffffff;
+}
+.footer::before {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  color: #409eff;
+  overflow: hidden;
+  -webkit-text-stroke: 0vw #383d52;
+  animation: animate 3s linear infinite;
+}
+@keyframes animate {
+  0%,
+  10%,
+  100% {
+    width: 0;
+  }
+
+  70%,
+  90% {
+    width: 100%;
+  }
+}
+.shanxing {
+  position: relative;
+  width: 150px;
+  height: 150px;
+  border-radius: 75px;
+  background-color: rgb(255, 255, 255);
+}
+.sx1 {
+  position: absolute;
+  width: 150px;
+  height: 150px;
+  clip: rect(0px, 75px, 150px, 0px);
+  border-radius: 100px;
+  background-color: #409eff;
+  animation: animate1 0.3s linear infinite;
+}
+@keyframes animate1 {
+  0%,
+  10%,
+  100% {
+    transform: rotate(-75deg);
+  }
+
+  70%,
+  90% {
+    transform: rotate(-30deg);
+  }
+}
+
+.sx2 {
+  position: absolute;
+  width: 150px;
+  height: 150px;
+  clip: rect(0px, 75px, 150px, 0px);
+  border-radius: 75px;
+  background-color: #409eff;
+  animation: animate2 0.3s linear infinite;
+}
+@keyframes animate2 {
+  0%,
+  10%,
+  100% {
+    transform: rotate(75deg);
+  }
+
+  70%,
+  90% {
+    transform: rotate(30deg);
+  }
+}
+
+.v-spinner {
+  text-align: center;
+  position: relative;
+}
+
+/*TODO computed transform */
+@-webkit-keyframes v-pacmanStretchDelay {
+  75% {
+    -webkit-opacity: 0.7;
+    opacity: 0.7;
+  }
+  100% {
+    -webkit-transform: translate(-100px, -6.25px);
+    transform: translate(-100px, -6.25px);
+  }
+}
+
+@keyframes v-pacmanStretchDelay {
+  75% {
+    -webkit-opacity: 0.7;
+    opacity: 0.7;
+  }
+  100% {
+    -webkit-transform: translate(-100px, -6.25px);
+    transform: translate(-100px, -6.25px);
+  }
+}
+</style>