1
0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-07-27 04:20:43 +08:00

style(login,guest-panel): 优化表单UI和代码结构

1. 移除访客信息面板的冗余标签文本
2. 调整登录页样式顺序、类名和分隔线排版
3. 拆分长条件语句,新增返回按钮和自定义导航栏
4. 统一输入框背景色类名
This commit is contained in:
小莫唐尼
2026-06-16 01:28:25 +08:00
parent a9e649e110
commit 02c803f0c1
3 changed files with 65 additions and 44 deletions
@@ -86,7 +86,6 @@ function handleClose() {
<view class="box-border flex flex-col gap-y-4 px-4 pt-4"> <view class="box-border flex flex-col gap-y-4 px-4 pt-4">
<!-- 昵称 --> <!-- 昵称 -->
<view class="flex flex-col gap-y-1"> <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 <input
v-model="formData.displayName" v-model="formData.displayName"
class="rounded-xl bg-gray-50 px-4 py-2.5 text-sm" 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"> <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 <input
v-model="formData.email" v-model="formData.email"
class="rounded-xl bg-gray-50 px-4 py-2.5 text-sm" 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"> <view class="flex flex-col gap-y-1">
<text class="text-xs text-gray-500 font-medium">网站</text>
<input <input
v-model="formData.website" v-model="formData.website"
class="rounded-xl bg-gray-50 px-4 py-2.5 text-sm" class="rounded-xl bg-gray-50 px-4 py-2.5 text-sm"
+55 -30
View File
@@ -1,4 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { systemInfo } from '@/utils/systemInfo'
import { useTokenStore } from '@/store/token' import { useTokenStore } from '@/store/token'
import { useGuestStore } from '@/store/guest' import { useGuestStore } from '@/store/guest'
import GuestInfoPanel from '@/components/post-detail/uh-guest-info-panel.vue' import GuestInfoPanel from '@/components/post-detail/uh-guest-info-panel.vue'
@@ -8,6 +9,7 @@ defineOptions({ name: 'Login' })
definePage({ definePage({
style: { style: {
navigationBarTitleText: '登录', navigationBarTitleText: '登录',
navigationStyle: 'custom',
navigationBarBackgroundColor: '#ffffff', navigationBarBackgroundColor: '#ffffff',
}, },
}) })
@@ -53,7 +55,8 @@ function validateLogin(): boolean {
} }
async function handleLogin() { async function handleLogin() {
if (!validateLogin()) return if (!validateLogin())
return
try { try {
await tokenStore.login({ await tokenStore.login({
@@ -110,7 +113,8 @@ function validateRegister(): boolean {
} }
async function handleRegister() { async function handleRegister() {
if (!validateRegister()) return if (!validateRegister())
return
try { try {
// TODO: 调用注册 API // TODO: 调用注册 API
@@ -184,16 +188,29 @@ function handleLoginSuccess() {
// ---- 密码输入框切换可见性 ---- // ---- 密码输入框切换可见性 ----
function togglePwdVisibility(target: 'login' | 'register' | 'confirm') { function togglePwdVisibility(target: 'login' | 'register' | 'confirm') {
if (target === 'login') showLoginPwd.value = !showLoginPwd.value if (target === 'login')
else if (target === 'register') showRegisterPwd.value = !showRegisterPwd.value showLoginPwd.value = !showLoginPwd.value
else if (target === 'register')
showRegisterPwd.value = !showRegisterPwd.value
else showConfirmPwd.value = !showConfirmPwd.value else showConfirmPwd.value = !showConfirmPwd.value
} }
function handleBack() {
uni.navigateBack()
}
</script> </script>
<template> <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 --> <!-- 头部 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 <image
class="h-16 w-16 rounded-2xl" class="h-16 w-16 rounded-2xl"
src="/static/logo.png" src="/static/logo.png"
@@ -204,16 +221,16 @@ function togglePwdVisibility(target: 'login' | 'register' | 'confirm') {
</view> </view>
<!-- Tab 切换 --> <!-- 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 <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'" :class="activeMode === 'login' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500'"
@click="switchMode('login')" @click="switchMode('login')"
> >
登录 登录
</view> </view>
<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'" :class="activeMode === 'register' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500'"
@click="switchMode('register')" @click="switchMode('register')"
> >
@@ -222,11 +239,10 @@ function togglePwdVisibility(target: 'login' | 'register' | 'confirm') {
</view> </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"> <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-100 px-4">
<view class="flex items-center rounded-xl bg-gray-50 px-4">
<wd-icon name="user" color="#9CA3AF" :size="16" /> <wd-icon name="user" color="#9CA3AF" :size="16" />
<input <input
v-model="loginForm.username" v-model="loginForm.username"
@@ -240,8 +256,7 @@ function togglePwdVisibility(target: 'login' | 'register' | 'confirm') {
<!-- 密码 --> <!-- 密码 -->
<view class="flex flex-col gap-y-1"> <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-100 px-4">
<view class="flex items-center rounded-xl bg-gray-50 px-4">
<wd-icon name="lock" color="#9CA3AF" :size="16" /> <wd-icon name="lock" color="#9CA3AF" :size="16" />
<input <input
v-model="loginForm.password" v-model="loginForm.password"
@@ -264,14 +279,20 @@ function togglePwdVisibility(target: 'login' | 'register' | 'confirm') {
> >
登录 登录
</view> </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>
<!-- 注册表单 --> <!-- 注册表单 -->
<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"> <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-100 px-4">
<view class="flex items-center rounded-xl bg-gray-50 px-4">
<wd-icon name="user" color="#9CA3AF" :size="16" /> <wd-icon name="user" color="#9CA3AF" :size="16" />
<input <input
v-model="registerForm.username" v-model="registerForm.username"
@@ -285,8 +306,7 @@ function togglePwdVisibility(target: 'login' | 'register' | 'confirm') {
<!-- 密码 --> <!-- 密码 -->
<view class="flex flex-col gap-y-1"> <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-100 px-4">
<view class="flex items-center rounded-xl bg-gray-50 px-4">
<wd-icon name="lock" color="#9CA3AF" :size="16" /> <wd-icon name="lock" color="#9CA3AF" :size="16" />
<input <input
v-model="registerForm.password" v-model="registerForm.password"
@@ -304,8 +324,7 @@ function togglePwdVisibility(target: 'login' | 'register' | 'confirm') {
<!-- 确认密码 --> <!-- 确认密码 -->
<view class="flex flex-col gap-y-1"> <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-100 px-4">
<view class="flex items-center rounded-xl bg-gray-50 px-4">
<wd-icon name="lock" color="#9CA3AF" :size="16" /> <wd-icon name="lock" color="#9CA3AF" :size="16" />
<input <input
v-model="registerForm.confirmPassword" v-model="registerForm.confirmPassword"
@@ -328,38 +347,44 @@ function togglePwdVisibility(target: 'login' | 'register' | 'confirm') {
> >
注册 注册
</view> </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>
<!-- 分隔线 --> <!-- 分隔线 -->
<view class="my-6 flex items-center gap-x-3"> <view class="my-4 w-full flex items-center justify-center gap-x-3">
<view class="h-px flex-1 bg-gray-200" /> <view class="h-px flex-1 bg-gray-100" />
<text class="text-xs text-gray-400">其他方式</text> <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>
<!-- 第三方登录 & 游客访问 --> <!-- 第三方登录 & 游客访问 -->
<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 --> <!-- #ifdef MP-WEIXIN -->
<view <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" @click="handleWxLogin"
> >
<wd-icon name="wechat" color="#16A34A" :size="18" /> <wd-icon name="wechat" color="#FFFFFF" :size="18" />
<text>微信一键登录</text> <text>微信一键登录</text>
</view> </view>
<!-- #endif --> <!-- #endif -->
<view <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" @click="handleGuestAccess"
> >
<wd-icon name="user" color="#6B7280" :size="16" />
<text>游客身份访问</text> <text>游客身份访问</text>
</view> </view>
</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> <text class="text-[11px] text-gray-400">登录或注册即代表同意</text>
<view class="flex items-center gap-x-1"> <view class="flex items-center gap-x-1">
<text class="text-[11px] text-gray-500 font-medium">用户协议</text> <text class="text-[11px] text-gray-500 font-medium">用户协议</text>
+10 -11
View File
@@ -58,14 +58,18 @@ const displaySubtitle = computed(() => {
/** 用户状态标签 */ /** 用户状态标签 */
const statusLabel = computed(() => { const statusLabel = computed(() => {
if (hasLogin.value) return '已登录' if (hasLogin.value)
if (hasGuestInfo.value) return '游客' return '已登录'
if (hasGuestInfo.value)
return '游客'
return '未登录' return '未登录'
}) })
const statusColor = computed(() => { const statusColor = computed(() => {
if (hasLogin.value) return 'bg-green-50 text-green-600' if (hasLogin.value)
if (hasGuestInfo.value) return 'bg-amber-50 text-amber-600' return 'bg-green-50 text-green-600'
if (hasGuestInfo.value)
return 'bg-amber-50 text-amber-600'
return 'bg-gray-100 text-gray-500' return 'bg-gray-100 text-gray-500'
}) })
@@ -83,12 +87,7 @@ function handleGuestSaved() {
// ---- 登录/退出 ---- // ---- 登录/退出 ----
function handleLogin() { function handleLogin() {
// #ifdef MP-WEIXIN
tokenStore.wxLogin()
// #endif
// #ifndef MP-WEIXIN
uni.navigateTo({ url: LOGIN_PAGE }) uni.navigateTo({ url: LOGIN_PAGE })
// #endif
} }
function handleLogout() { function handleLogout() {
@@ -130,7 +129,7 @@ function handleNavClick(item: NavItem) {
</script> </script>
<template> <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="uh-shadow-xs box-border flex flex-col rounded-2xl bg-white p-4">
<view class="w-full flex items-center gap-x-3"> <view class="w-full flex items-center gap-x-3">
@@ -172,7 +171,7 @@ function handleNavClick(item: NavItem) {
</view> </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"> <view v-if="hasLogin" class="flex items-center justify-between">
<text class="text-xs text-gray-400">账号{{ userInfo.username }}</text> <text class="text-xs text-gray-400">账号{{ userInfo.username }}</text>
</view> </view>