feat:前端新增初版知识库管理页面

2025-11-30 19:27:01 +08:00
parent 9614899171
commit c94cc00138
40 changed files with 3034 additions and 1024 deletions
@@ -0,0 +1,89 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import 'katex/dist/katex.min.css';
+import RemarkMath from 'remark-math';
+import RemarkBreaks from 'remark-breaks';
+import RehypeKatex from 'rehype-katex';
+import RemarkGfm from 'remark-gfm';
+import '../../styles/components/chat-with-llm/markdown.css';
+
+interface MarkdownProps {
+    content: string;
+    className?: string;
+}
+
+/**
+ * Markdown 渲染组件
+ * 使用 react-markdown 库进行标准 Markdown 解析，支持流式渲染
+ */
+export default function Markdown({ content, className = '' }: MarkdownProps) {
+    // console.log('🎨 [Markdown] 渲染组件:', {
+    //     contentLength: content?.length || 0,
+    //     contentPreview: content?.substring(0, 100) + (content && content.length > 100 ? '...' : ''),
+    //     className,
+    //     hasContent: !!content
+    // });
+
+    if (!content) {
+        console.log('⚠️ [Markdown] 内容为空，返回null');
+        return null;
+    }
+
+    return (
+        <div className={`markdown-content ${className}`}>
+            <ReactMarkdown
+                remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
+                rehypePlugins={[RehypeKatex]}
+                components={{
+                    code({ className, children, ...props }: any) {
+                        const match = /language-(\w+)/.exec(className || '');
+                        const isCodeBlock = match;
+
+                        if (isCodeBlock) {
+                            // 代码块
+                            return (
+                                <pre style={{
+                                    backgroundColor: '#f6f8fa',
+                                    padding: '16px',
+                                    borderRadius: '6px',
+                                    overflow: 'auto',
+                                    fontSize: '14px',
+                                    lineHeight: '1.45',
+                                    margin: '1em 0'
+                                }}>
+                                    <code style={{
+                                        backgroundColor: 'transparent',
+                                        padding: '0',
+                                        fontSize: 'inherit',
+                                        fontFamily: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace'
+                                    }}>
+                                        {String(children).replace(/\n$/, '')}
+                                    </code>
+                                </pre>
+                            );
+                        } else {
+                            // 内联代码
+                            return (
+                                <code
+                                    className={className}
+                                    style={{
+                                        backgroundColor: 'rgba(175, 184, 193, 0.2)',
+                                        padding: '0.2em 0.4em',
+                                        borderRadius: '3px',
+                                        fontSize: '85%',
+                                        fontFamily: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace'
+                                    }}
+                                    {...props}
+                                >
+                                    {children}
+                                </code>
+                            );
+                        }
+                    },
+                }}
+            >
+                {content}
+            </ReactMarkdown>
+        </div>
+    );
+}