chore(scripts): new-component生成的组件使用 attrs 收束 html attribute，并且支持输入中文名

Author: mengxinssfd

scripts/new-component.ts

@@ -12,6 +12,7 @@ const rootPath = Path.resolve(__dirname, '../');
 const config = {
   name: '',
   componentName: '',
+  alias: '',
   componentsPath: Path.resolve(rootPath, 'packages/components/src'),
 };
 async function run() {
@@ -52,10 +53,19 @@ async function getConfig() {
   config.name = kebabCase(name);
   config.componentName = pascalCase(config.name);
 
+  const { alias } = await prompt<{ alias: string }>({
+    type: 'input',
+    name: 'alias',
+    message: '输入组件别名(中文)',
+    required: true,
+  });
+
+  config.alias = alias;
+
   const { confirm } = await prompt<{ confirm: boolean }>({
     type: 'confirm',
     name: 'confirm',
-    message: `确认添加组件(${config.name})?`,
+    message: `确认添加组件(${config.name} ${alias})?`,
   });
 
   if (!confirm) throw new Error('放弃添加组件');
@@ -73,20 +83,20 @@ import type { RequiredPart } from '@tool-pack/types';
 import { getClassNames } from '@tool-pack/basic';
 
 const rootName = getComponentClass('${config.name}');
+const defaultProps = {} satisfies Partial<${props}>;
 
 export const ${componentName}: React.FC<${props}> = (props) => {
-  const { children, className, ...rest } = props as RequiredPart<
+  const { attrs, children } = props as RequiredPart<
     ${props},
     keyof typeof defaultProps
   >;
   return (
-    <div {...rest} className={getClassNames(rootName, className)}>
+    <div {...attrs} className={getClassNames(rootName, attrs?.className)}>
       {children}
     </div>
   );
 };
 
-const defaultProps = {} satisfies Partial<${props}>;
 ${componentName}.defaultProps = defaultProps;
 ${componentName}.displayName = '${componentName}';
   `;
@@ -99,9 +109,11 @@ function initTypes(): InitRes {
   const content = `
 import React from 'react';
 
-export type ${props} = React.HTMLAttributes<HTMLElement> & {
-  name?: string;
-};
+export interface ${props} {
+  attrs?: Partial<React.HTMLAttributes<HTMLElement>>;
+  children?: React.ReactNode;
+  ref?: React.ForwardedRef<HTMLElement>;
+}
   `;
   return [filename, content];
 }
@@ -152,15 +164,15 @@ function initDoc(): InitRes {
   const content = `
 ---
 category: Components
-title: ${config.componentName} ${config.componentName}
+title: ${config.componentName} ${config.alias}
 atomId: ${config.componentName}
 demo:
   cols: 2
 group:
   title: 通用
 ---
 
-${config.componentName} 说明。
+${config.componentName} ${config.alias}。
 
 ## 代码演示
 
@@ -202,7 +214,7 @@ function appendPlayground() {
 
   const insertTarget = '/*insert target*/';
   const insertContent = `{
-    name: '${config.name} ${config.name}',
+    name: '${config.name} ${config.alias}',
     path: '/${config.name}',
     element: getDemos(import.meta.glob('~/${config.name}/demo/*.tsx')),
   },