feat: add static A01 A02 auth UI
This commit is contained in:
rain
@@ -1,6 +1,6 @@
|
||||
# A-01 启动 / 登录引导设计记录
|
||||
|
||||
> 状态：文字注册入口方案已确认，D2 / A-01 进行中；**尚未完成新版效果稿、布局验收或页面实现**。
|
||||
> 状态：A-01 文字注册入口方案、四尺寸静态验收与本地 UI 已完成；A-02 双标签本地 UI 已完成。协议页去向、A-03 至 A-06 的设计、认证接口与 Android 运行时验收仍未完成，D2 继续进行中。
|
||||
>
|
||||
> 本页设计事实的唯一归档位置为本文件。旧的 `2026-07-13-a01-login-guide-design.md` 与 `2026-07-13-a01-login-guide.md` 仅保留为失效历史，不可作为实现或推进下一页的依据。
|
||||
|
||||
@@ -15,10 +15,10 @@
|
||||
## 2. 已确认的页面结构与交互
|
||||
|
||||
- 标题区保留“家谱 / 为家族留存可传承的记忆”，使用美术锚点中的朱砂家祠红头、暖宣纸、古金云纹、墨褐文字与淡墨建筑/竹影层次。
|
||||
- 操作区只保留两个大按钮和一个文字入口：朱砂主按钮“登录”、古金描边按钮“微信登录”，以及其下方的“还没有账号？注册账号”。“注册账号”仅为朱砂红可点击文字，不再作为独立大按钮。
|
||||
- 入口顺序：登录为主入口；微信登录为次入口；注册账号为辅助文字入口。
|
||||
- “登录”前往 `A-02`，且 `A-02` 内固定使用“账号密码登录 / 手机验证码登录”双标签切换，默认显示账号密码登录。微信入口由 `A-03` 承接授权中、取消与失败回跳状态。
|
||||
- 注册账号入口前往 `A-04`；忘记密码属于 `A-05`，不在 A-01 新增入口。
|
||||
- 操作区只保留两个大按钮和一个文字入口：朱砂主按钮“账号密码登录”、古金描边按钮“微信登录”，以及其下方的“还没有账号？注册账号”。“注册账号”仅为朱砂红可点击文字，不再作为独立大按钮。
|
||||
- 入口顺序：账号密码登录为主入口；微信登录为次入口；注册账号为辅助文字入口。
|
||||
- 已勾选协议后，“账号密码登录”前往 `A-02`，且 `A-02` 内固定使用“账号密码登录 / 手机验证码登录”双标签切换，默认显示账号密码登录。微信授权中、取消与失败回跳状态仍归 `A-03`，在 A-03 设计完成前当前入口只提示“微信登录功能准备中”。
|
||||
- 注册账号入口仍归 `A-04`；忘记密码仍归 `A-05`。这两页完成设计前，当前入口只提示页面准备中，不伪造跳转。
|
||||
- 协议必须为用户主动勾选：初始未勾选，可分别打开《家谱用户协议》和《隐私政策》。不得使用“登录即表示同意”或任何默认同意文案；未勾选时登录操作应明确提示用户先确认协议。
|
||||
|
||||
## 3. 固定布局与状态边界
|
||||
@@ -36,9 +36,9 @@
|
||||
| --- | --- | --- | --- |
|
||||
| 初始未勾选 | 首次进入 | 两个按钮、注册文字与空复选框 | 留在 A-01 |
|
||||
| 未同意协议 | 点击登录、微信登录或注册账号 | 提示“请先阅读并同意相关协议”，不跳转、不改变勾选状态 | 留在 A-01 |
|
||||
| 登录已确认协议 | 点击“登录” | 结束 A-01 引导 | A-02，默认账号密码登录标签 |
|
||||
| 微信已确认协议 | 点击“微信登录” | 结束 A-01 引导 | A-03，显示授权中、取消或失败回跳 |
|
||||
| 注册已确认协议 | 点击“注册账号”文字 | 结束 A-01 引导 | A-04 |
|
||||
| 账号密码登录已确认协议 | 点击“账号密码登录” | 结束 A-01 引导 | A-02，默认账号密码登录标签 |
|
||||
| 微信已确认协议 | 点击“微信登录” | 提示“微信登录功能准备中” | 留在 A-01，等待 A-03 设计完成 |
|
||||
| 注册已确认协议 | 点击“注册账号”文字 | 提示“注册页面准备中” | 留在 A-01，等待 A-04 设计完成 |
|
||||
|
||||
### A-01 资产清单
|
||||
|
||||
@@ -60,6 +60,6 @@
|
||||
|
||||
## 5. 推进约束
|
||||
|
||||
- 当前正式工作是 `D2 / A-01 启动登录引导` 的设计；A-02 尚未开始设计，但其职责已明确为两种登录方式的双标签登录页。
|
||||
- `A-01` 与 `A-02` 的本地 UI 已按本记录及实现合同落地；A-02 的最终效果稿与 Android 运行时验收仍待补齐，不能据此推进 A-03。
|
||||
- 只有确定协议页面的最终去向，并完成本文件第 4 节所述的运行时验收后，A-01 才能进入“设计完成”状态。
|
||||
- 用户已于 2026-07-13 授权落地 A-01 欢迎入口与 A-02 双标签登录页的本地 UI；仍不接接口、不执行真实登录、不改 Android 打包配置。实现细节的唯一所有者见 `docs/superpowers/specs/2026-07-13-a01-a02-static-ui-implementation-design.md`。
|
||||
|
||||
+3
-2
@@ -24,10 +24,10 @@
|
||||
|
||||
- 项目：uni-app，目标为 Android，使用 HBuilderX 打包。
|
||||
- 当前阶段：先完成全部页面视觉设计和小屏验收；**暂不恢复接口联调、真实账号联调或 Android 打包**。
|
||||
- 当前正在处理：`D2 / A-01 启动登录引导`设计；`G-01 我的家谱`已于 2026-07-13 验收完成。不得直接进入页面实现。
|
||||
- 当前正在处理：`D2 / A-01 至 A-06 账户与首次使用`设计；`A-01` 与 `A-02` 已于 2026-07-13 落地本地 UI 并等待运行时验收，`G-01 我的家谱`已验收完成。其余页面仍须先完成设计记录与效果稿归档再实现。
|
||||
- 当前不做：iOS、PC 管理端、官网，以及新增业务接口。
|
||||
- 本地展示数据的唯一来源：`data/mock.js`；G01 当前不调用远程 API。
|
||||
- 本目录当前不是 Git 仓库；不要擅自初始化仓库、重置文件或删除既有用户文件。
|
||||
- 本目录为 Git 仓库；不得重置文件或删除既有用户文件，提交时只暂存本轮受管文件。
|
||||
|
||||
## 3. 用户已确认的视觉规则
|
||||
|
||||
@@ -106,3 +106,4 @@ powershell -ExecutionPolicy Bypass -File tests\vue3-entry.ps1
|
||||
- 先前误建的 A-01 规格和“四个独立按钮”执行计划已降为失效历史；2026-07-13 已确认文字注册入口方案，唯一需求所有者为 `docs/design/A01_启动登录引导_设计记录.md`。用户随后授权 A-01 欢迎入口与 A-02 双标签登录页的本地 UI 落地；不得接接口、执行真实登录或替其他未设计页面造功能。
|
||||
- 所有后续页面效果图必须先保存到 `docs/design/screens/`，并在对应页面设计记录写明用途、状态和验收缺口；未完成归档不得展示为可推进的设计成果。
|
||||
- G-01 已于 2026-07-13 经用户确认结项；当前进入 D2 / A-01 的设计工作，接口、真实登录和 Android 打包仍暂停。
|
||||
- A-01 入口页与 A-02 双标签登录页已于 2026-07-13 落地本地 UI：路由入口为 `pages/auth/entry`；只有在 A-01 显式勾选协议后才可进入 A-02。页面不调用接口、不写登录态、不跳转家谱；微信、注册、协议、忘记密码和验证码仅提示待相应页面或能力完成。A-01/A-02 运行时四尺寸验收仍待执行。
|
||||
|
||||
+3
-3
@@ -88,8 +88,8 @@
|
||||
|
||||
### 5.2 账户与首次使用
|
||||
|
||||
- [ ] A-01 启动 / 登录引导页（账号密码、手机号验证码、微信登录入口）。
|
||||
- [ ] A-02 账号密码登录页。
|
||||
- [ ] A-01 启动 / 登录引导页（账号密码、手机号验证码、微信登录入口；本地 UI 已落地，协议页去向与 Android 运行时验收待完成）。
|
||||
- [ ] A-02 账号密码登录页（账号密码 / 手机验证码双标签本地 UI 已落地；最终效果稿、运行时验收与接口待完成）。
|
||||
- [ ] A-03 手机验证码登录页与微信授权回跳状态。
|
||||
- [ ] A-04 注册页与服务协议确认。
|
||||
- [ ] A-05 忘记密码 / 重设密码页。
|
||||
@@ -169,7 +169,7 @@
|
||||
| 阶段 | 交付内容 | 状态 |
|
||||
| --- | --- | --- |
|
||||
| D1 | P-02 至 P-06：统一设计系统、Android 页面壳、公共图标与背景资产 | 进行中（P-02 至 P-04 已完成；P-05、P-06 资产生成中） |
|
||||
| D2 | A-01 至 A-06：账户与首次使用全套页面 | 进行中（A-01 文字注册入口方案、独立资产、固定栅格与四尺寸静态验收已归档；协议页去向与运行时验收待完成；A-02 至 A-06 未开始） |
|
||||
| D2 | A-01 至 A-06：账户与首次使用全套页面 | 进行中（A-01 已完成文字注册入口方案、独立资产、固定栅格、四尺寸静态验收与本地 UI；A-02 双标签本地 UI 已落地；协议页去向、最终效果稿、Android 运行时验收、A-03 至 A-06 与认证接口待完成） |
|
||||
| D3 | G-01 至 G-12：家谱创建、加入、总览与管理全套页面 | 进行中（G-01 已于 2026-07-13 验收完成；G-02 至 G-12 未开始） |
|
||||
| D4 | T-01 至 T-08：世系树、成员、关系编辑全套页面 | 未开始 |
|
||||
| D5 | F-01 至 F-10、R-01 至 R-11：家族内容全套页面 | 未开始 |
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/auth/entry",
|
||||
"style": { "navigationStyle": "custom", "enablePullDownRefresh": false }
|
||||
},
|
||||
{
|
||||
"path": "pages/auth/login",
|
||||
"style": { "navigationStyle": "custom", "enablePullDownRefresh": false }
|
||||
|
||||
@@ -0,0 +1,304 @@
|
||||
<template>
|
||||
<view class="auth-page entry-page">
|
||||
<image class="paper-background" src="/static/assets/backgrounds/auth-rice-paper-v1.jpg" mode="aspectFill" />
|
||||
<image class="scenery-background" src="/static/assets/backgrounds/auth-ink-scenery-v1.png" mode="aspectFill" />
|
||||
|
||||
<view class="auth-content">
|
||||
<view class="auth-header">
|
||||
<image class="header-background" src="/static/assets/backgrounds/auth-ancestral-header-v1.png" mode="aspectFill" />
|
||||
<image class="header-seal" src="/static/assets/icons/brand/jiapu-seal-logo-header.png" mode="aspectFit" />
|
||||
</view>
|
||||
|
||||
<view class="brand-intro">
|
||||
<view class="title-decoration">
|
||||
<view class="cloud cloud-left" />
|
||||
<text class="brand-title">家谱</text>
|
||||
<view class="cloud cloud-right" />
|
||||
</view>
|
||||
<view class="gold-divider"><view class="divider-knot">⌘</view></view>
|
||||
<text class="brand-subtitle">为家族留存可传承的记忆</text>
|
||||
<view class="gold-divider"><view class="divider-knot">⌘</view></view>
|
||||
</view>
|
||||
|
||||
<view class="entry-actions">
|
||||
<view class="auth-button primary-button" hover-class="button-hover" @click="openAccountLogin">
|
||||
<image class="button-icon" src="/static/assets/icons/auth/login-outline-v1.png" mode="aspectFit" />
|
||||
<text>账号密码登录</text>
|
||||
</view>
|
||||
|
||||
<view class="auth-button secondary-button" hover-class="button-hover" @click="prepareWechatLogin">
|
||||
<image class="button-icon wechat-icon" src="/static/assets/icons/auth/wechat-licensed-v1.png" mode="aspectFit" />
|
||||
<text>微信登录</text>
|
||||
</view>
|
||||
|
||||
<view class="register-link" hover-class="link-hover" @click="prepareRegister">
|
||||
<view class="link-line" />
|
||||
<text>还没有账号？注册账号</text>
|
||||
<view class="link-line" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="agreement-row" @click="toggleAgreement">
|
||||
<view class="agreement-check" :class="{ checked: agreed }">
|
||||
<text v-if="agreed">✓</text>
|
||||
</view>
|
||||
<view class="agreement-copy">
|
||||
<text>我已阅读并同意</text>
|
||||
<text class="agreement-link" @click.stop="prepareAgreement">《家谱用户协议》</text>
|
||||
<text>与</text>
|
||||
<text class="agreement-link" @click.stop="prepareAgreement">《隐私政策》</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const agreed = ref(false)
|
||||
|
||||
const toggleAgreement = () => {
|
||||
agreed.value = !agreed.value
|
||||
}
|
||||
|
||||
const requireAgreement = () => {
|
||||
if (agreed.value) return true
|
||||
uni.showToast({ title: '请先阅读并同意相关协议', icon: 'none' })
|
||||
return false
|
||||
}
|
||||
|
||||
const openAccountLogin = () => {
|
||||
if (!requireAgreement()) return
|
||||
uni.navigateTo({ url: '/pages/auth/login?agreed=1' })
|
||||
}
|
||||
|
||||
const prepareWechatLogin = () => {
|
||||
if (!requireAgreement()) return
|
||||
uni.showToast({ title: '微信登录功能准备中', icon: 'none' })
|
||||
}
|
||||
|
||||
const prepareRegister = () => {
|
||||
if (!requireAgreement()) return
|
||||
uni.showToast({ title: '注册页面准备中', icon: 'none' })
|
||||
}
|
||||
|
||||
const prepareAgreement = () => {
|
||||
uni.showToast({ title: '协议页面准备中', icon: 'none' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.auth-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
background: #f7f1e6;
|
||||
}
|
||||
|
||||
.paper-background,
|
||||
.scenery-background {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.paper-background { opacity: 0.96; }
|
||||
.scenery-background { opacity: 0.82; }
|
||||
|
||||
.auth-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(44rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.auth-header {
|
||||
position: relative;
|
||||
height: 196rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-background {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header-seal {
|
||||
position: absolute;
|
||||
top: 34rpx;
|
||||
left: 50%;
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.brand-intro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 118rpx 56rpx 0;
|
||||
color: #3f2c1d;
|
||||
}
|
||||
|
||||
.title-decoration {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
margin: 0 22rpx;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 96rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 12rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.cloud {
|
||||
position: relative;
|
||||
width: 54rpx;
|
||||
height: 24rpx;
|
||||
border: 3rpx solid #dca34d;
|
||||
border-top: 0;
|
||||
border-radius: 0 0 26rpx 26rpx;
|
||||
}
|
||||
|
||||
.cloud::before,
|
||||
.cloud::after {
|
||||
position: absolute;
|
||||
bottom: -3rpx;
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
border: 3rpx solid #dca34d;
|
||||
border-bottom: 0;
|
||||
border-radius: 50% 50% 0 0;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.cloud::before { left: 5rpx; }
|
||||
.cloud::after { right: 5rpx; }
|
||||
.cloud-right { transform: scaleX(-1); }
|
||||
|
||||
.gold-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 460rpx;
|
||||
height: 1rpx;
|
||||
margin: 30rpx 0;
|
||||
background: #d5a34f;
|
||||
}
|
||||
|
||||
.divider-knot {
|
||||
padding: 0 14rpx;
|
||||
color: #d5a34f;
|
||||
background: #f8f2e9;
|
||||
font-size: 32rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
color: #624631;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 32rpx;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.entry-actions {
|
||||
margin: 130rpx 56rpx 0;
|
||||
}
|
||||
|
||||
.auth-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 108rpx;
|
||||
border: 2rpx solid #d8ad63;
|
||||
border-radius: 8rpx;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 36rpx;
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
border-color: #9e170e;
|
||||
background: #b7170d;
|
||||
box-shadow: inset 0 0 0 4rpx #d69b5f;
|
||||
color: #fffaf0;
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
margin-top: 30rpx;
|
||||
background: rgba(255, 252, 245, 0.82);
|
||||
box-shadow: inset 0 0 0 3rpx rgba(229, 190, 133, 0.45);
|
||||
color: #60442f;
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.wechat-icon { width: 52rpx; }
|
||||
.button-hover { opacity: 0.84; }
|
||||
|
||||
.register-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 66rpx;
|
||||
color: #60442f;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 30rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.link-line {
|
||||
width: 74rpx;
|
||||
height: 1rpx;
|
||||
margin: 0 20rpx;
|
||||
background: #d5a34f;
|
||||
}
|
||||
|
||||
.link-hover { opacity: 0.65; }
|
||||
|
||||
.agreement-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
margin-top: auto;
|
||||
padding: 64rpx 44rpx 0;
|
||||
color: #6b5a4a;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.agreement-check {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin: 7rpx 12rpx 0 0;
|
||||
border: 2rpx solid #b88d4b;
|
||||
border-radius: 50%;
|
||||
color: #fffaf0;
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.agreement-check.checked { background: #b7170d; border-color: #b7170d; }
|
||||
.agreement-copy { text-align: center; }
|
||||
.agreement-link { color: #b7170d; }
|
||||
</style>
|
||||
+297
-62
@@ -1,84 +1,319 @@
|
||||
<template>
|
||||
<view class="page-shell login-page">
|
||||
<view class="ceremony-top">
|
||||
<text class="seal-word">谱</text>
|
||||
<text class="eyebrow">家脉绵延 · 生生不息</text>
|
||||
<text class="brand-title">家谱</text>
|
||||
<text class="brand-subtitle">为家族留存可传承的记忆</text>
|
||||
</view>
|
||||
<view class="auth-page login-page">
|
||||
<image class="paper-background" src="/static/assets/backgrounds/auth-rice-paper-v1.jpg" mode="aspectFill" />
|
||||
<image class="scenery-background" src="/static/assets/backgrounds/auth-ink-scenery-v1.png" mode="aspectFill" />
|
||||
|
||||
<view class="login-paper">
|
||||
<view class="section-title">登录家谱</view>
|
||||
<text class="form-note">使用已注册手机号和密码登录。</text>
|
||||
<text class="form-label">手机号</text>
|
||||
<input v-model="phone" class="line-input" type="number" maxlength="11" placeholder="请输入手机号" placeholder-class="placeholder" />
|
||||
<text class="form-label">密码</text>
|
||||
<input v-model="password" class="line-input" password placeholder="请输入密码" placeholder-class="placeholder" />
|
||||
<text v-if="errorMessage" class="error-message">{{ errorMessage }}</text>
|
||||
<button class="primary-button login-button" :loading="isSubmitting" :disabled="isSubmitting" @click="login">进入家谱</button>
|
||||
<text class="login-tip">短信登录将在验证码服务联调后开放。</text>
|
||||
<text class="terms">登录即表示同意《用户协议》与《隐私政策》</text>
|
||||
<view class="auth-content">
|
||||
<view class="auth-header">
|
||||
<image class="header-background" src="/static/assets/backgrounds/auth-ancestral-header-v1.png" mode="aspectFill" />
|
||||
<image class="header-seal" src="/static/assets/icons/brand/jiapu-seal-logo-header.png" mode="aspectFit" />
|
||||
</view>
|
||||
|
||||
<view class="login-panel">
|
||||
<view class="page-heading">
|
||||
<view class="back-button" hover-class="back-hover" @click="goBack">‹</view>
|
||||
<view>
|
||||
<text class="page-title">登录家谱</text>
|
||||
<text class="page-subtitle">欢迎回到家族记忆</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="login-tabs">
|
||||
<view class="login-tab" :class="{ active: activeTab === 'password' }" @click="activeTab = 'password'">
|
||||
<text>账号密码登录</text>
|
||||
</view>
|
||||
<view class="login-tab" :class="{ active: activeTab === 'sms' }" @click="activeTab = 'sms'">
|
||||
<text>手机验证码登录</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="activeTab === 'password'" class="form-content">
|
||||
<view class="input-row">
|
||||
<text class="input-label">账号</text>
|
||||
<input v-model.trim="account" class="auth-input" placeholder="请输入账号或手机号" placeholder-class="placeholder" />
|
||||
</view>
|
||||
<view class="input-row">
|
||||
<text class="input-label">密码</text>
|
||||
<input v-model="password" class="auth-input" password placeholder="请输入密码" placeholder-class="placeholder" />
|
||||
</view>
|
||||
<view class="secondary-action" hover-class="text-hover" @click="prepareForgotPassword">忘记密码</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="form-content">
|
||||
<view class="input-row">
|
||||
<text class="input-label">手机</text>
|
||||
<input v-model.trim="smsPhone" class="auth-input" type="number" maxlength="11" placeholder="请输入手机号" placeholder-class="placeholder" />
|
||||
</view>
|
||||
<view class="input-row code-row">
|
||||
<text class="input-label">验证码</text>
|
||||
<input v-model.trim="verificationCode" class="auth-input" type="number" maxlength="6" placeholder="请输入验证码" placeholder-class="placeholder" />
|
||||
<view class="get-code" hover-class="text-hover" @click="prepareGetCode">获取验证码</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="login-submit" hover-class="button-hover" @click="submitLogin">登录</view>
|
||||
<text class="agreement-reminder">请先在登录引导页阅读并确认协议</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { appApi } from '@/utils/api.js'
|
||||
import { calcMD5 } from '@/utils/md5.js'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
|
||||
const phone = ref('')
|
||||
const activeTab = ref('password')
|
||||
const account = ref('')
|
||||
const password = ref('')
|
||||
const isSubmitting = ref(false)
|
||||
const errorMessage = ref('')
|
||||
const smsPhone = ref('')
|
||||
const verificationCode = ref('')
|
||||
const agreedFromEntry = ref(false)
|
||||
|
||||
const login = async () => {
|
||||
if (!/^1\d{10}$/.test(phone.value)) {
|
||||
uni.showToast({ title: '请输入正确手机号', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!password.value) {
|
||||
uni.showToast({ title: '请输入登录密码', icon: 'none' })
|
||||
return
|
||||
onLoad((options) => {
|
||||
agreedFromEntry.value = options?.agreed === '1'
|
||||
})
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
const prepareForgotPassword = () => {
|
||||
uni.showToast({ title: '忘记密码页面准备中', icon: 'none' })
|
||||
}
|
||||
|
||||
const prepareGetCode = () => {
|
||||
uni.showToast({ title: '获取验证码功能待接入', icon: 'none' })
|
||||
}
|
||||
|
||||
const canSubmit = () => {
|
||||
if (agreedFromEntry.value) return true
|
||||
uni.showToast({ title: '请先返回登录引导确认协议', icon: 'none' })
|
||||
return false
|
||||
}
|
||||
|
||||
const submitLogin = () => {
|
||||
if (!canSubmit()) return
|
||||
|
||||
if (activeTab.value === 'password') {
|
||||
if (!account.value) {
|
||||
uni.showToast({ title: '请输入账号或手机号', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!password.value) {
|
||||
uni.showToast({ title: '请输入密码', icon: 'none' })
|
||||
return
|
||||
}
|
||||
} else {
|
||||
if (!/^1\d{10}$/.test(smsPhone.value)) {
|
||||
uni.showToast({ title: '请输入正确手机号', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!verificationCode.value) {
|
||||
uni.showToast({ title: '请输入验证码', icon: 'none' })
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
isSubmitting.value = true
|
||||
errorMessage.value = ''
|
||||
try {
|
||||
await appApi.loginWithPassword({ phone: phone.value, passwordHash: calcMD5(password.value) })
|
||||
uni.reLaunch({ url: '/pages/genealogy/index' })
|
||||
} catch (error) {
|
||||
errorMessage.value = error.message || '登录失败，请稍后重试'
|
||||
} finally {
|
||||
isSubmitting.value = false
|
||||
}
|
||||
uni.showToast({ title: '登录接口待接入', icon: 'none' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-page { padding-top: 108rpx; }
|
||||
|
||||
.ceremony-top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40rpx 40rpx 76rpx;
|
||||
background: $brand-red;
|
||||
color: #fff9ed;
|
||||
.auth-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
background: #f7f1e6;
|
||||
}
|
||||
|
||||
.seal-word { display: flex; width: 66rpx; height: 66rpx; align-items: center; justify-content: center; box-sizing: border-box; border: 2rpx solid #f1d494; border-radius: 50%; color: #f5ddaa; font-family: serif; font-size: 37rpx; }
|
||||
.eyebrow { margin-top: 24rpx; color: #f8dfad; font-size: 22rpx; letter-spacing: 5rpx; }
|
||||
.brand-title { margin-top: 24rpx; font-family: serif; font-size: 68rpx; font-weight: 700; letter-spacing: 16rpx; }
|
||||
.brand-subtitle { margin-top: 18rpx; color: #f5deae; font-size: 26rpx; letter-spacing: 3rpx; }
|
||||
.paper-background,
|
||||
.scenery-background {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.paper-background { opacity: 0.96; }
|
||||
.scenery-background { opacity: 0.76; }
|
||||
|
||||
.auth-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(44rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.auth-header {
|
||||
position: relative;
|
||||
height: 196rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-background {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header-seal {
|
||||
position: absolute;
|
||||
top: 34rpx;
|
||||
left: 50%;
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
margin: 68rpx 56rpx 0;
|
||||
padding: 46rpx 38rpx 54rpx;
|
||||
border: 2rpx solid #d6ad6c;
|
||||
border-radius: 10rpx;
|
||||
background: rgba(255, 252, 246, 0.78);
|
||||
box-shadow: inset 0 0 0 5rpx rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 20rpx;
|
||||
border: 1rpx solid #d7ae70;
|
||||
border-radius: 50%;
|
||||
color: #9d5b28;
|
||||
font-size: 52rpx;
|
||||
font-weight: 300;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.back-hover { opacity: 0.62; }
|
||||
|
||||
.page-title,
|
||||
.page-subtitle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
color: #3f2c1d;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 46rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin-top: 8rpx;
|
||||
color: #8c7864;
|
||||
font-size: 22rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.login-tabs {
|
||||
display: flex;
|
||||
margin-top: 54rpx;
|
||||
border-bottom: 1rpx solid #dcc29a;
|
||||
}
|
||||
|
||||
.login-tab {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
padding: 0 0 24rpx;
|
||||
color: #89715a;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 29rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-tab.active {
|
||||
color: #a7160c;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.login-tab.active::after {
|
||||
position: absolute;
|
||||
right: 28rpx;
|
||||
bottom: -1rpx;
|
||||
left: 28rpx;
|
||||
height: 4rpx;
|
||||
border-radius: 4rpx;
|
||||
background: #b7170d;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.form-content { margin-top: 26rpx; }
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 96rpx;
|
||||
border-bottom: 1rpx solid #e5d4b7;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
width: 92rpx;
|
||||
color: #674b35;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.auth-input {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
color: #3f2c1d;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.login-paper { margin: -28rpx 28rpx 0; padding: 48rpx 42rpx; border: 1rpx solid $gold-soft; border-radius: 24rpx; background: $paper-white; }
|
||||
.form-note { display: block; margin-top: 14rpx; color: $ink-muted; font-size: 23rpx; }
|
||||
.form-label { display: block; margin-top: 40rpx; color: $ink-muted; font-size: 25rpx; }
|
||||
.line-input { height: 78rpx; border-bottom: 1rpx solid $gold-soft; color: $ink; font-size: 30rpx; }
|
||||
.placeholder { color: #b3a895; }
|
||||
.error-message { display: block; margin-top: 22rpx; color: $brand-red; font-size: 23rpx; line-height: 1.5; }
|
||||
.login-button { margin-top: 48rpx; }
|
||||
.login-tip { display: block; margin-top: 24rpx; color: $ink-muted; font-size: 22rpx; text-align: center; }
|
||||
.terms { display: block; margin-top: 16rpx; color: #a39785; font-size: 21rpx; text-align: center; }
|
||||
|
||||
.code-row .auth-input { min-width: 0; }
|
||||
|
||||
.get-code {
|
||||
flex: 0 0 auto;
|
||||
padding-left: 20rpx;
|
||||
border-left: 1rpx solid #ddc7a3;
|
||||
color: #a7160c;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
|
||||
.secondary-action {
|
||||
margin-top: 28rpx;
|
||||
color: #a7160c;
|
||||
font-size: 25rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-hover { opacity: 0.64; }
|
||||
|
||||
.login-submit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100rpx;
|
||||
margin-top: 60rpx;
|
||||
border: 2rpx solid #9e170e;
|
||||
border-radius: 8rpx;
|
||||
background: #b7170d;
|
||||
box-shadow: inset 0 0 0 4rpx #d69b5f;
|
||||
color: #fffaf0;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 36rpx;
|
||||
letter-spacing: 6rpx;
|
||||
}
|
||||
|
||||
.button-hover { opacity: 0.84; }
|
||||
|
||||
.agreement-reminder {
|
||||
display: block;
|
||||
margin-top: 26rpx;
|
||||
color: #9a8773;
|
||||
font-size: 22rpx;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
$ErrorActionPreference = 'Stop'
|
||||
|
||||
function ConvertFrom-Utf8Base64 {
|
||||
param([string]$Value)
|
||||
return [Text.Encoding]::UTF8.GetString([Convert]::FromBase64String($Value))
|
||||
}
|
||||
|
||||
function Assert-Contains {
|
||||
param(
|
||||
[string]$Content,
|
||||
[string]$Expected,
|
||||
[string]$Message
|
||||
)
|
||||
|
||||
if ($Content -notmatch [regex]::Escape($Expected)) {
|
||||
throw $Message
|
||||
}
|
||||
}
|
||||
|
||||
function Assert-NotContains {
|
||||
param(
|
||||
[string]$Content,
|
||||
[string]$Unexpected,
|
||||
[string]$Message
|
||||
)
|
||||
|
||||
if ($Content -match [regex]::Escape($Unexpected)) {
|
||||
throw $Message
|
||||
}
|
||||
}
|
||||
|
||||
$root = Split-Path -Parent $PSScriptRoot
|
||||
$entryPath = Join-Path $root 'pages/auth/entry.vue'
|
||||
$loginPath = Join-Path $root 'pages/auth/login.vue'
|
||||
$pagesPath = Join-Path $root 'pages.json'
|
||||
|
||||
if (-not (Test-Path -LiteralPath $entryPath)) {
|
||||
throw 'Missing A-01 entry page: pages/auth/entry.vue'
|
||||
}
|
||||
|
||||
$pages = Get-Content -LiteralPath $pagesPath -Raw -Encoding utf8 | ConvertFrom-Json
|
||||
if ($pages.pages[0].path -ne 'pages/auth/entry') {
|
||||
throw 'A-01 entry page must be the first route in pages.json'
|
||||
}
|
||||
|
||||
$entry = Get-Content -LiteralPath $entryPath -Raw -Encoding utf8
|
||||
$login = Get-Content -LiteralPath $loginPath -Raw -Encoding utf8
|
||||
|
||||
$accountPasswordLogin = ConvertFrom-Utf8Base64 '6LSm5Y+35a+G56CB55m75b2V'
|
||||
$wechatLogin = ConvertFrom-Utf8Base64 '5b6u5L+h55m75b2V'
|
||||
$registerLink = ConvertFrom-Utf8Base64 '6L+Y5rKh5pyJ6LSm5Y+377yf5rOo5YaM6LSm5Y+3'
|
||||
$agreementRequired = ConvertFrom-Utf8Base64 '6K+35YWI6ZiF6K+75bm25ZCM5oSP55u45YWz5Y2P6K6u'
|
||||
$wechatPending = ConvertFrom-Utf8Base64 '5b6u5L+h55m75b2V5Yqf6IO95YeG5aSH5Lit'
|
||||
$registerPending = ConvertFrom-Utf8Base64 '5rOo5YaM6aG16Z2i5YeG5aSH5Lit'
|
||||
$agreementPending = ConvertFrom-Utf8Base64 '5Y2P6K6u6aG16Z2i5YeG5aSH5Lit'
|
||||
$smsLogin = ConvertFrom-Utf8Base64 '5omL5py66aqM6K+B56CB55m75b2V'
|
||||
$forgotPassword = ConvertFrom-Utf8Base64 '5b+Y6K6w5a+G56CB'
|
||||
$getCode = ConvertFrom-Utf8Base64 '6I635Y+W6aqM6K+B56CB'
|
||||
$loginPending = ConvertFrom-Utf8Base64 '55m75b2V5o6l5Y+j5b6F5o6l5YWl'
|
||||
$returnToEntry = ConvertFrom-Utf8Base64 '6K+35YWI6L+U5Zue55m75b2V5byV5a+856Gu6K6k5Y2P6K6u'
|
||||
$forgotPasswordPending = ConvertFrom-Utf8Base64 '5b+Y6K6w5a+G56CB6aG16Z2i5YeG5aSH5Lit'
|
||||
$getCodePending = ConvertFrom-Utf8Base64 '6I635Y+W6aqM6K+B56CB5Yqf6IO95b6F5o6l5YWl'
|
||||
$implicitAgreement = ConvertFrom-Utf8Base64 '55m75b2V5Y2z6KGo56S65ZCM5oSP'
|
||||
|
||||
foreach ($requiredEntryCopy in @($accountPasswordLogin, $wechatLogin, $registerLink, $agreementRequired, $wechatPending, $registerPending, $agreementPending)) {
|
||||
Assert-Contains -Content $entry -Expected $requiredEntryCopy -Message "Missing A-01 copy: $requiredEntryCopy"
|
||||
}
|
||||
|
||||
Assert-Contains -Content $entry -Expected "url: '/pages/auth/login?agreed=1'" -Message 'A-01 account login must navigate with agreed=1'
|
||||
if ($entry -match '(?s)\.auth-page\s*\{[^}]*overflow\s*:\s*hidden') {
|
||||
throw 'A-01 must allow vertical scrolling on small screens'
|
||||
}
|
||||
|
||||
foreach ($requiredLoginCopy in @($accountPasswordLogin, $smsLogin, $forgotPassword, $getCode, $loginPending, $returnToEntry, $forgotPasswordPending, $getCodePending)) {
|
||||
Assert-Contains -Content $login -Expected $requiredLoginCopy -Message "Missing A-02 copy: $requiredLoginCopy"
|
||||
}
|
||||
|
||||
if ($login -match '(?s)\.auth-page\s*\{[^}]*overflow\s*:\s*hidden') {
|
||||
throw 'A-02 must allow vertical scrolling on small screens'
|
||||
}
|
||||
|
||||
foreach ($forbidden in @('appApi', 'calcMD5', 'loginWithPassword', 'uni.reLaunch', $implicitAgreement)) {
|
||||
Assert-NotContains -Content $entry -Unexpected $forbidden -Message "A-01 must not contain legacy auth behavior: $forbidden"
|
||||
Assert-NotContains -Content $login -Unexpected $forbidden -Message "A-02 must not contain legacy auth behavior: $forbidden"
|
||||
}
|
||||
|
||||
Write-Output 'A01-A02-UI-CONTRACT PASS'
|
||||
@@ -1,7 +1,7 @@
|
||||
$ErrorActionPreference = 'Stop'
|
||||
|
||||
$root = Split-Path -Parent $PSScriptRoot
|
||||
$requiredFiles = @('utils/config.js', 'utils/session.js', 'utils/genealogy-context.js', 'utils/api.js', 'utils/md5.js', 'pages/auth/login.vue', 'pages/lineage/first-person.vue', 'pages/content/list.vue', 'pages/content/editor.vue')
|
||||
$requiredFiles = @('utils/config.js', 'utils/session.js', 'utils/genealogy-context.js', 'utils/api.js', 'pages/lineage/first-person.vue', 'pages/content/list.vue', 'pages/content/editor.vue')
|
||||
foreach ($file in $requiredFiles) {
|
||||
if (-not (Test-Path (Join-Path $root $file))) {
|
||||
throw "Missing core-flow file: $file"
|
||||
@@ -45,13 +45,6 @@ if ($api -notmatch 'getProfile') {
|
||||
throw 'Missing current-user profile API method'
|
||||
}
|
||||
|
||||
$login = Get-Content -Raw -Encoding UTF8 (Join-Path $root 'pages/auth/login.vue')
|
||||
foreach ($token in @('calcMD5', 'loginWithPassword', 'password', 'isSubmitting')) {
|
||||
if ($login -notmatch [regex]::Escape($token)) {
|
||||
throw "Missing password login behavior: $token"
|
||||
}
|
||||
}
|
||||
|
||||
$pages = Get-Content -Raw -Encoding UTF8 (Join-Path $root 'pages.json')
|
||||
if ($pages -notmatch 'pages/lineage/first-person') {
|
||||
throw 'Missing first-person page route'
|
||||
|
||||
Reference in New Issue
Block a user