@aozi6666/bee-design 0.1.2 → 0.2.2

package/dist/main.d.ts

@@ -0,0 +1 @@
+import "./styles/index.scss";

package/dist/setupIcons.d.ts

@@ -0,0 +1 @@
+export declare function setupIcons(): void;

package/dist/setupTests.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/package.json

@@ -1,59 +1,24 @@
 {
   "name": "@aozi6666/bee-design",
   "private": false,
-  "version": "0.1.2",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/aozi6666/Bee-Design.git"
-  },
-  "homepage": "https://github.com/aozi6666/Bee-Design",
-  "bugs": {
-    "url": "https://github.com/aozi6666/Bee-Design/issues"
-  },
+  "version": "0.2.2",
   "type": "module",
   "files": [
-    "build",
+    "dist",
     "README.md"
   ],
-  "main": "build/index.js",
-  "module": "build/index.js",
-  "types": "build/index.d.ts",
-  "scripts": {
-    "dev": "vite",
-    "clean": "rimraf ./build",
-    "lint": "eslint --ext js,ts,tsx src --max-warnings 5",
-    "lint:fix": "npm run lint -- --fix",
-    "stylelint": "stylelint \"src/**/*.{css,scss}\"",
-    "stylelint:fix": "npm run stylelint -- --fix",
-    "format": "prettier --write .",
-    "format:check": "prettier --check .",
-    "lint:staged": "lint-staged",
-    "build": "npm run clean && npm run build-ts && npm run build-css",
-    "build-ts": "tsc -p tsconfig.build.json",
-    "build-css": "sass ./src/styles/index.scss ./build/index.css",
-    "webpack:dev": "webpack",
-    "webpack:build": "NODE_ENV=production webpack",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build:site": "vite build",
-    "preview": "vite preview",
-    "test": "jest",
-    "test:ci": "cross-env CI=true jest",
-    "prepublishOnly": "npm run test:ci && npm run lint && npm run build",
-    "prepare": "husky"
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "eslint --fix",
-      "prettier --write"
-    ],
-    "*.{css,scss}": [
-      "stylelint --fix",
-      "prettier --write"
-    ],
-    "*.{json,md,mdx,yml,yaml}": [
-      "prettier --write"
-    ]
+  "main": "dist/index.cjs",
+  "unpkg": "dist/index.umd.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.esm.js"
+    },
+    "./style.css": "./dist/index.css"
   },
   "peerDependencies": {
     "react": "^18 || ^19",
@@ -65,17 +30,17 @@
     "@fortawesome/react-fontawesome": "^3.2.0",
     "axios": "^1.13.6",
     "classnames": "^2.5.1",
-    "cross-env": "^10.1.0",
     "lodash": "^4.17.23",
-    "react-transition-group": "^4.4.5"
+    "react-transition-group": "^4.4.5",
+    "@aozi6666/bee-utils": "0.1.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.0.1",
     "@eslint/js": "^9.39.1",
-    "@storybook/addon-a11y": "^10.2.17",
-    "@storybook/addon-docs": "^10.2.17",
-    "@storybook/addon-onboarding": "^10.2.17",
-    "@storybook/addon-vitest": "^10.2.17",
+    "@rollup/plugin-commonjs": "^26.0.0",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-replace": "^6.0.1",
+    "@rollup/plugin-terser": "^0.4.4",
     "@storybook/react-vite": "^10.2.17",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
@@ -87,44 +52,28 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@types/react-transition-group": "^4.4.12",
-    "@vitejs/plugin-react": "^5.1.1",
-    "@vitest/browser-playwright": "^4.0.18",
-    "@vitest/coverage-v8": "^4.0.18",
-    "css-loader": "^7.1.4",
+    "cross-env": "^10.1.0",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
-    "eslint-plugin-storybook": "^10.2.17",
     "globals": "^16.5.0",
-    "html-webpack-plugin": "^5.6.6",
-    "husky": "^9.1.7",
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^30.3.0",
-    "playwright": "^1.58.2",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
     "rimraf": "^6.1.3",
+    "rollup": "^4.30.0",
+    "rollup-plugin-exclude-dependencies-from-bundle": "^1.1.24",
+    "rollup-plugin-sass": "^1.12.24",
+    "rollup-plugin-typescript2": "^0.36.0",
     "sass": "^1.97.3",
     "sass-embedded": "^1.97.3",
-    "storybook": "^10.2.17",
-    "style-loader": "^4.0.0",
-    "stylelint": "^17.4.0",
-    "stylelint-config-standard": "^40.0.0",
+    "stylelint": "^16.23.1",
+    "stylelint-config-standard": "^35.0.0",
     "stylelint-config-standard-scss": "^16.0.0",
     "stylelint-scss": "^7.0.0",
-    "terser-webpack-plugin": "^5.4.0",
-    "postcss-scss": "^4.0.9",
-    "prettier": "3.8.1",
-    "lint-staged": "^16.4.0",
     "ts-jest": "^29.4.6",
-    "ts-loader": "^9.5.4",
+    "tslib": "^2.8.1",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.48.0",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.18",
-    "webpack": "^5.105.4",
-    "webpack-cli": "^7.0.0",
-    "webpack-dev-server": "^5.2.3"
+    "typescript-eslint": "^8.48.0"
   },
   "jest": {
     "preset": "ts-jest/presets/default-esm",
@@ -147,6 +96,27 @@
           "useESM": true
         }
       ]
+    },
+    "moduleNameMapper": {
+      "^@aozi6666/bee-utils$": "<rootDir>/../utils/dist/cjs/index.js"
     }
+  },
+  "scripts": {
+    "clean": "rimraf ./build ./dist",
+    "typecheck": "tsc -p tsconfig.build.json --noEmit",
+    "lint": "eslint --ext js,ts,tsx src --max-warnings 5",
+    "lint:fix": "pnpm lint -- --fix",
+    "stylelint": "stylelint \"src/**/*.{css,scss}\"",
+    "stylelint:fix": "pnpm stylelint -- --fix",
+    "build": "pnpm clean && pnpm build:types && pnpm build:bundle",
+    "build:types": "tsc -p tsconfig.build.json",
+    "build:bundle": "pnpm build:bundle:esm && pnpm build:bundle:cjs && pnpm build:bundle:umd && pnpm build:css",
+    "build:bundle:esm": "rollup -c rollup/rollup.esm.config.js",
+    "build:bundle:cjs": "rollup -c rollup/rollup.cjs.config.js",
+    "build:bundle:umd": "rollup -c rollup/rollup.umd.config.js",
+    "build:css": "sass src/styles/index.scss dist/index.css --no-source-map",
+    "test": "jest",
+    "test:ci": "cross-env CI=true jest",
+    "release": "pnpm typecheck && pnpm test:ci && pnpm lint && pnpm build"
   }
-}
+}

package/README.md

@@ -1,182 +0,0 @@
-## Bee Design
-
-React UI Component Library inspired by Honeycomb 🐝  
-一个基于 React + TypeScript 的轻量级组件库，用来练习和演示现代前端工程化（组件开发、单元测试、Storybook、CI 等）实践。
-
-### GitHub
-
-`https://github.com/aozi6666/Bee-Design`
-
-### Install
-
-```bash
-npm install @aozi6666/bee-design
-# or
-yarn add @aozi6666/bee-design
-```
-
-### Quick Start
-
-```tsx
-import React from "react";
-import { createRoot } from "react-dom/client";
-import BeeButton from "@aozi6666/bee-design/build/components/Button";
-import "@aozi6666/bee-design/build/index.css";
-
-const App = () => (
-  <div style={{ padding: 24 }}>
-    <BeeButton>Bee Design Button</BeeButton>
-  </div>
-);
-
-createRoot(document.getElementById("root")!).render(<App />);
-```
-
-> **提示**：发布到 npm 后，推荐在业务项目中通过别名导入，如 `import { Button } from '@aozi6666/bee-design'`。当前版本的打包入口为 `build/index.js`，已经在 `package.json` 中配置好。
-
----
-
-## Features
-
-- **基于 React + TypeScript**：完整的类型定义，开发体验友好。
-- **现代工程化**：使用 Vite 开发体验、本地 Storybook 文档、Jest + Testing Library 单元测试、ESLint 规范代码。
-- **常用基础组件**：涵盖表单、导航、反馈等常见场景。
-- **渐进式学习**：代码中包含一定注释，适合学习组件封装、hooks 抽离以及 TS 类型设计。
-
----
-
-## Components
-
-Bee Design 当前提供以下组件（持续扩展中）：
-
-- **Button 按钮**
-  - 类型：`primary` / `default` / `danger` / `link`
-  - 支持 `href` / `target`、禁用状态等
-- **Input 输入框**
-  - 支持前后缀图标、禁用状态、清空等能力
-- **AutoComplete 自动完成**
-  - 根据输入关键字异步 / 同步返回候选项
-  - 支持自定义下拉项渲染（`renderOption`）
-- **Upload 上传**
-  - 支持点击上传、拖拽上传（`drag`）、上传进度展示、文件列表
-  - 提供原生表单上传示例和 `axios` 上传方式
-- **Menu 菜单**
-  - 水平 / 垂直导航菜单
-  - 支持子菜单展开、选中高亮
-- **Icon 图标**
-  - 基于 Font Awesome 封装
-  - 支持主题颜色、尺寸、旋转动画等
-- **Progress 进度条**
-  - 支持不同主题颜色和高度
-- **Transition 动画**
-  - 对 `react-transition-group` 的简单封装，用于出入场动画
-- **Hooks**
-  - `useClickOutside`：点击组件外区域的处理
-  - `useDebounce`：防抖输入处理
-
-具体用法可以查看 `src/components` 下各个组件的 `*.stories.tsx` 示例和测试用例。
-
----
-
-## Usage Example
-
-以 `AutoComplete` 为例：
-
-```tsx
-import React, { useCallback } from "react";
-import AutoComplete, {
-  type DataSourceType,
-} from "@aozi6666/bee-design/build/components/AutoComplete";
-import "@aozi6666/bee-design/build/index.css";
-
-interface LakerPlayer {
-  value: string;
-  number: number;
-}
-
-const players: Array<DataSourceType<LakerPlayer>> = [
-  { value: "bradley", number: 11 },
-  { value: "james", number: 23 },
-  // ...
-];
-
-const Demo = () => {
-  const fetchSuggestions = useCallback(
-    (query: string) => players.filter((p) => p.value.toLowerCase().includes(query.toLowerCase())),
-    [],
-  );
-
-  return (
-    <AutoComplete fetchSuggestions={fetchSuggestions} placeholder="输入湖人队球员英文名试试" />
-  );
-};
-```
-
-> **建议**：`fetchSuggestions` 推荐使用 `useCallback` 包裹，避免在父组件重复渲染时创建新函数，从而触发不必要的副作用或额外请求。
-
-更多示例请参考仓库中的 `src/App.tsx` 和 Storybook 故事文件。
-
----
-
-## Local Development
-
-克隆仓库：
-
-```bash
-git clone https://github.com/aozi6666/Bee-Design.git
-cd Bee-Design
-npm install
-```
-
-本地开发预览：
-
-```bash
-npm run dev
-```
-
-运行 Storybook：
-
-```bash
-npm run storybook
-```
-
-运行单元测试：
-
-```bash
-npm run test
-# CI 模式（用于 prepublish）
-npm run test:ci
-```
-
-构建组件库（打包到 `build/` 目录）：
-
-```bash
-npm run build
-```
-
-发布前检查脚本（测试 + lint + build）：
-
-```bash
-npm run prepublishOnly
-```
-
----
-
-## Scripts
-
-- **`npm run dev`**: 使用 Vite 启动开发服务器
-- **`npm run build`**: 构建 TypeScript 和样式到 `build/`
-- **`npm run lint`**: 使用 ESLint 检查 `src` 下的代码
-- **`npm run test` / `npm run test:ci`**: 使用 Jest + Testing Library 运行单元测试
-- **`npm run storybook` / `npm run build-storybook`**: 启动或构建 Storybook 文档站点
-
----
-
-## Roadmap
-
-- [ ] 完善文档站点与在线 Demo
-- [ ] 增加更多表单组件（`Select` / `Checkbox` / `Radio` 等）
-- [ ] 增加 Layout、Modal 等业务常用组件
-- [ ] 打包为更符合行业习惯的 API 形式（`import { Button } from '@aozi6666/bee-design'`）
-
-欢迎在 GitHub 上提 issue 或 PR，一起完善 Bee Design 🐝。

package/build/App.d.ts

@@ -1,4 +0,0 @@
-import type { FC } from 'react';
-import './styles/index.scss';
-declare const App: FC;
-export default App;

package/build/App.js

@@ -1,137 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import './styles/index.scss';
-import Button from './components/Button/button';
-import { ButtonType } from './components/Button/button.types';
-import Upload from './components/Upload';
-import Icon from './components/Icon';
-import Progress from './components/Progress';
-import AutoComplete from './components/AutoComplete';
-const App = () => {
-    const defaultUploadList = [
-        {
-            uid: '1',
-            size: 1024,
-            name: '已上传文件.png',
-            status: 'success',
-            percent: 100,
-        },
-        {
-            uid: '2',
-            size: 2048,
-            name: '上传中文件.jpg',
-            status: 'uploading',
-            percent: 40,
-        },
-    ];
-    const lakersWithNumber = [
-        { value: 'bradley', number: 11 },
-        { value: 'pope', number: 1 },
-        { value: 'caruso', number: 4 },
-        { value: 'cook', number: 2 },
-        { value: 'cousins', number: 15 },
-        { value: 'james', number: 23 },
-        { value: 'AD', number: 3 },
-        { value: 'green', number: 14 },
-        { value: 'howard', number: 39 },
-        { value: 'kuzma', number: 0 },
-    ];
-    const handleAutoCompleteFetch = (query) => {
-        return lakersWithNumber.filter((player) => player.value.toLowerCase().includes(query.toLowerCase()));
-    };
-    return (_jsx("div", { style: {
-            minHeight: '100vh',
-            padding: '40px 24px 80px',
-            background: 'radial-gradient(circle at top left, #f0f5ff 0, transparent 50%), radial-gradient(circle at bottom right, #fff1f0 0, transparent 55%)',
-            fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif',
-        }, children: _jsxs("div", { style: {
-                maxWidth: 960,
-                margin: '0 auto',
-            }, children: [_jsxs("header", { style: {
-                        marginBottom: 32,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        gap: 16,
-                    }, children: [_jsxs("div", { children: [_jsx("h1", { style: { margin: 0, fontSize: 28 }, children: "Cream Design \u7EC4\u4EF6\u5E93" }), _jsx("p", { style: { margin: '8px 0 0', color: '#595959', fontSize: 14 }, children: "\u4E00\u5957\u7528\u6765\u7EC3\u4E60 React + TypeScript \u7684\u8F7B\u91CF\u7EC4\u4EF6\u793A\u4F8B\u3002" })] }), _jsxs("div", { style: { display: 'flex', gap: 12 }, children: [_jsx(Button, { btnType: ButtonType.Primary, children: "\u67E5\u770B\u6587\u6863" }), _jsx(Button, { btnType: ButtonType.Default, children: "Git \u4ED3\u5E93" })] })] }), _jsxs("main", { style: {
-                        display: 'grid',
-                        gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 1fr)',
-                        gap: 24,
-                        alignItems: 'flex-start',
-                    }, children: [_jsxs("section", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                gap: 24,
-                            }, children: [_jsxs("div", { style: {
-                                        padding: 24,
-                                        borderRadius: 12,
-                                        background: '#ffffff',
-                                        boxShadow: '0 8px 24px rgba(15, 23, 42, 0.06)',
-                                    }, children: [_jsx("h2", { style: { margin: 0, marginBottom: 16, fontSize: 18 }, children: "Button \u7EC4\u4EF6\u6F14\u793A" }), _jsx("p", { style: { margin: '0 0 16px', color: '#8c8c8c', fontSize: 13 }, children: "\u4E0D\u540C\u7C7B\u578B\u6309\u94AE\u548C\u94FE\u63A5\u6309\u94AE\uFF0C\u9002\u5408\u4F5C\u4E3A\u9875\u9762\u4E3B\u64CD\u4F5C\u3001\u6B21\u8981\u64CD\u4F5C\u548C\u6587\u672C\u94FE\u63A5\u3002" }), _jsxs("div", { style: {
-                                                display: 'flex',
-                                                flexWrap: 'wrap',
-                                                gap: 12,
-                                            }, children: [_jsx(Button, { btnType: ButtonType.Primary, children: "Primary Button" }), _jsx(Button, { btnType: ButtonType.Default, children: "Default Button" }), _jsx(Button, { btnType: ButtonType.Danger, children: "Danger Button" }), _jsx(Button, { btnType: ButtonType.Link, href: "https://www.baidu.com/", children: "Link \u767E\u5EA6" }), _jsx(Button, { btnType: ButtonType.Link, href: "https://www.baidu.com/", target: "_blank", children: "Link \u767E\u5EA6(\"\u65B0\u7A97\u53E3\u6253\u5F00\")" })] })] }), _jsxs("div", { style: {
-                                        padding: 24,
-                                        borderRadius: 12,
-                                        background: '#ffffff',
-                                        boxShadow: '0 8px 24px rgba(15, 23, 42, 0.06)',
-                                    }, children: [_jsx("h2", { style: { margin: 0, marginBottom: 16, fontSize: 18 }, children: "Upload \u7EC4\u4EF6\u6F14\u793A" }), _jsx("p", { style: { margin: '0 0 16px', color: '#8c8c8c', fontSize: 13 }, children: "\u652F\u6301\u70B9\u51FB\u9009\u62E9\u3001\u62D6\u62FD\u4E0A\u4F20\u3001\u4E0A\u4F20\u8FDB\u5EA6\u663E\u793A\u548C\u6587\u4EF6\u5217\u8868\u7BA1\u7406\u3002" }), _jsxs("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'column',
-                                                gap: 16,
-                                                alignItems: 'stretch',
-                                            }, children: [_jsx(Upload, { action: "https://jsonplaceholder.typicode.com/posts", defaultFileList: defaultUploadList, children: _jsx(Button, { btnType: ButtonType.Primary, children: "\u70B9\u51FB\u4E0A\u4F20" }) }), _jsx(Upload, { action: "https://jsonplaceholder.typicode.com/posts", drag: true, children: _jsx("div", { style: {
-                                                            padding: '20px 40px',
-                                                            border: '1px dashed #d9d9d9',
-                                                            borderRadius: 4,
-                                                            textAlign: 'center',
-                                                            color: '#595959',
-                                                            background: '#fafafa',
-                                                        }, children: "\u62D6\u62FD\u6587\u4EF6\u5230\u6B64\u5904\uFF0C\u6216\u70B9\u51FB\u4E0A\u4F20" }) })] })] })] }), _jsxs("section", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                gap: 24,
-                            }, children: [_jsxs("div", { style: {
-                                        padding: 24,
-                                        borderRadius: 12,
-                                        background: '#ffffff',
-                                        boxShadow: '0 8px 24px rgba(15, 23, 42, 0.06)',
-                                    }, children: [_jsx("h2", { style: { margin: 0, marginBottom: 16, fontSize: 18 }, children: "Icon \u7EC4\u4EF6\u6F14\u793A" }), _jsx("p", { style: { margin: '0 0 16px', color: '#8c8c8c', fontSize: 13 }, children: "\u57FA\u4E8E Font Awesome \u7684\u56FE\u6807\u7EC4\u4EF6\uFF0C\u652F\u6301\u4E3B\u9898\u8272\u548C\u6240\u6709\u539F\u751F\u5C5E\u6027\u3002" }), _jsxs("div", { style: {
-                                                display: 'flex',
-                                                flexWrap: 'wrap',
-                                                gap: 20,
-                                                alignItems: 'center',
-                                            }, children: [_jsx(Icon, { icon: "coffee", size: "2x" }), _jsx(Icon, { icon: "check-circle", size: "2x", theme: "success" }), _jsx(Icon, { icon: "times", size: "2x", theme: "danger" }), _jsx(Icon, { icon: "spinner", size: "2x", spin: true, theme: "primary" })] })] }), _jsxs("div", { style: {
-                                        padding: 24,
-                                        borderRadius: 12,
-                                        background: '#ffffff',
-                                        boxShadow: '0 8px 24px rgba(15, 23, 42, 0.06)',
-                                    }, children: [_jsx("h2", { style: { margin: 0, marginBottom: 16, fontSize: 18 }, children: "Progress \u7EC4\u4EF6\u6F14\u793A" }), _jsx("p", { style: { margin: '0 0 16px', color: '#8c8c8c', fontSize: 13 }, children: "\u5C55\u793A\u4EFB\u52A1\u5B8C\u6210\u8FDB\u5EA6\uFF0C\u652F\u6301\u4E0D\u540C\u4E3B\u9898\u989C\u8272\u548C\u9AD8\u5EA6\u3002" }), _jsxs("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'column',
-                                                gap: 12,
-                                            }, children: [_jsx(Progress, { percent: 30 }), _jsx(Progress, { percent: 65, theme: "success" }), _jsx(Progress, { percent: 90, theme: "danger", strokeHeight: 10 })] })] }), _jsxs("div", { style: {
-                                        padding: 24,
-                                        borderRadius: 12,
-                                        background: '#ffffff',
-                                        boxShadow: '0 8px 24px rgba(15, 23, 42, 0.06)',
-                                    }, children: [_jsx("h2", { style: { margin: 0, marginBottom: 16, fontSize: 18 }, children: "AutoComplete \u7EC4\u4EF6\u6F14\u793A" }), _jsx("p", { style: { margin: '0 0 16px', color: '#8c8c8c', fontSize: 13 }, children: "\u8F93\u5165\u5185\u5BB9\u81EA\u52A8\u7ED9\u51FA\u5019\u9009\u9879\uFF0C\u652F\u6301\u952E\u76D8\u9009\u62E9\u4E0E\u81EA\u5B9A\u4E49\u4E0B\u62C9\u6E32\u67D3\u3002" }), _jsx(AutoComplete, { fetchSuggestions: handleAutoCompleteFetch, placeholder: "\u8F93\u5165\u6E56\u4EBA\u961F\u7403\u5458\u82F1\u6587\u540D\u8BD5\u8BD5\uFF08\u5982\uFF1Aja / co\uFF09", renderOption: (item) => {
-                                                const player = item;
-                                                return (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', gap: 12 }, children: [_jsx("b", { children: player.value }), _jsxs("span", { style: { color: '#8c8c8c' }, children: ["#", player.number] })] }));
-                                            } })] })] })] }), _jsxs("div", { style: {
-                        marginTop: 40,
-                        padding: 24,
-                        borderRadius: 12,
-                        background: '#ffffff',
-                        boxShadow: '0 8px 24px rgba(15, 23, 42, 0.06)',
-                    }, children: [_jsx("h2", { style: { margin: 0, marginBottom: 16, fontSize: 18 }, children: "\u539F\u751F\u8868\u5355\u4E0A\u4F20\u793A\u4F8B" }), _jsxs("p", { style: { margin: '0 0 16px', color: '#8c8c8c', fontSize: 13 }, children: ["\u4F7F\u7528\u539F\u751F ", _jsx("code", { children: "<form>" }), " \u63D0\u4EA4\u5230\u540E\u7AEF\u63A5\u53E3\u7684\u6587\u4EF6\u4E0A\u4F20\u65B9\u5F0F\u3002"] }), _jsxs("form", { method: "post", encType: "multipart/form-data", action: "https://jsonplaceholder.typicode.com/posts", style: { marginTop: 8 }, children: [_jsx("input", { type: "file", name: "myFile" }), _jsx("button", { type: "submit", style: {
-                                        marginLeft: 12,
-                                        padding: '4px 12px',
-                                        borderRadius: 4,
-                                        border: '1px solid #1677ff',
-                                        background: '#1677ff',
-                                        color: '#fff',
-                                        cursor: 'pointer',
-                                    }, children: "Submit" })] })] })] }) }));
-};
-export default App;