从零搭建桌面客户端审批系统：Vue3 + Vite + Element Plus 企业级 H5 脚手架实践

 

本文记录如何从零搭建一套运行于桌面客户端（内部 IM、Electron、CEF、Cordova Desktop 等）中的审批系统 H5 脚手架。

与传统浏览器后台不同，本项目运行在客户端内嵌 WebView 中，需要支持客户端 SDK、JSBridge 通信、待办消息跳转、关闭窗口、返回上一页等能力。

项目定位：

approval-pc-h5

主要用于：

PC客户端待办审批
PC客户端消息跳转
审批详情查看
审批处理
流程跟踪

---

一、背景与需求

企业办公平台逐渐形成统一门户模式：

移动端
↓
企业微信
飞书
钉钉
内部IM

PC端
↓
企业客户端
统一工作台
桌面IM

当用户收到待办消息时：

点击消息
↓
打开审批页面
↓
查看审批详情
↓
同意/驳回

整个过程并非浏览器访问，而是：

客户端
↓
WebView
↓
H5页面

因此项目本质属于：

桌面客户端H5

而非：

传统后台管理系统

---

二、项目目标

构建一套标准审批客户端 H5 脚手架。

支持：

审批能力

• 我的待办
• 我的已办
• 我的申请
• 审批详情
• 审批处理

客户端能力

• 返回上一页
• 关闭当前窗口
• 获取登录用户
• 文件下载
• 文件预览

平台能力

• 多客户端适配
• JSBridge通信
• URL参数鉴权
• Token自动登录

最终形成：

可运行
可扩展
可维护

的审批客户端基础框架。

---

三、技术选型

层面	技术	理由
框架	Vue 3.5 + Composition API	当前主流
构建	Vite 8	启动快
类型	TypeScript 6	类型安全
UI	Element Plus	PC端组件成熟
路由	Vue Router	页面管理
状态管理	Pinia	官方推荐
请求层	alova + Axios	声明式请求
CSS方案	UnoCSS	原子化CSS
平台通信	JSBridge	客户端交互
运行环境	WebView	客户端容器

---

四、为什么不用浏览器后台方案？

很多人会认为：

PC端
=
后台管理系统

实际上：

approval-admin

和：

approval-pc-h5

完全不同。

对比项	approval-admin	approval-pc-h5
运行环境	浏览器	客户端WebView
打开方式	URL访问	消息跳转
返回操作	浏览器Back	SDK GoBack
关闭页面	浏览器关闭	SDK Close
用户身份	登录页	客户端自动获取
平台适配	不需要	必须

因此：

approval-pc-h5

本质上更接近：

移动端H5

而不是后台管理系统。

---

五、项目初始化

5.1 创建项目

mkdir approval-pc-h5

cd approval-pc-h5

pnpm create vite . --template vue-ts

安装依赖：

pnpm install

---

5.2 安装核心依赖

pnpm add vue-router
pnpm add pinia

pnpm add axios
pnpm add alova

pnpm add element-plus

pnpm add @element-plus/icons-vue

---

5.3 安装 UnoCSS

pnpm add -D unocss
pnpm add -D @unocss/preset-uno
pnpm add -D @unocss/preset-icons

---

六、项目结构设计

approval-pc-h5
│
├── src
│
├── api
│   ├── auth
│   └── approval
│
├── router
│
├── store
│
├── views
│   ├── todo
│   ├── done
│   ├── mine
│   └── detail
│
├── components
│
├── utils
│   ├── bridge.ts
│   ├── client.ts
│   └── platform.ts
│
└── types

---

七、路由设计

客户端环境推荐：

createWebHashHistory()

原因：

客户端兼容性最好
无需服务端配置
消息跳转稳定

配置：

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

---

八、客户端适配层设计（核心）

这是整个项目最重要的部分。

---

为什么需要适配层？

不同客户端：

内部IM
Electron
CEF
Cordova

提供的SDK完全不同。

例如：

客户端A

window.Client.close()

---

客户端B

window.SDK.exit()

---

客户端C

window.cordovajs.close()

---

业务代码不能直接调用这些对象。

---

九、统一客户端接口

定义：

export interface ClientAdapter {
  init(): Promise<void>

  getToken(): Promise<string>

  goBack(): void

  close(): void

  download(url: string): void
}

---

十、默认适配器

export const defaultAdapter = {
  async init() {},

  async getToken() {
    return new URLSearchParams(location.search)
      .get('token') || ''
  },

  goBack() {
    history.back()
  },

  close() {
    window.close()
  },

  download(url) {
    window.open(url)
  },
}

---

十一、统一封装

业务代码：

import {
  closeWindow,
  goBack,
} from '@/utils/client'

调用：

closeWindow()

---

而不是：

window.cordovajs.close()

---

这样未来更换客户端：

零业务改动

---

十二、入口初始化

main.ts：

async function bootstrap() {
  await initClient()

  const app = createApp(App)

  app.use(router)
  app.use(pinia)

  app.mount('#app')
}

bootstrap()

---

十三、待办消息跳转

客户端收到待办：

审批单号
业务类型
Token

打开：

#/detail?id=10001

例如：

https://oa.company.com/#/detail?id=10001

---

详情页读取：

const route = useRoute()

const id = route.query.id

即可获取审批单。

---

十四、请求层设计

采用：

Axios
+
Alova

组合。

---

Axios

负责：

请求发送
超时控制
Token注入

---

请求拦截：

http.interceptors.request.use(
  (config) => {
    config.headers.Authorization =
      `Bearer ${token}`

    return config
  },
)

---

Alova

负责：

缓存
Loading
错误状态

调用：

const {
  data,
  loading,
} = useRequest(
  getApprovalDetail(id),
)

---

十五、审批详情页

审批系统核心页面。

结构：

审批信息
↓
审批流程
↓
附件信息
↓
审批操作

---

顶部工具栏

<el-page-header
  @back="goBack"
/>

调用：

goBack()

---

流程展示

<el-timeline>

展示：

发起
直属领导
部门负责人
结束

---

底部操作

同意
驳回
转办

---

十六、待办列表

列表结构：

待办
已办
我的申请

推荐：

<el-tabs>

实现。

---

列表组件：

<el-table>

展示：

标题
申请人
时间
状态

---

十七、构建验证

执行：

pnpm build

输出：

✓ built in 2.8s

说明：

构建成功
可部署

---

十八、最终项目结构

approval-pc-h5
├── src
│
├── api
│   ├── auth.ts
│   └── approval.ts
│
├── router
│   └── index.ts
│
├── store
│   └── user.ts
│
├── utils
│   ├── bridge.ts
│   ├── client.ts
│   └── platform.ts
│
├── views
│   ├── todo
│   ├── done
│   ├── mine
│   └── detail
│
├── components
│
├── App.vue
├── main.ts
│
├── vite.config.ts
├── tsconfig.json
│
└── package.json

---

十九、踩坑记录

1、不要使用 History 路由

客户端环境：

Hash 路由最稳

推荐：

createWebHashHistory()

---

2、不要直接调用客户端SDK

错误：

window.cordovajs.close()

正确：

closeWindow()

统一适配层管理。

---

3、URL Token 是最好的兜底方案

即使未来：

Electron
Cordova
CEF

全部支持SDK鉴权。

仍建议保留：

?token=

机制。

---

4、客户端能力必须抽象

不要在业务页面中出现：

客户端名称
SDK名称
Bridge名称

统一封装到：

utils/client.ts

---

二十、总结

最终企业审批体系建议采用：

approval-h5
（移动审批）
Vant4
移动端WebView

approval-pc-h5
（桌面客户端审批）
Element Plus
PC端WebView

approval-admin
（后台管理系统）
Element Plus
浏览器

三套项目职责清晰：

审批处理
审批入口
审批管理

共享：

接口规范
数据模型
审批流程
权限体系

既能满足多端接入需求，也能保证后续项目演进和维护成本可控。