Files
quyun-v2/docs/design/portal/PAGE_TENANT_HOME.md
2025-12-25 17:40:40 +08:00

2.1 KiB
Raw Blame History

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

路由: /tenants/:tenantId 布局: LayoutMain 结构: 封面式头部 + 内容列表

1. 页面结构 (Structure)

类似社交媒体的个人主页设计,强调品牌形象展示。

[            Cover Image (Full Width/Boxed)              ]
[            Profile Header (Info & Stats)               ]
----------------------------------------------------------
|   Tabs (Home/All/Series)   |   Search in Tenant        |
----------------------------------------------------------
[                  Content Grid / List                   ]

2. 详细设计 (Detailed Specs)

2.1 头部区域 (Profile Header)

  • 封面图 (Cover):
    • 高度 h-48 sm:h-64
    • object-cover w-full rounded-t-lg (如果在大容器内) 或 w-full (全宽)。
  • 信息栏 (Info Bar):
    • 布局: 相对定位,头像部分重叠在封面图上。
    • 头像: 大尺寸 w-24 h-24 sm:w-32 sm:h-32 rounded-full border-4 border-white shadow-md -mt-12 ml-6
    • 文本: 名称 (H1)、认证标识、一句话简介。
    • 数据: 关注者数量、内容数量、获赞数。
    • 操作: 右侧 [关注] [私信] 按钮。

2.2 导航与筛选 (Navigation)

  • 位置: 信息栏下方。
  • Tabs:
    • "主页" (精选/置顶)
    • "全部内容"
    • "专栏/系列"
    • "简介/关于"
  • 样式: border-b border-slate-200,选中项底部高亮 border-primary-600

2.3 内容展示区 (Content Area)

  • 布局:
    • 默认: 网格布局 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6
    • 列表模式: 可选切换。
  • 卡片样式:
    • 复用首页的卡片组件,但可能移除作者信息(因为已经在作者主页了),强调封面和标题。

2.4 "关于" Tab (About Tab)

  • 如果切换到 "简介/关于" Tab
    • 展示详细的企业/个人介绍。
    • 联系方式、地图、资质证书等。

3. 特殊状态

  • 未发布内容: 展示空状态插画 "作者很懒,还没有发布内容"。
  • 私密/封禁: 展示 403/404 提示。