uniapp-vue3-os手机oa系统|uni-app+vue3跨三端os后台管理模板

最新研发uniapp+vue3+pinia2+uv-ui仿ios手机界面oa后台系统解决方案。

uni-vue3-oa基于uniapp+vue3+pinia2+qiun-data-charts从0-1纯手撸仿ios界面OA式手机后台。实现栅格化磁贴布局、多屏滑动、自定义桌面小组件、桌面图标支持链接/页面地址方式打开。支持运行到h5+小程序+app端。

运行效果

编译到h5+小程序+app端效果。

未标题-3

自定义手机os式栅格磁贴布局模板。

未标题-2

技术栈

  • 编辑器：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端

未标题-6

p1

支持更换桌面壁纸、桌面二级缩略弹窗菜单。

p3

项目整体采用背景虚化模糊视觉UI。实现了图表、表格、表单、编辑器、用户管理、角色管理等常用业务场景示例。探索一种全新的os式手机oa管理系统新解决方案。

p5

项目框架目录

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

360截图20250823064942397

uni-vue3-os手机oa管理系统已经更新到我的原创作品集，多谢支持！

uni-app+vue3+pinia2跨端仿ios桌面OA管理系统

p6

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

001360截图20250823105240868

001360截图20250823105411428

001360截图20250823105656207

p1

通用布局模板

image

页面整体布局分为自定义顶部+桌面内容+底部三部分。

<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自定义table表格

uniapp-vue3-oa管理系统用到的table表格组件uv3table。全新升级版跨三端【h5+小程序+app端】多功能增强版table组件。

p6-2

想要了解更多关于自定义表格详情，可以去看看下面这篇分享文章。

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

未标题-7

001360截图20250822223844744

002360截图20250822224301193

004360截图20250822225000113

005360截图20250822225138818

006360截图20250822225536481

007360截图20250822231631377

007360截图20250822231748226

007360截图20250822231827402

007360截图20250822231903951

007360截图20250822232023474

008360截图20250822232131386

008360截图20250822232335588

008360截图20250822232610443

008360截图20250822232527780

009360截图20250822232839699

010360截图20250822232936371

010360截图20250822233002531

011360截图20250822233233379

014360截图20250823003200599

014360截图20250823003250542

015360截图20250823003332126

016360截图20250823003526504

017360截图20250823003554977

016360截图20250822234353341

看到这里感觉还不错吧，爆肝好几个日夜纯手撸os式手机oa后台管理解决方案。

桌面布局结构

image

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

uniapp+vue3手机桌面os栅格化布局

image

image

image

image

桌面菜单配置参数

/**
 * ====== 桌面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 二级菜单
 * */

image

配置children，则显示二级缩略菜单。

image

以弹窗形式展开，背景虚化模糊效果。

image

<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()
}

桌面菜单json配置片段

const deskMenu = ref([
  {
    pid: 202508182307,
    list: [
      {label: '今日', imgico: 'today', type: 'widget', hideLabel: true, size: '2x1'},
      {label: '备忘录', imgico: 'note', type: 'widget', size: '2x2'},
      {label: '倒计时', imgico: 'countdown', type: 'widget', hideLabel: true, size: '3x2'},

      ...
    ]
  },
  {
    pid: 202508182310,
    list: [
      {label: 'Appstore', imgico: '/static/os/AppStore.png'},
      
      ...
    ]
  },
  {
    pid: 202508182315,
    list: [
      {label: 'Github', imgico: '/static/svg/github.svg', link: 'https://github.com/', background: '#8e0fdd', size: '2x2'},
      {label: 'Vue.js', imgico: '/static/vue.png', link: 'https://vuejs.org/',},
      {label: 'uniapp', imgico: '/static/uni.png', link: 'https://uniapp.dcloud.net.cn/',},
      
      ...
    ]
  },
  {
    pid: 202508182319,
    list: [
      {label: 'DeepSeek', imgico: 'https://cdn.deepseek.com/logo.png', link: 'https://chat.deepseek.com/', hideLabel: true, background: '#fff', padding: '10px', size: '3x2'},
      
      ...
    ]
  },
  {
    pid: 202508182321,
    list: [
      {label: 'uni-app', imgico: '/static/uni.png', link: 'https://uniapp.dcloud.net.cn/'},
      {label: '首页', imgico: 'home', type: 'icon', path: 'pages/index/index'},
      {label: '工作台', imgico: '/static/svg/dashboard.svg', path: 'pages/index/dashboard', background: '#fff',},
      {
        label: '组件',
        'children': [
          ...
        ]
      },
      {
        label: '个人中心',
        'children': [
          ...
        ]
      },
      {
        label: 'AI应用',
        'children': [
          {label: 'DeepSeek', imgico: 'https://www.faxianai.com/wp-content/uploads/2025/02/20250205134524-1febd.png', link: 'https://chat.deepseek.com/', background: '#fff', padding: '5px',},
          {label: '腾讯元宝', imgico: 'https://www.faxianai.com/wp-content/uploads/2025/02/20250224143149-7fe1f.png', link: 'https://yuanbao.tencent.com/', padding: '5px'},
          {label: '豆包', imgico: 'https://lf-flow-web-cdn.doubao.com/obj/flow-doubao/doubao/web/static/image/OnboardingAvatar.0f4f29a4.webp', link: 'https://www.doubao.com/',},
          
          ...
        ]
      },
      {
        label: '关于', imgico: 'info', type: 'icon',
        onClick: () => {
          // ...
        }
      },
      {
        label: '公众号', imgico: 'weixin', type: 'icon',
        onClick: () => {
          // ...
        }
      },
    ]
  }
])

以上就是uniapp+vue3实战仿ios手机oa管理系统的一些知识分享，感谢大家的阅读与支持~

附上几个最新实例项目

最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】

Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板

最新研发flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用

最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】

Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板

Electron35-DeepSeek桌面端AI系统|vue3.5+electron+arco客户端ai模板

vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果

flutter3-dymall仿抖音直播商城|Flutter3.27短视频+直播+聊天App实例

uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)

Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天应用

Electron32-ViteOS桌面版os系统|vue3+electron+arco客户端OS管理模板

Electron31-Vue3Admin管理系统|vite5+electron+pinia桌面端后台Exe

duitang

 

posted @ 2025-08-23 23:22  xiaoyan2017  阅读(220)  评论(0)    收藏  举报
友情链接： UP主小店B站