@fe-free/core 5.0.0 → 6.0.2

package/src/page_layout/index.tsx

@@ -12,9 +12,13 @@ interface PageLayoutProps {
   /** beta equalParts */
   equalParts?: boolean;
   className?: string;
+  style?: React.CSSProperties;
   startClassName?: string;
+  startStyle?: React.CSSProperties;
   childrenClassName?: string;
+  childrenStyle?: React.CSSProperties;
   endClassName?: string;
+  endStyle?: React.CSSProperties;
 }
 
 function PageLayout({
@@ -24,9 +28,13 @@ function PageLayout({
   end,
   equalParts,
   className,
+  style,
   startClassName,
+  startStyle,
   childrenClassName,
+  childrenStyle,
   endClassName,
+  endStyle,
 }: PageLayoutProps) {
   return (
     <div
@@ -38,6 +46,7 @@ function PageLayout({
         },
         className,
       )}
+      style={style}
     >
       {start && (
         <div
@@ -48,6 +57,7 @@ function PageLayout({
             },
             startClassName,
           )}
+          style={startStyle}
         >
           {start}
         </div>
@@ -60,6 +70,7 @@ function PageLayout({
           },
           childrenClassName,
         )}
+        style={childrenStyle}
       >
         {children}
       </div>
@@ -72,6 +83,7 @@ function PageLayout({
             },
             endClassName,
           )}
+          style={endStyle}
         >
           {end}
         </div>

package/src/scroll/helper.tsx

@@ -0,0 +1,23 @@
+function getScrollbarWidth() {
+  const target = document.body;
+
+  // 创建一个不可见的 div 元素
+  const outer = document.createElement('div');
+  outer.style.visibility = 'hidden';
+  outer.style.overflow = 'scroll'; // 强制显示滚动条
+  target.appendChild(outer);
+
+  // 创建一个内部 div，宽度为 100%
+  const inner = document.createElement('div');
+  outer.appendChild(inner);
+
+  // 滚动条宽度 = 外部容器的宽度 - 内部内容的宽度
+  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+
+  // 清理 DOM
+  target.removeChild(outer);
+
+  return scrollbarWidth;
+}
+
+export { getScrollbarWidth };

package/src/scroll/index.tsx

@@ -0,0 +1,70 @@
+import classNames from 'classnames';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { getScrollbarWidth } from './helper';
+
+function useScrollFixed({
+  ref,
+  disabled,
+}: {
+  ref: React.RefObject<HTMLElement | null>;
+  disabled?: boolean;
+}) {
+  const [marginRight, setMarginRight] = useState(0);
+
+  const scrollbarWidth = useMemo(() => {
+    return getScrollbarWidth();
+  }, []);
+
+  useEffect(() => {
+    if (disabled) {
+      return;
+    }
+
+    const el = ref.current;
+    if (!el) return;
+
+    const updateMargin = () => {
+      const hasVerticalScrollbar = el.scrollHeight > el.clientHeight;
+      setMarginRight(hasVerticalScrollbar ? scrollbarWidth : 0);
+    };
+
+    updateMargin();
+
+    const resizeObserver = new ResizeObserver(updateMargin);
+    resizeObserver.observe(el);
+    el.addEventListener('scroll', updateMargin);
+
+    return () => {
+      resizeObserver.disconnect();
+      el.removeEventListener('scroll', updateMargin);
+    };
+  }, [ref, scrollbarWidth, disabled]);
+
+  return { marginRight };
+}
+
+interface ScrollFixedProps {
+  refScroll?: React.RefObject<HTMLDivElement | null>;
+  disabled?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}
+
+function ScrollFixed({ refScroll, className, children, disabled, ...rest }: ScrollFixedProps) {
+  const innerRef = useRef<HTMLDivElement>(null);
+  const ref = refScroll || innerRef;
+  const { marginRight } = useScrollFixed({ ref, disabled });
+
+  return (
+    <div
+      ref={ref}
+      {...rest}
+      className={classNames('h-full w-full overflow-y-auto overflow-x-hidden', className)}
+    >
+      <div style={{ marginRight: `-${marginRight || 0}px` }}>{children}</div>
+    </div>
+  );
+}
+
+export { getScrollbarWidth, ScrollFixed, useScrollFixed };

package/src/style.scss

@@ -1,33 +1,3 @@
-/** 和 antd 冲突，不开启 */
-/* stylelint-disable-next-line at-rule-no-unknown */
-// @tailwind base;
-
-// base
-* {
-  border: 0 solid;
-  box-sizing: border-box;
-}
-
-/* stylelint-disable-next-line at-rule-no-unknown */
-@tailwind components;
-
-/* stylelint-disable-next-line at-rule-no-unknown */
-@tailwind utilities;
-
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #ccc;
-  border-radius: 2px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
 .fec-app-hidden-form-item-label-colon {
   // 隐藏 label 的冒号
   .ant-form-item .ant-form-item-label > label::after {

package/src/tailwind.css

@@ -0,0 +1,54 @@
+@import 'tailwindcss';
+
+/* stylelint-disable-next-line */
+@theme {
+  --color-primary: #0374e9;
+  --color-theme09: #0368d2;
+  --color-theme08: #0374e9;
+  --color-theme05: #a2cbf7;
+  --color-theme03: #e6f1fd;
+  --color-theme02: #f0f7fe;
+  --color-red09: #e64547;
+  --color-red08: #ff4d4f;
+  --color-red05: #ffb8b9;
+  --color-red03: #ffeded;
+  --color-green09: #01a468;
+  --color-green08: #01b673;
+  --color-green05: #9be5c8;
+  --color-green03: #ddf9ec;
+  --color-yellow09: #bf7a05;
+  --color-yellow08: #faad14;
+  --color-yellow05: #eecf9b;
+  --color-yellow03: #f6e7cd;
+  --text-color-01: #15191e;
+  --text-color-02: #444;
+  --text-color-03: #777;
+  --text-color-04: #bfbfbf;
+  --border-color-01: #e2e7f0;
+  --border-color-02: #d5dde9;
+  --border-color-03: #c0c7d2;
+  --background-color-01: #f1f3f5;
+  --background-color-02: #ececec;
+  --background-color-03: #d9d9d9;
+  --background-color-04: #c0c0c0;
+}
+
+@layer base {
+  * {
+    -webkit-font-smoothing: antialiased;
+  }
+
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: #ccc;
+    border-radius: 2px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}

package/src/theme.ts

@@ -28,7 +28,7 @@ const themeVariables = {
     '01': '#15191e', // 主要
     '02': '#444444', // 次要
     '03': '#777777', // 描述
-    '04': '#94999f', // placeholder
+    '04': '#bfbfbf', // placeholder
   },
   borderColor: {
     '01': '#e2e7f0', // 主要

package/src/upload/index.tsx

@@ -1,4 +1,4 @@
-import { DeleteOutlined, InboxOutlined, PlusOutlined, UploadOutlined } from '@fe-free/icons';
+import { CloseOutlined, InboxOutlined, PlusOutlined, UploadOutlined } from '@fe-free/icons';
 import type { UploadProps as AntdUploadProps, UploadFile } from 'antd';
 import { Upload as AntdUpload, App, Avatar, Button } from 'antd';
 import type { UploadChangeParam } from 'antd/es/upload';
@@ -272,37 +272,39 @@ interface AvatarImageUploadProps {
 }
 function AvatarImageUpload(props: AvatarImageUploadProps) {
   const { value, onChange, action, customRequest, accept = 'image/*', headers } = props;
-  const { t } = useTranslation();
 
   return (
-    <div className="flex gap-2">
-      <Avatar size={80} src={value} shape="square" className="bg-01 shadow" />
-
-      <div className="flex flex-1 flex-col justify-between">
-        <div className="text-03">{t('@fe-free/core.upload.pleaseSelect', '请选择')}</div>
-        <div className="flex gap-2">
-          <AntdUpload
-            action={action}
-            customRequest={customRequest}
-            onChange={(info) => {
-              const url = info.file.response?.data?.url;
-              if (url) {
-                onChange?.(url);
-              }
-            }}
-            itemRender={() => null}
-            accept={accept}
-            headers={headers}
-          >
-            <Button icon={<UploadOutlined />}>
-              {t('@fe-free/core.upload.localUpload', '本地上传')}
-            </Button>
-          </AntdUpload>
-          <Button icon={<DeleteOutlined />} danger onClick={() => onChange?.()}>
-            {t('@fe-free/core.upload.delete', '删除')}
-          </Button>
-        </div>
-      </div>
+    <div>
+      <AntdUpload
+        action={action}
+        customRequest={customRequest}
+        onChange={(info) => {
+          const url = info.file.response?.data?.url;
+          if (url) {
+            onChange?.(url);
+          }
+        }}
+        accept={accept}
+        headers={headers}
+        itemRender={() => null}
+      >
+        {value ? (
+          <div className="group relative h-20 w-20 cursor-pointer">
+            <Avatar size={80} src={value} shape="square" className="bg-01 shadow" />
+            <CloseOutlined
+              className="absolute right-1 top-1 cursor-pointer rounded-full bg-black/50 p-1 text-[10px] text-white opacity-0 transition-opacity group-hover:opacity-100"
+              onClick={(e) => {
+                e.stopPropagation();
+                onChange?.();
+              }}
+            />
+          </div>
+        ) : (
+          <div className="flex h-20 w-20 cursor-pointer items-center justify-center rounded bg-01 shadow transition-colors hover:bg-02">
+            <PlusOutlined className="text-xl text-02" />
+          </div>
+        )}
+      </AntdUpload>
     </div>
   );
 }

package/src/value_type_map/index.tsx

@@ -2,6 +2,7 @@ import type { ProRenderFieldPropsType } from '@ant-design/pro-components';
 import { dateRender } from './date';
 import { jsonRender } from './json';
 import { jsonModalRender } from './json_modal';
+import { markdownModalRender } from './markdown_modal';
 import { switchNumberRender, switchOptionsRender } from './switch';
 
 enum CustomValueTypeEnum {
@@ -13,6 +14,8 @@ enum CustomValueTypeEnum {
   CustomJSON = 'CustomJSON',
   /** JSON Modal */
   CustomJSONModal = 'CustomJSONModal',
+  /** Markdown Modal */
+  CustomMarkdownModal = 'CustomMarkdownModal',
   /** 渲染开关 */
   CustomSwitchNumber = 'CustomSwitchNumber',
   CustomSwitchOptions = 'CustomSwitchOptions',
@@ -37,6 +40,10 @@ const customValueTypeMap: Record<string, ProRenderFieldPropsType> = {
     render: jsonModalRender.render,
     renderFormItem: jsonModalRender.renderFormItem,
   },
+  [CustomValueTypeEnum.CustomMarkdownModal]: {
+    render: markdownModalRender.render,
+    renderFormItem: markdownModalRender.renderFormItem,
+  },
   [CustomValueTypeEnum.CustomSwitchNumber]: {
     render: switchNumberRender.render,
     renderFormItem: switchNumberRender.renderFormItem,

package/src/value_type_map/json_modal.tsx

@@ -31,21 +31,23 @@ function Render(text, props: ProFormItemProps<JSONModalProps>) {
   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>
+      {show && (
+        <Modal
+          title={title}
+          open
+          onCancel={() => setShow(false)}
+          onOk={() => setShow(false)}
+          cancelButtonProps={{
+            style: {
+              display: 'none',
+            },
+          }}
+        >
+          <div>
+            <EditorJSON value={jsonText} readonly />
+          </div>
+        </Modal>
+      )}
     </>
   );
 }

package/src/value_type_map/markdown_modal.tsx

@@ -0,0 +1,45 @@
+import { Modal } from 'antd';
+import { useState } from 'react';
+import { Markdown } from '../markdown';
+
+function Render(text) {
+  const [show, setShow] = useState(false);
+
+  if (!text) {
+    return <div>-</div>;
+  }
+
+  return (
+    <>
+      <div onClick={() => setShow(true)} className="flex cursor-pointer items-center">
+        <div className="flex-1 truncate">{text}</div>
+        <span className="min-w-0 text-primary">查看</span>
+      </div>
+      {show && (
+        <Modal
+          title="Markdown"
+          open
+          onCancel={() => setShow(false)}
+          onOk={() => setShow(false)}
+          cancelButtonProps={{
+            style: {
+              display: 'none',
+            },
+          }}
+          width={900}
+        >
+          <div>
+            <Markdown content={text} />
+          </div>
+        </Modal>
+      )}
+    </>
+  );
+}
+
+const markdownModalRender = {
+  render: Render,
+  renderFormItem: () => <></>,
+};
+
+export { markdownModalRender };

package/src/value_type_map/value_type_map.stories.tsx

@@ -25,6 +25,7 @@ async function fakeRequest() {
     dateNumber: +dayjs('2024-10-01'),
     seconds: Math.abs(+dayjs('2024-10-01') / 1000),
     jsonText: JSON.stringify({ name: 'hello world hello world hello world' }),
+    markdownText: `# Hello World\n\nThis is a markdown text.`,
     switchNumber: Math.random() > 0.5 ? 1 : 0,
     switchOptions: Math.random() > 0.5 ? 'ON' : 'OFF',
   }));
@@ -84,6 +85,12 @@ const Table = () => {
       ellipsis: true,
       valueType: CustomValueTypeEnum.CustomJSONModal,
     },
+    {
+      title: 'markdownModal',
+      dataIndex: 'markdownText',
+      ellipsis: true,
+      valueType: CustomValueTypeEnum.CustomMarkdownModal,
+    },
     {
       title: '开关 number',
       dataIndex: 'switchNumber',
@@ -104,6 +111,7 @@ const Table = () => {
     <CRUD
       actions={[]}
       tableProps={{
+        rowKey: 'id',
         columns,
         request: fakeRequest,
       }}

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

package/src/markdown/style.scss

@@ -1,46 +0,0 @@
-.markdown-body {
-  font-size: 14px;
-
-  pre {
-    padding: 0;
-  }
-
-  .markdown-body-block-code {
-    margin: 0.5rem 0;
-
-    & > div {
-      margin: 0 !important;
-    }
-  }
-
-  .markdown-body-block-chart {
-    background: white;
-    border-radius: 6px;
-    margin: 0.5rem;
-
-    .markdown-body-block-chart-title {
-      font-size: 16px;
-      font-weight: bold;
-      padding: 10px;
-    }
-  }
-
-  .markdown-body-block-knowledge-ref[data-id] {
-    height: 16px;
-    min-width: 16px;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 999px;
-    border: 1px solid #0374e9;
-    color: #0374e9;
-    font-size: 12px;
-    padding: 0 4px;
-  }
-
-  .markdown-body-block-knowledge-ref-source {
-    color: #0374e9;
-    cursor: pointer;
-  }
-}

package/src/tailwind.config.ts

@@ -1,14 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-import { themeVariables } from './theme';
-
-module.exports = {
-  theme: {
-    extend: {
-      colors: themeVariables.color,
-      textColor: themeVariables.textColor,
-      borderColor: themeVariables.borderColor,
-      backgroundColor: themeVariables.backgroundColor,
-    },
-  },
-  plugins: [],
-};