Sync: refine ui system documentation

Project/fonrey/UI_SYSTEM/UI_SYSTEM.md

@@ -1001,8 +1001,102 @@ Flatpickr 自定义样式覆盖见附录 10.3。
 
 #### 5.2.1 结构规范
 
-Topbar 分三区：左区（Logo）、中区（主导航）、右区（工具区）。
+Topbar 分三区：左区（Logo）、中区（主导航 + 搜索）、右区（工具区）。
 
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ [🏢 Fonrey ▾]  主页  房源  客源  营销  [搜索框]      [🔔] [⚙] [WS 王顺] │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+| 区域 | 内容 | 样式 |
+|---|---|---|
+| 左区（`w-60 shrink-0`） | Logo 图标 + 产品名"Fonrey" | `flex items-center gap-2 px-4 text-base font-semibold text-white` |
+| 中区（`flex-1`） | 主分类导航 + 全局搜索框 | `flex items-center gap-4 flex-1 px-2` |
+| 右区（`shrink-0`） | 消息通知 / 设置 / 头像+姓名 | `flex items-center gap-1 px-4 shrink-0` |
+
+> **配色**：Topbar 背景使用 `bg-primary-800`（`#134E4A`，深青绿），与下方白色 Sidebar 和 `bg-neutral-50` 内容区形成明确层次区分，同时保持品牌色系一致性。
+
+#### 5.2.2 主导航 Tab
+
+主分类（8项）：**主页 / 房源 / 客源 / 营销 / 交易 / 数据 / 人事 / 系统**
+
+- 每项：`px-3 py-1.5 text-sm rounded-md`
+- 默认态：`text-primary-100 hover:bg-primary-700 hover:text-white`
+- 激活态：`bg-primary-600 text-white font-medium`
+- 点击切换主分类 → Sidebar 同步切换为该分类的子菜单
+
+#### 5.2.3 全局搜索框
+
+位于主导航右侧，宽度 `max-w-xs`。
+
+- 默认态：`bg-primary-700/60 border-transparent text-white placeholder:text-primary-300`
+- Hover：`hover:bg-primary-700`
+- Focus：`focus:bg-white focus:text-neutral-700 focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20`
+
+#### 5.2.4 右区工具
+
+| 元素 | 图标 | 样式 |
+|---|---|---|
+| 消息通知 | `BellIcon` 20px + 红点 Badge | `p-1.5 text-primary-200 hover:bg-primary-700 hover:text-white rounded-md` |
+| 设置 | `Cog6ToothIcon` 20px | 同上 |
+| 头像菜单 | `w-7 h-7 rounded-full bg-primary-600` + 姓名 | 头像缩写 + `text-sm font-medium text-primary-100`，左侧 `border-l border-primary-700` 分隔 |
+
+#### 5.2.5 Topbar HTML 片段
+
+```html
+<header class="fixed top-0 left-0 right-0 h-14 z-20 bg-primary-800 flex items-center justify-between">
+  <!-- 左区：Logo -->
+  <div class="flex items-center gap-2 px-4 w-60 shrink-0">
+    <div class="w-7 h-7 rounded-md bg-primary-500 flex items-center justify-center text-white text-sm font-semibold">F</div>
+    <span class="text-base font-semibold text-white">Fonrey</span>
+  </div>
+
+  <!-- 中区：主导航 + 搜索 -->
+  <div class="flex items-center gap-4 flex-1 px-2">
+    <nav class="flex items-center gap-1 text-sm" aria-label="主导航">
+      {% for item in nav_items %}
+      <a href="{{ item.url }}"
+         class="px-3 py-1.5 rounded-md
+                {% if item.active %}bg-primary-600 text-white font-medium
+                {% else %}text-primary-100 hover:bg-primary-700 hover:text-white{% endif %}">
+        {{ item.label }}
+      </a>
+      {% endfor %}
+    </nav>
+    <!-- 全局搜索 -->
+    <div class="max-w-xs w-full relative">
+      <svg class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-primary-300" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-4.3-4.3M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z"/>
+      </svg>
+      <input type="text" placeholder="搜索房源 / 客户 / 楼盘  ⌘K"
+             class="w-full pl-9 pr-3 py-1.5 text-sm rounded-md
+                    bg-primary-700/60 border border-transparent text-white placeholder:text-primary-300
+                    hover:bg-primary-700
+                    focus:bg-white focus:text-neutral-700 focus:border-primary-600
+                    focus:ring-2 focus:ring-primary-600/20 focus:outline-none
+                    focus:placeholder:text-neutral-400">
+    </div>
+  </div>
+
+  <!-- 右区：工具 -->
+  <div class="flex items-center gap-1 px-4 shrink-0">
+    <!-- 消息通知 -->
+    <button class="relative p-1.5 text-primary-200 hover:bg-primary-700 hover:text-white rounded-md" aria-label="消息通知">
+      <svg class="w-5 h-5"><!-- BellIcon --></svg>
+      <span class="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-danger-600"></span>
+    </button>
+    <!-- 设置 -->
+    <button class="p-1.5 text-primary-200 hover:bg-primary-700 hover:text-white rounded-md" aria-label="设置">
+      <svg class="w-5 h-5"><!-- Cog6ToothIcon --></svg>
+    </button>
+    <!-- 头像 + 姓名 -->
+    <div class="flex items-center gap-2 pl-3 ml-1 border-l border-primary-700">
+      <div class="w-7 h-7 rounded-full bg-primary-600 text-white flex items-center justify-center text-xs font-semibold">WS</div>
+      <span class="text-sm font-medium text-primary-100">王顺</span>
+    </div>
+  </div>
+</header>
 ```
 ┌─────────────────────────────────────────────────────────────────────┐
 │ [🏢 Fonrey ▾]  主页  房源  客源  营销  交易  数据  人事  系统         │