ishenwei/nexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sync: refine ui system documentation

Browse Source
This commit is contained in:
weishen
2026-04-25 19:40:47 +08:00
parent 8c909c9c08
commit ec3be78d36
1 changed files with 95 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
Project/fonrey/UI_SYSTEM/UI_SYSTEM.md
View File

@@ -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 ▾] 主页 房源 客源 营销 交易 数据 人事 系统 │