最近一直原创研发`vite5.x+arco.design`搭建仿macOS网页版os管理系统。 ![001360截图20240724073321647.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c45322003dd440a288475623beb8a2dc~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeGlhb3lhbjIwMTU=:q75.awebp?rk3s=f64ab15b&x-expires=1757542272&x-signature=ATPzXnnEuQXfM%2Fg8RxUUDrSqBF0%3D) ### 版本信息 ```ts "dependencies": { "@arco-design/web-vue": "^2.55.3", "chinese-lunar-calendar": "^1.0.1", "echarts": "^5.5.1", "mockjs": "^1.1.0", "pinia": "^2.1.7", "pinia-plugin-persistedstate": "^3.2.1", "sass": "^1.77.8", "sortablejs": "^1.15.2", "swiper": "^11.1.5", "ve-plus": "^0.3.10", "vue": "^3.4.31", "vue-router": "^4.4.0", "wangeditor": "^4.7.15" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.5", "vite": "^5.3.3" } ``` ![p1.gif](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/48ecf8acb54e4cb785affa54bc5849f7~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeGlhb3lhbjIwMTU=:q75.awebp?rk3s=f64ab15b&x-expires=1757542272&x-signature=4RwUEi8KjUE2kEsOvLSW2PtDL64%3D) vite-macos采用栅格化布局引擎，支持拖拽图标、二级菜单。 ![未标题-1.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e8aae31b2fa640e78111e827bd0354d6~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeGlhb3lhbjIwMTU=:q75.awebp?rk3s=f64ab15b&x-expires=1757542272&x-signature=dGOEzwSq1oDIsCivDB%2FJE4WgeK8%3D) 如上图：支持**winodws**和**macos**两种桌面模式。 ![p6.gif](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/cc9a4dbdf85a4387a6b19dcb59a4d8ce~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeGlhb3lhbjIwMTU=:q75.awebp?rk3s=f64ab15b&x-expires=1757542272&x-signature=rjTDbq2g3Hg3kS%2FI8g4o3x47JrM%3D) ### 项目结构 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b07989fbc70049dda8e2ec90e2dcf025~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeGlhb3lhbjIwMTU=:q75.awebp?rk3s=f64ab15b&x-expires=1757542272&x-signature=q9MD4suQhowoTTEjKU8rjYwLb%2BY%3D) 桌面菜单采用动态化JSON配置。 ```ts /** * ====== desk菜单配置项 ====== * label 图标标题 * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标 * path 跳转路由页面 * link 跳转外部链接 * hideLabel 是否隐藏图标标题 * background 自定义图标背景色 * color 自定义图标颜色 * size 栅格磁贴布局(16种) 1x1 1x2 1x3 1x4、2x1 2x2 2x3 2x4、3x1 3x2 3x3 3x4、4x1 4x2 4x3 4x4 * onClick 点击图标回调函数 */ ``` ![p4.gif](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5bf2abdddc7c415f9850aab36e770a58~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeGlhb3lhbjIwMTU=:q75.awebp?rk3s=f64ab15b&x-expires=1757542272&x-signature=pylOq%2B9iogW64%2B9rHAE0eWMQjJg%3D) ```ts const deskMenu = [ { pid: 20240507001, list: [ {imgico: markRaw(Today), size: '2x2'}, {imgico: markRaw(Weather), size: '2x2'}, {label: '便签', imgico: markRaw(NoteBook), size: '4x2'}, {label: '日历', imgico: markRaw(Calendar2x2), size: '2x2'}, {label: '备忘录', imgico: markRaw(Note), size: '2x2'}, {label: '日历', imgico: markRaw(Calendar4x2), path: 'pages/calendar/index', size: '4x2'}, {label: '每日箴言', imgico: markRaw(DayTalk), size: '3x2'}, {label: '倒计时', imgico: markRaw(CountDown), size: '3x2'}, ] }, { pid: 20240509002, list: [ {label: 'Appstore', imgico: '/static/mac/appstore.png'}, {label: '地图', imgico: '/static/mac/maps.png'}, ... ] }, { pid: 20240510001, list: [ {label: 'Github', imgico: '/static/svg/github.svg', link: 'https://github.com/', background: '#607d8b',}, {label: '码云Gitee', imgico: '/static/svg/gitee.svg', link: 'https://gitee.com/', background: '#bb2124',}, ... ] }, { uid: 'd141f210-207e-1e8e-9950-9deefac27e48', list: [ {label: 'Vite^5.3.3', imgico: 'https://vitejs.dev/logo.svg', link: 'https://vitejs.dev/'}, { label: '编程开发', children: [ ... ] }, {label: '首页', imgico: markRaw(IconHome), path: '/home', color: '#fff'}, {label: '工作台', imgico: markRaw(IconComputer), path: '/home/dashboard', color: '#fff'}, { label: '组件', children: [ ... ] }, {label: 'ChatGPT', imgico: '/static/svg/chatgpt.svg', link: 'https://openai.com/chatgpt/', background: '#15A17F',}, {label: 'Bilibili', imgico: '/static/svg/bilibili.svg', link: 'https://www.bilibili.com/', background: '#ff6899',}, { label: '个人中心', children: [ ... ] }, { label: '设置', children: [ ... ] }, { label: '公众号', imgico: markRaw(IconWechat), color: '#07c160', onClick: () => { ... } }, ] } ] ``` ![003360截图20240724074753048.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/37cd092d6a18450ba079104862fcdc6e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeGlhb3lhbjIwMTU=:q75.awebp?rk3s=f64ab15b&x-expires=1757542272&x-signature=csviRELcRelrnxjG5RJff2S67cQ%3D) ![004360截图20240724074811574.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c374f8b4e4ee437e90fb9155cfc90786~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeGlhb3lhbjIwMTU=:q75.awebp?rk3s=f64ab15b&x-expires=1757542272&x-signature=asu6UeMd3cYF1cWpU93ntsbBo%2B4%3D) ![005360截图20240724075130654.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1790bf1fc4fb4369827c7313441ffbce~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeGlhb3lhbjIwMTU=:q75.awebp?rk3s=f64ab15b&x-expires=1757542272&x-signature=OTMLASO9BuOsxmjDPlBPDGQpALU%3D) ![007360截图20240724075542653.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/cdf6a4b2c4b546329697520de26b9f01~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeGlhb3lhbjIwMTU=:q75.awebp?rk3s=f64ab15b&x-expires=1757542272&x-signature=uRYBkZsQdIhs9UVowoAH%2F7Fx0W4%3D) ![009360截图20240724075808693.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5eaea64b31a5436bb80d23a682e5a212~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeGlhb3lhbjIwMTU=:q75.awebp?rk3s=f64ab15b&x-expires=1757542272&x-signature=maYF5FfJQrGSYyFbVc%2F%2B1%2BzII7Q%3D) ![009360截图20240724080133438.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2d237242e8b04a4690ec23b1a9faaaaf~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeGlhb3lhbjIwMTU=:q75.awebp?rk3s=f64ab15b&x-expires=1757542272&x-signature=CW7wco%2BksEjNMELlG8GAP3pN0%2F8%3D) ![012360截图20240724080357324.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/82c86b07f8c64347803f8968acf85f13~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgeGlhb3lhbjIwMTU=:q75.awebp?rk3s=f64ab15b&x-expires=1757542272&x-signature=joDXAaZxO68QG9BfEAlr%2BOTB0OQ%3D) ### 桌面布局模板 ```html ``` 目前该项目已经基本完结了，后续还会做一些更详细的技术知识分享。感谢大家的阅读，如果觉得还不错的话，记得多支持一下哈！