✨ 完成大作业部分及其打磨

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

@@ -1,99 +1,15 @@
-<script setup lang="tsx">
-  useSystemStore().currentPage = 'home';
+<script setup lang="ts">
+  import BasicInfo from '~/components/BasicInfo.vue';
   const avatarURL = ref('');
+  useSystemStore().currentPage = 'home';
   onMounted(async () => {
     try {
       avatarURL.value = (await useUserStore().getAvatarURL())!;
     } catch (e) {
-      console.log(e);
+      await MessagePlugin.error(e as string);
     }
-    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 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>
-        </div>
-      </div>
-
-      <div
-        class="flex-[2] m-2 bg-white rounded-xl border-gray-200 border-2 flex justify-center pt-8 min-w-[558px]"
-      >
-        <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>
-  </div>
+  <BasicInfo :avatar-url="avatarURL" :data="useUserStore().$state" />
 </template>
-
-<style scoped lang="less"></style>