[{"data":1,"prerenderedAt":69},["ShallowReactive",2],{"project:dreamos:zh-tw":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-TW",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>",1793955809489]