@hw-component/form 0.0.1-bate

package/lib/config.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var _asyncToGenerator = require('@babel/runtime-corejs3/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime-corejs3/regenerator');
+var moment = require('moment');
+var util = require('./Upload/util.js');
+
+var baseConfig = {
+  fieldNames: {
+    label: "label",
+    value: "value"
+  },
+  valueCheckMap: {
+    checked: true,
+    noChecked: false
+  },
+  valueSwitchMap: {
+    open: true,
+    close: false
+  },
+  valueRangePickerValueMap: {
+    start: function start(name) {
+      return "".concat(name, "StartTime");
+    },
+    end: function end(name) {
+      return "".concat(name, "EndTime");
+    }
+  },
+  dateRanges: {
+    最近三天: [moment().subtract(2, "days").startOf("days"), moment()],
+    最近七天: [moment().subtract(6, "days").startOf("days"), moment()],
+    最近三十天: [moment().subtract(29, "days").startOf("days"), moment()]
+  },
+  uploadProps: {
+    exFiles: ["JPG", "PNG", "JPEG", "GIF"],
+    request: function () {
+      var _request = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(file) {
+        var url;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return util.fileToBase64(file);
+            case 2:
+              url = _context.sent;
+              return _context.abrupt("return", {
+                url: url
+              });
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function request(_x) {
+        return _request.apply(this, arguments);
+      }
+      return request;
+    }(),
+    maxSize: 1024 * 1024 * 1.8
+  }
+};
+
+exports.baseConfig = baseConfig;
+// powered by h

package/lib/hooks/index.d.ts

@@ -0,0 +1,13 @@
+import type { SelectProps } from "antd";
+import type { IFormConfigContextProps } from "../Form/modal";
+interface UseChangeOptionsParams {
+    options?: Record<string, any>[];
+    fieldNames?: SelectProps["fieldNames"];
+}
+export declare const useChangeOptions: ({ options, fieldNames, }: UseChangeOptionsParams) => {
+    label: any;
+    value: any;
+}[] | undefined;
+export declare const useClassName: (className: string | string[]) => string;
+export declare const useMatchConfigProps: (matchProps: IFormConfigContextProps) => IFormConfigContextProps;
+export {};

package/lib/hooks/index.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var _typeof = require('@babel/runtime-corejs3/helpers/typeof');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/map');
+var _Array$isArray = require('@babel/runtime-corejs3/core-js/array/is-array');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/concat');
+var _Object$keys = require('@babel/runtime-corejs3/core-js/object/keys');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/for-each');
+var _Symbol$toPrimitive = require('@babel/runtime-corejs3/core-js/symbol/to-primitive');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js/object/get-own-property-descriptor');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js/object/define-property');
+var React = require('react');
+var configProvider = require('antd/es/config-provider');
+var FormConfigProvider = require('../Form/Context/FormConfigProvider.js');
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[_Symbol$toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var useChangeOptions = function useChangeOptions(_ref) {
+  var options = _ref.options,
+    _ref$fieldNames = _ref.fieldNames,
+    fieldNames = _ref$fieldNames === void 0 ? {} : _ref$fieldNames;
+  return React.useMemo(function () {
+    return options === null || options === void 0 ? void 0 : _mapInstanceProperty(options).call(options, function (item) {
+      var _context;
+      var _fieldNames$label = fieldNames.label,
+        label = _fieldNames$label === void 0 ? "" : _fieldNames$label,
+        _fieldNames$value = fieldNames.value,
+        value = _fieldNames$value === void 0 ? "" : _fieldNames$value;
+      var relLabel = item[label],
+        relVal = item[value],
+        oItem = _objectWithoutProperties(item, _mapInstanceProperty(_context = [label, value]).call(_context, _toPropertyKey));
+      return _objectSpread(_objectSpread({}, oItem), {}, {
+        label: relLabel,
+        value: relVal
+      });
+    });
+  }, [options]);
+};
+var useClassName = function useClassName(className) {
+  var config = React.useContext(configProvider.ConfigContext);
+  return React.useMemo(function () {
+    var _context3;
+    if (_Array$isArray(className)) {
+      var classNames = _mapInstanceProperty(className).call(className, function (item) {
+        var _context2;
+        return _concatInstanceProperty(_context2 = "".concat(config.getPrefixCls(), "-")).call(_context2, item);
+      });
+      return classNames.join(" ");
+    }
+    return _concatInstanceProperty(_context3 = "".concat(config.getPrefixCls(), "-")).call(_context3, className);
+  }, [className]);
+};
+var useMatchConfigProps = function useMatchConfigProps(matchProps) {
+  var globalConfig = FormConfigProvider.useFormConfigContext();
+  var keys = _Object$keys(matchProps);
+  var resultMatchProps = {};
+  _forEachInstanceProperty(keys).call(keys, function (key) {
+    if (!matchProps[key]) {
+      resultMatchProps[key] = globalConfig[key];
+      return;
+    }
+    resultMatchProps[key] = matchProps[key];
+  });
+  return resultMatchProps;
+};
+
+exports.useChangeOptions = useChangeOptions;
+exports.useClassName = useClassName;
+exports.useMatchConfigProps = useMatchConfigProps;
+// powered by h

package/lib/index.css

@@ -0,0 +1,35 @@
+.ant-hw-all-check-box .ant-select-item-option-active:not( .ant-select-item-option-disabled) {
+  background-color: transparent;
+}
+.ant-hw-all-check-box .ant-select-item-option-selected:not( .ant-select-item-option-disabled) {
+  background-color: #e6f7ff;
+}
+.ant-hw-all-check-box .ant-select-item-option:not( .ant-select-item-option-selected):hover {
+  background-color: #f5f5f5;
+}
+.ant-hw-form-item-colon:after {
+  position: relative;
+  top: -0.5px;
+  margin: 0 8px 0 2px;
+  content: ":";
+}
+.ant-hw-form-item-required:before {
+  display: inline-block;
+  margin-right: 4px;
+  color: #ff4d4f;
+  font-size: 14px;
+  font-family: SimSun, sans-serif;
+  line-height: 1;
+  content: "*";
+}
+.ant-hw-form-base-item {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  min-height: 32px;
+}

package/lib/index.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import "./styles/index.less";
+export { default as HForm } from "./Form";
+export { default as useHForm } from "./Form/hooks/useHForm";
+export declare const HSelect: ({ style, mode, options, modeConfig, value, onChange, fieldNames: propsFieldNames, request, manual, optionLabelProp, filterProvider, optionFilterProp, serviceSearch, onSearch: propsOnSearch, filterOption, showSearch, labelInValue, noMatchItemRender, allSelect, ...props }: import("./Select/modal").HSelectProps) => JSX.Element;
+export declare const HInput: ({ ...props }: import("antd").InputProps) => JSX.Element;
+export declare const HSelectInput: ({ selectProps, value, onChange, valueName, ...props }: import("./Input/modal").HSelectInputProps) => JSX.Element;
+export declare const HUpload: import("react").ForwardRefExoticComponent<import("./Upload/modal").IUpLoadProps & import("react").RefAttributes<import("./Upload/modal").IUploadRefModal>>;
+export declare const HUrlUpload: ({ placeholder, value, onChange, mediaType, ...props }: import("./Upload/modal").IUrlUploadProps) => JSX.Element;
+export declare const HButtonInput: import("react").FC<import("./Input/modal").HButtonInputProps>;
+export declare const HCheckBox: import("react").FC<import("./CheckboxGroup/modal").HCheckboxProps>;
+export declare const HSwitch: import("react").FC<import("./Switch").HSwitchProps>;
+export declare const HCheckboxGroup: (props: import("./Form/modal").HFormItemProps) => import("react").ReactElement<import("./Form/modal").ConnectResultProps, string | import("react").JSXElementConstructor<any>>;
+export declare const HDatePicker: ({ value, onChange, showTime, format, ...props }: import("./TDPicker/modal").HDatePickerProps) => JSX.Element;
+export declare const HRangePicker: ({ value, onChange, showTime, format, valueMap, ranges, name, ...props }: import("./TDPicker/modal").HRangePickerProps) => JSX.Element;
+export declare const HRadioGroup: ({ value, options, onChange, fieldNames: propsFieldNames, ...props }: import("./RadioGroup").HRadioGroupProps) => JSX.Element;
+export declare const HTimePicker: ({ value, format, onChange, ...props }: import("./TDPicker/modal").HTimePickerProps) => JSX.Element;
+export declare const HInputNumber: ({ style, ...props }: import("antd").InputNumberProps<string | number>) => JSX.Element;
+export declare const HPageHandler: import("react").FC<import("./PageHandler/modal").IHPageHandler<any>>;
+export declare const HFormConfigProvider: import("react").FC<import("./Form/modal").IFormConfigContextProps>;

package/lib/index.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var config = require('./Form/config.js');
+var index$1 = require('./PageHandler/index.js');
+var index = require('./Form/index.js');
+var useHForm = require('./Form/hooks/useHForm.js');
+
+var HSelect = config.default.select;
+var HInput = config.default.input;
+var HSelectInput = config.default.selectInput;
+var HUpload = config.default.upload;
+var HUrlUpload = config.default.urlUpload;
+var HButtonInput = config.default.buttonInput;
+var HCheckBox = config.default.checkBox;
+var HSwitch = config.default["switch"];
+var HCheckboxGroup = config.default.checkboxGroup;
+var HDatePicker = config.default.datePicker;
+var HRangePicker = config.default.rangePicker.Component;
+var HRadioGroup = config.default.radioGroup;
+var HTimePicker = config.default.timePicker;
+var HInputNumber = config.default.inputNumber;
+var HPageHandler = index$1.default;
+var HFormConfigProvider = config.default.formConfigProvider;
+
+exports.HForm = index.default;
+exports.useHForm = useHForm.default;
+exports.HButtonInput = HButtonInput;
+exports.HCheckBox = HCheckBox;
+exports.HCheckboxGroup = HCheckboxGroup;
+exports.HDatePicker = HDatePicker;
+exports.HFormConfigProvider = HFormConfigProvider;
+exports.HInput = HInput;
+exports.HInputNumber = HInputNumber;
+exports.HPageHandler = HPageHandler;
+exports.HRadioGroup = HRadioGroup;
+exports.HRangePicker = HRangePicker;
+exports.HSelect = HSelect;
+exports.HSelectInput = HSelectInput;
+exports.HSwitch = HSwitch;
+exports.HTimePicker = HTimePicker;
+exports.HUpload = HUpload;
+exports.HUrlUpload = HUrlUpload;
+// powered by h

package/lib/modal.d.ts

@@ -0,0 +1,15 @@
+export interface ValueCheckMapModal {
+    checked?: any;
+    noChecked?: any;
+}
+export type PromiseFnResult<T = any, R = any> = (params: T) => Promise<R>;
+export interface ValueSwitchMapModal {
+    open?: any;
+    close?: any;
+}
+type NameProvider = (name: string) => string;
+export interface DateRangePickerValueMapModal {
+    start?: string | NameProvider;
+    end?: string | NameProvider;
+}
+export {};

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@hw-component/form",
+  "version": "0.0.1-bate",
+  "description": "基于antd二次开发",
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/hdj_wq/hw-components.git"
+  },
+  "license": "ISC",
+  "author": "hdj",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "scripts": {
+    "build": "rollup --config ./scripts/rollup.config.js",
+    "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style",
+    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
+    "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
+    "prepare": "husky install",
+    "start": "webpack-dev-server --config ./scripts/webpack.config.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "lint-staged": {
+    "**/*.less": "npm run lint:style",
+    "**/*.{js,jsx,ts,tsx}": "npm run lint:fix",
+    "**/*.{js,jsx,tsx,ts,less,md,json}": [
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "@ant-design/icons": "4.6.2",
+    "ahooks": "2.10.9",
+    "antd": "4.20.0",
+    "react": "16.14.0",
+    "react-dom": "17.0.2",
+    "react-router-dom": "^6.11.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.8",
+    "@babel/plugin-transform-runtime": "^7.21.4",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.5",
+    "@babel/runtime-corejs3": "^7.21.5",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-inject": "^5.0.3",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-url": "^8.0.1",
+    "@types/react": "17.0.14",
+    "@types/react-dom": "17.0.9",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@umijs/fabric": "^2.14.1",
+    "autoprefixer": "^10.4.14",
+    "babel-loader": "^9.1.2",
+    "css-loader": "^6.7.4",
+    "eslint": "^8.41.0",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-unicorn": "^47.0.0",
+    "html-webpack-plugin": "^5.5.1",
+    "husky": "^8.0.3",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.0",
+    "lint-staged": "10.5.4",
+    "postcss": "^8.4.23",
+    "postcss-less": "^6.0.0",
+    "rollup": "^3.23.0",
+    "rollup-plugin-clear": "^2.0.7",
+    "rollup-plugin-postcss": "4.0.0",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "style-loader": "^3.3.3",
+    "stylelint": "13.13.1",
+    "typescript": "^5.0.4",
+    "webpack": "^5.83.1",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0",
+    "webpackbar": "^5.0.2"
+  },
+  "cssPrefix": "hw"
+}

package/public/index.html

@@ -0,0 +1,19 @@
+<!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">
+    <meta name="viewport" content="webpack5">
+    <title>hw-components</title>
+    <style>
+        body{
+            margin: 0px;
+            padding: 0px;
+        }
+    </style>
+</head>
+<body>
+<div id="root"></div>
+</body>
+</html>

package/scripts/rollup.config.js

@@ -0,0 +1,75 @@
+const path = require("path");
+const clear = require("rollup-plugin-clear");
+const { nodeResolve } = require("@rollup/plugin-node-resolve");
+const { babel } = require("@rollup/plugin-babel");
+const commonjs = require("@rollup/plugin-commonjs");
+const typescript = require("rollup-plugin-typescript2");
+const autoprefixer = require("autoprefixer");
+const inject = require("@rollup/plugin-inject");
+const url = require("@rollup/plugin-url");
+const postcss = require("rollup-plugin-postcss");
+const input = path.resolve(__dirname, "../src/components/index.tsx");
+const outDir = path.resolve(__dirname, "../lib");
+const esOutDir = path.resolve(__dirname, "../es");
+module.exports = {
+  input,
+  output: [
+    {
+      dir: outDir,
+      format: "cjs",
+      footer: "// powered by h",
+      entryFileNames: "[name].js",
+      exports: "named",
+      preserveModules: true,
+    },
+    {
+      dir: esOutDir,
+      format: "es",
+      banner: "// welcome to hoo hoo hoo",
+      footer: "// powered by hdj",
+      entryFileNames: "[name].js",
+      exports: "named",
+      preserveModules: true,
+    },
+  ],
+  plugins: [
+    clear({
+      targets: [outDir, esOutDir],
+    }),
+    url({
+      fileName: "[dirname][hash][extname]",
+    }),
+    postcss({
+      extract: "index.css",
+      plugins: [
+        autoprefixer({
+          overrideBrowserslist: [
+            "last 10 Chrome versions",
+            "last 5 Firefox versions",
+            "Safari >= 6",
+            "ie> 8",
+          ],
+        }),
+      ],
+    }),
+    typescript({
+      tsconfigOverride: {
+        include: [`src/components/**/*`],
+      },
+    }),
+    babel({
+      exclude: "node_modules/**",
+      extensions: [".ts", ".tsx", ".js", ".jsx"],
+      babelHelpers: "runtime",
+    }),
+    inject({
+      React: "react",
+    }),
+    nodeResolve({
+      resolveOnly: ["node_modules"], //定义为模块
+    }),
+    commonjs({
+      include: ["node_modules"],
+    }),
+  ],
+};

package/scripts/webpack.config.js

@@ -0,0 +1,76 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const WebpackBar = require("webpackbar");
+const webpack = require("webpack");
+
+module.exports = {
+  mode: "development",
+  devtool: "cheap-module-source-map",
+  entry: {
+    app: path.resolve(__dirname, "../src/index.tsx"),
+  },
+  output: {
+    path: path.resolve("dist"),
+    publicPath: "/",
+    clean: true, //每次打包前清空目录
+  },
+  devServer: {
+    port: 3000,
+    compress: true,
+    open: true,
+    hot: true,
+    historyApiFallback: {
+      disableDotRule: true,
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(tsx?|ts)$/,
+        loader: "babel-loader",
+        options: { cacheDirectory: true },
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.less$/,
+        exclude: /node_modules/,
+        use: [
+          "style-loader",
+          {
+            loader: "css-loader",
+          },
+          {
+            loader: "less-loader",
+            options: {
+              lessOptions: {
+                javascriptEnabled: true,
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src/components"),
+    },
+    extensions: [".tsx", ".ts", ".js", ".json"],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, "../public/index.html"),
+    }),
+    new WebpackBar({
+      name: "hw components",
+      color: "#52c41a",
+    }),
+    new webpack.ProvidePlugin({
+      React: "react",
+    }),
+  ],
+};

package/src/Layout.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from "react";
+import { Menu } from "antd";
+import "./index.less";
+import type { RouteModal } from "./routes";
+import routes from "./routes";
+import { Outlet, useNavigate, useLocation } from "react-router-dom";
+
+const menuItem = (item: RouteModal) => {
+  const { name, path, children } = item;
+  if (!path) {
+    return null;
+  }
+  if (children) {
+    return (
+      <Menu.SubMenu title={name} key={path}>
+        {children.map((childItem) => {
+          return menuItem(childItem);
+        })}
+      </Menu.SubMenu>
+    );
+  }
+  return <Menu.Item key={path}>{name}</Menu.Item>;
+};
+export default () => {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const [keys, setKeys] = useState(["/form/select"]);
+  const [openKey, setOpenKey] = useState(["/form"]);
+  useEffect(() => {
+    setKeys([pathname]);
+    const pathOpenKeys = pathname.split("/");
+    const openKeys = pathOpenKeys.map((path) => {
+      return "/" + path;
+    });
+    setOpenKey(openKeys);
+  }, [pathname]);
+  return (
+    <div className="layout">
+      <Menu
+        className="menu"
+        selectedKeys={keys}
+        openKeys={openKey}
+        onOpenChange={(openKeys) => {
+          setOpenKey(openKeys);
+        }}
+        onSelect={(e) => {
+          navigate(e.key);
+        }}
+        mode={"inline"}
+        theme="dark"
+      >
+        {routes.map((item) => {
+          return menuItem(item);
+        })}
+      </Menu>
+      <div className="body">
+        <Outlet />
+      </div>
+    </div>
+  );
+};

package/src/app.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import routes from "./routes";
+import {
+  createBrowserRouter,
+  Navigate,
+  RouterProvider,
+  useRouteError,
+} from "react-router-dom";
+import type { RouteObject } from "react-router";
+import Layout from "./Layout";
+const Error = () => {
+  const error = useRouteError();
+  if (error.status === 404) {
+    return <Navigate to="/form/select" replace />;
+  }
+  return <div>错误</div>;
+};
+const rootRoute = [
+  {
+    path: "/",
+    element: <Layout />,
+    errorElement: <Error />,
+    children: routes,
+  },
+];
+const router = () => {
+  return createBrowserRouter(rootRoute as RouteObject[]);
+};
+export default () => {
+  return (
+    <RouterProvider router={router()} fallbackElement={<p>Loading...</p>} />
+  );
+};

package/src/components/CheckboxGroup/CheckBox/index.tsx

@@ -0,0 +1,38 @@
+import { Checkbox } from "antd";
+import React, { useMemo } from "react";
+import type { CheckboxChangeEvent } from "antd/es/checkbox";
+import type { HCheckboxProps } from "@/components/CheckboxGroup/modal";
+import { useMatchConfigProps } from "../../hooks";
+
+const Index: React.FC<HCheckboxProps> = ({
+  value,
+  onChange,
+  children,
+  valueMap: propsValueCheckMap,
+}) => {
+  const { valueCheckMap = {} } = useMatchConfigProps({
+    valueCheckMap: propsValueCheckMap,
+  }); //匹配全局
+  const checkedVal = useMemo(() => {
+    const { checked } = valueCheckMap;
+    if (value === checked) {
+      return true;
+    }
+    return false;
+  }, [value]);
+  const change = (e: CheckboxChangeEvent) => {
+    const { checked, noChecked } = valueCheckMap;
+    const val = e.target.checked;
+    let subVal = checked;
+    if (!val) {
+      subVal = noChecked;
+    }
+    onChange?.(subVal);
+  };
+  return (
+    <Checkbox checked={checkedVal} onChange={change}>
+      {children}
+    </Checkbox>
+  );
+};
+export default Index;