优化

frontend/app/web-gold/src/views/user/Profile.vue

@@ -146,10 +146,7 @@ onMounted(async () => {
 
 <template>
   <div class="profile-container">
-    <div class="page-header">
-      <h1 class="page-title">个人中心</h1>
-      <p class="page-subtitle">管理您的账户信息和资源使用情况</p>
-    </div>
+
 
     <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
       <!-- 左侧：用户信息卡片 -->
@@ -299,33 +296,16 @@ onMounted(async () => {
 
 <style scoped>
 .profile-container {
-  padding: 24px;
+  padding: var(--space-6);
   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 {
+.profile-content {
   text-align: center;
   border-radius: 16px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
-  background: var(--color-bg-container, #fff);
+  background: var(--card);
   height: 100%;
   padding: 24px;
 }
@@ -368,7 +348,7 @@ onMounted(async () => {
   font-size: 20px;
   font-weight: 600;
   margin-bottom: 12px;
-  color: var(--color-text);
+  color: var(--foreground);
 }
 
 .user-role-badge {
@@ -383,7 +363,7 @@ onMounted(async () => {
 
 .divider {
   height: 1px;
-  background: var(--color-border-secondary, #f0f0f0);
+  background: var(--border);
   margin: 16px 0;
 }
 
@@ -395,7 +375,7 @@ onMounted(async () => {
   display: flex;
   justify-content: space-between;
   padding: 12px 0;
-  border-bottom: 1px solid var(--color-border-secondary, #f0f0f0);
+  border-bottom: 1px solid var(--border);
 }
 
 .detail-item:last-child {
@@ -403,11 +383,11 @@ onMounted(async () => {
 }
 
 .detail-label {
-  color: var(--color-text-secondary);
+  color: var(--muted-foreground);
 }
 
 .detail-value {
-  color: var(--color-text);
+  color: var(--foreground);
   font-weight: 500;
 }
 
@@ -415,7 +395,7 @@ onMounted(async () => {
 .stat-card {
   border-radius: 12px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
-  background: var(--color-bg-container, #fff);
+  background: var(--card);
   padding: 20px;
   transition: transform 0.2s, box-shadow 0.2s;
 }
@@ -452,26 +432,26 @@ onMounted(async () => {
 
 .stat-label {
   font-size: 14px;
-  color: var(--color-text-secondary);
+  color: var(--muted-foreground);
   margin-bottom: 4px;
 }
 
 .stat-value {
   font-size: 24px;
   font-weight: 700;
-  color: var(--color-text);
+  color: var(--foreground);
   margin-bottom: 8px;
 }
 
 .stat-unit {
   font-size: 14px;
   font-weight: 400;
-  color: var(--color-text-third);
+  color: var(--muted-foreground);
 }
 
 .stat-desc {
   font-size: 12px;
-  color: var(--color-text-third);
+  color: var(--muted-foreground);
 }
 
 .stat-progress {
@@ -489,7 +469,7 @@ onMounted(async () => {
   justify-content: center;
   gap: 12px;
   padding: 40px 0;
-  color: var(--color-text-secondary);
+  color: var(--muted-foreground);
 }
 
 .custom-spinner {
@@ -509,7 +489,7 @@ onMounted(async () => {
 .empty-state {
   text-align: center;
   padding: 40px 0;
-  color: var(--color-text-third);
+  color: var(--muted-foreground);
 }
 
 .empty-icon {
@@ -522,7 +502,7 @@ onMounted(async () => {
 .activity-card {
   border-radius: 12px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
-  background: var(--color-bg-container, #fff);
+  background: var(--card);
   padding: 20px;
 }
 
@@ -536,12 +516,12 @@ onMounted(async () => {
 .activity-title {
   font-size: 16px;
   font-weight: 600;
-  color: var(--color-text);
+  color: var(--foreground);
   margin: 0;
 }
 
 .record-count {
-  color: var(--color-text-secondary);
+  color: var(--muted-foreground);
   font-size: 13px;
 }
 
@@ -555,7 +535,7 @@ onMounted(async () => {
   align-items: center;
   justify-content: space-between;
   padding: 12px 0;
-  border-bottom: 1px solid var(--color-border-secondary, #f0f0f0);
+  border-bottom: 1px solid var(--border);
 }
 
 .record-item:last-child {
@@ -596,13 +576,13 @@ onMounted(async () => {
 
 .record-reason {
   font-weight: 500;
-  color: var(--color-text);
+  color: var(--foreground);
   font-size: 14px;
 }
 
 .record-time {
   font-size: 12px;
-  color: var(--color-text-secondary);
+  color: var(--muted-foreground);
 }
 
 .record-amount {
@@ -625,11 +605,11 @@ onMounted(async () => {
   gap: 16px;
   margin-top: 16px;
   padding-top: 16px;
-  border-top: 1px solid var(--color-border-secondary, #f0f0f0);
+  border-top: 1px solid var(--border);
 }
 
 .page-info {
   font-size: 14px;
-  color: var(--color-text-secondary);
+  color: var(--muted-foreground);
 }
 </style>