@fe-free/core 2.3.3 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @fe-free/core
 
+## 2.4.0
+
+### Minor Changes
+
+- feat: add InfiniteList and sleep
+
+### Patch Changes
+
+- Updated dependencies
+  - @fe-free/tool@2.4.0
+
+## 2.3.4
+
+### Patch Changes
+
+- feat: markdown chart
+  - @fe-free/tool@2.3.4
+
 ## 2.3.3
 
 ### Patch Changes

package/package.json

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

package/src/index.ts

@@ -33,6 +33,8 @@ export {
 } from './form';
 export { RequestError, initErrorHandle } from './global/error';
 export { downloadInterceptor } from './global/interceptors';
+export { InfiniteList } from './infinite_list';
+export type { InfiniteListProps } from './infinite_list';
 export { Markdown } from './markdown';
 export { PageLayout } from './page_layout';
 export { routeTool } from './route';

package/src/infinite_list/index.tsx

@@ -0,0 +1,121 @@
+import { Spin } from 'antd';
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+import { useImperativeHandle, useRef, useState } from 'react';
+import { useGlobalInfiniteScroll } from '../ahooks/use_global_infinite_scroll';
+
+interface InfiniteListProps<D, P> {
+  request: (params: { current: number; pageSize: number } & P) => Promise<{
+    data: D[];
+    total: number;
+  }>;
+  renderItem: ({ item, index }: { item: D; index: number }) => ReactNode;
+  params?: P;
+  /** 每页数量 */
+  pageSize: number;
+  /** 定义网格布局 */
+  gridClassName: string;
+  className?: string;
+  actionRef?: React.RefObject<{ reload: () => void }>;
+}
+
+const emptyParams = {};
+
+const InfiniteListBase = <D, P>({
+  request,
+  renderItem,
+  params = emptyParams as P,
+  actionRef,
+  pageSize,
+  gridClassName,
+  className,
+}: InfiniteListProps<D, P>) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const { data, loading, loadingMore, noMore, mutate, reload } = useGlobalInfiniteScroll(
+    async (p) => {
+      // 获得当前页面
+      const current = p?.nextId || 1;
+
+      const res = await request({
+        current,
+        pageSize,
+        ...params,
+      });
+
+      let hasMore = true;
+      // 总数少于当前页数 * 每页数量，则没有更多
+      if (res.total <= current * pageSize) {
+        hasMore = false;
+      }
+
+      return {
+        list: res.data,
+        nextId: hasMore ? current + 1 : undefined,
+      };
+    },
+    {
+      target: ref,
+      isNoMore: (d) => d?.nextId === undefined,
+    },
+  );
+
+  useImperativeHandle(actionRef, () => ({
+    reload: async () => {
+      // 没有数据，相当于重新获取
+      if (!data) {
+        return reload();
+      }
+
+      // 获取全部数据。因为不清楚哪个要更新。
+      const res = await request({
+        ...params,
+        current: 1,
+        pageSize,
+      });
+
+      // 只更新数据
+      data.list = res.data;
+
+      mutate({
+        ...data,
+      });
+    },
+  }));
+
+  return (
+    <div ref={ref} className={classNames('h-full overflow-y-auto', className)}>
+      {loading && (
+        <div className="flex h-full w-full items-center justify-center">
+          <Spin />
+        </div>
+      )}
+      {!loading && (
+        <div className={classNames('grid', gridClassName)}>
+          {data?.list?.map((item, index) => {
+            return <div key={index}>{renderItem({ item, index })}</div>;
+          })}
+        </div>
+      )}
+      <div className="flex w-full items-center justify-center">
+        {noMore && <div className="my-5 text-center text-desc">没有更多数据</div>}
+        {loadingMore && <div className="my-5 text-center text-desc">加载更多数据中...</div>}
+      </div>
+    </div>
+  );
+};
+
+function InfiniteList<D, P>(props: InfiniteListProps<D, P>) {
+  const [reloadCount, setReloadCount] = useState(0);
+
+  useImperativeHandle(props.actionRef, () => ({
+    reload: () => {
+      setReloadCount((prev) => prev + 1);
+    },
+  }));
+
+  return <InfiniteListBase key={reloadCount} {...props} />;
+}
+
+export { InfiniteList };
+export type { InfiniteListProps };

package/src/infinite_list/infinite_list.stories.tsx

@@ -0,0 +1,47 @@
+import { InfiniteList } from '@fe-free/core';
+import { sleep } from '@fe-free/tool';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof InfiniteList> = {
+  title: '@fe-free/core/InfiniteList',
+  component: InfiniteList,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: '无线滚动列表',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InfiniteList>;
+
+export const Resolve: Story = {
+  render: () => {
+    return (
+      <div className="h-[500px]">
+        <InfiniteList
+          request={async ({ current, pageSize }) => {
+            await sleep(500);
+            return {
+              data: new Array(pageSize).fill(0).map((_, index) => index + (current - 1) * pageSize),
+              total: 100,
+            };
+          }}
+          renderItem={({ item }) => {
+            return (
+              <div className="p-2">
+                <div className="h-[100px] bg-red-500">item{item}</div>
+              </div>
+            );
+          }}
+          pageSize={20}
+          gridClassName="grid-cols-3"
+        />
+      </div>
+    );
+  },
+};

package/src/markdown/code.tsx

@@ -1,6 +1,7 @@
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { ChartBlock } from './chart';
+import { HMChartBlock } from './hm_chart';
 
 function CodeBlock(props: any) {
   const { children, className, ...rest } = props;
@@ -11,6 +12,11 @@ function CodeBlock(props: any) {
     return <ChartBlock>{children}</ChartBlock>;
   }
 
+  // 如果是 hmchart 类型的代码块，使用 HMChartBlock 组件
+  if (match && match[1] === 'hmchart') {
+    return <HMChartBlock>{children}</HMChartBlock>;
+  }
+
   return (
     <div className="markdown-body-code-block">
       {match ? (

package/src/markdown/hm_chart.tsx

@@ -0,0 +1,176 @@
+import { Column, Line, Pie, Scatter } from '@ant-design/plots';
+import React, { useMemo } from 'react';
+
+enum EnumType {
+  /** 折线图 */
+  LINE = 'line',
+  /** 柱状图 */
+  BAR = 'bar',
+  /** 饼图 */
+  PIE = 'pie',
+  /** 散点图 */
+  SCATTER = 'scatter',
+}
+
+interface HMChartConfigLine<D> {
+  /** 折线图 */
+  type: EnumType.LINE;
+  /** 标题 */
+  title?: string;
+  /** 就是纯粹的数据 */
+  data: D[];
+  /** 横坐标字段 */
+  xField: keyof D;
+  /** 纵坐标字段 */
+  yField: keyof D;
+  /** 系列字段，多折线图用 */
+  seriesField?: keyof D;
+}
+
+interface HMChartConfigBar<D> {
+  /** 柱状图 */
+  type: EnumType.BAR;
+  /** 标题 */
+  title?: string;
+  /** 就是纯粹的数据 */
+  data: D[];
+  /** 横坐标字段 */
+  xField: keyof D;
+  /** 纵坐标字段 */
+  yField: keyof D;
+  /** 系列字段，多折线图用 */
+  seriesField?: keyof D;
+}
+
+interface HMChartConfigPie<D> {
+  /** 饼图 */
+  type: EnumType.PIE;
+  /** 标题 */
+  title?: string;
+  /** 就是纯粹的数据 */
+  data: D[];
+  /** 角度字段 */
+  angleField: keyof D;
+  /** 颜色字段 */
+  colorField: keyof D;
+}
+
+interface HMChartConfigScatter<D> {
+  /** 散点图 */
+  type: EnumType.SCATTER;
+  /** 标题 */
+  title?: string;
+  /** 就是纯粹的数据 */
+  data: D[];
+  /** 横坐标字段 */
+  xField: keyof D;
+  /** 纵坐标字段 */
+  yField: keyof D;
+  /** 颜色字段 */
+  colorField?: keyof D;
+}
+
+type HMChartConfig<D> =
+  | HMChartConfigLine<D>
+  | HMChartConfigBar<D>
+  | HMChartConfigPie<D>
+  | HMChartConfigScatter<D>;
+
+// 错误处理组件
+function ChartError(props: { children?: React.ReactNode }) {
+  const { children } = props;
+  return (
+    <div className="markdown-body-hmchart-block">
+      <div style={{ textAlign: 'center', padding: '20px' }}>{children || '图表发生错误'}</div>
+    </div>
+  );
+}
+
+class ErrorBoundary extends React.Component {
+  state = { hasError: false };
+
+  static getDerivedStateFromError(error) {
+    console.error('ErrorBoundary:', error);
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, info) {
+    console.error('Error caught:', error, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <ChartError />;
+    }
+    return this.props.children;
+  }
+}
+
+function ChartOfLine(props: { config: HMChartConfigLine<any> }) {
+  return <Line colorField={props.config.seriesField} {...props.config} />;
+}
+
+function ChartOfBar(props: { config: HMChartConfigBar<any> }) {
+  return <Column colorField={props.config.seriesField} {...props.config} />;
+}
+
+function ChartOfPie(props: { config: HMChartConfigPie<any> }) {
+  return <Pie {...props.config} />;
+}
+
+function ChartOfScatter(props: { config: HMChartConfigScatter<any> }) {
+  return <Scatter {...props.config} />;
+}
+
+// 主 ChartBlock 组件
+function HMChartBlockBase(props: any) {
+  const { children } = props;
+
+  const chartConfig = useMemo(() => {
+    try {
+      return JSON.parse(children);
+    } catch (error) {
+      console.error('Failed to parse chart data:', error);
+      return null;
+    }
+  }, [children]);
+
+  if (!chartConfig) {
+    return <ChartError />;
+  }
+
+  const { type, ...config } = chartConfig;
+
+  switch (type) {
+    case EnumType.LINE:
+      return <ChartOfLine config={config} />;
+
+    case EnumType.BAR:
+      return <ChartOfBar config={config} />;
+
+    case EnumType.PIE:
+      return <ChartOfPie config={config} />;
+
+    case EnumType.SCATTER:
+      return <ChartOfScatter config={config} />;
+
+    default:
+      return <ChartError>不支持的图表类型：{type}</ChartError>;
+  }
+}
+
+function HMChartBlock(props: any) {
+  const { children } = props;
+
+  // eslint-disable-next-line no-irregular-whitespace
+  const content = children?.replace(/ /g, '');
+
+  return (
+    <ErrorBoundary>
+      <HMChartBlockBase>{content}</HMChartBlockBase>
+    </ErrorBoundary>
+  );
+}
+
+export { HMChartBlock };
+export type { HMChartConfig };

package/src/markdown/markdown.stories.tsx

@@ -141,8 +141,7 @@ export const DeepSeekPending: Story = {
 
 export const Chart: Story = {
   args: {
-    children: `这是一个使用 @ant-design/plots 的 chart 示例
-
+    children: `
 ## 折线图示例
 
 \`\`\`chart
@@ -320,3 +319,179 @@ export const Chart: Story = {
 `,
   },
 };
+
+export const HMChart: Story = {
+  args: {
+    children: `
+类型定义见：https://github.com/frontend-free/free/blob/main/packages/core/src/markdown/hm_chart.tsx
+
+## 折线图示例
+
+\`\`\`hmchart
+{
+  "title": "趋势变化",
+  "type": "line",
+  "data": [
+    { "year": "1991", "value": 3 },
+    { "year": "1992", "value": 4 },
+    { "year": "1993", "value": 3.5 }
+  ],
+  "xField": "year",
+  "yField": "value"
+}
+\`\`\`
+
+\`\`\`hmchart
+{
+  "title": "多条趋势变化",
+  "type": "line",
+  "data": [
+    { "year": "1991", "type": "A", "value": 3 },
+    { "year": "1991", "type": "B", "value": 4 },
+    { "year": "1992", "type": "A", "value": 4 },
+    { "year": "1992", "type": "B", "value": 4.5 },
+    { "year": "1993", "type": "A", "value": 3.5 },
+    { "year": "1993", "type": "B", "value": 6 }
+  ],
+  "xField": "year",
+  "yField": "value",
+  "seriesField": "type"
+}
+\`\`\`
+
+\`\`\`hmchart
+{
+  "title": "柱状图",
+  "type": "bar",
+  "data": [
+    { "year": "1991", "value": 3 },
+    { "year": "1992", "value": 4 },
+    { "year": "1993", "value": 3.5 }
+  ],
+  "xField": "year",
+  "yField": "value"
+}
+\`\`\`
+
+\`\`\`hmchart
+{
+  "title": "多条柱状图",
+  "type": "bar",
+  "data": [
+    { "year": "1991", "type": "A", "value": 3 },
+    { "year": "1991", "type": "B", "value": 4 },
+    { "year": "1992", "type": "A", "value": 4 },
+    { "year": "1992", "type": "B", "value": 4.5 },
+    { "year": "1993", "type": "A", "value": 3.5 },
+    { "year": "1993", "type": "B", "value": 6 }
+  ],
+  "xField": "year",
+  "yField": "value",
+  "seriesField": "type"
+}
+\`\`\`
+
+\`\`\`hmchart
+{
+  "title": "饼图",
+  "type": "pie",
+  "data": [
+    { "year": "1991", "value": 3 },
+    { "year": "1992", "value": 4 },
+    { "year": "1993", "value": 3.5 }
+  ],
+  "angleField": "value",
+  "colorField": "year"
+}
+\`\`\`
+
+\`\`\`hmchart
+{
+  "title": "散点图示例",
+  "type": "scatter",
+  "data": [
+    {
+        "gender": "female",
+        "height": 161.2,
+        "weight": 51.6
+    },
+    {
+        "gender": "male",
+        "height": 167.5,
+        "weight": 59
+    },
+    {
+        "gender": "female",
+        "height": 159.5,
+        "weight": 49.2
+    },
+    {
+        "gender": "male",
+        "height": 157,
+        "weight": 63
+    },
+    {
+        "gender": "male",
+        "height": 155.8,
+        "weight": 53.6
+    },
+    {
+        "gender": "female",
+        "height": 170,
+        "weight": 59
+    },
+    {
+        "gender": "female",
+        "height": 159.1,
+        "weight": 47.6
+    },
+    {
+        "gender": "female",
+        "height": 166,
+        "weight": 69.8
+    },
+    {
+        "gender": "female",
+        "height": 176.2,
+        "weight": 66.8
+    },
+    {
+        "gender": "female",
+        "height": 160.2,
+        "weight": 75.2
+    },
+    {
+        "gender": "female",
+        "height": 172.5,
+        "weight": 55.2
+    },
+    {
+        "gender": "female",
+        "height": 170.9,
+        "weight": 54.2
+    },
+    {
+        "gender": "female",
+        "height": 172.9,
+        "weight": 62.5
+    },
+    {
+        "gender": "male",
+        "height": 153.4,
+        "weight": 42
+    },
+    {
+        "gender": "male",
+        "height": 160,
+        "weight": 50
+    }
+  ],
+  "xField": "height",
+  "yField": "weight",
+  "colorField": "gender"
+}
+\`\`\`
+
+`,
+  },
+};