diff --git a/Project/fonrey/UI_SYSTEM/UI_SYSTEM.md b/Project/fonrey/UI_SYSTEM/UI_SYSTEM.md index b1d460b1..8d4f62ac 100644 --- a/Project/fonrey/UI_SYSTEM/UI_SYSTEM.md +++ b/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 +
+ +
+
F
+ Fonrey +
+ + +
+ + +
+ + + + +
+
+ + +
+ + + + + +
+
WS
+ 王顺 +
+
+
``` ┌─────────────────────────────────────────────────────────────────────┐ │ [🏢 Fonrey ▾] 主页 房源 客源 营销 交易 数据 人事 系统 │