L.star
f2034c6709
本次提交对用户认证与引导流程进行了全面的重构和功能增强。
核心变更:
1. **文件结构重构:**
* 将所有登录、注册、引导相关的页面组件（共9个）统一移动到了新的 \shihuashishuo-ui/src/views/通用基础页/\ 目录下，使项目结构更清晰。
* 删除了旧路径下的相应文件。
2. **新增功能页面:**
* **密码登录:** 新增了 \PasswordLoginView-密码登录页.vue\，为用户提供了手机验证码之外的另一种登录选择。
* **忘记密码:** 新增了 \ForgotPasswordView-忘记密码页.vue\，包含一个完整的、带验证码校验的两步式密码重设流程。
* **第三方授权:** 新增了 \ThirdPartyAuthView-授权登录页.vue\ 作为处理社交登录的中转页。
3. **功能增强与修复:**
* **登录页 (\LoginView\):**
* UI更新：将原有的微信一键登录按钮替换为包含微信、QQ等多种方式的社交登录图标组。
* 交互增强：为获取验证码按钮增加了60秒倒计时功能，并对手机号和验证码输入框增加了长度和字符类型限制。
* **闪屏页 (\SplashView\):**
* UI更新：根据新的设计稿，将页面重构为包含Logo、应用名称和Slogan的居中布局，并增加了渐变背景效果。
* **路由 (\
outer/index.ts\):**
* 全面更新了所有相关页面的导入路径以匹配新的文件结构。
* 移除了对已废弃的 \HomeView-首页-1.0.vue\ 的引用，修复了编译错误。
4. **文档更新:**
* 新增并全面重写了 \1.1.2通用基础页面-原型功能说明文档-2.0.md\，使其与当前的代码实现和功能逻辑完全保持一致，为后续开发提供了准确的参考。
165 lines
3.0 KiB
Vue
165 lines
3.0 KiB
Vue
<template>
|
||
<div class="login-page">
|
||
<div class="welcome-section">
|
||
<h2>食话食说 Talk of Food</h2>
|
||
<p>守护您和家人的每一餐</p>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<div class="input-group">
|
||
<span class="icon">📱</span>
|
||
<input type="tel" placeholder="请输入手机号" />
|
||
</div>
|
||
<div class="input-group">
|
||
<span class="icon">✉️</span>
|
||
<input type="text" placeholder="请输入验证码" />
|
||
<button class="get-code-btn">获取验证码</button>
|
||
</div>
|
||
<button class="login-btn">登录 / 注册</button>
|
||
</div>
|
||
|
||
<div class="social-login-section">
|
||
<div class="divider">或</div>
|
||
<button class="wechat-login-btn" @click="wechatLogin">
|
||
<span class="wechat-icon">🟢</span>
|
||
微信一键登录
|
||
</button>
|
||
</div>
|
||
|
||
<div class="policy-section">
|
||
<input type="checkbox" id="policy-check" checked />
|
||
<label for="policy-check">
|
||
我已阅读并同意
|
||
<router-link to="/policy">用户协议</router-link> 和
|
||
<router-link to="/policy">隐私政策</router-link>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useRouter } from 'vue-router';
|
||
|
||
const router = useRouter();
|
||
|
||
const wechatLogin = () => {
|
||
router.push('/onboarding');
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.login-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 100px 40px 20px;
|
||
box-sizing: border-box;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.welcome-section {
|
||
text-align: center;
|
||
margin-bottom: 40px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.welcome-section h2 {
|
||
font-size: 24px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.welcome-section p {
|
||
color: #6b7280;
|
||
}
|
||
|
||
.form-section {
|
||
width: 100%;
|
||
max-width: 400px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.input-group {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
border: 1px solid #d1d5db;
|
||
border-radius: 8px;
|
||
padding: 12px 10px;
|
||
}
|
||
|
||
.input-group .icon {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.input-group input {
|
||
border: none;
|
||
outline: none;
|
||
flex-grow: 1;
|
||
background: transparent;
|
||
min-width: 0;
|
||
}
|
||
|
||
.get-code-btn {
|
||
background: none;
|
||
border: none;
|
||
color: #22c55e;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.login-btn {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
background-color: #22c55e;
|
||
color: white;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.social-login-section {
|
||
width: 100%;
|
||
max-width: 400px;
|
||
text-align: center;
|
||
margin-top: 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.divider {
|
||
color: #9ca3af;
|
||
margin-bottom: 10px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.wechat-login-btn {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: 1px solid #d1d5db;
|
||
border-radius: 8px;
|
||
background-color: white;
|
||
cursor: pointer;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.wechat-icon {
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.policy-section {
|
||
margin-top: 20px;
|
||
font-size: 12px;
|
||
color: #6b7280;
|
||
text-align: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.policy-section a {
|
||
color: #22c55e;
|
||
text-decoration: none;
|
||
}
|
||
</style> |