From fa4e00ce8c20b4d0279f90148e6efbbacd9344a8 Mon Sep 17 00:00:00 2001
From: Mplan <mplan_@outlook.com>
Date: Sat, 30 May 2026 00:09:12 +0800
Subject: [PATCH] feat: unify header and auth action buttons

---
 src/components/layout/AppHeader.vue  | 10 +++++-----
 src/views/auth/AuthConfirmView.vue   |  4 ++--
 src/views/auth/LoginView.vue         |  1 +
 src/views/auth/RegisterView.vue      |  3 ++-
 src/views/auth/ResetPasswordView.vue |  3 ++-
 5 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/layout/AppHeader.vue b/src/components/layout/AppHeader.vue
index 0cd7453..26069af 100644
--- a/src/components/layout/AppHeader.vue
+++ b/src/components/layout/AppHeader.vue
@@ -209,7 +209,7 @@ async function handleLogout() {
                 class="no-underline"
               >
                 <span
-                  class="inline-flex h-8 items-center border border-sky-200 bg-sky-100 px-3 text-sm font-medium uppercase tracking-[0.12em] text-sky-800 shadow-[4px_4px_0_0_rgba(14,165,233,0.14)] transition-colors hover:bg-sky-50 hover:text-sky-900 md:h-10 md:px-4"
+                  class="inline-flex h-8 items-center border border-sky-200 bg-sky-100 px-3 text-sm font-medium uppercase tracking-[0.12em] text-sky-800 shadow-[4px_4px_0_0_rgba(14,165,233,0.14)] transition-[background-color,color,transform,box-shadow] hover:-translate-x-px hover:-translate-y-px hover:bg-sky-50 hover:text-sky-900 hover:shadow-[5px_5px_0_0_rgba(14,165,233,0.18)] md:h-10 md:px-4"
                   :class="route.name === 'upload' ? 'ring-1 ring-sky-300' : ''"
                 >
                   上传
@@ -226,8 +226,8 @@ async function handleLogout() {
               >
                 <button
                   type="button"
-                  class="inline-flex h-8 max-w-[8.5rem] items-center gap-2 border border-teal-100 bg-white/80 px-3 text-sm font-medium text-teal-800 shadow-[3px_3px_0_0_rgba(20,184,166,0.08)] transition-colors hover:border-teal-200 hover:bg-teal-50 md:h-10 md:max-w-none"
-                  :class="route.name === 'profile' || route.name === 'profile-settings' ? 'bg-teal-50 ring-1 ring-teal-200' : ''"
+                  class="inline-flex h-8 max-w-[8.5rem] items-center gap-2 border border-teal-100 bg-white/80 px-3 text-sm font-medium text-teal-700 shadow-[3px_3px_0_0_rgba(20,184,166,0.08)] transition-[background-color,color,transform,box-shadow,border-color] hover:-translate-x-px hover:-translate-y-px hover:border-teal-200 hover:bg-teal-50/70 hover:text-teal-800 hover:shadow-[4px_4px_0_0_rgba(20,184,166,0.12)] md:h-10 md:max-w-none"
+                  :class="route.name === 'profile' || route.name === 'profile-settings' ? 'border-teal-200 bg-teal-50/80 text-teal-800 ring-1 ring-teal-200 shadow-[4px_4px_0_0_rgba(20,184,166,0.12)]' : ''"
                   aria-haspopup="menu"
                   :aria-expanded="accountCardOpen"
                 >
@@ -311,7 +311,7 @@ async function handleLogout() {
                   class="no-underline"
                 >
                   <span
-                    class="inline-flex h-8 items-center border border-slate-200 bg-white/80 px-3 text-sm font-medium text-slate-700 shadow-[3px_3px_0_0_rgba(15,23,42,0.06)] transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-800 md:h-10 md:px-4"
+                    class="inline-flex h-8 items-center border border-slate-200 bg-white/80 px-3 text-sm font-medium text-slate-700 shadow-[3px_3px_0_0_rgba(15,23,42,0.06)] transition-[background-color,color,transform,box-shadow,border-color] hover:-translate-x-px hover:-translate-y-px hover:border-teal-200 hover:bg-teal-50 hover:text-teal-800 hover:shadow-[4px_4px_0_0_rgba(15,23,42,0.08)] md:h-10 md:px-4"
                     :class="route.name === 'login' ? 'bg-teal-50 ring-1 ring-teal-200 text-teal-800' : ''"
                   >
                     登录
@@ -322,7 +322,7 @@ async function handleLogout() {
                   class="no-underline"
                 >
                   <span
-                    class="inline-flex h-8 items-center border border-sky-200 bg-sky-100 px-3 text-sm font-medium text-sky-800 shadow-[4px_4px_0_0_rgba(14,165,233,0.14)] transition-colors hover:bg-sky-50 hover:text-sky-900 md:h-10 md:px-4"
+                    class="inline-flex h-8 items-center border border-sky-200 bg-sky-100 px-3 text-sm font-medium text-sky-800 shadow-[4px_4px_0_0_rgba(14,165,233,0.14)] transition-[background-color,color,transform,box-shadow] hover:-translate-x-px hover:-translate-y-px hover:bg-sky-50 hover:text-sky-900 hover:shadow-[5px_5px_0_0_rgba(14,165,233,0.18)] md:h-10 md:px-4"
                     :class="route.name === 'register' ? 'ring-1 ring-sky-300' : ''"
                   >
                     注册
diff --git a/src/views/auth/AuthConfirmView.vue b/src/views/auth/AuthConfirmView.vue
index 17eca77..6be76a2 100644
--- a/src/views/auth/AuthConfirmView.vue
+++ b/src/views/auth/AuthConfirmView.vue
@@ -79,7 +79,7 @@ onUnmounted(() => {
             <div class="space-y-4">
               <p class="text-sm text-slate-500">{{ countdown }} 秒后自动跳转登录页面...</p>
               <RouterLink to="/login" class="no-underline">
-                <NButton type="primary">立即登录</NButton>
+                <NButton type="primary" class="oc-primary-button oc-primary-button--teal">立即登录</NButton>
               </RouterLink>
             </div>
           </template>
@@ -90,7 +90,7 @@ onUnmounted(() => {
         <NResult status="error" title="认证失败" description="邮箱确认链接无效或已过期，请重新注册。">
           <template #footer>
             <RouterLink to="/register" class="no-underline">
-              <NButton type="primary">重新注册</NButton>
+              <NButton type="primary" class="oc-primary-button oc-primary-button--sky">重新注册</NButton>
             </RouterLink>
           </template>
         </NResult>
diff --git a/src/views/auth/LoginView.vue b/src/views/auth/LoginView.vue
index f8efd66..9d0ca8c 100644
--- a/src/views/auth/LoginView.vue
+++ b/src/views/auth/LoginView.vue
@@ -122,6 +122,7 @@ async function handleSendResetEmail() {
             type="primary"
             block
             size="large"
+            class="oc-primary-button oc-primary-button--teal"
             :loading="resetMode ? resetLoading : loading"
           >
             <template v-if="resetMode">
diff --git a/src/views/auth/RegisterView.vue b/src/views/auth/RegisterView.vue
index af3f874..f5a8bdb 100644
--- a/src/views/auth/RegisterView.vue
+++ b/src/views/auth/RegisterView.vue
@@ -87,7 +87,7 @@ async function handleRegister() {
                 <span class="font-semibold text-slate-700">{{ email }}</span>
               </p>
               <RouterLink to="/login" class="no-underline">
-                <NButton type="primary">去登录</NButton>
+                <NButton type="primary" class="oc-primary-button oc-primary-button--teal">去登录</NButton>
               </RouterLink>
             </div>
           </template>
@@ -152,6 +152,7 @@ async function handleRegister() {
               type="primary"
               block
               size="large"
+              class="oc-primary-button oc-primary-button--sky"
               :loading="loading"
             >
               {{ loading ? '注册中...' : '注册' }}
diff --git a/src/views/auth/ResetPasswordView.vue b/src/views/auth/ResetPasswordView.vue
index 82aa2ea..5b47139 100644
--- a/src/views/auth/ResetPasswordView.vue
+++ b/src/views/auth/ResetPasswordView.vue
@@ -80,7 +80,7 @@ async function handleResetPassword() {
           description="现在可以使用新密码登录。"
         >
           <template #footer>
-            <NButton type="primary" @click="router.push('/login')">返回登录</NButton>
+            <NButton type="primary" class="oc-primary-button oc-primary-button--teal" @click="router.push('/login')">返回登录</NButton>
           </template>
         </NResult>
 
@@ -123,6 +123,7 @@ async function handleResetPassword() {
               type="primary"
               block
               size="large"
+              class="oc-primary-button oc-primary-button--teal"
               :disabled="!canSubmit"
               :loading="loading"
             >