@wangtaizong/components 1.0.6 → 1.0.7

package/packages/components/src/Icon/index.md

@@ -0,0 +1,81 @@
+# CHRIcon
+
+## 代码演示
+
+### 基本用法
+
+通过 icon 属性指定图标名称（使用 Ant Design 图标组件的导出名）。
+
+```jsx
+import { CHRIcon } from '@chr/components';
+
+export default () => {
+  return (
+    <div style={{ display: 'flex', gap: 12 }}>
+      <CHRIcon icon="HomeOutlined" />
+      <CHRIcon icon="UserOutlined" />
+      <CHRIcon icon="SearchOutlined" />
+    </div>
+  );
+};
+```
+
+### 自定义尺寸
+
+通过 fontSize 属性设置图标大小（单位：px）。
+
+```jsx
+import { CHRIcon } from '@chr/components';
+
+export default () => {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+      <CHRIcon icon="MessageOutlined" fontSize={16} />
+      <CHRIcon icon="MessageOutlined" fontSize={24} />
+      <CHRIcon icon="MessageOutlined" fontSize={32} />
+      <CHRIcon icon="MessageOutlined" fontSize={40} />
+    </div>
+  );
+};
+```
+
+### 自定义样式
+
+通过 className 和 style 属性自定义样式。
+
+```jsx
+import { CHRIcon } from '@chr/components';
+
+export default () => {
+  return (
+    <div style={{ display: 'flex', gap: 12 }}>
+      <CHRIcon icon="HeartOutlined" style={{ color: '#ff4d4f' }} />
+      <CHRIcon icon="StarOutlined" style={{ color: '#faad14' }} />
+      <CHRIcon icon="CheckCircleOutlined" style={{ color: '#52c41a' }} />
+    </div>
+  );
+};
+```
+
+### 未找到 icon
+
+```jsx
+import { CHRIcon } from '@chr/components';
+
+export default () => {
+  return (
+    <div style={{ display: 'flex', gap: 12 }}>
+      <CHRIcon icon="HeartOutlined1" style={{ color: '#ff4d4f' }} />
+    </div>
+  );
+};
+```
+
+## API
+
+| 属性      | 说明                                                                        | 类型                | 默认值 |
+| --------- | --------------------------------------------------------------------------- | ------------------- | ------ |
+| icon      | 图标名称，对应 Ant Design 图标组件的导出名（如 HomeOutlined、UserOutlined） | -                   | -      |
+| fontSize  | 图标大小，单位：px                                                          | number              | 20     |
+| className | 自定义 CSS 类名                                                             | string              | -      |
+| style     | 自定义内联样式                                                              | React.CSSProperties | -      |

package/packages/components/src/Icon/index.tsx

@@ -0,0 +1,34 @@
+import * as Icons from '@ant-design/icons';
+import React, { FC } from 'react';
+
+interface ChrIconProps {
+  icon: string;
+  fontSize?: number;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const CHRIcon: FC<ChrIconProps> = ({
+  icon,
+  fontSize = 20,
+  className,
+  style,
+}) => {
+  const IconComponent = (Icons as any)[icon];
+  if (!IconComponent) {
+    console.warn(`Icon "${icon}" is not a valid icon component`);
+    return <></>;
+  }
+  return (
+    <IconComponent
+      className={className}
+      style={{
+        fontSize: fontSize + 'px',
+        cursor: 'pointer',
+        ...style,
+      }}
+    />
+  );
+};
+
+export default CHRIcon;

package/packages/components/src/Upload/index.md

@@ -0,0 +1,209 @@
+# CHRUpload 上传
+
+文件上传组件，基于 Ant Design Upload 封装，支持文件/头像上传、大小限制、数量限制、认证等功能。
+
+## 代码演示
+
+### 基本用法
+
+文件上传的基本用法，支持限制文件数量和大小。
+
+```jsx
+import { CHRUpload } from '@chr/components';
+import { useState } from 'react';
+
+export default () => {
+  const [fileList, setFileList] = useState([
+    {
+      name: 'example.txt',
+      url: 'http://localhost:3000/uploads/example.txt',
+    },
+  ]);
+
+  const handleChange = (file, newFileList) => {
+    setFileList(newFileList);
+  };
+
+  return (
+    <CHRUpload
+      url="http://localhost:3000/upload"
+      value={fileList}
+      handleChange={handleChange}
+      maxCount={3}
+      limit={20}
+    />
+  );
+};
+```
+
+### 头像上传
+
+设置 `uploadType="avatar"`，组件会展示为头像上传样式，限制只能上传图片，且最多一张。
+
+```jsx
+import { CHRUpload } from '@chr/components';
+import { useState } from 'react';
+
+export default () => {
+  const [fileList, setFileList] = useState([]);
+
+  const handleChange = (file, newFileList) => {
+    setFileList(newFileList);
+  };
+
+  return (
+    <CHRUpload
+      value={fileList}
+      uploadType="avatar"
+      url="http://localhost:3000/upload"
+      handleChange={handleChange}
+    />
+  );
+};
+```
+
+### 限制数量
+
+通过 `maxCount` 限制上传文件数量。
+
+```jsx
+import { CHRUpload } from '@chr/components';
+import { useState } from 'react';
+
+export default () => {
+  const [fileList, setFileList] = useState([]);
+
+  const handleChange = (file, newFileList) => {
+    setFileList(newFileList);
+  };
+
+  return (
+    <CHRUpload
+      url="http://localhost:3000/upload"
+      value={fileList}
+      handleChange={handleChange}
+      maxCount={2}
+    />
+  );
+};
+```
+
+### 限制大小
+
+通过 `limit` 限制单个文件大小（MB）。
+
+```jsx
+import { CHRUpload } from '@chr/components';
+import { useState } from 'react';
+
+export default () => {
+  const [fileList, setFileList] = useState([]);
+
+  const handleChange = (file, newFileList) => {
+    setFileList(newFileList);
+  };
+
+  return (
+    <CHRUpload
+      url="http://localhost:3000/upload"
+      value={fileList}
+      handleChange={handleChange}
+      limit={5}
+    />
+  );
+};
+```
+
+### 自定义接受类型
+
+通过 `accept` 限制文件类型。
+
+```jsx
+import { CHRUpload } from '@chr/components';
+import { useState } from 'react';
+
+export default () => {
+  const [fileList, setFileList] = useState([]);
+
+  const handleChange = (file, newFileList) => {
+    setFileList(newFileList);
+  };
+
+  return (
+    <CHRUpload
+      url="http://localhost:3000/upload"
+      value={fileList}
+      handleChange={handleChange}
+      accept=".jpg,.png"
+    />
+  );
+};
+```
+
+### 携带 Token
+
+通过 `token` 添加认证头。
+
+```jsx
+import { CHRUpload } from '@chr/components';
+import { useState } from 'react';
+
+export default () => {
+  const [fileList, setFileList] = useState([]);
+
+  const handleChange = (file, newFileList) => {
+    setFileList(newFileList);
+  };
+
+  return (
+    <CHRUpload
+      url="http://localhost:3000/upload"
+      value={fileList}
+      handleChange={handleChange}
+      token="your-jwt-token"
+    />
+  );
+};
+```
+
+### 自定义上传按钮
+
+通过 `children` 自定义上传触发器。
+
+```jsx
+import { CHRUpload } from '@chr/components';
+import { useState } from 'react';
+import { Button } from 'antd';
+
+export default () => {
+  const [fileList, setFileList] = useState([]);
+
+  const handleChange = (file, newFileList) => {
+    setFileList(newFileList);
+  };
+
+  return (
+    <CHRUpload
+      url="http://localhost:3000/upload"
+      value={fileList}
+      handleChange={handleChange}
+    >
+      <Button type="primary">点击上传</Button>
+    </CHRUpload>
+  );
+};
+```
+
+## API
+
+| 属性         | 说明                         | 类型                     | 默认值                      |
+| ------------ | ---------------------------- | ------------------------ | --------------------------- |
+| uploadType   | 上传类型，`avatar` 或 `file` | string                   | `'file'`                    |
+| url          | 上传地址                     | string                   | -                           |
+| token        | 认证 token，会添加到请求头   | string                   | -                           |
+| maxCount     | 最大上传数量                 | number                   | `1`                         |
+| limit        | 文件大小限制（MB）           | number                   | `10`（file）/ `2`（avatar） |
+| accept       | 接受的文件类型               | string                   | -                           |
+| handleChange | 文件变化时的回调             | (file, fileList) => void | -                           |
+| value        | 文件列表，受控属性           | UploadFile[]             | []                          |
+| children     | 自定义上传触发器             | ReactNode                | -                           |

package/packages/components/src/Upload/index.tsx

@@ -0,0 +1,218 @@
+import { Image } from 'antd';
+import type { UploadProps } from 'antd/es/upload';
+import type { UploadChangeParam, UploadFile } from 'antd/es/upload/interface';
+import { ReactNode, useCallback, useMemo, useState } from 'react';
+import { antd, CHRButton, CHRIcon } from '..';
+
+interface CHRUploadProps {
+  children?: ReactNode;
+  uploadType?: 'avatar' | 'file';
+  url?: string;
+  token?: string;
+  maxCount?: number;
+  limit?: number;
+  accept?: string;
+  handleChange?: (file: UploadFile, fileList: UploadFile[]) => void;
+  value: UploadFile[];
+}
+
+const CHRUpload = ({
+  value,
+  children,
+  uploadType = 'file',
+  url,
+  token,
+  maxCount = 1,
+  limit,
+  accept: acceptProp,
+  handleChange,
+  ...restProps
+}: CHRUploadProps &
+  Omit<
+    UploadProps,
+    'onChange' | 'fileList' | 'action' | 'headers' | 'accept' | 'maxCount'
+  >) => {
+  const className = restProps.className;
+  const [fileList, setFileList] = useState<UploadFile[]>(value || []);
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [previewImage, setPreviewImage] = useState('');
+
+  const getDefaultAccept = useCallback(() => {
+    if (uploadType === 'avatar') return 'image/*';
+    return undefined;
+  }, [uploadType]);
+
+  const getDefaultLimit = useCallback(() => {
+    if (uploadType === 'avatar') return 2;
+    if (uploadType === 'file') return 10;
+    return undefined;
+  }, [uploadType]);
+
+  const finalAccept = acceptProp ?? getDefaultAccept();
+  const finalLimit = limit ?? getDefaultLimit();
+
+  const beforeUpload = useCallback(
+    (file: File) => {
+      if (finalLimit) {
+        const isLimit = file.size / 1024 / 1024 < finalLimit;
+        if (!isLimit) {
+          antd.message.error(`文件大小不能超过 ${finalLimit}MB`);
+          return antd.Upload.LIST_IGNORE;
+        }
+      }
+      if (finalAccept) {
+        const acceptList = finalAccept.split(',').map((item) => item.trim());
+        const fileType = file.type;
+        const fileName = file.name;
+        const isAccept = acceptList.some((accept) => {
+          if (accept.endsWith('/*')) {
+            const mainType = accept.replace('/*', '');
+            return fileType.startsWith(mainType + '/');
+          }
+          if (accept.startsWith('.')) {
+            return fileName.endsWith(accept);
+          }
+          return fileType === accept;
+        });
+        if (!isAccept && acceptList.length > 0) {
+          antd.message.error(`不支持的文件类型，仅支持 ${finalAccept}`);
+          return antd.Upload.LIST_IGNORE;
+        }
+      }
+      return true;
+    },
+    [finalLimit, finalAccept],
+  );
+
+  const handleUploadChange = useCallback(
+    (info: UploadChangeParam<UploadFile>) => {
+      const { file, fileList: newFileList } = info;
+
+      let fileUrl = file.url;
+      if (file.response) {
+        fileUrl = file.response.file?.url || file.response.url;
+      }
+
+      // 1. 状态提示
+      if (file.status === 'done') {
+        antd.message.success(`${file.name} 上传成功`);
+        file.url = fileUrl;
+      } else if (file.status === 'error') {
+        antd.message.error(`${file.name} 上传失败`);
+        file.status = 'error';
+      }
+
+      let finalFileList = maxCount ? newFileList.slice(-maxCount) : newFileList;
+
+      finalFileList = finalFileList.map((item) => {
+        if (item.uid === file.uid) {
+          return { ...item, url: fileUrl, status: file.status };
+        }
+        return item;
+      });
+
+      setFileList(finalFileList);
+
+      const simplifiedList = finalFileList.map((e: UploadFile) => ({
+        uid: e.uid,
+        name: e.name,
+        url: e.url || '',
+        status: e.status,
+      }));
+      handleChange?.(file, simplifiedList);
+    },
+    [maxCount, handleChange],
+  );
+
+  const headers = useMemo(() => {
+    if (token) {
+      return { Authorization: `Bearer ${token}` };
+    }
+    return undefined;
+  }, [token]);
+
+  const getBase64 = (file: File): Promise<string> =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result as string);
+      reader.onerror = (error) => reject(error);
+    });
+
+  const handlePreview = useCallback(async (file: UploadFile) => {
+    if (!file.url && !file.preview && file.originFileObj) {
+      file.preview = await getBase64(file.originFileObj as File);
+    }
+    setPreviewImage(file.url || (file.preview as string));
+    setPreviewOpen(true);
+  }, []);
+
+  const avatarUploadButton = (
+    <button style={{ border: 0, background: 'none' }} type="button">
+      <CHRIcon icon="PlusOutlined" />
+      <div style={{ marginTop: 8 }}>上传</div>
+    </button>
+  );
+
+  const renderByType = () => {
+    if (uploadType === 'avatar') {
+      return (
+        <>
+          <antd.Upload
+            name="file"
+            listType="picture-card"
+            className={className}
+            action={url}
+            headers={headers}
+            accept={finalAccept}
+            fileList={fileList}
+            beforeUpload={beforeUpload}
+            onChange={handleUploadChange}
+            onPreview={handlePreview}
+            maxCount={1}
+            {...restProps}
+          >
+            {fileList.length >= 1 ? null : avatarUploadButton}
+          </antd.Upload>
+          {previewImage && (
+            <Image
+              style={{ display: 'none' }}
+              preview={{
+                open: previewOpen,
+                onOpenChange: (visible) => setPreviewOpen(visible),
+                afterOpenChange: (visible) => !visible && setPreviewImage(''),
+              }}
+              src={previewImage}
+            />
+          )}
+        </>
+      );
+    }
+
+    return (
+      <antd.Upload
+        className={className}
+        action={url}
+        headers={headers}
+        accept={finalAccept}
+        beforeUpload={beforeUpload}
+        fileList={fileList}
+        onChange={handleUploadChange}
+        maxCount={maxCount}
+        multiple={maxCount > 1}
+        {...restProps}
+      >
+        {children || (
+          <CHRButton>
+            <CHRIcon icon="UploadOutlined" />
+            上传文件
+          </CHRButton>
+        )}
+      </antd.Upload>
+    );
+  };
+
+  return renderByType();
+};
+
+export default CHRUpload;

package/packages/components/src/antd/index.md

@@ -0,0 +1,12 @@
+# antd
+
+This is an example component.
+
+```jsx
+import { Switch } from 'antd';
+
+const onChange = (checked) => {
+  console.log(`switch to ${checked}`);
+};
+export default () => <Switch defaultChecked onChange={onChange} />;
+```

package/packages/components/src/antd/index.tsx

@@ -0,0 +1,2 @@
+import * as antd from 'antd';
+export default antd;

package/packages/components/src/index.md

@@ -0,0 +1,23 @@
+---
+nav:
+  title: 基础组件
+  order: 0
+---
+
+# 快速开始
+
+:::code-group
+
+```bash [npm]
+npm install @kc-components
+```
+
+```bash [yarn]
+yarn add @kc-components
+```
+
+```bash [pnpm]
+pnpm add @kc-components
+```
+
+:::

package/packages/components/src/index.ts

@@ -0,0 +1,5 @@
+import CHRButton from './Button';
+import CHRIcon from './Icon';
+import CHRUpload from './Upload';
+import antd from './antd';
+export { CHRButton, CHRIcon, CHRUpload, antd };

package/packages/components/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "baseUrl": ".",
+    "paths": {
+      "@kc-components/*": ["packages/*/src"]
+    },
+
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+
+    "skipLibCheck": true,
+    "types": ["react", "react-dom"],
+
+    "strict": true,
+    "noImplicitAny": false,
+    "forceConsistentCasingInFileNames": true,
+
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+
+    "sourceMap": true,
+    "inlineSources": true,
+    "importHelpers": false
+  },
+
+  /* 文件范围控制 */
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "es", "lib"]
+}

package/packages/utils/README.md

@@ -0,0 +1,11 @@
+# `utils`
+
+> TODO: description
+
+## Usage
+
+```
+const utils = require('utils');
+
+// TODO: DEMONSTRATE API
+```

package/packages/utils/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@chr/utils",
+  "version": "1.0.0",
+  "description": "通用方法",
+  "keywords": [
+    "util"
+  ],
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "lib/index.js",
+  "unpkg": "dist/index.min.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
+  "files": [
+    "es",
+    "lib",
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "rollup": "^4.38.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "@chr/components": "workspace:*",
+    "alova": "catalog:"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}