tauri2-vue3-macos首创跨平台桌面OS系统模板

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

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

/**
 * ===== Desk桌面菜单配置项 =====
 * label 图标标题
 * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标
 * path 跳转路由页面
 * link 跳转外部链接
 * hideLabel 是否隐藏图标标题
 * filter 是否禁用拖拽
 * background 自定义图标背景色
 * color 自定义图标颜色
 * size 栅格磁贴布局 1x1 ... 12x12
 * padding 内边距
 * onClick 点击图标回调函数
 * isNewin 新窗口打开路由页面
 * children 二级菜单
 */