@wangtaizong/components 1.0.7 → 1.1.0

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

@@ -1,34 +0,0 @@
-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

@@ -1,209 +0,0 @@
-# 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

@@ -1,218 +0,0 @@
-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

@@ -1,12 +0,0 @@
-# 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/index.md

@@ -1,23 +0,0 @@
----
-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/tsconfig.json

@@ -1,32 +0,0 @@
-{
-  "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

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

package/packages/utils/package.json

@@ -1,35 +0,0 @@
-{
-  "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/"
-  }
-}

package/packages/utils/rollup.config.mjs

@@ -1,63 +0,0 @@
-import commonjs from '@rollup/plugin-commonjs';
-import { nodeResolve } from '@rollup/plugin-node-resolve';
-import typescript from '@rollup/plugin-typescript';
-import { defineConfig } from 'rollup';
-import { terser } from 'rollup-plugin-terser';
-
-const DIR_MAP = {
-  ESM: 'es',
-  CJS: 'lib',
-  UMD: 'dist',
-};
-
-const baseConfig = (tsConfig) => ({
-  input: 'src/index.ts',
-  plugins: [
-    nodeResolve({ extensions: ['.ts'] }),
-    commonjs(),
-    typescript(tsConfig),
-  ],
-});
-
-const esmConfig = defineConfig({
-  ...baseConfig({
-    declaration: true,
-    declarationDir: DIR_MAP.ESM,
-  }),
-  output: {
-    dir: DIR_MAP.ESM,
-    format: 'esm',
-    preserveModules: true,
-  },
-});
-
-const cjsConfig = defineConfig({
-  ...baseConfig({
-    declaration: true,
-    declarationDir: DIR_MAP.CJS,
-  }),
-  output: {
-    dir: DIR_MAP.CJS,
-    format: 'cjs',
-    exports: 'named',
-  },
-});
-
-const umdConfig = defineConfig({
-  ...baseConfig(),
-  output: [
-    {
-      file: DIR_MAP.UMD + '/index.js',
-      format: 'umd',
-      name: 'KcUtils',
-    },
-    {
-      file: DIR_MAP.UMD + '/index.min.js',
-      format: 'umd',
-      name: 'KcUtils',
-      plugins: [terser()],
-    },
-  ],
-});
-
-export default defineConfig([esmConfig, cjsConfig, umdConfig]);

package/packages/utils/src/CHRRequest/index.md

@@ -1,59 +0,0 @@
-# CHRRequest
-
-## 代码演示
-
-### 基本用法
-
-```jsx
-import { alovaGet, useRequest } from '@chr/utils';
-import { CHRButton } from '@chr/components';
-
-export default function PostExample() {
-  const { loading, data, error, send } = useRequest(
-    () =>
-      alovaGet('/api/dd', {
-        meta: {
-          ignoreAuth: true,
-        },
-      }),
-    {
-      immediate: false,
-      initialData: {},
-    },
-  );
-
-  if (!data.id) {
-    return (
-      <div>
-        <CHRButton onClick={() => send()}>请求</CHRButton>
-        {loading && <div>加载中...</div>}
-        {error && <div>加载失败：{error.message}</div>}
-      </div>
-    );
-  }
-
-  // 有数据时展示详情
-  return (
-    <div>
-      <CHRButton onClick={() => send()}>请求</CHRButton>
-      <h2>文章详情</h2>
-      <p>
-        <strong>ID：</strong>
-        {data.id}
-      </p>
-      <p>
-        <strong>用户ID：</strong>
-        {data.userId}
-      </p>
-      <p>
-        <strong>标题：</strong>
-        {data.title}
-      </p>
-      <p>
-        <strong>内容：</strong>
-      </p>
-      <p>{data.body}</p>
-    </div>
-  );
-}
-```