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:
@@ -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
@@ -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
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user