@fe-free/core 4.1.40 → 4.1.42

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @fe-free/core
 
+## 4.1.42
+
+### Patch Changes
+
+- feat: add valueType CustomMarkdownModal
+  - @fe-free/icons@4.1.42
+  - @fe-free/tool@4.1.42
+
+## 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.42",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -10,6 +10,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "@ant-design/x-markdown": "^2.1.3",
+    "@ant-design/x": "^2.1.3",
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/lang-json": "^6.0.1",
@@ -50,8 +52,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.42",
+    "@fe-free/tool": "4.1.42"
   },
   "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,8 @@ 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 { CustomMarkdown, Markdown } from './markdown';
+export type { CustomMarkdownProps, MarkdownProps } 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

@@ -32,7 +32,7 @@ interface ChartConfig extends ChartConfigBase, ChartConfigLine {}
 function ChartError(props: { children?: React.ReactNode }) {
   const { children } = props;
   return (
-    <div className="markdown-body-block-chart">
+    <div className="fea-markdown-body-block-chart">
       <div style={{ textAlign: 'center', padding: '20px' }}>{children || '图表发生错误'}</div>
     </div>
   );
@@ -62,8 +62,8 @@ class ErrorBoundary extends React.Component {
 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>
+    <div className="fea-markdown-body-block-chart">
+      <div className="fea-markdown-body-block-chart-title">{title}</div>
       {children}
     </div>
   );

package/src/markdown/code.tsx

@@ -1,42 +1,29 @@
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { CodeHighlighter, Mermaid } from '@ant-design/x';
+import type { ComponentProps } from '@ant-design/x-markdown';
+import { memo } from 'react';
 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 || '');
+const CodeComponent = memo((props: ComponentProps) => {
+  const { className, children } = props;
 
-  // 如果是 chart 类型的代码块，使用 ChartBlock 组件
-  if (match && match[1] === 'chart') {
+  const lang = className?.match(/language-(\w+)/)?.[1] || '';
+
+  if (typeof children !== 'string') return null;
+
+  if (lang === 'mermaid') {
+    return <Mermaid>{children}</Mermaid>;
+  }
+
+  if (lang === 'chart') {
     return <ChartBlock>{children}</ChartBlock>;
   }
 
-  // 如果是 hmchart 类型的代码块，使用 HMChartBlock 组件
-  if (match && match[1] === 'hmchart') {
+  if (lang === '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 };
+  return <CodeHighlighter lang={lang}>{children}</CodeHighlighter>;
+});
+
+export { CodeComponent };