Initial commit

2025-12-02 02:06:51 +08:00
commit eb6c0c51fa
37 changed files with 7454 additions and 0 deletions
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -0,0 +1,107 @@
+import { useState, useRef, useCallback } from 'react';
+import { ConfigProvider, Layout, theme, Typography } from 'antd';
+import { ThemeToggle } from './components/ThemeToggle';
+import { InputPanel } from './components/InputPanel';
+import { MindmapPanel } from './components/MindmapPanel';
+import { useAttribute } from './hooks/useAttribute';
+import type { MindmapD3Ref } from './components/MindmapD3';
+
+const { Header, Sider, Content } = Layout;
+const { Title } = Typography;
+
+interface VisualSettings {
+  nodeSpacing: number;
+  fontSize: number;
+}
+
+function App() {
+  const [isDark, setIsDark] = useState(true);
+  const { loading, progress, error, currentResult, history, analyze, loadFromHistory } = useAttribute();
+  const [visualSettings, setVisualSettings] = useState<VisualSettings>({
+    nodeSpacing: 32,
+    fontSize: 14,
+  });
+  const mindmapRef = useRef<MindmapD3Ref>(null);
+
+  const handleAnalyze = async (
+    query: string,
+    model?: string,
+    temperature?: number,
+    chainCount?: number
+  ) => {
+    await analyze(query, model, temperature, chainCount);
+  };
+
+  const handleExpandAll = useCallback(() => {
+    mindmapRef.current?.expandAll();
+  }, []);
+
+  const handleCollapseAll = useCallback(() => {
+    mindmapRef.current?.collapseAll();
+  }, []);
+
+  return (
+    <ConfigProvider
+      theme={{
+        algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
+      }}
+    >
+      <Layout style={{ minHeight: '100vh' }}>
+        <Header
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '0 24px',
+          }}
+        >
+          <Title level={4} style={{ margin: 0, color: isDark ? '#fff' : '#000' }}>
+            Attribute Agent
+          </Title>
+          <ThemeToggle isDark={isDark} onToggle={setIsDark} />
+        </Header>
+        <Layout>
+          <Content
+            style={{
+              padding: 16,
+              height: 'calc(100vh - 64px)',
+              overflow: 'hidden',
+            }}
+          >
+            <MindmapPanel
+              ref={mindmapRef}
+              data={currentResult}
+              loading={loading}
+              error={error}
+              isDark={isDark}
+              visualSettings={visualSettings}
+            />
+          </Content>
+          <Sider
+            width={350}
+            theme={isDark ? 'dark' : 'light'}
+            style={{
+              height: 'calc(100vh - 64px)',
+              overflow: 'auto',
+            }}
+          >
+            <InputPanel
+              loading={loading}
+              progress={progress}
+              history={history}
+              currentResult={currentResult}
+              onAnalyze={handleAnalyze}
+              onLoadHistory={loadFromHistory}
+              onExpandAll={handleExpandAll}
+              onCollapseAll={handleCollapseAll}
+              visualSettings={visualSettings}
+              onVisualSettingsChange={setVisualSettings}
+            />
+          </Sider>
+        </Layout>
+      </Layout>
+    </ConfigProvider>
+  );
+}
+
+export default App;