对话内搜索 · 需求介绍与引导图

2026-10-29 · 基于v1.56 · 已同步深浅黄色高亮 · DF AI v1.20.0

默认 → 点击展开 → 日期筛选 → 搜索结果。页面实拍 + 红框编号 + UI尺寸 + 交互逻辑。

1. 需求介绍

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

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

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

2. 默认状态

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

01-默认
默认状态:入口位置 · 点击放大,点击图外或按 Esc 关闭

3. 点击展开

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

02-点击展开
点击展开:搜索栏与关键词输入 · 点击放大,点击图外或按 Esc 关闭
UI 项目尺寸 / 规则
搜索栏430×36px;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-日期范围
日期:时间范围下拉 · 点击放大,点击图外或按 Esc 关闭
范围取值口径
全部时间不进行日期限制
今天当天00:00:00至23:59:59.999
最近一周今天及之前6个自然日,共7天
最近一个月 / 最近三个月从当前日期回退1 / 3个日历月的零点,至今天结束;不是固定30 / 90天
自定义范围开始日零点至截止日23:59:59.999,包含首尾日期
04-日期选择
日期:自定义面板与月历 · 点击放大,点击图外或按 Esc 关闭

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

点「取消」或点面板外关闭,不应用草稿;点「确定」后范围摘要显示 MM/DD - MM/DD。更改范围会清除旧的搜索结果和高亮,保留关键词,等待再次 Enter。

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-搜索结果
搜索结果:计数、定位和高亮 · 点击放大,点击图外或按 Esc 关闭

• Enter:首次提交关键词,定位第一条命中消息;相同关键词再次 Enter,定位下一条;Shift+Enter 定位上一条。中文输入法组词期间的 Enter 不触发搜索。

• 结果计数按「消息」计数,同一条消息包含多个相同关键词仍记为1条。图示 SQL 命中4条消息,显示1/4。

• 上下箭头和快捷键均循环定位,最后一条的下一条回到第一条。定位时平滑滚动至消息中部,受滚动容器边界限制。

• 所有命中词高亮,当前消息内的命中词使用较深黄色,其余命中消息内的词使用浅黄色。使用 CSS Highlight,不改写原消息 DOM。

• 更改关键词即清除上一轮结果,回到「按 Enter 搜索」。无结果显示「无匹配」,上下定位禁用。

• 点击关闭按钮收起搜索栏并清空关键词、结果、高亮及所有搜索浮层;当前实现保留本会话的已选日期范围。

• 切换会话后重置关键词、结果、日期条件及浮层,防止串用上一会话的搜索状态。

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

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

6. 功能规则

放大图