Initial commit: OmniAI Web Frontend

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-02 12:38:01 +08:00
commit bedee3ba8d
183 changed files with 94805 additions and 0 deletions
@@ -0,0 +1,138 @@
+import {
+  CloseOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  MessageOutlined,
+  PlusOutlined,
+} from "@ant-design/icons";
+import { useCallback, useState } from "react";
+import type { ConversationSummary } from "../../api/conversationClient";
+
+interface ConversationSidebarProps {
+  conversations: ConversationSummary[];
+  activeId: number | null;
+  collapsed: boolean;
+  onToggle: () => void;
+  onSelect: (id: number) => void;
+  onNew: () => void;
+  onDelete: (id: number) => void;
+  onRename: (id: number, title: string) => void;
+}
+
+function formatRelativeTime(dateStr: string): string {
+  const now = Date.now();
+  const then = new Date(dateStr).getTime();
+  const diff = now - then;
+  if (diff < 60_000) return "刚刚";
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)} 分钟前`;
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)} 小时前`;
+  if (diff < 604_800_000) return `${Math.floor(diff / 86_400_000)} 天前`;
+  return new Date(dateStr).toLocaleDateString("zh-CN");
+}
+
+export default function ConversationSidebar({
+  conversations,
+  activeId,
+  collapsed,
+  onToggle,
+  onSelect,
+  onNew,
+  onDelete,
+  onRename,
+}: ConversationSidebarProps) {
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [editValue, setEditValue] = useState("");
+
+  const startRename = useCallback((id: number, currentTitle: string) => {
+    setEditingId(id);
+    setEditValue(currentTitle);
+  }, []);
+
+  const commitRename = useCallback(() => {
+    if (editingId !== null && editValue.trim()) {
+      onRename(editingId, editValue.trim());
+    }
+    setEditingId(null);
+  }, [editingId, editValue, onRename]);
+
+  return (
+    <aside className={`conversation-sidebar${collapsed ? " is-collapsed" : ""}`}>
+      <div className="conversation-sidebar__header">
+        <button
+          type="button"
+          className="conversation-sidebar__toggle"
+          onClick={onToggle}
+          aria-label={collapsed ? "展开侧边栏" : "收起侧边栏"}
+        >
+          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+        </button>
+        {!collapsed && (
+          <button type="button" className="conversation-sidebar__new" onClick={onNew}>
+            <PlusOutlined /> 新对话
+          </button>
+        )}
+      </div>
+
+      {!collapsed && (
+        <div className="conversation-sidebar__list">
+          {conversations.length === 0 ? (
+            <div className="conversation-sidebar__empty">
+              <MessageOutlined />
+              <span>暂无对话记录</span>
+            </div>
+          ) : (
+            conversations.map((conv) => (
+              <div
+                key={conv.id}
+                className={`conversation-sidebar__item${conv.id === activeId ? " is-active" : ""}`}
+              >
+                {editingId === conv.id ? (
+                  <input
+                    className="conversation-sidebar__rename-input"
+                    value={editValue}
+                    onChange={(e) => setEditValue(e.target.value)}
+                    onBlur={commitRename}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") commitRename();
+                      if (e.key === "Escape") setEditingId(null);
+                    }}
+                    autoFocus
+                  />
+                ) : (
+                  <button
+                    type="button"
+                    className="conversation-sidebar__item-main"
+                    onClick={() => onSelect(conv.id)}
+                  >
+                    <span className="conversation-sidebar__item-title">{conv.title}</span>
+                    <span className="conversation-sidebar__item-time">
+                      {formatRelativeTime(conv.updatedAt)}
+                    </span>
+                  </button>
+                )}
+                <div className="conversation-sidebar__item-actions">
+                  <button
+                    type="button"
+                    aria-label="重命名"
+                    onClick={() => startRename(conv.id, conv.title)}
+                  >
+                    <EditOutlined />
+                  </button>
+                  <button
+                    type="button"
+                    aria-label="删除"
+                    onClick={() => onDelete(conv.id)}
+                  >
+                    <DeleteOutlined />
+                  </button>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      )}
+    </aside>
+  );
+}