第 10 课：进阶扩展

// 在 ChatInterface 或 MessageInput 里添加快捷按钮
const TEMPLATES = [
  { label: '📊 月度预算表', prompt: '创建一个月度预算表，包含收入、支出分类、结余，有图表' },
  { label: '💪 健身打卡', prompt: '创建一个健身打卡表，包含日期、运动项目、时长、卡路里' },
  { label: '📈 销售报表', prompt: '创建一个季度销售报表，按产品和地区分类，有同比增长' },
  { label: '📋 项目进度', prompt: '创建一个项目进度跟踪表，包含任务、负责人、截止日期、状态' },
];

// 渲染快捷按钮
{TEMPLATES.map(t => (
  <button onClick={() => sendMessage(t.prompt)}>
    {t.label}
  </button>
))}

# 财务报表规范

当生成财务类 Excel 时，遵守以下额外规范：
- 所有金额单位统一为人民币（¥）
- 数字格式使用千位分隔符：#,##0.00
- 负数用红色显示
- 每个工作表都要有打印区域设置
- 表头行高度设为 25，数据行设为 20

# 品牌规范

所有生成的 Excel 应遵守公司品牌规范：
- 标题行使用公司蓝色（#003A70）
- 字体统一使用 Microsoft YaHei（微软雅黑）
- 第一行留空用于公司 Logo
- 最后一行添加"Confidential - Internal Use Only"

agent/.claude/skills/
├── xlsx/           ← 已有的 Excel 技能
└── charts/         ← 新增的图表技能
    └── SKILL.md

---
name: charts
description: "Excel 图表生成规范"
---

# 图表生成规范

## 支持的图表类型
- 柱状图（BarChart）
- 折线图（LineChart）
- 饼图（PieChart）
- 散点图（ScatterChart）

## 使用 openpyxl 创建图表

\`\`\`python
from openpyxl.chart import BarChart, Reference

chart = BarChart()
chart.title = "月度销售"
chart.y_axis.title = "金额（万元）"
chart.x_axis.title = "月份"
chart.style = 10  # 内置样式

data = Reference(ws, min_col=2, min_row=1, max_col=3, max_row=13)
cats = Reference(ws, min_col=1, min_row=2, max_row=13)

chart.add_data(data, titles_from_data=True)
chart.set_categories(cats)
chart.shape = 4

ws.add_chart(chart, "F2")
\`\`\`

## 图表设计原则
- 每个图表都要有标题
- 坐标轴要有标签
- 颜色使用品牌色（蓝色系列）
- 图表大小：宽 15 单位，高 10 单位

// main.ts —— 修改文件检测逻辑
const SUPPORTED_OUTPUTS = ['.xlsx', '.csv', '.pdf', '.html', '.png'];

const newFiles = finalFiles.filter(f =>
  !initialFiles.has(f) &&
  SUPPORTED_OUTPUTS.some(ext => f.endsWith(ext))
);

// MessageInput.tsx —— 修改上传文件类型
const ACCEPTED_TYPES = [
  '.xlsx', '.xls', '.csv',  // 表格
  '.pdf',                    // PDF
  '.docx', '.doc',           // Word
  '.json',                   // JSON 数据
  '.txt',                    // 纯文本
];

// 维护对话历史
const conversationHistory: string[] = [];

ipcMain.on('claude-code:query', async (event, { content }) => {
  conversationHistory.push(content);

  // 把历史上下文也传给 AI
  const contextPrompt = conversationHistory.length > 1
    ? `Previous conversation context:\n${conversationHistory.slice(-5).join('\n')}\n\nCurrent request: ${content}`
    : content;

  const queryIterator = query({
    prompt: contextPrompt,
    // ...
  });
});

# 构建生产版本
npm run build

# 打包成安装程序
npm run package

# 输出位置：
# Mac:     release/build/ElectronReact-x.x.x.dmg
# Windows: release/build/ElectronReact Setup x.x.x.exe
# Linux:   release/build/ElectronReact-x.x.x.AppImage

"build": {
  "productName": "Excel AI Assistant",
  "appId": "com.yourcompany.excel-ai",
  "mac": {
    "category": "public.app-category.productivity"
  },
  "win": {
    "target": "nsis"
  },
  "linux": {
    "target": "AppImage"
  }
}

需要改的部分：

1. 去掉 Electron
   - 主进程的 IPC 改为 HTTP API（Express/Fastify）
   - 文件操作改为服务器端处理

2. 前端基本不变
   - React 组件可以直接复用
   - IPC 调用改为 fetch() / axios

3. 后端新增
   - Express 服务器
   - 文件上传 API（multer）
   - 文件下载 API
   - WebSocket（用于流式消息）

架构变化：
  Electron: React ←IPC→ Node.js ← SDK
  Web:      React ←HTTP/WS→ Express ← SDK

┌────────────────────────────────────────────────┐
│          AI 桌面应用的通用框架                   │
│                                                │
│  前端层                                        │
│  ├── 聊天界面（消息列表 + 输入框）              │
│  ├── 工具展示（实时显示 AI 在做什么）            │
│  ├── 文件管理（上传 + 下载）                    │
│  └── 任务展示（Todo 列表）                      │
│                                                │
│  桥梁层                                        │
│  ├── IPC 通信（或 HTTP/WebSocket）              │
│  ├── 文件路由（上传保存 + 输出检测）             │
│  └── 错误处理 + 任务取消                        │
│                                                │
│  AI 层                                         │
│  ├── Claude Agent SDK（query()）                │
│  ├── 技能系统（SKILL.md）                       │
│  ├── 工具箱（Bash、Write、Read 等）             │
│  └── 代码生成模式（写代码 → 执行 → 产出文件）    │
└────────────────────────────────────────────────┘