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

页面设计: 首页 (Home)

路由: / 布局: LayoutMain (Header + Footer) 结构: 固定宽度混合布局 (Hero + 左右分栏)

1. 页面结构 (Structure)

首页内容区域固定最大宽度为 max-w-screen-xl (1280px)，水平居中。

• 垂直间距 (Vertical Spacing): 各大区块间距统一为 py-6 (24px)。
• 分栏间距 (Column Gap): 左右分栏间距为 gap-8 (32px)。
• 响应式分栏策略 (Breakpoints):
  • lg (1024px ~ 1279px): 主内容 8 份 (col-span-8)，侧边栏 4 份 (col-span-4)。
  • xl (1280px+): 主内容 9 份 (col-span-9)，侧边栏 3 份 (col-span-3)。侧边栏视觉宽度维持在约 300-320px。

---

2. 详细设计 (Detailed Specs)

2.1 Hero 区域 (Hero Section / Carousel)

• 容器: 跟随 1280px 宽度 (Boxed)，高度固定为 h-[400px]。
• 交互规范:
  • 自动轮播: 间隔 5000ms。
  • 暂停逻辑: 鼠标悬停 (Hover) 或 键盘聚焦 (Focus) 时停止轮播。
  • 指示器: 底部居中显示小圆点 (bottom-4)。
  • 翻页箭头: 始终显示（不随 Hover 隐藏），使用半透明圆底背景以增强视觉提示。
  • 视觉处理: 图片底部 30% 区域叠加 bg-gradient-to-t from-black/70 to-transparent 暗罩，确保白色文字标题清晰。
• 降级策略: 若后台未配置 Banner，此区块 hidden，不显示占位图，下方内容自动上移。

2.2 筛选栏 (Filter Bar)

• 吸顶策略: 不吸顶 (Non-sticky)，随页面滚动。
• 组成与逻辑:
  • 第一行 (维度 Tabs): 推荐、最新、热门。默认为“推荐”。
  • 第二行 (分类 Tags): 单选 Pill 样式。必须包含一个“全部”选项用于重置。
• URL 与分享:
  • 所有筛选状态（tab, tag）必须实时同步至 URL Query (例如: /?tab=hot&tag=101)。
  • 支持浏览器前进/后退操作及地址复制分享。

2.3 列表展示规范 (List Data Specs)

• 卡片展示模版 (Card Variants): 根据内容包含的图片数量，自动匹配以下模版：
  1. 无图模式 (Text Only):
     • 适用: 纯文本内容。
     • 布局: 标题 + 摘要 (最多 5-8 行) + 底部 Meta。
     • 样式: 纯文字排版，左对齐。由于无视觉干扰，适合深度阅读引导。
  2. 单图模式 (Single Image) - 默认:
     • 适用: 1 张 或 2 张图片 (双图降级显示)。注：首页仅展示图片，不进行视频自动播放。
     • 布局: 左文右图。左侧标题/摘要，右侧固定尺寸图片 (w-[240px] h-[135px])。
     • 视频识别: 封面图中心显示半透明播放图标。
  3. 三图模式 (Three Images):
     • 适用: 3 张及以上图片。
     • 布局: 标题 (H3) -> 3 张图片横排 (grid grid-cols-3 gap-2) -> 底部 Meta。
• 卡片必须字段:
  • 封面图: 比例固定 16:9 (建议尺寸: 240px * 135px)，object-cover。
  • 标题组合:
    • 曲种标签: 标题前展示 [京剧] 等曲种 Tag (灰色微小字或主色边框)。
    • 正题: 显示 剧目名·选段名 (如《锁麟囊》春秋亭)。
    • 样式: text-lg (18px) 加粗，最大 2 行。
  • 摘要: 字号 text-base (16px)，text-slate-500。最大 2 行。
  • 元数据:
    • 左侧: 头像 + 名称。
    • 右侧: 行当 (如 "青衣") | 阅读数。
  • 时间: 智能格式化。
• 价格展示规则:
  • 免费内容: 不展示任何价格标签。
  • 付费内容:
    • 显示价格: ¥ 99.00 (数字加粗，红色 text-red-600)。
    • 若有划线价，显示在价格旁: ¥ 129.00 (灰色 line-through text-sm)。
  • 限时免费:
    • 显示标签: 限时免费 (绿色 badge)。
    • 显示原价: ¥ 99.00 (划线)。
• 角标规则 (Badges):
  • 置顶: 封面左上角红色。
  • 限免: 封面右上角绿色。
  • 付费: 封面右上角金色。
  • 新 (New): 24小时内发布的内容，标题旁加红点或小图标。
• 点击区域: 整卡可点击。Hover 时背景 bg-slate-50 或阴影 shadow-md。

2.4 侧边栏 (Sidebar)

• 模块顺序: 公告 > 推荐租户 > 热门榜单 > 广告。
• 收缩规则: 数据为空则模块隐藏，布局始终保持 7:3 结构。

2.5 分页与加载策略

• 策略: “点击加载更多”按钮。
• 数量: 首屏 10 条，后续每页 10 条。
• 加载态: 按钮变 Loading 状态，内容区显示骨架屏 (Skeleton)。

2.6 状态页设计

• 空状态: "该分类下暂无内容"，配插画 + [返回推荐] 按钮。
• 错误态: 提供 [点击刷新] 按钮。
• 局部降级: 侧边栏加载失败不影响主 Feed。