跟踪 STP 查看器的新功能和增强
修复关键的导入和测量问题，文件加载性能提升高达95%
2025/09/02
平台稳定性成就 - 解决最终集成问题并实现显著性能提升：
本版本解决了几个严重影响用户体验的关键问题：
问题解决：彻底修复"第一次有效，后续失败"的问题
window.OV 对象在组件清理期间被不正确地清除问题解决：3D模型上的测量标记不显示
window.OV 全局对象直接调用官方API问题解决：全屏模式下移动设备上的更多菜单按钮无响应
问题1："本地可用但线上不可用"故障
用户反馈现象:
根本原因分析: 通过系统化调试发现，问题源于37+个defer脚本在生产环境中的执行顺序不可预测：
// 问题代码（layout.tsx原始版本）
<script type="text/javascript" src="/js/o3dv.min.js" defer></script>
// defer导致脚本在DOM解析完成后异步执行，但执行顺序无法保证解决方案: 实现智能OV加载器，包含多重fallback机制：
// 解决方案（layout.tsx现有版本）
const fallbackFiles = [
'/js/o3dv.min.js',
'/js/o3dv.original.min.js',
'/js/o3dv.min.js.backup'
];
async function tryLoadOV() {
for (const file of fallbackFiles) {
try {
loadAttempt++;
await loadScript(file);
if (checkOV()) {
window.dispatchEvent(new CustomEvent('ovLoaded'));
return;
}
} catch (error) {
console.warn('Online3DViewer 文件加载失败:', file);
continue;
}
}
}效果验证:
背景: 基于用户需求建立左侧浮动分享工具条，经历了三个版本的关键架构演进
设计决策过程:
lg:block)/移动隐藏的设计权衡技术实现挑战:
/* 固定定位与层级管理 */
.floating-share-bar {
position: fixed;
left: 1rem;
top: 50%;
transform: translateY(-50%);
z-index: 40; /* 关键的层级设计 */
}关键技术决策:
scale(1.1)的交互反馈设计用户需求驱动:
技术实现复杂性:
// 状态管理挑战
const [showMoreDialog, setShowMoreDialog] = useState(false);
// More按钮的特殊处理
const platforms = [
// ... 现有7个平台
{
name: 'More',
isMore: true,
onClick: () => setShowMoreDialog(true)
}
];集成挑战:
问题诊断过程:
问题现象: 首页不显示FloatingShareBar
架构分析: FloatingShareBar被放置在ViewerView内部
状态依赖: ViewerView只在loading/viewing状态下渲染
首页状态: STPViewer默认为upload状态，显示UploadView
根本原因: FloatingShareBar在错误的组件层级当前架构问题:
首页 → HeroSection → HeroStpViewer → STPViewer
├── upload状态 → UploadView (无FloatingShareBar) ❌
├── loading状态 → ViewerView (有FloatingShareBar) ✅
└── viewing状态 → ViewerView (有FloatingShareBar) ✅解决方案架构:
STPViewer (新增FloatingShareBar层级)
├── upload状态 → UploadView + FloatingShareBar ✅
├── loading状态 → ViewerView + FloatingShareBar ✅
└── viewing状态 → ViewerView + FloatingShareBar ✅关键代码修改:
// src/components/stp-viewer/stp-viewer.tsx
return (
<div className={cn('stp-viewer-container', className)}>
{/* 状态相关的主要内容 */}
{renderContent()}
{/* 全局浮动分享工具条 */}
<FloatingShareBar file={viewerState.file} />
</div>
);对比分析方法: 通过系统化对比主页面模式vs全屏模式发现功能不一致：
| 功能 | 主页面模式 | 全屏模式 | 状态 |
|---|---|---|---|
| New File | ✅ | ✅ | 一致 |
| Screenshot | ✅ | ✅ | 一致 |
| Share | ❌ 缺失 | ✅ | 不一致 |
代码层面分析:
// viewer-view.tsx:730-766 - 主页面工具栏
const toolbarButtons: ToolbarButton[] = [
{ id: 'new-file', /* ... */ },
{ id: 'screenshot', /* ... */ },
// ❌ 缺少 Share 按钮
];
// FullscreenToolbar.tsx:132-139 - 全屏模式工具栏
const secondaryTools: ToolbarButton[] = [
{
id: 'share',
label: t('toolbar.share'),
// ✅ 已有但功能未实现
},
];技术限制的深度发现:
// ✅ React-Share 实际能力
- 链接分享: 所有平台都支持URL分享
- 文本内容: 支持标题、描述等文本参数
- 社交平台跳转: 打开平台官方分享页面
- 零外部依赖: 不需要加载第三方SDK
// ❌ React-Share 技术限制
- 不支持本地文件分享: 无法直接分享截图、文档等文件
- 不支持图片上传: 主流平台不支持直接上传图片
- 仅支持公网图片URL: 少数平台需要公网可访问图片链接
- 无后端功能: 无法处理文件上传、短链接生成开发计划的现实调整:
组件策略:
src/components/stp-viewer/
├── shared/
│ └── SimpleShareDialog.tsx # 统一分享对话框（唯一组件）
├── viewer-view.tsx # 添加Share按钮
└── fullscreen/
└── FullscreenToolbar.tsx # 连接实际分享功能设计原则的实践:
问题1: disabled按钮逻辑错误
// 错误逻辑
{
id: 'share',
disabled: !isViewerReady, // ❌ 分享页面链接不需要等待模型加载
}
// 正确逻辑
{
id: 'share',
disabled: false, // ✅ 页面分享功能应始终可用
}根本原因分析:
isViewerReady在模型加载前为false问题2: 平台支持不足的快速响应
第一阶段: 基础修复 (15分钟)
// src/components/stp-viewer/viewer-view.tsx:754
- disabled: !isViewerReady,
+ disabled: false,第二阶段: 平台扩展 (20分钟)
// 新增6个主流平台
const newPlatforms = [
'WhatsApp', // 全球最大即时通讯
'Telegram', // 技术用户群体偏爱
'Reddit', // 技术社区主要分享平台
'Pinterest', // 视觉内容分享，适合3D模型
'Weibo', // 中国用户主要社交平台
'Line', // 亚洲地区流行通讯应用
];第三阶段: 体验优化 (10分钟)
架构演进的重要性:
现实主义的技术选型:
快速响应的开发能力:
这个分享功能的开发历程展现了从架构演进到技术选型，从问题诊断到快速修复的完整开发智慧，为团队积累了宝贵的实战经验。
大规模代码清理和性能改进，保持18秒加载性能
2025/08/28
全面清理和优化，提升可维护性和性能：
智能识别设备类型，提供适配的操作提示
2025/08/27
优化移动端用户体验，根据设备类型显示对应操作提示：
useResponsive Hook 判断设备类型解决长文件名挤压按钮问题，优化移动端布局
2025/08/27
解决移动端长文件名挤压工具按钮的显示问题：
修复 3D 查看器主题切换同步问题，提升视觉体验
2025/08/26
我们解决了一个重要的用户体验问题：
移除 IGES 格式支持，新增用户评价系统和首页优化
2025/08/20
我们专注于 STEP 格式支持，提供更优秀的体验：
提升文件大小限制至 100MB，优化大文件加载性能
2025/08/15
我们对 STP Viewer 进行了重要的性能优化：
首个 STP 文件在线查看器版本，支持 STEP 格式 3D 预览
2025/08/01
我们很高兴发布 STP Viewer 的首个版本，包含以下核心功能：
首个版本提供基础STP文件查看和3D模型渲染功能
2025/06/01
在首个版本中，STP Viewer为工程师和设计专业人士提供了一个强大且直观的3D模型查看解决方案。我们专注于构建一个高效、简洁的平台，满足工程设计中对复杂3D模型快速预览的需求。
这是STP Viewer的起点。我们将持续迭代，引入更多先进功能，如精确测量工具、模型对比和高级渲染选项，致力于为工程师提供最佳的在线3D模型查看体验。
感谢所有早期测试者和提供宝贵反馈的用户，你们的支持是我们不断改进的动力。