feat: add pages

docs/design/portal/PAGE_HOME.md

@@ -0,0 +1,60 @@
+# 页面设计: 首页 (Home)
+
+> **路由**: `/`
+> **布局**: `LayoutMain` (Header + Footer)
+> **结构**: 混合布局 (Banner + 左右分栏)
+
+## 1. 页面结构 (Structure)
+
+首页采用 **"Hero + 左右分栏"** 的经典内容型布局，强调信息密度与浏览效率。
+
+```text
+[      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 时出现轻微上浮或阴影加深。
+- **点击**: 点击卡片任意区域跳转至 `内容详情页`。
+- **关注**: 在推荐租户模块直接点击 "关注"，需判断登录状态。