Merge pull request #25 from tylt6688/dev

FEAT(GitHubAction): 增加GitHubAction测试
tylt6688 · Apr 26, 2024 · 99cabcc · 99cabcc
2 parents 76eea69 + 26357a1
commit 99cabcc
Show file tree

Hide file tree

Showing 12 changed files with 160 additions and 103 deletions.
diff --git a/.github/workflows/deploy.yml 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
@@ -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
@@ -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>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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: