feat: MetonaAI Desktop 初始项目

- Electron + React + TypeScript 架构 - 三栏布局: Sidebar | ChatPanel | DetailPanel - 9 个内置工具 (文件系统/网络/记忆/命令) - SQLite 持久化 (better-sqlite3) - MUI 暗色/亮色主题系统 - Agent Loop ReAct 状态机引擎 - DeepSeek / Agnes AI / Ollama Provider 适配器 - MCP 协议集成 - 系统托盘 + 全局快捷键 - Tailwind CSS v4 + Tailwind Merge - 修复: Sidebar 缺失 TextField 导入导致黑屏
2026-06-27 21:33:27 +08:00
commit 1d185db6b3
109 changed files with 39155 additions and 0 deletions
@@ -0,0 +1,122 @@
+/**
+ * ContextMenu — 右键菜单组件
+ *
+ * 支持 5 种对象的右键菜单：消息、工具调用卡片、会话项、代码块、Trace 步骤。
+ *
+ * @see docs/MetonaAI-Desktop UI UX 设计集成方案.html — 右键菜单设计
+ */
+
+import { Menu, MenuItem, ListItemIcon, ListItemText } from '@mui/material';
+import { Copy, Quote, Edit, Trash2, RotateCcw, Eye, Code, ExternalLink, Pin, Archive, FileDown } from 'lucide-react';
+import { useAgentStore } from '@renderer/stores/agent-store';
+import { useSessionStore } from '@renderer/stores/session-store';
+
+export type ContextMenuType = 'message' | 'tool-call' | 'session' | 'code-block' | 'trace-step';
+
+interface ContextMenuItem {
+  id: string;
+  icon: typeof Copy;
+  label: string;
+  action: () => void;
+  disabled?: boolean;
+}
+
+interface ContextMenuProps {
+  type: ContextMenuType;
+  x: number;
+  y: number;
+  onClose: () => void;
+  items: ContextMenuItem[];
+}
+
+export function ContextMenu({ x, y, onClose, items }: ContextMenuProps): React.JSX.Element {
+  return (
+    <Menu open onClose={onClose} anchorReference="anchorPosition" anchorPosition={{ top: y, left: x }} PaperProps={{ sx: { minWidth: 160 } }}>
+      {items.map((item) => {
+        const Icon = item.icon;
+        return (
+          <MenuItem key={item.id} onClick={() => { if (!item.disabled) { item.action(); onClose(); } }} disabled={item.disabled} dense>
+            <ListItemIcon sx={{ minWidth: 28 }}><Icon size={12} /></ListItemIcon>
+            <ListItemText primaryTypographyProps={{ fontSize: 12 }}>{item.label}</ListItemText>
+          </MenuItem>
+        );
+      })}
+    </Menu>
+  );
+}
+
+/**
+ * 创建右键菜单项的工厂函数
+ */
+export function createContextMenuItems(type: ContextMenuType, data?: unknown): ContextMenuItem[] {
+  switch (type) {
+    case 'message': {
+      const content = (data as { content?: string })?.content ?? '';
+      return [
+        { id: 'copy', icon: Copy, label: '复制', action: () => navigator.clipboard.writeText(content).catch(() => {}) },
+        { id: 'quote', icon: Quote, label: '引用回复', action: () => {
+          const input = document.querySelector<HTMLTextAreaElement>('[data-chat-input]');
+          if (input) { input.value = content.split('\n').map((l: string) => `> ${l}`).join('\n') + '\n\n'; input.dispatchEvent(new Event('input', { bubbles: true })); input.focus(); }
+        }},
+      ];
+    }
+
+    case 'tool-call': {
+      const tc = data as { args?: Record<string, unknown>; result?: unknown } | undefined;
+      return [
+        { id: 'view-params', icon: Eye, label: '查看参数', action: () => { if (tc?.args) navigator.clipboard.writeText(JSON.stringify(tc.args, null, 2)).catch(() => {}); }},
+        { id: 'view-result', icon: Eye, label: '查看完整结果', action: () => { if (tc?.result) navigator.clipboard.writeText(JSON.stringify(tc.result, null, 2)).catch(() => {}); }},
+        { id: 'copy-result', icon: Copy, label: '复制结果', action: () => { if (tc?.result) navigator.clipboard.writeText(typeof tc.result === 'string' ? tc.result : JSON.stringify(tc.result)).catch(() => {}); }},
+        { id: 're-execute', icon: RotateCcw, label: '重新执行', action: () => {
+          const m = [...useAgentStore.getState().messages].reverse().find((m) => m.role === 'user');
+          if (m) useAgentStore.getState().sendMessage(m.content);
+        }},
+      ];
+    }
+
+    case 'session': {
+      const sid = (data as { sessionId?: string })?.sessionId;
+      return [
+        { id: 'rename', icon: Edit, label: '重命名', action: () => {
+          if (sid) { const t = prompt('新会话名称:'); if (t?.trim()) { window.metona?.sessions.rename(sid, t.trim()); useSessionStore.getState().updateSession(sid, { title: t.trim() }); } }
+        }},
+        { id: 'pin', icon: Pin, label: '置顶', action: () => {
+          if (sid) { const s = useSessionStore.getState().sessions.find((x) => x.id === sid); if (s) { window.metona?.sessions.pin(sid, !s.pinned); useSessionStore.getState().pinSession(sid, !s.pinned); } }
+        }},
+        { id: 'archive', icon: Archive, label: '归档', action: () => { if (sid) useSessionStore.getState().archiveSession(sid, true); }},
+        { id: 'export', icon: FileDown, label: '导出', action: () => {
+          if (sid) window.metona?.sessions.getMessages(sid).then((msgs) => {
+            const b = new Blob([JSON.stringify(msgs, null, 2)], { type: 'application/json' });
+            const a = document.createElement('a'); a.href = URL.createObjectURL(b); a.download = `session-${sid}.json`; a.click();
+          }).catch(() => {});
+        }},
+        { id: 'delete', icon: Trash2, label: '删除', action: () => {
+          if (sid && confirm('确定删除此会话？')) { window.metona?.sessions.delete(sid); useSessionStore.getState().removeSession(sid); }
+        }},
+      ];
+    }
+
+    case 'code-block': {
+      const code = (data as { code?: string })?.code;
+      return [
+        { id: 'copy-code', icon: Copy, label: '复制代码', action: () => { if (code) navigator.clipboard.writeText(code).catch(() => {}); }},
+        { id: 'open-editor', icon: Code, label: '在编辑器中打开', action: () => { if (code) window.open(URL.createObjectURL(new Blob([code], { type: 'text/plain' })), '_blank'); }},
+      ];
+    }
+
+    case 'trace-step': {
+      const step = data as { thought?: string; toolCalls?: Array<{ name: string; args: Record<string, unknown> }> } | undefined;
+      return [
+        { id: 'copy-thought', icon: Copy, label: '复制 Thought', action: () => { if (step?.thought) navigator.clipboard.writeText(step.thought).catch(() => {}); }},
+        { id: 'copy-params', icon: Copy, label: '复制工具参数', action: () => {
+          if (step?.toolCalls) navigator.clipboard.writeText(step.toolCalls.map((tc) => `${tc.name}: ${JSON.stringify(tc.args, null, 2)}`).join('\n')).catch(() => {});
+        }},
+        { id: 'export', icon: ExternalLink, label: '导出步骤详情', action: () => {
+          if (step) { const b = new Blob([JSON.stringify(step, null, 2)], { type: 'application/json' }); const a = document.createElement('a'); a.href = URL.createObjectURL(b); a.download = `trace-step-${Date.now()}.json`; a.click(); }
+        }},
+      ];
+    }
+
+    default: return [];
+  }
+}