Dashboard顶部搜索栏位于导航栏右侧，宽320px、4px圆角、浅灰边框（#E0E0E0），含左侧放大镜图标和右侧16×16清空按钮，占位符“搜索用户、订单或产品”为#999灰色，聚焦时边框变蓝（#1890FF），支持回车搜索。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
直接用自然语言描述就能生成，不用画线框、调参数，重点是说清功能和视觉特征。
明确输入搜索框的核心要素
AI 不会猜你想要什么，所以描述里要包含这四类信息：
- 位置与上下文：比如“放在 Dashboard 顶部导航栏右侧”或“嵌入在数据表格上方的工具栏中”
- 基础功能：是否需要支持关键词输入、回车搜索、清空按钮、下拉联想？例如写“带清空图标和搜索按钮，支持模糊匹配”
- 视觉风格：圆角大小（如“4px 圆角”）、边框（如“浅灰描边，聚焦时蓝色高亮”）、字体大小（如“14px 字体，居中对齐”）
- 交互状态：是否需标注“默认占位符文字为‘搜索用户或订单’”“聚焦时放大动画”等
推荐的输入示例（可直接复制修改）
把下面这段话粘贴进 MasterGo AI 的输入框，选“网页端”模式，点生成：
生成后快速精修的方法
首版结果大概率结构正确但细节偏松散，这时别重来，用“块状精修法”局部调整：
- 选中搜索框区域，右键 → “AI 修改” → 输入“把清空按钮缩小到 16×16，和输入框底边对齐”
- 再单独选中文字，输入“占位符改为灰色 #999，主输入文字用 #333 加粗”
- 若整体太窄或太宽，直接拖拽调整宽度后，再让 AI “保持圆角和边框样式，自动适配新尺寸”
导出可用代码前的关键检查
插入画布后，别急着导出。先确认三件事：
- 搜索框是否被包裹在语义化容器里（比如
<div class="search-bar">） <li>图标是否用了内联 SVG 或统一 class 命名（避免导出后图标丢失）</li> <li>聚焦/清空等交互逻辑是否已标注（MasterGo AI 导出 Vue/React 代码时，会据此生成对应事件绑定）</li> </div>
