@fe-free/core 5.0.0 → 6.0.2

package/src/crud/table/style.scss

@@ -5,25 +5,14 @@
     }
   }
 
-  .ant-table-container {
-    border-inline-start-color: transparent !important;
-
-    .ant-table-thead {
-      & > tr > th:last-child {
-        border-inline-end-color: transparent !important;
-      }
-    }
-
-    .ant-table-row {
-      & > td:last-child {
-        border-inline-end-color: transparent !important;
-      }
-    }
-  }
-
   .ant-pagination {
     // gap: 8px;
 
+    // 奇怪的问题。 full page 的时候会有滚动条。 需要 overflow: hidden;
+    & > li {
+      overflow: hidden;
+    }
+
     .ant-pagination-options {
       order: -1;
       margin-right: 8px;
@@ -32,17 +21,17 @@
     .ant-pagination-prev,
     .ant-pagination-next {
       .ant-pagination-item-link {
-        border: 1px solid #e2e7f0;
+        border: 1px solid var(--ant-color-border);
       }
     }
 
     .ant-pagination-item {
-      border: 1px solid #e2e7f0;
+      border: 1px solid var(--ant-color-border);
 
       &.ant-pagination-item-active {
-        color: theme('colors.theme08');
-        background-color: theme('colors.theme03');
-        border-color: theme('colors.theme05');
+        color: var(--color-theme08);
+        background-color: var(--color-theme03);
+        border-color: var(--color-theme05);
       }
     }
   }

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_list/crud_of_list.stories.tsx

@@ -54,6 +54,7 @@ export const Basic: Story = {
           ref={ref}
           actions={[]}
           tableProps={{
+            rowKey: 'id',
             columns,
             request: fakeRequest,
           }}
@@ -88,6 +89,45 @@ export const WithSearch: Story = {
       <CRUDOfList
         actions={['delete']}
         tableProps={{
+          rowKey: 'id',
+          columns,
+          request: fakeRequest,
+        }}
+        requestDeleteByRecord={fakeDeleteByRecord}
+        deleteProps={{
+          nameIndex: 'name',
+          operateIsHidden: (record) => {
+            return record.id === '1';
+          },
+        }}
+        detailForm={() => (
+          <>
+            <ProFormText name="name" label="名字" required rules={[{ required: true }]} />
+          </>
+        )}
+        requestCreateByValues={fakeCreate}
+      />
+    );
+  },
+};
+
+export const WithToolbarSticky: Story = {
+  render: () => {
+    const columns = [
+      {
+        title: '名字(省略)',
+        dataIndex: 'name',
+        search: true,
+        ellipsis: true,
+      },
+    ];
+
+    return (
+      <CRUDOfList
+        toolbarSticky
+        actions={['delete']}
+        tableProps={{
+          rowKey: 'id',
           columns,
           request: fakeRequest,
         }}
@@ -121,6 +161,7 @@ export const WithCreateDelete: Story = {
       <CRUDOfList
         actions={['create', 'delete']}
         tableProps={{
+          rowKey: 'id',
           columns,
           request: fakeRequest,
         }}
@@ -153,6 +194,7 @@ export const NoSearch: Story = {
       <CRUDOfList
         actions={['create', 'delete']}
         tableProps={{
+          rowKey: 'id',
           columns,
           request: fakeRequest,
         }}

package/src/crud_of_list/index.tsx

@@ -12,7 +12,7 @@ interface CRUDOfListProps<
   DataSource extends Record<string, any> = any,
   Key extends string | number = string,
 > extends CRUDProps<DataSource, Key> {
-  // nothing
+  toolbarSticky?: boolean;
 }
 
 function useTips(props) {
@@ -104,6 +104,7 @@ function CRUDOfList(props: CRUDOfListProps) {
         {
           // 先这样实现
           'fec-crud-of-list-no-toolbar': !searchDataIndex && !props.actions.includes('create'),
+          'fec-crud-of-list-toolbar-sticky': props.toolbarSticky,
         },
         props.className,
       )}

package/src/crud_of_list/style.scss

@@ -12,6 +12,11 @@
     &:hover {
       .ant-table-cell-fix-right {
         display: block;
+
+        // 如果操作列没有内容，则隐藏操作列
+        &:has(.fec-crud-operate-column:empty) {
+          display: none;
+        }
       }
     }
   }
@@ -34,4 +39,26 @@
       padding-block: 0;
     }
   }
+
+  &.fec-crud-of-list-toolbar-sticky {
+    .ant-pro-table-list-toolbar {
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      background-color: #fff;
+    }
+  }
+
+  .ant-table-bordered {
+    .ant-table-container {
+      border-top: none !important;
+      border-left: none !important;
+
+      .ant-table-row {
+        .ant-table-cell {
+          border-inline-end: none !important;
+        }
+      }
+    }
+  }
 }

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/editor/editor.stories.tsx

@@ -115,3 +115,11 @@ This is a markdown file.
   },
   render: (props) => <BasicDemo {...props} />,
 };
+
+export const HTML: Story = {
+  args: {
+    language: 'html',
+    value: '<html><body><h1>Hello, World!</h1></body></html>',
+  },
+  render: (props) => <BasicDemo {...props} />,
+};

package/src/editor/index.tsx

@@ -1,3 +1,4 @@
+import { html } from '@codemirror/lang-html';
 import { javascript } from '@codemirror/lang-javascript';
 import { json } from '@codemirror/lang-json';
 import { markdown } from '@codemirror/lang-markdown';
@@ -9,7 +10,7 @@ import CodeMirror from '@uiw/react-codemirror';
 import { useCallback, useMemo } from 'react';
 
 interface EditorProps {
-  language?: 'javascript' | 'python' | 'json' | 'markdown';
+  language?: 'javascript' | 'python' | 'json' | 'markdown' | 'html';
   value?: string;
   onChange?: (value: string) => void;
   autoFocus?: boolean;
@@ -73,12 +74,15 @@ function Editor(props: EditorProps) {
       case 'markdown':
         result.push(markdown());
         break;
+      case 'html':
+        result.push(html());
+        break;
       default:
         break;
     }
 
     return result;
-  }, [language, originExtensions]);
+  }, [language, originExtensions, lineWrapping]);
 
   const handleChange = useCallback(
     (value: string) => {
@@ -89,7 +93,7 @@ function Editor(props: EditorProps) {
 
   return (
     <CodeMirror
-      className="w-full h-full"
+      className="h-full w-full"
       height={height || '100%'}
       width={width || '100%'}
       value={value}

package/src/form/form_list/form_list_modal_helper.tsx

@@ -65,6 +65,7 @@ function Edit<T>(props: {
 
 function ProFormListModalHelper<T = any>(props: ProFormListModalHelperProps<T>) {
   const options = props.value || emptyArr;
+  const { t } = useTranslation();
 
   return (
     <div className="flex flex-col gap-2">

package/src/index.ts

@@ -1,4 +1,5 @@
 import './style.scss';
+import './tailwind.css';
 
 export { useGlobalInfiniteScroll } from './ahooks/use_global_infinite_scroll';
 export { useGlobalRequest } from './ahooks/use_global_request';
@@ -52,12 +53,14 @@ 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';
 export type { RecordArrayProps, RecordProps } from './record';
 export { routeTool } from './route';
+export { ScrollFixed, getScrollbarWidth, useScrollFixed } from './scroll';
 export { NumberSlider, PercentageSlider } from './slider';
 export type { NumberSliderProps, PercentageSliderProps } from './slider';
 export { Tabs } from './tabs';

package/src/infinite_list/index.tsx

@@ -5,6 +5,7 @@ import { useImperativeHandle, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import stringify from 'safe-stable-stringify';
 import { useGlobalInfiniteScroll } from '../ahooks/use_global_infinite_scroll';
+import { ScrollFixed } from '../scroll';
 
 interface ActionType {
   reload: () => void;
@@ -22,6 +23,7 @@ interface InfiniteListProps<D, P> {
   gridClassName: string;
   className?: string;
   actionRef?: React.Ref<ActionType | undefined>;
+  scrollFixed?: boolean;
 }
 
 const emptyParams = {};
@@ -34,6 +36,7 @@ const InfiniteListBase = <D, P>({
   pageSize,
   gridClassName,
   className,
+  scrollFixed = false,
 }: InfiniteListProps<D, P>) => {
   const { t } = useTranslation();
   const ref = useRef<HTMLDivElement>(null);
@@ -91,7 +94,7 @@ const InfiniteListBase = <D, P>({
   }));
 
   return (
-    <div ref={ref} className={classNames('h-full overflow-y-auto', className)}>
+    <ScrollFixed refScroll={ref} className={className} disabled={!scrollFixed}>
       {loading && (
         <div className="flex h-full w-full items-center justify-center">
           <Spin />
@@ -116,7 +119,7 @@ const InfiniteListBase = <D, P>({
           </div>
         )}
       </div>
-    </div>
+    </ScrollFixed>
   );
 };
 

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 };