# 对话内搜索 · 需求介绍与标注图

## 1. 需求介绍

在当前对话页右上角提供对话内搜索。点击图标后，<strong style="color:#D93025">原位展开</strong>「时间范围、关键词、结果计数、上一条 / 下一条、关闭」组合栏，帮助用户从较长的对话中快速找到历史内容，并定位回原消息。

<strong style="color:#D93025">搜索只作用于当前会话</strong>，不跳转到新页面，不影响消息内容、输入草稿或专家选择。<strong style="color:#D93025">输入关键词后按 Enter 搜索，日期作为附加筛选条件</strong>，<strong style="color:#D93025">不能仅凭日期发起搜索</strong>。

截图来源：10月分支原型-v1.56.html，当前版本已包含2026-10-29确认的深浅黄色高亮调整；本次整理日期 2026-10-29；实拍视口 1440×960，浅色外观。以下为真实页面截图加红框编号，未重绘搜索组件。

## 2. 默认状态

仅在对话页右上角展示搜索图标，按钮热区 32×32px，图标 17px。悬停提示「搜索当前对话」。点击后搜索图标切换为组合搜索栏。

![默认状态：入口位置](01-默认.png)

## 3. 点击展开

搜索栏在原工具栏内展开，<strong style="color:#D93025">输入框自动聚焦</strong>。首次进入当前对话时，时间范围为「全部时间」；关闭搜索后重新展开，保留本对话已选范围。关键词<strong style="color:#D93025">输入过程中不搜索</strong>，<strong style="color:#D93025">状态位显示「按 Enter 搜索」</strong>；空输入时不显示计数，<strong style="color:#D93025">上一条 / 下一条不可用</strong>。

![点击展开：搜索栏与关键词输入](02-点击展开.png)

| UI 项目 | 尺寸 / 规则 |
| --- | --- |
| 搜索栏 | <strong style="color:#D93025">430×36px</strong>；max-width: calc(100vw - 180px)；圆角10px；1px边框；左右内边距4px；内部间距2px |
| 时间范围按钮 | 高28px，最大宽124px；字号12px；左右内边距8 / 6px；下箭头12px |
| 竖分隔线 | 1×16px |
| 关键词区域 | 自适应剩余宽度；输入高26px、字号13px；搜索图标14px；图标与输入间距6px |
| 结果状态 | 字号11px；显示「按 Enter 搜索」「当前条/总条数」或「无匹配」 |
| 上一条 / 下一条 / 关闭 | 每个24×24px热区、圆角6px；定位图标15px，关闭图标14px；禁用透明度0.35 |

输入区宽度随范围摘要和状态文案变化，不固定为实拍中的232px。

## 4. 日期筛选

点击范围按钮展开下拉；已选项显示主色文字、淡色背景与勾选。自定义项进入日期面板。

![日期：时间范围下拉](03-日期范围.png)

| 范围 | 取值口径 |
| --- | --- |
| 全部时间 | 不进行日期限制 |
| 今天 | 当天00:00:00至23:59:59.999 |
| 最近一周 | 今天及之前6个自然日，共7天 |
| 最近一个月 / 最近三个月 | 从当前日期回退1 / 3个日历月的零点，至今天结束；不是固定30 / 90天 |
| 自定义范围 | 开始日零点至截止日23:59:59.999，包含首尾日期 |

![日期：自定义面板与月历](04-日期选择.png)

自定义面板包含「开始时间」「截止时间」「取消」「确定」。两日期均选择后确定按钮可用。点击日期字段打开月历，支持前后翻月；截止日期早于开始日期的日期禁用。变更开始日期导致其晚于原截止日期时，原型把截止日期同步为开始日期。

点「取消」或点面板外关闭，不应用草稿；点「确定」后范围摘要显示 MM/DD - MM/DD。<strong style="color:#D93025">更改范围会清除旧的搜索结果和高亮</strong>，保留关键词，<strong style="color:#D93025">等待再次 Enter</strong>。

| UI 项目 | 尺寸 / 层级 |
| --- | --- |
| 时间菜单 | 宽176px，实测高206px；内边距6px；选项高32px；圆角10px |
| 自定义面板 | 宽268px，实测高150px；内边距12px；圆角10px |
| 日期字段 | 高36px，圆角8px，左右内边距11px；两字段间距8px；字号13px |
| 面板按钮 | 高32px，圆角8px，左右内边距14px；按钮间距8px，上间距12px |
| 月历 | 宽294px，实测高301px；内边距12px；圆角10px |
| 月历内部 | 月份栏高32px，底间距6px；7列×6行；星期栏27px，日期单元33px；网格间距2px |
| 浮层位置 | 距锚点下方6px；左右距视口边缘至少8px；日历下方不足时向上展开 |
| 层级 | 菜单 / 自定义面板 z-index 2300；日历2400；不推挤消息区域 |

尺寸按CSS逻辑像素记录；日历定位代码预留336px空间，实际内容高度为301px。

## 5. 搜索结果与定位

![搜索结果：计数、定位和高亮](05-搜索结果.png)

- Enter：首次提交关键词，定位第一条命中消息；<strong style="color:#D93025">相同关键词再次 Enter，定位下一条</strong>；<strong style="color:#D93025">Shift+Enter 定位上一条</strong>。中文输入法组词期间的 Enter 不触发搜索。
- <strong style="color:#D93025">结果计数按「消息」计数</strong>，<strong style="color:#D93025">同一条消息包含多个相同关键词仍记为1条</strong>。图示 SQL 命中4条消息，显示1/4。
- <strong style="color:#D93025">上下箭头和快捷键均循环定位</strong>，最后一条的下一条回到第一条。定位时平滑滚动至消息中部，受滚动容器边界限制。
- 所有命中词高亮，<strong style="color:#D93025">当前消息内的命中词使用较深黄色</strong>，<strong style="color:#D93025">其余命中消息内的词使用浅黄色</strong>。使用 CSS Highlight，不改写原消息 DOM。
- 更改关键词即清除上一轮结果，回到「按 Enter 搜索」。<strong style="color:#D93025">无结果显示「无匹配」</strong>，上下定位禁用。
- 点击关闭按钮收起搜索栏并<strong style="color:#D93025">清空关键词、结果、高亮及所有搜索浮层</strong>；当前实现保留本会话的已选日期范围。
- <strong style="color:#D93025">切换会话后重置关键词、结果、日期条件及浮层</strong>，防止串用上一会话的搜索状态。

| 外观 | 其他命中背景色 | 当前消息命中背景色 |
| --- | --- | --- |
| 浅色 | #FFF3C4 | #FFD54F |
| 深色 | rgba(255,213,79,0.22) | #FFD54F |

浏览器不支持 CSS Highlight 时，原型降级为当前消息整块淡底定位。

## 6. 功能规则

- 检索范围：仅检索当前对话，<strong style="color:#D93025">不区分大小写</strong>，<strong style="color:#D93025">支持检索AI正文、SQL代码</strong>。

- 日期筛选：支持预设范围与自定义起止日期，<strong style="color:#D93025">包含开始日和截止日</strong>；<strong style="color:#D93025">截止日期不能早于开始日期</strong>。选择日期后，需输入关键词并按 Enter 搜索。<strong style="color:#D93025">修改日期范围后需重新按 Enter</strong>。

- 关闭操作：点击图外关闭日期浮层，不改变已应用的日期范围；点击“取消”放弃本次日期修改。点击搜索栏关闭按钮，<strong style="color:#D93025">收起搜索并清空关键词、结果和高亮</strong>，<strong style="color:#D93025">保留当前对话已选的日期范围</strong>。

- 切换对话：清空搜索关键词、结果和高亮，并<strong style="color:#D93025">将日期范围恢复为“全部时间”</strong>。