2026-05-20-01-08-38 调整工具栏布局与平移步长
This commit is contained in:
@@ -55,9 +55,9 @@ const poseStepConfig: Record<ModelPoseKey, { min: number; max: number; step: num
|
||||
rotateX: { min: -180, max: 180, step: 1, minus: '-90°', plus: '+90°', quick: 90 },
|
||||
rotateY: { min: -180, max: 180, step: 1, minus: '-90°', plus: '+90°', quick: 90 },
|
||||
rotateZ: { min: -180, max: 180, step: 1, minus: '-90°', plus: '+90°', quick: 90 },
|
||||
translateX: { min: -2, max: 2, step: 0.05, minus: '-X', plus: '+X' },
|
||||
translateY: { min: -2, max: 2, step: 0.05, minus: '-Y', plus: '+Y' },
|
||||
translateZ: { min: -2, max: 2, step: 0.05, minus: '-Z', plus: '+Z' },
|
||||
translateX: { min: -2, max: 2, step: 0.005, minus: '-X', plus: '+X' },
|
||||
translateY: { min: -2, max: 2, step: 0.005, minus: '-Y', plus: '+Y' },
|
||||
translateZ: { min: -2, max: 2, step: 0.005, minus: '-Z', plus: '+Z' },
|
||||
scale: { min: 0.5, max: 2, step: 0.05, minus: '-S', plus: '+S' },
|
||||
};
|
||||
|
||||
@@ -78,6 +78,19 @@ function clamp(value: number, min: number, max: number) {
|
||||
return Math.max(min, Math.min(max, value));
|
||||
}
|
||||
|
||||
function getStepPrecision(step: number) {
|
||||
if (step >= 1) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const text = step.toString();
|
||||
if (text.includes('e-')) {
|
||||
return Number(text.split('e-')[1] ?? 2);
|
||||
}
|
||||
|
||||
return text.split('.')[1]?.length ?? 0;
|
||||
}
|
||||
|
||||
function createDicomTexture(frame: string, width: number, height: number) {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = width;
|
||||
@@ -1944,7 +1957,7 @@ export default function ReverseWorkspace({ projectId }: { projectId: string }) {
|
||||
</div>
|
||||
|
||||
<div className="min-h-[780px] lg:min-h-0 flex-1 grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
<div className="lg:col-span-7 min-h-0 flex flex-col gap-4">
|
||||
<div className="lg:col-span-6 min-h-0 flex flex-col gap-4">
|
||||
<div className="px-2 flex items-center justify-between shrink-0">
|
||||
<h3 className="font-bold text-slate-700 flex items-center gap-2">
|
||||
<Rotate3d size={18} className="text-blue-500" />
|
||||
@@ -2029,7 +2042,7 @@ export default function ReverseWorkspace({ projectId }: { projectId: string }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-2 min-h-0 flex flex-col gap-4 overflow-hidden">
|
||||
<div className="lg:col-span-3 min-h-0 flex flex-col gap-4 overflow-hidden">
|
||||
<div className="px-2 shrink-0">
|
||||
<h3 className="font-bold text-slate-700 flex items-center gap-2">
|
||||
<Settings2 size={18} className="text-emerald-500" />
|
||||
@@ -2191,7 +2204,7 @@ export default function ReverseWorkspace({ projectId }: { projectId: string }) {
|
||||
>
|
||||
+
|
||||
</button>
|
||||
<span className="text-right font-mono">{Number(item.value).toFixed(poseStepConfig[item.key].step < 1 ? 2 : 0)}</span>
|
||||
<span className="text-right font-mono">{Number(item.value).toFixed(getStepPrecision(poseStepConfig[item.key].step))}</span>
|
||||
{poseStepConfig[item.key].quick && (
|
||||
<div className="col-start-2 col-span-3 grid grid-cols-2 gap-1">
|
||||
<button
|
||||
|
||||
56
工程分析/实现方案-2026-05-20-01-08-38.md
Normal file
56
工程分析/实现方案-2026-05-20-01-08-38.md
Normal file
@@ -0,0 +1,56 @@
|
||||
# 实现方案-2026-05-20-01-08-38
|
||||
|
||||
## 实现方案文档路径
|
||||
|
||||
`工程分析/实现方案-2026-05-20-01-08-38.md`
|
||||
|
||||
## 修改目标
|
||||
|
||||
优化逆向工作区三栏空间分配，降低左侧三维融合视图宽度并扩大中部可视化工具栏，同时将模型平移步长精细化为 `0.005`。
|
||||
|
||||
## 涉及路径
|
||||
|
||||
- `WebSite/src/components/ReverseWorkspace.tsx`
|
||||
- `工程分析/需求分析-2026-05-20-01-08-38.md`
|
||||
- `工程分析/实现方案-2026-05-20-01-08-38.md`
|
||||
- `工程分析/测试方案-2026-05-20-01-08-38.md`
|
||||
- `工程分析/经验记录.md`
|
||||
|
||||
## 技术路线
|
||||
|
||||
1. 调整逆向工作区桌面端 grid 栅格：
|
||||
- 左侧 `lg:col-span-7` 改为 `lg:col-span-6`。
|
||||
- 中部 `lg:col-span-2` 改为 `lg:col-span-3`。
|
||||
- 右侧保持 `lg:col-span-3`。
|
||||
2. 修改 `poseStepConfig`：
|
||||
- `translateX/Y/Z.step` 从 `0.05` 改为 `0.005`。
|
||||
3. 新增或调整数值精度显示函数：
|
||||
- 根据 step 自动判断显示位数。
|
||||
- `0.005` 显示三位小数，旋转仍显示整数，缩放仍显示两位小数。
|
||||
|
||||
## 执行步骤
|
||||
|
||||
- 修改 `ReverseWorkspace.tsx`。
|
||||
- 执行 `npm run lint`。
|
||||
- 执行 `npm run build`。
|
||||
- 重新部署 `tmux` 服务并验证。
|
||||
- 更新测试结果与经验记录。
|
||||
- 显式暂存本次文件并提交推送。
|
||||
|
||||
## 兼容性与回滚方案
|
||||
|
||||
- 不修改数据结构与 API。
|
||||
- 如布局不合适，可回退为原 `7 / 2 / 3` 栅格。
|
||||
- 如 `0.005` 过细，可只回调 `poseStepConfig` 的平移 step。
|
||||
|
||||
## 预计文件变更
|
||||
|
||||
- `ReverseWorkspace.tsx`：布局栅格、平移步长、数值显示精度。
|
||||
- 新增本次三份工程文档。
|
||||
- 更新 `经验记录.md`。
|
||||
|
||||
## 提交与部署策略
|
||||
|
||||
- 提交信息：`2026-05-20-01-08-38 调整工具栏布局与平移步长`
|
||||
- 显式暂存本次相关文件，避免提交历史删除状态。
|
||||
- 推送到 Gitea `origin/main` 并重新部署。
|
||||
50
工程分析/测试方案-2026-05-20-01-08-38.md
Normal file
50
工程分析/测试方案-2026-05-20-01-08-38.md
Normal file
@@ -0,0 +1,50 @@
|
||||
# 测试方案-2026-05-20-01-08-38
|
||||
|
||||
## 测试方案文档路径
|
||||
|
||||
`工程分析/测试方案-2026-05-20-01-08-38.md`
|
||||
|
||||
## 静态检查
|
||||
|
||||
- 在 `WebSite/` 下执行 `npm run lint`。
|
||||
|
||||
## 构建检查
|
||||
|
||||
- 在 `WebSite/` 下执行 `npm run build`。
|
||||
|
||||
## 关键业务场景验证
|
||||
|
||||
- 桌面端逆向工作区三栏布局应变为左侧 6 栅格、中部 3 栅格、右侧 3 栅格。
|
||||
- 中部“可视化工具栏”宽度应明显变宽。
|
||||
- 左侧“影像与模型融合视角”宽度应相应收窄，但仍可正常渲染。
|
||||
- 平移 X/Y/Z 的滑条、加减按钮和长按连续移动均应使用 `0.005` 步长。
|
||||
- 平移数值显示应保留三位小数。
|
||||
|
||||
## 回归关注点
|
||||
|
||||
- 旋转步长仍为 `1` 度。
|
||||
- 缩放步长仍为 `0.05`。
|
||||
- 右侧映射视图宽度与功能不变。
|
||||
- 不影响 DICOM/STL 数据加载与导出按钮。
|
||||
|
||||
## 部署验证
|
||||
|
||||
- 重启 `tmux` 会话 `revoxelseg-dicom`。
|
||||
- 验证：
|
||||
- `curl http://127.0.0.1:4000/api/health`
|
||||
- `curl -I http://127.0.0.1:4000/`
|
||||
|
||||
## Git/Gitea 备份验证
|
||||
|
||||
- 显式暂存本次相关代码和文档。
|
||||
- 创建包含时间戳和描述的 commit。
|
||||
- 推送到 Gitea `origin/main`。
|
||||
|
||||
## 实际执行结果
|
||||
|
||||
- `npm run lint`：通过。
|
||||
- `npm run build`：通过；Vite 保留既有 chunk 体积提示，不影响构建产物生成。
|
||||
- 部署：已重启 `tmux` 会话 `revoxelseg-dicom`，服务日志显示 `ReVoxelSeg DICOM server ready at http://0.0.0.0:4000/`。
|
||||
- `curl http://127.0.0.1:4000/api/health`：通过，返回 `{"ok":true,"service":"revoxelseg-dicom"}`。
|
||||
- `curl -I http://127.0.0.1:4000/`：通过，返回 `HTTP/1.1 200 OK`。
|
||||
- 代码检查确认：桌面端布局已改为左侧 `lg:col-span-6`、中部 `lg:col-span-3`、右侧 `lg:col-span-3`；平移 X/Y/Z 的 step 已改为 `0.005`；数值显示已按 step 自动保留小数位。
|
||||
36
工程分析/经验记录.md
36
工程分析/经验记录.md
@@ -955,3 +955,39 @@ C. 解决问题方案
|
||||
D. 后续如何避免问题
|
||||
|
||||
所有实体 Mask 光栅化都应包含“内部孔洞填补”或等价的连通域后处理；验证时不能只看边界是否有线，还要检查内部是否连续饱满。若后续接入后端体素化，也应保留连通域清理策略作为质量检查。
|
||||
|
||||
## 2026-05-20-01-08-38 工具栏空间不足时优先调整栅格比例
|
||||
|
||||
A. 具体问题
|
||||
|
||||
逆向工作区左侧“影像与模型融合视角”占用桌面端 7 栅格，中部“可视化工具栏”只占 2 栅格，导致三维视图偏大而工具栏过窄，模型位姿和构件层级控制显得拥挤。
|
||||
|
||||
B. 产生问题原因
|
||||
|
||||
早期布局更偏向三维展示，将主要横向空间给了融合视图；随着中部工具栏承担模型显示、融合显示、切分、位姿和构件层级等操作，2 栅格已经不足以承载密集控件。
|
||||
|
||||
C. 解决问题方案
|
||||
|
||||
将桌面端三栏比例从 `7 / 2 / 3` 调整为 `6 / 3 / 3`，右侧映射视图保持不变，左侧三维视图让出一格给中部工具栏。
|
||||
|
||||
D. 后续如何避免问题
|
||||
|
||||
新增工具栏控件后，应重新评估三栏空间分配。操作密集型面板不能长期压缩在过窄栅格内；如果中部继续增加控件，应优先考虑分组、折叠或继续调整栅格比例。
|
||||
|
||||
## 2026-05-20-01-08-38 小步长控制需要同步显示精度
|
||||
|
||||
A. 具体问题
|
||||
|
||||
用户要求模型位姿平移步长改为 `0.005`，如果只改 slider step，而数值仍按两位小数显示，界面会把部分精细变化四舍五入隐藏。
|
||||
|
||||
B. 产生问题原因
|
||||
|
||||
旧显示逻辑用 `step < 1 ? 2 : 0` 固定小数位，适合 `0.05` 和 `1`，但不适合 `0.005` 这种三位小数步长。
|
||||
|
||||
C. 解决问题方案
|
||||
|
||||
新增 `getStepPrecision`，根据 step 本身计算显示小数位；平移 X/Y/Z step 改为 `0.005` 后自动显示三位小数，旋转仍显示整数，缩放仍显示两位小数。
|
||||
|
||||
D. 后续如何避免问题
|
||||
|
||||
调整任何滑条或步进按钮的 step 时，同步检查数值展示、长按步进和手动输入精度，避免控制精度和显示精度不一致。
|
||||
|
||||
48
工程分析/需求分析-2026-05-20-01-08-38.md
Normal file
48
工程分析/需求分析-2026-05-20-01-08-38.md
Normal file
@@ -0,0 +1,48 @@
|
||||
# 需求分析-2026-05-20-01-08-38
|
||||
|
||||
## 开始时间
|
||||
|
||||
2026-05-20-01-08-38
|
||||
|
||||
## 原始需求摘要
|
||||
|
||||
用户提出两点产品润色需求：一是左侧“影像与模型融合视角”画面占比过大，中间“可视化工具栏”过小，需要调整三栏布局比例；二是“模型位姿”中 X/Y/Z 平移的单次步长需要改为 `0.005`。
|
||||
|
||||
## 业务目标
|
||||
|
||||
- 缩小左侧三维融合视图占用宽度，让中部工具栏获得更宽操作空间。
|
||||
- 保持右侧“逆向分割映射视图”宽度稳定。
|
||||
- 将模型平移调节从较粗粒度 `0.05` 改为更精细的 `0.005`。
|
||||
- 平移数值显示需要能表达三位小数，避免 UI 显示吞掉精细步长。
|
||||
|
||||
## 输入与输出
|
||||
|
||||
- 输入：
|
||||
- 现有逆向工作区三栏 grid 布局。
|
||||
- `poseStepConfig` 中模型位姿控制配置。
|
||||
- 输出：
|
||||
- 左/中/右三栏比例调整后的逆向工作区。
|
||||
- 平移 X/Y/Z 滑条、点击按钮和长按连续移动均使用 `0.005` 步长。
|
||||
- 位姿数值展示自动匹配步长精度。
|
||||
|
||||
## 影响范围
|
||||
|
||||
- `WebSite/src/components/ReverseWorkspace.tsx`
|
||||
- 本次工程分析文档与 `工程分析/经验记录.md`
|
||||
|
||||
## 关键约束
|
||||
|
||||
- 不修改 DICOM/STL 算法与后端 API。
|
||||
- 不影响右侧映射视图的独立 Slice Navigator。
|
||||
- 不改变旋转和缩放步长。
|
||||
- 本次提交不能混入历史 `工程分析` 文档删除状态。
|
||||
|
||||
## 风险点
|
||||
|
||||
- 中部工具栏变宽后，左侧三维视图不能小到影响基本观察。
|
||||
- 平移步长变细后，数值显示必须保留足够小数位。
|
||||
- 长按连续移动仍沿用现有节奏，实际移动速度会随步长降低。
|
||||
|
||||
## 默认假设
|
||||
|
||||
- 采用 `6 / 3 / 3` 的桌面三栏比例：左侧从 7 栅格降到 6 栅格，中部从 2 栅格升到 3 栅格，右侧保持 3 栅格。
|
||||
Reference in New Issue
Block a user