From 7309c02f0b9c8caacb4dae47a36edc16b0048e95 Mon Sep 17 00:00:00 2001
From: IanShaw027 <ianshaw027@gmail.com>
Date: Tue, 21 Apr 2026 17:56:15 +0800
Subject: [PATCH] refactor(profile): split avatar and bindings cards

---
 .../profile/ProfileAccountBindingsCard.vue    |  36 ++
 .../user/profile/ProfileAvatarCard.vue        | 280 ++++++++++++
 .../ProfileIdentityBindingsSection.vue        | 214 +++++----
 .../user/profile/ProfileInfoCard.vue          | 430 +-----------------
 .../__tests__/ProfileAvatarCard.spec.ts       | 214 +++++++++
 .../profile/__tests__/ProfileInfoCard.spec.ts | 257 +----------
 frontend/src/i18n/locales/en.ts               |   5 +-
 frontend/src/i18n/locales/zh.ts               |   5 +-
 frontend/src/views/user/ProfileView.vue       |   8 +-
 .../views/user/__tests__/ProfileView.spec.ts  | 101 ++++
 10 files changed, 801 insertions(+), 749 deletions(-)
 create mode 100644 frontend/src/components/user/profile/ProfileAccountBindingsCard.vue
 create mode 100644 frontend/src/components/user/profile/ProfileAvatarCard.vue
 create mode 100644 frontend/src/components/user/profile/__tests__/ProfileAvatarCard.spec.ts
 create mode 100644 frontend/src/views/user/__tests__/ProfileView.spec.ts

diff --git a/frontend/src/components/user/profile/ProfileAccountBindingsCard.vue b/frontend/src/components/user/profile/ProfileAccountBindingsCard.vue
new file mode 100644
index 00000000..f1cf54a9
--- /dev/null
+++ b/frontend/src/components/user/profile/ProfileAccountBindingsCard.vue
@@ -0,0 +1,36 @@
+<template>
+  <ProfileIdentityBindingsSection
+    :user="user"
+    :linuxdo-enabled="linuxdoEnabled"
+    :oidc-enabled="oidcEnabled"
+    :oidc-provider-name="oidcProviderName"
+    :wechat-enabled="wechatEnabled"
+    :wechat-open-enabled="wechatOpenEnabled"
+    :wechat-mp-enabled="wechatMpEnabled"
+  />
+</template>
+
+<script setup lang="ts">
+import ProfileIdentityBindingsSection from '@/components/user/profile/ProfileIdentityBindingsSection.vue'
+import type { User } from '@/types'
+
+withDefaults(
+  defineProps<{
+    user: User | null
+    linuxdoEnabled?: boolean
+    oidcEnabled?: boolean
+    oidcProviderName?: string
+    wechatEnabled?: boolean
+    wechatOpenEnabled?: boolean
+    wechatMpEnabled?: boolean
+  }>(),
+  {
+    linuxdoEnabled: false,
+    oidcEnabled: false,
+    oidcProviderName: 'OIDC',
+    wechatEnabled: false,
+    wechatOpenEnabled: undefined,
+    wechatMpEnabled: undefined
+  }
+)
+</script>
diff --git a/frontend/src/components/user/profile/ProfileAvatarCard.vue b/frontend/src/components/user/profile/ProfileAvatarCard.vue
new file mode 100644
index 00000000..357c0f27
--- /dev/null
+++ b/frontend/src/components/user/profile/ProfileAvatarCard.vue
@@ -0,0 +1,280 @@
+<template>
+  <div class="card">
+    <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+      <h2 class="text-lg font-medium text-gray-900 dark:text-white">
+        {{ t('profile.avatar.title') }}
+      </h2>
+      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+        {{ t('profile.avatar.description') }}
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-5 px-6 py-6 sm:flex-row sm:items-start">
+      <div
+        class="flex h-24 w-24 shrink-0 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 text-3xl font-bold text-white shadow-lg shadow-primary-500/20"
+      >
+        <img
+          v-if="avatarPreviewUrl"
+          :src="avatarPreviewUrl"
+          :alt="displayName"
+          class="h-full w-full object-cover"
+        >
+        <span v-else>{{ avatarInitial }}</span>
+      </div>
+
+      <div class="min-w-0 flex-1 space-y-4">
+        <div class="space-y-1">
+          <p class="text-sm font-medium text-gray-900 dark:text-white">
+            {{ displayName }}
+          </p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">
+            {{ t('profile.avatar.uploadHint') }}
+          </p>
+        </div>
+
+        <textarea
+          data-testid="profile-avatar-input"
+          v-model="avatarDraft"
+          rows="3"
+          class="input min-h-[88px]"
+          :placeholder="t('profile.avatar.inputPlaceholder')"
+        />
+
+        <div class="flex flex-wrap items-center gap-3">
+          <label class="btn btn-secondary btn-sm cursor-pointer">
+            <input
+              data-testid="profile-avatar-file-input"
+              type="file"
+              accept="image/*"
+              class="hidden"
+              @change="handleAvatarFileChange"
+            >
+            {{ t('profile.avatar.uploadAction') }}
+          </label>
+
+          <button
+            data-testid="profile-avatar-save"
+            type="button"
+            class="btn btn-primary btn-sm"
+            :disabled="avatarSaving"
+            @click="handleAvatarSave"
+          >
+            {{ t('common.save') }}
+          </button>
+
+          <button
+            data-testid="profile-avatar-delete"
+            type="button"
+            class="btn btn-secondary btn-sm"
+            :disabled="avatarSaving"
+            @click="handleAvatarDelete"
+          >
+            {{ t('common.delete') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { userAPI } from '@/api'
+import { useAppStore } from '@/stores/app'
+import { useAuthStore } from '@/stores/auth'
+import type { User } from '@/types'
+import { extractApiErrorMessage } from '@/utils/apiError'
+
+const props = defineProps<{
+  user: User | null
+}>()
+
+const { t } = useI18n()
+const authStore = useAuthStore()
+const appStore = useAppStore()
+
+const targetAvatarUploadBytes = 20 * 1024
+const avatarScaleSteps = [1, 0.92, 0.84, 0.76, 0.68, 0.6, 0.52, 0.44, 0.36]
+const avatarQualitySteps = [0.92, 0.84, 0.76, 0.68, 0.6, 0.52, 0.44, 0.36]
+const avatarDraft = ref(props.user?.avatar_url?.trim() || '')
+const avatarSaving = ref(false)
+
+const displayName = computed(() => props.user?.username?.trim() || props.user?.email?.trim() || 'User')
+const avatarInitial = computed(() => displayName.value.charAt(0).toUpperCase() || 'U')
+const avatarPreviewUrl = computed(() => avatarDraft.value.trim() || props.user?.avatar_url?.trim() || '')
+
+watch(
+  () => props.user?.avatar_url,
+  (value) => {
+    avatarDraft.value = value?.trim() || ''
+  }
+)
+
+function validateAvatarInput(value: string): string | null {
+  const normalized = value.trim()
+  if (!normalized) {
+    return null
+  }
+
+  if (normalized.startsWith('data:')) {
+    if (!/^data:image\/[a-zA-Z0-9.+-]+;base64,/i.test(normalized)) {
+      appStore.showError(t('profile.avatar.invalidValue'))
+      return null
+    }
+    return normalized
+  }
+
+  try {
+    const parsed = new URL(normalized)
+    if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
+      return normalized
+    }
+  } catch {
+    // Invalid URL is handled below.
+  }
+
+  appStore.showError(t('profile.avatar.invalidValue'))
+  return null
+}
+
+function readFileAsDataURL(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(typeof reader.result === 'string' ? reader.result : '')
+    reader.onerror = () => reject(reader.error ?? new Error('avatar_read_failed'))
+    reader.readAsDataURL(file)
+  })
+}
+
+function loadImage(dataURL: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const image = new Image()
+    image.onload = () => resolve(image)
+    image.onerror = () => reject(new Error(t('profile.avatar.readFailed')))
+    image.src = dataURL
+  })
+}
+
+function canvasToBlob(canvas: HTMLCanvasElement, type: string, quality: number): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (!blob) {
+        reject(new Error(t('profile.avatar.compressFailed')))
+        return
+      }
+      resolve(blob)
+    }, type, quality)
+  })
+}
+
+async function compressAvatarFile(file: File): Promise<File> {
+  const sourceDataURL = await readFileAsDataURL(file)
+  const image = await loadImage(sourceDataURL)
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+  if (!ctx) {
+    throw new Error(t('profile.avatar.compressFailed'))
+  }
+
+  for (const scale of avatarScaleSteps) {
+    const width = Math.max(1, Math.round(image.naturalWidth * scale))
+    const height = Math.max(1, Math.round(image.naturalHeight * scale))
+    canvas.width = width
+    canvas.height = height
+    ctx.clearRect(0, 0, width, height)
+    ctx.drawImage(image, 0, 0, width, height)
+
+    for (const quality of avatarQualitySteps) {
+      const blob = await canvasToBlob(canvas, 'image/webp', quality)
+      if (blob.size <= targetAvatarUploadBytes) {
+        const fileName = file.name.replace(/\.[^.]+$/, '') || 'avatar'
+        return new File([blob], `${fileName}.webp`, { type: 'image/webp' })
+      }
+    }
+  }
+
+  throw new Error(t('profile.avatar.compressTooLarge'))
+}
+
+async function prepareAvatarUpload(file: File): Promise<File> {
+  if (!file.type.startsWith('image/')) {
+    throw new Error(t('profile.avatar.invalidType'))
+  }
+  if (file.type === 'image/gif') {
+    if (file.size > targetAvatarUploadBytes) {
+      throw new Error(t('profile.avatar.gifTooLarge'))
+    }
+    return file
+  }
+  if (file.size <= targetAvatarUploadBytes) {
+    return file
+  }
+  return compressAvatarFile(file)
+}
+
+async function handleAvatarFileChange(event: Event) {
+  const input = event.target as HTMLInputElement | null
+  const file = input?.files?.[0]
+  if (input) {
+    input.value = ''
+  }
+  if (!file) {
+    return
+  }
+
+  try {
+    const preparedFile = await prepareAvatarUpload(file)
+    const dataURL = await readFileAsDataURL(preparedFile)
+    const normalized = validateAvatarInput(dataURL)
+    if (!normalized) {
+      return
+    }
+    avatarDraft.value = normalized
+  } catch (error: unknown) {
+    appStore.showError(extractApiErrorMessage(error, t('common.error')))
+  }
+}
+
+async function handleAvatarSave() {
+  const normalized = validateAvatarInput(avatarDraft.value)
+  if (!normalized) {
+    return
+  }
+
+  avatarSaving.value = true
+  try {
+    const updated = await userAPI.updateProfile({ avatar_url: normalized })
+    authStore.user = updated
+    avatarDraft.value = updated.avatar_url?.trim() || ''
+    appStore.showSuccess(t('profile.avatar.saveSuccess'))
+  } catch (error: unknown) {
+    appStore.showError(extractApiErrorMessage(error, t('common.error')))
+  } finally {
+    avatarSaving.value = false
+  }
+}
+
+async function handleAvatarDelete() {
+  if (avatarSaving.value) {
+    return
+  }
+  if (!avatarDraft.value.trim() && !props.user?.avatar_url?.trim()) {
+    appStore.showError(t('profile.avatar.emptyDeleteHint'))
+    return
+  }
+
+  avatarSaving.value = true
+  try {
+    const updated = await userAPI.updateProfile({ avatar_url: '' })
+    authStore.user = updated
+    avatarDraft.value = ''
+    appStore.showSuccess(t('profile.avatar.deleteSuccess'))
+  } catch (error: unknown) {
+    appStore.showError(extractApiErrorMessage(error, t('common.error')))
+  } finally {
+    avatarSaving.value = false
+  }
+}
+</script>
+
diff --git a/frontend/src/components/user/profile/ProfileIdentityBindingsSection.vue b/frontend/src/components/user/profile/ProfileIdentityBindingsSection.vue
index ee582a60..975b0fdb 100644
--- a/frontend/src/components/user/profile/ProfileIdentityBindingsSection.vue
+++ b/frontend/src/components/user/profile/ProfileIdentityBindingsSection.vue
@@ -1,103 +1,125 @@
 <template>
-  <div class="rounded-2xl border border-gray-100 bg-gray-50/80 p-4 dark:border-dark-700 dark:bg-dark-900/30">
-    <div>
-      <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
+  <div class="card overflow-hidden">
+    <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+      <h2 class="text-lg font-medium text-gray-900 dark:text-white">
         {{ t('profile.authBindings.title') }}
-      </h3>
-      <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+      </h2>
+      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
         {{ t('profile.authBindings.description') }}
       </p>
     </div>
 
-    <div class="mt-4 space-y-2">
+    <div class="divide-y divide-gray-100 dark:divide-dark-700">
       <div
         v-for="item in providerItems"
         :key="item.provider"
-        class="rounded-xl bg-white/80 px-3 py-3 dark:bg-dark-800/70"
+        class="px-6 py-5"
       >
-        <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
-          <div class="min-w-0 flex-1">
-            <div class="flex items-center gap-2">
-              <div class="text-sm font-medium text-gray-900 dark:text-white">
-                {{ item.label }}
-              </div>
-              <span
-                :data-testid="`profile-binding-${item.provider}-status`"
-                :class="['badge', item.bound ? 'badge-success' : 'badge-gray']"
-              >
-                {{
-                  item.bound
-                    ? t('profile.authBindings.status.bound')
-                    : t('profile.authBindings.status.notBound')
-                }}
-              </span>
+        <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+          <div class="flex min-w-0 flex-1 items-start gap-4">
+            <div
+              :class="providerIconClass(item.provider)"
+              class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-sm font-semibold"
+            >
+              <Icon
+                v-if="item.provider === 'email'"
+                name="mail"
+                size="sm"
+                class="text-current"
+              />
+              <span v-else>{{ providerInitial(item.provider) }}</span>
             </div>
 
-            <div
-              v-if="item.provider === 'email'"
-              class="mt-3 grid gap-2 sm:grid-cols-[minmax(0,1.4fr)_auto]"
-            >
-              <input
-                v-model.trim="emailBindingForm.email"
-                data-testid="profile-binding-email-input"
-                type="email"
-                class="input"
-                :placeholder="t('profile.authBindings.emailPlaceholder')"
-                :disabled="isSendingEmailCode || isBindingEmail"
-              />
-              <button
-                data-testid="profile-binding-email-send-code"
-                type="button"
-                class="btn btn-secondary btn-sm"
-                :disabled="isSendingEmailCode || isBindingEmail"
-                @click="sendEmailCode"
+            <div class="min-w-0 flex-1">
+              <div class="flex flex-wrap items-center gap-2">
+                <h3 class="font-medium text-gray-900 dark:text-white">
+                  {{ item.label }}
+                </h3>
+                <span
+                  :data-testid="`profile-binding-${item.provider}-status`"
+                  :class="['badge', item.bound ? 'badge-success' : 'badge-gray']"
+                >
+                  {{
+                    item.bound
+                      ? t('profile.authBindings.status.bound')
+                      : t('profile.authBindings.status.notBound')
+                  }}
+                </span>
+              </div>
+
+              <p
+                v-if="providerSummary(item.provider)"
+                class="mt-1 text-sm text-gray-600 dark:text-gray-300"
               >
-                {{
-                  isSendingEmailCode
-                    ? t('common.loading')
-                    : t('profile.authBindings.sendCodeAction')
-                }}
-              </button>
-              <input
-                v-model.trim="emailBindingForm.verifyCode"
-                data-testid="profile-binding-email-code-input"
-                type="text"
-                inputmode="numeric"
-                maxlength="6"
-                class="input"
-                :placeholder="t('profile.authBindings.codePlaceholder')"
-                :disabled="isBindingEmail"
-              />
-              <input
-                v-model="emailBindingForm.password"
-                data-testid="profile-binding-email-password-input"
-                type="password"
-                class="input"
-                :placeholder="emailPasswordPlaceholder"
-                :disabled="isBindingEmail"
-              />
-              <button
-                data-testid="profile-binding-email-submit"
-                type="button"
-                class="btn btn-primary btn-sm sm:col-span-2"
-                :disabled="isBindingEmail"
-                @click="bindEmail"
+                {{ providerSummary(item.provider) }}
+              </p>
+
+              <div
+                v-if="item.provider === 'email'"
+                class="mt-4 grid gap-2 sm:grid-cols-[minmax(0,1.4fr)_auto]"
               >
-                {{
-                  isBindingEmail
-                    ? t('common.loading')
-                    : emailSubmitActionLabel
-                }}
-              </button>
+                <input
+                  v-model.trim="emailBindingForm.email"
+                  data-testid="profile-binding-email-input"
+                  type="email"
+                  class="input"
+                  :placeholder="t('profile.authBindings.emailPlaceholder')"
+                  :disabled="isSendingEmailCode || isBindingEmail"
+                />
+                <button
+                  data-testid="profile-binding-email-send-code"
+                  type="button"
+                  class="btn btn-secondary btn-sm"
+                  :disabled="isSendingEmailCode || isBindingEmail"
+                  @click="sendEmailCode"
+                >
+                  {{
+                    isSendingEmailCode
+                      ? t('common.loading')
+                      : t('profile.authBindings.sendCodeAction')
+                  }}
+                </button>
+                <input
+                  v-model.trim="emailBindingForm.verifyCode"
+                  data-testid="profile-binding-email-code-input"
+                  type="text"
+                  inputmode="numeric"
+                  maxlength="6"
+                  class="input"
+                  :placeholder="t('profile.authBindings.codePlaceholder')"
+                  :disabled="isBindingEmail"
+                />
+                <input
+                  v-model="emailBindingForm.password"
+                  data-testid="profile-binding-email-password-input"
+                  type="password"
+                  class="input"
+                  :placeholder="emailPasswordPlaceholder"
+                  :disabled="isBindingEmail"
+                />
+                <button
+                  data-testid="profile-binding-email-submit"
+                  type="button"
+                  class="btn btn-primary btn-sm sm:col-span-2"
+                  :disabled="isBindingEmail"
+                  @click="bindEmail"
+                >
+                  {{
+                    isBindingEmail
+                      ? t('common.loading')
+                      : emailSubmitActionLabel
+                  }}
+                </button>
+              </div>
             </div>
           </div>
 
-          <div class="flex shrink-0 items-center gap-2">
+          <div class="flex shrink-0 items-center gap-3">
             <button
               v-if="item.canBind"
               :data-testid="`profile-binding-${item.provider}-action`"
               type="button"
-              class="btn btn-secondary btn-sm"
+              class="btn btn-primary btn-sm"
               @click="startBinding(item.provider)"
             >
               {{ t('profile.authBindings.bindAction', { providerName: item.label }) }}
@@ -119,6 +141,7 @@ import {
   type WeChatOAuthPublicSettings,
 } from '@/api/auth'
 import { bindEmailIdentity, sendEmailBindingCode, startOAuthBinding } from '@/api/user'
+import Icon from '@/components/icons/Icon.vue'
 import { useAppStore, useAuthStore } from '@/stores'
 import type { User, UserAuthBindingStatus, UserAuthProvider } from '@/types'
 
@@ -265,6 +288,39 @@ const providerItems = computed(() => [
   },
 ])
 
+function providerInitial(provider: UserAuthProvider): string {
+  if (provider === 'linuxdo') {
+    return 'L'
+  }
+  if (provider === 'wechat') {
+    return 'W'
+  }
+  if (provider === 'oidc') {
+    return 'O'
+  }
+  return 'E'
+}
+
+function providerIconClass(provider: UserAuthProvider): string {
+  if (provider === 'linuxdo') {
+    return 'bg-orange-100 text-orange-600 dark:bg-orange-900/20 dark:text-orange-300'
+  }
+  if (provider === 'wechat') {
+    return 'bg-green-100 text-green-600 dark:bg-green-900/20 dark:text-green-300'
+  }
+  if (provider === 'oidc') {
+    return 'bg-sky-100 text-sky-600 dark:bg-sky-900/20 dark:text-sky-300'
+  }
+  return 'bg-primary-100 text-primary-600 dark:bg-primary-900/20 dark:text-primary-300'
+}
+
+function providerSummary(provider: UserAuthProvider): string {
+  if (provider === 'email') {
+    return currentUser.value?.email || ''
+  }
+  return ''
+}
+
 function startBinding(provider: UserAuthProvider): void {
   if (provider === 'email') {
     return
diff --git a/frontend/src/components/user/profile/ProfileInfoCard.vue b/frontend/src/components/user/profile/ProfileInfoCard.vue
index dd7ae0ea..9c2c5ff6 100644
--- a/frontend/src/components/user/profile/ProfileInfoCard.vue
+++ b/frontend/src/components/user/profile/ProfileInfoCard.vue
@@ -17,8 +17,11 @@
         </div>
         <div class="min-w-0 flex-1">
           <h2 class="truncate text-lg font-semibold text-gray-900 dark:text-white">
-            {{ user?.email }}
+            {{ displayName }}
           </h2>
+          <p class="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">
+            {{ user?.email }}
+          </p>
           <div class="mt-1 flex items-center gap-2">
             <span :class="['badge', user?.role === 'admin' ? 'badge-primary' : 'badge-gray']">
               {{ user?.role === 'admin' ? t('profile.administrator') : t('profile.user') }}
@@ -47,438 +50,23 @@
         </div>
       </div>
 
-      <div
-        v-if="sourceHints.length"
-        class="mt-4 grid gap-2 rounded-2xl border border-gray-100 bg-gray-50/80 p-3 text-xs text-gray-500 dark:border-dark-700 dark:bg-dark-900/30 dark:text-gray-400"
-      >
-        <div
-          v-for="hint in sourceHints"
-          :key="hint.key"
-          class="flex items-start gap-2"
-        >
-          <Icon name="link" size="sm" class="mt-0.5 text-gray-400 dark:text-gray-500" />
-          <span>{{ hint.text }}</span>
-        </div>
-      </div>
-
-      <div
-        class="mt-4 rounded-2xl border border-gray-100 bg-white/90 p-4 dark:border-dark-700 dark:bg-dark-900/30"
-      >
-        <div class="flex flex-wrap items-start justify-between gap-3">
-          <div>
-            <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
-              {{ t('profile.avatar.title') }}
-            </h3>
-            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-              {{ t('profile.avatar.description') }}
-            </p>
-          </div>
-          <button
-            data-testid="profile-avatar-delete"
-            type="button"
-            class="btn btn-secondary btn-sm"
-            :disabled="avatarSaving"
-            @click="handleAvatarDelete"
-          >
-            {{ t('common.delete') }}
-          </button>
-        </div>
-
-        <div class="mt-3 space-y-3">
-          <label
-            for="profile-avatar-input"
-            class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400"
-          >
-            {{ t('profile.avatar.inputLabel') }}
-          </label>
-          <textarea
-            id="profile-avatar-input"
-            data-testid="profile-avatar-input"
-            v-model="avatarDraft"
-            rows="3"
-            class="input min-h-[88px]"
-            :placeholder="t('profile.avatar.inputPlaceholder')"
-          />
-          <div class="flex flex-wrap items-center gap-2">
-            <label class="btn btn-secondary btn-sm cursor-pointer">
-              <input
-                data-testid="profile-avatar-file-input"
-                type="file"
-                accept="image/*"
-                class="hidden"
-                @change="handleAvatarFileChange"
-              >
-              {{ t('profile.avatar.uploadAction') }}
-            </label>
-            <button
-              data-testid="profile-avatar-save"
-              type="button"
-              class="btn btn-primary btn-sm"
-              :disabled="avatarSaving"
-              @click="handleAvatarSave"
-            >
-              {{ t('common.save') }}
-            </button>
-            <span class="text-xs text-gray-400 dark:text-gray-500">
-              {{ t('profile.avatar.uploadHint') }}
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <ProfileIdentityBindingsSection
-        class="mt-4"
-        :user="user"
-        :linuxdo-enabled="linuxdoEnabled"
-        :oidc-enabled="oidcEnabled"
-        :oidc-provider-name="oidcProviderName"
-        :wechat-enabled="wechatEnabled"
-        :wechat-open-enabled="wechatOpenEnabled"
-        :wechat-mp-enabled="wechatMpEnabled"
-      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { userAPI } from '@/api'
 import Icon from '@/components/icons/Icon.vue'
-import ProfileIdentityBindingsSection from '@/components/user/profile/ProfileIdentityBindingsSection.vue'
-import { useAppStore } from '@/stores/app'
-import { useAuthStore } from '@/stores/auth'
-import type { User, UserAuthProvider, UserProfileSourceContext } from '@/types'
-import { extractApiErrorMessage } from '@/utils/apiError'
+import type { User } from '@/types'
 
-const props = withDefaults(
-  defineProps<{
-    user: User | null
-    linuxdoEnabled?: boolean
-    oidcEnabled?: boolean
-    oidcProviderName?: string
-    wechatEnabled?: boolean
-    wechatOpenEnabled?: boolean
-    wechatMpEnabled?: boolean
-  }>(),
-  {
-    linuxdoEnabled: false,
-    oidcEnabled: false,
-    oidcProviderName: 'OIDC',
-    wechatEnabled: false,
-    wechatOpenEnabled: undefined,
-    wechatMpEnabled: undefined,
-  }
-)
+const props = defineProps<{
+  user: User | null
+}>()
 
 const { t } = useI18n()
-const authStore = useAuthStore()
-const appStore = useAppStore()
-
-const maxAvatarBytes = 100 * 1024
-const targetAvatarUploadBytes = 20 * 1024
-const avatarScaleSteps = [1, 0.92, 0.84, 0.76, 0.68, 0.6, 0.52, 0.44, 0.36]
-const avatarQualitySteps = [0.92, 0.84, 0.76, 0.68, 0.6, 0.52, 0.44, 0.36]
-const avatarDraft = ref(props.user?.avatar_url?.trim() || '')
-const avatarSaving = ref(false)
-
-const providerLabels = computed<Record<UserAuthProvider, string>>(() => ({
-  email: t('profile.authBindings.providers.email'),
-  linuxdo: t('profile.authBindings.providers.linuxdo'),
-  oidc: t('profile.authBindings.providers.oidc', { providerName: props.oidcProviderName }),
-  wechat: t('profile.authBindings.providers.wechat'),
-}))
 
 const avatarUrl = computed(() => props.user?.avatar_url?.trim() || '')
 const displayName = computed(() => props.user?.username?.trim() || props.user?.email?.trim() || 'User')
 const avatarInitial = computed(() => displayName.value.charAt(0).toUpperCase() || 'U')
-
-watch(
-  () => props.user?.avatar_url,
-  (value) => {
-    avatarDraft.value = value?.trim() || ''
-  }
-)
-
-function normalizeProvider(value: string): UserAuthProvider | null {
-  const normalized = value.trim().toLowerCase()
-  if (normalized === 'email' || normalized === 'linuxdo' || normalized === 'wechat') {
-    return normalized
-  }
-  if (normalized === 'oidc' || normalized.startsWith('oidc:') || normalized.startsWith('oidc/')) {
-    return 'oidc'
-  }
-  return null
-}
-
-function readObjectString(source: Record<string, unknown>, ...keys: string[]): string {
-  for (const key of keys) {
-    const value = source[key]
-    if (typeof value === 'string' && value.trim()) {
-      return value.trim()
-    }
-  }
-  return ''
-}
-
-function resolveThirdPartySource(
-  rawSource: string | UserProfileSourceContext | null | undefined
-): { provider: UserAuthProvider; label: string } | null {
-  if (!rawSource) {
-    return null
-  }
-
-  if (typeof rawSource === 'string') {
-    const provider = normalizeProvider(rawSource)
-    if (!provider || provider === 'email') {
-      return null
-    }
-    return {
-      provider,
-      label: providerLabels.value[provider],
-    }
-  }
-
-  const sourceRecord = rawSource as Record<string, unknown>
-  const provider = normalizeProvider(
-    readObjectString(sourceRecord, 'provider', 'source', 'provider_type', 'auth_provider')
-  )
-  if (!provider || provider === 'email') {
-    return null
-  }
-
-  const explicitLabel = readObjectString(
-    sourceRecord,
-    'provider_label',
-    'label',
-    'provider_name',
-    'providerName'
-  )
-
-  return {
-    provider,
-    label: explicitLabel || providerLabels.value[provider],
-  }
-}
-
-const sourceHints = computed(() => {
-  const currentUser = props.user
-  if (!currentUser) {
-    return []
-  }
-
-  const hints: Array<{ key: string; text: string }> = []
-  const avatarSource = resolveThirdPartySource(
-    currentUser.profile_sources?.avatar ?? currentUser.avatar_source
-  )
-  const usernameSource = resolveThirdPartySource(
-    currentUser.profile_sources?.username ??
-      currentUser.profile_sources?.display_name ??
-      currentUser.profile_sources?.nickname ??
-      currentUser.display_name_source ??
-      currentUser.username_source ??
-      currentUser.nickname_source
-  )
-
-  if (avatarSource) {
-    hints.push({
-      key: 'avatar',
-      text: t('profile.authBindings.source.avatar', { providerName: avatarSource.label }),
-    })
-  }
-
-  if (usernameSource) {
-    hints.push({
-      key: 'username',
-      text: t('profile.authBindings.source.username', { providerName: usernameSource.label }),
-    })
-  }
-
-  return hints
-})
-
-function estimateDataURLByteSize(value: string): number {
-  const [, encoded = ''] = value.split(',', 2)
-  const sanitized = encoded.replace(/\s+/g, '')
-  const padding = sanitized.endsWith('==') ? 2 : sanitized.endsWith('=') ? 1 : 0
-  return Math.max(0, Math.floor((sanitized.length * 3) / 4) - padding)
-}
-
-function validateAvatarInput(value: string): string | null {
-  const normalized = value.trim()
-  if (!normalized) {
-    return null
-  }
-
-  if (normalized.startsWith('data:')) {
-    if (!/^data:image\/[a-zA-Z0-9.+-]+;base64,/i.test(normalized)) {
-      appStore.showError(t('profile.avatar.invalidValue'))
-      return null
-    }
-    if (estimateDataURLByteSize(normalized) > maxAvatarBytes) {
-      appStore.showError(t('profile.avatar.fileTooLarge'))
-      return null
-    }
-    return normalized
-  }
-
-  try {
-    const parsed = new URL(normalized)
-    if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
-      return normalized
-    }
-  } catch {
-    // Invalid URL is handled below.
-  }
-
-  appStore.showError(t('profile.avatar.invalidValue'))
-  return null
-}
-
-function readFileAsDataURL(file: File): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onload = () => resolve(typeof reader.result === 'string' ? reader.result : '')
-    reader.onerror = () => reject(reader.error ?? new Error('avatar_read_failed'))
-    reader.readAsDataURL(file)
-  })
-}
-
-function loadImage(dataURL: string): Promise<HTMLImageElement> {
-  return new Promise((resolve, reject) => {
-    const image = new Image()
-    image.onload = () => resolve(image)
-    image.onerror = () => reject(new Error(t('profile.avatar.readFailed')))
-    image.src = dataURL
-  })
-}
-
-function canvasToBlob(canvas: HTMLCanvasElement, type: string, quality: number): Promise<Blob> {
-  return new Promise((resolve, reject) => {
-    canvas.toBlob((blob) => {
-      if (!blob) {
-        reject(new Error(t('profile.avatar.compressFailed')))
-        return
-      }
-      resolve(blob)
-    }, type, quality)
-  })
-}
-
-async function compressAvatarFile(file: File): Promise<File> {
-  const sourceDataURL = await readFileAsDataURL(file)
-  const image = await loadImage(sourceDataURL)
-  const canvas = document.createElement('canvas')
-  const ctx = canvas.getContext('2d')
-  if (!ctx) {
-    throw new Error(t('profile.avatar.compressFailed'))
-  }
-
-  for (const scale of avatarScaleSteps) {
-    const width = Math.max(1, Math.round(image.naturalWidth * scale))
-    const height = Math.max(1, Math.round(image.naturalHeight * scale))
-    canvas.width = width
-    canvas.height = height
-    ctx.clearRect(0, 0, width, height)
-    ctx.drawImage(image, 0, 0, width, height)
-
-    for (const quality of avatarQualitySteps) {
-      const blob = await canvasToBlob(canvas, 'image/webp', quality)
-      if (blob.size <= targetAvatarUploadBytes) {
-        const fileName = file.name.replace(/\.[^.]+$/, '') || 'avatar'
-        return new File([blob], `${fileName}.webp`, { type: 'image/webp' })
-      }
-    }
-  }
-
-  throw new Error(t('profile.avatar.compressTooLarge'))
-}
-
-async function prepareAvatarUpload(file: File): Promise<File> {
-  if (!file.type.startsWith('image/')) {
-    throw new Error(t('profile.avatar.invalidType'))
-  }
-  if (file.type === 'image/gif') {
-    if (file.size > targetAvatarUploadBytes) {
-      throw new Error(t('profile.avatar.gifTooLarge'))
-    }
-    return file
-  }
-  if (file.size <= targetAvatarUploadBytes) {
-    return file
-  }
-  return compressAvatarFile(file)
-}
-
-async function handleAvatarFileChange(event: Event) {
-  const input = event.target as HTMLInputElement | null
-  const file = input?.files?.[0]
-  if (input) {
-    input.value = ''
-  }
-  if (!file) {
-    return
-  }
-  if (!file.type.startsWith('image/')) {
-    appStore.showError(t('profile.avatar.invalidType'))
-    return
-  }
-  if (file.size > maxAvatarBytes) {
-    appStore.showError(t('profile.avatar.fileTooLarge'))
-    return
-  }
-
-  try {
-    const preparedFile = await prepareAvatarUpload(file)
-    const dataURL = await readFileAsDataURL(preparedFile)
-    const normalized = validateAvatarInput(dataURL)
-    if (!normalized) {
-      return
-    }
-    avatarDraft.value = normalized
-  } catch (error: unknown) {
-    appStore.showError(extractApiErrorMessage(error, t('common.error')))
-  }
-}
-
-async function handleAvatarSave() {
-  const normalized = validateAvatarInput(avatarDraft.value)
-  if (!normalized) {
-    return
-  }
-
-  avatarSaving.value = true
-  try {
-    const updated = await userAPI.updateProfile({ avatar_url: normalized })
-    authStore.user = updated
-    avatarDraft.value = updated.avatar_url?.trim() || ''
-    appStore.showSuccess(t('profile.avatar.saveSuccess'))
-  } catch (error: unknown) {
-    appStore.showError(extractApiErrorMessage(error, t('common.error')))
-  } finally {
-    avatarSaving.value = false
-  }
-}
-
-async function handleAvatarDelete() {
-  if (avatarSaving.value) {
-    return
-  }
-  if (!avatarDraft.value.trim() && !props.user?.avatar_url?.trim()) {
-    appStore.showError(t('profile.avatar.emptyDeleteHint'))
-    return
-  }
-
-  avatarSaving.value = true
-  try {
-    const updated = await userAPI.updateProfile({ avatar_url: '' })
-    authStore.user = updated
-    avatarDraft.value = ''
-    appStore.showSuccess(t('profile.avatar.deleteSuccess'))
-  } catch (error: unknown) {
-    appStore.showError(extractApiErrorMessage(error, t('common.error')))
-  } finally {
-    avatarSaving.value = false
-  }
-}
 </script>
diff --git a/frontend/src/components/user/profile/__tests__/ProfileAvatarCard.spec.ts b/frontend/src/components/user/profile/__tests__/ProfileAvatarCard.spec.ts
new file mode 100644
index 00000000..e5f57d69
--- /dev/null
+++ b/frontend/src/components/user/profile/__tests__/ProfileAvatarCard.spec.ts
@@ -0,0 +1,214 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import ProfileAvatarCard from '@/components/user/profile/ProfileAvatarCard.vue'
+import type { User } from '@/types'
+
+const {
+  updateProfileMock,
+  showSuccessMock,
+  showErrorMock,
+  authStoreState
+} = vi.hoisted(() => ({
+  updateProfileMock: vi.fn(),
+  showSuccessMock: vi.fn(),
+  showErrorMock: vi.fn(),
+  authStoreState: {
+    user: null as User | null
+  }
+}))
+
+vi.mock('@/api', () => ({
+  userAPI: {
+    updateProfile: updateProfileMock
+  }
+}))
+
+vi.mock('@/stores/auth', () => ({
+  useAuthStore: () => authStoreState
+}))
+
+vi.mock('@/stores/app', () => ({
+  useAppStore: () => ({
+    showSuccess: showSuccessMock,
+    showError: showErrorMock
+  })
+}))
+
+vi.mock('@/utils/apiError', () => ({
+  extractApiErrorMessage: (error: unknown) => (error as Error).message || 'request failed'
+}))
+
+vi.mock('vue-i18n', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('vue-i18n')>()
+  return {
+    ...actual,
+    useI18n: () => ({
+      t: (key: string, params?: Record<string, string>) => {
+        if (key === 'profile.avatar.title') return 'Profile avatar'
+        if (key === 'profile.avatar.description') return 'Upload and manage your avatar'
+        if (key === 'profile.avatar.uploadAction') return 'Upload image'
+        if (key === 'profile.avatar.uploadHint') return 'Uploaded images are compressed to 20KB when possible'
+        if (key === 'profile.avatar.saveSuccess') return 'Avatar updated'
+        if (key === 'profile.avatar.deleteSuccess') return 'Avatar removed'
+        if (key === 'profile.avatar.invalidType') return 'Please choose an image file'
+        if (key === 'profile.avatar.gifTooLarge') return 'GIF avatars must already be 20KB or smaller'
+        if (key === 'profile.avatar.compressTooLarge') return 'Unable to compress this image below 20KB'
+        if (key === 'profile.avatar.compressFailed') return 'Failed to compress the selected image'
+        if (key === 'profile.avatar.readFailed') return 'Failed to read the selected image'
+        if (key === 'common.save') return 'Save'
+        if (key === 'common.delete') return 'Delete'
+        if (key === 'profile.avatar.compressedReady') return `Compressed from ${params?.from} to ${params?.to}`
+        if (key === 'profile.avatar.sizeReady') return `Ready: ${params?.size}`
+        return key
+      }
+    })
+  }
+})
+
+function createUser(overrides: Partial<User> = {}): User {
+  return {
+    id: 5,
+    username: 'alice',
+    email: 'alice@example.com',
+    avatar_url: null,
+    role: 'user',
+    balance: 10,
+    concurrency: 2,
+    status: 'active',
+    allowed_groups: null,
+    balance_notify_enabled: true,
+    balance_notify_threshold: null,
+    balance_notify_extra_emails: [],
+    created_at: '2026-04-20T00:00:00Z',
+    updated_at: '2026-04-20T00:00:00Z',
+    ...overrides
+  }
+}
+
+async function flushAsyncWork(): Promise<void> {
+  await Promise.resolve()
+  await Promise.resolve()
+}
+
+const originalFileReader = globalThis.FileReader
+const originalImage = globalThis.Image
+const originalCreateElement = document.createElement.bind(document)
+
+function installAvatarCompressionMocks(blobSize = 8 * 1024) {
+  class MockFileReader {
+    result: string | ArrayBuffer | null = null
+    onload: ((this: FileReader, ev: ProgressEvent<FileReader>) => any) | null = null
+    onerror: ((this: FileReader, ev: ProgressEvent<FileReader>) => any) | null = null
+    error: DOMException | null = null
+
+    readAsDataURL(blob: Blob) {
+      if (blob.type === 'image/webp') {
+        this.result = 'data:image/webp;base64,' + Buffer.from('compressed-avatar').toString('base64')
+      } else {
+        this.result = 'data:image/png;base64,' + Buffer.from('original-avatar').toString('base64')
+      }
+      this.onload?.call(this as unknown as FileReader, new ProgressEvent('load'))
+    }
+  }
+
+  class MockImage {
+    naturalWidth = 1200
+    naturalHeight = 1200
+    onload: (() => void) | null = null
+    onerror: (() => void) | null = null
+
+    set src(_value: string) {
+      this.onload?.()
+    }
+  }
+
+  globalThis.FileReader = MockFileReader as unknown as typeof FileReader
+  globalThis.Image = MockImage as unknown as typeof Image
+  vi.spyOn(document, 'createElement').mockImplementation(((tagName: string, options?: ElementCreationOptions) => {
+    if (tagName === 'canvas') {
+      return {
+        width: 0,
+        height: 0,
+        getContext: () => ({
+          clearRect: vi.fn(),
+          drawImage: vi.fn()
+        }),
+        toBlob: (callback: BlobCallback) => {
+          callback(new Blob([new Uint8Array(blobSize)], { type: 'image/webp' }))
+        }
+      } as unknown as HTMLCanvasElement
+    }
+    return originalCreateElement(tagName, options)
+  }) as typeof document.createElement)
+}
+
+describe('ProfileAvatarCard', () => {
+  beforeEach(() => {
+    updateProfileMock.mockReset()
+    showSuccessMock.mockReset()
+    showErrorMock.mockReset()
+    authStoreState.user = null
+  })
+
+  afterEach(() => {
+    globalThis.FileReader = originalFileReader
+    globalThis.Image = originalImage
+    vi.restoreAllMocks()
+  })
+
+  it('compresses an uploaded image that exceeds the 20KB target before saving', async () => {
+    installAvatarCompressionMocks()
+    const updatedUser = createUser({ avatar_url: 'data:image/webp;base64,Y29tcHJlc3NlZC1hdmF0YXI=' })
+    updateProfileMock.mockResolvedValue(updatedUser)
+    authStoreState.user = createUser()
+
+    const wrapper = mount(ProfileAvatarCard, {
+      props: {
+        user: authStoreState.user
+      },
+      global: {
+        stubs: {
+          Icon: true
+        }
+      }
+    })
+
+    const fileInput = wrapper.get('[data-testid="profile-avatar-file-input"]')
+    Object.defineProperty(fileInput.element, 'files', {
+      value: [new File([new Uint8Array(220 * 1024)], 'avatar.png', { type: 'image/png' })],
+      configurable: true
+    })
+
+    await fileInput.trigger('change')
+    await flushAsyncWork()
+    await wrapper.get('[data-testid="profile-avatar-save"]').trigger('click')
+
+    expect(updateProfileMock).toHaveBeenCalledWith({
+      avatar_url: 'data:image/webp;base64,Y29tcHJlc3NlZC1hdmF0YXI='
+    })
+    expect(showErrorMock).not.toHaveBeenCalled()
+  })
+
+  it('deletes the current avatar', async () => {
+    const updatedUser = createUser({ avatar_url: null })
+    updateProfileMock.mockResolvedValue(updatedUser)
+    authStoreState.user = createUser({ avatar_url: 'https://cdn.example.com/old.png' })
+
+    const wrapper = mount(ProfileAvatarCard, {
+      props: {
+        user: authStoreState.user
+      },
+      global: {
+        stubs: {
+          Icon: true
+        }
+      }
+    })
+
+    await wrapper.get('[data-testid="profile-avatar-delete"]').trigger('click')
+
+    expect(updateProfileMock).toHaveBeenCalledWith({ avatar_url: '' })
+    expect(authStoreState.user?.avatar_url).toBeNull()
+    expect(showSuccessMock).toHaveBeenCalledWith('Avatar removed')
+  })
+})
diff --git a/frontend/src/components/user/profile/__tests__/ProfileInfoCard.spec.ts b/frontend/src/components/user/profile/__tests__/ProfileInfoCard.spec.ts
index 4c2b25ca..0ee9aebb 100644
--- a/frontend/src/components/user/profile/__tests__/ProfileInfoCard.spec.ts
+++ b/frontend/src/components/user/profile/__tests__/ProfileInfoCard.spec.ts
@@ -1,75 +1,29 @@
 import { mount } from '@vue/test-utils'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import ProfileInfoCard from '@/components/user/profile/ProfileInfoCard.vue'
 import type { User } from '@/types'
 
-const {
-  updateProfileMock,
-  showSuccessMock,
-  showErrorMock,
-  authStoreState
-} = vi.hoisted(() => ({
-  updateProfileMock: vi.fn(),
-  showSuccessMock: vi.fn(),
-  showErrorMock: vi.fn(),
-  authStoreState: {
-    user: null as User | null
-  }
-}))
-
-vi.mock('@/api', () => ({
-  userAPI: {
-    updateProfile: updateProfileMock
-  }
-}))
-
 vi.mock('@/stores/auth', () => ({
-  useAuthStore: () => authStoreState
+  useAuthStore: () => ({
+    user: null
+  })
 }))
 
 vi.mock('@/stores/app', () => ({
   useAppStore: () => ({
-    showSuccess: showSuccessMock,
-    showError: showErrorMock
+    showError: vi.fn(),
+    showSuccess: vi.fn()
   })
 }))
 
-vi.mock('@/utils/apiError', () => ({
-  extractApiErrorMessage: (error: unknown) => (error as Error).message || 'request failed'
-}))
-
 vi.mock('vue-i18n', async (importOriginal) => {
   const actual = await importOriginal<typeof import('vue-i18n')>()
   return {
     ...actual,
     useI18n: () => ({
-      t: (key: string, params?: Record<string, string>) => {
+      t: (key: string) => {
         if (key === 'profile.administrator') return 'Administrator'
         if (key === 'profile.user') return 'User'
-        if (key === 'profile.avatar.title') return 'Profile avatar'
-        if (key === 'profile.avatar.description') return 'Set avatar by image URL or upload'
-        if (key === 'profile.avatar.inputLabel') return 'Avatar URL or data URL'
-        if (key === 'profile.avatar.inputPlaceholder') return 'https://cdn.example.com/avatar.png'
-        if (key === 'profile.avatar.uploadAction') return 'Upload image'
-        if (key === 'profile.avatar.uploadHint') return 'Images must be 100KB or smaller and will be compressed to 20KB'
-        if (key === 'profile.avatar.saveSuccess') return 'Avatar updated'
-        if (key === 'profile.avatar.deleteSuccess') return 'Avatar removed'
-        if (key === 'profile.avatar.invalidType') return 'Please choose an image file'
-        if (key === 'profile.avatar.fileTooLarge') return 'Avatar image must be 100KB or smaller'
-        if (key === 'profile.avatar.gifTooLarge') return 'GIF avatars must already be 20KB or smaller'
-        if (key === 'profile.avatar.compressTooLarge') return 'Unable to compress this image below 20KB'
-        if (key === 'profile.avatar.compressFailed') return 'Failed to compress the selected image'
-        if (key === 'profile.avatar.readFailed') return 'Failed to read the selected image'
-        if (key === 'profile.avatar.invalidValue') return 'Enter a valid avatar URL or image data URL'
-        if (key === 'profile.avatar.emptyDeleteHint') return 'Avatar already removed'
-        if (key === 'profile.authBindings.providers.email') return 'Email'
-        if (key === 'profile.authBindings.providers.linuxdo') return 'LinuxDo'
-        if (key === 'profile.authBindings.providers.wechat') return 'WeChat'
-        if (key === 'profile.authBindings.providers.oidc') return params?.providerName || 'OIDC'
-        if (key === 'profile.authBindings.source.avatar') return `Avatar synced from ${params?.providerName || 'provider'}`
-        if (key === 'profile.authBindings.source.username') return `Username synced from ${params?.providerName || 'provider'}`
-        if (key === 'common.save') return 'Save'
-        if (key === 'common.delete') return 'Delete'
         return key
       }
     })
@@ -96,204 +50,23 @@ function createUser(overrides: Partial<User> = {}): User {
   }
 }
 
-async function flushAsyncWork(): Promise<void> {
-  await Promise.resolve()
-  await Promise.resolve()
-}
-
-const originalFileReader = globalThis.FileReader
-const originalImage = globalThis.Image
-const originalCreateElement = document.createElement.bind(document)
-
-function installAvatarCompressionMocks() {
-  class MockFileReader {
-    result: string | ArrayBuffer | null = null
-    onload: ((this: FileReader, ev: ProgressEvent<FileReader>) => any) | null = null
-    onerror: ((this: FileReader, ev: ProgressEvent<FileReader>) => any) | null = null
-    error: DOMException | null = null
-
-    readAsDataURL(blob: Blob) {
-      if (blob.type === 'image/webp') {
-        this.result = 'data:image/webp;base64,' + Buffer.from('compressed-avatar').toString('base64')
-      } else {
-        this.result = 'data:image/png;base64,' + Buffer.from('original-avatar').toString('base64')
-      }
-      this.onload?.call(this as unknown as FileReader, new ProgressEvent('load'))
-    }
-  }
-
-  class MockImage {
-    naturalWidth = 1200
-    naturalHeight = 1200
-    onload: (() => void) | null = null
-    onerror: (() => void) | null = null
-
-    set src(_value: string) {
-      this.onload?.()
-    }
-  }
-
-  globalThis.FileReader = MockFileReader as unknown as typeof FileReader
-  globalThis.Image = MockImage as unknown as typeof Image
-  vi.spyOn(document, 'createElement').mockImplementation(((tagName: string, options?: ElementCreationOptions) => {
-    if (tagName === 'canvas') {
-      return {
-        width: 0,
-        height: 0,
-        getContext: () => ({
-          clearRect: vi.fn(),
-          drawImage: vi.fn(),
-        }),
-        toBlob: (callback: BlobCallback) => {
-          callback(new Blob([new Uint8Array(8 * 1024)], { type: 'image/webp' }))
-        },
-      } as unknown as HTMLCanvasElement
-    }
-    return originalCreateElement(tagName, options)
-  }) as typeof document.createElement)
-}
-
 describe('ProfileInfoCard', () => {
-  beforeEach(() => {
-    updateProfileMock.mockReset()
-    showSuccessMock.mockReset()
-    showErrorMock.mockReset()
-    authStoreState.user = null
-  })
-
-  afterEach(() => {
-    globalThis.FileReader = originalFileReader
-    globalThis.Image = originalImage
-    vi.restoreAllMocks()
-  })
-
-  it('saves a remote avatar URL and updates the auth store', async () => {
-    const updatedUser = createUser({ avatar_url: 'https://cdn.example.com/new.png' })
-    updateProfileMock.mockResolvedValue(updatedUser)
-    authStoreState.user = createUser()
-
+  it('renders basic account information without avatar or bindings actions', () => {
     const wrapper = mount(ProfileInfoCard, {
       props: {
-        user: authStoreState.user
+        user: createUser()
       },
       global: {
         stubs: {
-          Icon: true,
-          ProfileIdentityBindingsSection: true
+          Icon: true
         }
       }
     })
 
-    await wrapper.get('[data-testid="profile-avatar-input"]').setValue('https://cdn.example.com/new.png')
-    await wrapper.get('[data-testid="profile-avatar-save"]').trigger('click')
-
-    expect(updateProfileMock).toHaveBeenCalledWith({ avatar_url: 'https://cdn.example.com/new.png' })
-    expect(authStoreState.user?.avatar_url).toBe('https://cdn.example.com/new.png')
-    expect(showSuccessMock).toHaveBeenCalledWith('Avatar updated')
-  })
-
-  it('rejects an oversized data URL before sending the request', async () => {
-    authStoreState.user = createUser()
-    const oversized = `data:image/png;base64,${Buffer.from(new Uint8Array(102401)).toString('base64')}`
-
-    const wrapper = mount(ProfileInfoCard, {
-      props: {
-        user: authStoreState.user
-      },
-      global: {
-        stubs: {
-          Icon: true,
-          ProfileIdentityBindingsSection: true
-        }
-      }
-    })
-
-    await wrapper.get('[data-testid="profile-avatar-input"]').setValue(oversized)
-    await wrapper.get('[data-testid="profile-avatar-save"]').trigger('click')
-
-    expect(updateProfileMock).not.toHaveBeenCalled()
-    expect(showErrorMock).toHaveBeenCalledWith('Avatar image must be 100KB or smaller')
-  })
-
-  it('compresses uploaded images under 100KB before saving', async () => {
-    installAvatarCompressionMocks()
-    const updatedUser = createUser({ avatar_url: 'data:image/webp;base64,Y29tcHJlc3NlZC1hdmF0YXI=' })
-    updateProfileMock.mockResolvedValue(updatedUser)
-    authStoreState.user = createUser()
-
-    const wrapper = mount(ProfileInfoCard, {
-      props: {
-        user: authStoreState.user
-      },
-      global: {
-        stubs: {
-          Icon: true,
-          ProfileIdentityBindingsSection: true
-        }
-      }
-    })
-
-    const fileInput = wrapper.get('[data-testid="profile-avatar-file-input"]')
-    Object.defineProperty(fileInput.element, 'files', {
-      value: [new File([new Uint8Array(80 * 1024)], 'avatar.png', { type: 'image/png' })],
-      configurable: true
-    })
-
-    await fileInput.trigger('change')
-    await flushAsyncWork()
-    await wrapper.get('[data-testid="profile-avatar-save"]').trigger('click')
-
-    expect(updateProfileMock).toHaveBeenCalledWith({
-      avatar_url: 'data:image/webp;base64,Y29tcHJlc3NlZC1hdmF0YXI='
-    })
-  })
-
-  it('deletes the current avatar', async () => {
-    const updatedUser = createUser({ avatar_url: null })
-    updateProfileMock.mockResolvedValue(updatedUser)
-    authStoreState.user = createUser({ avatar_url: 'https://cdn.example.com/old.png' })
-
-    const wrapper = mount(ProfileInfoCard, {
-      props: {
-        user: authStoreState.user
-      },
-      global: {
-        stubs: {
-          Icon: true,
-          ProfileIdentityBindingsSection: true
-        }
-      }
-    })
-
-    await wrapper.get('[data-testid="profile-avatar-delete"]').trigger('click')
-
-    expect(updateProfileMock).toHaveBeenCalledWith({ avatar_url: '' })
-    expect(authStoreState.user?.avatar_url).toBeNull()
-    expect(showSuccessMock).toHaveBeenCalledWith('Avatar removed')
-  })
-
-  it('renders third-party source hints from profile_sources', () => {
-    authStoreState.user = createUser({
-      avatar_url: 'https://cdn.example.com/linuxdo.png',
-      profile_sources: {
-        avatar: { provider: 'linuxdo', source: 'linuxdo' },
-        username: { provider: 'linuxdo', source: 'linuxdo' }
-      }
-    })
-
-    const wrapper = mount(ProfileInfoCard, {
-      props: {
-        user: authStoreState.user
-      },
-      global: {
-        stubs: {
-          Icon: true,
-          ProfileIdentityBindingsSection: true
-        }
-      }
-    })
-
-    expect(wrapper.text()).toContain('Avatar synced from LinuxDo')
-    expect(wrapper.text()).toContain('Username synced from LinuxDo')
+    expect(wrapper.text()).toContain('alice@example.com')
+    expect(wrapper.text()).toContain('alice')
+    expect(wrapper.text()).toContain('User')
+    expect(wrapper.find('[data-testid="profile-avatar-save"]').exists()).toBe(false)
+    expect(wrapper.find('[data-testid="profile-binding-email-status"]').exists()).toBe(false)
   })
 })
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 4c948f64..7b37009f 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -943,15 +943,14 @@ export default {
     },
     avatar: {
       title: 'Profile Avatar',
-      description: 'Set your avatar with a remote image URL or upload an image under 100KB. Uploaded images are compressed to 20KB.',
+      description: 'Set your avatar with a remote image URL or upload an image. Static uploads are compressed to 20KB before saving.',
       inputLabel: 'Avatar URL or data URL',
       inputPlaceholder: 'https://cdn.example.com/avatar.png',
       uploadAction: 'Upload image',
-      uploadHint: 'Uploaded images must be 100KB or smaller. Static images are compressed to 20KB.',
+      uploadHint: 'Static uploads are compressed to 20KB when possible. GIF uploads must already be within 20KB.',
       saveSuccess: 'Avatar updated',
       deleteSuccess: 'Avatar removed',
       invalidType: 'Please choose an image file',
-      fileTooLarge: 'Avatar image must be 100KB or smaller',
       gifTooLarge: 'GIF avatars must already be 20KB or smaller',
       compressTooLarge: 'Unable to compress this image below 20KB. Try a smaller image.',
       compressFailed: 'Failed to compress the selected image.',
diff --git a/frontend/src/i18n/locales/zh.ts b/frontend/src/i18n/locales/zh.ts
index 9e6c0d58..97de9c9c 100644
--- a/frontend/src/i18n/locales/zh.ts
+++ b/frontend/src/i18n/locales/zh.ts
@@ -947,15 +947,14 @@ export default {
     },
     avatar: {
       title: '资料头像',
-      description: '支持填写远程图片 URL，或上传不超过 100KB 的头像图片；上传图片会自动压缩到 20KB 以内。',
+      description: '支持填写远程图片 URL，或上传头像图片；静态图片会自动压缩到 20KB 以内后再保存。',
       inputLabel: '头像 URL 或 data URL',
       inputPlaceholder: 'https://cdn.example.com/avatar.png',
       uploadAction: '上传图片',
-      uploadHint: '上传图片需不超过 100KB，静态图片会自动压缩到 20KB 以内',
+      uploadHint: '上传图片时会自动压缩静态图片到 20KB 以内，GIF 需自行控制在 20KB 以内',
       saveSuccess: '头像已更新',
       deleteSuccess: '头像已删除',
       invalidType: '请选择图片文件',
-      fileTooLarge: '头像图片必须不超过 100KB',
       gifTooLarge: 'GIF 头像必须在 20KB 以内',
       compressTooLarge: '无法将图片压缩到 20KB 以内，请换一张更小的图片',
       compressFailed: '压缩所选图片失败',
diff --git a/frontend/src/views/user/ProfileView.vue b/frontend/src/views/user/ProfileView.vue
index 9e72776f..463a6434 100644
--- a/frontend/src/views/user/ProfileView.vue
+++ b/frontend/src/views/user/ProfileView.vue
@@ -22,7 +22,11 @@
         />
       </div>
 
-      <ProfileInfoCard
+      <ProfileInfoCard :user="user" />
+
+      <ProfileAvatarCard :user="user" />
+
+      <ProfileAccountBindingsCard
         :user="user"
         :linuxdo-enabled="linuxdoOAuthEnabled"
         :oidc-enabled="oidcOAuthEnabled"
@@ -73,6 +77,8 @@ import { Icon } from '@/components/icons'
 import StatCard from '@/components/common/StatCard.vue'
 import AppLayout from '@/components/layout/AppLayout.vue'
 import ProfileBalanceNotifyCard from '@/components/user/profile/ProfileBalanceNotifyCard.vue'
+import ProfileAccountBindingsCard from '@/components/user/profile/ProfileAccountBindingsCard.vue'
+import ProfileAvatarCard from '@/components/user/profile/ProfileAvatarCard.vue'
 import ProfileEditForm from '@/components/user/profile/ProfileEditForm.vue'
 import ProfileInfoCard from '@/components/user/profile/ProfileInfoCard.vue'
 import ProfilePasswordForm from '@/components/user/profile/ProfilePasswordForm.vue'
diff --git a/frontend/src/views/user/__tests__/ProfileView.spec.ts b/frontend/src/views/user/__tests__/ProfileView.spec.ts
new file mode 100644
index 00000000..1dcd6c8d
--- /dev/null
+++ b/frontend/src/views/user/__tests__/ProfileView.spec.ts
@@ -0,0 +1,101 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import ProfileView from '@/views/user/ProfileView.vue'
+
+const {
+  fetchPublicSettingsMock,
+  refreshUserMock,
+  authState
+} = vi.hoisted(() => ({
+  fetchPublicSettingsMock: vi.fn(),
+  refreshUserMock: vi.fn(),
+  authState: {
+    user: null as Record<string, unknown> | null,
+    refreshUser: vi.fn()
+  }
+}))
+
+vi.mock('@/stores/auth', () => ({
+  useAuthStore: () => authState
+}))
+
+vi.mock('@/stores/app', () => ({
+  useAppStore: () => ({
+    fetchPublicSettings: fetchPublicSettingsMock
+  })
+}))
+
+vi.mock('@/utils/format', () => ({
+  formatDate: () => 'April 2026'
+}))
+
+vi.mock('vue-i18n', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('vue-i18n')>()
+  return {
+    ...actual,
+    useI18n: () => ({
+      t: (key: string) => key
+    })
+  }
+})
+
+describe('ProfileView', () => {
+  beforeEach(() => {
+    refreshUserMock.mockReset()
+    fetchPublicSettingsMock.mockReset()
+    refreshUserMock.mockResolvedValue(undefined)
+    authState.refreshUser = refreshUserMock
+    authState.user = {
+      id: 1,
+      username: 'alice',
+      email: 'alice@example.com',
+      role: 'user',
+      balance: 10,
+      concurrency: 2,
+      status: 'active',
+      allowed_groups: null,
+      balance_notify_enabled: true,
+      balance_notify_threshold: null,
+      balance_notify_extra_emails: [],
+      created_at: '2026-04-20T00:00:00Z',
+      updated_at: '2026-04-20T00:00:00Z'
+    }
+    fetchPublicSettingsMock.mockResolvedValue({
+      contact_info: '',
+      balance_low_notify_enabled: false,
+      balance_low_notify_threshold: 0,
+      linuxdo_oauth_enabled: true,
+      wechat_oauth_enabled: true,
+      wechat_oauth_open_enabled: true,
+      wechat_oauth_mp_enabled: false,
+      oidc_oauth_enabled: true,
+      oidc_oauth_provider_name: 'OIDC'
+    })
+  })
+
+  it('renders info, avatar, and account binding cards as separate sections', async () => {
+    const wrapper = mount(ProfileView, {
+      global: {
+        stubs: {
+          AppLayout: { template: '<div><slot /></div>' },
+          StatCard: { template: '<div class="stat-card" />' },
+          ProfileInfoCard: { template: '<div data-testid="profile-info-card" />' },
+          ProfileAvatarCard: { template: '<div data-testid="profile-avatar-card" />' },
+          ProfileAccountBindingsCard: { template: '<div data-testid="profile-account-bindings-card" />' },
+          ProfileEditForm: true,
+          ProfileBalanceNotifyCard: true,
+          ProfilePasswordForm: true,
+          ProfileTotpCard: true,
+          Icon: true
+        }
+      }
+    })
+
+    await flushPromises()
+
+    const html = wrapper.html()
+    expect(html.indexOf('profile-info-card')).toBeGreaterThan(-1)
+    expect(html.indexOf('profile-avatar-card')).toBeGreaterThan(html.indexOf('profile-info-card'))
+    expect(html.indexOf('profile-account-bindings-card')).toBeGreaterThan(html.indexOf('profile-avatar-card'))
+  })
+})