uni-app+vue3手机端后台OA管理模板详解

vue3-uni-weos 是一款基于 uniapp、vite5.x 和 pinia 技术栈构建的手机端后台 OA 管理模板项目。

该 uniVue3OS 项目支持编译到 H5、小程序端以及 APP端，并能在各端保持 UI 效果的一致性。项目创新性地采用了自研的方阵式栅格引擎，实现了自定义桌面图标的自适应排列布局、多分屏滑动管理、自定义桌面壁纸/小部件以及触控悬浮球等功能。在登录界面，一改传统的输入框风格，采用了全新的 上滑数字解锁 交互方式。

项目结构

项目使用 HBuilderX 4.15 编辑器进行开发，整个代码采用 Vue 3 的 setup 语法进行编写。

使用技术

项目集成了以下主流技术栈：

• 开发工具：HBuilderX 4.15
• 框架技术：Vite 5 + uni-app + Pinia 2
• UI 组件库：uni-ui + uv-ui（专为 uni-app vue3 设计的组件库）
• 弹框组件：uv3-popup（基于 uni-app + vue3 的自定义弹出层组件）
• 表格组件：uv3-table（基于 uni-app + vue3 的自定义综合表格组件）
• 模拟数据：Mock.js（用于生成表格模拟数据）
• 缓存技术：pinia-plugin-unistorage
• 多端编译：支持 H5、各平台小程序以及 App 端。

此外，项目在 PC 端（以 750px 像素宽度为基准）的展示布局也具有良好的视觉效果。

uv3-table 综合表格组件

uv3-table 是一款原创自研的、基于 uniapp 和 vue3 的自定义增强版表格组件。它支持固定表头/列、边框、斑马纹、单选/多选，允许通过自定义插槽来定义表头和表格内容，并支持左右固定列的阴影高亮显示。该组件兼容 H5、小程序端和 App端 的编译。

基础用法

<uv3-table :columns="columns" :dataSource="data.list" />

自定义条纹背景

<uv3-table
    :columns="columns"
    :dataSource="data.list"
    stripe
    stripeColor="#eee"
    padding="5px"
    height="450rpx"
/>

综合用法示例

以下示例展示了如何结合插槽实现高度自定义的表格：

<uv3-table
    :dataSource="data.list"
    :columns="columns"
    :headerBold="true"
    headerBackground="#ecf5ff"
    stripe
    border
    padding="5px"
    maxHeight="650rpx"
    @rowClick="handleRowClick"
    @select="handleSelect"
>
    <!-- 自定义表头插槽 -->
    <template #headerCell="{ key, col, index }">
        <template v-if="key == 'title'">
            <view class="flex-c">{{col.label}} <input placeholder="搜索" size="small" /></view>
        </template>
        <template v-else-if="key == 'date'">
            <uni-icons type="calendar"></uni-icons> {{col.label}}
        </template>
        <template v-else>{{col.label}}</template>
    </template>

    <!-- 自定义表格内容插槽 -->
    <template #default="{ key, value, row, col, index }">
        <template v-if="key == 'image'">
            <uv-image :src="value" lazyLoad observeLazyLoad @click="previewImage(value)" />
        </template>
        <template v-else-if="key == 'switch'">
            <switch :checked="value" style="transform:scale(0.6);" />
        </template>
        <template v-else-if="key == 'tags'">
            <uv-tags :text="value" :color="row.color" :borderColor="row.color" plain size="mini" />
        </template>
        <template v-else-if="key == 'rate'">
            <uni-rate :value="value" size="14" readonly />
        </template>
        <template v-else-if="key == 'action'">
            <uni-icons type="compose" color="#00aa7f" @click="handleEdit(row)" />
            <uni-icons type="trash" color="#ff007f" style="margin-left: 5px;" @click="handleDel(row)" />
        </template>
        <template v-else>{{value}}</template>
    </template>
</uv3-table>

组件提供了 rowClick（点击行返回该行数据）和 select（点击选框返回所选数据）等事件。

参数配置

uv3-table 组件支持丰富的参数配置以满足不同需求：

const props = defineProps({
    dataSource: { type: Array, default: () => [] }, // 表格数据
    columns: { // 列配置数组
        type: Array,
        default: () => []
    },
    width: { type: [Number, String] }, // 表格宽度
    height: { type: [Number, String] }, // 表格高度
    maxHeight: { type: [Number, String] }, // 表格最大高度
    stripe: { type: [Boolean, String] }, // 是否为斑马纹
    stripeColor: { type: String, default: '#fafafa' }, // 斑马纹背景色
    border: { type: [Boolean, String] }, // 是否带有边框
    columnWidth: { type: [Number, String], default: 200 }, // 列宽度(推荐rpx)
    padding: { type: String, default: '5rpx 10rpx' }, // 单元格内边距
    showHeader: { type: [Boolean, String], default: true }, // 是否显示表头
    headerBackground: { type: String, default: '#ebeef5' }, // 表头背景色
    headerColor: { type: String, default: '#333' }, // 表头文字颜色
    headerBold: { type: [Boolean, String], default: true }, // 表头字体加粗
    background: { type: String, default: '#fff' }, // 表格背景色
    color: { type: String, default: '#606266' }, // 表格文字颜色
    emptyText: { type: String, default: '暂无数据' } // 空数据提示文本
})

其中，columns 数组中的每个配置项可包含 label（列标题）、prop（字段名）、align（对齐方式）、width（列宽）、fixed（是否固定列）等属性。

项目配置与模板

入口文件 main.js

项目的入口文件配置如下，集成了 Pinia 状态管理：

import { createSSRApp } from 'vue'
import App from './App'
import pinia from '@/pinia'

export function createApp() {
    const app = createSSRApp(App)
    app.use(pinia)
    return { app, pinia }
}

App.vue 根组件模板

在 App.vue 中，主要处理应用生命周期并初始化全局系统信息（如状态栏高度、胶囊按钮位置等），通过 Vue 3 的 provide API 提供给子组件使用，替代了 Vue 2 中的 globalData。代码还演示了如何根据登录状态进行页面重定向。

公共布局模板

项目提供了一个名为 uv3-layout 的公共布局组件，采用 Flexbox 布局，支持顶部、内容和底部插槽，并解决了微信小程序平台 class 透传等问题。该组件允许通过 CSS 变量动态控制桌面图标的圆角、尺寸、间距等样式。

桌面主界面模板

桌面主界面由 Desk（桌面菜单）、Dock（底部导航）和 Touch（悬浮触控球）等组件构成，并在 uv3-layout 布局中组织。

UniApp 栅格卡片布局

项目全新自研了栅格磁贴布局引擎，开发者只需通过 JSON 配置 即可自动生成桌面图标。桌面菜单的配置项非常灵活：

• label: 图标标题
• imgico: 图标资源（本地或网络图片；当 type 为 ‘icon’ 时代表 uni-icons 图标名，为 ‘widget’ 时代表自定义部件标识名）
• type: 类型 (icon | widget)
• path: 跳转的路由页面
• link: 跳转的外部链接
• size: 栅格尺寸（支持 1x1 到 4x4 共 16 种组合）
• children: 用于配置二级菜单的数组

通过配置 children 参数，可以轻松实现点击图标后弹出二级菜单的功能。在模板中，使用 uni-app 的 swiper 组件来承载多页桌面，并通过条件渲染和动态组件来处理不同类型的图标和二级菜单。

总结

该项目已通过实测，在 H5、小程序端及 App 端的功能与界面效果均保持高度一致。通过开发此项目，深入探索了基于 uniapp 和 vue3 技术栈开发手机端后台 OA 管理系统的完整解决方案。该模板项目涉及知识点广泛，为有类似需求的开发者提供了一个高起点，开发者可在此基础上进行创新性定制开发。