✨ 完成实验部分打磨，准备大作业部分

app/pages/base/index.vue

@@ -90,32 +90,6 @@
     router.push('/base/' + val);
   });
 
-  async function sendTest() {
-    await useLoginStore().login();
-    try {
-      // const response = await $fetch('/api/login/test', {
-      //   method: 'GET',
-      // });
-      const { $http } = useNuxtApp();
-      useNuxtApp().$http.GET('/test');
-      console.log($http); // 检查是否为 undefined
-      console.log($fetch);
-      $http.GET('/file/test').catch(() => {
-        console.log('error');
-        $http
-          .POST('/login/login', {
-            username: 'admin',
-            password: 'password',
-          })
-          .then(async () => {
-            const result = await $http.GET('/api/file/test');
-            console.log(result);
-          });
-      });
-    } catch (err) {
-      console.log(err);
-    }
-  }
   onMounted(() => setCollapsed(useWindowSize().width.value));
   onMounted(async () => {
     await store.getUserInfo();
@@ -144,31 +118,7 @@
           <a @click="backToLogin">
             <t-icon class="t-menu__operations-icon" name="logout" />
           </a>
-          <t-button @click="sendTest" />
         </template>
-        <!--        <template #logo>-->
-        <!--          <img-->
-        <!--            width="136"-->
-        <!--            class="logo"-->
-        <!--            src="https://www.tencent.com/img/index/menu_logo_hover.png"-->
-        <!--            alt="logo"-->
-        <!--          />-->
-        <!--        </template>-->
-        <!--        <t-menu-item value="item1"> 已选内容 </t-menu-item>-->
-        <!--        <t-menu-item value="item2"> 菜单内容一 </t-menu-item>-->
-        <!--        <t-menu-item value="item3"> 菜单内容二 </t-menu-item>-->
-        <!--        <t-menu-item value="item4" :disabled="true"> 菜单内容三 </t-menu-item>-->
-        <!--        <template #operations>-->
-        <!--          <a href="javascript:;"-->
-        <!--            ><t-icon class="t-menu__operations-icon" name="search"-->
-        <!--          /></a>-->
-        <!--          <a href="javascript:;"-->
-        <!--            ><t-icon class="t-menu__operations-icon" name="notification-filled"-->
-        <!--          /></a>-->
-        <!--          <a href="javascript:;"-->
-        <!--            ><t-icon class="t-menu__operations-icon" name="index"-->
-        <!--          /></a>-->
-        <!--        </template>-->
       </t-head-menu>
     </t-header>
     <t-layout :class="{ collapsed: collapsed, 'non-collapsed': !collapsed }">
@@ -193,7 +143,7 @@
             <t-menu-item value="peopleManage">
               <span>用户管理</span>
             </t-menu-item>
-            <t-menu-item value="fileManage">
+            <t-menu-item value="articleManage">
               <span>文件管理</span>
             </t-menu-item>
           </t-submenu>

app/pages/base/index/articleManage/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="less">
+
+</style>

app/pages/base/index/calendar/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-  const avatarURL = ref('');
   useSystemStore().currentPage = 'calendar';
+  const avatarURL = ref('');
   onMounted(async () => {
     try {
       avatarURL.value = (await useUserStore().getAvatarURL())!;
@@ -14,22 +14,25 @@
 <template>
   <div class="p-6">
     <div class="flex md:flex-row flex-col">
-      <div class="flex-[1] m-2 max-h-80">
+      <div
-        <div class="flex flex-row md:flex-col justify-center">
+        class="flex-[1] m-2 h-[700px] bg-white rounded-xl border-gray-200 border-2 min-w-48"
-          <span class="text-2xl ml-auto mr-auto md:mt-6 mt-20 mb-6"
+      >
-            >欢迎 {{ useUserStore().userName }}
+        <div class="flex flex-row md:flex-col justify-center p-4">
-          </span>
           <t-image
             :src="avatarURL"
             alt="头像"
             :fit="'contain'"
-            class="max-h-80 max-w-80 m-auto"
+            shape="circle"
+            class="max-h-72 max-w-72 m-auto"
           />
+          <span class="text-2xl ml-auto mr-auto md:mt-6 mt-20 mb-6"
+            >欢迎 {{ useUserStore().userName }}
+          </span>
         </div>
       </div>
 
-      <div class="flex-[2] m-2">
+      <div class="flex-[2] m-2 rounded-xl border-gray-200 border-2">
-        <t-calendar> </t-calendar>
+        <t-calendar class="h-[698px]"> </t-calendar>
       </div>
     </div>
   </div>

app/pages/base/index/home/index.vue

@@ -1,28 +1,95 @@
-<script setup lang="ts">
+<script setup lang="tsx">
   useSystemStore().currentPage = 'home';
+  const avatarURL = ref('');
+  onMounted(async () => {
+    try {
+      avatarURL.value = (await useUserStore().getAvatarURL())!;
+    } catch (e) {
+      console.log(e);
+    }
+    console.log(avatarURL.value);
+  });
+  function doShow(x: string) {
+    const notShow = ['userAvatar', 'userId', 'usernameOrEmail', 'lastGetTime'];
+    for (const i of notShow) {
+      if (x === i) return false;
+    }
+    return true;
+  }
+  function toChinese(x: string) {
+    const map = {
+      userName: '用户名',
+      userId: '用户ID',
+      userEmail: '邮箱',
+      phone: '手机号',
+      lastGetTime: '最后登录时间',
+      userAvatar: '头像',
+      userAmount: '余额',
+      userBirthday: '生日',
+    };
+    return map[x as keyof typeof map];
+  }
+  function getIcon(key: string) {
+    const map = {
+      userName: 'user',
+      userEmail: 'mail',
+      userAmount: 'money',
+      userBirthday: 'cake',
+    };
+    const val = map[key as keyof typeof map];
+    return <t-icon v-if="" class="t-menu__operations-icon" name={val} />;
+  }
 </script>
 
 <template>
   <div class="p-6">
     <div class="flex md:flex-row flex-col">
-      <div class="flex-[1] m-2 max-h-80">
+      <div
-        <div class="flex flex-row md:flex-col justify-center">
+        class="flex-[1] m-2 h-full bg-white rounded-xl border-gray-200 border-2 min-h-[300px] min-w-48"
+      >
+        <div class="flex flex-row md:flex-col justify-center p-4">
+          <t-image
+            :src="avatarURL"
+            alt="头像"
+            :fit="'contain'"
+            shape="circle"
+            class="max-h-72 max-w-72 m-auto"
+          />
           <span class="text-2xl ml-auto mr-auto md:mt-6 mt-20 mb-6"
             >欢迎 {{ useUserStore().userName }}
           </span>
-          <t-image
-            src="/avatar.jpg"
-            alt="头像"
-            shape="circle"
-            :fit="'contain'"
-            class="max-h-80 max-w-80 m-auto"
-          />
         </div>
       </div>
 
-      <div class="flex-[2] m-2">
+      <div
-        <t-card>
+        class="flex-[2] m-2 bg-white rounded-xl border-gray-200 border-2 flex justify-center pt-8 min-w-[558px]"
-          <t-table> </t-table>
+      >
+        <t-card
+          title="个人信息"
+          class="w-10/12 max-w-[700px]"
+          :bordered="false"
+        >
+          <t-row
+            v-for="(value, key) of useUserStore().$state"
+            :key="key"
+            class="w-full"
+          >
+            <div
+              v-if="doShow(key)"
+              class="border-collapse flex flex-row w-full h-10"
+            >
+              <t-col
+                class="flex-[1] flex justify-center border-2 items-center"
+                >{{ toChinese(key) }}</t-col
+              >
+              <t-col class="flex-[2] border-2 flex items-center">
+                <span class="ml-4">
+                  <component :is="getIcon(key)" />
+                  {{ value }}
+                </span>
+              </t-col>
+            </div>
+          </t-row>
         </t-card>
       </div>
     </div>

app/stores/user.ts

@@ -4,6 +4,7 @@ export interface UserInfo {
   userEmail: string;
   userAvatar: string;
   userAmount: string;
+  userBirthday: string;
   lastGetTime: Date;
 }
 export interface UserState extends UserInfo {
@@ -17,6 +18,7 @@ export const useUserStore = defineStore('User', {
     userEmail: '',
     userAvatar: '',
     userAmount: '',
+    userBirthday: '',
     lastGetTime: new Date(),
   }),
   actions: {
@@ -30,6 +32,7 @@ export const useUserStore = defineStore('User', {
         this.userEmail = res.data.userEmail;
         this.userAvatar = res.data.userAvatar;
         this.userAmount = '500';
+        this.userBirthday = res.data.userBirthday;
         this.lastGetTime = new Date();
       } catch (error) {
         console.error('Error fetching user info:', error);