Merge pull request #9 from yuanyxh/yuanyxh

Yuanyxh
yuanyxh · Sep 10, 2023 · c9fc84c · c9fc84c
2 parents 8fc783c + 981b314
commit c9fc84c
Show file tree

Hide file tree

Showing 70 changed files with 4,605 additions and 140 deletions.
diff --git a/BundleRoute.js b/BundleRoute.js
@@ -56,6 +56,20 @@ function resolve(...paths) {
   return path.resolve(...paths);
 }
 
+/**
+ *
+ * @description 转换名字
+ * @param {string} name
+ * @returns
+ */
+function transformPageName(name) {
+  if (name.includes('-')) {
+    name = name.replace(/-/g, '');
+  }
+
+  return name;
+}
+
 /**
  *
  * @description Array.prototype.forEach 别名
@@ -91,6 +105,8 @@ function getPageName(way) {
  * @param {string} pageName
  */
 function getPath(pageName) {
+  if (pageName.includes('-')) return pageName.toLocaleLowerCase();
+
   return pageName.replace(/[A-Z]/g, (char, index) => {
     if (index === 0) return char.toLowerCase();
 
@@ -132,7 +148,9 @@ function getImage(source) {
  * @param {string} pageName
  */
 function generateImport(pageName) {
-  return `const ${pageName} = lazy(() => import('@/pages/${pageName}/${pageName}'));`;
+  let variable = transformPageName(pageName);
+
+  return `const ${variable} = lazy(() => import('@/pages/${pageName}/${pageName}'));`;
 }
 
 /**
@@ -166,7 +184,7 @@ function createPage(way) {
 
     pageCount--;
 
-    const pageName = getPageName(way);
+    let pageName = getPageName(way);
     const path = getPath(pageName);
     const title = getTitle(data)[0].trim();
     const image = getImage(data)?.[0].trim() || '';
@@ -177,7 +195,7 @@ function createPage(way) {
       path: '${path}',
       title: '${title}',
       image: '${image}',
-      element: <${pageName} />
+      element: <${transformPageName(pageName)} />
     },
     `;
 

diff --git a/craco.config.js b/craco.config.js
@@ -2,10 +2,30 @@
 
 const path = require('path');
 
+const { loaderByName, getLoader, addBeforeLoader } = require('@craco/craco');
+
 module.exports = {
   webpack: {
     alias: {
       '@': path.resolve(__dirname, 'src')
+    },
+    configure(webpackConfig) {
+      const { isFound } = getLoader(
+        webpackConfig,
+        loaderByName('babel-loader')
+      );
+
+      if (isFound) {
+        addBeforeLoader(webpackConfig, loaderByName('source-map-loader'), {
+          test: /\.worker\.(js|jsx|ts|tsx)$/,
+          loader: 'worker-loader',
+          options: {
+            filename: '[name].[contenthash].worker.js'
+          }
+        });
+      }
+
+      return webpackConfig;
     }
   }
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -69,7 +69,8 @@
     "lint-staged": "^13.2.0",
     "prettier": "^2.8.7",
     "stylelint": "^15.3.0",
-    "stylelint-config-standard": "^31.0.0"
+    "stylelint-config-standard": "^31.0.0",
+    "worker-loader": "^3.0.8"
   },
   "lint-staged": {
     "*.js": "eslint --cache --fix",

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -9,7 +9,7 @@ type NativeType = 'button' | 'submit' | 'reset';
 
 type Size = 'default' | 'large' | 'small';
 
-interface ButtonProps extends ChildProps {
+interface ButtonProps extends ButtonChildProps {
   type?: Type;
   plain?: boolean;
   round?: boolean;
@@ -41,6 +41,7 @@ export default function Button(props: Readonly<ButtonProps>) {
     block = false,
     link = false,
     nativeType = 'button',
+    className = '',
     onClick,
     ...nativeProps
   } = props;
@@ -71,10 +72,11 @@ export default function Button(props: Readonly<ButtonProps>) {
         buttonClass,
         buttonStyle,
         buttonStatus,
-        nativeProps.className || ''
+        className
       )}
       style={nativeProps.style}
       onClick={onClick}
+      {...nativeProps}
     >
       {isRenderElement(loading) && (
         <LoadingIcon style={{ marginRight: 6 }} size="small" />

diff --git a/src/components/Card/Card.module.css b/src/components/Card/Card.module.css
@@ -7,7 +7,6 @@
   border-radius: var(--card-border-radius);
   border: 1px solid var(--card-border-color);
   background-color: var(--card-bg-color);
-  overflow: hidden;
   color: var(--text-color-primary);
   transition: var(--transition-duration);
 }

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -38,7 +38,8 @@ export default function Card(props: CardProps) {
     bodyStyle,
     onClick,
     className = '',
-    style: _style
+    style: _style,
+    ...nativeProps
   } = props;
 
   const _isSlots = isSlots(children);
@@ -52,6 +53,7 @@ export default function Card(props: CardProps) {
       className={composeClass(cardClass, className)}
       style={_style}
       onClick={onClick}
+      {...nativeProps}
     >
       {header ? <div className={style['card-header']}>{header}</div> : header}
 

diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
@@ -48,7 +48,8 @@ export default function Dialog(props: DialogProps) {
     showClose = true,
     closeOnClickModal = true,
     className = '',
-    style: _style
+    style: _style,
+    ...nativeProps
   } = props;
 
   const overlayRef = useRef<HTMLDivElement | null>(null);
@@ -92,6 +93,7 @@ export default function Dialog(props: DialogProps) {
         <div
           className={composeClass(style['dialog'], className)}
           style={_style}
+          {...nativeProps}
         >
           <header className={style['dialog-header']}>
             {isDialogSlots(children) && children.header ? (

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -1,17 +1,19 @@
-import React, { useRef, useImperativeHandle, forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { classnames, composeClass, isNumber, isRenderElement } from '@/utils';
 import style from './Input.module.css';
 
+type Props = InputProps & TextAreaProps;
+
 export interface InputExpose {
   select(): void;
 }
 
-type InputSlots = {
+interface InputSlots {
   prefix?(): React.ReactNode | React.ReactNode[];
   suffix?(): React.ReactNode | React.ReactNode[];
-};
+}
 
-interface InputProps extends Props {
+interface _InputProps extends Props {
   change: (val: string) => void;
   focus?:
     | React.FocusEventHandler<HTMLInputElement>
@@ -25,6 +27,7 @@ interface InputProps extends Props {
   type?: React.HTMLInputTypeAttribute;
   name?: string;
   size?: 'default' | 'large' | 'small';
+  id?: string;
   readonly?: boolean;
   placeholder?: string;
   disabled?: boolean;
@@ -46,8 +49,8 @@ const generateClass = classnames(style);
  * @description input 表单输入
  */
 export default forwardRef(function Input(
-  props: InputProps,
-  ref: React.ForwardedRef<InputExpose>
+  props: _InputProps,
+  ref: React.ForwardedRef<HTMLInputElement>
 ) {
   const {
     value = '',
@@ -61,6 +64,7 @@ export default forwardRef(function Input(
     disabled = false,
     autofocus = false,
     tabIndex = 0,
+    id,
     readonly = false,
     selectInFocus = false,
     name,
@@ -72,21 +76,10 @@ export default forwardRef(function Input(
     form,
     children,
     style,
-    className = ''
+    className = '',
+    ...nativeProps
   } = props;
 
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      select() {
-        inputRef.current?.select();
-      }
-    }),
-    []
-  );
-
   const inputClass = generateClass(['input', `input-${size}`]);
 
   const inputStyle = generateClass({ 'is-disabled': disabled });
@@ -107,8 +100,6 @@ export default forwardRef(function Input(
 
   const clickHandle: React.MouseEventHandler<HTMLDivElement> = (e) => {
     e.stopPropagation();
-
-    inputRef.current?.focus();
   };
 
   const enterHandle: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
@@ -118,11 +109,12 @@ export default forwardRef(function Input(
   };
 
   const input = (
-    <div onClick={clickHandle} className={composeClass(inputClass, inputStyle)}>
+    <div className={composeClass(inputClass, inputStyle)}>
       <div
         style={style}
         className={composeClass(inputWrapperClass, className)}
         tabIndex={-1}
+        onClick={clickHandle}
       >
         {isRenderElement(prefix) && (
           <span className={generateClass(['input-prefix'])}>
@@ -133,7 +125,8 @@ export default forwardRef(function Input(
         )}
 
         <input
-          ref={inputRef}
+          ref={ref}
+          id={id}
           className={inputInnerClass}
           type={type}
           name={name}
@@ -157,6 +150,7 @@ export default forwardRef(function Input(
           }}
           onBlur={blur as React.FocusEventHandler<HTMLInputElement>}
           onKeyUp={enterHandle}
+          {...nativeProps}
         />
 
         {isRenderElement(suffix) && (
@@ -178,6 +172,7 @@ export default forwardRef(function Input(
           textareaInnerStyle,
           className
         )}
+        id={id}
         style={style}
         form={form}
         name={name}
@@ -198,6 +193,7 @@ export default forwardRef(function Input(
         }}
         onFocus={focus as React.FocusEventHandler<HTMLTextAreaElement>}
         onBlur={blur as React.FocusEventHandler<HTMLTextAreaElement>}
+        {...nativeProps}
       ></textarea>
     </div>
   );