基于 UniApp 和 Vue3 的仿 iOS 桌面后台管理系统

本文介绍一个基于 uni-app、Vue3 和 Pinia2 搭建的全端仿 iOS 手机桌面 OS 式后台管理系统。该系统采用毛玻璃虚化背景效果、栅格化桌面布局和 Dock 菜单，支持运行在 H5、小程序和 App 端。

使用技术

• 编辑器：HbuilderX 4.75
• 技术框架：uniapp + vue3 + vite5 + pinia2
• UI 组件库：uni-ui + uv-ui（uniapp vue3 组件库）
• 弹框组件：uv3-popup（基于 uniapp+vue3 自定义弹窗组件）
• 表格组件：uv3-table（基于 uniapp+vue3 跨端综合表格组件）
• 图表组件：qiun-data-charts
• 模拟数据：mockjs（用于自定义表格模拟数据）
• 缓存技术：pinia-plugin-unistorage
• 编译支持：h5 + 小程序 + app 端

项目桌面布局

该系统实现了类似 iOS 桌面的栅格化布局。以下是一个示例代码片段，展示了主布局结构：

<script setup>
    import { ref } from 'vue'

    import Desk from './components/desk.vue'
    import Dock from './components/dock.vue'
    import Touch from './components/touch.vue'
</script>

<template>
    <uv3-layout>
        <!-- 桌面菜单 -->
        <Desk />

        <template #footer>
            <!-- 底部导航 -->
            <Dock />
        </template>
        <!-- 悬浮球(辅助触控) -->
        <Touch />
    </uv3-layout>
</template>

桌面组件支持自定义变量，如图标尺寸、间距等，以适应不同设备：

<script setup>
    import { ref } from 'vue'
    import { appStore } from '@/pinia/modules/app'

    const appState = appStore()

    // #ifdef MP-WEIXIN
    defineOptions({
        options: { virtualHost: true }
    })
    // #endif

    const props = defineProps({
        // 是否显示背景图
        showBackground: { type: [Boolean, String], default: true },
    })

    // 自定义变量(桌面图标)
    const deskVariable = ref({
        '--icon-radius': '10px', // 圆角
        '--icon-size': '120rpx', // 图标尺寸(设置rpx自定义手机设备)
        '--icon-gap-col': '25px', // 水平间距
        '--icon-gap-row': '45px', // 垂直间距
        '--icon-labelSize': '12px', // 标签文字大小
        '--icon-labelColor': '#fff', // 标签颜色
        '--icon-fit': 'contain', // 图标自适应模式
    })
</script>

<template>
    <view class="uv3__container flexbox flex-col flex1" :style="deskVariable">
        <!-- 顶部插槽 -->
        <slot name="header" />

        <!-- 内容区 -->
        <view class="uv3__scrollview flex1">
            <slot />
        </view>

        <!-- 底部插槽 -->
        <slot name="footer" />

        <!-- 背景图(修复小程序不支持background背景图) -->
        <image v-if="showBackground" class="fixwxbg" :src="appState.config.skin || '/static/skin/theme.png'" mode="scaleToFill" />
    </view>
</template>

uniapp+vue3 手机栅格桌面

系统支持栅格化桌面菜单，可以配置二级缩略菜单，并以弹窗形式展开，具有背景虚化模糊效果。以下是一个简化代码示例，展示了桌面菜单的基本结构：

<template>
    <swiper
        class="uv3__deskmenu"
        :indicator-dots="true"
        indicator-color="rgba(255,255,255,.5)"
        indicator-active-color="#fff"
    >
        <swiper-item v-for="(mitem, mindex) in deskMenu" :key="mindex">
            <view class="uv3__gridwrap">
                <view v-for="(item, index) in mitem.list" :key="index" class="uv3__gridwrap-item" @click="handleClickDeskMenu(item)">
                    <!-- 图标 -->
                    <view class="ico" :style="{'background': item.background}">
                        <!-- 二级菜单 -->
                        <template v-if="Array.isArray(item.children)">
                            <view class="uv3__gridwrap-thumb">
                                ...
                            </view>
                        </template>
                        <template v-else>
                            <template v-if="item.type == 'widget'">
                                <!-- 自定义部件 -->
                                <component :is="item.imgico" />
                            </template>
                            <template v-else>
                                <!-- 自定义图标 -->
                                ...
                            </template>
                        </template>
                    </view>
                    <!-- 标签 -->
                    <view v-if="!item.hideLabel" class="label clamp2">{{item.label}}</view>
                </view>
            </view>
        </swiper-item>
    </swiper>

    <!-- 桌面二级菜单 -->
    <Popup v-model="deskPopupVisible">
        <view class="uv3__deskpopup">
            ...
        </view>
    </Popup>

    ...
</template>

uniapp+vue3 多功能表格组件

系统集成了一个基于 uni-app 和 Vue3 的自定义表格组件，支持固定表头/列、边框、斑马纹、单选/多选，以及自定义表头和表体内容插槽。该组件兼容 Web、小程序和 App 端，并提供了左右固定列阴影高亮等功能，适用于后台管理系统的数据展示需求。