@fe-free/core 2.0.4 → 2.0.6

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @fe-free/core
 
+## 2.0.6
+
+### Patch Changes
+
+- feat: md chart
+  - @fe-free/tool@2.0.6
+
+## 2.0.5
+
+### Patch Changes
+
+- feat: chat
+  - @fe-free/tool@2.0.5
+
 ## 2.0.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -38,7 +38,7 @@
     "remark-gfm": "^4.0.1",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "2.0.4"
+    "@fe-free/tool": "2.0.6"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "^2.8.7",

package/src/markdown/{chat.tsx → chart.tsx}

@@ -17,10 +17,10 @@ interface ChartConfig {
 }
 
 // 错误处理组件
-function ChatError(props: { children?: React.ReactNode }) {
+function ChartError(props: { children?: React.ReactNode }) {
   const { children } = props;
   return (
-    <div className="markdown-body-chat-block">
+    <div className="markdown-body-chart-block">
       <div style={{ textAlign: 'center', padding: '20px' }}>{children || '图表发生错误'}</div>
     </div>
   );
@@ -39,7 +39,7 @@ class ErrorBoundary extends React.Component {
 
   render() {
     if (this.state.hasError) {
-      return <ChatError />;
+      return <ChartError />;
     }
     return this.props.children;
   }
@@ -49,8 +49,8 @@ class ErrorBoundary extends React.Component {
 function ChartContainer(props: { title: string; children: React.ReactNode }) {
   const { title, children } = props;
   return (
-    <div className="markdown-body-chat-block">
-      <div className="markdown-body-chat-block-title">{title}</div>
+    <div className="markdown-body-chart-block">
+      <div className="markdown-body-chart-block-title">{title}</div>
       {children}
     </div>
   );
@@ -63,14 +63,14 @@ function PieChart(props: { data: ChartData; chart: ChartConfig }) {
   const { angle_field, color_field } = chart;
 
   if (!angle_field || !color_field) {
-    return <ChatError />;
+    return <ChartError />;
   }
 
   const angleIndex = columns.indexOf(angle_field);
   const colorIndex = columns.indexOf(color_field);
 
   if (angleIndex === -1 || colorIndex === -1) {
-    return <ChatError />;
+    return <ChartError />;
   }
 
   // 转换数据格式为 Ant Design Charts 需要的格式
@@ -108,14 +108,14 @@ function LineChart(props: { data: ChartData; chart: ChartConfig }) {
   const { x_field, y_field } = chart;
 
   if (!x_field || !y_field) {
-    return <ChatError />;
+    return <ChartError />;
   }
 
   const xIndex = columns.indexOf(x_field);
   const yIndex = columns.indexOf(y_field);
 
   if (xIndex === -1 || yIndex === -1) {
-    return <ChatError />;
+    return <ChartError />;
   }
 
   // 转换数据格式为 Ant Design Charts 需要的格式
@@ -140,14 +140,14 @@ function BarChart(props: { data: ChartData; chart: ChartConfig }) {
   const { x_field, y_field } = chart;
 
   if (!x_field || !y_field) {
-    return <ChatError />;
+    return <ChartError />;
   }
 
   const xIndex = columns.indexOf(x_field);
   const yIndex = columns.indexOf(y_field);
 
   if (xIndex === -1 || yIndex === -1) {
-    return <ChatError />;
+    return <ChartError />;
   }
 
   // 转换数据格式为 Ant Design Charts 需要的格式
@@ -171,14 +171,14 @@ function ScatterChart(props: { data: ChartData; chart: ChartConfig }) {
   const { x_field, y_field } = chart;
 
   if (!x_field || !y_field) {
-    return <ChatError />;
+    return <ChartError />;
   }
 
   const xIndex = columns.indexOf(x_field);
   const yIndex = columns.indexOf(y_field);
 
   if (xIndex === -1 || yIndex === -1) {
-    return <ChatError />;
+    return <ChartError />;
   }
 
   const chartData = rows.map((row) => ({
@@ -195,24 +195,24 @@ function ScatterChart(props: { data: ChartData; chart: ChartConfig }) {
   return <Scatter {...config} />;
 }
 
-// 主 ChatBlock 组件
-function ChatBlockBase(props: any) {
+// 主 ChartBlock 组件
+function ChartBlockBase(props: any) {
   const { children } = props;
 
-  const chatData = useMemo(() => {
+  const chartData = useMemo(() => {
     try {
       return JSON.parse(children);
     } catch (error) {
-      console.error('Failed to parse chat data:', error);
+      console.error('Failed to parse chart data:', error);
       return null;
     }
   }, [children]);
 
-  if (!chatData) {
-    return <ChatError />;
+  if (!chartData) {
+    return <ChartError />;
   }
 
-  const { data, chart } = chatData;
+  const { data, chart } = chartData;
   const { chart_type, title } = chart;
 
   switch (chart_type) {
@@ -244,18 +244,18 @@ function ChatBlockBase(props: any) {
       // 表格类型暂不处理
       return null;
     default:
-      return <ChatError>不支持的图表类型：{chart_type}</ChatError>;
+      return <ChartError>不支持的图表类型：{chart_type}</ChartError>;
   }
 }
 
-function ChatBlock(props: any) {
+function ChartBlock(props: any) {
   const { children } = props;
 
   return (
     <ErrorBoundary>
-      <ChatBlockBase>{children}</ChatBlockBase>
+      <ChartBlockBase>{children}</ChartBlockBase>
     </ErrorBoundary>
   );
 }
 
-export { ChatBlock };
+export { ChartBlock };

package/src/markdown/code.tsx

@@ -1,14 +1,14 @@
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import { ChatBlock } from './chat';
+import { ChartBlock } from './chart';
 
 function CodeBlock(props: any) {
   const { children, className, ...rest } = props;
   const match = /language-(\w+)/.exec(props.className || '');
 
-  // 如果是 chat 类型的代码块，使用 ChatBlock 组件
-  if (match && match[1] === 'chat') {
-    return <ChatBlock>{children}</ChatBlock>;
+  // 如果是 chart 类型的代码块，使用 ChartBlock 组件
+  if (match && match[1] === 'chart') {
+    return <ChartBlock>{children}</ChartBlock>;
   }
 
   return (

package/src/markdown/markdown.stories.tsx

@@ -139,13 +139,13 @@ export const DeepSeekPending: Story = {
   },
 };
 
-export const Chat: Story = {
+export const Chart: Story = {
   args: {
-    children: `这是一个使用 @ant-design/plots 的 chat 示例
+    children: `这是一个使用 @ant-design/plots 的 chart 示例
 
 ## 折线图示例
 
-\`\`\`chat
+\`\`\`chart
 {
   "data": {
     "columns": ["time", "amount"],
@@ -168,7 +168,7 @@ export const Chat: Story = {
 
 ## 柱状图示例
 
-\`\`\`chat
+\`\`\`chart
 {
   "data": {
     "columns": ["time", "amount"],
@@ -191,7 +191,7 @@ export const Chat: Story = {
 
 ## 饼图示例
 
-\`\`\`chat
+\`\`\`chart
 {
   "data": {
     "columns": ["category", "sales"],
@@ -213,7 +213,7 @@ export const Chat: Story = {
 
 ## 散点图示例
 
-\`\`\`chat
+\`\`\`chart
 {
   "data": {
     "columns": ["width", "height"],
@@ -236,7 +236,7 @@ export const Chat: Story = {
 
 ### JSON 解析错误
 
-\`\`\`chat
+\`\`\`chart
 {
   "data": {
     "columns": ["time", "amount"],
@@ -255,7 +255,7 @@ export const Chat: Story = {
 
 ### 字段不存在错误
 
-\`\`\`chat
+\`\`\`chart
 {
   "data": {
     "columns": ["time", "amount"],
@@ -275,7 +275,7 @@ export const Chat: Story = {
 
 ### 不支持的图表类型
 
-\`\`\`chat
+\`\`\`chart
 {
   "data": {
     "columns": ["time", "amount"],

package/src/markdown/style.scss

@@ -4,19 +4,22 @@
   }
 
   .markdown-body-code-block {
+    margin: 0.5rem 0;
+
     & > div {
       margin: 0 !important;
     }
   }
 
-  .markdown-body-chat-block {
+  .markdown-body-chart-block {
     background: white;
     border-radius: 6px;
+    margin: 0.5rem;
 
-    .markdown-body-chat-block-title {
+    .markdown-body-chart-block-title {
       font-size: 16px;
       font-weight: bold;
-      margin-bottom: 10px;
+      padding: 10px;
     }
   }
 }