diff --git a/CLAUDE.md b/CLAUDE.md
index 479f9a947e..43a9844697 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -115,8 +115,8 @@ mvn spring-boot:run
 ```
 
 ## 路径别名说明
-- `@gold` - 前端项目根目录的别名，指向 `frontend/app/web-gold/src`
-- 例如：`import tokenManager from '@gold/utils/token-manager'` 等价于 `import tokenManager from 'frontend/app/web-gold/src/utils/token-manager'`
+- @gold：前端项目根目录核心别名，固定指向 frontend/app/web-gold/src
+- 强制示例：import tokenManager from '@gold/utils/token-manager' 指向 frontend/app/web-gold/src/utils/token-manager
 
 ## 重要提醒
 1. **OSS配额检查**: 文件上传前必须检查用户/系统配额
diff --git a/frontend/app/web-gold/src/api/auth.js b/frontend/app/web-gold/src/api/auth.js
index 6fc735181b..fe8ea979ec 100644
--- a/frontend/app/web-gold/src/api/auth.js
+++ b/frontend/app/web-gold/src/api/auth.js
@@ -5,7 +5,6 @@ import router from '@/router'
 import { getUserInfo,clearUserInfoCache } from './userinfo'
 
 const SERVER_BASE = API_BASE.APP_MEMBER
-const TIK_BASE = API_BASE.APP_TIK
 
 /**
  * 保存token
@@ -201,7 +200,7 @@ export function getUserInfoAuth() {
  * @returns {Promise<Object>} 用户档案
  */
 export async function getUserProfile() {
-  const { data } = await api.get(`${TIK_BASE}/muye/member-profile/get`)
+  const { data } = await api.get(`/webApi/api/tik/muye/member-profile/get`)
   return data
 }
 
diff --git a/frontend/app/web-gold/src/components/TopNav.vue b/frontend/app/web-gold/src/components/TopNav.vue
index aa10313c6c..66166ec059 100644
--- a/frontend/app/web-gold/src/components/TopNav.vue
+++ b/frontend/app/web-gold/src/components/TopNav.vue
@@ -13,34 +13,7 @@ const styles = {
 // const route = useRoute()
 const userStore = useUserStore()
 const showLogin = ref(false)
-const testLoading = ref(false)
 
-// 测试按钮点击事件
-const handleTest = async () => {
-  if (testLoading.value) return
-  
-  testLoading.value = true
-  try {
-    // 调用一键测试接口（升级会员 + 初始化OSS）
-    const res = await TestService.testAll({
-      vipLevel: 1,
-      totalStorage: 10 * 1024 * 1024 * 1024, // 10GB
-      totalQuota: 10000
-    })
-    
-    if (res.code === 0) {
-      message.success('测试成功！已升级会员并创建OSS目录', 3)
-      console.log('OSS初始化信息:', res.data)
-    } else {
-      message.error(res.msg || '测试失败', 3)
-    }
-  } catch (error) {
-    console.error('测试失败:', error)
-    message.error(error?.response?.data?.msg || error?.message || '测试失败', 3)
-  } finally {
-    testLoading.value = false
-  }
-}
 
 // 计算是否应该显示用户组件
 // 判断用户是否有用户名，有用户名说明用户信息已加载完成
@@ -69,15 +42,7 @@ const shouldShowUser = computed(() => {
           <!-- 左侧可放 logo 或其他内容 -->
         </div>
         <div class="flex items-center gap-4 pr-[35px]">
-          <!-- 测试按钮（仅开发环境显示） -->
-          <button 
-            v-if="shouldShowUser"
-            class="btn-test-nav" 
-            :disabled="testLoading"
-            @click="handleTest"
-          >
-            {{ testLoading ? '测试中...' : '测试' }}
-          </button>
+
           
           <template v-if="shouldShowUser">
             <UserDropdown />
diff --git a/frontend/app/web-gold/src/components/UserDropdown.vue b/frontend/app/web-gold/src/components/UserDropdown.vue
index 907916eb50..9f66def0d5 100644
--- a/frontend/app/web-gold/src/components/UserDropdown.vue
+++ b/frontend/app/web-gold/src/components/UserDropdown.vue
@@ -1,51 +1,19 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/user'
+import { UserOutlined, LogoutOutlined } from '@ant-design/icons-vue'
 
 const router = useRouter()
 const userStore = useUserStore()
-const showDropdown = ref(false)
 
-// 存储空间数据（后端单位 GB，前端展示转换为 MB）
-const GB_TO_MB = 1024
-const totalStorage = computed(() => userStore.totalStorage * GB_TO_MB)
-const usedStorage = computed(() => userStore.usedStorage * GB_TO_MB)
-const availableStorage = computed(() => userStore.remainingStorage * GB_TO_MB)
-const storagePercent = computed(() => {
-  if (totalStorage.value === 0) return 0
-  return (usedStorage.value / totalStorage.value) * 100
-})
-
-// 格式化存储空间显示
-function formatStorage(mb) {
-  if (mb >= 1024) {
-    return (mb / 1024).toFixed(1) + ' GB'
+const handleMenuClick = ({ key }) => {
+  if (key === 'profile') {
+    router.push('/user/profile')
+  } else if (key === 'logout') {
+    handleLogout()
   }
-  return Math.round(mb) + ' MB'
 }
 
-// 格式化金额
-function formatMoney(amount) {
-  return amount.toFixed(2)
-}
-
-// 格式化积分
-function formatCredits(credits) {
-  return credits.toLocaleString()
-}
-
-// 处理鼠标进入
-function handleMouseEnter() {
-  showDropdown.value = true
-}
-
-// 处理鼠标离开
-function handleMouseLeave() {
-  showDropdown.value = false
-}
-
-// 处理退出登录
 async function handleLogout() {
   try {
     await userStore.logout()
@@ -54,22 +22,10 @@ async function handleLogout() {
     console.error('退出登录失败:', error)
   }
 }
-
-// 挂载时获取档案数据
-onMounted(async () => {
-  if (userStore.isLoggedIn && !userStore.profile) {
-    await userStore.fetchUserProfile()
-  }
-})
 </script>
 
 <template>
-  <div 
-    class="user-dropdown-wrapper"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
-  >
-    <!-- 圆形头像 -->
+  <a-dropdown placement="bottomRight" :trigger="['click', 'hover']">
     <div class="user-avatar-container">
       <img 
         v-if="userStore.displayAvatar" 
@@ -81,119 +37,32 @@ onMounted(async () => {
         {{ userStore.displayName?.charAt(0) || 'U' }}
       </div>
     </div>
-
-    <!-- 下拉菜单 -->
-    <transition name="dropdown-fade">
-      <div v-if="showDropdown" class="user-dropdown">
-        <!-- 箭头指示器 -->
-        <div class="dropdown-arrow"></div>
-        <div class="dropdown-header">
-          <div class="header-avatar">
-            <img
-              v-if="userStore.displayAvatar"
-              class="avatar-large"
-              :src="userStore.displayAvatar"
-              alt="avatar"
-            />
-            <div v-else class="avatar-large-placeholder">
-              {{ userStore.displayName?.charAt(0) || 'U' }}
-            </div>
-          </div>
-          <div class="header-info">
-            <div class="user-name-row">
-              <span class="user-name">{{ userStore.displayName }}</span>
-            </div>
-            <div class="user-id">ID: {{ userStore.userId || '未设置' }}</div>
-          </div>
-        </div>
-
-        <div class="dropdown-divider"></div>
-
-        <div class="dropdown-content">
-          <!-- 可用空间 -->
-          <div class="info-item">
-            <div class="info-label">
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="info-icon">
-                <rect x="2" y="4" width="12" height="10" rx="1" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.6"/>
-                <path d="M5 4V2C5 1.44772 5.44772 1 6 1H10C10.5523 1 11 1.44772 11 2V4" stroke="currentColor" stroke-width="1.5" opacity="0.6"/>
-              </svg>
-              <span>可用空间</span>
-            </div>
-            <div class="info-value">
-              {{ formatStorage(availableStorage) }}
-            </div>
-          </div>
-
-          <!-- 存储进度条 -->
-          <div class="storage-progress">
-            <div class="progress-bar">
-              <div
-                class="progress-fill"
-                :style="{ width: storagePercent + '%' }"
-              ></div>
-            </div>
-            <div class="progress-text">
-              <span>{{ formatStorage(usedStorage) }}</span>
-              <span>/</span>
-              <span>{{ formatStorage(totalStorage) }}</span>
-            </div>
-          </div>
-
-          <!-- 剩余积分 -->
-          <div class="info-item">
-            <div class="info-label">
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="info-icon">
-                <circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.6"/>
-                <path d="M8 4V8L10 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
-              </svg>
-              <span>剩余积分</span>
-            </div>
-            <div class="info-value credits-value">
-              {{ formatCredits(userStore.remainingPoints) }}
-            </div>
-          </div>
-
-          <!-- 累计充值 -->
-          <div class="info-item">
-            <div class="info-label">
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="info-icon">
-                <circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.6"/>
-                <path d="M8 5V8L10 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
-              </svg>
-              <span>累计充值</span>
-            </div>
-            <div class="info-value balance-value">
-              ¥{{ formatMoney(userStore.totalRecharge) }}
-            </div>
-          </div>
-        </div>
-
-        <div class="dropdown-divider"></div>
-
-        <div class="dropdown-footer">
-          <button class="action-btn" @click="handleLogout">
-            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-              <path d="M5 2H2C1.44772 2 1 2.44772 1 3V11C1 11.5523 1.44772 12 2 12H5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-              <path d="M9 10L13 7L9 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-              <path d="M13 7H5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-            </svg>
-            <span>退出登录</span>
-          </button>
-        </div>
-      </div>
-    </transition>
-  </div>
+    
+    <template #overlay>
+      <a-menu @click="handleMenuClick">
+        <a-menu-item key="profile">
+          <template #icon>
+            <UserOutlined />
+          </template>
+          个人中心
+        </a-menu-item>
+        <a-menu-divider />
+        <a-menu-item key="logout" danger>
+          <template #icon>
+            <LogoutOutlined />
+          </template>
+          退出登录
+        </a-menu-item>
+      </a-menu>
+    </template>
+  </a-dropdown>
 </template>
 
 <style scoped>
-.user-dropdown-wrapper {
-  position: relative;
-  display: inline-block;
-}
-
 .user-avatar-container {
-  position: relative;
   cursor: pointer;
+  display: flex;
+  align-items: center;
   transition: transform 0.2s ease;
 }
 
@@ -206,252 +75,32 @@ onMounted(async () => {
   height: 40px;
   border-radius: 50%;
   object-fit: cover;
-  border: 2px solid var(--color-border);
+  border: 2px solid var(--color-border, #e5e7eb);
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
 .user-avatar:hover {
-  border-color: var(--color-primary);
-  box-shadow: var(--glow-primary);
+  border-color: var(--color-primary, #1890ff);
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
 }
 
 .user-avatar-placeholder {
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: linear-gradient(135deg, var(--color-primary), var(--color-blue));
+  background: linear-gradient(135deg, var(--color-primary, #1890ff), var(--color-blue, #36cfc9));
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-weight: 600;
   font-size: 16px;
-  border: 2px solid var(--color-border);
+  border: 2px solid var(--color-border, #e5e7eb);
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
 .user-avatar-placeholder:hover {
-  border-color: var(--color-primary);
-  box-shadow: var(--glow-primary);
-}
-
-.user-dropdown {
-  position: absolute;
-  top: calc(100% + 12px);
-  right: 0;
-  width: 320px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-card);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), var(--shadow-inset-card);
-  z-index: 1000;
-  overflow: hidden;
-  animation: slideDown 0.2s ease-out;
-}
-
-.dropdown-arrow {
-  position: absolute;
-  top: -6px;
-  right: 20px;
-  width: 12px;
-  height: 12px;
-  background: var(--color-surface);
-  border-left: 1px solid var(--color-border);
-  border-top: 1px solid var(--color-border);
-  transform: rotate(45deg);
-  z-index: 1;
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.dropdown-header {
-  padding: 20px;
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-
-.header-avatar {
-  flex-shrink: 0;
-}
-
-.avatar-large {
-  width: 56px;
-  height: 56px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 2px solid var(--color-primary);
-  box-shadow: var(--glow-primary);
-}
-
-.avatar-large-placeholder {
-  width: 56px;
-  height: 56px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, var(--color-primary), var(--color-blue));
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  font-weight: 600;
-  font-size: 24px;
-  border: 2px solid var(--color-primary);
-  box-shadow: var(--glow-primary);
-}
-
-.header-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.user-name-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 4px;
-}
-
-.user-name {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--color-text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.user-id {
-  font-size: 12px;
-  color: var(--color-text-secondary);
-}
-
-.dropdown-divider {
-  height: 1px;
-  background: var(--color-border);
-  margin: 0;
-}
-
-.dropdown-content {
-  padding: 16px 20px;
-}
-
-.info-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 0;
-}
-
-.info-item:not(:last-child) {
-  border-bottom: 1px solid var(--color-border);
-}
-
-.info-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  color: var(--color-text-secondary);
-}
-
-.info-icon {
-  color: var(--color-text-secondary);
-  opacity: 0.6;
-}
-
-.info-value {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--color-text);
-}
-
-.credits-value {
-  color: var(--color-primary);
-}
-
-.balance-value {
-  color: var(--color-accent);
-}
-
-.storage-progress {
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid var(--color-border);
-}
-
-.progress-bar {
-  width: 100%;
-  height: 6px;
-  background: var(--color-bg);
-  border-radius: 3px;
-  overflow: hidden;
-  margin-bottom: 8px;
-}
-
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--color-primary), var(--color-blue));
-  border-radius: 3px;
-  transition: width 0.3s ease;
-  box-shadow: 0 0 8px var(--color-primary-glow);
-}
-
-.progress-text {
-  display: flex;
-  justify-content: space-between;
-  font-size: 11px;
-  color: var(--color-text-secondary);
-}
-
-.dropdown-footer {
-  padding: 12px 20px;
-}
-
-.action-btn {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 10px 16px;
-  background: transparent;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-card);
-  color: var(--color-text-secondary);
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.action-btn:hover {
-  background: var(--color-bg);
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-}
-
-.action-btn svg {
-  width: 14px;
-  height: 14px;
-}
-
-/* 下拉动画 */
-.dropdown-fade-enter-active,
-.dropdown-fade-leave-active {
-  transition: opacity 0.2s ease, transform 0.2s ease;
-}
-
-.dropdown-fade-enter-from,
-.dropdown-fade-leave-to {
-  opacity: 0;
-  transform: translateY(-8px);
+  border-color: var(--color-primary, #1890ff);
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
 }
 </style>
diff --git a/frontend/app/web-gold/src/router/index.js b/frontend/app/web-gold/src/router/index.js
index a1d87c05f2..cc2e6b5ab1 100644
--- a/frontend/app/web-gold/src/router/index.js
+++ b/frontend/app/web-gold/src/router/index.js
@@ -105,7 +105,8 @@ function buildRoutesFromNav(config) {
   const hiddenRoutes = [
     { path: 'trends/heat', name: '热度分析', component: () => import('../views/trends/Heat.vue'), meta: { hidden: true } },
     { path: 'material/mix-task', name: '混剪任务', component: () => import('../views/material/MixTaskList.vue'), meta: { hidden: true } },
-    { path: 'material/group', name: '素材分组', component: () => import('../views/material/MaterialGroup.vue'), meta: { hidden: true } }
+    { path: 'material/group', name: '素材分组', component: () => import('../views/material/MaterialGroup.vue'), meta: { hidden: true } },
+    { path: 'user/profile', name: '个人中心', component: () => import('../views/user/Profile.vue'), meta: { hidden: true } }
   ]
 
   hiddenRoutes.forEach(route => {
diff --git a/frontend/app/web-gold/src/stores/user.js b/frontend/app/web-gold/src/stores/user.js
index 8407682dc1..f07c615868 100644
--- a/frontend/app/web-gold/src/stores/user.js
+++ b/frontend/app/web-gold/src/stores/user.js
@@ -15,6 +15,7 @@ export const useUserStore = defineStore('user', () => {
   const userId = ref('')
   const nickname = ref('')
   const avatar = ref('')
+  const mobile = ref('')
 
   // 档案数据（来自 MemberUserProfile）
   const profile = ref(null)
@@ -33,6 +34,7 @@ export const useUserStore = defineStore('user', () => {
     userId: userId.value,
     nickname: nickname.value,
     avatar: avatar.value,
+    mobile: mobile.value,
     profile: profile.value,
   }))
 
@@ -47,6 +49,7 @@ export const useUserStore = defineStore('user', () => {
     userId.value = saved.userId || ''
     nickname.value = saved.nickname || ''
     avatar.value = saved.avatar || ''
+    mobile.value = saved.mobile || ''
     profile.value = saved.profile || null
   }
 
@@ -60,6 +63,7 @@ export const useUserStore = defineStore('user', () => {
     userId.value = String(data.userId || data.id || '')
     nickname.value = data.nickname || ''
     avatar.value = data.avatar || ''
+    mobile.value = data.mobile || ''
   }
 
   // 获取用户信息
@@ -70,6 +74,7 @@ export const useUserStore = defineStore('user', () => {
         userId.value = String(userInfo.id || userInfo.userId || '')
         nickname.value = userInfo.nickname || ''
         avatar.value = userInfo.avatar || ''
+        mobile.value = userInfo.mobile || ''
         isLoggedIn.value = true
       }
     } catch (error) {
@@ -102,6 +107,7 @@ export const useUserStore = defineStore('user', () => {
     userId.value = ''
     nickname.value = ''
     avatar.value = ''
+    mobile.value = ''
     profile.value = null
 
     await remove(STORAGE_KEY)
@@ -113,6 +119,7 @@ export const useUserStore = defineStore('user', () => {
     userId,
     nickname,
     avatar,
+    mobile,
     profile,
     remainingPoints,
     remainingStorage,
diff --git a/frontend/app/web-gold/src/views/user/Profile.vue b/frontend/app/web-gold/src/views/user/Profile.vue
new file mode 100644
index 0000000000..a767f61c0c
--- /dev/null
+++ b/frontend/app/web-gold/src/views/user/Profile.vue
@@ -0,0 +1,385 @@
+<script setup>
+import { computed, onMounted } from 'vue'
+import { useUserStore } from '@/stores/user'
+import { 
+  UserOutlined, 
+  DatabaseOutlined, 
+  WalletOutlined, 
+  PayCircleOutlined,
+  ClockCircleOutlined,
+  SafetyCertificateOutlined
+} from '@ant-design/icons-vue'
+
+const userStore = useUserStore()
+
+// 存储空间数据
+const GB_TO_MB = 1024
+const totalStorage = computed(() => userStore.totalStorage * GB_TO_MB)
+const usedStorage = computed(() => userStore.usedStorage * GB_TO_MB)
+const storagePercent = computed(() => {
+  if (totalStorage.value === 0) return 0
+  return Math.min(100, (usedStorage.value / totalStorage.value) * 100)
+})
+
+// 格式化函数
+function formatStorage(mb) {
+  if (mb >= 1024) {
+    return (mb / 1024).toFixed(1) + ' GB'
+  }
+  return Math.round(mb) + ' MB'
+}
+
+function formatMoney(amount) {
+  return amount?.toFixed(2) || '0.00'
+}
+
+function formatCredits(credits) {
+  return credits?.toLocaleString() || '0'
+}
+
+// 格式化日期
+function formatDate(dateStr) {
+  if (!dateStr) return '未设置'
+  const date = new Date(dateStr)
+  return date.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  }).replace(/\//g, '-')
+}
+
+// 脱敏手机号
+function maskMobile(mobile) {
+  if (!mobile) return '未设置'
+  return mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
+}
+
+onMounted(async () => {
+  if (userStore.isLoggedIn) {
+    // 获取用户基本信息和档案信息
+    if (!userStore.mobile) {
+      await userStore.fetchUserInfo()
+    }
+    if (!userStore.profile) {
+      await userStore.fetchUserProfile()
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="profile-container">
+    <div class="page-header">
+      <h1 class="page-title">个人中心</h1>
+      <p class="page-subtitle">管理您的账户信息和资源使用情况</p>
+    </div>
+
+    <a-row :gutter="[24, 24]">
+      <!-- 左侧：用户信息卡片 -->
+      <a-col :xs="24" :lg="8">
+        <a-card class="user-card" :bordered="false">
+          <div class="user-info-header">
+            <div class="avatar-wrapper">
+              <img 
+                v-if="userStore.displayAvatar" 
+                class="user-avatar" 
+                :src="userStore.displayAvatar" 
+                alt="avatar" 
+              />
+              <div v-else class="user-avatar-placeholder">
+                {{ userStore.displayName?.charAt(0) || 'U' }}
+              </div>
+            </div>
+            <h2 class="user-name">{{ userStore.displayName }}</h2>
+            <div class="user-id">ID: {{ userStore.userId || '未设置' }}</div>
+            <div class="user-role-badge">普通用户</div>
+          </div>
+          
+          <a-divider />
+          
+          <div class="user-details">
+            <div class="detail-item">
+              <span class="detail-label">注册时间</span>
+              <span class="detail-value">{{ formatDate(userStore.profile?.registerTime || userStore.profile?.createTime) }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">绑定手机</span>
+              <span class="detail-value">{{ maskMobile(userStore.mobile || userStore.profile?.mobile) }}</span>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+
+      <!-- 右侧：资源统计与活动 -->
+      <a-col :xs="24" :lg="16">
+        <!-- 资源概览卡片 -->
+        <a-row :gutter="[24, 24]">
+          <a-col :xs="24" :sm="12" :md="8">
+            <a-card class="stat-card" :bordered="false">
+              <div class="stat-icon-wrapper blue">
+                <DatabaseOutlined />
+              </div>
+              <div class="stat-content">
+                <div class="stat-label">存储空间</div>
+                <div class="stat-value">{{ formatStorage(usedStorage) }} <span class="stat-unit">/ {{ formatStorage(totalStorage) }}</span></div>
+                <a-progress 
+                  :percent="storagePercent" 
+                  :show-info="false" 
+                  :stroke-color="{ '0%': '#108ee9', '100%': '#87d068' }" 
+                  size="small"
+                  class="stat-progress"
+                />
+              </div>
+            </a-card>
+          </a-col>
+
+          <a-col :xs="24" :sm="12" :md="8">
+            <a-card class="stat-card" :bordered="false">
+              <div class="stat-icon-wrapper purple">
+                <WalletOutlined />
+              </div>
+              <div class="stat-content">
+                <div class="stat-label">剩余积分</div>
+                <div class="stat-value">{{ formatCredits(userStore.remainingPoints) }}</div>
+                <div class="stat-desc">用于AI生成消耗</div>
+              </div>
+            </a-card>
+          </a-col>
+
+          <a-col :xs="24" :sm="12" :md="8">
+            <a-card class="stat-card" :bordered="false">
+              <div class="stat-icon-wrapper orange">
+                <PayCircleOutlined />
+              </div>
+              <div class="stat-content">
+                <div class="stat-label">账户余额</div>
+                <div class="stat-value">¥{{ formatMoney(userStore.totalRecharge) }}</div>
+                <div class="stat-desc">累计充值金额</div>
+              </div>
+            </a-card>
+          </a-col>
+        </a-row>
+
+        <!-- 最近活动/设置占位 -->
+        <a-card title="最近活动" :bordered="false" class="activity-card mt-6">
+          <template #extra>
+            <a href="#">查看全部</a>
+          </template>
+          <a-list item-layout="horizontal" :data-source="[]">
+             <template #renderItem="{ item }">
+              <!-- 这里是空列表，暂时留白 -->
+             </template>
+             <div class="empty-state">
+                <ClockCircleOutlined class="empty-icon" />
+                <p>暂无最近活动记录</p>
+             </div>
+          </a-list>
+        </a-card>
+
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<style scoped>
+.profile-container {
+  padding: 24px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.page-header {
+  margin-bottom: 32px;
+}
+
+.page-title {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--color-text);
+  margin-bottom: 8px;
+}
+
+.page-subtitle {
+  color: var(--color-text-secondary);
+  font-size: 14px;
+}
+
+/* User Card */
+.user-card {
+  text-align: center;
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+  background: var(--color-bg-container, #fff);
+  height: 100%;
+}
+
+.user-info-header {
+  padding: 24px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.avatar-wrapper {
+  margin-bottom: 16px;
+  position: relative;
+}
+
+.user-avatar {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 4px solid rgba(var(--primary-color-rgb, 24, 144, 255), 0.1);
+}
+
+.user-avatar-placeholder {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 40px;
+  font-weight: 600;
+  border: 4px solid rgba(24, 144, 255, 0.1);
+}
+
+.user-name {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 4px;
+  color: var(--color-text);
+}
+
+.user-id {
+  color: var(--color-text-secondary);
+  font-size: 13px;
+  margin-bottom: 12px;
+}
+
+.user-role-badge {
+  display: inline-block;
+  padding: 4px 12px;
+  background: rgba(24, 144, 255, 0.1);
+  color: #1890ff;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.user-details {
+  padding: 16px 0;
+}
+
+.detail-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--color-border-secondary, #f0f0f0);
+}
+
+.detail-item:last-child {
+  border-bottom: none;
+}
+
+.detail-label {
+  color: var(--color-text-secondary);
+}
+
+.detail-value {
+  color: var(--color-text);
+  font-weight: 500;
+}
+
+/* Stat Cards */
+.stat-card {
+  border-radius: 12px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
+  transition: transform 0.2s;
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+}
+
+.stat-icon-wrapper {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  margin-bottom: 16px;
+}
+
+.stat-icon-wrapper.blue {
+  background: rgba(24, 144, 255, 0.1);
+  color: #1890ff;
+}
+
+.stat-icon-wrapper.purple {
+  background: rgba(114, 46, 209, 0.1);
+  color: #722ed1;
+}
+
+.stat-icon-wrapper.orange {
+  background: rgba(250, 173, 20, 0.1);
+  color: #faad14;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  margin-bottom: 4px;
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--color-text);
+  margin-bottom: 8px;
+}
+
+.stat-unit {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--color-text-third);
+}
+
+.stat-desc {
+  font-size: 12px;
+  color: var(--color-text-third);
+}
+
+.stat-progress {
+  margin-top: 8px;
+}
+
+.mt-6 {
+  margin-top: 24px;
+}
+
+/* Empty State */
+.empty-state {
+  text-align: center;
+  padding: 40px 0;
+  color: var(--color-text-third);
+}
+
+.empty-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+.security-icon {
+  font-size: 24px;
+  color: #52c41a;
+  margin-right: 12px;
+}
+</style>
diff --git a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/muye/memberuserprofile/controller/app/AppMemberUserProfileController.java b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/muye/memberuserprofile/controller/app/AppMemberUserProfileController.java
index 0a28b785e2..04e7410795 100644
--- a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/muye/memberuserprofile/controller/app/AppMemberUserProfileController.java
+++ b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/muye/memberuserprofile/controller/app/AppMemberUserProfileController.java
@@ -19,7 +19,7 @@ import static cn.iocoder.yudao.framework.common.pojo.CommonResult.success;
  */
 @Tag(name = "用户 APP - 会员档案")
 @RestController
-@RequestMapping("/api/muye/member-profile")
+@RequestMapping("/api/tik/muye/member-profile")
 @Validated
 public class AppMemberUserProfileController {