57 lines
2.1 KiB
Markdown
57 lines
2.1 KiB
Markdown
# 页面设计: 租户/个人主页 (Tenant Profile)
|
||
|
||
> **路由**: `/tenants/:tenantId`
|
||
> **布局**: `LayoutMain`
|
||
> **结构**: 封面式头部 + 内容列表
|
||
|
||
## 1. 页面结构 (Structure)
|
||
|
||
类似社交媒体的个人主页设计，强调品牌形象展示。
|
||
|
||
```text
|
||
[ 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 提示。
|