quyun-v2/docs/design/portal/PAGE_TENANT_HOME.md

页面设计: 租户/个人主页 (Tenant Profile)

路由: /t/:tenantId > 布局: LayoutMain (Header + Footer) 结构: 固定宽度 (1280px) 封面头部 + 切换内容区

1. 页面结构 (Structure)

采用上下结构，顶部为品牌头图与基本资料，下方为内容切换区。

• 最大宽度: max-w-screen-xl (1280px) 居中。
• 背景: 头部背景跟随封面图，内容区背景 bg-slate-50。

[      Cover Image (1280x320, Rounded Top)      ]
[      Profile Header (Avatar, Bio, Stats)      ]
-------------------------------------------------
[ Tabs (Sticky) ]         [ Search in Tenant ]
-------------------------------------------------
[                Content Area                   ]

---

2. 详细设计 (Detailed Specs)

2.1 头部区域 (Profile Header)

• 封面图 (Cover):
  • 尺寸: 1280x320px (4:1 比例)。
  • 适配: object-cover，定位 center center。
  • 兜底: 若无图片，使用品牌色或随机几何渐变背景。
• 信息资料栏:
  • 背景: bg-white border-x border-b border-slate-200 p-8 flex items-end justify-between relative。
  • 右侧操作区:
    • 关注按钮尺寸规范: 固定宽度 w-32 (128px)。
    • 通知策略: 关注成功后默认开启“更新动态”站内信提醒。首次关注显示轻量 Popover 提示:"已为您开启更新提醒，[去设置] 可调整"。
    • 分享入口: 更多操作按钮 (...) 中包含 [分享主页]，同时页面右下角常驻悬浮分享按钮 (FAB)。
      • 分享模板: "向你推荐一个优质创作者：[作者名] - [简介摘要] [URL]"。
    • 统计数据交互:
      • 关注/获赞: 点击弹出对应列表浮窗 (Modal)，支持快速浏览。
      • 内容: 点击自动切换至 "全部内容" Tab。

2.2 导航与筛选 (Sticky Navigation & Search)

...

2.3 内容展示逻辑 (Content Area)

B. "全部内容" Tab (All Posts)

• 卡片内容类型标识 (Media Markers):
  • 位置: 封面图左下角。
  • 视频: Play Icon + 12:05 (时长)。
  • 音频: Audio Icon + 08:30 (时长)。
  • 图集: Image Icon + 9P (张数)。
  • 附件: 卡片底部显示蓝色小图标 "含附件 (3)"。
• 价格与付费规范 (Price Specs):
  • 展示层级: 现价 (红) > 会员价 (金/小字) > 原价 (灰/划线)。
  • 会员专享: 价格位替换为 "会员免费" (金色 Badge)。
  • 按钮优先级: 若已购买或会员免费，显示 [立即阅读] (Secondary)；否则显示 [立即购买] (Primary)。
  • 兜底: 若价格数据异常缺失，默认显示为 "免费" 或 "价格待定"。

2.4 "关于" Tab & 更多操作

...

2.5 响应式与移动端适配 (lg 以下)

• 操作按钮布局:
  • 当屏幕宽度 < 768px 时，关注与私信按钮由水平排列改为 通栏吸底 (Sticky Bottom)，以保证单手操作便捷。
  • 更多操作 (...) 变为右上角固定菜单。
• 统计数据: 缩放字号并横向等分排列。

D. "关于" Tab (About)

• 内容层级:
  • 排版: 使用 prose 规范，阅读行宽限制在 800px 以内。
  • 图片: 图片说明文字居中 text-sm text-slate-400 mt-2。
• 联系方式: 脱敏展示，点击 [查看] 需验证。

2.5 侧边引导与辅助

• 分享入口: 右下角悬浮分享按钮 (FAB)。
• 推荐区块: 若采用 9:3 布局，右侧展示 "推荐关注"。
• 订阅提醒: 未关注用户滚到底部时弹出轻量订阅 Toast。