@fe-free/core 2.1.3 → 2.1.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @fe-free/core
 
+## 2.1.5
+
+### Patch Changes
+
+- feat: json modal
+  - @fe-free/tool@2.1.5
+
+## 2.1.4
+
+### Patch Changes
+
+- feat: chat
+  - @fe-free/tool@2.1.4
+
 ## 2.1.3
 
 ### Patch Changes

package/package.json

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

package/src/markdown/chart.tsx

@@ -7,8 +7,8 @@ interface ChartData {
   rows: (string | number)[][];
 }
 
-interface ChartConfig {
-  chart_type: 'line' | 'bar' | 'pie' | 'table' | 'scatter';
+interface ChartConfigBase {
+  chart_type: 'bar' | 'pie' | 'table' | 'scatter';
   x_field?: string;
   y_field?: string;
   angle_field?: string;
@@ -16,6 +16,18 @@ interface ChartConfig {
   title: string;
 }
 
+interface LineChartConfig {
+  chart_type: 'line';
+  x_field?: string;
+  y_field: string | string[];
+  angle_field?: string;
+  color_field?: string;
+  title: string;
+}
+
+// @ts-ignore
+interface ChartConfig extends ChartConfigBase, ChartConfigLine {}
+
 // 错误处理组件
 function ChartError(props: { children?: React.ReactNode }) {
   const { children } = props;
@@ -29,7 +41,8 @@ function ChartError(props: { children?: React.ReactNode }) {
 class ErrorBoundary extends React.Component {
   state = { hasError: false };
 
-  static getDerivedStateFromError() {
+  static getDerivedStateFromError(error) {
+    console.error('ErrorBoundary:', error);
     return { hasError: true };
   }
 
@@ -102,7 +115,7 @@ function PieChart(props: { data: ChartData; chart: ChartConfig }) {
 }
 
 // 折线图组件
-function LineChart(props: { data: ChartData; chart: ChartConfig }) {
+function LineChart(props: { data: ChartData; chart: LineChartConfig }) {
   const { data, chart } = props;
   const { columns, rows } = data;
   const { x_field, y_field } = chart;
@@ -112,25 +125,64 @@ function LineChart(props: { data: ChartData; chart: ChartConfig }) {
   }
 
   const xIndex = columns.indexOf(x_field);
-  const yIndex = columns.indexOf(y_field);
-
-  if (xIndex === -1 || yIndex === -1) {
+  if (xIndex === -1) {
     return <ChartError />;
   }
 
-  // 转换数据格式为 Ant Design Charts 需要的格式
-  const chartData = rows.map((row) => ({
-    [x_field]: row[xIndex],
-    [y_field]: Number(row[yIndex]),
-  }));
+  // 处理 y_field 为数组的情况
+  if (Array.isArray(y_field)) {
+    // 验证所有 y_field 是否存在于 columns 中
+    const yIndices = y_field.map((field) => columns.indexOf(field));
+    if (yIndices.some((index) => index === -1)) {
+      return <ChartError />;
+    }
 
-  const config = {
-    data: chartData,
-    xField: x_field,
-    yField: y_field,
-  };
+    // 转换数据格式为 Ant Design Charts 需要的格式（长数据格式）
+    const chartData: any[] = [];
+    rows.forEach((row) => {
+      y_field.forEach((field, index) => {
+        const value = row[yIndices[index]];
+        if (value !== null && value !== undefined) {
+          chartData.push({
+            [x_field]: row[xIndex],
+            type: field,
+            value: Number(value),
+          });
+        }
+      });
+    });
+
+    const config = {
+      data: chartData,
+      xField: x_field,
+      yField: 'value',
+      seriesField: 'type',
+    };
+
+    console.log('config', config);
+
+    return <Line {...config} />;
+  } else {
+    // 处理单个 y_field 的情况（保持向后兼容）
+    const yIndex = columns.indexOf(y_field);
+    if (yIndex === -1) {
+      return <ChartError />;
+    }
 
-  return <Line {...config} />;
+    // 转换数据格式为 Ant Design Charts 需要的格式
+    const chartData = rows.map((row) => ({
+      [x_field]: row[xIndex],
+      [y_field]: Number(row[yIndex]),
+    }));
+
+    const config = {
+      data: chartData,
+      xField: x_field,
+      yField: y_field,
+    };
+
+    return <Line {...config} />;
+  }
 }
 
 // 柱状图组件
@@ -253,7 +305,8 @@ function ChartBlock(props: any) {
 
   // 大模型会返回一些奇怪字符，需要去掉
   // 不间断空格
-  const content = children.replace(/ /g, '');
+  // eslint-disable-next-line no-irregular-whitespace
+  const content = children?.replace(/ /g, '');
 
   return (
     <ErrorBoundary>

package/src/markdown/markdown.stories.tsx

@@ -166,6 +166,30 @@ export const Chart: Story = {
 }
 \`\`\`
 
+多条折线
+
+\`\`\`chart
+{
+  "data": {
+    "columns": ["quarter", "L'Oreal", "P&G", "Proya"],
+    "rows": [
+      ["FY23-Q4/23-Q2", 8, 7, null],
+      ["FY24-Q1/23-Q3", 7, 6, null],
+      ["FY24-Q2/23-Q4", 4, 3, null],
+      ["FY24-Q3/24-Q1", 3, null, null],
+      ["FY24-Q4/24-Q2", null, null, null],
+      ["FY25-Q1/24-Q34",null,null,null]
+    ]
+  },
+  "chart": {
+    "chart_type": "line",
+    "x_field": "quarter",
+    "y_field": ["L'Oreal", "P&G","Proya"],
+    "title": "欧莱雅、宝洁及珀莱雅增长率变化趋势"
+  }
+}
+\`\`\`
+
 ## 柱状图示例
 
 \`\`\`chart
@@ -189,6 +213,7 @@ export const Chart: Story = {
 }
 \`\`\`
 
+
 ## 饼图示例
 
 \`\`\`chart

package/src/table/index.tsx

@@ -52,8 +52,6 @@ function Table<
     };
   }
 
-  console.log('newSearch', newSearch);
-
   return (
     <ProTable<DataSource, Params>
       cardBordered

package/src/value_type_map/index.tsx

@@ -1,6 +1,7 @@
 import type { ProRenderFieldPropsType } from '@ant-design/pro-components';
 import { dateRender } from './date';
 import { jsonRender } from './json';
+import { jsonModalRender } from './json_modal';
 
 enum CustomValueTypeEnum {
   /** 渲染时间 + 搜索日期范围 */
@@ -9,6 +10,8 @@ enum CustomValueTypeEnum {
   CustomDateAndDateRange = 'CustomDateAndDateRange',
   /** JSON */
   CustomJSON = 'CustomJSON',
+  /** JSON Modal */
+  CustomJSONModal = 'CustomJSONModal',
 }
 
 const customValueTypeMap: Record<string, ProRenderFieldPropsType> = {
@@ -24,6 +27,10 @@ const customValueTypeMap: Record<string, ProRenderFieldPropsType> = {
     render: jsonRender.render,
     renderFormItem: jsonRender.renderFormItem,
   },
+  [CustomValueTypeEnum.CustomJSONModal]: {
+    render: jsonModalRender.render,
+    renderFormItem: jsonModalRender.renderFormItem,
+  },
 };
 
-export { customValueTypeMap, CustomValueTypeEnum };
+export { CustomValueTypeEnum, customValueTypeMap };

package/src/value_type_map/json_modal.tsx

@@ -0,0 +1,56 @@
+import type { ProFormItemProps } from '@ant-design/pro-components';
+import { Modal } from 'antd';
+import { useState } from 'react';
+import type { EditorJSONProps } from '../editor_json';
+import { EditorJSON } from '../editor_json';
+
+interface JSONModalProps extends EditorJSONProps {
+  /** 默认 查看 */
+  title?: string;
+}
+
+function Render(text, props: ProFormItemProps<JSONModalProps>) {
+  const { title = '查看' } = props.fieldProps || {};
+
+  const [show, setShow] = useState(false);
+
+  let jsonText = text;
+
+  if (!text) {
+    return <div>-</div>;
+  }
+
+  try {
+    jsonText = JSON.stringify(JSON.parse(text), null, 2);
+  } catch (e) {
+    console.error(e, text);
+  }
+
+  return (
+    <>
+      <a onClick={() => setShow(true)}>{title}</a>
+      <Modal
+        title={title}
+        open={show}
+        onCancel={() => setShow(false)}
+        onOk={() => setShow(false)}
+        cancelButtonProps={{
+          style: {
+            display: 'none',
+          },
+        }}
+      >
+        <div className="h-[500px]">
+          <EditorJSON value={jsonText} readonly />
+        </div>
+      </Modal>
+    </>
+  );
+}
+
+const jsonModalRender = {
+  render: Render,
+  renderFormItem: () => <></>,
+};
+
+export { jsonModalRender };

package/src/value_type_map/value_type_map.stories.tsx

@@ -76,6 +76,12 @@ const Table = () => {
       ellipsis: true,
       valueType: CustomValueTypeEnum.CustomJSON,
     },
+    {
+      title: 'jsonModal',
+      dataIndex: 'jsonText',
+      ellipsis: true,
+      valueType: CustomValueTypeEnum.CustomJSONModal,
+    },
   ];
 
   return (