diff --git a/src/components/canvas/canvas.module.css b/src/components/canvas/canvas.module.css index 5697732..24babcb 100644 --- a/src/components/canvas/canvas.module.css +++ b/src/components/canvas/canvas.module.css @@ -82,6 +82,7 @@ .colorPicker { position: relative; display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; cursor: pointer; } .colorPicker span { width: 17px; height: 17px; border: 1px solid #bfb4aa; border-radius: 50%; } .colorPicker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } +/* z-index 只在相关层叠上下文中排序;Portal、transform/zoom 或原生 top layer 可改变跨容器的叠放关系。 */ /* 分支菜单固定定位并高于普通工具条,菜单项整行点击;定位坐标由组件计算。 */ .branchMenu { position: fixed; z-index: 60; width: 210px; padding: 7px; border: 1px solid #ded7ce; border-radius: 10px; background: #fffefb; color: #49372e; box-shadow: 0 8px 30px #32251a1a; } .branchMenu header { display: flex; align-items: center; justify-content: space-between; padding: 3px 6px 6px; color: #92877c; font-size: 11px; } @@ -134,6 +135,7 @@ /* 归属变更通知居中放在底部工具栏上方;空内容隐藏,非空也不接管指针。 */ .membershipNotice { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); z-index: 20; max-width: min(540px, calc(100vw - 32px)); padding: 8px 12px; border: 1px solid #c8d9ca; border-radius: 8px; background: #f3f8f3; color: #3e684b; font-size: 12px; pointer-events: none; } .membershipNotice:empty { display: none; } +/* 以下后代选择器依赖实际 DOM 祖先;移到 body Portal 的浮层不会仅因 React 上下文关系命中 .handMode。 */ /* 手形模式统一关闭文本、缩放、中心点和样式工具条的编辑入口。 */ .handMode .plainText { pointer-events: none; } .handMode .rotationHint, .handMode .centerHandle { visibility: hidden; } @@ -150,6 +152,7 @@ .frameNode.selectedFrame { border-color: #a47764; box-shadow: 0 0 0 2px #a477641a; } /* 名称放在分区顶部外侧并以左下角缩放;文字截断但标签自身可拖动。 */ .frameLabel { position: absolute; bottom: calc(100% + 8px); left: 0; max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; line-height: 22px; color: #92806d; transform-origin: left bottom; pointer-events: auto; cursor: grab; } +/* 这里的10px属于局部 CSS 坐标,外层画布/viewScale 缩放后不保证仍为屏幕10px。 */ /* 四条 10px 命中带跨在视觉边框两侧,扩大拖动区域,不给整个分区内部铺点击层。 */ .frameBorderHit { position: absolute; pointer-events: auto; cursor: grab; } .frameBorder_top { top: -5px; left: 0; right: 0; height: 10px; } @@ -217,6 +220,7 @@ @keyframes edgePulse { 0%, 100% { opacity: .1; } 50% { opacity: 1; } } /* 第二组减少动态效果规则关闭滑块过渡和两种连线动画。 */ @media (prefers-reduced-motion: reduce) { .frameLabelSlider { transition: none; } .edgeDashAnimation, .edgePulseAnimation { animation: none; } } +/* 覆盖层能拦截其区域的指针,不自动使背后 DOM inert 或禁用全部键盘命令;准入仍须由事件/命令层处理。 */ /* 全画布 busy 覆盖层是独立呈现态;成员局部同步使用后部 memberSync,不应从这个类推断所有任务都会锁画布。 */ .canvasBusy { position: absolute; inset: 0; display: flex; align-items: start; justify-content: center; padding-top: 80px; z-index: 200; background: #fffefb35; cursor: progress; color: #78523f; font-size: 12px; } /* 子图显示比例输入窄排布;折叠子图的摘要占内部 inset 区域并可点击。 */ diff --git a/src/components/landing-page.module.css b/src/components/landing-page.module.css index 1a7dc3b..ca672cf 100644 --- a/src/components/landing-page.module.css +++ b/src/components/landing-page.module.css @@ -123,7 +123,7 @@ .workflowList h3 { font-size: 15px; font-weight: 500; color: #5e6e4e; margin-bottom: 8px; } .workflowList p { font-size: 11px; line-height: 1.8; color: #747a6d; } .workflowList svg { flex-shrink: 0; color: #a5b38e; margin-left: auto; } -/* FAQ 桌面为标题/问题两列,问题按钮整行可点击;展开内容是否存在由组件决定。 */ +/* FAQ 桌面为标题/问题两列,问题按钮整行可点击;组件保留回答 DOM,用 hidden 属性切换可见性。 */ .faq { max-width: 1320px; padding: 105px 48px; margin: auto; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 90px; } .faqItem { border-bottom: 1px solid var(--line); } .faqItem button { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 23px 0; font-size: 14px; text-align: left; } @@ -203,5 +203,6 @@ .ideaCard strong { margin-top: 8px; margin-bottom: 8px; } .noteTag { font-size: 7px; padding: 2px; } } +/* 只关闭 transition,不撤销 hover 的 translate 或卡片固定 rotate;减少动态效果并不把示意图恢复成无变换布局。 */ /* 按减少动态效果偏好关闭链接、按钮和 FAQ 图标的过渡。 */ @media (prefers-reduced-motion: reduce) { .page a, .page button, .faqItem svg { transition: none; } }