[{"data":1,"prerenderedAt":69},["ShallowReactive",2],{"project:dreamos:zh-cn":3,"i-tabler:app-window":62,"i-tabler:radio":65,"i-tabler:language":67},{"slug":4,"name":5,"summary":6,"role":-1,"updateNote":-1,"meta":7,"coverUrl":19,"lang":22,"isFallback":23,"featuredRank":24,"badge":25,"lastActivity":18,"tapeNumber":26,"blocks":27},"dreamos","梦 -蒸汽波- 2.0","蒸汽波风格的模拟操作系统，用窗口界面呈现个人简历与作品。",{"origin":8,"categories":9,"tags":11,"released":18,"cover":19,"links":20},"personal",[10],"frontend",[12,13,14,15,16,17],"nuxt","unocss","pinia","vueuse","animejs","interactjs","2025-09-06","\u002F_nuxt\u002Fcover.BAlcmKfk.webp",{"demo":21},"https:\u002F\u002Fdreamos.net","zh-CN",false,0,null,4,[28,43,50,56],{"type":29,"items":30},"features",[31,35,39],{"title":32,"description":33,"icon":34},"窗口式界面","仿照操作系统的操作方式，每个介绍页面都是可以操作的独立窗口。","tabler:app-window",{"title":36,"description":37,"icon":38},"午夜电台","基于浏览器原生 Audio API 实现的音乐播放器，可以切换曲目，一边逛一边听音乐。","tabler:radio",{"title":40,"description":41,"icon":42},"三语切换","系统语言可在繁体中文、简体中文与英文之间切换。","tabler:language",{"type":44,"title":45,"problem":46,"solution":48},"challenge","窗口不能被拖出可视范围",[47],"拖拽窗口时要计算窗口位置与屏幕边界，避免窗口被拖到可视范围之外。",[49],"借助 AI 推导边界计算并调整参数，降低算错的风险。拖拽中容易忽略的底层细节，则交给 interact.js 处理。",{"type":44,"title":51,"problem":52,"solution":54},"浏览器缩放后窗口定位错乱",[53],"用户调整浏览器大小后，窗口如果不重新计算，就无法在新的尺寸下正确定位，拖拽时会出现不可预期的错误。",[55],"用 debounce 等用户停止调整尺寸，再通过 :key 重新创建窗口并居中，让用户自行拖回想要的位置。用户很少反复缩放，比起按比例换算位置，这个做法简单又可靠。",{"type":44,"title":57,"problem":58,"solution":60},"点击的窗口要置于最上层",[59],"要像操作系统一样，点到哪个窗口，哪个窗口就移到最上层。",[61],"记录当前最大的 z-index，窗口被点击时设为最大值加一。z-index 上限是 2147483647，正常使用几乎不可能用完。",{"left":24,"top":24,"width":63,"height":63,"rotate":24,"vFlip":23,"hFlip":23,"body":64},24,"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm3 1h.01M9 8h.01\"\u002F>",{"left":24,"top":24,"width":63,"height":63,"rotate":24,"vFlip":23,"hFlip":23,"body":66},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 3L4.629 6.749A1 1 0 0 0 4 7.677V19a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H4.5M4 12h16M7 12v-2m10 6v.01M13 16v.01\"\u002F>",{"left":24,"top":24,"width":63,"height":63,"rotate":24,"vFlip":23,"hFlip":23,"body":68},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M9 6.371C9 10.789 6.761 13 4 13m0-6.629h7\"\u002F>\u003Cpath d=\"M5 9c0 2.144 2.252 3.908 6 4m1 7l4-9l4 9m-.9-2h-6.2M6.694 3l.793.582\"\u002F>\u003C\u002Fg>",1793955809496]