feat: 增加各个模块

src/pages/user/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <view class="min-h-screen bg-[#f2f4f3] pb-10">
+    <wd-card title="个人信息" type="rectangle">
+      <view class="flex items-center gap-4">
+        <wd-avatar :text="profile.name ? profile.name.charAt(0).toUpperCase() : '我'" bg-color="#8b5cf6" />
+
+        <view class="flex flex-col">
+          <text class="text-lg text-gray-800 font-semibold">
+            {{ profile.name || '未设置姓名' }}
+          </text>
+          <text class="mt-0.5 text-xs text-gray-400">
+            {{ genderText }} · {{ profile.height ? `${profile.height} cm` : '身高未填' }}
+          </text>
+        </view>
+        <view class="ml-auto">
+          <wd-button size="small" plain type="primary" @click="openProfile">
+            编辑
+          </wd-button>
+        </view>
+      </view>
+    </wd-card>
+
+    <profile-popup />
+  </view>
+</template>
+
+<script lang="ts" setup>
+import ProfilePopup from "@/components/Profile/ProfilePopup.vue";
+import { computed, ref, watch } from 'vue'
+import type { IProfile } from '@/utils/profile'
+import { getProfile } from '@/utils/profile'
+import { useProfileStore } from '@/store/profile'
+
+const profileStore = useProfileStore()
+
+const profile = ref<IProfile>(getProfile())
+
+const genderText = computed(() => {
+  if (profile.value.gender === 'male')
+    return '男'
+  if (profile.value.gender === 'female')
+    return '女'
+
+  return '性别未填'
+})
+
+watch(() => profileStore.isRefresh, () => {
+  profile.value = getProfile()
+})
+
+function openProfile() {
+  Object.assign(profileStore.profileForm, profile.value)
+
+  profileStore.showProfilePopup = true
+}
+</script>