diff --git a/code/fms/.codebuddy/plans/AppTabs_操作按钮组与应用内最大化_6f4058df.md b/code/fms/.codebuddy/plans/AppTabs_操作按钮组与应用内最大化_6f4058df.md new file mode 100644 index 00000000..aa8481ab --- /dev/null +++ b/code/fms/.codebuddy/plans/AppTabs_操作按钮组与应用内最大化_6f4058df.md @@ -0,0 +1,190 @@ +--- +name: AppTabs 操作按钮组与应用内最大化 +overview: 在页签栏 AppTabs 最左侧新增「一体的、带分割线」的三图标按钮组(返回控制台 / 刷新当前路由 / 留空占位),最右侧新增「应用内最大化」按钮;最大化时隐藏侧边栏+顶栏+页签栏,内容区占满窗口,并提供退出浮窗。 +design: + styleKeywords: + - 企业级扁平 + - 一体化分段工具栏 + - 竖向分割线 + - 蓝色主色高亮 + - 轻量 hover + - 桌面端 + fontSystem: + fontFamily: PingFang SC + heading: + size: 14px + weight: 600 + subheading: + size: 13px + weight: 500 + body: + size: 12px + weight: 400 + colorSystem: + primary: + - "#1677ff" + - "#0958d9" + background: + - "#ffffff" + - "#f5f7fa" + text: + - "#1f2329" + - "#646a73" + functional: + - "#e5e8eb" + - "#f2f3f5" + - "#e6f4ff" + - "#c9cdd4" +todos: + - id: store-state + content: 在 app store 新增 contentMaximized 与 routeRefreshKey 状态及切换/刷新方法(不持久化) + status: completed + - id: apptabs-buttons + content: AppTabs 新增左侧三按钮一体化组(返回/刷新/占位+分割线)与右侧最大化按钮并接线 + status: completed + dependencies: + - store-state + - id: default-layout + content: DefaultLayout 应用内最大化隐藏三块布局、加浮动退出按钮、路由刷新 key 接入 + status: completed + dependencies: + - store-state + - id: verify + content: 校验返回/刷新/最大化/退出交互与各页面正常且未触发整页刷新 + status: completed + dependencies: + - apptabs-buttons + - default-layout +--- + +## 用户需求 + +在页签栏 `AppTabs` 上新增操作按钮: + +- 最左侧新增一组「一体化的三个图标按钮」,按钮之间以分割线分隔,视觉上是一个整体。 +- 第 1 个(最左):返回控制台按钮,点击跳转到 `/dashboard`(工作台)。 +- 第 2 个(中间):刷新按钮,要求**重新挂载当前路由组件**(各页面 `onMounted` 重新执行、重新拉数据),**不能**刷新整站(`router.go(0)` / `location.reload()` 禁止)。 +- 第 3 个(最右):暂不确定功能,先**留空占位**——保留按钮槽位与分割线,禁用状态、无图标。 +- 最右侧新增一个「收缩全屏」按钮,用户确认行为为**应用内最大化**:隐藏侧边栏 + 顶栏 + 页签栏,让内容区占满整个窗口(仍是网页,不调用浏览器 Fullscreen API)。该按钮放在 `AppTabs` 最右侧。 + +## 产品概述 + +为内部管理系统页签栏补充快捷操作:左侧一组统一风格的工具按钮(返回控制台 / 刷新路由 / 占位),右侧一个「应用内最大化」开关。最大化后,侧边栏、顶栏、页签栏全部收起,仅留内容区;因承载开关的页签栏随之隐藏,需在内容区右上角浮动一个「退出最大化」按钮用于恢复。 + +## 核心特性 + +- 左侧三按钮为「一体容器 + 分割线」的视觉整体,风格对齐现有 `tab-nav-button`。 +- 返回控制台:`router.push('/dashboard')`。 +- 刷新路由:通过 `appStore.routeRefreshKey` 自增,驱动 `DefaultLayout` 中 `` 变化以重挂载当前路由(非整页刷新)。 +- 应用内最大化:由 `appStore.contentMaximized` 控制,`DefaultLayout` 用 `v-show` 收起三块布局,内容区右上角出现浮动退出按钮。 +- 占位按钮:禁用、无图标、保留分割线,后续可随时接入功能。 + +## 技术栈 + +- 前端:Vue 3 ` @@ -76,4 +93,38 @@ import AppToolbar from "./components/AppToolbar.vue"; opacity: 1; transform: translateX(0); } + +.maximize-exit { + position: fixed; + top: 14px; + right: 14px; + z-index: 40; + display: inline-flex; + align-items: center; + gap: 6px; + height: 32px; + padding: 0 14px 0 10px; + border: 1px solid var(--fms-border); + border-radius: 16px; + background: var(--fms-surface); + color: var(--fms-text); + box-shadow: 0 4px 14px rgb(0 0 0 / 12%); + cursor: pointer; + font-size: 13px; + transition: + color 0.15s ease, + background-color 0.15s ease, + box-shadow 0.15s ease; + + &:hover { + color: var(--fms-primary, #1677ff); + background: var(--fms-hover, #f5f7fa); + box-shadow: 0 6px 18px rgb(0 0 0 / 18%); + } + + .lucide { + width: 15px; + height: 15px; + } +} diff --git a/code/fms/fms-vue/src/layouts/components/AppSidebar.vue b/code/fms/fms-vue/src/layouts/components/AppSidebar.vue index 6f2d5286..cd50143a 100644 --- a/code/fms/fms-vue/src/layouts/components/AppSidebar.vue +++ b/code/fms/fms-vue/src/layouts/components/AppSidebar.vue @@ -1,209 +1,46 @@ - diff --git a/code/fms/fms-vue/src/layouts/components/AppTabs.vue b/code/fms/fms-vue/src/layouts/components/AppTabs.vue index 7295aa6a..e9722e31 100644 --- a/code/fms/fms-vue/src/layouts/components/AppTabs.vue +++ b/code/fms/fms-vue/src/layouts/components/AppTabs.vue @@ -1,7 +1,7 @@ @@ -319,4 +382,51 @@ function handleTabKeydown(event, index) { height: 14px; } } + +.tab-actions { + display: flex; + flex: none; + height: 28px; + align-items: center; + border: 1px solid var(--fms-border); + border-radius: 6px; + background: var(--fms-surface); + overflow: hidden; +} + +.tab-action { + display: grid; + width: 30px; + height: 100%; + padding: 0; + place-items: center; + border: 0; + background: transparent; + color: var(--fms-text-secondary); + cursor: pointer; + transition: + color 0.15s ease, + background-color 0.15s ease; + + &:hover:not(:disabled) { + color: var(--tabs-active-color); + background: var(--tabs-active-bg); + } + + .lucide { + width: 15px; + height: 15px; + } +} + +.tab-action__divider { + flex: none; + width: 1px; + height: 16px; + background: var(--fms-border); +} + +.tab-maximize { + margin-left: 2px; +} diff --git a/code/fms/fms-vue/src/layouts/components/AppToolbar.vue b/code/fms/fms-vue/src/layouts/components/AppToolbar.vue index 39da7435..4c9d77d5 100644 --- a/code/fms/fms-vue/src/layouts/components/AppToolbar.vue +++ b/code/fms/fms-vue/src/layouts/components/AppToolbar.vue @@ -64,7 +64,7 @@ function confirmLogout() {