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

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

版本信息

"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配置。

/**
 * ====== 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 点击图标回调函数
 */

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

桌面布局模板

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

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

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