feat: add static A01 A02 auth UI

docs/design/A01_启动登录引导_设计记录.md

@@ -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-02`，且 `A-02` 内固定使用“账号密码登录 / 手机验证码登录”双标签切换，默认显示账号密码登录。微信授权中、取消与失败回跳状态仍归 `A-03`，在 A-03 设计完成前当前入口只提示“微信登录功能准备中”。
-- 注册账号入口前往 `A-04`；忘记密码属于 `A-05`，不在 A-01 新增入口。
+- 注册账号入口仍归 `A-04`；忘记密码仍归 `A-05`。这两页完成设计前，当前入口只提示页面准备中，不伪造跳转。
 - 协议必须为用户主动勾选：初始未勾选，可分别打开《家谱用户协议》和《隐私政策》。不得使用“登录即表示同意”或任何默认同意文案；未勾选时登录操作应明确提示用户先确认协议。
 
 ## 3. 固定布局与状态边界
@@ -36,9 +36,9 @@
 | --- | --- | --- | --- |
 | 初始未勾选 | 首次进入 | 两个按钮、注册文字与空复选框 | 留在 A-01 |
 | 未同意协议 | 点击登录、微信登录或注册账号 | 提示“请先阅读并同意相关协议”，不跳转、不改变勾选状态 | 留在 A-01 |
-| 登录已确认协议 | 点击“登录” | 结束 A-01 引导 | A-02，默认账号密码登录标签 |
+| 账号密码登录已确认协议 | 点击“账号密码登录” | 结束 A-01 引导 | A-02，默认账号密码登录标签 |
-| 微信已确认协议 | 点击“微信登录” | 结束 A-01 引导 | A-03，显示授权中、取消或失败回跳 |
+| 微信已确认协议 | 点击“微信登录” | 提示“微信登录功能准备中” | 留在 A-01，等待 A-03 设计完成 |
-| 注册已确认协议 | 点击“注册账号”文字 | 结束 A-01 引导 | A-04 |
+| 注册已确认协议 | 点击“注册账号”文字 | 提示“注册页面准备中” | 留在 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`。

docs/交接记录.md

@@ -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 运行时四尺寸验收仍待执行。

docs/规划.md

@@ -88,8 +88,8 @@
 
 ### 5.2 账户与首次使用
 
-- [ ] A-01 启动 / 登录引导页（账号密码、手机号验证码、微信登录入口）。
+- [ ] A-01 启动 / 登录引导页（账号密码、手机号验证码、微信登录入口；本地 UI 已落地，协议页去向与 Android 运行时验收待完成）。
-- [ ] A-02 账号密码登录页。
+- [ ] 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：家族内容全套页面 | 未开始 |

pages.json

@@ -1,5 +1,9 @@
 {
   "pages": [
+    {
+      "path": "pages/auth/entry",
+      "style": { "navigationStyle": "custom", "enablePullDownRefresh": false }
+    },
     {
       "path": "pages/auth/login",
       "style": { "navigationStyle": "custom", "enablePullDownRefresh": false }

pages/auth/entry.vue

@@ -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>

pages/auth/login.vue

@@ -1,84 +1,319 @@
 <template>
-  <view class="page-shell login-page">
+  <view class="auth-page login-page">
-    <view class="ceremony-top">
+    <image class="paper-background" src="/static/assets/backgrounds/auth-rice-paper-v1.jpg" mode="aspectFill" />
-      <text class="seal-word">谱</text>
+    <image class="scenery-background" src="/static/assets/backgrounds/auth-ink-scenery-v1.png" mode="aspectFill" />
-      <text class="eyebrow">家脉绵延 · 生生不息</text>
+
-      <text class="brand-title">家谱</text>
+    <view class="auth-content">
-      <text class="brand-subtitle">为家族留存可传承的记忆</text>
+      <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-paper">
+      <view class="login-panel">
-      <view class="section-title">登录家谱</view>
+        <view class="page-heading">
-      <text class="form-note">使用已注册手机号和密码登录。</text>
+          <view class="back-button" hover-class="back-hover" @click="goBack">‹</view>
-      <text class="form-label">手机号</text>
+          <view>
-      <input v-model="phone" class="line-input" type="number" maxlength="11" placeholder="请输入手机号" placeholder-class="placeholder" />
+            <text class="page-title">登录家谱</text>
-      <text class="form-label">密码</text>
+            <text class="page-subtitle">欢迎回到家族记忆</text>
-      <input v-model="password" class="line-input" password placeholder="请输入密码" placeholder-class="placeholder" />
+          </view>
-      <text v-if="errorMessage" class="error-message">{{ errorMessage }}</text>
+        </view>
-      <button class="primary-button login-button" :loading="isSubmitting" :disabled="isSubmitting" @click="login">进入家谱</button>
+
-      <text class="login-tip">短信登录将在验证码服务联调后开放。</text>
+        <view class="login-tabs">
-      <text class="terms">登录即表示同意《用户协议》与《隐私政策》</text>
+          <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 { onLoad } from '@dcloudio/uni-app'
-import { calcMD5 } from '@/utils/md5.js'
 
-const phone = ref('')
+const activeTab = ref('password')
+const account = ref('')
 const password = ref('')
-const isSubmitting = ref(false)
+const smsPhone = ref('')
-const errorMessage = ref('')
+const verificationCode = ref('')
+const agreedFromEntry = ref(false)
 
-const login = async () => {
+onLoad((options) => {
-  if (!/^1\d{10}$/.test(phone.value)) {
+  agreedFromEntry.value = options?.agreed === '1'
-    uni.showToast({ title: '请输入正确手机号', icon: 'none' })
+})
+
+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' })
+      uni.showToast({ title: '请输入密码', icon: 'none' })
       return
     }
-
+  } else {
-  isSubmitting.value = true
+    if (!/^1\d{10}$/.test(smsPhone.value)) {
-  errorMessage.value = ''
+      uni.showToast({ title: '请输入正确手机号', icon: 'none' })
-  try {
+      return
-    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
     }
+    if (!verificationCode.value) {
+      uni.showToast({ title: '请输入验证码', icon: 'none' })
+      return
+    }
+  }
+
+  uni.showToast({ title: '登录接口待接入', icon: 'none' })
 }
 </script>
 
 <style scoped lang="scss">
-.login-page { padding-top: 108rpx; }
+.auth-page {
-
+  position: relative;
-.ceremony-top {
+  min-height: 100vh;
-  display: flex;
+  background: #f7f1e6;
-  flex-direction: column;
-  align-items: center;
-  padding: 40rpx 40rpx 76rpx;
-  background: $brand-red;
-  color: #fff9ed;
 }
 
-.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; }
+.paper-background,
-.eyebrow { margin-top: 24rpx; color: #f8dfad; font-size: 22rpx; letter-spacing: 5rpx; }
+.scenery-background {
-.brand-title { margin-top: 24rpx; font-family: serif; font-size: 68rpx; font-weight: 700; letter-spacing: 16rpx; }
+  position: absolute;
-.brand-subtitle { margin-top: 18rpx; color: #f5deae; font-size: 26rpx; letter-spacing: 3rpx; }
+  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; }
+.code-row .auth-input { min-width: 0; }
-.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; }
+.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>

tests/a01-a02-ui-contract.ps1

@@ -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'

tests/core-flow-contract.ps1

@@ -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'