uniapp-vue3os-admin：基于uniapp+vue3+pinia2+uni-ui全新搭建的一款手机版os式桌面OA后台管理系统。实现了图表、表格、表单、编辑器、用户管理、角色管理等常用功能。支持运行到H5+小程序+App端。

uni-vue3os实现栅格化磁贴布局、多屏滑动、自定义手机桌面小部件。

项目知识点

• 开发工具：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端

项目结构框架

整个项目采用vue3 setup语法编码开发。

uni-vue3-table自定义表格组件

uni-vue3-table：基于uniapp+vue3自定义加强版table组件。支持固定表头/列、边框、斑马纹、单选/多选，自定义表头/表体内容插槽、左右固定列阴影高亮。支持编译运行web+小程序端+app端。

桌面结构布局模板

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

支持运行到web端，在pc页面以750px宽度显示布局样式。

原创研发不易，感谢大家的阅读与支持，后续会分享更多优质项目案例。

最新研发uni-app+vue3+uvui跨三端仿微信App聊天模板

Flutter3.32实战桌面端OS系统|flutter3仿macOS桌面

flutter3.27跨平台仿微信客户端聊天Exe程序|朋友圈|短视频

原创uniapp+vite5+vue3+uv-ui跨三端短视频+直播+聊天app应用

uni-app+deepseek-v3跨三端ai流式输出对话模板

flutter3+deepseek手机端ai流式输出聊天模板

实战跨平台Electron35+DeepSeek-V3搭建客户端AI模板

deepseek-v3+vue3.5网页版webai流式对话模板

Flutter3.27跨平台仿抖音商城|flutter3.x实战短视频+直播+聊天程序

原创tauri2.0+vue3.5+element-plus桌面版后台管理系统

Electron32-Vite5-OS跨平台os模板|electron32+vue3通用os系统

Electron31_Vite5_Wechat跨平台聊天实例|electron31仿微信实战