diff --git a/docs/验证20%记录.md b/docs/验证20%记录.md new file mode 100644 index 0000000..88030f5 --- /dev/null +++ b/docs/验证20%记录.md @@ -0,0 +1,30 @@ +# 登录后体验验证 20% 记录 + +## 本轮目标 + +围绕“登录后页面层级不清、不同尺寸下显得拥挤”的反馈，先完成不改变业务接口的体验验证与 P0/P1 收口。 + +## 已完成 + +1. 登录后的真实去向 + - 仅有一部真实家谱时直接进入该家谱主页；多部或无家谱时进入“我的家谱”。 + - 个人中心不再展示无家谱上下文的演示数据或业务入口。 +2. 当前家谱上下文 + - 家谱业务页在页头展示当前家谱，并可回到“我的家谱”切换。 + - 个人中心、我的家谱、当前家谱主页使用可返回的三级路径。 +3. 响应式导航 + - 1320px 及以下的个人中心页面使用统一的折叠菜单，避免当前家谱、导航和操作按钮相互挤压。 + - 720px 及以下隐藏与顶部菜单重复的家谱侧栏，让实际内容进入首屏。 + - 折叠菜单显示当前所在页；“我的家谱”页移除页头重复的创建入口。 + +## 验证方式 + +- 自动回归：`npm test`，298 项通过。 +- 真实流程：登录后进入真实家谱列表、选择家谱主页，并在 1249px 桌面与 390px 手机视口检查导航和首屏。 +- 验收使用隔离浏览器配置；测试账号、登录令牌及真实家谱标识不写入仓库。 + +## 后续优先级 + +1. 统一业务页的加载中、空数据、请求失败和无权限状态，减少页面之间的割裂感。 +2. 收口表单标签、必填提示、提交中与提交失败反馈，优先覆盖登录、创建/加入家谱和内容发布。 +3. 继续用真实权限角色验收成员、管理员与非成员的访问边界。 diff --git a/profile-content.html b/profile-content.html index bd9f087..4b41d64 100644 --- a/profile-content.html +++ b/profile-content.html @@ -15,15 +15,15 @@ >
- 个人中心账户资料创建家谱 diff --git a/profile-data.html b/profile-data.html index ba1d99b..9d48d84 100644 --- a/profile-data.html +++ b/profile-data.html @@ -15,15 +15,15 @@ >
- 个人中心账户资料创建家谱 diff --git a/profile-families.html b/profile-families.html index 5d2cf6b..cb13fa0 100644 --- a/profile-families.html +++ b/profile-families.html @@ -15,25 +15,24 @@ >
- 个人中心创建家谱 + 账户资料
-
Personal Center
+

我的家谱

diff --git a/profile-family-admin.html b/profile-family-admin.html index e1006be..d350265 100644 --- a/profile-family-admin.html +++ b/profile-family-admin.html @@ -12,8 +12,8 @@
- -
个人中心世系人物
+ +
账户资料世系人物
diff --git a/profile-family-home.html b/profile-family-home.html index 7cbccaa..9d2ae49 100644 --- a/profile-family-home.html +++ b/profile-family-home.html @@ -22,7 +22,7 @@ >帮助与服务
- 返回中心账户中心发布动态
@@ -30,12 +30,14 @@
-
Family Home
+
-

家谱主页

+

正在读取家谱

- 后台家谱主页，用于进入世系、相册、家族圈、内容管理和成员协作。 + 当前家谱的工作区，用于进入世系、相册、家族圈、内容管理和成员协作。

diff --git a/profile-join-review.html b/profile-join-review.html index 874c90f..2195f52 100644 --- a/profile-join-review.html +++ b/profile-join-review.html @@ -41,8 +41,8 @@
diff --git a/profile-messages.html b/profile-messages.html index 0ec343f..09acfac 100644 --- a/profile-messages.html +++ b/profile-messages.html @@ -15,8 +15,8 @@
- 个人中心 + 消息中心 创建家谱
diff --git a/profile-services.html b/profile-services.html index a1c6d6c..14cdda1 100644 --- a/profile-services.html +++ b/profile-services.html @@ -15,8 +15,8 @@ >
- 个人中心账户资料创建家谱 @@ -63,11 +63,12 @@

常用服务

- 享 +
+ 享

应用分享

-

邀请好友使用，了解应用下载和分享奖励。

 +

邀请奖励服务正在开发中，当前不提供不可用的跳转入口。

+ 即将开放 +
馈

意见反馈

diff --git a/profile.html b/profile.html index 54e28c8..3775b07 100644 --- a/profile.html +++ b/profile.html @@ -1,4 +1,4 @@ - + @@ -15,8 +15,8 @@ >
- 个人中心 - 创建家谱 + 账户资料 + 创建家谱
@@ -36,29 +34,33 @@
-
+
-
鹿
+
-
Personal Center
-

鹿野 Loyel

-

- 管理家谱、亲属资料、家族内容和协作消息。APP - 里的核心功能都收纳在这里，适合 PC 端集中处理。 -

+
个人中心
+

正在加载账户

+

账户资料与家谱工作区分开呈现。进入家谱后，再处理成员、内容和协作事务。

- 血亲第二代 顺字辈已绑定账号 + 已登录账户资料以实际接口为准 +
+

正在读取账户资料…

+
+ 进入我的家谱 + 完善个人资料
-
-
2我的家谱
-
7待处理
-
18已发布内容
-
86%资料完善度
+
+
下一步
+

从家谱开始

+

没有家谱时可创建或申请加入；有多个家谱时，请先选择本次要处理的家谱。

+
+ 创建家谱 + 申请加入 +
@@ -66,216 +68,51 @@
-
+

我的家谱

-

- 对应 APP - 首页和家谱主页，进入后可查看家谱主页、世系图、相册和家族圈。 -

+

先从真实列表选择家谱，再进入对应的主页、世系图、成员和内容管理。

查看全部 -
- 创建家谱加入家谱 -
- -
我 的
家 谱
+ +
选 择
家 谱

进入我的家谱

-

- 从家谱入口选择真实家谱后，再查看主页、成员、世系图和家族内容。 -

+

列表只展示当前账户真实可访问的家谱，避免把示例数据当成自己的内容。

- 家谱主页家族圈成员管理 + 选择家谱进入主页处理事务
-
+
-

家族管理

-

- 把 APP 里的世代、管理员、权限、入谱审核集中到一个管理区。 -

+

账户资料

+

以下字段由账户资料接口返回；没有填写时会明确显示“待填写”。

- 进入管理 + 编辑资料
-
- 世 -

世系图

-

查看成员世系、搜索成员、进入树谱模式。

 - 辈 -

字辈谱

-

管理字辈、统计各代人数和成员分布。

 - 代 -

管理世代

-

设置世代、调整始祖世代、维护排行。

 - 审 -

入谱审核

-

处理当前家谱的待审核加入申请。

 - 权 -

管理员权限

-

分配全权、全系、支系管理员权限。

 - 邀 -

邀请家人

-

生成邀请入口，引导亲人激活使用。

 -
-
- -
-
-
-

内容发布

-

- 对应 APP - 家谱主页中的谱文、视频、相册、功德录、贺礼邀请、成长日志等内容入口。 -

-
- 发布中心 -
-
- 谱文 -

撰写谱文与族史

-

沉淀族训、谱序、谱论、恩荣录等家族文献。

 - 相册 -

家族相册

-

新建相册、上传照片、编辑封面。

 - 视频 -

家族视频

-

发布视频、管理家族影像。

 - 功德 -

功德录

-

记录功德人、事迹与纪念内容。

 - 贺礼 -

贺礼邀请

-

管理婚礼、生日、升学等贺礼。

 - 动态 -

发布动态

-

面向家族圈发布图文近况。

 - 日志 -

成长日志

-

记录成员成长和人生节点。

 - 备忘 -

人亲簿 / 备忘录

-

保存亲友往来和家族事务。

 -
-
- -
-
-
-
-

个人资料

-

来自 APP 的个人资料、亲属、完善资料和绑定账号流程。

-
- 编辑资料 -
-
-

绑定账号已绑定

-

姓名鹿野 Loyel

-

出生日期待填写

-

现居地区待填写

-

亲属关系父亲 2 人

-

补充资料待完善 4 项

-
-
-
-
-
-

帮助与服务

-

我的页面中的常用功能。

-
-
-
- 应用分享 - 意见反馈 - 帮助中心 - 安全设置 -
+
+

绑定账号加载中

+

昵称加载中

+

出生日期加载中

+

现居地区加载中

@@ -294,16 +131,11 @@

联系我们

@@ -320,27 +152,13 @@
')); - assert.match(profile, /进入我的家谱/); - assert.doesNotMatch(profile, /四川武胜汤氏族|四川达州刘氏族/); - assert.match(profile, /href="profile-family-admin\.html" data-genealogy-context-link/); + assert.match(profileMain, /进入我的家谱/); + assert.match(profileMain, /href="profile-families\.html"/); + assert.doesNotMatch(profileMain, /鹿野 Loyel|待处理|已发布内容|资料完善度/); + assert.doesNotMatch(profileMain, /href="profile-(?:article|album|video|merit|gift|join-review)\.html"/); assert.match(content, /href="profile-feed\.html" data-feature-link="available" data-genealogy-context-link/); assert.match(familyHome, /href="profile-family-admin\.html" data-genealogy-context-link/); assert.match(familyEntry, /href="profile-family-admin\.html" data-genealogy-context-link/); assert.match(profileCommon, /function getGenealogyEntryUrl\(href\)/); assert.match(profileCommon, /genealogyId \? withGenealogyId\([^\n]+\) : getGenealogyEntryUrl\(/); + assert.match(read('public/js/genealogy-entry-pages.js'), /if \(shouldRedirectToLogin\(api\)\) \{\s+redirectToLogin\(api\);/); +}); + +test('当前家谱名称从真实家谱响应写入会话上下文，并在页头提供切换入口', () => { + const common = read('public/js/profile-common.js'); + const entry = read('public/js/genealogy-entry-pages.js'); + const familyHome = read('public/js/family-home-pages.js'); + + assert.match(common, /genealogyContextStorageKey/); + assert.match(common, /function setCurrentGenealogyContext\(genealogyId, genealogyName\)/); + assert.match(common, /class="profile-current-genealogy"/); + assert.match(common, /href="profile-families\.html"/); + assert.match(entry, /data-genealogy-name=/); + assert.match(entry, /root\.ProfileUI\.setCurrentGenealogyContext\(verified\.genealogyId, verified\.genealogyName\)/); + assert.match(familyHome, /root\.ProfileUI\.setCurrentGenealogyContext\(result\.overview\.genealogyId, result\.overview\.genealogyName\)/); +}); + +test('小屏导航提供统一入口，并且所有家谱内链接继续透传当前上下文', () => { + const common = read('public/js/profile-common.js'); + const css = read('public/css/public.css'); + + assert.match(common, /data-profile-mobile-menu-toggle/); + assert.match(common, /data-profile-mobile-menu/); + assert.match(common, /profile-family-home\.html" data-genealogy-context-link/); + assert.match(common, /profile-family-admin\.html" data-genealogy-context-link/); + assert.match(css, /\.profile-mobile-menu\.is-open/); + assert.match(css, /\.profile-current-genealogy/); }); diff --git a/tests/layout-responsiveness.test.js b/tests/layout-responsiveness.test.js new file mode 100644 index 0000000..b6a0fe8 --- /dev/null +++ b/tests/layout-responsiveness.test.js @@ -0,0 +1,36 @@ +const assert = require('node:assert/strict'); +const fs = require('node:fs'); +const path = require('node:path'); +const test = require('node:test'); + +const root = path.join(__dirname, '..'); + +function read(file) { + return fs.readFileSync(path.join(root, file), 'utf8'); +} + +test('profile navigation has a medium-desktop compact mode and no mobile duplicate sidebar', () => { + const publicCss = read('public/css/public.css'); + const moduleCss = read('public/css/profile-module.css'); + + assert.match( + publicCss, + /@media \(max-width: 1320px\) \{[\s\S]*?\.page-profile \.nav-links,[\s\S]*?\.page-profile-module \.nav-links \{\s*display: none;/ + ); + assert.match( + moduleCss, + /@media \(max-width: 720px\) \{[\s\S]*?\.page-profile-module \.module-nav \{\s*display: none;/ + ); +}); + +test('my genealogies keeps one primary create action and the compact menu marks the current page', () => { + const page = read('profile-families.html'); + const header = page.slice(0, page.indexOf('')); + const common = read('public/js/profile-common.js'); + const publicCss = read('public/css/public.css'); + + assert.doesNotMatch(header, /href="profile-create-family\.html"/); + assert.match(page, /module-title-row[\s\S]*?href="profile-create-family\.html"/); + assert.match(common, /addClass\('is-current'\)\.attr\('aria-current', 'page'\)/); + assert.match(publicCss, /\.profile-mobile-menu a\.is-current/); +}); diff --git a/tests/profile-pages.test.js b/tests/profile-pages.test.js index eee7eed..76415e8 100644 --- a/tests/profile-pages.test.js +++ b/tests/profile-pages.test.js @@ -38,6 +38,16 @@ test('profile view reads only the documented profile fields', () => { }); }); +test('profile loading failure has an explicit non-demo view', () => { + assert.deepEqual(ProfilePages.buildUnavailableProfileView(), { + displayName: '账户资料暂时无法读取', + avatarText: '！', + phone: '暂无数据', + birthday: '暂无数据', + regionText: '暂无数据' + }); +}); + test('profile update emits only the six fields defined by ProfileUpdateBody', () => { assert.deepEqual(ProfilePages.buildProfileUpdateBody({ nickName: '小林', diff --git a/tests/stage6-navigation.test.js b/tests/stage6-navigation.test.js index 88fb0e3..a93e2f3 100644 --- a/tests/stage6-navigation.test.js +++ b/tests/stage6-navigation.test.js @@ -26,12 +26,12 @@ test('家谱主页公开谱文、相册、视频、功德和祭祀活动入口 }); }); -test('个人中心功能入口没有把家谱业务页当作无上下文普通链接', () => { +test('个人中心先引导进入真实家谱列表，不展示无上下文的业务入口', () => { const page = read('profile.html'); + const main = page.slice(0, page.indexOf('
')); - ['profile-article.html', 'profile-album.html', 'profile-video.html', 'profile-merit.html', 'profile-gift.html'].forEach((href) => { - assert.match(page, new RegExp('href="' + href.replace('.', '\\.') + '"[^>]*data-genealogy-context-link'), `${href} 缺少个人中心上下文入口`); - }); + assert.match(main, /href="profile-families\.html"/); + assert.doesNotMatch(main, /href="profile-(?:article|album|video|merit|gift|join-review)\.html"/); }); test('加入申请与管理员审核入口使用真实页面和家谱上下文', () => { @@ -42,7 +42,7 @@ test('加入申请与管理员审核入口使用真实页面和家谱上下文', assert.match(families, /href="profile-join-family\.html"/); assert.doesNotMatch(families, /邀请码|分享码|手填.*ID/); assert.match(familyAdmin, /href="profile-join-review\.html"[^>]*data-genealogy-context-link/); - assert.match(profile, /href="profile-join-review\.html"[^>]*data-genealogy-context-link/); + assert.match(profile, /href="profile-families\.html"/); }); test('帮助中心和服务中心开放同一反馈记录闭环', () => { @@ -54,3 +54,18 @@ test('帮助中心和服务中心开放同一反馈记录闭环', () => { assert.match(services, /href="profile-feedback\.html"[^>]*data-feature-link="available"/); assert.doesNotMatch(help + services, /手填.*feedbackId|独立.*ticket.*接口/i); }); + +test('个人中心、我的家谱和当前家谱主页使用明确且可返回的三级路径', () => { + const account = read('profile.html'); + const families = read('profile-families.html'); + const familyHome = read('profile-family-home.html'); + const familyHomeRuntime = read('public/js/family-home-pages.js'); + const coreHeaders = [account, families, familyHome].map((page) => page.slice(0, page.indexOf(''))).join(''); + + assert.match(account, /个人中心<\/a>/); + assert.match(account, /我的家谱<\/a>/); + assert.match(families, /