@fe-free/core 2.2.7 → 2.2.9

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @fe-free/core
 
+## 2.2.9
+
+### Patch Changes
+
+- Updated dependencies
+  - @fe-free/tool@2.2.9
+
+## 2.2.8
+
+### Patch Changes
+
+- feat: global
+  - @fe-free/tool@2.2.8
+
 ## 2.2.7
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "2.2.7",
+  "version": "2.2.9",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -28,7 +28,9 @@
     "ahooks": "^3.7.8",
     "axios": "^1.6.5",
     "classnames": "^2.5.1",
+    "file-saver": "^2.0.5",
     "github-markdown-css": "^5.8.1",
+    "i": "^0.3.7",
     "localforage": "^1.10.0",
     "lodash-es": "^4.17.21",
     "react-ace": "^11.0.1",
@@ -39,7 +41,7 @@
     "remark-gfm": "^4.0.1",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "2.2.7"
+    "@fe-free/tool": "2.2.9"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/ahooks/ahooks.stories.tsx

@@ -0,0 +1,78 @@
+import { useGlobalRequest } from '@fe-free/core';
+import { useRequest } from 'ahooks';
+
+const meta = {
+  title: '@fe-free/core/ahooks',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `基于 ahooks 封装
+- useGlobalRequest。基于 useRequest 封装，会抛出全局错误。
+- useGlobalInfiniteScroll。基于 useInfiniteScroll 封装，会抛出全局错误。
+`,
+      },
+    },
+  },
+};
+
+export default meta;
+
+const handleError = (event) => {
+  console.log('global error', event);
+  alert('global error');
+};
+
+window.addEventListener('error', handleError);
+window.addEventListener('unhandledrejection', handleError);
+
+export const UseGlobalRequest = () => {
+  const { data, loading, error, run } = useGlobalRequest(
+    async () => {
+      return new Promise((_, reject) => {
+        setTimeout(() => {
+          reject('错误啦');
+        }, 1000);
+      });
+    },
+    {
+      manual: true,
+    },
+  );
+
+  return (
+    <div>
+      <div>useGlobalRequest 会抛出全局错误</div>
+      <button onClick={run}>run</button>
+
+      <div>data: {data}</div>
+      <div>loading: {loading ? 'true' : 'false'}</div>
+      <div>error: {error}</div>
+    </div>
+  );
+};
+
+export const UseRequest = () => {
+  const { data, loading, error, run } = useRequest(
+    async () => {
+      return new Promise((_, reject) => {
+        setTimeout(() => {
+          reject('错误啦');
+        }, 1000);
+      });
+    },
+    {
+      manual: true,
+    },
+  );
+
+  return (
+    <div>
+      <div>ahooks useRequest</div>
+      <button onClick={run}>run</button>
+      <div>data: {data}</div>
+      <div>loading: {loading ? 'true' : 'false'}</div>
+      <div>error: {error}</div>
+    </div>
+  );
+};

package/src/button/button.stories.ts

@@ -8,8 +8,7 @@ const meta: Meta<typeof LoadingButton> = {
   parameters: {
     docs: {
       description: {
-        component:
-          'LoadingButton 是一个带有加载状态的按钮组件，适用于异步操作场景。<br/>区别于 antd Button 需要手动传 loading props。',
+        component: '基于 antd Button 封装的 LoadingButton，自动根据 onClick 显示 loading',
       },
     },
   },

package/src/button/index.tsx

@@ -2,7 +2,9 @@ import type { ButtonProps } from 'antd';
 import { Button } from 'antd';
 import { useCallback, useState } from 'react';
 
-function LoadingButton({ onClick, ...rest }: ButtonProps) {
+function LoadingButton(props: ButtonProps) {
+  const { onClick, ...rest } = props;
+
   const [loading, setLoading] = useState(false);
 
   const handleClick = useCallback(

package/src/copy/copy.stories.tsx

@@ -5,6 +5,13 @@ const meta: Meta<typeof Copy> = {
   title: '@fe-free/core/Copy',
   component: Copy,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: '基于 antd 的 Copy 组件，自动根据 value 显示复制按钮',
+      },
+    },
+  },
 };
 
 export default meta;
@@ -14,7 +21,7 @@ type Story = StoryObj<typeof meta>;
 export const Basic: Story = {
   args: {
     value: '点击复制',
-    children: '点击复制',
+    children: 'children 点击复制',
   },
 };
 
@@ -22,7 +29,7 @@ export const ShowIcon: Story = {
   args: {
     value: 'icon复制',
     showIcon: true,
-    children: 'icon复制',
+    children: 'children 点击复制',
   },
 };
 
@@ -31,7 +38,7 @@ export const HoverIcon: Story = {
     value: 'hover复制',
     showIcon: true,
     hoverIcon: true,
-    children: 'hover复制',
+    children: 'children 点击复制',
   },
 };
 
@@ -41,6 +48,6 @@ export const OnCopied: Story = {
     onCopied: () => {
       alert('复制成功');
     },
-    children: '点击复制',
+    children: 'children 点击复制',
   },
 };

package/src/copy/index.tsx

@@ -4,14 +4,20 @@ import classNames from 'classnames';
 import React, { useCallback } from 'react';
 
 interface CopyProps {
+  /** 复制的内容 */
   value: string;
+  /** 是否显示复制 icon */
   showIcon?: boolean;
+  /** 是否在 hover 时显示复制 icon */
   hoverIcon?: boolean;
   children?: React.ReactNode;
+  /** 复制成功后的回调 */
   onCopied?: () => void;
 }
 
-const Copy: React.FC<CopyProps> = ({ value, showIcon, hoverIcon, children, onCopied }) => {
+function Copy(props: CopyProps) {
+  const { value, showIcon, hoverIcon, children, onCopied } = props;
+
   const handleCopy = useCallback(async () => {
     await copyToClipboard(value);
     onCopied?.();
@@ -39,7 +45,7 @@ const Copy: React.FC<CopyProps> = ({ value, showIcon, hoverIcon, children, onCop
   }
 
   return <div onClick={handleCopy}>{children}</div>;
-};
+}
 
 export { Copy };
 export type { CopyProps };

package/src/global/error.ts

@@ -0,0 +1,89 @@
+import { message } from 'antd';
+import type { AxiosRequestConfig, AxiosResponse } from 'axios';
+import { AxiosError } from 'axios';
+
+class RequestError extends Error {
+  silent: boolean | undefined;
+  status: string | undefined;
+  config: AxiosRequestConfig<any> | undefined;
+  request: XMLHttpRequest | undefined;
+  response: AxiosResponse<any, any> | undefined;
+
+  constructor(
+    message: string,
+    {
+      silent,
+      config,
+      request,
+      response,
+    }: {
+      silent?: boolean;
+      status?: number;
+      config?: AxiosRequestConfig;
+      request?: XMLHttpRequest;
+      response?: AxiosResponse;
+    },
+  ) {
+    super(message);
+    this.name = 'RequestError';
+
+    this.silent = silent;
+    this.status = status;
+    this.config = config;
+    this.request = request;
+    this.response = response;
+  }
+}
+
+function commonHandleError(event) {
+  console.log('handleError', event);
+
+  if (event.reason) {
+    if (event.reason instanceof AxiosError) {
+      if (event.reason.code === 'ERR_NETWORK') {
+        message.error('网络异常');
+        return;
+      }
+      if (event.reason.code === 'ECONNABORTED') {
+        message.error('请求超时');
+        return;
+      }
+
+      if (event.reason.code === 'ERR_CANCELED') {
+        // 正常逻辑
+        return;
+      }
+    }
+
+    if (event.reason.message || event.reason.reason) {
+      message.error(event.reason.message || event.reason.reason);
+      return;
+    }
+  }
+
+  if (event.error) {
+    if (event.error.message || event.error.reason) {
+      message.error(event.error.message || event.error.reason);
+      return;
+    }
+  }
+
+  // unknown error
+}
+
+function initErrorHandle(onError) {
+  const handleError = (event) => {
+    commonHandleError(event);
+    onError?.(event);
+  };
+
+  window.addEventListener('error', handleError);
+  window.addEventListener('unhandledrejection', handleError);
+
+  return () => {
+    window.removeEventListener('error', handleError);
+    window.removeEventListener('unhandledrejection', handleError);
+  };
+}
+
+export { initErrorHandle, RequestError };

package/src/global/interceptors.ts

@@ -0,0 +1,34 @@
+import type { AxiosInstance } from 'axios';
+import { saveAs } from 'file-saver';
+
+function downloadInterceptor(instance: AxiosInstance) {
+  instance.interceptors.response.use(async function (response) {
+    const contentDisposition = response.headers['content-disposition'];
+
+    if (contentDisposition) {
+      let filename;
+
+      // 更加健壮且简洁的写法，优先处理 filename*=，否则处理 filename=
+      if (contentDisposition.includes('filename*=')) {
+        // RFC 5987 格式：filename*=utf-8''xxx
+        const match = contentDisposition.match(/filename\*\s*=\s*([^']*)''([^;]+)/i);
+        filename = match ? decodeURIComponent(match[2]) : undefined;
+      } else if (contentDisposition.includes('filename=')) {
+        // 普通格式：filename=xxx
+        const match = contentDisposition.match(/filename\s*=\s*("?)([^";]+)\1/i);
+        filename = match ? decodeURIComponent(match[2]) : undefined;
+      }
+
+      filename = filename || 'download';
+
+      // 处理文件下载 - 确保正确处理二进制数据
+      const blob = response.data;
+
+      saveAs(blob, filename);
+    }
+
+    return response;
+  });
+}
+
+export { downloadInterceptor };

package/src/index.ts

@@ -30,6 +30,8 @@ export {
   ProFormUploadDragger,
   proFormSelectSearchProps,
 } from './form';
+export { RequestError, initErrorHandle } from './global/error';
+export { downloadInterceptor } from './global/interceptors';
 export { Markdown } from './markdown';
 export { PageLayout } from './page_layout';
 export { routeTool } from './route';

package/src/tailwindcss.stories.tsx

@@ -7,10 +7,10 @@ export const Default = () => {
   return (
     <div>
       <div>@fe-free/core 扩展的</div>
-      <div className="flex flex-row gap-2">
-        <span className="text-primary">text-primary</span>
-        <span className="text-secondary">text-secondary</span>
-        <span className="text-desc">text-desc</span>
+      <div>
+        <div className="text-primary">text-primary</div>
+        <div className="text-secondary">text-secondary</div>
+        <div className="text-desc">text-desc</div>
       </div>
       <div>
         <div className="c-border-bottom">c-border-bottom</div>