oadmin/sub2api
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(profile): simplify profile page flow

Browse Source
This commit is contained in:
IanShaw027
2026-04-22 01:48:09 +08:00
parent 863258d782
commit 6d51834a95
3 changed files with 45 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/components/user/profile/ProfileInfoCard.vue
View File

@@ -98,7 +98,7 @@
</div> </div>
</section> </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"> <div data-testid="profile-main-column" class="space-y-6">
<section <section
data-testid="profile-basics-panel" data-testid="profile-basics-panel"
@@ -115,7 +115,7 @@
</div> </div>
</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"> <div class="rounded-3xl border border-gray-100 bg-gray-50/80 p-5 dark:border-dark-700 dark:bg-dark-900/30">
<ProfileAvatarCard <ProfileAvatarCard
:user="user" :user="user"
@@ -150,35 +150,7 @@
</section> </section>
</div> </div>
<aside data-testid="profile-side-column" class="space-y-6"> <div 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>
<section <section
v-if="sourceHints.length" v-if="sourceHints.length"
class="card border border-gray-100 bg-white/90 p-6 dark:border-dark-700 dark:bg-dark-900/50" 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>
</div> </div>
</section> </section>
</aside> </div>
</div> </div>
</div> </div>
</template> </template>

86
frontend/src/views/user/ProfileView.vue
View File

@@ -2,59 +2,47 @@
<AppLayout> <AppLayout>
<div <div
data-testid="profile-shell" data-testid="profile-shell"
class="mx-auto max-w-6xl space-y-6" class="mx-auto max-w-[950px] space-y-6"
> >
<div class="grid gap-6 xl:grid-cols-[minmax(0,1.35fr)_360px]"> <ProfileInfoCard
<div :user="user"
data-testid="profile-primary-column" :linuxdo-enabled="linuxdoOAuthEnabled"
class="space-y-6" :oidc-enabled="oidcOAuthEnabled"
> :oidc-provider-name="oidcOAuthProviderName"
<ProfileInfoCard :wechat-enabled="wechatOAuthEnabled"
:user="user" :wechat-open-enabled="wechatOAuthOpenEnabled"
:linuxdo-enabled="linuxdoOAuthEnabled" :wechat-mp-enabled="wechatOAuthMPEnabled"
:oidc-enabled="oidcOAuthEnabled" />
:oidc-provider-name="oidcOAuthProviderName"
:wechat-enabled="wechatOAuthEnabled"
:wechat-open-enabled="wechatOAuthOpenEnabled"
:wechat-mp-enabled="wechatOAuthMPEnabled"
/>
</div>
<aside <div
data-testid="profile-secondary-column" v-if="contactInfo"
class="space-y-6" class="card border-primary-200 bg-primary-50 p-6 dark:bg-primary-900/20"
> >
<div <div class="flex items-center gap-4">
v-if="contactInfo" <div class="rounded-xl bg-primary-100 p-3 text-primary-600">
class="card border-primary-200 bg-primary-50 p-6 dark:bg-primary-900/20" <Icon name="chat" size="lg" />
>
<div class="flex items-center gap-4">
<div class="rounded-xl bg-primary-100 p-3 text-primary-600">
<Icon name="chat" size="lg" />
</div>
<div>
<h3 class="font-semibold text-primary-800 dark:text-primary-200">
{{ t('common.contactSupport') }}
</h3>
<p class="text-sm font-medium">{{ contactInfo }}</p>
</div>
</div>
</div> </div>
<div>
<ProfilePasswordForm /> <h3 class="font-semibold text-primary-800 dark:text-primary-200">
{{ t('common.contactSupport') }}
<ProfileBalanceNotifyCard </h3>
v-if="user && balanceLowNotifyEnabled" <p class="text-sm font-medium">{{ contactInfo }}</p>
:enabled="user.balance_notify_enabled ?? true" </div>
:threshold="user.balance_notify_threshold" </div>
:extra-emails="user.balance_notify_extra_emails ?? []"
:system-default-threshold="systemDefaultThreshold"
:user-email="user.email"
/>
<ProfileTotpCard />
</aside>
</div> </div>
<ProfilePasswordForm />
<ProfileBalanceNotifyCard
v-if="user && balanceLowNotifyEnabled"
:enabled="user.balance_notify_enabled ?? true"
:threshold="user.balance_notify_threshold"
:extra-emails="user.balance_notify_extra_emails ?? []"
:system-default-threshold="systemDefaultThreshold"
:user-email="user.email"
/>
<ProfileTotpCard />
</div> </div>
</AppLayout> </AppLayout>
</template> </template>

10
frontend/src/views/user/__tests__/ProfileView.spec.ts
View File

@@ -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, { const wrapper = mount(ProfileView, {
global: { global: {
stubs: { stubs: {
@@ -92,10 +92,8 @@ describe('ProfileView', () => {
expect(wrapper.findAll('.stat-card')).toHaveLength(0) expect(wrapper.findAll('.stat-card')).toHaveLength(0)
expect(wrapper.get('[data-testid="profile-shell"]').exists()).toBe(true) 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-shell"]').html()).toContain('profile-info-card')
expect(wrapper.get('[data-testid="profile-secondary-column"]').exists()).toBe(true) expect(wrapper.get('[data-testid="profile-shell"]').html()).toContain('profile-password-form')
expect(wrapper.get('[data-testid="profile-primary-column"]').html()).toContain('profile-info-card') expect(wrapper.get('[data-testid="profile-shell"]').html()).toContain('profile-totp-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')
}) })
}) })