# DotNetWebView2Demo

**Repository Path**: uncle_show/dotnetwebview2demo

## Basic Information

- **Project Name**: DotNetWebView2Demo
- **Description**: DotNetWebView2Demo
- **Primary Language**: C#
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-04
- **Last Updated**: 2026-05-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 权限管理与可视化流程管理系统

基于 WinForms + WebView2 + Vue3 的桌面应用模板，目标是简单、易上手、功能完整，可用于中小型业务系统快速起步。

## 功能概览

- 权限管理
  - 用户管理（新增用户、分配角色）
  - 角色管理（新增角色、绑定权限点）
  - 权限点管理（新增权限点）
  - 登录认证（JWT）
  - 按钮级权限控制（permission 显隐）
  - 路由守卫（未登录拦截、无权限跳转）
  - Access Token + Refresh Token 自动续期
- 流程管理
  - 流程定义（新增流程）
  - 节点编排（开始、审批、条件、结束 + 审批人策略）
  - 连线关系配置（来源节点、目标节点、条件表达式）
  - 流程模拟执行（输出执行轨迹）
  - 条件表达式 AST 安全解析（支持括号、逻辑与或非、比较运算）
- 桌面集成
  - WebView2 承载 Vue3 前端
  - 前后端 HTTP API 通信
  - 本地数据持久化（AppData JSON 文件）

## 项目结构

```text
.
├── DotNetWebView2Vue3.sln
├── src/
│   ├── BackendApi/
│   │   ├── Program.cs
│   │   ├── AuthService.cs
│   │   ├── WorkflowEngine.cs
│   │   ├── StateStore.cs
│   │   └── Models.cs
│   └── DesktopHost/
│       ├── DesktopHost.csproj
│       ├── Program.cs
│       ├── MainForm.cs
│       ├── MainForm.Designer.cs
│       └── StorageService.cs
└── frontend/
    ├── package.json
    ├── vite.config.ts
    ├── index.html
    └── src/
        ├── main.js
        ├── App.vue
        └── style.css
```

## 运行方式

### 方式一：开发模式（推荐）

先启动后端 API，再启动前端开发服务器，最后运行 WinForms。

```bash
# 启动后端 API
dotnet run --project src/BackendApi/BackendApi.csproj
```

```bash
# 启动前端开发服务
cd frontend
npm run dev
```

然后在 Visual Studio 中打开 `DotNetWebView2Vue3.sln`，启动 `DesktopHost` 项目。

默认测试账号：
- `admin / admin123`
- `ops / ops123`

Token 说明：
- 登录后返回 `token` 与 `refreshToken`
- 当前端遇到 `401` 时会自动调用 `/api/auth/refresh` 刷新并重试一次
- 退出登录会调用 `/api/auth/logout` 撤销 refresh token

说明：
- WinForms 会优先加载 `frontend/dist`，若不存在则加载 `http://localhost:5173`
- 前端在 WebView2 中会直连 `http://localhost:5057/api`
- 浏览器开发模式下，前端通过 Vite 代理访问 `/api`

### 方式二：打包前端后运行

先构建前端静态资源，WinForms 会自动加载 `frontend/dist`。

```bash
# 构建前端
cd frontend
npm run build
```

然后运行 `DesktopHost`。

## 测试

运行后端最小集成测试（API + 表达式解析）：

```bash
# 若环境未安装 dotnet，可先本地安装到工作区
curl -fsSL https://dot.net/v1/dotnet-install.sh -o dotnet-install.sh
chmod +x dotnet-install.sh
./dotnet-install.sh --channel 8.0 --install-dir ./.dotnet

# 执行测试
export PATH="$(pwd)/.dotnet:$PATH"
DOTNET_SYSTEM_GLOBALIZATION_INVARIANT=1 dotnet test tests/BackendApi.Tests/BackendApi.Tests.csproj
```

## 配置说明

- Vite 开发服务器已配置：
  - `server.allowedHosts = ['.monkeycode-ai.online']`
  - `server.proxy['/api'] -> http://localhost:5057`

- 后端 API 端口：
  - `http://localhost:5057`
  - 健康检查：`GET /api/health`

如需接入真实后端，可在 `frontend/vite.config.ts` 中调整代理地址。