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

Sync: add design and process improvement notes

Browse Source
This commit is contained in:
weishen
2026-04-25 19:38:47 +08:00
parent 2613a74c73
commit 8c909c9c08
21 changed files with 1553 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1012,7 +1012,7 @@ Topbar 分三区：左区（Logo）、中区（主导航）、右区（工具区
| 区域 | 内容 | 样式 |
|---|---|---|
| 左区（150px） | Logo 图 + 产品名"Fonrey" | `flex items-center gap-2 px-4 text-base font-semibold text-neutral-900` |
| 左区（150px） | Logo 图 + 产品名"Fonrey" | `flex items-center gap-2 px-4 text-base font-semibold text-white` |
| 中区（flex-1） | 主分类导航 Tab | 见 5.2.2 |
| 右区（auto） | 全局搜索图标 / 消息 / 帮助 / 头像菜单 | `flex items-center gap-1 px-4` |
@@ -1020,9 +1020,9 @@ Topbar 分三区：左区（Logo）、中区（主导航）、右区（工具区
主分类（8项）：**主页 / 房源 / 客源 / 营销 / 交易 / 数据 / 人事 / 系统**
- 每项：`px-3 py-1 text-sm font-medium rounded-md`
- 默认态：`text-neutral-600 hover:bg-neutral-100 hover:text-neutral-800`
- 激活态：`bg-primary-50 text-primary-700`
- 每项：`px-3 py-1.5 text-sm font-medium rounded-md`
- 默认态：`text-primary-100 hover:bg-primary-700 hover:text-white`
- 激活态：`bg-primary-600 text-white`
- 点击切换主分类 → Sidebar 同步切换为该分类的子菜单
#### 5.2.3 右区工具
@@ -1034,16 +1034,18 @@ Topbar 分三区：左区（Logo）、中区（主导航）、右区（工具区
| 帮助 | `QuestionMarkCircleIcon` 20px | 链接到帮助中心或触发 Tour |
| 头像菜单 | 头像（`w-8 h-8 rounded-full`）+ 姓名缩写 | 下拉菜单：个人设置 / 切换角色 / 退出 |
> **配色说明**：Topbar 背景使用 `bg-primary-800`（`#134E4A`，深青绿），与下方白色 Sidebar 和 `bg-neutral-50` 内容区形成明确层次区分，同时保持品牌色系一致性。
#### 5.2.4 Topbar HTML 片段
```html
<header class="fixed top-0 left-0 right-0 h-14 z-20
bg-white border-b border-neutral-200
bg-primary-800
flex items-center justify-between">
<!-- 左区：Logo -->
<div class="flex items-center gap-2 px-4 w-60 shrink-0">
<img src="/static/img/logo.svg" class="w-7 h-7" alt="Fonrey">
<span class="text-base font-semibold text-neutral-900">Fonrey</span>
<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>
<!-- 中区：主导航 -->
@@ -1051,8 +1053,8 @@ Topbar 分三区：左区（Logo）、中区（主导航）、右区（工具区
{% for item in nav_items %}
<a href="{{ item.url }}"
class="px-3 py-1.5 text-sm font-medium rounded-md
{% if item.active %}bg-primary-50 text-primary-700
{% else %}text-neutral-600 hover:bg-neutral-100 hover:text-neutral-800{% endif %}">
{% if item.active %}bg-primary-600 text-white
{% else %}text-primary-100 hover:bg-primary-700 hover:text-white{% endif %}">
{{ item.label }}
</a>
{% endfor %}
@@ -1061,13 +1063,13 @@ Topbar 分三区：左区（Logo）、中区（主导航）、右区（工具区
<!-- 右区：工具 -->
<div class="flex items-center gap-1 px-4 shrink-0">
<!-- 全局搜索 -->
<button class="p-1.5 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700 rounded-md"
<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"><!-- MagnifyingGlassIcon --></svg>
</button>
<!-- 消息通知 -->
<button class="relative p-1.5 text-neutral-500 hover:bg-neutral-100 rounded-md"
<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 min-w-[16px] h-4 px-1 text-[10px] font-bold
@@ -1076,20 +1078,20 @@ Topbar 分三区：左区（Logo）、中区（主导航）、右区（工具区
</button>
<!-- 帮助 -->
<button class="p-1.5 text-neutral-500 hover:bg-neutral-100 rounded-md" aria-label="帮助">
<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"><!-- QuestionMarkCircleIcon --></svg>
</button>
<!-- 头像菜单 -->
<div x-data="{ open: false }" @click.away="open=false" class="relative ml-1">
<div x-data="{ open: false }" @click.away="open=false" class="relative ml-1 pl-3 border-l border-primary-700">
<button @click="open=!open"
class="flex items-center gap-2 p-1 rounded-md hover:bg-neutral-100">
<span class="w-8 h-8 rounded-full bg-primary-100 text-primary-700
class="flex items-center gap-2 p-1 rounded-md hover:bg-primary-700">
<span class="w-8 h-8 rounded-full bg-primary-600 text-white
flex items-center justify-center text-sm font-semibold">
王
</span>
<span class="text-sm text-neutral-700 font-medium">王顺</span>
<svg class="w-4 h-4 text-neutral-400"><!-- ChevronDownIcon --></svg>
<span class="text-sm text-primary-100 font-medium">王顺</span>
<svg class="w-4 h-4 text-primary-300"><!-- ChevronDownIcon --></svg>
</button>
<div x-show="open" x-transition
class="absolute right-0 mt-1 w-44 bg-white rounded-md shadow-md