From d040507cb8bd4e0f95d33b7fb502bb447b91cd84 Mon Sep 17 00:00:00 2001 From: rain <982766701@qq.com> Date: Sun, 13 Sep 2026 19:41:13 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- design-qa.md | 39 + index-modern.html | 556 ++++++++++++++ index.html | 654 +++++------------ profile-album-edit.html | 3 +- profile-article-edit.html | 3 +- profile-feed-edit.html | 4 +- profile-gift-edit.html | 3 +- profile-growth-edit.html | 3 +- profile-memo-edit.html | 3 +- profile-relative-edit.html | 3 +- profile-video-edit.html | 5 +- public/css/index.css | 975 ++++++++++++++++++++++++- public/css/profile-module.css | 31 + public/css/public.css | 6 +- public/js/album-pages.js | 3 +- public/js/article-pages.js | 8 +- public/js/attachment-editor.js | 182 +++++ public/js/ceremony-admin-pages.js | 9 +- public/js/feed-pages.js | 14 +- public/js/growth-pages.js | 19 +- public/js/memo-pages.js | 22 +- public/js/page-effects.js | 7 +- public/js/relative-pages.js | 22 +- public/js/upload-pages.js | 6 +- public/js/video-pages.js | 11 +- tests/attachment-edit-contract.test.js | 49 ++ tests/attachment-editor-browser.mjs | 149 ++++ 27 files changed, 2238 insertions(+), 551 deletions(-) create mode 100644 design-qa.md create mode 100644 index-modern.html create mode 100644 public/js/attachment-editor.js create mode 100644 tests/attachment-edit-contract.test.js create mode 100644 tests/attachment-editor-browser.mjs diff --git a/design-qa.md b/design-qa.md new file mode 100644 index 0000000..81b6626 --- /dev/null +++ b/design-qa.md @@ -0,0 +1,39 @@ +# 首页设计还原 QA + +## 对照基准 + +- 设计源:用户在当前对话提供的桌面首页设计图,红色文字和箭头作为替换与结构调整标注。 +- 实现基线:原首页 `index-modern.html` 的品牌色、字体、卡片质感和 `public/js/page-effects.js` 交互。 +- 桌面审查截图:`artifacts/homepage-final-review-full.png`,CSS 视口 1440 × 2200,DPR 1。 +- 移动审查截图:`artifacts/homepage-final-review-mobile.png`,CSS 视口 500 × 1600,DPR 1。 +- 页面状态:未登录初始状态。 + +## 结构对照 + +- 页面沿用原首页 1280px 宽屏容器,顺序为双层导航、首屏、四个主入口、第一条九格广告栏、六个内容入口、推荐与友情链接、第二条九格广告栏、页脚。 +- 已删除设计图没有的家谱广场、文章列表、姓氏百科、相关推荐大卡、下载大区块。 +- “我的家谱”是独立强调入口,链接 `profile-families.html`,承担查看、新建和管理全部家谱。 +- 红色标注按替换文案处理;被替换的旧标题没有在同一卡片中保留。 + +## 视觉与交互对照 + +- 保留原首页的暖纸色、朱红渐变导航、宋体标题、黑体正文、宽屏留白、圆角卡片、层次阴影与半透明面板。 +- 首屏按设计图重组为正文、二维码、原有蓝色家谱封面、祠堂和家族记忆图片。 +- 保留原首页的 `tilt-card` 指针倾斜、按钮磁吸、图片悬停缩放、移动菜单和 reduced-motion 行为。 +- 桌面页脚链接与备案信息已恢复居中,不受原全局链接布局影响。 +- 主入口图片按左侧内容定位,避免服务、视频和相册标题被居中裁切;入口区、内容卡和广告栏已压缩无效留白。 +- 两组九格广告栏均使用项目已有广告图片,不再显示文字占位块。 +- 页脚链接区改为完整浅色横条,消除了深色背景在两侧提前露出的断层。 + +## 响应式与可访问性 + +- 1120px 以下主入口和广告栏分栏;720px 以下首屏、入口和内容卡改为单列。 +- 浏览器导航结构专项检查通过,移动断点继续沿用原首页规则。 +- 图片提供替代文本;二维码入口、导航、广告位和内容卡均使用链接语义;焦点样式沿用公共样式。 + +## 剩余差异 + +- P3:设计图右下角为多人家族合影,仓库没有对应素材,当前继续使用原有家族记忆图片。 +- P3:原首页交互动效在截图中不可见,但已通过复用原脚本和交互类保留。 + +final result: passed diff --git a/index-modern.html b/index-modern.html new file mode 100644 index 0000000..f6d77b8 --- /dev/null +++ b/index-modern.html @@ -0,0 +1,556 @@ + + + + + + 代代相传家谱_在线修家谱_家谱查询_姓氏寻根_祠堂祭祀 + + + + + + +
+
富众鑫科技
+
+ + +
+
+
+
+
数字家谱与家族文化门户
+

+ 一部会生长的
数字家谱 +

+

+ 把姓氏源流、世系关系、字辈排行、宣传相册、谱文故事与亲人动态整理在一起,让家族的来处清晰可见,让记忆可以继续传下去。 +

+
+
正在记录
+
+
+
寻根问祖
+
字辈排行
+
世系关系
+
宣传相册
+
谱文故事
+
亲人动态
+
寻根问祖
+
字辈排行
+
世系关系
+
宣传相册
+
谱文故事
+
亲人动态
+
+
+
+
+ 1创建家谱2邀请亲人3共同传承 +
+ +
+
家谱广场浏览公开家族
+
姓氏百科了解姓氏源流
+
家族文化阅读传承故事
+
+
+
+
+
+
+ 家族祠堂 +
+ + 宣传影像 + 观看宣传视频 + +
+

查找公开家谱

+ + 输入姓氏、地区或家谱名称搜索 + +
+
+ 四川成都陈氏族共修入 128 人 +
+
+ 湖广刘氏家谱收录 6 代字辈 +
+
+ 岭南张氏宗谱开放谱文 18 篇 +
+
+
+
+
+
+ +
+ +
+ +
+
+
+

数字家谱核心功能

+
+
+
+
+

世系图

+

+ 以树谱方式展示成员关系,支持查看个人资料、添加亲属、调整排行。 +

+
+
+
+

字辈谱

+

记录各代字辈与人数,让家族世代脉络更加清楚。

+
+ +
+

宣传相册

+

按相册归档宣传影像,展示祖屋、活动、老照片和重要时刻。

+
+
+
+

谱文资料

+

沉淀谱序、谱文、家训、恩荣录等文本内容。

+
+
+
+

家族圈

+

发布动态、分享图片、评论互动,让亲人之间保持连接。

+
+
+
+

功德录

+

记录家族贡献人物与事迹,让善行与纪念被看见。

+
+
+
+

贺礼邀请

+

发布婚礼、生日、升学等家族喜事,通知相关成员。

+
+
+
+

权限管理

+

设置管理员、内容可见范围与入谱审核,保护家族隐私。

+
+
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+
+

姓氏百科

+

+ 以姓氏为入口,整理姓氏源流、名人故事、地区分布、字辈参考和相关家谱。 +

+ 进入姓氏百科 +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ +
+ +
+ + + +
+
+
+
+

手机端随时记录,电脑端清晰浏览

+

+ 家族成员可以在手机端上传照片、查看家谱、发布动态;电脑端适合浏览门户内容、查看公开家谱和进入家谱空间。 +

+ +
+
+
+
+
+ + + + + + diff --git a/index.html b/index.html index f6d77b8..3567fd3 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + @@ -15,9 +15,11 @@ - +
-
富众鑫科技
+
+ 富众鑫文化科技 +
-
-
-
-
数字家谱与家族文化门户
-

- 一部会生长的
数字家谱 -

+
+
+
+
+
+
数字家谱与家族文化门户
+

一部会生长的
数字家谱

+
+ + 扫码下载 + + 手机端随时记录 + +

把姓氏源流、世系关系、字辈排行、宣传相册、谱文故事与亲人动态整理在一起,让家族的来处清晰可见,让记忆可以继续传下去。

-
-
正在记录
+
+
-
寻根问祖
-
字辈排行
-
世系关系
-
宣传相册
-
谱文故事
-
亲人动态
-
寻根问祖
-
字辈排行
-
世系关系
-
宣传相册
-
谱文故事
-
亲人动态
+
+ 寻根问祖字辈排行世系关系宣传相册谱文故事亲人动态 +
+
-
- 1创建家谱2邀请亲人3共同传承 -
- -
-
家谱广场浏览公开家族
-
姓氏百科了解姓氏源流
-
家族文化阅读传承故事
-
+
    +
  1. 1创建家谱
  2. +
  3. 2邀请亲人
  4. +
  5. 3共同传承
  6. +
-
-
-
-
- 家族祠堂 -
- - 宣传影像 - 观看宣传视频 - -
-

查找公开家谱

- - 输入姓氏、地区或家谱名称搜索 - -
-
- 四川成都陈氏族共修入 128 人 -
-
- 湖广刘氏家谱收录 6 代字辈 -
-
- 岭南张氏宗谱开放谱文 18 篇 -
-
-
+ +
-
+
-
- - -
-
-
-

数字家谱核心功能

-
-
-
-
-

世系图

-

- 以树谱方式展示成员关系,支持查看个人资料、添加亲属、调整排行。 -

-
-
-
-

字辈谱

-

记录各代字辈与人数,让家族世代脉络更加清楚。

-
- -
-

宣传相册

-

按相册归档宣传影像,展示祖屋、活动、老照片和重要时刻。

-
-
-
-

谱文资料

-

沉淀谱序、谱文、家训、恩荣录等文本内容。

-
-
-
-

家族圈

-

发布动态、分享图片、评论互动,让亲人之间保持连接。

-
-
-
-

功德录

-

记录家族贡献人物与事迹,让善行与纪念被看见。

-
-
-
-

贺礼邀请

-

发布婚礼、生日、升学等家族喜事,通知相关成员。

-
-
-
-

权限管理

-

设置管理员、内容可见范围与入谱审核,保护家族隐私。

-
-
-
-
-
-

家谱广场

-
- +
+
+ 家谱服务 + 影像相册 + 活动视频 + 族谱印制 + 祠堂文化 + 云端存档 + 宗亲联谊 + 姓氏研究 + 家风记忆
-
+
-
- -
- -
-
-
-
-

姓氏百科

-

- 以姓氏为入口,整理姓氏源流、名人故事、地区分布、字辈参考和相关家谱。 -

- 进入姓氏百科 -
-
- - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
- -
- -
- -
-