添加一个退出桌面霸屏页面的功能。

code/web/task_schedule/src/router/index.js

@@ -21,19 +21,19 @@ const routes = [
         path: "/login",
         name: "Login",
         hidden: true,
-        component: () => import("@/views/Login.vue"),
+        component: async () => await import( "@/views/Login.vue" ),
     },
     {
         path: "/public",
         name: "Public",
         hidden: true,
-        component: () => import("@/views/Public.vue"),
+        component: async () => await import( "@/views/Public.vue" ),
     },
     {
         path: "/desktop_archievement",
         name: "DesktopArchievement",
         hidden: true,
-        component: () => import("@/views/DesktopArchievement.vue"),
+        component: async () => await import( "@/views/DesktopArchievement.vue" ),
     },
 ];
 
@@ -44,7 +44,7 @@ const router = createRouter(
     }
 );
 
-//路由守卫
+// 路由守卫
 // router.beforeEach((to) =>
 // {
 

code/web/task_schedule/src/utils/account.ts

@@ -11,6 +11,13 @@
 import { type AxiosResponse } from "axios";
 import { service as instance } from "./api/request.js";
 import { API_URL } from "./api/config.js";
+import { cleanStaffInfo } from "./api/localStorage.js";
+
+// @ts-expect-error 之后再补充类型文件
+import { router } from "../router/index.js";
+// declare const require: any;
+// const { router, } = require( "../router/index.js" );
+
 interface LoginInfo
 {
     p13account: string;
@@ -28,4 +35,11 @@ async function login( data: LoginInfo ): Promise<AxiosResponse<any, any>>
     );
 }
 
-export { type LoginInfo, login };
+function logout(): void
+{
+    cleanStaffInfo();
+
+    void router.push( "/login" );
+}
+
+export { type LoginInfo, login, logout };

code/web/task_schedule/src/utils/api/localStorage.ts

@@ -43,4 +43,9 @@ function saveStaffInfo( stuff: StaffInfo ): void
     window.localStorage.setItem( STUFF_ITEM, json );
 };
 
-export { loadStaffInfo, saveStaffInfo };
+function cleanStaffInfo(): void
+{
+    window.localStorage.removeItem( STUFF_ITEM );
+}
+
+export { loadStaffInfo, saveStaffInfo, cleanStaffInfo };

code/web/task_schedule/src/views/DesktopArchievement.vue

@@ -11,6 +11,8 @@
     <div
         v-if="ui.showUI"
         class="view-wrapper"
+        tabindex="0"
+        @keyup.esc="logoutDesktopArchievement()"
     >
         <div class="center-wrapper">
             <span class="slogan">对标先进&nbsp;比学赶超</span>
@@ -63,6 +65,7 @@ import ArchievementChart from "@/components/ArchievementChartComponent.vue";
 import ArchievementCompleteRateComponent from "@/components/ArchievementCompleteRateComponent.vue";
 import HonorListComponent from "@/components/HonorListComponent.vue";
 import DishonorListComponent from "@/components/DishonorListComponent.vue";
+import { logout } from "@/utils/account.js";
 
 export default {
     name: "DesktopArchievement",
@@ -116,6 +119,15 @@ export default {
             setTimeout(() => { ui.showUI = true; }, 0);
         };
 
+        // 退出桌面霸屏
+        const logoutDesktopArchievement = () =>
+        {
+            console.log("111");
+            logout();
+
+            // router.push("/login");
+        };
+
         // 检查存储的登录信息，不存在则返回登录页面
         if (staffInfo.P13UID === "")
         {
@@ -133,7 +145,7 @@ export default {
             queryDepartmentArchievement(renderData);
         });
 
-        return { ui, getTotalArchievement, renderData, };
+        return { ui, getTotalArchievement, renderData, logoutDesktopArchievement, };
     },
 };
 </script>
@@ -158,6 +170,7 @@ export default {
 .center-wrapper {
     //中间部分
     width: 50%;
+    min-width: 780px;
     display: flex;
     flex-direction: column;
     align-items: stretch;

code/web/task_schedule/src/views/Login.vue

@@ -195,6 +195,10 @@ export default {
     justify-content: start;
     align-items: center;
 
+    background-image: url("@/assets/img/bg/bg_01.jpg");
+    background-attachment: fixed;
+    background-size: contain;
+
     span {
         font-size: 30px;
         color: red;

code/web/task_schedule/tsconfig.json

@@ -38,8 +38,8 @@
         "src/**/*.tsx",
         "src/**/*.vue",
         "*.d.ts",
-        "src/router/index.js",
+        "src/router/index.ts",
-        "src/router/index.js",
+        "src/router/index.ts",
     ],
     "exclude": [
         "./node_modules",

package-lock.json

@@ -6,6 +6,9 @@
     "": {
       "dependencies": {
         "vuex": "^4.0.2"
+      },
+      "devDependencies": {
+        "@types/node": "^18.15.5"
       }
     },
     "node_modules/@babel/parser": {
@@ -20,6 +23,12 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@types/node": {
+      "version": "18.15.5",
+      "resolved": "https://registry.npmmirror.com/@types/node/-/node-18.15.5.tgz",
+      "integrity": "sha512-Ark2WDjjZO7GmvsyFFf81MXuGTA/d6oP38anyxWOL6EREyBKAxKoFHwBhaZxCfLRLpO8JgVXwqOwSwa7jRcjew==",
+      "dev": true
+    },
     "node_modules/@vue/compiler-core": {
       "version": "3.2.47",
       "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
@@ -247,6 +256,12 @@
       "integrity": "sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ==",
       "peer": true
     },
+    "@types/node": {
+      "version": "18.15.5",
+      "resolved": "https://registry.npmmirror.com/@types/node/-/node-18.15.5.tgz",
+      "integrity": "sha512-Ark2WDjjZO7GmvsyFFf81MXuGTA/d6oP38anyxWOL6EREyBKAxKoFHwBhaZxCfLRLpO8JgVXwqOwSwa7jRcjew==",
+      "dev": true
+    },
     "@vue/compiler-core": {
       "version": "3.2.47",
       "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.2.47.tgz",

package.json

@@ -1,5 +1,8 @@
 {
   "dependencies": {
     "vuex": "^4.0.2"
+  },
+  "devDependencies": {
+    "@types/node": "^18.15.5"
   }
 }