From 26357a1deea2078ecf6b22dd4b0b89df49aa4952 Mon Sep 17 00:00:00 2001
From: tylt6688 <tylt6688@gmail.com>
Date: Fri, 26 Apr 2024 13:17:09 +0800
Subject: [PATCH] =?UTF-8?q?dev-FEAT(GitHubAction):=20=E5=A2=9E=E5=8A=A0Git?=
 =?UTF-8?q?HubAction=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/deploy.yml       | 33 ++++++++++++++++++
 src/App.vue                        | 25 +++++++++----
 src/components/NotFound/index.vue  | 36 +++++++++++++++++++
 src/components/tinymce/tinymce.vue | 11 +++---
 src/router/index.js                | 56 ++++++++++--------------------
 src/store/index.js                 |  9 ++---
 src/store/modules/menus.js         |  1 +
 src/utils/countdown/index.js       | 31 +++++++++++++++++
 src/utils/http/index.js            | 14 ++++----
 src/utils/message_timer/index.js   | 33 ------------------
 src/views/Login.vue                | 10 +++---
 vue.config.js                      |  4 +--
 12 files changed, 160 insertions(+), 103 deletions(-)
 create mode 100644 .github/workflows/deploy.yml
 create mode 100644 src/components/NotFound/index.vue
 create mode 100644 src/utils/countdown/index.js
 delete mode 100644 src/utils/message_timer/index.js

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000..cd513bc
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,33 @@
+name: 监听 Push 打包部署
+
+on:
+  push:
+    branches: [ main ]
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  npm-build:
+    name: Npm Build and Deploy
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: 读取仓库内容
+      uses: actions/checkout@v4
+
+    - name: 安装依赖
+      run: |
+        npm install
+
+    - name: 打包
+      run: |
+        npm run build
+
+    - name: 部署
+      uses: JamesIves/github-pages-deploy-action@v4
+      with: 
+        branch: main
+        folder: dist
+        
diff --git a/src/App.vue b/src/App.vue
index 59b7fc3..eb0ea65 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-	<div id="app">
+	<div :id=id>
 		<router-view></router-view>
 	</div>
 </template>
@@ -8,7 +8,12 @@
 <script>
 	export default {
 		name: "App",
-		// TODO 监听tab栏变化
+		data() {
+			return {
+				id: "app"
+			}
+		},
+		// TODO 监听Tab栏变化
 		watch: {
 			$route(to, from) {
 				console.log("|--from -->", from.path, "|--to -->", to.path, "|--title -->", to.meta.title, "|--name -->",
@@ -31,20 +36,26 @@
 		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑";
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
+	}
 
-		/* 使网站整体变灰色，用于特殊纪念日使用 Start */
-		/* -webkit-filter: grayscale(100%);
+	/* 使网站整体变灰色，用于特殊纪念日使用 */
+	#app-gloomy {
+		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑";
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		-webkit-filter: grayscale(100%);
 		-moz-filter: grayscale(100%);
 		-ms-filter: grayscale(100%);
 		-o-filter: grayscale(100%);
 		filter: grayscale(100%);
-		filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); */
-		/* 使网站整体变灰色，用于特殊纪念日使用 End */
+		filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
+
 	}
 
 	html,
 	body,
-	#app {
+	#app,
+	#app-gloomy {
 		width: 100vw;
 		height: 100vh;
 		margin: 0;
diff --git a/src/components/NotFound/index.vue b/src/components/NotFound/index.vue
new file mode 100644
index 0000000..6624b49
--- /dev/null
+++ b/src/components/NotFound/index.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="background-container">
+    <!-- Your page content goes here -->
+    <div class="content">
+      <div>页面不见了！</div>
+        <div>首页瞧瞧，点击<router-link to="/">这里</router-link>进入首页.</div>
+    </div>
+  </div>
+</template>
+ 
+<script>
+export default {
+  name: 'NotFound',
+};
+</script>
+ 
+<style lang="less">
+/* Scoped styles for the component */
+ 
+.background-container {
+  /* Adjust the path to your actual image file */
+  background-image: url('../../assets/404_images/404.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  margin: 0;
+  padding: 0;
+  height: 100vh; /* Set the height to 100% of the viewport height */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .content {
+  text-align: center;
+}
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tinymce/tinymce.vue b/src/components/tinymce/tinymce.vue
index d048c7d..be880e9 100644
--- a/src/components/tinymce/tinymce.vue
+++ b/src/components/tinymce/tinymce.vue
@@ -1,13 +1,12 @@
 <template>
   <div class="tinymce-box">
-    <editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick">
+    <editor v-model="contentValue" :init="init" :disabled="disabled" @onClick="onClick">
     </editor>
   </div>
 </template>
 
 <script>
   import tinymce from 'tinymce/tinymce'
-  
   import Editor from '@tinymce/tinymce-vue'
   import 'tinymce/themes/silver'
   // 编辑器插件plugins 更多插件参考：https://www.tiny.cloud/docs/plugins/
@@ -58,7 +57,7 @@
             success(img)
           }
         },
-        myValue: this.value
+        contentValue: this.value
       }
     },
     mounted() {
@@ -72,14 +71,14 @@
       },
       // 可以添加一些自己的自定义事件，如清空内容
       clear() {
-        this.myValue = ''
+        this.contentValue = ''
       }
     },
     watch: {
       value(newValue) {
-        this.myValue = newValue
+        this.contentValue = newValue
       },
-      myValue(newValue) {
+      contentValue(newValue) {
         this.$emit('input', newValue)
       }
     }
diff --git a/src/router/index.js b/src/router/index.js
index d668f25..e4c9042 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -51,7 +51,12 @@ const routes = [{
     ]
   },
 
-  // 错误页面  
+  // 错误页面
+  {
+    path: '*',
+    name: 'NotFound',
+    component: () => import('@/components/NotFound')
+  },
   {
     path: '/401',
     name: '401Page',
@@ -82,12 +87,14 @@ const router = new VueRouter({
 router.beforeEach((to, from, next) => {
   // 后端动态路由生成
   let hasRoute = store.state.menus.hasRoutes;
-
   let token = store.getters.getToken;
+  console.log("ttt", token,token===undefined);
+
   // 如果当前是登录页并且token为空时就去登录页,不为空且正确时直接跳转主页,防止手动输入登录地址时不跳转情况
-  if (token) {
-    if (to.path == '/login') {
+  if (token != undefined) {
+    if (to.path === '/login') {
       next('/');
+      return;
     }
     // 验证token不为空并且hasRoute为空时去请求获取SideMenu菜单树
     else if (!hasRoute) {
@@ -114,19 +121,14 @@ router.beforeEach((to, from, next) => {
           }
         })
         router.addRoutes(newRoutes);
-        hasRoute = true;
-        store.commit("changeRouteState", hasRoute);
-        // 加载Portal首页管理模块路由
-        loadModeRoutes();
-        // 都没问题的话地址请求哪里就去哪里
-        next({
-          path: to.path
-        })
+        // 对store中的路由状态标识进行变更
+        store.commit("changeRouteState", true);
+
+        // 都没问题的话路由地址请求哪里就去哪里
+        next({path: to.path});
       })
+
     }
-  } else {
-    // token为空的话直接跳到登录页
-    next();
   }
   // 每个页面的浏览器标签名称显示
   to.meta.title && (document.title = "清枫Breze—" + to.meta.title);
@@ -153,29 +155,7 @@ const menuToRoute = (menu) => {
   return route
 }
 
-
-// 首页管理模块路由
-async function loadModeRoutes() {
-  let modeRoutes = []
-  // let res = await axios.get("/breze/portal/modeCard/select");
-  // let modeList = res.data.result.data;
-
-  // modeList.forEach(mode => {
-  //   modeRoutes.push({
-  //     name: mode.modeComponent,
-  //     path: mode.modeLink,
-  //     meta: {
-  //       title: mode.modeTitle
-  //     },
-  //     component: () => import('@/views/' + mode.modeComponent + '.vue')
-  //   })
-  // })
-  modeRoutes.forEach(route => {
-    router.addRoute('Home', route);
-  })
-}
-
-// 防止重复点击一个路径是浏览器报路径重复的错
+// 防止重复点击一个路径时浏览器报路径重复的错
 const VueRouterPush = VueRouter.prototype.push;
 VueRouter.prototype.push = function push(to) {
   return VueRouterPush.call(this, to).catch(err => err)
diff --git a/src/store/index.js b/src/store/index.js
index 27a8b91..1b570cd 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,8 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import menus from "./modules/menus"
-
 import Cookies from 'js-cookie'
+import menus from "./modules/menus"
 
 Vue.use(Vuex);
 
@@ -21,14 +20,17 @@ const getters = {
 };
 
 const mutations = {
+  // 设置token至state中
   setToken(state, token) {
     state.token = token;
     Cookies.set("token", token);
   },
+  // 将token从state中移除
   removeToken(state) {
-    state.token = null;
+    state.token = undefined;
     Cookies.remove("token");
   },
+  // 设置用户信息至sessionStorage中
   setUserInfo(state, userInfo) {
     state.userInfo = userInfo;
     sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
@@ -38,7 +40,6 @@ const mutations = {
 const actions={};
 
 
-
 export default new Vuex.Store({
   state,
   getters,
diff --git a/src/store/modules/menus.js b/src/store/modules/menus.js
index 6d712ec..8db81bb 100644
--- a/src/store/modules/menus.js
+++ b/src/store/modules/menus.js
@@ -9,6 +9,7 @@ export default {
 	state: {
 		menuList: [],
 		permList: [],
+		// 是否有路由标识
 		hasRoutes: false,
 		editableTabsValue: name,
 		editableTabs: [{
diff --git a/src/utils/countdown/index.js b/src/utils/countdown/index.js
new file mode 100644
index 0000000..b0abc18
--- /dev/null
+++ b/src/utils/countdown/index.js
@@ -0,0 +1,31 @@
+/**
+ * 倒计时提示信息工具，启动函数countDownMessage(),参数time-->倒计时数。msg-->错误提示
+ */
+
+import { Message } from 'element-ui';
+import router from "@/router";
+
+let element = null;
+
+export function countDownMessage(time, msg) {
+    let countTime = (t, m) => {
+        setTimeout(() => {
+            if (t === 0) {
+                router.push('/login');
+            } else {
+                element.message = m + `,将在${t}秒后返回登录页面`;
+                countTime(--t, m);
+            }
+        }, 1000);
+    };
+
+    element = Message({
+        showClose: false,
+        message: msg + `,将在${time}秒后返回登录页面`,
+        type: "error",
+        duration: `${time}000`
+    });
+
+    countTime(time - 1, msg);
+}
+
diff --git a/src/utils/http/index.js b/src/utils/http/index.js
index 33e6fc8..92d8769 100644
--- a/src/utils/http/index.js
+++ b/src/utils/http/index.js
@@ -1,7 +1,7 @@
 import axios from 'axios'
 import router from '@/router'
 import store from '@/store'
-import { countDownMessage } from '@/utils/message_timer/index'
+import { countDownMessage } from '@/utils/countdown'
 import { Message } from 'element-ui'
 
 
@@ -15,9 +15,10 @@ const service = axios.create({
 })
 // 进行request请求数据拦截处理
 service.interceptors.request.use(config => {
-	console.log("打印Cookie token", store.getters.getToken)
+	let token = store.getters.getToken;
+	console.log("打印Cookie token", token,token===undefined);
 	// 将所有请求头里面进行jwt设置，方便权限访问
-	config.headers['Authorization'] = 'Bearer ' + store.getters.getToken;
+	config.headers['Authorization'] = 'Bearer ' + token;
 	return config
 })
 // 进行response返回数据拦截处理
@@ -26,7 +27,7 @@ service.interceptors.response.use(
 		console.log('AllResponse ===>>>', response);
 		// 缩短一点变为res
 		let res = response.data;
-		console.log('响应数据=>ResponseData===>>>', res);
+		console.log('响应数据ResponseData===>>>', res);
 		// 判断后端响应是否正确或是否为文件类型
 		if (res.success || res instanceof ArrayBuffer) {
 			return response;
@@ -43,7 +44,7 @@ service.interceptors.response.use(
 			const errorCode = error.response.status;
 			switch (errorCode) {
 				case 401:
-					localStorage.clear();
+					store.commit("removeToken");
 					countDownMessage(3, error.massage);
 					break;
 				case 403:
@@ -61,7 +62,7 @@ service.interceptors.response.use(
 					})
 					break;
 				case 500:
-					// 此处可进行更加细致的判断  FIXME 待进一步优化
+					// 需要进行更加细致的判断  FIXME 待进一步优化
 					if (error.response.data.errorCode === 700) {
 						Message.error(error.massage, {
 							showClose: false,
@@ -73,7 +74,6 @@ service.interceptors.response.use(
 						showClose: false,
 						duration: 1500
 					})
-
 					break;
 
 				default:
diff --git a/src/utils/message_timer/index.js b/src/utils/message_timer/index.js
deleted file mode 100644
index 14a4e4e..0000000
--- a/src/utils/message_timer/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Message } from 'element-ui';
-import router from "@/router";
-/**
- * 倒计时提示信息工具，启动函数countDownMessage(),参数time-->倒计时数。msg-->错误提示
- */
-var element = null;
-
-function countTime(time, msg) {
-    setTimeout(function () {
-        if (time == 0) {
-            // 计时结束后的操作
-            localStorage.clear();
-            router.replace("/login");
-        } else {
-            element.message = msg + `,将在${time}秒后返回登录页面`;
-            countTime(--time, msg);
-        }
-    }, 1000);
-}
-
-export function countDownMessage(time, msg) {
-    element = Message({
-        showClose: false,
-        message: msg + `,将在${time}秒后返回登录页面`,
-        type: "error",
-        duration: `${time}000`
-    });
-    time--
-    countTime(time, msg);
-}
-export default{
-    countDownMessage
-}
\ No newline at end of file
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 8c59dce..af952c3 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -22,7 +22,7 @@
               <el-tabs>
                 <el-tag type="info">科技拥抱生活🙆‍♂️</el-tag>
                 <!-- 账户密码登录面板 -->
-                <el-tab-pane label="密码登录">
+                <el-tab-pane label="账户登录">
                   <div class="login">
                     <el-form :model="loginForm" :rules="rules" ref="accountLoginForm" label-width="80px">
                       <el-form-item class="login-form-item" label="用户名" prop="username">
@@ -87,8 +87,8 @@
     </el-main>
 
     <!-- 网站底部信息 -->
-    <el-footer> 🐱‍🏍Copyright © 2021-2023 青枫网络工作室 All Rights Reserved.</el-footer>
-    <!-- <el-footer> 🐱‍🏍Copyright © 2021-2023 QF All Rights Reserved.</el-footer> -->
+    <!-- <el-footer> 🐱‍🏍Copyright © 2021-2023 青枫网络工作室 All Rights Reserved.</el-footer> -->
+    <el-footer> 🐱‍🏍Copyright © 2021-2023 QF All Rights Reserved.</el-footer>
 
   </el-container>
 </template>
@@ -161,8 +161,8 @@
           if (valid) {
             login.submitFormLogin(this.$qs.stringify(this.loginForm))
               .then((res) => {
-                console.log(res);
-                const token = res.headers["authorization"];
+                console.log("登录数据",res);
+                const token = res.data.result.data;
                 this.$store.commit("setToken", token);
                 this.$router.push("/");
               })
diff --git a/vue.config.js b/vue.config.js
index e4e387e..a23377c 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,6 +1,4 @@
-const {
-  defineConfig
-} = require('@vue/cli-service')
+const { defineConfig } = require('@vue/cli-service')
 
 module.exports = defineConfig({
   transpileDependencies: true