uniapp-vue3-oadmin手機后臺實例|vite5.x+uniapp多端仿ios管理系統

原創vue3+uniapp+uni-ui跨端仿ios桌面后臺OA管理模板Uni-Vue3-WeOS。

uniapp-vue3-os一款基于uni-app+vite5.x+pinia等技術開發的仿ios手機桌面OA管理系統。實現了自定義桌面柵格磁貼布局、多分屏滑動管理、自定義桌面小部件、輔助觸控懸浮球等功能。支持編譯到H5+小程序端+App端。

預覽效果

運行到H5/小程序端/APP端效果。

原創自研手機OA磁貼柵格卡片布局引擎。親測在h5+小程序+App端效果基本保持一致。

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

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

使用技術

編輯器：HbuilderX 4.15
技術框架：uniapp+vite5.x+vue3+pinia2
UI組件庫：uni-ui+uv-ui（uniapp vue3組件庫）
彈框組件：uv3-popup（基于uniapp+vue3自定義彈框組件）
表格組件：uv3-table（基于uniapp+vue3增強版表格）
模擬數據：mockjs（用于自定義表格模擬數據）
緩存技術：pinia-plugin-unistorage
支持編譯：h5+小程序端+app端

另外在PC端則以750px布局顯示，表現依然perfect~~

uni-vue3-oadmin項目使用到的table表格組件uv3Table。全新自研的一款跨多端(h5/小程序/App端)增強版自定義表格組件。

http://www.rzrgm.cn/xiaoyan2017/p/18199130

項目結構

使用hbuilderx4.15編輯器，采用vue3 setup語法編碼開發。內置構建工具升級到了Vite5.2.8版本。

目前該項目已經上架到我的作品集，如果有需要的話，歡迎去下載使用。

原創uni-app+vue3+pinia2跨平臺手機os管理系統

公共布局模板Layout

<script setup>
    import { ref } from 'vue'
    import { appStore } from '@/pinia/modules/app'
    
    const appState = appStore()
    
    // #ifdef MP-WEIXIN
    defineOptions({
        /**
         * 解決小程序class、id透傳問題(vue3寫法)
         * manifest.json中配置mergeVirtualHostAttributes: true, 在微信小程序平臺不生效，組件外部傳入的class沒有掛到組件根節點上
         * https://github.com/dcloudio/uni-ui/issues/753
         */
        options: { virtualHost: true }
    })
    // #endif
    const props = defineProps({
        showBackground: { type: [Boolean, String], default: true },
    })
    
    // 自定義變量(桌面圖標)
    const deskVariable = ref({
        '--icon-radius': '15px', // 圓角
        '--icon-size': '118rpx', // 圖標尺寸
        '--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>

emmm，怎么樣，是不是感覺還行~~ 哈哈，這也是經歷了無數個日夜的爆肝開發，目前該項目正式的完結了。

桌面布局模板

<!-- 桌面模板 -->
<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>

桌面卡片式柵格磁貼模板

桌面os菜單采用json配置

/**
 * label 圖標標題
 * imgico 圖標(本地或網絡圖片) 當type: 'icon'則為uni-icons圖標名，當type: 'widget'則為自定義小部件標識名
 * type 圖標類型(icon | widget) icon為uni-icons圖標、widget為自定義小部件
 * path 跳轉路由頁面
 * link 跳轉外部鏈接
 * hideLabel 是否隱藏圖標標題
 * background 自定義圖標背景色
 * size 柵格磁貼布局(16種) 1x1 1x2 1x3 1x4、2x1 2x2 2x3 2x4、3x1 3x2 3x3 3x4、4x1 4x2 4x3 4x4
 * onClick 點擊圖標回調函數
 * 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)">
                    <!-- 圖標 -->
                    <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: 20240507001,
        list: [
            {label: '今日', imgico: 'today', type: 'widget', hideLabel: true, size: '2x1'},
            {label: '天氣', imgico: 'weather', type: 'widget', hideLabel: true, size: '2x1'},
            {label: '日歷', imgico: 'fullcalendar', type: 'widget', path: 'pages/calendar/index', size: '4x2'},
            // {label: '日歷', imgico: 'date', type: 'widget', size: '2x2'},
            // {label: '備忘錄', imgico: 'note', type: 'widget', size: '2x2'},
            {label: 'audio', imgico: 'audio', type: 'widget', size: '2x1'},
            {
                label: '相冊', imgico: '/static/svg/huaban.svg', background: '#00aa7f',
                onClick: () => {
                    // ...
                }
            },
            ...
        ]
    },
    ...
    {
        pid: 20240510001,
        list: [
            {label: 'Github', imgico: '/static/svg/github.svg', background: '#607d8b', size: '3x1'},
            {label: '碼云Gitee', imgico: '/static/svg/gitee.svg', background: '#bb2124',},
            {label: '抖音', imgico: '/static/svg/douyin.svg', background: '#1c0b1a', size: '1x2'},
            {label: 'ChatGPT', imgico: '/static/svg/chatgpt.svg', hideLabel: true, background: '#11b6a7', size: '3x2'},
            ...
        ]
    },
    {
        pid: 20240511003,
        list: [
            {label: 'uni-app', imgico: '/static/uni.png', link: 'https://uniapp.dcloud.net.cn/'},
            {label: 'vitejs官方文檔', imgico: '/static/vite.png', link: 'https://vitejs.dev/'},
            {
                label: '主題壁紙', imgico: 'color-filled', type: 'icon',
                onClick: () => {
                    // ...
                }
            },
            {label: '日歷', imgico: 'calendar', type: 'widget', path: 'pages/calendar/index', background: '#fff',},
            {label: '首頁', imgico: 'home', type: 'icon', path: 'pages/index/index'},
            {label: '工作臺', imgico: 'shop-filled', type: 'icon', path: 'pages/index/dashboard'},
            {
                label: '組件',
                'children': [
                    {label: '組件', imgico: '/static/svg/component.svg', path: 'pages/component/index'},
                    {label: '表格', imgico: '/static/svg/table.svg', path: 'pages/component/table'},
                    ...
                ]
            },
            ...
            {
                label: '關于', imgico: 'info-filled', type: 'icon',
                onClick: () => {
                    // ...
                }
            },
            {
                label: '公眾號', imgico: 'weixin', type: 'icon',
                onClick: () => {
                    // ...
                }
            },
        ]
    }
])

整個項目采用毛玻璃模糊化UI視覺效果。簡單的實現了表格、表單、編輯器、用戶管理/角色管理等常用業務功能。旨在探索uniapp全新的手機后臺管理系統方案，當然也可以在此基礎上做一些其它創新，加上一些定制化功能模塊。

OK，以上就是uniapp+vue3開發手機OA管理管理系統的一些分享，希望對大家有些幫助哈！

flutter3-deepseek流式AI模板|Flutter3.27+Dio+DeepSeeek聊天ai助手

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

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

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

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

Tauri2.0-Vue3OS桌面端os平臺|tauri2+vite6+arco電腦版OS管理系統

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

http://www.rzrgm.cn/xiaoyan2017/p/18092224

posted @ 2024-05-21 18:53 xiaoyan2017 閱讀(1467) 評論(0) 收藏舉報

刷新頁面返回頂部

web前端項目案例實戰

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