Sakurasan
912a224b6b
- 后端：AI分析服务、工具调用、定时任务 - 前端：报告列表、详情页、Mermaid图表支持 - 支持OpenAI API兼容模型 - 收盘后自动分析生成报告
54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
import mermaid from "mermaid";
|
|
|
|
mermaid.initialize({
|
|
startOnLoad: false,
|
|
theme: "dark",
|
|
themeVariables: {
|
|
primaryColor: "#21262d",
|
|
primaryTextColor: "#e6edf3",
|
|
primaryBorderColor: "#30363d",
|
|
lineColor: "#58a6ff",
|
|
secondaryColor: "#161b22",
|
|
tertiaryColor: "#0d1117",
|
|
fontFamily: "inherit",
|
|
fontSize: "14px",
|
|
},
|
|
});
|
|
|
|
interface MermaidProps {
|
|
chart: string;
|
|
}
|
|
|
|
export function Mermaid({ chart }: MermaidProps) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const [svg, setSvg] = useState("");
|
|
const [error, setError] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (!ref.current) return;
|
|
const id = `mermaid-${Math.random().toString(36).slice(2, 9)}`;
|
|
|
|
mermaid
|
|
.render(id, chart)
|
|
.then(({ svg }) => setSvg(svg))
|
|
.catch((err) => setError(err.message || "图表渲染失败"));
|
|
}, [chart]);
|
|
|
|
if (error) {
|
|
return (
|
|
<pre className="bg-[#0d1117] border border-[#f85149]/30 rounded p-3 text-sm text-[#f85149] overflow-x-auto">
|
|
{error}
|
|
</pre>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className="bg-[#0d1117] rounded p-3 overflow-x-auto my-2 flex justify-center [&>svg]:max-w-full"
|
|
dangerouslySetInnerHTML={{ __html: svg }}
|
|
/>
|
|
);
|
|
}
|