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

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

@@ -2,59 +2,47 @@
<AppLayout>
<div
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]">
<div
data-testid="profile-primary-column"
class="space-y-6"
>
<ProfileInfoCard
:user="user"
:linuxdo-enabled="linuxdoOAuthEnabled"
:oidc-enabled="oidcOAuthEnabled"
:oidc-provider-name="oidcOAuthProviderName"
:wechat-enabled="wechatOAuthEnabled"
:wechat-open-enabled="wechatOAuthOpenEnabled"
:wechat-mp-enabled="wechatOAuthMPEnabled"
/>
</div>
<ProfileInfoCard
:user="user"
:linuxdo-enabled="linuxdoOAuthEnabled"
:oidc-enabled="oidcOAuthEnabled"
:oidc-provider-name="oidcOAuthProviderName"
:wechat-enabled="wechatOAuthEnabled"
:wechat-open-enabled="wechatOAuthOpenEnabled"
:wechat-mp-enabled="wechatOAuthMPEnabled"
/>
<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"
>
<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
v-if="contactInfo"
class="card border-primary-200 bg-primary-50 p-6 dark:bg-primary-900/20"
>
<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>
<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 />
</aside>
<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>
<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>
</AppLayout>
</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, {
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')
})
})