uniapp-vue3-os手機(jī)oa系統(tǒng)|uni-app+vue3跨三端os后臺管理模板

最新研發(fā)uniapp+vue3+pinia2+uv-ui仿ios手機(jī)界面oa后臺系統(tǒng)解決方案。

uni-vue3-oa基于uniapp+vue3+pinia2+qiun-data-charts從0-1純手?jǐn)]仿ios界面OA式手機(jī)后臺。實(shí)現(xiàn)柵格化磁貼布局、多屏滑動(dòng)、自定義桌面小組件、桌面圖標(biāo)支持鏈接/頁面地址方式打開。支持運(yùn)行到h5+小程序+app端。

運(yùn)行效果

編譯到h5+小程序+app端效果。

自定義手機(jī)os式柵格磁貼布局模板。

技術(shù)棧

編輯器：HbuilderX 4.75
技術(shù)框架：uniapp+vue3+vite5+pinia2
UI組件庫：uni-ui+uv-ui（uniapp vue3組件庫）
彈框組件：uv3-popup（基于uniapp+vue3自定義彈窗組件）
表格組件：uv3-table（基于uniapp+vue3跨端綜合表格組件）
圖表組件：qiun-data-charts
模擬數(shù)據(jù)：mockjs（用于自定義表格模擬數(shù)據(jù)）
緩存技術(shù)：pinia-plugin-unistorage
編譯支持：h5+小程序+app端

支持更換桌面壁紙、桌面二級縮略彈窗菜單。

項(xiàng)目整體采用背景虛化模糊視覺UI。實(shí)現(xiàn)了圖表、表格、表單、編輯器、用戶管理、角色管理等常用業(yè)務(wù)場景示例。探索一種全新的os式手機(jī)oa管理系統(tǒng)新解決方案。

項(xiàng)目框架目錄

使用hbuilderx4.75編輯器搭建項(xiàng)目模板，采用vue3 setup語法糖編碼開發(fā)。

uni-vue3-os手機(jī)oa管理系統(tǒng)已經(jīng)更新到我的原創(chuàng)作品集，多謝支持！

uni-app+vue3+pinia2跨端仿ios桌面OA管理系統(tǒng)

支持運(yùn)行到web端在pc界面以750px寬度顯示布局。

通用布局模板

頁面整體布局分為自定義頂部+桌面內(nèi)容+底部三部分。

<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 },
    })
    
    // 自定義變量(桌面圖標(biāo))
    const deskVariable = ref({
        '--icon-radius': '10px', // 圓角
        '--icon-size': '120rpx', // 圖標(biāo)尺寸(設(shè)置rpx自定義手機(jī)設(shè)備)
        '--icon-gap-col': '25px', // 水平間距
        '--icon-gap-row': '45px', // 垂直間距
        '--icon-labelSize': '12px', // 標(biāo)簽文字大小
        '--icon-labelColor': '#fff', // 標(biāo)簽顏色
        '--icon-fit': 'contain', // 圖標(biāo)自適應(yīng)模式
    })
</script>

<template>
    <view class="uv3__container flexbox flex-col flex1" :style="deskVariable">
        <!-- 頂部插槽 -->
        <slot name="header" />
        
        <!-- 內(nèi)容區(qū) -->
        <view class="uv3__scrollview flex1">
            <slot />
        </view>
        
        <!-- 底部插槽 -->
        <slot name="footer" />
        
        <!-- 背景圖(修復(fù)小程序不支持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管理系統(tǒng)用到的table表格組件uv3table。全新升級版跨三端【h5+小程序+app端】多功能增強(qiáng)版table組件。

想要了解更多關(guān)于自定義表格詳情，可以去看看下面這篇分享文章。

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

看到這里感覺還不錯(cuò)吧，爆肝好幾個(gè)日夜純手?jǐn)]os式手機(jī)oa后臺管理解決方案。

桌面布局結(jié)構(gòu)

<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>
            <!-- 底部導(dǎo)航 -->
            <Dock />
        </template>
        <!-- 懸浮球(輔助觸控) -->
        <Touch />
    </uv3-layout>
</template>

uniapp+vue3手機(jī)桌面os柵格化布局

桌面菜單配置參數(shù)

/**
 * ====== 桌面os菜單配置項(xiàng) ======
 * label 圖標(biāo)標(biāo)題
 * imgico 圖標(biāo)(本地或網(wǎng)絡(luò)圖片) 當(dāng)type: 'icon'則為uni-icons圖標(biāo)名，當(dāng)type: 'widget'則為自定義小部件標(biāo)識名
 * type 圖標(biāo)類型(icon | widget) icon為uni-icons圖標(biāo)、widget為自定義小部件
 * path 跳轉(zhuǎn)路由頁面
 * link 跳轉(zhuǎn)外部鏈接
 * hideLabel 是否隱藏圖標(biāo)標(biāo)題
 * background 自定義圖標(biāo)背景色
 * color 自定義圖標(biāo)顏色
 * padding 內(nèi)邊距
 * size 柵格磁貼布局(16種) 1x1 1x2 1x3 1x4、2x1 2x2 2x3 2x4、3x1 3x2 3x3 3x4、4x1 4x2 4x3 4x4
 * onClick 點(diǎn)擊圖標(biāo)回調(diào)函數(shù)
 * children 二級菜單
 * */

配置children，則顯示二級縮略菜單。

以彈窗形式展開，背景虛化模糊效果。

<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)">
                    <!-- 圖標(biāo) -->
                    <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>
                                <!-- 自定義圖標(biāo) -->
                                ...
                            </template>
                        </template>
                    </view>
                    <!-- 標(biāo)簽 -->
                    <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>

點(diǎn)擊桌面圖標(biāo)，支持以如下幾種方式綁定事件。

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
    }
    // 綁定點(diǎn)擊事件
    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: '倒計(jì)時(shí)', 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: '個(gè)人中心',
        'children': [
          ...
        ]
      },
      {
        label: 'AI應(yīng)用',
        '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: '關(guān)于', imgico: 'info', type: 'icon',
        onClick: () => {
          // ...
        }
      },
      {
        label: '公眾號', imgico: 'weixin', type: 'icon',
        onClick: () => {
          // ...
        }
      },
    ]
  }
])

以上就是uniapp+vue3實(shí)戰(zhàn)仿ios手機(jī)oa管理系統(tǒng)的一些知識分享，感謝大家的閱讀與支持~

附上幾個(gè)最新實(shí)例項(xiàng)目

最新版uni-app+vue3+uv-ui跨三端仿微信app聊天應(yīng)用【h5+小程序+app端】

Flutter3-MacOS桌面OS系統(tǒng)|flutter3.32+window_manager客戶端OS模板

最新研發(fā)flutter3.27+bitsdojo_window+getx客戶端仿微信聊天Exe應(yīng)用

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

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

Electron35-DeepSeek桌面端AI系統(tǒng)|vue3.5+electron+arco客戶端ai模板

vue3-webseek網(wǎng)頁版AI問答|Vite6+DeepSeek+Arco流式ai聊天打字效果

flutter3-dymall仿抖音直播商城|Flutter3.27短視頻+直播+聊天App實(shí)例

uniapp+vue3酒店預(yù)訂|vite5+uniapp預(yù)約訂房系統(tǒng)模板(h5+小程序+App端)

Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天應(yīng)用

Electron32-ViteOS桌面版os系統(tǒng)|vue3+electron+arco客戶端OS管理模板

Electron31-Vue3Admin管理系統(tǒng)|vite5+electron+pinia桌面端后臺Exe

posted @ 2025-08-23 23:22 xiaoyan2017 閱讀(214) 評論(0) 收藏舉報(bào)

刷新頁面返回頂部

web前端項(xiàng)目案例實(shí)戰(zhàn)

交流分享前端(移動(dòng)端|微信端|小程序)最新技術(shù)、知識、項(xiàng)目案例...