# clotho-ui

**Repository Path**: tyro-ch/clotho-ui

## Basic Information

- **Project Name**: clotho-ui
- **Description**: Clotho 是一个面向真实生活/职业决策场景的全栈开源项目，目标不是给你“一个答案”，而是给你一套可解释、可复盘、可迭代的决策系统。 你可以把它理解为： 决策前：用 AI 做多阶段推演，输出概率化结果与关键变量。 决策后：记录真实结果并做偏差复盘，沉淀改进策略。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://clotho.imutoj.cn
- **GVP Project**: No

## Statistics

- **Stars**: 15
- **Forks**: 6
- **Created**: 2026-03-02
- **Last Updated**: 2026-03-15

## Categories & Tags

**Categories**: ai

**Tags**: None

## README

# Clotho · Decision Simulation & Review Engine

<p align="center">
  <img src="./docs/images/clotho-logo1.png" alt="Clotho Logo" width="220" />
</p>

<p align="center">
  面向真实决策场景的 AI 系统：<b>先推演，再执行，再复盘，持续升级你的判断模型。</b>
</p>

<p align="center">
  <img src="https://img.shields.io/badge/Frontend-Vue%203-42b883" alt="Vue 3" />
  <img src="https://img.shields.io/badge/Backend-Spring%20Boot%203.3-6DB33F" alt="Spring Boot" />
  <img src="https://img.shields.io/badge/Database-MySQL%208-4479A1" alt="MySQL" />
  <img src="https://img.shields.io/badge/ORM-MyBatis-BF1E2E" alt="MyBatis" />
  <img src="https://img.shields.io/badge/Auth-JWT%20%2B%20Refresh-000000" alt="JWT" />
  <img src="https://img.shields.io/badge/License-MIT-blue" alt="MIT" />
</p>

<p align="center">
  <a href="https://clotho.imutoj.cn"><img src="https://img.shields.io/badge/🚀%20在线试用-https%3A%2F%2Fclotho.imutoj.cn-ff6b35?style=for-the-badge" alt="在线试用地址" /></a>
</p>

<p align="center">
  <b>在线体验：</b><a href="https://clotho.imutoj.cn">clotho</a>
</p>

<p align="center">
  <b>后端仓库：</b><a href="https://gitee.com/tyro-ch/clotho">https://gitee.com/tyro-ch/clotho</a>
</p>

<p align="center">
  <a href="#快速开始">快速开始</a> ·
  <a href="#系统预览">系统预览</a> ·
  <a href="#部署建议">部署建议</a> ·
  <a href="#路线图">路线图</a>
</p>

---

## 目录

- [项目定位](#项目定位)
- [为什么这个项目值得开源](#为什么这个项目值得开源)
- [核心能力](#核心能力)
- [系统预览](#系统预览)
- [典型业务流](#典型业务流)
- [技术架构](#技术架构)
- [项目结构](#项目结构)
- [快速开始](#快速开始)
- [环境变量](#环境变量)
- [部署建议](#部署建议)
- [常见问题](#常见问题)
- [路线图](#路线图)
- [贡献指南](#贡献指南)
- [许可证](#许可证)
- [联系作者](#联系作者)

---

## 项目定位

Clotho 不是一个“只会给答案”的问答壳子，而是一套完整的**决策生命周期系统**：

1. 决策前：通过多阶段 AI 推演暴露关键变量与风险。
2. 决策中：以实时流式方式呈现推演过程，支持中途离开后回看。
3. 决策后：录入真实结果，执行偏差复盘，形成可追踪改进闭环。
4. 运营侧：通过后台审计、访问地图、用户/IP 管控、导出能力完成运维闭环。

这个项目适合：

- 职业选择、学习路径、健康管理、关系决策等高频场景。
- 做 AI 产品落地 Demo / 毕设 / 开源作品集。
- 需要“可解释 + 可复盘 + 可运营”的业务系统。

---

## 为什么这个项目值得开源

- 不是单页玩具，包含完整前后端、鉴权、审计、后台治理链路。
- 不是一次性输出，提供“推演 -> 执行 -> 复盘”的长期价值。
- 不是黑盒结果，强调过程可见、步骤可追踪、数据可导出。
- 工程上可直接二开：模块拆分清晰，接入不同模型成本低。

---

## 核心能力

- 多阶段决策推演：分阶段流式输出，逐步构建结论。
- 复盘引擎：支持真实结果输入，自动比较“预期 vs 实际”。
- 报告沉淀：推演报告、复盘报告都可长期追溯。
- 命运卡牌：将关键结论生成视觉卡片，便于传播分享。
- 运营后台：用户、决策、审计日志、IP 地图、风控管理。
- 安全体系：JWT + Refresh Token，支持会话续期。
- 可部署性：Nginx + Spring Boot + MySQL 即可快速上线。

---

## 系统预览

> 为避免图片过长，以下统一为双列网格展示。

### 1) 入口与主页

<table>
  <tr>
    <td align="center"><img src="./docs/images/indexpage.png" alt="首页" width="100%" /></td>
    <td align="center"><img src="./docs/images/registerpage.png" alt="注册页" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><sub>用户首页</sub></td>
    <td align="center"><sub>注册 / 登录入口</sub></td>
  </tr>
</table>

### 2) 决策创建与任务面板

<table>
  <tr>
    <td align="center"><img src="./docs/images/newdecisionpage1.png" alt="新建决策 1" width="100%" /></td>
    <td align="center"><img src="./docs/images/newdecisionpage2.png" alt="新建决策 2" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><sub>决策信息填写</sub></td>
    <td align="center"><sub>参数确认与提交</sub></td>
  </tr>
  <tr>
    <td align="center"><img src="./docs/images/indextasklist.png" alt="任务列表" width="100%" /></td>
    <td align="center"><img src="./docs/images/decision1.png" alt="推演过程" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><sub>任务状态总览</sub></td>
    <td align="center"><sub>推演实时阶段展示</sub></td>
  </tr>
</table>

### 3) 推演结果与复盘流程

<table>
  <tr>
    <td align="center"><img src="./docs/images/result1.png" alt="推演结果 1" width="100%" /></td>
    <td align="center"><img src="./docs/images/result2.png" alt="推演结果 2" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><sub>推演结果（上）</sub></td>
    <td align="center"><sub>推演结果（下）</sub></td>
  </tr>
  <tr>
    <td align="center"><img src="./docs/images/fupan1.png" alt="复盘过程" width="100%" /></td>
    <td align="center"><img src="./docs/images/fupanresult.png" alt="复盘结果" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><sub>复盘阶段过程</sub></td>
    <td align="center"><sub>复盘最终报告</sub></td>
  </tr>
</table>

### 4) 结果卡牌

<p align="center">
  <img src="./docs/images/resultcard.png" alt="命运卡牌" width="40%" />
</p>

---

## 典型业务流

### 用户侧

1. 创建决策问题，输入选项、上下文与时间跨度。
2. 进入推演过程，实时查看阶段性分析。
3. 获取推演报告并执行现实决策。
4. 在未来回填真实结果，触发复盘流程。
5. 输出偏差诊断与下一轮优化建议。

### 管理侧

1. 审核用户与决策数据。
2. 查看访问审计、IP 地图、风险来源。
3. 管控高风险 IP（停用/恢复）。
4. 导出运营记录用于汇报与留档。

---

## 技术架构

### 前端

- Vue 3 + Vite
- Pinia 状态管理
- Vue Router
- ECharts 可视化
- Axios（鉴权拦截 + 续期）

### 后端

- Spring Boot 3.3.x
- Spring Security + JWT + Refresh Token
- MyBatis + Flyway
- MySQL 8

### AI / 工作流

- Dify 工作流（推演 / 复盘）
- 流式事件处理（SSE）
- 图像生成链路（决策卡牌）

---

## 项目结构

```text
fateDelta/
├─ frontend/
│  ├─ src/components/
│  ├─ src/views/
│  ├─ src/router/
│  ├─ src/stores/
│  └─ src/utils/
└─ backend/
   ├─ README.md
   ├─ docs/images/
   ├─ src/main/java/com/clotho/
   ├─ src/main/resources/mapper/
   └─ src/main/resources/db/migration/
```

---

## 快速开始

### 1) 环境要求

- JDK 17+
- Maven 3.9+
- Node.js 18+
- pnpm 8+
- MySQL 8+

### 2) 克隆项目

```bash
git clone <your-repo-url> fateDelta
cd fateDelta
```

### 3) 启动后端

```bash
mvn -f backend/pom.xml spring-boot:run
```

默认地址：`http://localhost:6666/api`

### 4) 启动前端

```bash
pnpm -C frontend install
pnpm -C frontend dev
```

默认地址：`http://localhost:5173`

---

## 环境变量

建议在部署环境通过环境变量注入，不要把密钥写入仓库。

核心变量示例：

- 数据库：`DB_URL` `DB_USERNAME` `DB_PASSWORD`
- 鉴权：`JWT_SECRET` `JWT_ACCESS_MINUTES` `JWT_REFRESH_DAYS`
- Dify：`DIFY_BASE_URL` `DIFY_API_KEY`
- 工作流：`DIFY_WORKFLOW_DECISION` `DIFY_WORKFLOW_REVIEW`
- 第三方：`ALIPAY_*` `SMTP_*` `RESEND_*` `ARK_*`

---

## 部署建议

### 推荐拓扑

- `Nginx`：托管 `frontend/dist`，反代 `/api/`
- `Spring Boot`：监听 `6666`
- `MySQL`：独立实例
- `Systemd`：守护 Java 进程
- `Certbot`：自动续期 HTTPS

### 常用构建命令

```bash
# 前端构建
pnpm -C frontend build

# 后端构建
mvn -f backend/pom.xml package
```

---

## 常见问题

### 1) 图片不显示

- 确认 README 与图片路径相对关系。
- 当前 README 使用：`./docs/images/...`。
- 若重命名图片，请同步修改文档路径。

### 2) 推演卡在进行中

- 检查 Dify 工作流是否可用。
- 检查后端日志中 SSE 是否持续接收事件。
- 检查反向代理是否对长连接设置了超时截断。

### 3) 地图不显示

- 优先使用本地 GeoJSON 静态文件，避免外链失败。
- 若线上环境无法访问 CDN，请将地图文件放入 `public` 目录并本地加载。

---

## 路线图

- 队列化任务调度（失败重试 / 幂等保障）
- 报告模板系统（更多可视化组件）
- 更细粒度权限模型（运营/审核/管理员）
- 国际化支持（中英双语）
- CI/CD 与自动回归测试

---

## 贡献指南

欢迎 Issue / PR。

建议流程：

1. Fork 项目并创建特性分支。
2. 完成功能并补充必要说明。
3. 提交 PR（附截图和验证步骤）。

提交信息建议使用 Conventional Commits：

- `feat: ...`
- `fix: ...`
- `refactor: ...`
- `chore: ...`

---

## 联系作者

- Email: `tyroch@163.com`

<p align="center">
  <img src="./docs/images/wechat.jpg" alt="作者微信" width="260" />
</p>

---

<p align="center"><b>如果这个项目对你有帮助，欢迎点一个 Star ⭐</b></p>