# Decision

**Repository Path**: karentwan/decision

## Basic Information

- **Project Name**: Decision
- **Description**: 决策天平
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-20
- **Last Updated**: 2026-07-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 决策帮手 · Decision Helper ⚖️

> 遇到选择，不要急着拍脑袋。把优缺点、关键维度都摊开来，让分数和可视化帮你做决定。

一个纯前端的轻量决策辅助工具。所有数据只存在你自己的浏览器里，没有任何后端、账号、上传。

## ✨ 功能

### 两种决策模式

1. **加权优缺点** —— 适合「要不要做这件事」类的二选一
   - 每条优/缺点打 1-10 的权重
   - 实时计算：优点总分 vs 缺点总分 → 净偏 + 信心度
   - 可视化：⚖️ 权衡天平（左右倾斜动画）、📊 双柱状对比、🎯 信心度仪表

2. **决策矩阵** —— 适合「在多个选项中选一个」
   - 自定义评估维度（每个维度有权重）
   - 给每个选项在每个维度打 1-10 分
   - 总分 = Σ(维度权重 × 选项得分)
   - 可视化：🌡️ 热力表格、📡 多选项雷达图、🏅 排名条形图、🎯 信心度仪表

### 其它

- 📋 **8 个内置模板**（跳槽、考研、买房/租房、Offer 选择、城市定居、关系取舍等），从模板创建决策克服"空白页焦虑"
- 🔄 **三状态管理**：进行中 / 已决定 / 已归档
- 💾 **自动持久化**：所有修改实时写入 localStorage，刷新不丢
- 🎨 **柔和暖色调**，专为长时间思考设计

## 🚀 快速开始

```bash
# 安装依赖（首次）
npm install

# 启动开发服务器
npm run dev
# → 打开 http://localhost:5173

# 生产构建
npm run build

# 跑单元测试
npm test
```

环境要求：Node.js ≥ 18。

## 🏗️ 技术栈

| 维度 | 选择 |
|---|---|
| 构建 | Vite 5 + React 18 + TypeScript |
| 样式 | Tailwind CSS 3（自定义暖色主题） |
| 路由 | react-router-dom v6 |
| 状态 | React Context + useReducer |
| 存储 | localStorage（抽象层，可替换为 IndexedDB/后端） |
| 可视化 | 纯 SVG + CSS（无图表库依赖） |
| 测试 | Vitest（评分算法 + reducer 全覆盖） |

## 📁 项目结构

```
src/
├── types.ts                      # 核心数据模型（联合类型）
├── lib/
│   ├── decisionEngine.ts         # ⭐ 评分算法（纯函数）
│   ├── storage.ts                # localStorage 抽象层
│   ├── templates.ts              # 8 个决策模板
│   └── id.ts                     # ID 生成 + clamp 工具
├── store/
│   ├── reducer.ts                # add/update/remove 三个 action
│   └── DecisionContext.tsx       # 全局状态 Provider
├── hooks/
│   └── usePersistedReducer.ts    # 状态 ↔ storage 同步
├── components/
│   ├── common/                   # Button/Card/Modal/Slider 等基础组件
│   ├── decision/                 # 业务组件（视图、编辑器、推荐卡）
│   ├── visualization/            # 6 个可视化组件（纯 SVG/CSS）
│   └── layout/                   # Header
├── pages/
│   ├── ListPage.tsx              # 决策列表 + 新建对话框
│   └── DetailPage.tsx            # 决策详情（按 mode 分发）
└── test/                         # Vitest 单元测试
```

### 关键设计：逻辑 / UI 严格分离

所有评分逻辑都集中在 `src/lib/decisionEngine.ts`，**零 React 依赖、零副作用**，因此：

- 单元测试覆盖了 13 种边界情况（空数据、权重溢出、单选项、并列冠军等）
- 未来调整推荐算法（如加入"不可逆项 ×2"加权）只需改一个文件
- 可视化组件只负责"画"，不计算

## 🎯 推荐机制（纯算法，无 AI）

**加权优缺点**：信心度 = `|优点总分 − 缺点总分| / (优点总分 + 缺点总分)`

| 信心度 | 推荐 |
|---|---|
| ≥ 30% 且优点多 | 🚀 强烈推荐：去做 |
| 10–30% 且优点多 | ✅ 倾向：可以做 |
| < 10% | 🤷 接近中立 |
| 10–30% 且缺点多 | ⚠️ 倾向：暂缓 |
| ≥ 30% 且缺点多 | 🛑 强烈建议：不做 |

**决策矩阵**：信心度 = `(冠军 − 亚军) / (冠军 + 亚军)`

| 信心度 | 推荐 |
|---|---|
| ≥ 20% | 🏆 强烈推荐冠军 |
| 5–20% | ✅ 推荐冠军 |
| < 5% | ⚖️ 微弱领先，建议补维度 |

## 📝 数据持久化

- 存储位置：`localStorage['decision-app:v1']`
- 格式：`{ version: 1, decisions: [...] }`
- 读取失败时降级为空列表，写入失败只警告不崩溃
- 如需清空数据：浏览器开发者工具 → Application → Local Storage → 删除 `decision-app:v1`

## 🛣️ 可扩展方向

- [ ] IndexedDB 替换 localStorage（决策数量大时）
- [ ] 决策历史快照（每次「已决定」时存一份）
- [ ] 导出为 Markdown / JSON
- [ ] 接入 LLM 给出自然语言总结
- [ ] 亮 / 暗主题切换

## 📄 License

MIT