refactor(profile): simplify profile page flow

frontend/src/components/user/profile/ProfileInfoCard.vue

@@ -98,7 +98,7 @@
       </div>
     </section>
 
-    <div class="grid gap-6 xl:grid-cols-[minmax(0,1.15fr)_320px]">
+    <div class="space-y-6">
       <div data-testid="profile-main-column" class="space-y-6">
         <section
           data-testid="profile-basics-panel"
@@ -115,7 +115,7 @@
             </div>
           </div>
 
-          <div class="grid gap-6 lg:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]">
+          <div class="grid gap-6 sm:grid-cols-1 md:grid-cols-2">
             <div class="rounded-3xl border border-gray-100 bg-gray-50/80 p-5 dark:border-dark-700 dark:bg-dark-900/30">
               <ProfileAvatarCard
                 :user="user"
@@ -150,35 +150,7 @@
         </section>
       </div>
 
-      <aside data-testid="profile-side-column" class="space-y-6">
-        <section class="card border border-gray-100 bg-white/90 p-6 dark:border-dark-700 dark:bg-dark-900/50">
-          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-            {{ t('profile.overviewTitle') }}
-          </h3>
-          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-            {{ t('profile.overviewDescription') }}
-          </p>
-
-          <div class="mt-5 grid gap-3">
-            <div class="rounded-2xl border border-gray-100 bg-gray-50/80 px-4 py-3 dark:border-dark-700 dark:bg-dark-900/30">
-              <p class="text-xs font-medium uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">
-                {{ t('profile.username') }}
-              </p>
-              <p class="mt-1 text-sm font-semibold text-gray-900 dark:text-white">
-                {{ user?.username || displayName }}
-              </p>
-            </div>
-            <div class="rounded-2xl border border-gray-100 bg-gray-50/80 px-4 py-3 dark:border-dark-700 dark:bg-dark-900/30">
-              <p class="text-xs font-medium uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">
-                {{ t('profile.email') }}
-              </p>
-              <p class="mt-1 text-sm font-semibold text-gray-900 dark:text-white">
-                {{ user?.email || '-' }}
-              </p>
-            </div>
-          </div>
-        </section>
-
+      <div data-testid="profile-side-column" class="space-y-6">
         <section
           v-if="sourceHints.length"
           class="card border border-gray-100 bg-white/90 p-6 dark:border-dark-700 dark:bg-dark-900/50"
@@ -201,7 +173,7 @@
             </div>
           </div>
         </section>
-      </aside>
+      </div>
     </div>
   </div>
 </template>

frontend/src/views/user/ProfileView.vue

@@ -2,12 +2,7 @@
   <AppLayout>
     <div
       data-testid="profile-shell"
-      class="mx-auto max-w-6xl space-y-6"
-    >
-      <div class="grid gap-6 xl:grid-cols-[minmax(0,1.35fr)_360px]">
-        <div
-          data-testid="profile-primary-column"
-          class="space-y-6"
+      class="mx-auto max-w-[950px] space-y-6"
     >
       <ProfileInfoCard
         :user="user"
@@ -18,12 +13,7 @@
         :wechat-open-enabled="wechatOAuthOpenEnabled"
         :wechat-mp-enabled="wechatOAuthMPEnabled"
       />
-        </div>
 
-        <aside
-          data-testid="profile-secondary-column"
-          class="space-y-6"
-        >
       <div
         v-if="contactInfo"
         class="card border-primary-200 bg-primary-50 p-6 dark:bg-primary-900/20"
@@ -53,8 +43,6 @@
       />
 
       <ProfileTotpCard />
-        </aside>
-      </div>
     </div>
   </AppLayout>
 </template>

frontend/src/views/user/__tests__/ProfileView.spec.ts

@@ -73,7 +73,7 @@ describe('ProfileView', () => {
     })
   })
 
-  it('renders the approved two-column profile shell without separate stat cards', async () => {
+  it('renders the simplified single-column profile shell without separate stat cards', async () => {
     const wrapper = mount(ProfileView, {
       global: {
         stubs: {
@@ -92,10 +92,8 @@ describe('ProfileView', () => {
 
     expect(wrapper.findAll('.stat-card')).toHaveLength(0)
     expect(wrapper.get('[data-testid="profile-shell"]').exists()).toBe(true)
-    expect(wrapper.get('[data-testid="profile-primary-column"]').exists()).toBe(true)
-    expect(wrapper.get('[data-testid="profile-secondary-column"]').exists()).toBe(true)
-    expect(wrapper.get('[data-testid="profile-primary-column"]').html()).toContain('profile-info-card')
-    expect(wrapper.get('[data-testid="profile-secondary-column"]').html()).toContain('profile-password-form')
-    expect(wrapper.get('[data-testid="profile-secondary-column"]').html()).toContain('profile-totp-card')
+    expect(wrapper.get('[data-testid="profile-shell"]').html()).toContain('profile-info-card')
+    expect(wrapper.get('[data-testid="profile-shell"]').html()).toContain('profile-password-form')
+    expect(wrapper.get('[data-testid="profile-shell"]').html()).toContain('profile-totp-card')
   })
 })