@fe-free/core 4.1.40 → 4.1.41

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @fe-free/core
 
+## 4.1.41
+
+### Patch Changes
+
+- feat: some
+  - @fe-free/icons@4.1.41
+  - @fe-free/tool@4.1.41
+
 ## 4.1.40
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "4.1.40",
+  "version": "4.1.41",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -50,8 +50,8 @@
     "i18next-icu": "^2.4.1",
     "react": "^19.2.0",
     "react-i18next": "^16.4.0",
-    "@fe-free/icons": "4.1.40",
-    "@fe-free/tool": "4.1.40"
+    "@fe-free/icons": "4.1.41",
+    "@fe-free/tool": "4.1.41"
   },
   "scripts": {
     "i18n-extract": "rm -rf ./src/locales/zh-CN && npx i18next-cli extract"

package/src/crud/crud.tsx

@@ -129,6 +129,7 @@ function CRUD<DataSource extends Record<string, any> = any, Key extends string |
     if (fullPage) {
       return {
         ...tableProps,
+        rowKey: tableProps.rowKey || 'id',
         scroll: {
           ...getTableScroll(newColumns),
           y: '100%',
@@ -136,7 +137,10 @@ function CRUD<DataSource extends Record<string, any> = any, Key extends string |
       };
     }
 
-    return tableProps;
+    return {
+      ...tableProps,
+      rowKey: tableProps.rowKey || 'id',
+    };
   }, [fullPage, tableProps, newColumns]);
 
   return (
@@ -150,7 +154,6 @@ function CRUD<DataSource extends Record<string, any> = any, Key extends string |
       )}
     >
       <Table<DataSource>
-        rowKey="id"
         {...newTableProps}
         actionRef={actionRef}
         toolBarRender={toolBarRender}

package/src/crud/helper.tsx

@@ -15,7 +15,7 @@ function OperateBtn({
 }) {
   if (disabled) {
     if (operateText) {
-      return <span className="cursor-not-allowed text-lg text-03">{operateText || icon}</span>;
+      return <span className="cursor-not-allowed text-03">{operateText}</span>;
     } else {
       return (
         <Tooltip title={title}>
@@ -27,7 +27,7 @@ function OperateBtn({
 
   if (operateText) {
     return (
-      <span className="cursor-pointer text-lg text-primary" onClick={onClick}>
+      <span className="cursor-pointer text-primary" onClick={onClick}>
         {operateText}
       </span>
     );
@@ -36,7 +36,7 @@ function OperateBtn({
   return (
     <Tooltip title={title}>
       <span className="cursor-pointer text-lg text-primary" onClick={onClick}>
-        {operateText || icon}
+        {icon}
       </span>
     </Tooltip>
   );

package/src/crud/table/index.tsx

@@ -4,8 +4,13 @@ import classNames from 'classnames';
 import { useMemo } from 'react';
 import './style.scss';
 
-interface TableProps<DataSource = any, Params = any, ValueType = 'text'>
-  extends ProTableProps<DataSource, Params, ValueType> {
+interface TableProps<DataSource = any, Params = any, ValueType = 'text'> extends ProTableProps<
+  DataSource,
+  Params,
+  ValueType
+> {
+  // 要求 rowKey 必须存在
+  rowKey: string;
   /** 区别 ProTable columns，默认 search: false */
   columns?: ProTableProps<DataSource, Params, ValueType>['columns'];
 }

package/src/crud/use_operate.tsx

@@ -224,7 +224,7 @@ function useOperate(props, detailProps, actionRef) {
         }
 
         return (
-          <div className="fec-crud-operate-column flex justify-center gap-4">
+          <div className="fec-crud-operate-column flex items-center justify-center gap-4">
             {operateColumnProps?.moreOperator && operateColumnProps.moreOperator(record)}
             {btns}
             {operateColumnProps?.moreOperatorAfter && operateColumnProps.moreOperatorAfter(record)}

package/src/crud_of_pure/crud_of_pure.stories.tsx

@@ -56,6 +56,7 @@ export const Basic: Story = {
       <CRUDOfPure
         actions={['create', 'delete']}
         tableProps={{
+          rowKey: 'id',
           columns,
           request: fakeRequest,
           search: {
@@ -118,6 +119,7 @@ export const WithCreate: Story = {
       <CRUDOfPure
         actions={['create', 'delete']}
         tableProps={{
+          rowKey: 'id',
           columns,
           request: fakeRequest,
           pagination: false,
@@ -179,6 +181,7 @@ export const NoSearch: Story = {
       <CRUDOfPure
         actions={['create', 'delete']}
         tableProps={{
+          rowKey: 'id',
           columns,
           request: fakeRequest,
           pagination: false,
@@ -233,6 +236,7 @@ export const SpecialToolbar: Story = {
         specialToolbar
         actions={['create', 'delete']}
         tableProps={{
+          rowKey: 'id',
           columns,
           request: fakeRequest,
           pagination: false,
@@ -258,7 +262,7 @@ export const SpecialToolbar: Story = {
   },
 };
 
-export const SpecialToolbar2: Story = {
+export const SpecialToolbarWithToolBarRender: Story = {
   render: () => {
     const columns = [
       {
@@ -287,6 +291,7 @@ export const SpecialToolbar2: Story = {
         specialToolbar
         actions={['delete']}
         tableProps={{
+          rowKey: 'id',
           columns,
           request: fakeRequest,
           pagination: false,
@@ -346,6 +351,7 @@ export const FullPage: Story = {
           specialToolbar
           actions={['create', 'delete']}
           tableProps={{
+            rowKey: 'id',
             columns,
             request: fakeRequest,
             search: {

package/src/crud_of_pure/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { useMemo } from 'react';
+import { useEffect, useId, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { CRUDProps } from '../crud';
 import { CRUD } from '../crud';
@@ -14,11 +14,60 @@ interface CRUDOfPureProps<
   specialToolbar?: boolean;
 }
 
+function useSpecialToolbar({ specialToolbar, id }: { specialToolbar?: boolean; id: string }) {
+  useEffect(() => {
+    if (!specialToolbar) return;
+
+    const container = document.querySelector(
+      `.fec-crud-of-pure-${id}.fec-crud-of-pure-special-toolbar`,
+    );
+    if (!container) return;
+
+    const connect = () => {
+      const toolbarRightDiv = container.querySelector('.ant-pro-table-list-toolbar-right > div');
+      const queryFilter = container.querySelector('.ant-pro-query-filter') as HTMLElement | null;
+      if (!toolbarRightDiv || !queryFilter) return null;
+
+      const applyPadding = (width: number) => {
+        // 16 是原本的 padding-right。 20 是预留间隔
+        queryFilter.style.paddingRight = `${width + 16 + 20}px`;
+      };
+
+      const ro = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          applyPadding(entry.contentRect.width);
+        }
+      });
+      ro.observe(toolbarRightDiv);
+
+      applyPadding((toolbarRightDiv as HTMLElement).getBoundingClientRect().width);
+      return () => ro.disconnect();
+    };
+
+    let disconnect: (() => void) | null = connect();
+    if (!disconnect) {
+      const mo = new MutationObserver(() => {
+        disconnect = connect();
+        if (disconnect) mo.disconnect();
+      });
+      mo.observe(container, { childList: true, subtree: true });
+      return () => {
+        mo.disconnect();
+        disconnect?.();
+      };
+    }
+    return disconnect;
+  }, [id, specialToolbar]);
+}
+
 function CRUDOfPure<
   DataSource extends Record<string, any> = any,
   Key extends string | number = string,
 >(props: CRUDOfPureProps<DataSource, Key>) {
+  const id = useId();
+
   const { t } = useTranslation();
+  useSpecialToolbar({ specialToolbar: props.specialToolbar, id });
   const newColumns = props.tableProps.columns?.map((column) => {
     if (column.search) {
       return {
@@ -54,6 +103,7 @@ function CRUDOfPure<
       {...props}
       className={classNames(
         'fec-crud-of-pure',
+        `fec-crud-of-pure-${id}`,
         {
           'fec-crud-of-pure-no-search': noSearch,
           'fec-crud-of-pure-special-toolbar': props.specialToolbar,
@@ -70,7 +120,7 @@ function CRUDOfPure<
           if (typeof props.tableProps.toolBarRender === 'function') {
             originRender = props.tableProps.toolBarRender(...args);
           }
-          return [...originRender, <div key="fake" style={{ height: '32px' }} />];
+          return [...originRender];
         },
       }}
     />

package/src/crud_of_pure/style.scss

@@ -69,6 +69,10 @@
       z-index: 10;
       pointer-events: none;
 
+      .ant-pro-table-list-toolbar-left {
+        margin-block-end: 0;
+      }
+
       .ant-pro-table-list-toolbar-right > div {
         pointer-events: auto;
       }

package/src/index.ts

@@ -52,7 +52,6 @@ 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, PageLayoutTabs } from './page_layout';
 export type { PageLayoutProps, PageLayoutTabsProps } from './page_layout';
 export { Record, RecordArray } from './record';

package/src/markdown/chart.tsx

@@ -1,318 +0,0 @@
-import { Column, Line, Pie, Scatter } from '@ant-design/plots';
-import React, { useMemo } from 'react';
-
-// 类型定义
-interface ChartData {
-  columns: string[];
-  rows: (string | number)[][];
-}
-
-interface ChartConfigBase {
-  chart_type: 'bar' | 'pie' | 'table' | 'scatter';
-  x_field?: string;
-  y_field?: string;
-  angle_field?: string;
-  color_field?: string;
-  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;
-  return (
-    <div className="markdown-body-block-chart">
-      <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 ChartContainer(props: { title: string; children: React.ReactNode }) {
-  const { title, children } = props;
-  return (
-    <div className="markdown-body-block-chart">
-      <div className="markdown-body-block-chart-title">{title}</div>
-      {children}
-    </div>
-  );
-}
-
-// 饼图组件
-function PieChart(props: { data: ChartData; chart: ChartConfig }) {
-  const { data, chart } = props;
-  const { columns, rows } = data;
-  const { angle_field, color_field } = chart;
-
-  if (!angle_field || !color_field) {
-    return <ChartError />;
-  }
-
-  const angleIndex = columns.indexOf(angle_field);
-  const colorIndex = columns.indexOf(color_field);
-
-  if (angleIndex === -1 || colorIndex === -1) {
-    return <ChartError />;
-  }
-
-  // 转换数据格式为 Ant Design Charts 需要的格式
-  const chartData = rows.map((row) => ({
-    [color_field]: row[colorIndex],
-    [angle_field]: Number(row[angleIndex]),
-  }));
-
-  const config = {
-    data: chartData,
-    angleField: angle_field,
-    colorField: color_field,
-    label: {
-      text: angle_field,
-      style: {
-        fontWeight: 'bold',
-      },
-    },
-    legend: {
-      color: {
-        title: false,
-        position: 'right',
-        rowPadding: 5,
-      },
-    },
-  };
-
-  return <Pie {...config} />;
-}
-
-// 折线图组件
-function LineChart(props: { data: ChartData; chart: LineChartConfig }) {
-  const { data, chart } = props;
-  const { columns, rows } = data;
-  const { x_field, y_field } = chart;
-
-  if (!x_field || !y_field) {
-    return <ChartError />;
-  }
-
-  const xIndex = columns.indexOf(x_field);
-  if (xIndex === -1) {
-    return <ChartError />;
-  }
-
-  // 处理 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 />;
-    }
-
-    // 转换数据格式为 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 />;
-    }
-
-    // 转换数据格式为 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} />;
-  }
-}
-
-// 柱状图组件
-function BarChart(props: { data: ChartData; chart: ChartConfig }) {
-  const { data, chart } = props;
-  const { columns, rows } = data;
-  const { x_field, y_field } = chart;
-
-  if (!x_field || !y_field) {
-    return <ChartError />;
-  }
-
-  const xIndex = columns.indexOf(x_field);
-  const yIndex = columns.indexOf(y_field);
-
-  if (xIndex === -1 || yIndex === -1) {
-    return <ChartError />;
-  }
-
-  // 转换数据格式为 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 <Column {...config} />;
-}
-
-function ScatterChart(props: { data: ChartData; chart: ChartConfig }) {
-  const { data, chart } = props;
-  const { columns, rows } = data;
-  const { x_field, y_field } = chart;
-
-  if (!x_field || !y_field) {
-    return <ChartError />;
-  }
-
-  const xIndex = columns.indexOf(x_field);
-  const yIndex = columns.indexOf(y_field);
-
-  if (xIndex === -1 || yIndex === -1) {
-    return <ChartError />;
-  }
-
-  const chartData = rows.map((row) => ({
-    [x_field]: row[xIndex],
-    [y_field]: row[yIndex],
-  }));
-
-  const config = {
-    data: chartData,
-    xField: x_field,
-    yField: y_field,
-  };
-
-  return <Scatter {...config} />;
-}
-
-// 主 ChartBlock 组件
-function ChartBlockBase(props: any) {
-  const { children } = props;
-
-  const chartData = useMemo(() => {
-    try {
-      return JSON.parse(children);
-    } catch (error) {
-      console.error('Failed to parse chart data:', error);
-      return null;
-    }
-  }, [children]);
-
-  if (!chartData) {
-    return <ChartError />;
-  }
-
-  const { data, chart } = chartData;
-  const { chart_type, title } = chart;
-
-  switch (chart_type) {
-    case 'pie':
-      return (
-        <ChartContainer title={title}>
-          <PieChart data={data} chart={chart} />
-        </ChartContainer>
-      );
-    case 'line':
-      return (
-        <ChartContainer title={title}>
-          <LineChart data={data} chart={chart} />
-        </ChartContainer>
-      );
-    case 'bar':
-      return (
-        <ChartContainer title={title}>
-          <BarChart data={data} chart={chart} />
-        </ChartContainer>
-      );
-    case 'scatter':
-      return (
-        <ChartContainer title={title}>
-          <ScatterChart data={data} chart={chart} />
-        </ChartContainer>
-      );
-    case 'table':
-      // 表格类型暂不处理
-      return null;
-    default:
-      return <ChartError>不支持的图表类型：{chart_type}</ChartError>;
-  }
-}
-
-function ChartBlock(props: any) {
-  const { children } = props;
-
-  // 大模型会返回一些奇怪字符，需要去掉
-  // 不间断空格
-  // eslint-disable-next-line no-irregular-whitespace
-  const content = children?.replace(/ /g, '');
-
-  return (
-    <ErrorBoundary>
-      <ChartBlockBase>{content}</ChartBlockBase>
-    </ErrorBoundary>
-  );
-}
-
-export { ChartBlock };

package/src/markdown/code.tsx

@@ -1,42 +0,0 @@
-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;
-  const match = /language-(\w+)/.exec(props.className || '');
-
-  // 如果是 chart 类型的代码块，使用 ChartBlock 组件
-  if (match && match[1] === 'chart') {
-    return <ChartBlock>{children}</ChartBlock>;
-  }
-
-  // 如果是 hmchart 类型的代码块，使用 HMChartBlock 组件
-  if (match && match[1] === 'hmchart') {
-    return <HMChartBlock>{children}</HMChartBlock>;
-  }
-
-  return (
-    <div className="markdown-body-block-code">
-      {match ? (
-        <SyntaxHighlighter
-          {...rest}
-          style={vscDarkPlus}
-          language={match?.[1]}
-          showLineNumbers
-          PreTag="div"
-          wrapLongLines
-        >
-          {children}
-        </SyntaxHighlighter>
-      ) : (
-        <code {...rest} className={className}>
-          {children}
-        </code>
-      )}
-    </div>
-  );
-}
-
-export { CodeBlock };

package/src/markdown/deep_seek.tsx

@@ -1,53 +0,0 @@
-import { DownOutlined, UpOutlined } from '@fe-free/icons';
-import { useState } from 'react';
-
-function DeepSeekBlock(props: { children: string }) {
-  const [show, setShow] = useState(true);
-
-  return (
-    <div className="markdown-body-block-deep-seek mb-3 flex flex-col gap-2 text-[12px] text-03">
-      <div
-        className="cursor-pointer"
-        onClick={() => {
-          setShow((v) => !v);
-        }}
-      >
-        深度思考 {show ? <UpOutlined /> : <DownOutlined />}
-      </div>
-      {show && (
-        <div className="relative pl-[15px]">
-          <div className="top=0 absolute left-0 h-full w-[2px] bg-[#00000014]" />
-          {props.children === '<br/>' ? undefined : props.children}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function processWithDeepSeek(text: string) {
-  // 开始 <think> 才算开始
-  if (!text.startsWith('<think>')) {
-    return text;
-  }
-
-  const [left, right] = text.split('</think>');
-
-  let newText = text;
-
-  // 如果 think 部分是 <think>\n\n</think>，相当于没有，则直接返回 right
-  if (text.startsWith('<think>\n\n</think>')) {
-    newText = right;
-  }
-  // 否则做一些处理
-  else {
-    newText =
-      left
-        .replace('<think>\n', '<think>')
-        .replace('\n</think>', '</think>')
-        .replace(/\n/g, '<br/>') + (right || '');
-  }
-
-  return newText;
-}
-
-export { DeepSeekBlock, processWithDeepSeek };