首页 > 其他分享 >uniapp-vue3-oadmin手机后台实例|vite5.x+uniapp多端仿ios管理系统

uniapp-vue3-oadmin手机后台实例|vite5.x+uniapp多端仿ios管理系统

时间:2024-05-21 18:57:08浏览次数:24  
标签:uniapp oadmin svg ios label item imgico type icon

原创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端效果基本保持一致。

使用技术

  • 编辑器: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端)增强版自定义表格组件。

https://www.cnblogs.com/xiaoyan2017/p/18199130

项目结构

使用hbuilderx4.15编辑器,采用vue3 setup语法编码开发。内置构建工具升级到了Vite5.2.8版本。

目前该项目已经上架到我的作品集,如果有需要的话,欢迎去下载使用。

https://gf.bilibili.com/item/detail/1105982011

公共布局模板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管理管理系统的一些分享,希望对大家有些帮助哈!

最后附上两个最新实例项目

https://www.cnblogs.com/xiaoyan2017/p/18165578

https://www.cnblogs.com/xiaoyan2017/p/18092224

 

标签:uniapp,oadmin,svg,ios,label,item,imgico,type,icon
From: https://www.cnblogs.com/xiaoyan2017/p/18204751

相关文章

  • uniApp生成的h5页面禁止浏览器上缩放页面(支持安卓,ios)
    项目场景:uniapph5内嵌原生appios样式问题:1.双击和双指滑动,内嵌的h5页面均会被放大缩小2.修改ios底部的安全距离的背景色,默认是白色问题描述1.双击和双指滑动,内嵌的h5页面均会被放大缩小2.解决ios底部的安全距离和修改背景色,默认是白色解决方案:安卓只需要在h5.template.h......
  • VMware ESXi 6.7U3u macOS Unlocker & OEM BIOS 标准版和厂商定制版 UI fix
    VMwareESXi6.7U3umacOSUnlocker&OEMBIOS标准版和厂商定制版UIfixESXi6.7U3u标准版,Dell(戴尔)、HPE(慧与)OEM定制版请访问原文链接:https://sysin.org/blog/vmware-esxi-6-oem/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org除了需要兼容RTL网卡有......
  • VMware ESXi 6.7U3u macOS Unlocker & OEM BIOS 集成 Realtek 网卡驱动和 NVMe 驱动 (
    VMwareESXi6.7U3umacOSUnlocker&OEMBIOS集成Realtek网卡驱动和NVMe驱动(集成驱动版)UIfix此版本解决的问题:VMwareHostClient无法将现有虚拟磁盘(VMDK)附加到虚拟机请访问原文链接:https://sysin.org/blog/vmware-esxi-6-sysin/,查看最新版。原创作品,转载请保......
  • Uni-app 之IOS生成Universal Link(通用链接)
    一、文档https://uniapp.dcloud.net.cn/api/plugins/universal-links.html#%E8%83%8C%E6%99%AF%E4%BB%8B%E7%BB%8D二、配置1、登录苹果开发者中心找到对应的APPID,配置AssociatedDomains,如下: 2、创建apple-app-site-association文件(没有后缀){"applinks":{......
  • Uni-app 之IOS苹果账号登录
    一、开发文档https://uniapp.dcloud.net.cn/tutorial/app-oauth-apple.html二、示例appleLogin(){uni.login({provider:'apple',success:function(loginRes){console.log(loginRes)//登录成功uni.getUserInfo({provider:�......
  • 小白总结uniapp微信小程序跨域问题的解决(前端)
    小白总结uniapp微信小程序跨域问题的解决(前端):https://blog.csdn.net/m0_69848498/article/details/137628381?ops_request_misc=&request_id=&biz_id=102&utm_term=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%AD%98%E5%9C%A8%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98%E5%90%97&utm_medium=......
  • Vue3+axios+.Net使用分片上传
    Vue3+axios+.Net使用分片上传前端代码在ApiService.cs中增加方法//上传文件publicstaticasyncuploadFile(file){constchunkSize=1024*1024;//1MB每1mb分片consttotalChunks=Math.ceil(file.size/chunkSize);letkey='';lettag=true;leturl=......
  • 【uniapp 篇 】动态添加 表单,所添加元素展示在同一行
    动态添加表单,所添加元素展示在同一行1<uni-formslabelWidth="68px">23<uni-forms-itemv-for="(item,index)inbaseFormData.dynamicTable.timeField.array"4......
  • iOS 移除所有通过Cocoapod安装的第三库
    要移除所有通过CocoaPods安装的第三方库,你可以执行以下步骤:打开终端。转到包含你的Xcode项目的目录。转到目标目录下cd/path/to/your/project。后续指令操作都是在目标项目目录下进行。如果你的Podfile文件还存在,删除它。也可以在终端使用指令rmPodfile删除运行......
  • Android/iOS版本号机制简介
    Android和iOS有各自的版本号机制,但都根据版本号的用途,分为了2类:程序向的构建版本号:用户不可见影响APP的功能:覆盖安包(低版本覆盖高版本会提示异常或失败)影响APP商店提审:每个提审包都必须必上一次版本号高用户向的显示版本号:用户可见影响APP的版本号显示:系统设置里可......