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

页面设计: 首页 (Home)

路由: / 布局: LayoutMain (Header + Footer) 结构: 混合布局 (Banner + 左右分栏)

1. 页面结构 (Structure)

首页采用 "Hero + 左右分栏" 的经典内容型布局，强调信息密度与浏览效率。

[      Hero Banner / Carousel (Full Width or Boxed)      ]
----------------------------------------------------------
[ Filter/Tags Bar ]
----------------------------------------------------------
|                    |                                   |
|   Main Feed (70%)  |          Sidebar (30%)            |
|   (Content List)   |      (Trending / Recommends)      |
|                    |                                   |

2. 详细设计 (Detailed Specs)

2.1 Hero 区域 (Hero Section)

位于导航栏下方，用于展示平台级置顶、活动或推荐。

• 容器: w-full bg-white border-b border-slate-100 mb-6 (可选)
• 内容:
  • 轮播图/大卡片: 高度约 300px - 400px。
  • 样式: 圆角矩形，阴影，图文叠加或左右结构。

2.2 筛选栏 (Filter Bar)

• 位置: 内容流上方。
• 元素:
  • Tabs: "推荐", "最新", "热门"。
  • Tag List: 常用分类标签（如：技术、生活、设计...），支持横向滚动。
• 样式: flex items-center space-x-4 py-4 border-b border-slate-200 mb-4。

2.3 左侧内容流 (Main Feed - Left Column)

• 宽度: col-span-12 lg:col-span-8 xl:col-span-9 (响应式调整)
• 列表样式:
  • 卡片列表 (List View): 左图右文 或 上文下图。适合资讯、博客。
    • Image: 缩略图 w-48 h-32 object-cover rounded。
    • Info: 标题 (H3), 摘要 (Line-clamp-2), Meta (作者/时间/热度)。
  • 网格列表 (Grid View): 适合商品、图片为主的内容。
    • grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6。
• 加载状态: 底部 "加载更多" 按钮 或 无限滚动 (Infinite Scroll)。

2.4 右侧侧边栏 (Sidebar - Right Column)

• 宽度: hidden lg:block lg:col-span-4 xl:col-span-3 (移动端隐藏)
• 组件模块:
  1. 公告栏 (Announcements): 平台公告，纯文本或带图标。
  2. 热门榜单 (Trending): Top 5-10 内容列表，带数字排行 (1, 2, 3...)。
  3. 推荐租户/作者 (Recommended Creators): 头像 + 名称 + 关注按钮列表。
  4. 广告位 (Ads/Promos): 图片 Banner。
• 样式: 每个模块为一个 bg-white rounded-lg p-4 shadow-sm mb-6 卡片。

3. 交互与状态 (Interactions)

• Hover: 列表卡片 Hover 时出现轻微上浮或阴影加深。
• 点击: 点击卡片任意区域跳转至 内容详情页。
• 关注: 在推荐租户模块直接点击 "关注"，需判断登录状态。