Tauri2.0-Vue3OS desktop os platform | tauri2+vite6+arco computer version os management system

import { createApp } from 'vue'
import './'
import App from './'

// Introducing Plugin Configuration
import Plugins from './plugins'

// Introducing Routing/State Configuration
import Router from './router'
import Pinia from './pinia'

createApp(App)
.use(Router)
.use(Pinia)
.use(Plugins)
.mount("#app")

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

  // Introduction of layout templates
  import MacosLayout from './template/'
  import WindowsLayout from './template/'

  const appstate = appState()

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

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

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

  import Titlebar from '@/layouts/components/titlebar/'
  import Desk from '@/layouts/components/mac/'
  import Dock from '@/layouts/components/mac/'

  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="" />
    </div>
  </div>
</template>

const deskVariable = ref({
    '--icon-radius': '10px', // rounded corner
    '--icon-size': '60px', // Icon size (set rpx to customize mobile device)
    '--icon-gap-col': '30px', // Horizontal spacing
    '--icon-gap-row': '30px', // vertical distance
    '--icon-labelSize': '12px', // Label Text Size
    '--icon-labelColor': '#fff', // label color
    '--icon-fit': 'contain', // Icon Adaptive Mode
})

/**
 * ===== Desktop menu configuration item =====
 * label icon title
 * imgico icon (local or web image) support Arco Design built-in icon or custom iconfont icon
 * path Jump to route page
 * link Jump to external link
 * hideLabel whether to hide icon title
 * filter disable drag and drop
 * background Customize icon background color
 * color Customize icon color
 * size raster tile layout 1x1 ... 12x12
 * padding
 * onClick A callback function for clicking the icon.
 * isNewin opens the routing page in a new window.
 * children Secondary menu
*/

const deskMenu = [
  {
    uid: 'h128f210-737e-1d4e-6438-7feefac27e48',
    label: 'Home',
    imgico: '/',
    list: [
      // ...
      {label: 'Memorandum', imgico: markRaw(Note), size: '2x2'},
      {label: 'Countdown', imgico: markRaw(CountDown), size: '2x2'},
      {label: 'Tauri^2.1', imgico: '/', link: '/', background: '#fff', padding: '5px',},
      {label: 'Vite^6.0.3', imgico: '/', link: '/',},
      
    ]
  },
  {
    uid: 'y587f210-037e-1u4e-1250-4seefac27e48',
    label: 'Apps',
    imgico: '/static/mac/',
    list: [
      {label: 'Appstore', imgico: '/static/mac/'},
      {label: 'Map', imgico: '/static/mac/'},
      // ...
    ]
  },
  {
    uid: 'u658f210-807e-1e4e-1550-4deefac27e48',
    label: 'Groping for fish',
    imgico: '/dmfd/80_80_75/',
    list: [
      {label: 'Github', imgico: '/static/svg/', link: '/', background: '#607d8b', size: '2x2'},
      {label: '', imgico: '/', link: '/',},
      {label: 'Official Documentation', imgico: '/', link: '/',},
      // ...
    ]
  },
  {
    uid: 'u658f210-807e-1e4e-1550-4deefac27e48',
    label: 'AI',
    imgico: '/xfyundoc/2024-10-20/b2b49aa6-ee0d-4b77-9ce9-c20a27ee6618/1729415860861/',
    list: [
      {label: 'ChatGPT', imgico: '/static/svg/', link: '/chatgpt/', hideLabel: true, background: '#0ea17e', size: '3x2'},
      // ...
    ]
  },
  {
    uid: 'd141f210-207e-1e8e-9950-9deefac27e48',
    label: 'Workbench',
    imgico: markRaw(IconComputer),
    list: [
      {label: 'Pure-blooded Hongmeng', imgico: 'images/', link: '/', hideLabel: true, background: '#f3f6f9', size: '2x1'},
      {label: 'Tauri^2.1', imgico: '/static/svg/', link: '/', background: '#dffbff', padding: '10px', size: '2x2'},
      {label: 'Vite^6.0.3', imgico: '/', link: '/'},
      // ...
      {
        label: 'Component',
        children: [
          // ...
        ]
      },
      {
        label: 'Management Center',
        children: [
          {label: 'Home', imgico: '/static/svg/', path: '/setting'},
          // ...
        ]
      },
      {
        label: 'Settings',
        children: [
          // ...
        ]
      },
      {label: 'Element-Plus', imgico: '/images/', link: '/', padding: '10px', size: '3x1'},
      {
        label: 'Favorites',
        children: [
          // ...
        ]
      },
      {
        label: 'Public', imgico: '/static/', background: '#fff', size: '2x1',
        onClick: () => {
          // ...
        }
      },
    ]
  }
]

/**
 * ===== Dock menu configuration item =====
 * label icon tooltip tip
 * imgico icon (local or web image) support Arco Design built-in icon or custom iconfont icon
 * path Jump to route page
 * link Jump to external link
 * filter Disable drag and drop
 * color Custom icon color
 * onClick Click icon callback function
 * isNewin opens the routing page in a new window.
 * children Secondary menu
*/