From 02c803f0c173e6d4584c29e9de7a728e8f26d579 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=8E=AB=E5=94=90=E5=B0=BC?=
 <tzxiaomo@outlook.com>
Date: Tue, 16 Jun 2026 01:28:25 +0800
Subject: [PATCH] =?UTF-8?q?style(login,guest-panel):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95UI=E5=92=8C=E4=BB=A3=E7=A0=81=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 移除访客信息面板的冗余标签文本
2. 调整登录页样式顺序、类名和分隔线排版
3. 拆分长条件语句，新增返回按钮和自定义导航栏
4. 统一输入框背景色类名
---
 .../post-detail/uh-guest-info-panel.vue       |  3 -
 src/pages/auth/login.vue                      | 85 ++++++++++++-------
 src/pages/mine/mine.vue                       | 21 +++--
 3 files changed, 65 insertions(+), 44 deletions(-)

diff --git a/src/components/post-detail/uh-guest-info-panel.vue b/src/components/post-detail/uh-guest-info-panel.vue
index e1712e2..cc883fe 100644
--- a/src/components/post-detail/uh-guest-info-panel.vue
+++ b/src/components/post-detail/uh-guest-info-panel.vue
@@ -86,7 +86,6 @@ function handleClose() {
         <view class="box-border flex flex-col gap-y-4 px-4 pt-4">
           <!-- 昵称 -->
           <view class="flex flex-col gap-y-1">
-            <text class="text-xs text-gray-500 font-medium">昵称 <text class="text-red-500">*</text></text>
             <input
               v-model="formData.displayName"
               class="rounded-xl bg-gray-50 px-4 py-2.5 text-sm"
@@ -98,7 +97,6 @@ function handleClose() {
 
           <!-- 邮箱 -->
           <view class="flex flex-col gap-y-1">
-            <text class="text-xs text-gray-500 font-medium">邮箱 <text class="text-red-500">*</text></text>
             <input
               v-model="formData.email"
               class="rounded-xl bg-gray-50 px-4 py-2.5 text-sm"
@@ -111,7 +109,6 @@ function handleClose() {
 
           <!-- 网站 -->
           <view class="flex flex-col gap-y-1">
-            <text class="text-xs text-gray-500 font-medium">网站</text>
             <input
               v-model="formData.website"
               class="rounded-xl bg-gray-50 px-4 py-2.5 text-sm"
diff --git a/src/pages/auth/login.vue b/src/pages/auth/login.vue
index 6821304..fff05dd 100644
--- a/src/pages/auth/login.vue
+++ b/src/pages/auth/login.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { systemInfo } from '@/utils/systemInfo'
 import { useTokenStore } from '@/store/token'
 import { useGuestStore } from '@/store/guest'
 import GuestInfoPanel from '@/components/post-detail/uh-guest-info-panel.vue'
@@ -8,6 +9,7 @@ defineOptions({ name: 'Login' })
 definePage({
   style: {
     navigationBarTitleText: '登录',
+    navigationStyle: 'custom',
     navigationBarBackgroundColor: '#ffffff',
   },
 })
@@ -53,7 +55,8 @@ function validateLogin(): boolean {
 }
 
 async function handleLogin() {
-  if (!validateLogin()) return
+  if (!validateLogin())
+    return
 
   try {
     await tokenStore.login({
@@ -110,7 +113,8 @@ function validateRegister(): boolean {
 }
 
 async function handleRegister() {
-  if (!validateRegister()) return
+  if (!validateRegister())
+    return
 
   try {
     // TODO: 调用注册 API
@@ -184,16 +188,29 @@ function handleLoginSuccess() {
 
 // ---- 密码输入框切换可见性 ----
 function togglePwdVisibility(target: 'login' | 'register' | 'confirm') {
-  if (target === 'login') showLoginPwd.value = !showLoginPwd.value
-  else if (target === 'register') showRegisterPwd.value = !showRegisterPwd.value
+  if (target === 'login')
+    showLoginPwd.value = !showLoginPwd.value
+  else if (target === 'register')
+    showRegisterPwd.value = !showRegisterPwd.value
   else showConfirmPwd.value = !showConfirmPwd.value
 }
+
+function handleBack() {
+  uni.navigateBack()
+}
 </script>
 
 <template>
-  <view class="bg-page3 box-border min-h-screen w-full flex flex-col px-6 pt-12">
+  <view
+    class="box-border min-h-screen w-full flex flex-col items-center justify-center bg-page3 px-6"
+    :class="[
+      systemInfo.uniPlatform ? 'pt-safe' : 'pt-12',
+    ]"
+  >
     <!-- 头部 Logo -->
-    <view class="mb-8 flex flex-col items-center gap-y-2">
+    <view
+      class="mb-8 mt-8 w-full flex flex-col items-center gap-y-2"
+    >
       <image
         class="h-16 w-16 rounded-2xl"
         src="/static/logo.png"
@@ -204,16 +221,16 @@ function togglePwdVisibility(target: 'login' | 'register' | 'confirm') {
     </view>
 
     <!-- Tab 切换 -->
-    <view class="mb-6 flex items-center rounded-xl bg-gray-100 p-1">
+    <view class="mb-6 box-border w-full flex items-center rounded-xl bg-gray-100 p-1">
       <view
-        class="flex-1 center rounded-lg py-2 text-sm font-medium transition-all"
+        class="center flex-1 rounded-lg py-2 text-sm font-medium transition-all"
         :class="activeMode === 'login' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500'"
         @click="switchMode('login')"
       >
         登录
       </view>
       <view
-        class="flex-1 center rounded-lg py-2 text-sm font-medium transition-all"
+        class="center flex-1 rounded-lg py-2 text-sm font-medium transition-all"
         :class="activeMode === 'register' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500'"
         @click="switchMode('register')"
       >
@@ -222,11 +239,10 @@ function togglePwdVisibility(target: 'login' | 'register' | 'confirm') {
     </view>
 
     <!-- 登录表单 -->
-    <view v-if="activeMode === 'login'" class="flex flex-col gap-y-4">
+    <view v-if="activeMode === 'login'" class="w-full flex flex-col gap-y-4">
       <!-- 用户名 -->
       <view class="flex flex-col gap-y-1">
-        <text class="text-xs text-gray-500 font-medium">用户名</text>
-        <view class="flex items-center rounded-xl bg-gray-50 px-4">
+        <view class="flex items-center rounded-xl bg-gray-100 px-4">
           <wd-icon name="user" color="#9CA3AF" :size="16" />
           <input
             v-model="loginForm.username"
@@ -240,8 +256,7 @@ function togglePwdVisibility(target: 'login' | 'register' | 'confirm') {
 
       <!-- 密码 -->
       <view class="flex flex-col gap-y-1">
-        <text class="text-xs text-gray-500 font-medium">密码</text>
-        <view class="flex items-center rounded-xl bg-gray-50 px-4">
+        <view class="flex items-center rounded-xl bg-gray-100 px-4">
           <wd-icon name="lock" color="#9CA3AF" :size="16" />
           <input
             v-model="loginForm.password"
@@ -264,14 +279,20 @@ function togglePwdVisibility(target: 'login' | 'register' | 'confirm') {
       >
         登录
       </view>
+      <!-- 返回按钮 -->
+      <view
+        class="box-border h-10 w-full center gap-x-1 border border-gray-600 rounded-xl border-solid text-xs text-gray-600"
+        @click="handleBack"
+      >
+        暂不登录
+      </view>
     </view>
 
     <!-- 注册表单 -->
-    <view v-if="activeMode === 'register'" class="flex flex-col gap-y-4">
+    <view v-if="activeMode === 'register'" class="w-full flex flex-col gap-y-4">
       <!-- 用户名 -->
       <view class="flex flex-col gap-y-1">
-        <text class="text-xs text-gray-500 font-medium">用户名</text>
-        <view class="flex items-center rounded-xl bg-gray-50 px-4">
+        <view class="flex items-center rounded-xl bg-gray-100 px-4">
           <wd-icon name="user" color="#9CA3AF" :size="16" />
           <input
             v-model="registerForm.username"
@@ -285,8 +306,7 @@ function togglePwdVisibility(target: 'login' | 'register' | 'confirm') {
 
       <!-- 密码 -->
       <view class="flex flex-col gap-y-1">
-        <text class="text-xs text-gray-500 font-medium">密码</text>
-        <view class="flex items-center rounded-xl bg-gray-50 px-4">
+        <view class="flex items-center rounded-xl bg-gray-100 px-4">
           <wd-icon name="lock" color="#9CA3AF" :size="16" />
           <input
             v-model="registerForm.password"
@@ -304,8 +324,7 @@ function togglePwdVisibility(target: 'login' | 'register' | 'confirm') {
 
       <!-- 确认密码 -->
       <view class="flex flex-col gap-y-1">
-        <text class="text-xs text-gray-500 font-medium">确认密码</text>
-        <view class="flex items-center rounded-xl bg-gray-50 px-4">
+        <view class="flex items-center rounded-xl bg-gray-100 px-4">
           <wd-icon name="lock" color="#9CA3AF" :size="16" />
           <input
             v-model="registerForm.confirmPassword"
@@ -328,38 +347,44 @@ function togglePwdVisibility(target: 'login' | 'register' | 'confirm') {
       >
         注册
       </view>
+      <!-- 返回按钮 -->
+      <view
+        class="box-border h-10 w-full center gap-x-1 border border-gray-600 rounded-xl border-solid text-xs text-gray-600"
+        @click="handleBack"
+      >
+        暂不登录
+      </view>
     </view>
 
     <!-- 分隔线 -->
-    <view class="my-6 flex items-center gap-x-3">
-      <view class="h-px flex-1 bg-gray-200" />
+    <view class="my-4 w-full flex items-center justify-center gap-x-3">
+      <view class="h-px flex-1 bg-gray-100" />
       <text class="text-xs text-gray-400">其他方式</text>
-      <view class="h-px flex-1 bg-gray-200" />
+      <view class="h-px flex-1 bg-gray-100" />
     </view>
 
     <!-- 第三方登录 & 游客访问 -->
-    <view class="flex flex-col items-center gap-y-3">
+    <view class="w-full flex flex-col items-center gap-y-3">
       <!-- #ifdef MP-WEIXIN -->
       <view
-        class="h-11 w-full flex items-center justify-center gap-x-2 rounded-xl border border-green-500 text-sm text-green-600 font-medium"
+        class="h-11 w-full flex items-center justify-center gap-x-2 rounded-xl bg-[#07C160] text-sm text-white font-medium"
         @click="handleWxLogin"
       >
-        <wd-icon name="wechat" color="#16A34A" :size="18" />
+        <wd-icon name="wechat" color="#FFFFFF" :size="18" />
         <text>微信一键登录</text>
       </view>
       <!-- #endif -->
 
       <view
-        class="h-11 w-full flex items-center justify-center gap-x-2 rounded-xl border border-gray-200 text-sm text-gray-600"
+        class="w-full flex items-center justify-center gap-x-2 border border-gray-200 rounded-xl py-1 text-sm text-gray-600"
         @click="handleGuestAccess"
       >
-        <wd-icon name="user" color="#6B7280" :size="16" />
         <text>游客身份访问</text>
       </view>
     </view>
 
     <!-- 底部协议提示 -->
-    <view class="mt-auto mb-8 flex flex-col items-center gap-y-1 pt-6">
+    <view class="mb-8 w-full flex flex-col items-center gap-y-1 pt-6">
       <text class="text-[11px] text-gray-400">登录或注册即代表同意</text>
       <view class="flex items-center gap-x-1">
         <text class="text-[11px] text-gray-500 font-medium">《用户协议》</text>
diff --git a/src/pages/mine/mine.vue b/src/pages/mine/mine.vue
index 9935e47..a214c68 100644
--- a/src/pages/mine/mine.vue
+++ b/src/pages/mine/mine.vue
@@ -58,14 +58,18 @@ const displaySubtitle = computed(() => {
 
 /** 用户状态标签 */
 const statusLabel = computed(() => {
-  if (hasLogin.value) return '已登录'
-  if (hasGuestInfo.value) return '游客'
+  if (hasLogin.value)
+    return '已登录'
+  if (hasGuestInfo.value)
+    return '游客'
   return '未登录'
 })
 
 const statusColor = computed(() => {
-  if (hasLogin.value) return 'bg-green-50 text-green-600'
-  if (hasGuestInfo.value) return 'bg-amber-50 text-amber-600'
+  if (hasLogin.value)
+    return 'bg-green-50 text-green-600'
+  if (hasGuestInfo.value)
+    return 'bg-amber-50 text-amber-600'
   return 'bg-gray-100 text-gray-500'
 })
 
@@ -83,12 +87,7 @@ function handleGuestSaved() {
 
 // ---- 登录/退出 ----
 function handleLogin() {
-  // #ifdef MP-WEIXIN
-  tokenStore.wxLogin()
-  // #endif
-  // #ifndef MP-WEIXIN
   uni.navigateTo({ url: LOGIN_PAGE })
-  // #endif
 }
 
 function handleLogout() {
@@ -130,7 +129,7 @@ function handleNavClick(item: NavItem) {
 </script>
 
 <template>
-  <view class="bg-page3 box-border min-h-screen w-full flex flex-col gap-y-4 px-4 pt-4">
+  <view class="box-border min-h-screen w-full flex flex-col gap-y-4 bg-page3 px-4 pt-4">
     <!-- 用户信息卡片 -->
     <view class="uh-shadow-xs box-border flex flex-col rounded-2xl bg-white p-4">
       <view class="w-full flex items-center gap-x-3">
@@ -172,7 +171,7 @@ function handleNavClick(item: NavItem) {
       </view>
 
       <!-- 已登录时显示的额外信息 -->
-      <view v-if="hasLogin" class="mt-3 my-1 h-px w-full bg-gray-50" />
+      <view v-if="hasLogin" class="my-1 mt-3 h-px w-full bg-gray-50" />
       <view v-if="hasLogin" class="flex items-center justify-between">
         <text class="text-xs text-gray-400">账号：{{ userInfo.username }}</text>
       </view>