新作速递，基于vue3+arco-design网页版os系统

最近一直原创研发vite5.x+arco.design搭建仿macOS网页版os管理系统。

版本信息

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"
}

vite-macos采用栅格化布局引擎，支持拖拽图标、二级菜单。

如上图：支持winodws和macos两种桌面模式。

项目结构

桌面菜单采用动态化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 点击图标回调函数
 */

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: () => {
          ...
        }
      },
    ]
  }
]

桌面布局模板

html
 代码解读
复制代码
<template>
  <div class="vu__layout flexbox flex-col">
    <div class="vu__layout-header">
      <Toolbar />
    </div>
    <div class="vu__layout-body flex1 flexbox">
      <Desk />
    </div>
    <div class="vu__layout-footer">
      <Dock />
    </div>
    <!-- 悬浮球(辅助触控) -->
    <Touch />
  </div>
</template>

目前该项目已经基本完结了，后续还会做一些更详细的技术知识分享。

感谢大家的阅读，如果觉得还不错的话，记得多支持一下哈！