# webDify

**Repository Path**: zouwei1815/web-dify

## Basic Information

- **Project Name**: webDify
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-11
- **Last Updated**: 2026-05-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# perm-web — Dify 工作流权限管理前端

基于 **React 18 + TypeScript + Ant Design 4 + Redux Toolkit + Vite** 构建的权限管理控制台，配套 [perm-service](../perm-service) 后端使用。

---

## 功能页面

| 路由 | 页面 | 说明 |
|---|---|---|
| `/login` | 登录页 | Dify 管理员账号（owner / admin）登录 |
| `/roles` | 角色管理 | 角色 CRUD、搜索、分页 |
| `/roles/:id/apps` | 角色授权 | Transfer 穿梭框配置角色可见工作流 |
| `/accounts` | 用户授权 | 角色绑定 + 直授（allow/deny）管理 |
| `/matrix` | 授权矩阵 | 用户 × 工作流二维权限视图 |
| `/policy` | 租户策略 | whitelist/blacklist + bypassAdmin 开关 |
| `/audit` | 审计日志 | 多条件筛选 + JSON 详情查看 |

---

## 快速启动（开发环境）

### 前提

- Node.js ≥ 18
- perm-service 后端在本机 `8090` 端口运行

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

浏览器访问 [http://localhost:3000](http://localhost:3000)

> 开发时 `/api/`、`/auth/`、`/internal/` 路径由 Vite 自动代理到 `http://localhost:8090`，无需手动处理跨域。

---

## 环境变量

| 变量名 | 说明 | 默认值 |
|---|---|---|
| `VITE_API_BASE` | 生产环境 API 基础路径 | `/`（由 Nginx 反代统一处理） |

创建 `.env.production` 文件（可选，通常不需要修改）：

```env
VITE_API_BASE=/
```

若前端部署在子路径（如 `/perm/`），同步修改 `vite.config.ts` 中的 `base` 字段：

```ts
export default defineConfig({
  base: '/perm/',
  // ...
})
```

---

## 构建

```bash
npm run build
```

产出目录：`dist/`

构建成功标志：终端无 error、无 warning，`dist/index.html` 存在。

---

## 生产部署（Nginx）

### 1. 构建前端

```bash
npm run build
```

### 2. 使用预置配置部署

项目根目录 `deploy/` 下提供了开箱即用的 Nginx 配置：

```
deploy/
├── nginx.conf          # Nginx 配置（静态 serve + 反代 + SPA fallback）
└── docker-compose.yml  # Docker 部署示例
```

#### 直接部署（非 Docker）

```bash
# 将 dist/ 复制到服务器静态目录
cp -r dist/ /usr/share/nginx/html/

# 将 nginx.conf 放入 Nginx 配置目录
cp deploy/nginx.conf /etc/nginx/conf.d/perm.conf

# 修改 nginx.conf 中 server_name 为实际域名
# 修改 proxy_pass 中 perm-service 为实际后端地址（如 127.0.0.1:8090）

nginx -t && nginx -s reload
```

#### Docker Compose 部署

```bash
# 确保已构建
npm run build

# 启动
docker-compose -f deploy/docker-compose.yml up -d
```

> 需要 perm-service 与 perm-web 处于同一 Docker 网络（`perm-net`），详见 `deploy/docker-compose.yml` 注释。

### 3. Nginx 配置说明

`deploy/nginx.conf` 核心配置：

```nginx
# 后端 API 反代（覆盖 /api/ /auth/ /internal/ 三个前缀）
location /api/ {
    proxy_pass http://perm-service:8090;
}

# SPA History Fallback（所有路由均回退到 index.html）
location / {
    try_files $uri $uri/ /index.html;
}
```

完整配置见 [deploy/nginx.conf](deploy/nginx.conf)。

---

## 目录结构

```
src/
├── api/          # axios 请求模块（每个资源一个文件）
├── components/   # 通用组件（Layout、AuthRoute、AccountSelector 等）
├── pages/        # 页面组件（按路由组织）
├── store/        # Redux Store（authSlice、globalSlice）
├── types/        # TypeScript 类型定义
├── utils/        # 工具函数（auth token 管理等）
├── global.scss   # 全局基础样式
└── main.tsx      # 应用入口
```

---

## 技术栈

| 库 | 版本 | 用途 |
|---|---|---|
| React | 18.2 | UI 框架 |
| TypeScript | 4.7 | 类型安全 |
| Ant Design | 4.22 | 组件库 |
| Redux Toolkit | 1.9 | 全局状态（auth） |
| React Router | 6 | 客户端路由 |
| Axios | 0.27 | HTTP 请求 |
| dayjs | — | 时间格式化 |
| Sass | 1.54 | 样式预处理 |
| Vite | 5 | 构建工具 |