@fe-free/core 3.0.13 → 3.0.14

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @fe-free/core
 
+## 3.0.14
+
+### Patch Changes
+
+- feat: upload
+  - @fe-free/tool@3.0.14
+
 ## 3.0.13
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "3.0.13",
+  "version": "3.0.14",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -41,7 +41,7 @@
     "safe-stable-stringify": "^2.5.0",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "3.0.13"
+    "@fe-free/tool": "3.0.14"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/file/helper.tsx

@@ -105,11 +105,11 @@ const PRESET_FILE_ICONS: {
 ];
 
 function isImage(name: string) {
-  return IMG_EXTS.includes(name.split('.').pop() || '');
+  return IMG_EXTS.includes(name.split('.').pop()?.toLowerCase() || '');
 }
 
 function getFileExt(name?: string) {
-  return name?.split('.').pop() || '';
+  return name?.split('.').pop()?.toLowerCase() || '';
 }
 
 function getFileSize(size: number) {

package/src/form/form.stories.tsx

@@ -1,5 +1,6 @@
 import { ProForm } from '@ant-design/pro-components';
 import {
+  ProFormAvatarImageUpload,
   ProFormEditor,
   ProFormImageUpload,
   ProFormImageUploadDragger,
@@ -48,10 +49,7 @@ function ProFormBase({
     <ProForm
       initialValues={initialValues}
       onValuesChange={(newValues) => {
-        setValues({
-          ...values,
-          ...newValues,
-        });
+        setValues(newValues);
       }}
       onFinish={(values) => {
         console.log('values', values);
@@ -282,6 +280,13 @@ export const ProFormImageUploadComponent: Story = {
           customRequest,
         }}
       />
+      <ProFormAvatarImageUpload
+        label="avatar_image"
+        name="avatar_image"
+        fieldProps={{
+          customRequest,
+        }}
+      />
     </ProFormBase>
   ),
 };

package/src/form/index.tsx

@@ -14,6 +14,7 @@ export {
   type SwitchOptionsProps,
 } from './pro_form_switch';
 export {
+  ProFormAvatarImageUpload,
   ProFormImageUpload,
   ProFormImageUploadDragger,
   ProFormUpload,

package/src/form/pro_form_upload.tsx

@@ -1,12 +1,19 @@
 // 避免循环引用
 import { ProForm, type ProFormItemProps } from '@ant-design/pro-components';
 import type {
+  AvatarImageUploadProps,
   ImageUploadDraggerProps,
   ImageUploadProps,
   UploadDraggerProps,
   UploadProps,
 } from '../upload';
-import { ImageUpload, ImageUploadDragger, Upload, UploadDragger } from '../upload';
+import {
+  AvatarImageUpload,
+  ImageUpload,
+  ImageUploadDragger,
+  Upload,
+  UploadDragger,
+} from '../upload';
 
 function ProFormUpload(props: ProFormItemProps<UploadProps>) {
   const { fieldProps, ...rest } = props;
@@ -37,6 +44,16 @@ function ProFormImageUpload(props: ProFormItemProps<ImageUploadProps>) {
   );
 }
 
+function ProFormAvatarImageUpload(props: ProFormItemProps<AvatarImageUploadProps>) {
+  const { fieldProps, ...rest } = props;
+
+  return (
+    <ProForm.Item {...rest}>
+      <AvatarImageUpload {...fieldProps} />
+    </ProForm.Item>
+  );
+}
+
 function ProFormImageUploadDragger(props: ProFormItemProps<ImageUploadDraggerProps>) {
   const { fieldProps, ...rest } = props;
 
@@ -47,4 +64,10 @@ function ProFormImageUploadDragger(props: ProFormItemProps<ImageUploadDraggerPro
   );
 }
 
-export { ProFormImageUpload, ProFormImageUploadDragger, ProFormUpload, ProFormUploadDragger };
+export {
+  ProFormAvatarImageUpload,
+  ProFormImageUpload,
+  ProFormImageUploadDragger,
+  ProFormUpload,
+  ProFormUploadDragger,
+};

package/src/index.ts

@@ -24,6 +24,7 @@ export { EditorMention } from './editor_mention';
 export type { EditorMentionProps } from './editor_mention';
 export { FileCard } from './file';
 export {
+  ProFormAvatarImageUpload,
   ProFormEditor,
   ProFormImageUpload,
   ProFormImageUploadDragger,

package/src/upload/index.tsx

@@ -1,7 +1,7 @@
 // 避免循环引用
-import { InboxOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
+import { DeleteOutlined, InboxOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
 import type { UploadProps as AntdUploadProps, UploadFile } from 'antd';
-import { Upload as AntdUpload, Button, message } from 'antd';
+import { Upload as AntdUpload, Avatar, Button, message } from 'antd';
 import classNames from 'classnames';
 import { useCallback, useMemo, useState } from 'react';
 
@@ -169,5 +169,53 @@ function ImageUploadDragger(props: ImageUploadDraggerProps) {
   return <UploadDragger {...props} accept="image/*" listType="picture" />;
 }
 
-export { ImageUpload, ImageUploadDragger, Upload, UploadDragger };
-export type { ImageUploadDraggerProps, ImageUploadProps, UploadDraggerProps, UploadProps };
+interface AvatarImageUploadProps {
+  value?: string;
+  onChange?: (value?: string) => void;
+  action?: string;
+  customRequest?: AntdUploadProps['customRequest'];
+  accept?: string;
+  headers?: AntdUploadProps['headers'];
+}
+function AvatarImageUpload(props: AvatarImageUploadProps) {
+  const { value, onChange, action, customRequest, accept = 'image/*', headers } = props;
+
+  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">请选择</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 />}>本地上传</Button>
+          </AntdUpload>
+          <Button icon={<DeleteOutlined />} danger onClick={() => onChange?.()}>
+            删除
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { AvatarImageUpload, ImageUpload, ImageUploadDragger, Upload, UploadDragger };
+export type {
+  AvatarImageUploadProps,
+  ImageUploadDraggerProps,
+  ImageUploadProps,
+  UploadDraggerProps,
+  UploadProps,
+};