# 其他社媒搜索 - Twitter/X（741）

> 功能模块入口文档 · VDR 工作流 · 适用对象：新接入研发 / 设计 / 联调人员  
> 关联发版版本：**v7.4.1**

## 设计稿地址
> https://mastergo.com/goto/RDPloUe6?page_id=M&file=188661146056627 邀请您进入《v6.4.1-twitter搜索及详情页》，点击链接开始协作

## 功能概述

`741` 做的是 **Twitter/X 搜索与频道详情页能力补齐**，但不是重做整套「其他社媒搜索」。

这次一共包含两块主能力：

| 功能 | 一句话说明 |
|------|-----------|
| Twitter 搜索升级 | 在 `740` 旧框架内，把 Twitter 结果从“关联展示”升级成“真实 Twitter 账号结果” |
| Twitter 频道详情页 | 新建站内标准频道详情页，承接搜索结果的深看行为 |

## 所属模块

- 一级导航：搜索
- 二级导航：其他社媒
- 平台范围：`Facebook / Twitter`
- 本期改动：**只改 Twitter，Facebook 不动**

## 最关键的 3 个概念

### 1. `740` 的 Twitter 不是站内能力，`741` 才是

- `740`：站内只展示一层 Twitter 外壳和关联信息，点击后跳站外
- `741`：站内直接返回真实 Twitter 账号结果，并进入站内详情页

> 详见 → `input_v3.md §二`、`spec_v1.md §零`

### 2. 本期有两类“保留但不交付”的能力

- 搜索抽屉里的 `受众组筛选`：**保留入口，但整组置灰 + 敬请期待**
- 详情页里的 `受众数据 / 品牌数据`：**保留 tab，但点击后进入占位页**

这不是“删除功能”，而是 **功能曝光**。

> 详见 → `spec_v1.md §二`、`spec_v1.md §五`、`spec_v1.md §七`

### 3. 详情页支持直达，但不写死主键方案

- 可以从搜索结果进入
- 也可以从分享链接、其他模块引用链接等入口直达
- 当前文档阶段不写死 URL 结构和唯一主键实现
- 非法参数走 `404`
- 账号存在但暂无数据走 **产品空态**

> 详见 → `spec_v1.md §三`

## 页面结构速查

### 搜索页

```
平台切换 → 搜索框 → 一级筛选 → 筛选抽屉 / 排序 → 结果列表 → 分页
```

### 详情页

```
页头（身份 + 摘要指标 + 动作） → 四分区 Tab
  ├─ 数据总览      ✅ 本期主交付
  ├─ 受众数据      ⏳ 占位曝光
  ├─ 内容数据      ✅ 本期主交付
  └─ 品牌数据      ⏳ 占位曝光
```

## 研发关键规则

| 规则 | 说明 | 出处 |
|------|------|------|
| 搜索页框架 | 沿用 `740` 的「其他社媒搜索」页面骨架，不重做整页结构 | `spec_v1.md §零` |
| 平台范围 | 本期只改 Twitter，Facebook 维持现状 | `spec_v1.md §零` |
| 搜索对象 | Twitter Tab 的主结果对象是 **Twitter 账号** | `spec_v1.md §一` |
| 详情入口 | 搜索结果只有 `头像 / 频道名 / @handle` 承担详情跳转 | `spec_v1.md §二` |
| 搜索默认态 | 无搜索条件时，展示默认推荐/热门账号列表 | `spec_v1.md §二.11` |
| 搜索空态 | 有搜索条件但无召回时，展示“暂无搜索结果”空态 | `spec_v1.md §二.11` |
| 受众筛选 | 搜索抽屉保留 `受众组`，但本期整组置灰 + `敬请期待`，不可真筛选 | `spec_v1.md §二.11` |
| 聚合指标缺失 | 搜索卡与详情页保留结构位，统一显示 `暂无数据` | `input_v3.md §六`、`design_v1.md §二` |
| 详情页直达 | 支持多入口直达，但 URL 结构和主键方案当前不写死 | `spec_v1.md §三` |
| 详情页参数异常 | 非法参数走 `404`；账号存在但暂无数据走产品空态 | `spec_v1.md §三.2A` |
| 关联平台切换 | 仅在已确认同主体关联频道存在时显示，切到对应平台详情页 | `spec_v1.md §三.7` |
| 数据采集中 | 结果卡即使处于 `数据采集中`，仍允许进入详情页 | `spec_v1.md §八` |

## 设计关键规则

| 规则 | 说明 | 出处 |
|------|------|------|
| 搜索页风格 | 延续现有 Nox 搜索页视觉语言，不新起一套风格 | `design_v1.md §一` |
| 搜索结果结构 | 左侧身份识别 / 中部指标判断 / 右侧内容预览 | `design_v1.md §三` |
| 预览卡策略 | 有媒体优先展示缩略图；无媒体回退文本卡 | `design_v1.md §三.6.3` |
| 预览卡悬浮 | 首图悬浮时可读正文摘录 | `design_v1.md §三.6.3` |
| 筛选抽屉态 | 右侧通栏抽屉 + 左侧遮罩，不做小浮层 | `prototype_v1.pen` |
| 详情页页头 | 四张摘要卡必须在所有详情页屏都保持有数据状态 | `prototype_v1.pen` |
| 详情页模块排布 | `数据总览 / 内容数据` 的分组模块默认各自单独占一行 | `design_v1.md §四`、`prototype_v1.pen` |
| 占位页模板 | `受众数据` 与 `品牌数据` 共用一套正式占位模板，只换标题 | `design_v1.md §六`、`design_v1.md §八` |
| 视觉令牌 | 背景 `#F5F7FA`、卡片白底、橙色激活态、卡片圆角 `10px` | `other_social_search_common_context_v1.md §5` |

## 原型屏幕速查

当前原型：[`prototype_v1.pen`](./prototype_v1.pen)

| 屏幕 | 说明 |
|------|------|
| `YRrJw` | 搜索页：默认推荐/热门列表态 |
| `4MWNN` | 搜索页：筛选曝光态（通栏抽屉 + 遮罩） |
| `6r1W8` | 搜索页：无召回空态 |
| `YjHMY` | 详情页：数据总览 |
| `uk3AD` | 详情页：受众数据占位 |
| `ipqVu` | 详情页：内容数据 |
| `SEBrk` | 详情页：品牌数据占位 |

## Checklist

### 研发 Checklist

- [ ] 理解 `740` 和 `741` 的本质区别：旧版是关联展示，新版是站内能力
- [ ] 确认本期只改 Twitter，Facebook 不动
- [ ] 确认搜索结果主对象是 Twitter 账号，不再依赖 YouTube 桥接
- [ ] 确认详情入口仅为 `头像 / 频道名 / @handle`
- [ ] 确认无搜索条件时返回默认推荐/热门账号列表
- [ ] 确认有搜索条件但无召回时走空态占位图
- [ ] 确认 `受众组筛选` 整组置灰，不可实际提交
- [ ] 确认详情页支持多入口直达，但当前不写死主键方案
- [ ] 确认非法参数走 `404`，账号存在但暂无数据走产品空态
- [ ] 确认 `数据采集中` 不阻断进入详情页
- [ ] 确认关联平台切换只在已确认关联关系存在时出现
- [ ] 确认 `受众数据 / 品牌数据` 为占位页，不接真实能力

### 设计 / 联调 Checklist

- [ ] 已看完 `prototype_v1.pen` 的 7 个核心屏幕
- [ ] 搜索页三屏状态已对齐：默认态 / 筛选曝光态 / 无召回空态
- [ ] 搜索抽屉为右侧通栏，不是中间浮层
- [ ] 搜索结果卡保持 `左身份 / 中数据 / 右预览`
- [ ] 详情页四分区都保留，不能删 `受众数据 / 品牌数据`
- [ ] `数据总览 / 内容数据` 分组模块默认一行一个
- [ ] 四个详情页的公共页头都保持有数据状态
- [ ] 受众页与品牌页占位模板一致，只换标题和说明
- [ ] 所有缺失指标统一为 `暂无数据`

## 文档导航

```
01_Product_Specs/other_social_search_741/
├── README.md                              ← 本文档：入口 + 研发 onboarding
├── input_v3.md                            ← 当前可信输入稿
├── spec_v1.md                             ← 业务规格权威来源
├── design_v1.md                           ← 交互设计规格
├── other_social_search_common_context_v1.md ← 公共上下文 / 令牌 / 骨架
├── prototype_v1.pen                       ← Pencil 原型（7 屏）
├── prototype_exports_showcase_v2/         ← 最新 showcase 导出图
├── reference_screenshots/                 ← 参考截图
├── twitter_data_fields.md                 ← 数据字段分析
└── _plan.md                               ← 执行进度与迭代记录
```

| 阶段 | 文件 | 状态 |
|------|------|------|
| Input | [input_v3.md](./input_v3.md) | ✅ 当前可信输入稿 |
| Spec | [spec_v1.md](./spec_v1.md) | ✅ 已收口 |
| Design | [design_v1.md](./design_v1.md) | ✅ 已落原型结论 |
| Prototype | [prototype_v1.pen](./prototype_v1.pen) | ✅ 7 屏 showcase v2 |
| Plan | [_plan.md](./_plan.md) | 持续更新 |

> 上手顺序建议：先读本 README，再看 `spec_v1.md`，最后打开 `prototype_v1.pen`。