unios-admin手机版后台|uniapp+vue3全端admin管理系统基于uniapp+vue3+pinia2+

基于uniapp+vue3+pinia2+qiun-data-charts搭建一种全新os式手机后台admin系统。

未标题-3-1.png

uni-vue3-osadmin提供了图表、表格、表单、编辑器、用户管理、角色管理等常用场景示例。

未标题-7.png

运用技术

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

未标题-10.png

未标题-12.png

项目框架结构

使用hbuilderx4.75搭建项目模板，采用vue3 setup语法开发。

360截图20250823064942397.png

桌面布局

500e7af2d91d09b236a45f4769a06f0f_1289798-20250823223434431-352952071.png

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

52d00ca9faeb55429ef4f1ebb1986c4c_1289798-20250823224021281-1242799848.png

cf0db3390bfd04c4700b6067733b2284_1289798-20250823224427179-1328285590.png

手机os桌面支持如下参数配置。

/**
 * label 图标标题
 * imgico 图标(本地或网络图片) 当type: 'icon'则为uni-icons图标名，当type: 'widget'则为自定义小部件标识名
 * type 图标类型(icon | widget) icon为uni-icons图标、widget为自定义小部件
 * path 跳转路由页面
 * link 跳转外部链接
 * hideLabel 是否隐藏图标标题
 * background 自定义图标背景色
 * color 自定义图标颜色
 * padding 内边距
 * size 栅格磁贴布局(16种) 1x1 1x2 1x3 1x4、2x1 2x2 2x3 2x4、3x1 3x2 3x3 3x4、4x1 4x2 4x3 4x4
 * onClick 点击图标回调函数
 * children 二级菜单
 * */

b91bebbcbaffddbf632158620d5e1ff4_1289798-20250823225306794-1906124278.png

支持配置children参数二级菜单。

5811177bbd1896976ff5a7f1ac44f739_1289798-20250823225514760-86072224.png

21e8dafacfbd4385058883459faa390d_1289798-20250823225612251-1402652843.png

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

图标点击事件处理。

const handleClickDeskMenu = (item) => {
    if(item.link) {
        // 链接
        openURL(item.link)
    }else if(item.path) {
        // 页面路由地址
        uni.navigateTo({
            url: item.path.substr(0, 1) == '/' ? item.path : '/' + item.path
        })
    }else if(Array.isArray(item.children)) {
        // 二级菜单
        deskPopupMenu.value = item
        deskPopupVisible.value = true
    }
    // 绑定点击事件
    typeof item.onClick === 'function' && item.onClick()
}