Playground

@tripo3d/utils 工具函数的交互测试台 + Tripo 私有图标集浏览器。所有示例都会调用真实函数,输出进入下方日志。

包含的能力

• isMobileDevice编辑 UA 字符串,实时显示判断结果
• sleep / pfPromise 工具:延时与外部解构 resolve/reject
• download触发浏览器下载,可重命名(同源限制)
• getSuffix / readFileAsDataURLURL/文件名解析后缀;选择文件读取 base64 dataURL
• localStorage 包装set/get/remove + JSON 序列化与反序列化
• utcToDetailed / utcToApproximate输入 ISO 字符串或 ms 时间戳,实时格式化
• Tripo 图标集从 assets CDN 加载 icon.json,按全部/单色/彩色筛选,支持上传 SVG、删除图标、点击复制 i-tripo:xxx 类名

设计要点

单文件 + 模块单例日志

整个 playground 在一个 Playground.vue 里。所有"工具函数调用"的输出统一推到本地的 logs ref——避免每个 card 各自维护输出区。

Icon CDN 管理

Playground 会从 https://assets.cdn.tripo3d.com/fe-tripo-tools/icon.json 加载图标集。上传 SVG 与删除图标只暴露 assets CDN 入口,页面不展示底层存储配置。

上传/删除完成后会重新拉取 CDN 上的 icon.json,确保预览与复制使用的是最新图标集。

dataURL 截断显示

readFileAsDataURL 完整返回值可能很长(图片几十 KB → 几十万字符),日志面板里只展示前 200 字节 + 总长度,避免渲染卡顿。

源码参考

Playground.vue