cnbugs/uni-halo
1
0
Fork 0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-07-26 20:10:51 +08:00
Code Issues Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-detail/uh-guest-info-panel.vue
-3
View File
@@ -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"
src/pages/auth/login.vue
+55 -30
View File
@@ -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>
src/pages/mine/mine.vue
+10 -11
View File
@@ -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>