Commit 4c0af7a8 by luoqi

fix(web): 工作台抽屉临界点 1280→1024(lg) + 把手 z-50 防被详情面板覆盖

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
parent ee05257d
...@@ -14,7 +14,7 @@ export const PLAN_WORKSPACE_HEADER_SLOT = 'plan-workspace-header'; ...@@ -14,7 +14,7 @@ export const PLAN_WORKSPACE_HEADER_SLOT = 'plan-workspace-header';
* ┌ header(详情 TopBar portal 到此,全宽延伸到最左)┐ * ┌ header(详情 TopBar portal 到此,全宽延伸到最左)┐
* ├ 左栏选患者列 300px │ 详情内容(原三列) ┤ * ├ 左栏选患者列 300px │ 详情内容(原三列) ┤
* 布局挂在动态段之上 → 切患者只重渲染右侧,左栏筛选/分页/滚动全保留。 * 布局挂在动态段之上 → 切患者只重渲染右侧,左栏筛选/分页/滚动全保留。
* 响应式:<xl 左栏收成抽屉(单实例 CSS 平移,状态不丢)+ 左缘竖把手"选患者"作明确点击点; * 响应式:<lg(1024)左栏收成抽屉(单实例 CSS 平移,状态不丢)+ 左缘竖把手"选患者"作明确点击点;
* 选中患者后自动收起。/plans 列表页(无 planId 段)不渲染本骨架。 * 选中患者后自动收起。/plans 列表页(无 planId 段)不渲染本骨架。
*/ */
export default function PlansLayout({ children }: { children: React.ReactNode }) { export default function PlansLayout({ children }: { children: React.ReactNode }) {
...@@ -30,14 +30,14 @@ export default function PlansLayout({ children }: { children: React.ReactNode }) ...@@ -30,14 +30,14 @@ export default function PlansLayout({ children }: { children: React.ReactNode })
<div className="relative flex min-h-0 flex-1"> <div className="relative flex min-h-0 flex-1">
{/* 小屏遮罩 */} {/* 小屏遮罩 */}
{railOpen && ( {railOpen && (
<div className="fixed inset-0 z-30 bg-black/30 xl:hidden" onClick={() => setRailOpen(false)} /> <div className="fixed inset-0 z-40 bg-black/30 lg:hidden" onClick={() => setRailOpen(false)} />
)} )}
{/* 左栏:xl+ 常驻在流内;<xl 固定抽屉(CSS 平移,单实例不重挂 → 状态保留) */} {/* 左栏:xl+ 常驻在流内;<xl 固定抽屉(CSS 平移,单实例不重挂 → 状态保留) */}
<div <div
className={cn( className={cn(
'z-40 h-full transition-transform duration-200', 'z-50 h-full transition-transform duration-200',
'fixed inset-y-0 left-0 shadow-xl xl:static xl:inset-auto xl:translate-x-0 xl:shadow-none', 'fixed inset-y-0 left-0 shadow-xl lg:static lg:inset-auto lg:translate-x-0 lg:shadow-none',
railOpen ? 'translate-x-0' : '-translate-x-full xl:translate-x-0', railOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
)} )}
> >
{/* 小屏抽屉内关闭钮 */} {/* 小屏抽屉内关闭钮 */}
...@@ -45,7 +45,7 @@ export default function PlansLayout({ children }: { children: React.ReactNode }) ...@@ -45,7 +45,7 @@ export default function PlansLayout({ children }: { children: React.ReactNode })
<button <button
type="button" type="button"
onClick={() => setRailOpen(false)} onClick={() => setRailOpen(false)}
className="absolute -right-9 top-3 z-50 rounded-full bg-white p-1.5 text-slate-500 shadow-md ring-1 ring-slate-200 xl:hidden" className="absolute -right-9 top-3 z-50 rounded-full bg-white p-1.5 text-slate-500 shadow-md ring-1 ring-slate-200 lg:hidden"
title="收起" title="收起"
> >
<X className="h-4 w-4" /> <X className="h-4 w-4" />
...@@ -58,7 +58,7 @@ export default function PlansLayout({ children }: { children: React.ReactNode }) ...@@ -58,7 +58,7 @@ export default function PlansLayout({ children }: { children: React.ReactNode })
<button <button
type="button" type="button"
onClick={() => setRailOpen(true)} onClick={() => setRailOpen(true)}
className="fixed left-0 top-1/2 z-30 -translate-y-1/2 rounded-r-lg bg-teal-600 px-1.5 py-3 text-white shadow-lg hover:bg-teal-700 xl:hidden" className="fixed left-0 top-1/2 z-50 -translate-y-1/2 rounded-r-lg bg-teal-600 px-1.5 py-3 text-white shadow-lg hover:bg-teal-700 lg:hidden"
title="打开患者列表" title="打开患者列表"
> >
<span className="flex flex-col items-center gap-1"> <span className="flex flex-col items-center gap-1">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment