# wanfangchain-model

**Repository Path**: sunoyoung-dev/wanfangchain-model

## Basic Information

- **Project Name**: wanfangchain-model
- **Description**: 基于 Spring Boot 的前后端分离系统（适配移动端），集成 Magic-API、Sa-Token、Warm-Flow 等能力，并配套前端页面资源（`ui/`）。前端基于 **Amis**，支持表单/业务配置的可视化开发；后端提供基于 `trace-id` 的MDC链路追踪与日志排查能力。
- **Primary Language**: Java
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 11
- **Forks**: 2
- **Created**: 2026-04-09
- **Last Updated**: 2026-04-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 智链万方平台

基于 Spring Boot 的前后端分离系统（适配移动端），集成 Magic-API、Sa-Token、Warm-Flow 等能力，并配套前端页面资源（`ui/`）。前端基于 **Amis**，支持表单/业务配置的可视化开发；后端提供基于 `trace-id` 的MDC链路追踪与日志排查能力。

## 项目概览

- **名称**：model（智链万方平台）
- **说明**：基于 Magic-API、Sa-Token、Amis、Warm-Flow 的后端系统（含流程与表单相关能力）
- **构建工具**：Maven
- **模块**：`common`、`biz`、`ui`

## 技术栈
### 后端技术栈

- **Java**：17
- **Spring Boot**：3.x（根 `pom.xml` 中配置为 `3.4.4`）
- **Web & MVC**：`spring-boot-starter-web`
- **认证/权限**：Sa-Token（`sa-token-spring-boot3-starter`）
- **API 引擎**：Magic-API（`magic-api-spring-boot-starter`）
- **连接池**：Druid（`druid-spring-boot-starter`）
- **工作流**：Warm-Flow（`warm-flow-core` + MyBatis-Plus 适配 + UI 插件）
- **ORM**：MyBatis-Plus（`mybatis-plus-spring-boot3-starter` 等）
- **工具**：Hutool、Jasypt、Lombok 等

## **在线体验**
- **账号**：admin/admin123
- **在线地址**：http://101.35.247.226/#/
> **地址解析，第一次访问会有点慢，后续访问很快。**

### 前端技术栈（Amis + 移动端适配）

- Amis（`amis/embed` + `amisRequire('amis')`）前端渲染与页面配置驱动
- axios（API 请求封装）
- History/hash 路由（`ui/index.html` 中使用 `History.createHashHistory()`，适配 SPA 无需服务端重写）
- CryptoJS（前端做 AES 等加密能力，配合后端约定）
- SSE 通知客户端（`ui/public/js/sse-notice.js`）
- 移动端友好要点：
    - 对移动端的主要优化体现在“自适应布局 + 可滚动内容区”，避免固定像素导致的内容溢出
- 交互与体验增强：
    - 自定义样式包含吸顶面包屑/表头（`.cxd-AppBcn` 使用 `position: sticky`）
    - 日志查看器样式（`.log-viewer`）优化换行与滚动

## 快速开始

1. 准备环境
   - 安装 JDK 17
   - 安装 Maven
2. 配置数据库与运行参数
   - 编辑：`biz/src/main/resources/application.yml`
   - 确保数据源、加密密钥、以及 `spring.profiles.active` 等配置符合你的环境
3. 初始化数据库
   - 导入：`biz/src/main/resources/db/init.sql`
4. 启动服务
   - 在仓库根目录执行：ModelApplication
   - jar运行，在项目根目录执行：mvn clean package -DskipTests 
   - 服务默认：
     - **端口**：`8080`
     - **上下文路径**：`/api`
     - **Magic-API 前端入口**：`/api/magic/web`（取配置项 `magic-api.web`）

## 前端入口（Amis）

- 前端代码入口文件：`ui/index.html`
- 默认路由：`#/home`（hash 路由）
- 本地系统地址（IDE 内预览用，仅供参考）：`http://localhost:端口/model/ui/index.html#/home`
- 本地运行后对外访问地址取决于你如何部署静态资源：

## 前端资源

- 前端/页面资源位于 `ui/` 目录下（例如 `ui/index.html`、各类 `ui/page/*.json` 等）。
前端基于 Amis 实现的可视化能力主要体现在：
- 表单/页面配置使用 Amis 的 `crud`、`dialog`、`form` 等组件（例如 `ui/page/system/form.json` 中对表单 schema 的编辑与保存）。
- 通过配置化的页面 JSON 驱动业务页面渲染，使新增/调整页面更加快速。

## 系统截图

系统截图统一放在 `docs/screens/` 目录，并按终端类型划分：

- `docs/screens/pc/`：PC 端截图
- `docs/screens/mobile/`：移动端截图

### 电脑端截图

<table>
<tr><td>登录<br><img src="docs/screens/pc/登录.png" alt="登录" /></td><td>主页<br><img src="docs/screens/pc/主页.png" alt="主页" /></td></tr>
<tr><td>用户中心<br><img src="docs/screens/pc/用户中心.png" alt="用户中心" /></td><td>消息中心<br><img src="docs/screens/pc/消息中心.png" alt="消息中心" /></td></tr>
<tr><td>用户管理<br><img src="docs/screens/pc/用户管理.png" alt="用户管理" /></td><td>角色管理<br><img src="docs/screens/pc/角色管理.png" alt="角色管理" /></td></tr>
<tr><td>菜单管理<br><img src="docs/screens/pc/菜单管理.png" alt="菜单管理" /></td><td>岗位管理<br><img src="docs/screens/pc/岗位管理.png" alt="岗位管理" /></td></tr>
<tr><td>接口管理<br><img src="docs/screens/pc/接口管理.png" alt="接口管理" /></td><td>通知管理<br><img src="docs/screens/pc/通知管理.png" alt="通知管理" /></td></tr>
<tr><td>表单设计<br><img src="docs/screens/pc/表单设计.png" alt="表单设计" /></td><td>表单设计-编辑<br><img src="docs/screens/pc/表单设计-编辑.png" alt="表单设计-编辑" /></td></tr>
<tr><td>流程设计<br><img src="docs/screens/pc/流程设计.png" alt="流程设计" /></td><td>我的流程<br><img src="docs/screens/pc/我的流程.png" alt="我的流程" /></td></tr>
<tr><td>我的任务<br><img src="docs/screens/pc/我的任务.png" alt="我的任务" /></td><td>流程图<br><img src="docs/screens/pc/流程图.png" alt="流程图" /></td></tr>
<tr><td>审批历史-列表<br><img src="docs/screens/pc/审批历史-列表.png" alt="审批历史-列表" /></td><td>审批历史-时间轴<br><img src="docs/screens/pc/审批历史-时间轴.png" alt="审批历史-时间轴" /></td></tr>
<tr><td>流程运维<br><img src="docs/screens/pc/流程运维.png" alt="流程运维" /></td><td>在线日志-尾部模式<br><img src="docs/screens/pc/在线日志-尾部模式.png" alt="在线日志-尾部模式" /></td></tr>
<tr><td>在线日志-搜索模式<br><img src="docs/screens/pc/在线日志-搜索模式.png" alt="在线日志-搜索模式" /></td><td>在线用户<br><img src="docs/screens/pc/在线用户.png" alt="在线用户" /></td></tr>
<tr><td>操作日志<br><img src="docs/screens/pc/操作日志.png" alt="操作日志" /></td><td>登录日志<br><img src="docs/screens/pc/登录日志.png" alt="登录日志" /></td></tr>
</table>

### 移动端截图

<table>
<tr><td>登录<br><img src="docs/screens/mobile/登录.png" alt="移动端-登录" /></td><td>主页<br><img src="docs/screens/mobile/主页.png" alt="移动端-主页" /></td></tr>
</table>

> 说明：以上为仓库内现有截图的真实路径，README 在 GitHub/Gitee 页面可直接预览。

## trace-id 日志排查系统

系统内置 `trace-id` 链路追踪，便于定位一次请求在后端的完整处理过程：
- `RequestTraceInterceptor`：为每个请求生成/获取 `trace-id`，写入 `MDC`（日志追踪）并回填到响应头 `trace-id`。
- `ResponseAdvice`：在返回 `Result` 时，统一回传 `trace-id` 并补充执行耗时（`executeTime`）。
- `OperateLogInterceptor`：对数据库写操作（INSERT/UPDATE/DELETE）记录到 `sys_operate_log`，并关联 `trace_id`，同时保存请求 URL、方法、参数、请求头等上下文。
- 登录日志也会关联 `trace_id`，便于在同一条链路下串联“登录 -> 后续操作 -> 异常”。
- 前端也会在请求头携带 `trace-id`（`ui/public/js/config.js`），使一次操作在浏览器与后端日志之间可直接串联。

## 目录结构（简要）

- `common/`：通用基础能力（通用配置、拦截器、基础实体/返回结构等）
- `biz/`：业务与接口实现（控制器、服务、Mapper、Magic-API/流程集成等）
- `ui/`：前端页面与静态资源

## 开源协议

本项目采用 **MIT License**。