基于Tauri2.9+Vite7.2+Vue3+Pinia3+ArcoDesign+Echarts桌面版OS管理后台模板

2025-11-19 390

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 基于最新跨平台框架tauri2.9+vite7.2.2+vue3 setup+pinia3+arco-design+echarts搭建桌面端OS管理后台模板。

2025最新款原创研发vite7.2+tauri2.9+vue3.5+pinia3+echarts+arco-design桌面客户端仿macOS/wins风格os管理系统。

002360截图20251116225622766.png 360截图20251116221955720.png

vite7-tauri2-os内置macOS+windows两种桌面模板、支持可拖拽栅格菜单、自定义JSON格式配置桌面菜单/Dock菜单。

项目技术点

开发工具：VScode
跨平台框架：Tauri^2.9
前端框架：vite^7.2.2+vue^3.5.24+vue-router^4.6.3
组件库：@arco-design/web-vue^2.57.0
状态管理：pinia^3.0.4
拖拽插件：sortablejs^1.15.6
滑屏插件：swiper^12.0.3
图表组件：echarts^6.0.0
markdown编辑器：md-editor-v3^6.1.1
模拟数据：mockjs^1.1.0

360截图20251116215340667.png 360截图20251116220507417.png 360截图20251116220840960.png 360截图20251116223319390.png 005360截图20251116230654891.png 005360截图20251116231001404.png 005360截图20251116231427100.png

项目框架结构目录

vite7-tauri2os使用最新跨平台技术Tauri2.9整合Vite7.2构建工具搭建项目模板。

360截图20251116213614042.png

tauri2-vue3os桌面布局模板

476e44197574e2ccf1278732618d8c50_1289798-20251117223242638-521043888.png

支持macos和windows两种桌面风格布局。

<script setup>
  import { appState } from '@/pinia/modules/app'

  // 引入布局模板
  import MacosLayout from './template/macos.vue'
  import WindowsLayout from './template/windows.vue'

  const appstate = appState()

  const DeskLayout = {
    macos: MacosLayout,
    windows: WindowsLayout
  }
</script>

<template>
  <div class="vu__container flexbox" :style="{'--themeSkin': appstate.config.skin}">
    <component :is="DeskLayout[appstate.config.layout]" />
  </div>
</template>

d32c130ba90674bdae6c4bfef1a0f629_1289798-20251117225352259-1349196573.png

5732249a77b2ed77e29526480c4cdfc7_1289798-20251117225408063-478243333.png

<script setup>
  import { appState } from '@/pinia/modules/app'

  import Titlebar from '@/layouts/components/titlebar/index.vue'
  import Desk from '@/layouts/components/mac/desk.vue'
  import Dock from '@/layouts/components/mac/dock.vue'

  const appstate = appState()
</script>

<template>
  <div class="vu__layout flexbox flex-col">
    <div class="vu__layout-header">
      <Titlebar />
    </div>
    <div class="vu__layout-body flex1 flexbox">
      <Desk />
    </div>
    <div class="vu__layout-footer">
      <Dock v-if="appstate.config.dockEnable" />
    </div>
  </div>
</template>

005360截图20251116230654881.png 008360截图20251116234115837.png 009360截图20251116234352354.png 009360截图20251116234430161.png 010360截图20251116234733889.png 010360截图20251116234823328.png 010360截图20251116234900417.png 011360截图20251116235156415.png 012360截图20251116235534896.png 014360截图20251117000001448.png 016360截图20251117000534471.png 016360截图20251117000616095.png 018360截图20251117001056214.png 018360截图20251117001137515.png 019360截图20251117001240213.png