位于导航栏 · G05 浅色背景
搜索框 330px,白色背景;左侧搜索图标+提示词,右侧智能助手图标;外部加号图标 36×36px G60
位于导航栏 · DB60 蓝色背景
搜索框背景 rgba(0,0,0,0.10);图标和文字白色/半透明白;布局与浅色背景一致
位于导航栏下方
搜索框 382px(全宽),高度 36px,位于导航栏底部下方独立一行
搜索状态
搜索时,下拉选项中出现的关键字高亮为 DB60 颜色;搜索框内文字为常规颜色
| 属性 | 值 | Token |
| 搜索框高度 | 36px | --sb-height |
| 圆角 | 全圆角 999px | --sb-radius |
| 搜索行高度 | 54px(搜索框 36px 垂直居中) | --sb-row-height |
| 两端边距 | 16px | --sb-padding |
| 内部 padding | 左右各 12px | --sb-inner-padding |
| 文字字号 | 14px | --sb-font-size |
| 文字字重 | 400 | --sb-font-weight |
| 搜索图标 | 16×16px,stroke-width: 2 | --sb-search-icon-size |
| 加号图标容器 | 36×36px(图标 20×20px) | --sb-plus-icon-size |
| 搜索框与加号间距 | 16px | --sb-gap |
| 搜索框宽度 | 330px | --sb-in-navbar-width |
| 搜索框宽度 | 382px | --sb-below-navbar-width |
| 头部背景 | #F5F7FA G05 | --sb-light-bg → --G05 |
| 搜索框背景 | #FFFFFF G0 白色 | --sb-light-search-bg → --G0 |
| 搜索框描边 | 无 | border: none |
| 搜索图标颜色 | #A8B4C8 G40 | --sb-light-icon-color → --G40 |
| 占位符颜色 | #A8B4C8 G40 | --sb-light-placeholder-color → --G40 |
| 输入文字颜色 | #223355 G60 | --sb-light-text-color → --G60 |
| 关键字颜色 | #3388FF DB60 | --sb-light-keyword-color → --DB60 |
| 加号图标颜色 | #223355 G60 | --sb-light-plus-color → --G60 |
| 智能助手图标 | 20×20px 蓝色渐变圆形 | gradient(DB60→DB30) |
| 语音输入图标 | 20×20px G40 | --sb-light-icon-color → --G40 |
| 清空按钮 | 18×18px 圆形,G40 背景 + 白色 × | — |
| 头部背景 | #3388FF DB60 | --sb-blue-bg → --DB60 |
| 搜索框背景 | rgba(0,0,0,0.10) G80_10% | --sb-blue-search-bg → G80_10% |
| 搜索框描边 | 无 | border: none |
| 搜索图标颜色 | rgba(255,255,255,0.5) | --sb-blue-icon-color |
| 占位符颜色 | rgba(255,255,255,0.5) | --sb-blue-placeholder-color |
| 输入文字颜色 | #FFFFFF 白色 | --sb-blue-text-color |
| 关键字颜色 | #FFFFFF 白色 | --sb-blue-keyword-color |
| 加号图标颜色 | #FFFFFF 白色 | --sb-blue-plus-color |
| 智能助手图标 | 20×20px 半透明白圆形 rgba(255,255,255,0.25) | — |
| 语音输入图标 | 20×20px rgba(255,255,255,0.5) | --sb-blue-icon-color |
| 清空按钮 | 18×18px 圆形,rgba(255,255,255,0.5) 背景 + 白色 × | — |
| 下拉选项背景 | G0 #FFFFFF 白色 | — |
| 选项行高度 | 44px | — |
| 选项行边距 | 16px 两端 | — |
| 选项搜索图标 | 16×16px G40 | — |
| 选项关键字颜色 | #3388FF DB60 | --sb-light-keyword-color → --DB60 |
| 选项关键字字重 | 500 | font-weight: 500 |
| 选项非关键字颜色 | #223355 G60 | --sb-light-text-color → --G60 |
| 选项文字字号 | 14px | — |
| 选项分隔线 | G10 #E9ECF2 1px | — |
| 搜索框输入文字 | 常规颜色 G60(G05背景)/ 白色(DB60背景),不高亮 | — |