Major architectural shift from Next.js to a lightweight Vite + React SPA model ("Puppet Architecture") to better support real-time workflow visualization and strict type safety.
Key Changes:
1. **Architecture & Build**:
- Initialized Vite + React + TypeScript project.
- Configured Tailwind CSS v4 and Shadcn UI.
- Archived legacy Next.js frontend to 'frontend/archive/v2_nextjs'.
2. **Core Features**:
- **Dashboard**: Implemented startup page with Symbol, Market, and Template selection.
- **Report Page**:
- **Workflow Visualization**: Integrated ReactFlow to show dynamic DAG of analysis tasks.
- **Real-time Status**: Implemented Mock SSE logic to simulate task progress, logs, and status changes.
- **Multi-Tab Interface**: Dynamic tabs for 'Overview', 'Fundamental Data', and analysis modules.
- **Streaming Markdown**: Enabled typewriter-style streaming rendering for analysis reports using 'react-markdown'.
- **Config Page**: Implemented settings for AI Providers, Data Sources, and Templates using TanStack Query.
3. **Documentation**:
- Created v2.0 User Guide ('docs/1_requirements/20251122_[Active]_user-guide_v2.md').
- Implemented 'DocsPage' in frontend to render the user guide directly within the app.
4. **Backend Alignment**:
- Created 'docs/frontend/backend_todos.md' outlining necessary backend adaptations (OpenAPI, Progress tracking).
This commit establishes the full frontend 'shell' ready for backend integration.
63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
import { promises as fs } from 'fs';
|
|
import path from 'path';
|
|
import ReactMarkdown from 'react-markdown';
|
|
import remarkGfm from 'remark-gfm';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
|
|
async function getMarkdownContent() {
|
|
// process.cwd() is the root of the Next.js project (the 'frontend' directory)
|
|
const root = path.join(process.cwd(), '..', 'docs');
|
|
const candidates = [
|
|
path.join(root, '1_requirements', '20251109_[Active]_user-guide.md'),
|
|
path.join(root, '1_requirements', '20251108_[Active]_requirements.md'),
|
|
path.join(root, '2_architecture', '20251116_[Active]_system_architecture.md'),
|
|
];
|
|
for (const p of candidates) {
|
|
try {
|
|
const content = await fs.readFile(p, 'utf8');
|
|
return content;
|
|
} catch {
|
|
// try next
|
|
}
|
|
}
|
|
return [
|
|
'# 文档加载失败',
|
|
'',
|
|
'未找到以下任意文档:',
|
|
'- docs/1_requirements/20251109_[Active]_user-guide.md',
|
|
'- docs/1_requirements/20251108_[Active]_requirements.md',
|
|
'- docs/2_architecture/20251116_[Active]_system_architecture.md',
|
|
].join('\n');
|
|
}
|
|
|
|
export default async function DocsPage() {
|
|
const content = await getMarkdownContent();
|
|
|
|
return (
|
|
<div className="container mx-auto py-6 space-y-6">
|
|
<header className="space-y-2">
|
|
<h1 className="text-3xl font-bold">用户使用文档</h1>
|
|
<p className="text-muted-foreground">
|
|
欢迎使用基本面分析系统。本文档将帮助您快速上手并充分利用系统的各项功能。
|
|
</p>
|
|
</header>
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<article className="markdown-body" style={{
|
|
boxSizing: 'border-box',
|
|
minWidth: '200px',
|
|
maxWidth: '980px',
|
|
margin: '0 auto',
|
|
padding: '0'
|
|
}}>
|
|
<ReactMarkdown
|
|
remarkPlugins={[remarkGfm]}
|
|
>
|
|
{content}
|
|
</ReactMarkdown>
|
|
</article>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
} |