优化账户页面布局，调整个人信息和按钮区域的结构，提升用户体验

src/views/Account.vue

@@ -247,50 +247,57 @@ onMounted(async () => {
 
 <template>
   <section class="space-y-5">
-    <div
-      class="rounded-2xl bg-white/5 border border-white/10 p-4 flex items-center gap-3"
-    >
-      <div
-        v-if="isLoggedIn"
-        class="h-12 w-12 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 grid place-items-center text-slate-900 font-semibold"
-      >
-        {{ userStore.userInfo?.name?.[0] || "用" }}
-      </div>
-      <div
-        v-else
-        class="h-12 w-12 rounded-full bg-white/10 grid place-items-center text-white/60"
-      >
-        <svg
-          viewBox="0 0 24 24"
-          width="24"
-          height="24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
+    <div class="rounded-2xl bg-white/5 border border-white/10 p-4">
+      <!-- 个人信息区域 -->
+      <div class="flex items-center gap-3 mb-4">
+        <div
+          v-if="isLoggedIn"
+          class="h-12 w-12 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 grid place-items-center text-slate-900 font-semibold"
         >
-          <path d="M20 21a8 8 0 1 0-16 0" />
-          <circle cx="12" cy="7" r="4" />
-        </svg>
-      </div>
-      <div class="flex-1 min-w-0">
-        <p class="text-sm text-white/60">
-          {{ isLoggedIn ? "欢迎回来" : "未登录" }}
-        </p>
-        <h2 class="text-base font-semibold text-white/90 truncate">
-          {{ isLoggedIn ? userStore.userInfo?.name || "用户" : "点击登录账号" }}
-          <span
-            v-if="isVip"
-            class="ml-2 px-2 py-0.5 rounded bg-yellow-400/90 text-xs text-yellow-900 font-semibold align-middle"
-            style="vertical-align: middle"
+          {{ userStore.userInfo?.name?.[0] || "用" }}
+        </div>
+        <div
+          v-else
+          class="h-12 w-12 rounded-full bg-white/10 grid place-items-center text-white/60"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
           >
-            {{ vipLevelToText(userStore.userInfo?.vipLevel) }}
-          </span>
-        </h2>
-        <!-- VIP到期时间显示 -->
-        <p v-if="shouldShowExpireTime" class="text-xs text-white/60 mt-1">
-          到期时间：{{ formatVipExpireTime(userStore.userInfo?.vipExpireTime) }}
-        </p>
+            <path d="M20 21a8 8 0 1 0-16 0" />
+            <circle cx="12" cy="7" r="4" />
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <p class="text-sm text-white/60">
+            {{ isLoggedIn ? "欢迎回来" : "未登录" }}
+          </p>
+          <h2 class="text-base font-semibold text-white/90 truncate">
+            {{
+              isLoggedIn ? userStore.userInfo?.name || "用户" : "点击登录账号"
+            }}
+            <span
+              v-if="isVip"
+              class="ml-2 px-2 py-0.5 rounded bg-yellow-400/90 text-xs text-yellow-900 font-semibold align-middle"
+              style="vertical-align: middle"
+            >
+              {{ vipLevelToText(userStore.userInfo?.vipLevel) }}
+            </span>
+          </h2>
+          <!-- VIP到期时间显示 -->
+          <p v-if="shouldShowExpireTime" class="text-xs text-white/60 mt-1">
+            到期时间：{{
+              formatVipExpireTime(userStore.userInfo?.vipExpireTime)
+            }}
+          </p>
+        </div>
       </div>
+
+      <!-- 按钮区域 -->
       <div v-if="isLoggedIn" class="flex gap-2">
         <button
           v-if="isGuest"