feat: 引入2048

components.d.ts

@@ -7,32 +7,34 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    BackgroundComp: typeof import('./src/components/BackgroundComp.vue')['default']
-    ElAvatar: typeof import('element-plus/es')['ElAvatar']
-    ElButton: typeof import('element-plus/es')['ElButton']
-    ElContainer: typeof import('element-plus/es')['ElContainer']
-    ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElDropdown: typeof import('element-plus/es')['ElDropdown']
-    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
-    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
-    ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormItem: typeof import('element-plus/es')['ElFormItem']
-    ElHeader: typeof import('element-plus/es')['ElHeader']
-    ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElInput: typeof import('element-plus/es')['ElInput']
-    ElMain: typeof import('element-plus/es')['ElMain']
-    ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
-    Game2048: typeof import('./src/components/Game2048.vue')['default']
-    IconCsLock: typeof import('~icons/cs/lock')['default']
-    IconCsUser: typeof import('~icons/cs/user')['default']
-    IconCsValidate: typeof import('~icons/cs/validate')['default']
-    IconEpLoading: typeof import('~icons/ep/loading')['default']
-    IconEpUserFilled: typeof import('~icons/ep/user-filled')['default']
-    LoadingIcon: typeof import('./src/components/LoadingIcon.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    VerifyInput: typeof import('./src/components/VerifyInput.vue')['default']
+    BackgroundComp: (typeof import('./src/components/BackgroundComp.vue'))['default'];
+    ElAvatar: (typeof import('element-plus/es'))['ElAvatar'];
+    ElButton: (typeof import('element-plus/es'))['ElButton'];
+    ElContainer: (typeof import('element-plus/es'))['ElContainer'];
+    ElDialog: (typeof import('element-plus/es'))['ElDialog'];
+    ElDrawer: (typeof import('element-plus/es'))['ElDrawer'];
+    ElDropdown: (typeof import('element-plus/es'))['ElDropdown'];
+    ElDropdownItem: (typeof import('element-plus/es'))['ElDropdownItem'];
+    ElDropdownMenu: (typeof import('element-plus/es'))['ElDropdownMenu'];
+    ElForm: (typeof import('element-plus/es'))['ElForm'];
+    ElFormItem: (typeof import('element-plus/es'))['ElFormItem'];
+    ElHeader: (typeof import('element-plus/es'))['ElHeader'];
+    ElIcon: (typeof import('element-plus/es'))['ElIcon'];
+    ElInput: (typeof import('element-plus/es'))['ElInput'];
+    ElInputNumber: (typeof ;'element-plus/es'['ElInputNumber'];))    ElPopover: (typeof import('element-plus/es'))['ElPopover'];
+    ElTabPane: (typeof import('element-plus/es'))['ElTabPane'];
+    ElTabs: (typeof import('element-plus/es'))['ElTabs'];
+    Game2048: (typeof import('./src/components/Game2048.vue'))['default'];
+    IconCsLock: (typeof import('~icons/cs/lock'))['default'];
+    IconCsUser: (typeof import('~icons/cs/user'))['default'];
+    IconCsValidate: (typeof import('~icons/cs/validate'))['default'];
+    IconEpLoading: (typeof import('~icons/ep/loading'))['default'];
+    IconEpUserFilled: (typeof import('~icons/ep/user-filled'))['default'];
+    LoadingIcon: (typeof import('./src/components/LoadingIcon.vue'))['default'];
+    RouterLink: (typeof import('vue-router'))['RouterLink'];
+    RouterView: (typeof import('vue-router'))['RouterView'];
+    VerifyInput: (typeof import('./src/components/VerifyInput.vue'))['default'];
+
+import(
   }
 }

src/App.vue

@@ -2,7 +2,12 @@
   <el-container>
     <el-header height="50px">
       <div class="header-title">社团展示系统</div>
-      <div class="header-content">
+      <nav class="header-content">
+        <router-link v-slot="{ navigate }" custom to="/2048">
+          <div class="nav-img-items game-2048" @click="navigate">
+            <img alt="2048" draggable="false" src="@/assets/2048.png" />
+          </div>
+        </router-link>
         <template v-if="userStore.isInitialized">
           <div v-if="userStore.userInfo !== null" class="username">
             {{ userStore.userInfo.name }}
@@ -30,7 +35,7 @@
           </el-avatar>
         </template>
         <loading-icon v-else />
-      </div>
+      </nav>
     </el-header>
     <router-view />
   </el-container>
@@ -178,6 +183,29 @@
   align-items: center;
 }
 
+.header-content > * {
+  margin-right: 10px;
+}
+
+.header-content > *:last-child {
+  margin-right: 0;
+}
+
+.nav-img-items {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.nav-img-items img {
+  width: 40px;
+  height: 40px;
+}
+
+.game-2048 {
+  margin-right: 20px;
+}
+
 .header-title {
   font-size: 1.2em;
 }

src/router/index.ts

@@ -41,6 +41,10 @@ const routes: RouteRecordRaw[] = [
       permission: RoutePermission.CLUB_PAGE
     }
   },
+  {
+    path: '/2048',
+    component: () => import('@/views/Game2048Page.vue')
+  },
   {
     path: '/:brokenPath',
     redirect: '/'