ChatOA

+ 📋 单据 + + NO.{dayjs().format('YYYYMMDD')} + +

+ {aux.name} +

+ {aux.sub ?? ''} +

+ 请审批后执行 · 单据编号 {dayjs().format('YYYYMMDD')} +

+ {footer('#1677ff')} + {stamp} +

+ ); + } + + // ── 日程：日历卡 ─────────────────────────────── + if (aux.kind === 'schedule') { + const date = extractDate(aux.sub); + return ( +

+ + 日程 +

+ {date ? ( + <> +

{date.mon}

+ {date.day} +

+ + ) : ( +

近期

+ )} +

+ {aux.name} +

+ {aux.sub ?? '近期日程'} +

+ {footer('#1677ff')} +

+ ); + } + + // ── 云盘：文件卡 ─────────────────────────────── + if (aux.kind === 'drive') { + return ( +

+ + 云盘文件 +

+ 📄 +

+ {aux.name} +

+ {aux.sub ?? '共享文件'} +

+ {footer('#7a5af8')} +

+ ); + } + + // ── 笔记：便签 ───────────────────────────────── + return ( +

📝 笔记

+ {aux.name} +

+ {aux.sub ?? ''} +

+ {footer('#8a6d1a')} +

+ ); +} + +function MessageItem({ + msg, + peer, + isMe, + prevSameMin, + nextSameMin, + onOpenAux, +}: { + msg: Message; + peer: User; + isMe: boolean; + prevSameMin: boolean; + nextSameMin: boolean; + onOpenAux: (msg: Message, aux: AuxPayload) => void; +}) { + const avatar = isMe ? null : peer; + const name = isMe ? '我' : peer.nickname; + + return ( +

+ {!prevSameMin && ( +

+ + {fmtMsgTime(msg.createdAt)} + +

+ )} +

+ + {avatar?.nickname?.[0] ?? '我'} + +

+ {!nextSameMin && ( +

+ {name} +

+ )} + {msg.type === 'image' ? ( + 图片消息

+ ) : msg.type === 'file' ? ( + (() => { + const parsed = parseAux(msg.content); + if (parsed) { + const aux = mergeMsgAction(msg.id, parsed); + return onOpenAux(msg, aux)} />; + } + return ( +

+ 📎 {msg.content} +

+ ); + })() + ) : ( +

+ {msg.content} +

+ )} +

+ ); +} + +/** 单据详情面板（Demo，字段取自 FORM_FIELDS；真实场景可 fetchForm 服务端详情） */ +function FormDetails({ aux }: { aux: AuxPayload }) { + const fields = (aux.formType && FORM_FIELDS[aux.formType]) || []; + return fields.length > 0 ? ( + ({ + key: f.label, + label: f.label, + children: f.value, + }))} + /> + ) : ( + + ); +} + +export default function ChatWindow() { + const { activePeerId, peers, messages, sendText, sendImage, sendFile, presence } = useChat(); + const [text, setText] = useState(''); + const [sending, setSending] = useState(false); + const [pinned, setPinned] = useState(false); + const [historyOpen, setHistoryOpen] = useState(false); + const [historyKeyword, setHistoryKeyword] = useState(''); + // 附带内容选择弹窗 + const [formOpen, setFormOpen] = useState(false); + const [scheduleOpen, setScheduleOpen] = useState(false); + const [driveOpen, setDriveOpen] = useState(false); + const [noteOpen, setNoteOpen] = useState(false); + const [schedules, setSchedules] = useState<{ id: string; title: string; time: string }[]>([]); + const [notes, setNotes] = useState<{ id: string; title: string }[]>([]); + const [auxLoading, setAuxLoading] = useState(false); + const [emojiOpen, setEmojiOpen] = useState(false); + const [auxDetail, setAuxDetail] = useState<{ msg: Message; aux: AuxPayload } | null>(null); + const [processing, setProcessing] = useState(false); + const bottomRef = useRef(null); + const fileRef = useRef(null); + + const peer = activePeerId ? peers[activePeerId] : null; + const convId = useMemo(() => { + if (!activePeerId) return ''; + const raw = localStorage.getItem('chatoa_user'); + const me = raw ? (JSON.parse(raw) as { id: string }) : null; + return me ? [me.id, activePeerId].sort().join('__') : ''; + }, [activePeerId]); + + const list: Message[] = messages[convId] ?? []; + + const filtered = useMemo(() => { + const kw = historyKeyword.trim().toLowerCase(); + if (!kw) return list; + return list.filter((m) => { + const text = m.type === 'image' ? '[图片]' : m.content; + return text.toLowerCase().includes(kw); + }); + }, [list, historyKeyword]); + + useEffect(() => { + bottomRef.current?.scrollIntoView({ behavior: 'auto' }); + }, [list.length, convId]); + + useEffect(() => { + setText(''); + }, [convId]); + + if (!peer) return null; + const online = !!presence[peer.id]?.online; + + const doSend = () => { + const content = text.trim(); + if (!content) return; + sendText(peer.id, content); + setText(''); + }; + + const pickImage = async (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + e.target.value = ''; + if (!file) return; + if (!file.type.startsWith('image/')) { + message.warning('请选择图片文件'); + return; + } + setSending(true); + try { + const res = await uploadFile(file); + if (res.success && res.url) { + sendImage(peer.id, res.url); + } else { + message.error('上传失败'); + } + } catch { + message.error('上传失败，请确认服务端已启动'); + } finally { + setSending(false); + } + }; + + const onKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + doSend(); + } + }; + + /** 发送附带内容（编码为 file 类型 JSON） */ + const sendAux = (kind: string, name: string, sub?: string, formType?: string) => { + sendFile(peer.id, JSON.stringify({ kind, name, sub, formType })); + }; + + /** 处理单据：同意 / 驳回，结果写回消息内容并本地持久化 */ + const handleAuxStatus = (status: AuxStatus) => { + if (!auxDetail) return; + const { msg, aux } = auxDetail; + if (aux.status && aux.status !== 'pending') return; + setProcessing(true); + setTimeout(() => { + const me = (() => { + try { + return JSON.parse(localStorage.getItem('chatoa_user') ?? 'null') as { + nickname?: string; + } | null; + } catch { + return null; + } + })(); + const updated: AuxPayload = { + ...aux, + status, + handler: me?.nickname ?? '我', + handledAt: Date.now(), + }; + // 1) 本地持久化（刷新后仍可恢复） + saveMsgAction(msg.id, updated); + // 2) 回写 store 中消息 content 及会话 lastMessage（侧边预览同步） + const nextContent = JSON.stringify(updated); + useChat.setState((s) => ({ + messages: { + ...s.messages, + [convId]: (s.messages[convId] ?? []).map((m) => + m.id === msg.id ? { ...m, content: nextContent } : m, + ), + }, + conversations: s.conversations.map((c) => + c.id === convId && c.lastMessage && c.lastMessage.content === msg.content + ? { ...c, lastMessage: { ...c.lastMessage, content: nextContent } } + : c, + ), + })); + setAuxDetail({ msg: { ...msg, content: JSON.stringify(updated) }, aux: updated }); + setProcessing(false); + message.success(status === 'approved' ? '已同意，结果已通知对方' : '已驳回该申请'); + }, 400); + }; + + const openFormPicker = () => setFormOpen(true); + + const openSchedulePicker = async () => { + setScheduleOpen(true); + setAuxLoading(true); + try { + const start = dayjs().startOf('day').valueOf(); + const end = dayjs().add(30, 'day').endOf('day').valueOf(); + const list = await fetchSchedule(start, end); + setSchedules( + list + .filter((s) => s.title) + .map((s) => ({ + id: s.id, + title: s.title, + time: dayjs(s.startAt).format('M月D日 HH:mm'), + })), + ); + } catch { + setSchedules([]); + } finally { + setAuxLoading(false); + } + }; + + const openNotePicker = async () => { + setNoteOpen(true); + setAuxLoading(true); + try { + const list = await fetchDocs(); + setNotes( + list + .filter((d) => d.type === 'note' && d.title) + .map((d) => ({ id: d.id, title: d.title })), + ); + } catch { + setNotes([]); + } finally { + setAuxLoading(false); + } + }; + + return ( + <> + {/* 会话头部 */} +

+ + {peer.nickname} + + {peer.department && ( + + {peer.department} + {peer.title ? ` · ${peer.title}` : ''} + + )} + + + +

+ +

+ + {/* 消息列表 */} +

+ {list.length === 0 ? ( + + ) : ( + list.map((m, i) => { + const prev = list[i - 1]; + const next = list[i + 1]; + const prevSameMin = + !!prev && + prev.fromUserId === m.fromUserId && + prev.createdAt - m.createdAt < 60_000 && + Math.abs(prev.createdAt - m.createdAt) < 300_000; + const nextSameMin = + !!next && + next.fromUserId === m.fromUserId && + next.createdAt - m.createdAt < 300_000; + const isMe = m.fromUserId !== peer.id; + return ( + setAuxDetail({ msg, aux })} + /> + ); + }) + )} +

+ + {/* 输入区 */} +

+ + + ))} +

+ } + > + +

+ setText(e.target.value)} + onKeyDown={onKeyDown} + placeholder="输入消息，Enter 发送，Shift+Enter 换行" + autoSize={{ minRows: 2, maxRows: 6 }} + style={{ flex: 1, resize: 'none' }} + /> + +

+ + {/* 附带内容详情 + 处理 */} + + + {AUX_META[auxDetail.aux.kind]?.icon ?? '📄'} + + {AUX_META[auxDetail.aux.kind]?.label ?? '文件'}详情 + {auxDetail.aux.status && STATUS_META[auxDetail.aux.status] && ( + + {STATUS_META[auxDetail.aux.status].label} + + )} +

+ ) : ( + '详情' + ) + } + open={!!auxDetail} + onCancel={() => setAuxDetail(null)} + width={460} + footer={ + auxDetail && auxDetail.aux.kind === 'form' ? ( + auxDetail.aux.status === 'pending' ? ( +

+ + +

+ ) : ( +

+ {auxDetail.aux.status === 'approved' ? '✔' : '✘'} 已由{' '} + {auxDetail.aux.handler ?? '对方'} 处理 +

+ ) + ) : null + } + > + {auxDetail && ( +

+ + {AUX_META[auxDetail.aux.kind]?.icon ?? '📄'} + +

+ {auxDetail.aux.name} +

+ {auxDetail.aux.sub ?? ''} +

+ {auxDetail.aux.kind === 'form' ? ( + <> +

申请详情

+ + {auxDetail.aux.handler && ( +

+ + {auxDetail.aux.handler} 于{' '} + {auxDetail.aux.handledAt + ? dayjs(auxDetail.aux.handledAt).format('YYYY-MM-DD HH:mm') + : ''}{' '} + 处理 +

+ )} + + ) : ( +

+ {auxDetail.aux.kind === 'schedule' + ? '已将该日程同步到双方日历，可在「日程」模块查看。' + : auxDetail.aux.kind === 'drive' + ? '点击即可在云盘中打开该文件进行预览或下载。' + : auxDetail.aux.kind === 'note' + ? '该笔记已在「笔记」模块中共享给当前会话成员。' + : '文件已共享，可在云盘中查看。'} +

+ )} +

+ )} + + + {/* 聊天记录查询 */} + setHistoryOpen(false)} + footer={null} + width={520} + > + } + placeholder="搜索聊天记录" + value={historyKeyword} + onChange={(e) => setHistoryKeyword(e.target.value)} + allowClear + variant="filled" + style={{ marginBottom: 12 }} + /> + {filtered.length === 0 ? ( + + ) : ( + ( + +

+ {m.fromUserId === peer.id ? peer.nickname : '我'} + {fmtMsgTime(m.createdAt)} +

+ {m.type === 'image' ? '[图片]' : parseAux(m.content) ? `[${AUX_META[parseAux(m.content)!.kind]?.label ?? '文件'}] ${parseAux(m.content)!.name}` : m.content} +

+ + )} + /> + )} + + + {/* 选择单据 */} + setFormOpen(false)} footer={null} width={360}> + ( + { + setFormOpen(false); + sendAux('form', f.name, f.desc, f.type); + }} + > + +

{f.name}

{f.desc}

+ + )} + /> + + + {/* 选择日程 */} + setScheduleOpen(false)} + footer={null} + width={380} + > + {auxLoading ? ( +

+ +

+ ) : schedules.length === 0 ? ( + + ) : ( + ( + { + setScheduleOpen(false); + sendAux('schedule', s.title, s.time); + }} + > + + {s.title} + {s.time} + + )} + /> + )} + + + {/* 选择云盘文件 */} + setDriveOpen(false)} footer={null} width={380}> + ( + { + setDriveOpen(false); + sendAux('drive', f.name, f.size); + }} + > + + {f.name} + {f.size} + + )} + /> + + + {/* 插入笔记 */} + setNoteOpen(false)} + footer={null} + width={380} + > + {auxLoading ? ( +

+ +

+ ) : notes.length === 0 ? ( + + ) : ( + ( + { + setNoteOpen(false); + sendAux('note', n.title); + }} + > + + {n.title} + + )} + /> + )} + + + ); +} diff --git a/client/src/components/ConversationList.tsx b/client/src/components/ConversationList.tsx new file mode 100644 index 0000000..0336b25 --- /dev/null +++ b/client/src/components/ConversationList.tsx @@ -0,0 +1,143 @@ +import { Avatar, Badge, List, Skeleton } from 'antd'; +import dayjs from 'dayjs'; +import type { Conversation } from '../types'; +import { useChat } from '../store/chat'; + +function fmtTime(ts: number) { + const d = dayjs(ts); + const now = dayjs(); + if (d.isSame(now, 'day')) return d.format('HH:mm'); + if (d.isSame(now.subtract(1, 'day'), 'day')) return '昨天'; + return d.format('MM-DD'); +} + +function preview(c: Conversation) { + const lm = c.lastMessage; + if (!lm) return ''; + const raw = localStorage.getItem('chatoa_user'); + const me = raw ? (JSON.parse(raw) as { id: string }) : null; + const isMe = me ? me.id === lm.fromUserId : false; + const prefix = isMe ? '我: ' : ''; + if (lm.type === 'image') return `${prefix}[图片]`; + if (lm.type === 'file') { + // 附带内容消息：content 为 JSON，展示为 [类型] 名称 + 处理状态 + try { + const obj = JSON.parse(lm.content); + if (obj && typeof obj.kind === 'string' && obj.name) { + const labels: Record = { + form: '单据', + schedule: '日程', + drive: '云盘文件', + note: '笔记', + }; + const statusLabels: Record = { + pending: '待处理', + approved: '已同意', + rejected: '已驳回', + }; + const status = obj.status ? ` · ${statusLabels[obj.status] ?? ''}` : ''; + return `${prefix}[${labels[obj.kind] ?? '文件'}] ${obj.name}${status}`; + } + } catch { + /* 普通文件 */ + } + return `${prefix}[文件]`; + } + return `${prefix}${lm.content}`; +} + +function ConversationItem({ c }: { c: Conversation }) { + const activePeerId = useChat((s) => s.activePeerId); + const openConversation = useChat((s) => s.openConversation); + const presence = useChat((s) => (c.peer ? s.presence[c.peer.id] : undefined)); + const online = !!presence?.online; + + const active = c.peer?.id === activePeerId; + return ( +

c.peer && openConversation(c.peer)} + style={{ + display: 'flex', + alignItems: 'center', + padding: '10px 12px', + cursor: 'pointer', + background: active ? '#e6e6e6' : 'transparent', + borderLeft: active ? '3px solid #07c160' : '3px solid transparent', + }} + > + + + {c.peer?.nickname?.[0] ?? '?'} + + +

+ + {c.peer?.nickname ?? '未知用户'} + + + {c.updatedAt ? fmtTime(c.updatedAt) : ''} + +

+ + {preview(c)} + + {(c.unreadCount ?? 0) > 0 && ( + + )} +

+ ); +} + +export default function ConversationList({ + conversations, + loading, +}: { + conversations: Conversation[]; + loading: boolean; +}) { + if (loading) { + return ( +

+ + +

+ ); + } + + if (conversations.length === 0) { + return ( +

+ 暂无会话 +
+ 可在「联系人」页发起聊天 +

+ ); + } + + return ( + } + /> + ); +} diff --git a/client/src/constants/ai.ts b/client/src/constants/ai.ts new file mode 100644 index 0000000..ff63dd7 --- /dev/null +++ b/client/src/constants/ai.ts @@ -0,0 +1,31 @@ +/** AI 助手定义（联系人「AI助手」分组与 AI 对话页共用） */ +export interface AiAssistant { + id: string; + name: string; + desc: string; + scene: string; + emoji: string; + color: string; +} + +export const AI_ASSISTANTS: AiAssistant[] = [ + { id: 'assistant', name: 'ChatOA 智能助手', desc: '通用办公助手，答疑解惑', scene: '通用办公答疑、文档撰写与日常咨询', emoji: '🤖', color: '#07c160' }, + { id: 'writer', name: '文案创作助手', desc: '写作、润色、文案生成', scene: '营销文案、公众号推文、广告语创作', emoji: '✍️', color: '#1677ff' }, + { id: 'meeting', name: '会议纪要助手', desc: '整理会议要点与待办', scene: '会议记录整理、待办提炼与纪要生成', emoji: '📝', color: '#722ed1' }, + { id: 'translator', name: '翻译助手', desc: '中英互译与文案润色', scene: '中英互译、邮件润色、多语言写作', emoji: '🌐', color: '#fa8c16' }, +]; + +/** 可选大模型（Demo 仅供选择演示，未接真实 API） */ +export interface AiModel { + id: string; + name: string; + vendor: string; +} + +export const AI_MODELS: AiModel[] = [ + { id: 'gpt4o', name: 'GPT-4o', vendor: 'OpenAI' }, + { id: 'claude35', name: 'Claude 3.5 Sonnet', vendor: 'Anthropic' }, + { id: 'deepseek', name: 'DeepSeek-V3', vendor: '深度求索' }, + { id: 'qwen', name: '通义千问 Max', vendor: '阿里云' }, + { id: 'doubao', name: '豆包 Pro', vendor: '字节跳动' }, +]; diff --git a/client/src/index.css b/client/src/index.css new file mode 100644 index 0000000..35d9568 --- /dev/null +++ b/client/src/index.css @@ -0,0 +1,34 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, +body, +#root { + height: 100%; + width: 100%; + overflow: hidden; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', + 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; + background: #f5f5f5; + color: #333; +} + +::-webkit-scrollbar { + width: 6px; + height: 6px; +} +::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.2); + border-radius: 3px; +} +::-webkit-scrollbar-track { + background: transparent; +} + +/* 微信风格辅助类 */ +.wechat-green { + color: #07c160; +} diff --git a/client/src/layout/KeepAliveOutlet.tsx b/client/src/layout/KeepAliveOutlet.tsx new file mode 100644 index 0000000..7284d92 --- /dev/null +++ b/client/src/layout/KeepAliveOutlet.tsx @@ -0,0 +1,102 @@ +import { useEffect, useRef, useState } from 'react'; +import type { ReactNode } from 'react'; +import { useLocation } from 'react-router-dom'; + +import ChatPage from '../pages/Chat'; +import ContactsPage from '../pages/Contacts'; +import SchedulePage from '../pages/Schedule'; +import FormsPage from '../pages/Forms'; +import KnowledgePage from '../pages/Knowledge'; +import AppsPage from '../pages/Apps'; +import DrivePage from '../pages/Drive'; +import AiChatPage from '../pages/AiChat'; + +type PageKey = + | 'chat' + | 'contacts' + | 'schedule' + | 'forms' + | 'knowledge' + | 'apps' + | 'drive' + | 'ai-chat'; + +function resolveKey(pathname: string): PageKey { + if (pathname.startsWith('/chat')) return 'chat'; + if (pathname.startsWith('/contacts')) return 'contacts'; + if (pathname.startsWith('/schedule')) return 'schedule'; + if (pathname.startsWith('/forms')) return 'forms'; + if (pathname.startsWith('/knowledge')) return 'knowledge'; + if (pathname.startsWith('/apps')) return 'apps'; + if (pathname.startsWith('/drive')) return 'drive'; + if (pathname.startsWith('/ai-chat')) return 'ai-chat'; + return 'chat'; +} + +/** + * Keep-Alive 出口：1-7 模块页面（聊天/联系人/日程/表单/笔记/应用/网盘 + AI 对话） + * 切换时保持组件挂载，非当前页面用 display:none 隐藏，避免路由切换导致卸载、编辑内容丢失。 + * 懒挂载：首次访问某页面时才创建实例，之后一直保留；滚动位置、输入内容等状态均不丢失。 + */ +export default function KeepAliveOutlet() { + const location = useLocation(); + const activeKey = resolveKey(location.pathname); + const [mountedKeys, setMountedKeys] = useState(() => [activeKey]); + + // 懒挂载：路由变化时把当前页加入已挂载列表。 + // 注意：不能在 render 期间直接 setState（React 18 并发渲染会丢弃 render-phase update， + // 导致从 /chat 切换其他页面时停留在旧渲染、内容空白），必须通过 effect 更新。 + useEffect(() => { + setMountedKeys((prev) => (prev.includes(activeKey) ? prev : [...prev, activeKey])); + }, [activeKey]); + + // 渲染时始终包含当前页（首次切换时立即显示，effect 提交后再持久化） + const renderKeys = mountedKeys.includes(activeKey) ? mountedKeys : [...mountedKeys, activeKey]; + + // AI 对话页的助手 id 从路径解析（常驻后不再依赖 Route 的 useParams） + const assistantId = activeKey === 'ai-chat' ? location.pathname.split('/')[2] : undefined; + const lastAssistantIdRef = useRef(undefined); + if (assistantId) lastAssistantIdRef.current = assistantId; + + return ( + <> + {renderKeys.map((key) => { + const active = key === activeKey; + let page: ReactNode; + switch (key) { + case 'chat': + page = ; + break; + case 'contacts': + page = ; + break; + case 'schedule': + page = ; + break; + case 'forms': + page = ; + break; + case 'knowledge': + page = ; + break; + case 'apps': + page = ; + break; + case 'drive': + page = ; + break; + default: + page = ; + } + return ( +

+ {page} +

+ ); + })} + + ); +} diff --git a/client/src/layout/MainLayout.tsx b/client/src/layout/MainLayout.tsx new file mode 100644 index 0000000..644acf1 --- /dev/null +++ b/client/src/layout/MainLayout.tsx @@ -0,0 +1,134 @@ +import { useEffect } from 'react'; +import { Outlet, useLocation, useNavigate } from 'react-router-dom'; +import { Avatar, Badge, Tooltip } from 'antd'; +import { + MessageOutlined, + ContactsOutlined, + CalendarOutlined, + FormOutlined, + BookOutlined, + AppstoreOutlined, + CloudOutlined, + RobotOutlined, + LogoutOutlined, +} from '@ant-design/icons'; +import { useAuth } from '../store/auth'; +import { useChat } from '../store/chat'; +import { connectSocket, disconnectSocket, onMessage, onPresence, onPresenceInit } from '../socket/socket'; + +const NAV_ITEMS = [ + { key: '/chat', icon: , label: '聊天' }, + { key: '/ai-chat', icon: , label: 'AI助手' }, + { key: '/contacts', icon: , label: '联系人' }, + { key: '/schedule', icon: , label: '日程' }, + { key: '/forms', icon: , label: '表单' }, + { key: '/knowledge', icon: , label: '笔记' }, + { key: '/apps', icon: , label: '应用' }, + { key: '/drive', icon: , label: '网盘' }, +]; + +export default function MainLayout() { + const navigate = useNavigate(); + const location = useLocation(); + const user = useAuth((s) => s.user); + const token = useAuth((s) => s.token); + const logout = useAuth((s) => s.logout); + const totalUnread = useChat((s) => + s.conversations.reduce((sum, c) => sum + (c.unreadCount || 0), 0), + ); + const receiveMessage = useChat((s) => s.receiveMessage); + const updatePresence = useChat((s) => s.updatePresence); + const setPresenceList = useChat((s) => s.setPresenceList); + + // 建立 socket 连接并注册事件 + useEffect(() => { + if (!token) return; + connectSocket(token); + const offMsg = onMessage(receiveMessage); + const offPres = onPresence(updatePresence); + const offInit = onPresenceInit(setPresenceList); + return () => { + offMsg(); + offPres(); + offInit(); + disconnectSocket(); + }; + }, [token, receiveMessage, updatePresence, setPresenceList]); + + // 主导航高亮：AI 对话页（/ai-chat/*）已是主导航「AI助手」菜单项，正常匹配高亮 + const currentKey = NAV_ITEMS.find((n) => location.pathname.startsWith(n.key))?.key ?? ''; + + return ( +

+ {/* 第一列：功能图标导航 */} +

+ {NAV_ITEMS.map((item) => ( + +

navigate(item.key)} + style={{ + width: 44, + height: 44, + borderRadius: 8, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + cursor: 'pointer', + fontSize: 20, + color: currentKey === item.key ? '#07c160' : '#aaa', + background: currentKey === item.key ? 'rgba(255,255,255,0.08)' : 'transparent', + marginBottom: 8, + }} + > + {item.key === '/chat' && totalUnread > 0 ? ( + + {item.icon} + + ) : ( + item.icon + )} +

+ + ))} +

+ +

+ + + {user?.nickname?.[0] ?? 'U'} + +

+ + {/* 第二列 + 第三列：由子路由页面渲染 */} +

+ +

+ ); +} diff --git a/client/src/layout/constants.ts b/client/src/layout/constants.ts new file mode 100644 index 0000000..4ef84e5 --- /dev/null +++ b/client/src/layout/constants.ts @@ -0,0 +1,6 @@ +/** + * 各模块左侧区域宽度（全局统一）。 + * 1-7 个模块（聊天/联系人/日程/表单/知识库/应用/网盘）的左侧列表区域 + * 宽度均须引用此常量，以与聊天界面会话列表区域保持一致。 + */ +export const SIDEBAR_WIDTH = 280; diff --git a/client/src/main.tsx b/client/src/main.tsx new file mode 100644 index 0000000..1eb6982 --- /dev/null +++ b/client/src/main.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { ConfigProvider } from 'antd'; +import zhCN from 'antd/locale/zh_CN'; +import dayjs from 'dayjs'; +import 'dayjs/locale/zh-cn'; +import App from './App'; +import './index.css'; + +dayjs.locale('zh-cn'); + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + + + , +); diff --git a/client/src/pages/AiChat.tsx b/client/src/pages/AiChat.tsx new file mode 100644 index 0000000..dce0204 --- /dev/null +++ b/client/src/pages/AiChat.tsx @@ -0,0 +1,545 @@ +import { useEffect, useRef, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { Button, Empty, Image, Input, List, message, Modal, Popconfirm, Select, Spin, Tooltip } from 'antd'; +import { + ClearOutlined, + FormOutlined, + PaperClipOutlined, + PictureOutlined, + RobotOutlined, + SendOutlined, +} from '@ant-design/icons'; +import { AI_ASSISTANTS, AI_MODELS } from '../constants/ai'; +import { SIDEBAR_WIDTH } from '../layout/constants'; +import { uploadFile } from '../api/chat'; + +interface AiMsg { + id: string; + role: 'user' | 'assistant'; + content: string; + model?: string; + time: number; + type?: 'text' | 'image' | 'file' | 'form'; + fileName?: string; + fileSize?: string; +} + +/** 示例表单（添加表单演示） */ +const SAMPLE_FORMS = ['请假申请', '会议室预约', '办公用品申领', '公车借用', '报销申请']; + +const formatSize = (bytes: number) => { + if (bytes < 1024) return `${bytes} B`; + if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`; + return `${(bytes / 1024 / 1024).toFixed(1)} MB`; +}; + +/** 本地模拟 AI 对附带内容的回复（Demo） */ +function genAuxReply(type: 'image' | 'file' | 'form', name?: string): string { + if (type === 'image') { + return '已收到你的图片，我仔细看了一下～\n\n接入真实多模态大模型后，我可以帮你分析图片内容、提取文字信息或生成描述。'; + } + if (type === 'file') { + return `已收到文件「${name ?? ''}」，我先帮你记录下来了。\n\n接入真实大模型后，我可以帮你解析文档内容、提炼要点或生成摘要。`; + } + return `已添加表单「${name ?? ''}」。\n\n请告诉我需要我做什么，比如帮你完善填写内容或检查信息完整性。`; +} + +/** 本地模拟 AI 回复（Demo，未接真实大模型 API） */ +function genReply(text: string): string { + const t = text.trim().toLowerCase(); + if (/^(你好|hello|hi|嗨|哈喽)/.test(t)) { + return '你好呀！我是你的 AI 助手，可以帮你答疑解惑、写文案、整理纪要或做翻译，请直接描述你的需求～'; + } + if (t.includes('时间')) { + return `现在是 ${new Date().toLocaleString('zh-CN')}。`; + } + if (t.includes('天气')) { + return '我这里无法获取实时天气数据，建议你查看手机上的天气应用，或告诉我城市名，我帮你写一段天气查询脚本 😄'; + } + if (t.includes('笑话')) { + return '程序员最怕的两件事：一是改别人的代码，二是别人改我的代码。'; + } + if (t.includes('谢谢') || t.includes('感谢')) { + return '不客气！有需要随时找我，我 7×24 小时在线～'; + } + if (t.includes('翻译')) { + const target = text.replace(/翻译/gi, '').trim(); + return `（Demo）你输入的内容是：\n${target || text}\n\n接入真实大模型后，这里会返回翻译结果。`; + } + return `已收到你的问题：「${text}」\n\n这是一条 Demo 回复。当前版本为纯前端模拟，接入真实大模型 API 后即可获得智能回答。`; +} + +const historyKey = (id: string) => `ai_chat_history_${id}`; + +export default function AiChatPage({ assistantId }: { assistantId?: string }) { + const navigate = useNavigate(); + const assistant = AI_ASSISTANTS.find((a) => a.id === assistantId) ?? AI_ASSISTANTS[0]; + + const [model, setModel] = useState(AI_MODELS[0].id); + const [messages, setMessages] = useState([]); + const [input, setInput] = useState(''); + const [loading, setLoading] = useState(false); + const [sendingImg, setSendingImg] = useState(false); + const [formPickOpen, setFormPickOpen] = useState(false); + const bottomRef = useRef(null); + const imgRef = useRef(null); + const fileRef = useRef(null); + + // 切换助手时加载该助手的历史 + useEffect(() => { + try { + const raw = localStorage.getItem(historyKey(assistant.id)); + setMessages(raw ? (JSON.parse(raw) as AiMsg[]) : []); + } catch { + setMessages([]); + } + setLoading(false); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [assistant.id]); + + // 持久化历史 + useEffect(() => { + localStorage.setItem(historyKey(assistant.id), JSON.stringify(messages)); + }, [messages, assistant.id]); + + useEffect(() => { + bottomRef.current?.scrollIntoView({ behavior: 'smooth' }); + }, [messages, loading]); + + const send = () => { + const text = input.trim(); + if (!text || loading) return; + const userMsg: AiMsg = { + id: `u${Date.now()}`, + role: 'user', + content: text, + time: Date.now(), + }; + setMessages((m) => [...m, userMsg]); + setInput(''); + setLoading(true); + const modelName = AI_MODELS.find((m) => m.id === model)?.name; + setTimeout(() => { + const reply: AiMsg = { + id: `a${Date.now()}`, + role: 'assistant', + content: genReply(text), + model: modelName, + time: Date.now(), + }; + setMessages((m) => [...m, reply]); + setLoading(false); + }, 900); + }; + + const clearAll = () => { + setMessages([]); + localStorage.removeItem(historyKey(assistant.id)); + }; + + /** 插入附带内容（图片/文件/表单）的用户消息，并触发 AI 回复 */ + const pushAux = (partial: Partial) => { + const userMsg: AiMsg = { + id: `u${Date.now()}`, + role: 'user', + content: '', + time: Date.now(), + ...partial, + }; + setMessages((m) => [...m, userMsg]); + setLoading(true); + const modelName = AI_MODELS.find((m) => m.id === model)?.name; + const type = (partial.type ?? 'text') as 'image' | 'file' | 'form'; + setTimeout(() => { + const reply: AiMsg = { + id: `a${Date.now()}`, + role: 'assistant', + content: genAuxReply(type, partial.fileName ?? partial.content), + model: modelName, + time: Date.now(), + }; + setMessages((m) => [...m, reply]); + setLoading(false); + }, 900); + }; + + const pickImage = async (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + e.target.value = ''; + if (!file) return; + if (!file.type.startsWith('image/')) { + message.warning('请选择图片文件'); + return; + } + setSendingImg(true); + try { + const res = await uploadFile(file); + if (res.success && res.url) { + pushAux({ type: 'image', content: res.url }); + } else { + message.error('上传失败'); + } + } catch { + message.error('上传失败，请确认服务端已启动'); + } finally { + setSendingImg(false); + } + }; + + const pickFile = (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + e.target.value = ''; + if (!file) return; + pushAux({ type: 'file', content: `${file.name}`, fileName: file.name, fileSize: formatSize(file.size) }); + }; + + return ( + <> + {/* 第二列：AI 助手列表 */} +

+ {/* 标题区：固定高度，底部横线（与各模块统一） */} +

+ + + AI 助手 + + 单击进入对话 +

+ {AI_ASSISTANTS.map((a) => { + const active = a.id === assistant.id; + return ( +

navigate(`/ai-chat/${a.id}`)} + style={{ + display: 'flex', + alignItems: 'center', + padding: '10px 14px', + cursor: 'pointer', + background: active ? '#e6e6e6' : 'transparent', + }} + > +

+ {a.emoji} +

{a.name}

+ {a.desc} +

+ ); + })} +

+ + {/* 第三列：AI 对话窗口 */} +

+ {/* 顶部：助手信息（高度 52 与其他模块横线对齐） */} +

+ {assistant.emoji} +

{assistant.name}

{assistant.desc}

+ + + +

+ + {/* 消息区 */} +

+ {messages.length === 0 && !loading ? ( + + ) : ( + messages.map((m) => ( +

+ {m.role === 'assistant' && ( +

+ {assistant.emoji} +

+ )} +

+ {m.role === 'assistant' && m.model && ( +

+ 由 {m.model} 生成 +

+ )} + {m.type === 'image' ? ( +

+ ) : m.type === 'file' || m.type === 'form' ? ( +

+ {m.type === 'file' ? '📎 文件' : '📋 表单'} +

+ {m.type === 'file' && m.fileName ? m.fileName : m.content} + {m.type === 'file' && m.fileSize ? `（${m.fileSize}）` : ''} +

+ ) : ( +

+ {m.content} +

+ )} +

+ )) + )} + {loading && ( +

+ {assistant.emoji} +

+ + 正在思考… +

+ )} +

+ + {/* 输入区 */} +

+ {/* 工具条：添加图片 / 文件 / 表单 / 模型选择 */} +

+ + + + + ) : installedIds.has(selected.id) ? ( + <> + + + + ) : ( + + )} + {selected.source === 'market' && ( + + )} +

+ + {/* 应用详情 */} +

+ 应用详情 +

+ 开发方 +

{selected.author ?? '—'}

+ 版本 +

{selected.version ?? '—'}

+ {selected.installedAt && ( +

+ 安装时间 +

{selected.installedAt}

+ )} + {selected.lastUsedAt && ( +

+ 最近使用 +

{selected.lastUsedAt}

+ )} +

+ 应用类型 +

{selected.source === 'builtin' ? '内置应用' : '市场应用'}

+ 当前用户 +

{user?.nickname ?? '—'}

+ + {/* 关联项目（外部本地项目） */} + {(() => { + const ext = EXTERNAL_PROJECTS[selected.id]; + if (!ext) return null; + return ( +

+ + 关联项目 + +

+ 项目名称 +

{ext.name}

+ 访问地址 +

+ + {ext.url} + +

+ 项目路径 + + {ext.path} + +

+ 该应用为线上服务，点击「使用」将新窗口打开访问。 +

+ ); + })()} + + {/* 功能预览卡片 */} + {['chat', 'contacts', 'schedule', 'forms', 'knowledge', 'crm'].includes(selected.id) ? ( +

+ 功能预览 +

+ {FEATURES[selected.id]?.map((f) => ( +

+ {f} +

+ ))} +

+ ) : ( +

+ {installedIds.has(selected.id) ? '应用已安装，功能建设中，敬请期待' : '安装后即可体验完整功能'} +

+ )} + + {installedIds.has(selected.id) && selected.id !== 'drive' && ( +

+ + 应用运行正常，最近一次检查于今日 09:00 +

+ )} +

+ ) : ( +

+ +

+ )} +

+ ), + }, + ...appTabs.map((t) => ({ + key: t.key, + closable: true, + label: t.name, + children: ( +

+ 正在运行：{t.name} + {t.url && ( + + + + )} +

+ {t.url ? ( +