基于uniapp+vue3跨端手机admin管理系统uniapp-vue3os

原创于 2025-08-25 22:23:23 发布 · 置顶 · 1.3k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #uniapp手机后台 #uni-vue3-os #uni-vue3-admin #uniapp-admin #uniapp-vue3oa #uni-vue3admin

vue3.x开发实例同时被 3 个专栏收录

34 篇文章

订阅专栏

uni-app实例

21 篇文章

订阅专栏

uniapp+vue3

17 篇文章

订阅专栏

2025最新研发uniapp+vite5手机端仿ios界面oa管理后台系统UniOSAdmin。

uni-vue3-osadmin：原创基于uni-app+vue3+pinia2跨端os手机桌面后台管理系统。实现了图表、表格、表单、编辑器、用户管理、角色管理等业务场景。支持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端

在这里插入图片描述

uniapp-vue3-osadmin后台系统已经发布到我的原创作品集。
基于uniapp+vue3+pinia2跨端仿ios桌面OA管理系统

在这里插入图片描述

项目结构框架

使用HbuilderX4.75构建项目模板。

在这里插入图片描述
uni-vue3-oa实现栅格化磁贴布局、多屏滑动、自定义桌面小组件。探索一种全新的os式手机oa管理系统新解决方案。

在这里插入图片描述
支持运行到PC页面以750px宽度显示布局。

在这里插入图片描述

公用布局模板

在这里插入图片描述

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

uni-vue3-table自定义综合表格

全新升级版跨三端【h5+小程序+app端】多功能增强版table组件。

在这里插入图片描述

基于uniapp+vue3全端自定义table表格组件uni-vue3-table

在这里插入图片描述

桌面布局

在这里插入图片描述

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

在这里插入图片描述

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