add arco

examples/arco-pro/.env.development

@@ -0,0 +1,2 @@
+PORT=3000
+EXTEND_ESLINT=true

examples/arco-pro/.eslintignore

@@ -0,0 +1 @@
+node_modules

examples/arco-pro/.gitignore

@@ -0,0 +1,41 @@
+# See https://github.com/proxy/help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+dist
+/rspack-stats.json
+/webpack-stats.json

examples/arco-pro/README.md

@@ -0,0 +1,13 @@
+# Arco Design Pro
+
+## 快速开始
+
+```
+// 初始化项目
+npm install
+
+// 开发模式
+npm run dev
+
+// 构建
+npm run build

examples/arco-pro/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>

examples/arco-pro/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "example-arco-design-pro",
+  "version": "1.0.0",
+  "description": "Arco Design Pro",
+  "private": true,
+  "scripts": {
+    "dev": "rspack serve",
+    "build": "rspack build",
+    "analyze": "pnpm run build --analyze",
+    "preview": "cd dist && serve -s",
+    "bundle-stats": "rspack build --json ./rspack-stats.json"
+  },
+  "dependencies": {
+    "@antv/data-set": "^0.11.8",
+    "@arco-design/color": "^0.4.0",
+    "@arco-design/web-react": "2.29.2",
+    "@arco-themes/react-arco-pro": "^0.0.7",
+    "@loadable/component": "^5.15.2",
+    "@turf/turf": "^6.5.0",
+    "arco-design-pro": "^2.3.0",
+    "axios": "^0.24.0",
+    "bizcharts": "^4.1.15",
+    "classnames": "^2.3.1",
+    "copy-to-clipboard": "^3.3.1",
+    "dayjs": "^1.10.7",
+    "lodash": "^4.17.21",
+    "mockjs": "^1.1.0",
+    "nprogress": "^0.2.0",
+    "query-string": "^6.14.1",
+    "react": "^17.0.2",
+    "react-color": "^2.19.3",
+    "react-dom": "^17.0.2",
+    "react-redux": "^7.2.6",
+    "react-router": "^5.2.1",
+    "react-router-dom": "^5.3.0",
+    "redux": "^4.1.2",
+    "regenerator-runtime": "0.13.9"
+  },
+  "devDependencies": {
+    "serve": "14.1.2",
+    "@rspack/plugin-react-refresh": "0.3.14",
+    "@rspack/cli": "0.3.14",
+    "@rspack/core": "0.3.14",
+    "@rspack/plugin-html": "0.3.14",
+    "@svgr/webpack": "^6.5.1",
+    "@swc/core": "^1.3.14",
+    "bundle-stats": "^4.1.2",
+    "css-loader": "^6.7.1",
+    "html-webpack-plugin": "^5.5.0",
+    "less-loader": "^11.1.0",
+    "postcss-loader": "7.0.2",
+    "mini-css-extract-plugin": "^2.6.1",
+    "style-loader": "^3.3.1",
+    "swc-loader": "^0.2.3"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "rspack": {}
+}

examples/arco-pro/patches/mock.js

@@ -0,0 +1,11 @@
+export default {
+	setup() {},
+	mock() {
+		return {};
+	},
+	XHR: {
+		prototype: {
+			withCredentials: true
+		}
+	}
+};

examples/arco-pro/rspack.config.js

@@ -0,0 +1,74 @@
+const path = require("path");
+const rspack = require("@rspack/core");
+const { default: HtmlPlugin } = require("@rspack/plugin-html");
+
+const prod = process.env.NODE_ENV === "production";
+
+/** @type {import('@rspack/cli').Configuration} */
+const config = {
+	context: __dirname,
+	entry: "./src/index.tsx",
+	target: ["web", "es5"],
+	devServer: {
+		port: 5555,
+		webSocketServer: "sockjs",
+		historyApiFallback: true
+	},
+	module: {
+		rules: [
+			{
+				test: /\.less$/,
+				use: "less-loader",
+				type: "css"
+			},
+			{
+				test: /\.module\.less$/,
+				use: "less-loader",
+				type: "css/module"
+			},
+			{
+				test: /\.svg$/,
+				use: "@svgr/webpack"
+			},
+			{
+				test: /\.png$/,
+				type: "asset"
+			}
+		]
+	},
+	resolve: {
+		alias: {
+			"@": path.resolve(__dirname, "src"),
+		}
+	},
+	output: {
+		publicPath: "/",
+		filename: "[name].[contenthash].js"
+	},
+	optimization: {
+		realContentHash: true,
+		splitChunks: {
+			cacheGroups: {
+				someVendor: {
+					chunks: "all",
+					minChunks: 2
+				}
+			}
+		}
+	},
+	plugins: [
+		new HtmlPlugin({
+			title: "Arco Pro App",
+			template: path.join(__dirname, "index.html"),
+			favicon: path.join(__dirname, "public", "favicon.ico")
+		}),
+		//new rspack.ProgressPlugin({})
+	],
+	infrastructureLogging: {
+		debug: false
+	},
+	builtins: {
+		progress:true
+	}
+};
+module.exports = config;

examples/arco-pro/src/components/Chart/area-polar.tsx

@@ -0,0 +1,84 @@
+import DataSet from '@antv/data-set'
+import { Spin } from '@arco-design/web-react'
+import { Area, Axis, Chart, Coordinate, Legend, Line, Tooltip } from 'bizcharts'
+import React from 'react'
+import CustomTooltip from './customer-tooltip'
+
+interface AreaPolarProps {
+  data: any[]
+  loading: boolean
+  fields: string[]
+  height: number
+}
+function AreaPolar(props: AreaPolarProps) {
+  const { data, loading, fields, height } = props
+
+  const { DataView } = DataSet
+  const dv = new DataView().source(data)
+  dv.transform({
+    type: 'fold',
+    fields: fields, // 展开字段集
+    key: 'category', // key字段
+    value: 'score', // value字段
+  })
+
+  return (
+    <Spin loading={loading} style={{ width: '100%' }}>
+      <Chart
+        height={height || 400}
+        padding={0}
+        data={dv.rows}
+        autoFit
+        scale={{
+          score: {
+            min: 0,
+            max: 80,
+          },
+        }}
+        interactions={['legend-highlight']}
+        className={'chart-wrapper'}
+      >
+        <Coordinate type="polar" radius={0.8} />
+        <Tooltip shared>
+          {(title, items) => {
+            return <CustomTooltip title={title} data={items} />
+          }}
+        </Tooltip>
+        <Line
+          position="item*score"
+          size="2"
+          color={['category', ['#313CA9', '#21CCFF', '#249EFF']]}
+        />
+        <Area
+          position="item*score"
+          tooltip={false}
+          color={[
+            'category',
+            [
+              'rgba(49, 60, 169, 0.4)',
+              'rgba(33, 204, 255, 0.4)',
+              'rgba(36, 158, 255, 0.4)',
+            ],
+          ]}
+        />
+        <Axis name="score" label={false} />
+        <Legend
+          position="right"
+          marker={(_, index) => {
+            return {
+              symbol: 'circle',
+              style: {
+                r: 4,
+                lineWidth: 0,
+                fill: ['#313CA9', '#21CCFF', '#249EFF'][index],
+              },
+            }
+          }}
+          name="category"
+        />
+      </Chart>
+    </Spin>
+  )
+}
+
+export default AreaPolar