优化

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

@@ -1,13 +1,29 @@
 <script setup>
 import { computed, onMounted, ref, reactive } from 'vue'
 import { Icon } from '@iconify/vue'
+import { toast } from 'vue-sonner'
 import { useUserStore } from '@/stores/user'
 import { getPointRecordPage } from '@/api/pointRecord'
+import { redeemCode as redeemCodeApi } from '@/api/redeemCode'
 import { Progress } from '@/components/ui/progress'
 import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription
+} from '@/components/ui/dialog'
 
 const userStore = useUserStore()
 
+// 兑换码相关
+const showRedeemDialog = ref(false)
+const redeemCodeInput = ref('')
+const redeeming = ref(false)
+
 // 积分记录数据
 const pointRecords = ref([])
 const recordsLoading = ref(false)
@@ -129,6 +145,31 @@ function getStatusInfo(status) {
   return statusMap[status] || { text: status, color: 'default' }
 }
 
+// 兑换码兑换
+async function handleRedeem() {
+  const code = redeemCodeInput.value.trim()
+  if (!code) {
+    toast.error('请输入兑换码')
+    return
+  }
+
+  redeeming.value = true
+  try {
+    await redeemCodeApi(code)
+    toast.success('兑换成功，积分已到账')
+    showRedeemDialog.value = false
+    redeemCodeInput.value = ''
+    // 刷新用户信息和积分记录
+    await userStore.fetchUserProfile()
+    await fetchPointRecords()
+  } catch (e) {
+    const msg = e?.response?.data?.msg || e?.message || '兑换失败'
+    toast.error(msg)
+  } finally {
+    redeeming.value = false
+  }
+}
+
 onMounted(async () => {
   if (userStore.isLoggedIn) {
     // 获取用户基本信息和档案信息
@@ -186,7 +227,7 @@ onMounted(async () => {
       <!-- 右侧：资源统计与活动 -->
       <div class="lg:col-span-8">
         <!-- 资源概览卡片 -->
-        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
           <!-- 存储空间 -->
           <div class="stat-card">
             <div class="stat-icon-wrapper blue">
@@ -222,6 +263,26 @@ onMounted(async () => {
               <div class="stat-desc">累计充值金额</div>
             </div>
           </div>
+
+          <!-- 兑换码充值 -->
+          <div class="stat-card">
+            <div class="stat-icon-wrapper green">
+              <Icon icon="lucide:gift" class="text-2xl" />
+            </div>
+            <div class="stat-content">
+              <div class="stat-label">兑换码充值</div>
+              <div class="stat-value" style="font-size: 16px;">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  @click="showRedeemDialog = true"
+                >
+                  输入兑换码
+                </Button>
+              </div>
+              <div class="stat-desc">使用兑换码获取积分</div>
+            </div>
+          </div>
         </div>
 
         <!-- 积分记录 -->
@@ -291,6 +352,34 @@ onMounted(async () => {
         </div>
       </div>
     </div>
+
+    <!-- 兑换码弹窗 -->
+    <Dialog v-model:open="showRedeemDialog">
+      <DialogContent class="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>兑换码充值</DialogTitle>
+          <DialogDescription>
+            输入您的兑换码，积分将立即到账
+          </DialogDescription>
+        </DialogHeader>
+        <div class="py-4">
+          <Input
+            v-model="redeemCodeInput"
+            placeholder="请输入兑换码"
+            class="w-full"
+            @keyup.enter="handleRedeem"
+          />
+        </div>
+        <DialogFooter>
+          <Button variant="outline" @click="showRedeemDialog = false">
+            取消
+          </Button>
+          <Button @click="handleRedeem" :disabled="redeeming">
+            {{ redeeming ? '兑换中...' : '立即兑换' }}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   </div>
 </template>
 
@@ -430,6 +519,11 @@ onMounted(async () => {
   color: #faad14;
 }
 
+.stat-icon-wrapper.green {
+  background: rgba(82, 196, 26, 0.1);
+  color: #52c41a;
+}
+
 .stat-label {
   font-size: 14px;
   color: var(--muted-foreground);