fix: distinguish Apps and Settings in the sidebar footer
Keep the horizontal footer layout with visible labels, matching button heights, a subtle divider, and an Apps dropdown indicator. Use a layout icon for Manage Apps so it is distinct from global Settings. Release note: Make the bottom-left Apps and Settings entries easier to distinguish with labeled buttons and separate visual boundaries.
This commit is contained in:
mesalogo
@@ -1,7 +1,7 @@
|
||||
# 应用导航与系统工具入口
|
||||
|
||||
本功能整理 GoodBuddy 主侧栏的入口层级：系统入口保持固定，四个内置应用共用可调整的保存顺序，知识库始终启用并常驻；
|
||||
智能心跳、魔法笔记和本机推理监控可通过应用管理控制启用和常驻。底部应用中心向上展开轻量锚定菜单，列出已启用应用；底部“管理应用”打开既有管理 Modal。系统工具由右侧工作栏 Tab 承载。应用商店是后续功能，首期不提供
|
||||
智能心跳、魔法笔记和本机推理监控可通过应用管理控制启用和常驻。底部“应用”向上展开轻量锚定菜单，列出已启用应用；底部“管理应用”打开既有“应用中心”管理 Modal。系统工具由右侧工作栏 Tab 承载。应用商店是后续功能，首期不提供
|
||||
商店入口、推荐位或安装流程。
|
||||
|
||||
当前分期见 [PRD 第 8 节](./prd.md#8-分期)，实施步骤见[技术设计第 11 节](./technical-design.md#11-实施顺序)。
|
||||
|
||||
@@ -86,7 +86,7 @@
|
||||
|
||||
### FR-5 应用中心入口
|
||||
|
||||
侧栏底部提供应用中心和独立设置入口。点击应用中心向上展开锚定按钮的轻量菜单，无模态遮罩。菜单列出已启用应用，不按是否打开过、历史记录或常驻状态筛选；点击应用行关闭菜单，本机推理监控打开 Modal，其余应用在主内容区打开页面。
|
||||
侧栏底部提供“应用”（英文 `Apps`）和独立“设置”入口，两个按钮均显示文字。点击“应用”向上展开锚定按钮的轻量菜单，无模态遮罩。菜单列出已启用应用，不按是否打开过、历史记录或常驻状态筛选；点击应用行关闭菜单，本机推理监控打开 Modal，其余应用在主内容区打开页面。
|
||||
菜单底部“管理应用”关闭菜单并打开既有管理 Modal，在其中浏览、搜索全部内置应用，为已关闭的可选应用提供设置与重新开启入口。无搜索结果时显示空状态并可清除搜索。
|
||||
首期不展示商店、安装、推荐或系统工具清单。入口具有可访问名称，Escape 关闭后恢复触发位置的焦点。
|
||||
|
||||
|
||||
@@ -175,17 +175,21 @@ Main 继续校验可信 sender、Zod 输入，复用 `ApplicationSettingsStore`
|
||||
原 `user-card` 整行设置按钮已替换为容器和相邻独立按钮：
|
||||
|
||||
```tsx
|
||||
<div className="sidebar-footer">
|
||||
<button onClick={toggleApplicationMenu} aria-haspopup="menu" aria-expanded={applicationMenuOpen} ...>
|
||||
{t('navigation.applicationCenter')}
|
||||
<div className="sidebar-footer sidebar-footer--applications">
|
||||
<button className="nav-item" onClick={toggleApplicationMenu} aria-haspopup="menu" aria-expanded={applicationMenuOpen} ...>
|
||||
<Grid2X2 aria-hidden="true" />
|
||||
<span>{t('applications.menuLabel')}</span>
|
||||
<ChevronDown aria-hidden="true" />
|
||||
</button>
|
||||
<button aria-label={t('navigation.settings')} ...>
|
||||
<div className="sidebar-footer__divider" aria-hidden="true" />
|
||||
<button className="nav-item" aria-label={t('navigation.settings')} ...>
|
||||
<Settings aria-hidden="true" />
|
||||
<span>{t('navigation.settings')}</span>
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
应用中心和设置为相邻独立按钮。设置按钮继续调用 `navigateFromSidebar('settings', trigger)`，
|
||||
“应用”（`applications.menuLabel`：中文“应用”、英文 `Apps`）和设置为横向等高独立按钮，使用 `nav-item` 样式和弱竖分隔线；“管理应用”菜单项使用 `LayoutGrid` 图标，管理 Modal 标题保持“应用中心” / `Application Center`。设置按钮继续调用 `navigateFromSidebar('settings', trigger)`，
|
||||
保留设置预加载、焦点恢复和未保存离开确认。该调用只打开设置 Modal，不更新当前工作区或
|
||||
KeepAlive 缓存；`settingsOpen` 独立管理打开状态。关闭后卸载设置内容，下次按入口指定的分类
|
||||
和消息通道重新挂载，避免缓存上次分类覆盖本次直达目标。底层工作区继续挂载，普通关闭不跳回聊天。
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
...
|
||||
|
||||
────────────────────────
|
||||
[应用中心] [设置]
|
||||
[应用 v] | [设置]
|
||||
```
|
||||
|
||||
“当前对话”和“运行记录”属于固定系统入口，常驻应用位于二者之间。首期应用清单为魔法笔记、
|
||||
@@ -41,15 +41,15 @@
|
||||
|
||||
## 2. 底部应用中心入口
|
||||
|
||||
底部使用连续平整表面和顶部分隔线，应用中心在前，固定设置靠右，二者为独立按钮：
|
||||
底部使用连续平整表面和顶部分隔线，“应用”在前，“设置”靠右，二者为横向排列的等高 `nav-item` 独立按钮，中间使用弱竖分隔线：
|
||||
|
||||
| 位置 | 图标 | 可见工具提示 | 点击结果 |
|
||||
| 位置 | 图标 | 可见文字 | 点击结果 |
|
||||
| --- | --- | --- | --- |
|
||||
| 1 | `Grid2X2` | 应用中心 | 向上展开已启用应用菜单，底部“管理应用”进入管理 Modal |
|
||||
| 末位 | `Settings` | 设置 | 在当前工作区上打开设置 Modal |
|
||||
| 1 | `Grid2X2` + `ChevronDown` | 应用 / Apps | 向上展开已启用应用菜单，底部“管理应用”进入管理 Modal |
|
||||
| 末位 | `Settings` | 设置 / Settings | 在当前工作区上打开设置 Modal |
|
||||
|
||||
图标使用项目现有 Lucide 库。应用中心保留文字，设置图标采用统一的 `34px × 34px` 点击区域。
|
||||
底部使用共享间距和焦点样式，设置通过弹性空白靠右；不得把整个容器做成设置按钮。
|
||||
图标使用项目现有 Lucide 库。两个按钮均保留可见文字，沿用主导航的高度、间距和焦点样式；
|
||||
“应用”文字后显示向下箭头，菜单仍向上展开。不得把整个容器做成设置按钮。
|
||||
|
||||
### 2.1 状态
|
||||
|
||||
@@ -84,7 +84,7 @@
|
||||
|
||||
菜单通过共享 `AnchoredMenu` 挂载到 body，宽度最多 `280px`，距窗口边缘至少 `16px`，与按钮上缘间隔 `8px`；短窗口限制高度并内部滚动，滚动、窗口和内容尺寸变化时重算位置。原生浏览器相交遮挡复用共享机制。
|
||||
|
||||
管理 Modal 沿用设置 Modal 的表面、遮罩和焦点规则，提供全部内置应用的名称及用途搜索、打开，以及可选应用的常驻和设置：
|
||||
“管理应用”菜单项使用 `LayoutGrid` 图标。管理 Modal 标题仍为“应用中心”（英文 `Application Center`），沿用设置 Modal 的表面、遮罩和焦点规则，提供全部内置应用的名称及用途搜索、打开，以及可选应用的常驻和设置：
|
||||
|
||||
应用管理始终采用紧凑单列横向列表，从上到下对应保存顺序；行间使用 `--border-subtle` 弱分隔线，不加卡片外框。概览与设置详情共用 `640px` 最大宽度，窄窗口保留两侧各 `16px` 外边距，高度随内容增长并受窗口限制。
|
||||
每行左侧显示图标、名称、状态和简短用途，右侧对齐打开、可用的设置及上下移动操作；空间不足时操作组换到下一行并保持右对齐，组内也可换行，上下箭头保持成组。名称旁区分
|
||||
@@ -189,7 +189,8 @@ CPU 4% · 内存 620 MB · 桌面进程 7
|
||||
|
||||
| 对象 | 文案 |
|
||||
| --- | --- |
|
||||
| 底部入口 | 应用中心 |
|
||||
| 底部入口 | 应用 / Apps |
|
||||
| 管理 Modal 标题 | 应用中心 / Application Center |
|
||||
| 菜单底部管理入口 | 管理应用 |
|
||||
| 应用设置开关 | 启用应用 |
|
||||
| 文件系统工具 | 文件 |
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
|
||||
- Given 任意主页面和任意侧栏宽度
|
||||
- When 用户查看侧栏底部
|
||||
- Then 设置与应用中心为始终可见的独立按钮，点击区域不重叠
|
||||
- Then “设置”与“应用”为始终显示文字的独立按钮，点击区域不重叠
|
||||
- And 点击后继续遵守未保存内容的离开确认
|
||||
|
||||
## 3. Epic B：管理应用入口
|
||||
|
||||
Reference in New Issue
Block a user