update: gen compoents script

Author: xiaoxustudio

docs/home/show/badge.md

@@ -6,9 +6,7 @@
 
 基础用法
 
-:::raw
 <preview path="../../components/show/badge/badge.vue" ></preview>
-:::
 
 ## 限制
 

package.json

@@ -6,6 +6,7 @@
 		"dev": "pnpm -C play dev",
 		"build": "pnpm build:comp && pnpm gen",
 		"gen": "ts-node script/gen-comp-types dist",
+		"cp": "ts-node script/cp",
 		"dev:docs": "pnpm -C docs docs:dev",
 		"build:comp": "ts-node script/build dist",
 		"build:docs": "pnpm -C docs docs:build",

packages/theme-chalk/src/button.scss

@@ -37,6 +37,8 @@
 	padding: 0 20px;
 	transition: 0.1s;
 	background-color: $li--color-default;
+	position: relative;
+
 	& + .li-button {
 		margin-left: 12px;
 	}
@@ -85,7 +87,7 @@
 			scale: 0.95;
 		}
 		@include when(plain) {
-			border: solid 1px $li--color-default-light-1;
+			border: solid 1px $li--color-black;
 			background-color: $li--color-default;
 		}
 		@include when(disabled) {

script/cp.ts

@@ -0,0 +1,163 @@
+import {
+	existsSync,
+	mkdirSync,
+	rmSync,
+	unlinkSync,
+	writeFileSync,
+} from "node:fs";
+
+const path = require("path");
+
+const componentName = process.argv[2];
+const isDelete = process.argv[3] === "-d"; // 这里判断是否删除
+
+if (!componentName) {
+	console.error("请提供组件名称，例如: pnpm cp test");
+	process.exit(1);
+}
+
+// 处理大驼峰命名
+const componentNameUpper = componentName
+	.split("-")
+	.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+	.join("");
+
+// 路径配置
+const paths = {
+	components: {
+		root: path.join(process.cwd(), "packages/components", componentName),
+		src: path.join(process.cwd(), "packages/components", componentName, "src"),
+		index: path.join(
+			process.cwd(),
+			"packages/components",
+			componentName,
+			"index.ts"
+		),
+		vue: path.join(
+			process.cwd(),
+			"packages/components",
+			componentName,
+			"src",
+			`${componentName}.vue`
+		),
+		ts: path.join(
+			process.cwd(),
+			"packages/components",
+			componentName,
+			"src",
+			`${componentName}.ts`
+		),
+	},
+	theme: {
+		scss: path.join(
+			process.cwd(),
+			"packages/theme-chalk/src",
+			`${componentName}.scss`
+		),
+	},
+};
+
+// 创建目录
+const createDir = (dirPath: string) => {
+	if (!existsSync(dirPath)) {
+		mkdirSync(dirPath, { recursive: true });
+	}
+};
+
+// 创建文件
+const createFile = (
+	filePath: string,
+	content: string | NodeJS.ArrayBufferView<ArrayBufferLike>
+) => {
+	if (existsSync(filePath)) {
+		console.error(`文件已存在: ${filePath}`);
+		return false;
+	}
+	writeFileSync(filePath, content);
+	return true;
+};
+
+// 删除文件
+const deleteFile = (filePath: string) => {
+	if (!existsSync(filePath)) {
+		return false;
+	}
+	unlinkSync(filePath);
+	return true;
+};
+// 删除目录
+const deleteDir = (dirPath: string) => {
+	if (!existsSync(dirPath)) {
+		return false;
+	}
+	rmSync(dirPath, { recursive: true });
+	return true;
+};
+// 文件模板
+const templates = {
+	index: `import { withInstall } from "@licht-ui/utils";
+import _${componentNameUpper} from "./src/${componentName}.vue";
+import "@licht-ui/theme-chalk/src/${componentName}.scss";
+export * from "./src/${componentName}";
+
+export default withInstall(_${componentNameUpper});
+
+declare module "vue" {
+    export interface GlobalComponents {
+        Li${componentNameUpper}: typeof _${componentNameUpper};
+    }
+}`,
+
+	vue: `
+<template>
+</template>
+<script setup lang="ts">
+import { createNamespace } from "@licht-ui/utils";
+import { ${componentName}Type } from "./${componentName}";
+defineOptions({ 
+name: 'Li${componentNameUpper}'
+});
+defineProps(${componentName}Type);
+const bem = createNamespace("${componentName}");
+</script>
+`,
+
+	ts: `import { ExtractPropTypes } from "vue";
+export const ${componentName}Type = {} as const;
+export type ${componentNameUpper}Type = ExtractPropTypes<typeof ${componentName}Type & HTMLAnchorElement>;`,
+
+	scss: `@use "./common/var.scss" as *;
+@use "./mixins/mixins.scss" as *;
+
+@include b(${componentName}) {
+	
+}`,
+};
+
+try {
+	if (isDelete) {
+		//————————
+		deleteDir(paths.components.root);
+		//————————
+		deleteFile(paths.theme.scss);
+		console.log(`\x1b[32m组件 ${componentName} 删除成功！\x1b[0m`);
+		console.log(`组件路径: ${paths.components.root}`);
+		console.log(`样式路径: ${paths.theme.scss}`);
+	} else {
+		//————————
+		createDir(paths.components.src);
+		//————————
+		createFile(paths.components.index, templates.index);
+		createFile(paths.components.vue, templates.vue);
+		createFile(paths.components.ts, templates.ts);
+
+		createFile(paths.theme.scss, templates.scss);
+
+		console.log(`\x1b[32m组件 ${componentName} 创建成功！\x1b[0m`);
+		console.log(`组件路径: ${paths.components.root}`);
+		console.log(`样式路径: ${paths.theme.scss}`);
+	}
+} catch (error) {
+	console.error("\x1b[31m创建组件失败:\x1b[0m", error);
+	process.exit(1);
+}

script/gen-comp-types.ts

@@ -4,7 +4,7 @@ import { Project } from "ts-morph";
 const build = process.argv[3] || "dist";
 const project = new Project();
 console.time("types");
-console.log("\x1B[36m%s\x1B[0m", "正在生成类型中...");
+console.log("\x1B[36m%s\x1B[0m", "正在生成类型中...\n");
 
 // todo 自动生成类型文件
 project.addSourceFilesAtPaths(`./${build}/components/*/*.d.ts`);
@@ -23,7 +23,7 @@ for (let index = 0; index < sourceFiles.length; index++) {
 	if (getExoports.has("default") && module) {
 		const o = module.getInterface("GlobalComponents")!.getChildren()[3];
 		const name = o.getFirstChild()?.getChildren()[0].getText();
-		text += "		";
+		text += "\t".repeat(2);
 		text += `${name}: typeof import("licht-ui/components/${baseName}")["default"];\n`;
 	}
 }
@@ -32,7 +32,7 @@ const code = `
 // 自动生成类型文件 ${new Date().toLocaleString()}
 declare module "vue" {
 	export interface GlobalComponents {
-${text}
+${text.replace(/\n$/, "")}
 	}
 }
 export {};