feat: update

frontend/wechat/src/api/userApi.js

@@ -0,0 +1,10 @@
+import client from './client';
+
+export const userApi = {
+    profile() {
+        return client.get(`/users/profile`);
+    },
+    update(profile) {
+        return client.put(`/users/profile`, { username: profile.username });
+    },
+}

frontend/wechat/src/api/user_profile.json

@@ -0,0 +1,5 @@
+{
+    "id": 1,
+    "created_at": "2025-04-15T20:53:07.107819Z",
+    "username": "u_K6YDZTMc"
+}

frontend/wechat/src/views/UserProfile.vue

@@ -1,29 +1,74 @@
 <script setup>
-import { ref } from 'vue';
+import { userApi } from '@/api/userApi';
+import { onMounted, ref } from 'vue';
+import {
+    BsBox2Fill,
+    BsGearFill,
+    BsPersonFill,
+    BsPinMapFill
+} from 'vue-icons-plus/bs';
 
-const userInfo = ref({
-    name: '用户名',
-    avatar: '',
-    // Add more user info as needed
-})
+const userInfo = ref({});
+
+onMounted(async () => {
+    try {
+        const { data } = await userApi.profile();
+        userInfo.value = data;
+        console.log('User profile:', userInfo.value);
+    } catch (error) {
+        console.error('Failed to fetch user profile:', error);
+    }
+});
+
+const menuGroups = [
+    {
+        title: '账号与信息',
+        items: [
+            { label: '个人资料', icon: BsPersonFill, link: '/profile/edit' },
+        ]
+    },
+    {
+        title: '订单与服务',
+        items: [
+            { label: '我的订单', icon: BsBox2Fill, link: '/orders' },
+            { label: '我的地址', icon: BsPinMapFill, link: '/address' },
+        ]
+    },
+    {
+        title: '设置',
+        items: [
+            { label: '系统设置', icon: BsGearFill, link: '/settings' },
+        ]
+    }
+];
 </script>
 
 <template>
-    <div class="p-4">
-        <div class="bg-white rounded-lg shadow-sm p-4">
-            <div class="flex items-center gap-4 p-4 border-b border-gray-100">
-                <div class="w-16 h-16 rounded-full bg-gray-200 overflow-hidden">
-                    <img v-if="userInfo.avatar" :src="userInfo.avatar" alt="头像" class="w-full h-full object-cover">
-                </div>
-                <h3 class="text-xl font-medium">{{ userInfo.name }}</h3>
-            </div>
 
-            <div class="grid grid-cols-3 gap-4 p-4">
-                <button v-for="(item, index) in ['我的收藏', '我的点赞', '订单列表']" :key="index"
-                    class="py-3 text-center text-gray-700 hover:bg-gray-50 active:bg-gray-100 rounded-lg transition-colors">
-                    {{ item }}
-                </button>
+    <div class="bg-white p-4 shadow-lg border-b border-gray-300">
+        <div class="flex items-center gap-4 p-4 border-gray-100">
+            <div class="w-16 h-16 rounded-full bg-gray-200 overflow-hidden"
+                :style="{ backgroundImage: `url(${userInfo.avatar})` }">
+            </div>
+            <div>
+                <h3 class="text-xl font-medium">{{ userInfo.username }}</h3>
+                <span class="text-gray-500">ID: {{ userInfo.id }}</span>
             </div>
         </div>
     </div>
+
+    <div class="menus space-y-4 mt-4 px-4">
+        <div v-for="(group, groupIndex) in menuGroups" :key="groupIndex" class="bg-white rounded-lg overflow-hidden">
+            <div class="px-4 py-2 text-sm text-gray-500">{{ group.title }}</div>
+            <div class="divide-y divide-gray-100">
+                <div v-for="(item, itemIndex) in group.items" :key="itemIndex"
+                    class="flex items-center px-4 py-3 hover:bg-gray-50 active:bg-gray-100 cursor-pointer">
+                    <component :is="item.icon" class="mr-3 text-xl text-gray-600" />
+                    <span class="flex-1">{{ item.label }}</span>
+                    <span class="text-gray-400">›</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
 </template>