# 构建专业级"个人薪资计算器"工具页，帮助职场人精准估算收入结构。

## 核心定位
薪资结构分析师——让用户看清每一分钱的去向。

## 功能模块

### 1. 智能输入区
**基础字段**：
- 月薪（元）：数字输入，税前/税后切换，placeholder"例如：25000"
- 工作城市：下拉选择（一线+新一线+自定义），自动匹配社保公积金比例
- 年终奖月数：滑块0-6个月，快捷按钮（13/14/15薪）
- 缴纳基数：默认等于月薪，可展开自定义（城市自动限制上下限）

**高级设置（可折叠）**：
- 公积金比例：5%-12%（默认12%）
- 社保方案：按实际工资/最低基数/上限基数
- 专项扣除：子女教育、房贷利息、赡养老人等
- 补充公积金/企业年金：可选

**输入辅助**：
- 实时验证：非法字符红色提示，有效绿色对勾
- 智能记忆：localStorage保存，下次自动填充
- 城市联动：切换城市时社保比例平滑过渡

### 2. 计算引擎
**核心公式**：
1. 税前年薪 = 月薪×12 + 月薪×年终奖月数
2. 平均时薪 = 税前年薪 ÷ (21.75天×8小时×12月)
3. 五险一金 = 各险种基数×比例之和（养老8%+医疗2%+失业0.5%+公积金12%）
4. 应纳税所得额 = 税前年收入 - 6万免征额 - 五险一金年缴 - 专项扣除年总额
5. 个税：累进税率（3%-45%），年终奖单独/合并计税可选
6. 税后月收入 = 月薪 - 五险一金个人部分 - 月度个税
7. 税后年薪 = 税后月收入×12 + 年终奖税后金额

**精度**：分位四舍五入，保留2位小数。

### 3. 可视化结果区
**核心指标（4宫格）**：
- 税前年薪：大字号绿色，标注"¥"
- 平均时薪："¥/小时"，附注"按176小时/月"
- 税后月收入：最大卡片，绿色渐变背景
- 税后年薪：汇总值，附注"实际到手"

**拆解图表**：
- 环形图：年薪构成（基本+年终奖占比）
- 堆叠柱状图：每月资金流向（到手、五险一金、个税）
- 瀑布图：税前到税后的层层扣除过程

**对比功能**：
- 城市对比：并排显示两地税后差异（如北京vs杭州）
- 方案对比：保存当前方案，调整参数后对比（如涨薪30%）

### 4. 结果操作
- 一键复制：结构化文本（适合微信/备忘录）
- 生成图片：HTML2Canvas导出，带品牌水印
- 保存方案：本地存储，支持命名（如"当前工作"、"offer A"）
- 分享链接：URL参数编码，打开自动填充

## 设计风格

**色彩**：
- 主绿#10B981（信任、收益）、深绿#059669（强调）、浅绿#D1FAE5（高亮）
- 中性灰#F3F4F6（背景）、#6B7280（次要）、#1F2937（主文字）
- 警示橙#F59E0B（错误提示）
- 图表：绿#10B981（到手）、蓝#3B82F6（扣除）、灰#9CA3AF（个税）

**布局**：
- 桌面：左右分栏（输入40%+结果60%），sticky输入区
- 移动：上下堆叠，输入折叠为步骤条
- 留白充足，卡片圆角8px，阴影柔和

**字体**：
- 数字：SF Mono/Roboto Mono（等宽）
- 中文：Inter/思源黑体
- 金额：24-32px粗体绿色

## 交互细节
- 实时计算：防抖300ms，结果区即时反馈
- 输入框：focus边框变绿，label上浮
- 图表：hover显示精确值，图例可点击隐藏
- 复制成功：toast提示，按钮变勾号2秒恢复
- 响应式：640/768/1024/1280px断点，移动端数字键盘优化

## 数据可信度
- 社保比例：内置2026年各城市数据，可手动更新
- 个税税率：最新累进表，年终奖政策至2027年
- 版本号显示，过期提示"数据可能不是最新"
- 底部声明："计算结果仅供参考，以实际劳动合同和当地政策为准"

## 技术实现
- 框架：React/Vue + TypeScript
- 图表：Chart.js/ECharts
- 导出：html2canvas + Clipboard API
- 优化：计算缓存、图表懒加载、城市数据JSON按需加载

## 扩展功能（V2.0）
- 反向计算：输入期望税后，反推税前薪资
- 跳槽模拟器：对比offer差异（含股票、公积金）
- 年度汇算：模拟个税汇算，预估退补税
- 家庭模式：夫妻合并计算，优化专项扣除