[create]Format code

packages/create-stdf/README.md

@@ -1,4 +1,3 @@
-
 [简体中文](https://github.com/dufu1991/stdf/blob/main/packages/create-stdf/README_CN.md)
 
 # create-stdf

packages/create-stdf/README_CN.md

@@ -88,7 +88,6 @@ npm create stdf@latest my-app -t vu
 pnpm create stdf my-app -l zh_CN
 ```
 
-
 # 许可证
 
-本项目基于 [MIT 许可证](https://github.com/dufu1991/stdf/blob/main/LICENSE)。请随意享受并贡献给这个开源项目。
+本项目基于 [MIT 许可证](https://github.com/dufu1991/stdf/blob/main/LICENSE)。请随意享受并贡献给这个开源项目。

packages/create-stdf/package.json

@@ -1,52 +1,52 @@
 {
-    "name": "create-stdf",
-    "version": "0.0.44",
-    "description": "A CLI for creating new STDF projects",
-    "bin": {
-        "create-stdf": "index.js"
-    },
-    "scripts": {
-        "build": "rollup -c",
-        "update": "node scripts/update",
-        "test": "echo \"Error: no test specified\" && exit 1"
-    },
-    "files": [
-        "dist/**",
-        "templates/**"
-    ],
-    "engines": {
-        "node": ">=14.14"
-    },
-    "dependencies": {
-        "@clack/prompts": "^0.6.3",
-        "fs-extra": "^11.1.1",
-        "kleur": "^4.1.5",
-        "minimist": "^1.2.8"
-    },
-    "devDependencies": {
-        "@rollup/plugin-terser": "^0.4.3",
-        "rollup": "^3.27.0"
-    },
-    "keywords": [
-        "svelte",
-        "tailwind",
-        "unocss",
-        "typescript",
-        "sveltekit",
-        "stdf",
-        "cli",
-        "mobile",
-        "vite"
-    ],
-    "author": "dufu1991",
-    "license": "MIT",
-    "type": "module",
-    "homepage": "https://github.com/dufu1991/stdf/blob/main/packages/create-stdf/README.md",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/dufu1991/stdf/tree/main/packages/create-stdf"
-    },
-    "bugs": {
-        "url": "https://github.com/dufu1991/stdf/issues?q=is:issue+is:open+create-stdf"
-    }
+	"name": "create-stdf",
+	"version": "0.0.45",
+	"description": "A CLI for creating new STDF projects",
+	"bin": {
+		"create-stdf": "index.js"
+	},
+	"scripts": {
+		"build": "rollup -c",
+		"update": "node scripts/update",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"files": [
+		"dist/**",
+		"templates/**"
+	],
+	"engines": {
+		"node": ">=14.14"
+	},
+	"dependencies": {
+		"@clack/prompts": "^0.6.3",
+		"fs-extra": "^11.1.1",
+		"kleur": "^4.1.5",
+		"minimist": "^1.2.8"
+	},
+	"devDependencies": {
+		"@rollup/plugin-terser": "^0.4.3",
+		"rollup": "^3.27.0"
+	},
+	"keywords": [
+		"svelte",
+		"tailwind",
+		"unocss",
+		"typescript",
+		"sveltekit",
+		"stdf",
+		"cli",
+		"mobile",
+		"vite"
+	],
+	"author": "dufu1991",
+	"license": "MIT",
+	"type": "module",
+	"homepage": "https://github.com/dufu1991/stdf/blob/main/packages/create-stdf/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/dufu1991/stdf/tree/main/packages/create-stdf"
+	},
+	"bugs": {
+		"url": "https://github.com/dufu1991/stdf/issues?q=is:issue+is:open+create-stdf"
+	}
 }

packages/create-stdf/rollup.config.js

@@ -1,8 +1,8 @@
 import terser from '@rollup/plugin-terser';
 
 export default {
-    input: 'src/index.js',
-    output: [{ file: 'dist/index.js', format: 'es' }],
-    external: ['path', 'fs-extra', '@clack/prompts', 'kleur/colors', 'minimist'],
-    plugins: [terser()],
+	input: 'src/index.js',
+	output: [{ file: 'dist/index.js', format: 'es' }],
+	external: ['path', 'fs-extra', '@clack/prompts', 'kleur/colors', 'minimist'],
+	plugins: [terser()],
 };

packages/create-stdf/scripts/update.js

@@ -13,10 +13,10 @@ console.log(`rollup-plugin-stdf-icon 最新版本：${iconVersion}`);
 // 封装函数，传入版本号，需要修改的 package.json 中的 devDependencies 的 key 值，需要修改的文件路径，直接修改 package.json 并重新写入
 // Encapsulate the function, pass in the version number, the key value of devDependencies in package.json that needs to be modified, the file path that needs to be modified, and directly modify package.json and rewrite
 const updatePackageJson = (version, key, path) => {
-    const packageJson = JSON.parse(fs.readFileSync(path, 'utf-8'));
-    packageJson.devDependencies[key] = `^${version}`;
-    fs.writeFileSync(path, JSON.stringify(packageJson, null, 4));
-    console.log(`🎉 ${path} 更新成功`);
+	const packageJson = JSON.parse(fs.readFileSync(path, 'utf-8'));
+	packageJson.devDependencies[key] = `^${version}`;
+	fs.writeFileSync(path, JSON.stringify(packageJson, null, 4));
+	console.log(`🎉 ${path} 更新成功`);
 };
 
 // 更新模板中的 package.json 的 stdf 版本号

packages/create-stdf/src/index.js

@@ -40,11 +40,11 @@ const languages = [];
 // 循环 langAll 对象，将语言列表中的语言名字替换为对应的语言名字，且按照 sort 排序
 // Loop through the langAll object and replace the language name in the language list with the corresponding language name, and sort by sort
 for (const key in langAll) {
-    languages.push({
-        value: key,
-        label: langAll[key].name,
-        sort: langAll[key].sort,
-    });
+	languages.push({
+		value: key,
+		label: langAll[key].name,
+		sort: langAll[key].sort,
+	});
 }
 
 // 按照 sort 排序
@@ -58,200 +58,200 @@ lang = argvLanguage && languages.find(item => item.value === argvLanguage) ? lan
 // 模板列表
 // Template list
 const templateOptions = [
-    { value: 'vt', label: 'Vite + Tailwind', template: 'vite-tailwind', finish: true },
-    { value: 'vu', label: 'Vite + UnoCSS', template: 'vite-uno', finish: true },
-    { value: 'skt', label: 'SvelteKit + Tailwind', template: 'sveltekit-tailwind', finish: true },
-    { value: 'sku', label: 'SvelteKit + UnoCSS', template: 'sveltekit-uno', finish: true },
-    { value: 'vtt', label: 'Vite + Tailwind + TypeScript', template: 'vite-tailwind-typescript', finish: false },
-    { value: 'vut', label: 'Vite + UnoCSS + TypeScript', template: 'vite-uno-typescript', finish: false },
-    { value: 'sktt', label: 'SvelteKit + Tailwind + TypeScript', template: 'sveltekit-tailwind-typescript', finish: false },
-    { value: 'skut', label: 'SvelteKit + UnoCSS + TypeScript', template: 'sveltekit-uno-typescript', finish: false },
+	{ value: 'vt', label: 'Vite + Tailwind', template: 'vite-tailwind', finish: true },
+	{ value: 'vu', label: 'Vite + UnoCSS', template: 'vite-uno', finish: true },
+	{ value: 'skt', label: 'SvelteKit + Tailwind', template: 'sveltekit-tailwind', finish: true },
+	{ value: 'sku', label: 'SvelteKit + UnoCSS', template: 'sveltekit-uno', finish: true },
+	{ value: 'vtt', label: 'Vite + Tailwind + TypeScript', template: 'vite-tailwind-typescript', finish: false },
+	{ value: 'vut', label: 'Vite + UnoCSS + TypeScript', template: 'vite-uno-typescript', finish: false },
+	{ value: 'sktt', label: 'SvelteKit + Tailwind + TypeScript', template: 'sveltekit-tailwind-typescript', finish: false },
+	{ value: 'skut', label: 'SvelteKit + UnoCSS + TypeScript', template: 'sveltekit-uno-typescript', finish: false },
 ];
 
 // 如果命令行参数中有项目名称，但没有模板名称，直接使用默认模板 vt
 // If there is a project name in the command line parameters, but no template name, use the default template vt directly
 if (argvProjectName && !argvTemplate) {
-    createFunc(argvProjectName, templateOptions[0]);
+	createFunc(argvProjectName, templateOptions[0]);
 }
 // 如果命令行参数中有项目名称和模板名称，直接使用命令行参数中的值
 // If there is a project name and template name in the command line parameters, use the value in the command line parameters directly
 else if (argvProjectName && argvTemplate) {
-    const item = templateOptions.find(item => item.value === argvTemplate);
-    if (!item) {
-        p.intro(red(lang.pectn));
-    } else if (!item.finish) {
-        p.intro(red(item.label + ' ' + lang.hnay));
-    } else {
-        createFunc(argvProjectName, item);
-    }
+	const item = templateOptions.find(item => item.value === argvTemplate);
+	if (!item) {
+		p.intro(red(lang.pectn));
+	} else if (!item.finish) {
+		p.intro(red(item.label + ' ' + lang.hnay));
+	} else {
+		createFunc(argvProjectName, item);
+	}
 } else {
-    // 选择一种语言
-    // Select a language
-    const languageType = await p.select({
-        message: bold('Please select your preferred language'),
-        options: languages,
-    });
-    if (p.isCancel(languageType)) {
-        p.cancel(red('⛔ ') + lang.oc);
-        process.exit(0);
-    }
-    lang = langAll[languageType];
-
-    //  选择一个模板
-    // Select a template
-    let template = await p.select({
-        message: bold(lang.psat),
-        options: templateOptions,
-    });
-
-    if (p.isCancel(template)) {
-        p.cancel(red('⛔ ') + lang.oc);
-        process.exit(0);
-    }
-
-    // 直到选择的 template 所在项 的 finish 为 true 为止，否则一直重新选择
-    // Until the finish of the selected template is true, otherwise keep reselecting
-    while (!templateOptions.find(item => item.value === template)?.finish) {
-        if (p.isCancel(template)) {
-            p.cancel(red('⛔ ') + lang.oc);
-            process.exit(0);
-        }
-
-        p.intro(red(templateOptions.find(item => item.value === template).label + ' ' + lang.hnay + ' ' + lang.pca));
-        template = await p.select({
-            message: bold(lang.psat),
-            options: templateOptions,
-        });
-    }
-
-    // 输入项目名称
-    // Enter the project name
-    const projectName = await p.text({
-        message: bold(lang.pn),
-        placeholder: 'stdf-project',
-        validate: value => {
-            if (!value) {
-                // 判断是否为空，提示 “项目名称不能为空”
-                // Determine whether it is empty, prompt "Project name cannot be empty"
-                return lang.pncbne;
-            }
-            if (fs.existsSync(value)) {
-                // 判断是否已存在，提示 “项目名称已存在”
-                // Determine whether it already exists, prompt "Project name already exists"
-                return lang.pane;
-            }
-        },
-    });
-
-    if (p.isCancel(projectName)) {
-        p.cancel(red('⛔ ') + lang.oc);
-        process.exit(0);
-    }
-
-    // 根据 template 的值，复制对应目录下的所有文件到当前目录
-    // According to the value of template, copy all files under the corresponding directory to the current directory
-    templateOptions.forEach(async item => {
-        if (item.value === template) {
-            createFunc(projectName, item);
-        }
-    });
+	// 选择一种语言
+	// Select a language
+	const languageType = await p.select({
+		message: bold('Please select your preferred language'),
+		options: languages,
+	});
+	if (p.isCancel(languageType)) {
+		p.cancel(red('⛔ ') + lang.oc);
+		process.exit(0);
+	}
+	lang = langAll[languageType];
+
+	//  选择一个模板
+	// Select a template
+	let template = await p.select({
+		message: bold(lang.psat),
+		options: templateOptions,
+	});
+
+	if (p.isCancel(template)) {
+		p.cancel(red('⛔ ') + lang.oc);
+		process.exit(0);
+	}
+
+	// 直到选择的 template 所在项 的 finish 为 true 为止，否则一直重新选择
+	// Until the finish of the selected template is true, otherwise keep reselecting
+	while (!templateOptions.find(item => item.value === template)?.finish) {
+		if (p.isCancel(template)) {
+			p.cancel(red('⛔ ') + lang.oc);
+			process.exit(0);
+		}
+
+		p.intro(red(templateOptions.find(item => item.value === template).label + ' ' + lang.hnay + ' ' + lang.pca));
+		template = await p.select({
+			message: bold(lang.psat),
+			options: templateOptions,
+		});
+	}
+
+	// 输入项目名称
+	// Enter the project name
+	const projectName = await p.text({
+		message: bold(lang.pn),
+		placeholder: 'stdf-project',
+		validate: value => {
+			if (!value) {
+				// 判断是否为空，提示 “项目名称不能为空”
+				// Determine whether it is empty, prompt "Project name cannot be empty"
+				return lang.pncbne;
+			}
+			if (fs.existsSync(value)) {
+				// 判断是否已存在，提示 “项目名称已存在”
+				// Determine whether it already exists, prompt "Project name already exists"
+				return lang.pane;
+			}
+		},
+	});
+
+	if (p.isCancel(projectName)) {
+		p.cancel(red('⛔ ') + lang.oc);
+		process.exit(0);
+	}
+
+	// 根据 template 的值，复制对应目录下的所有文件到当前目录
+	// According to the value of template, copy all files under the corresponding directory to the current directory
+	templateOptions.forEach(async item => {
+		if (item.value === template) {
+			createFunc(projectName, item);
+		}
+	});
 }
 
 function createFunc(projectName, item) {
-    // 如果 projectName 是数字，转为字符串
-    // If projectName is a number, convert it to a string
-    if (typeof projectName === 'number') {
-        projectName = projectName.toString();
-    }
-
-    // 项目目录
-    // Project directory
-    const projectDir = path.join(path.resolve(), projectName);
-
-    spinner.start('🚀 ' + lang.cfsing);
-
-    fs.mkdirSync(projectDir);
-
-    // 获取模板目录的绝对路径，考虑到 Windows 系统的兼容性, 使用 path.join
-    // Get the absolute path of the template directory, considering the compatibility of the Windows system, use path.join
-    const templatePath = path.resolve(fileURLToPath(import.meta.url), '../..', `templates/${item.template}`);
-
-    // 将 templatePath 目录下的所有文件复制到 projectDir 目录下
-    // Copy all files under the templatePath directory to the projectDir directory\
-    fs.copy(templatePath, projectDir)
-        .then(() => {
-            spinner.stop();
-            p.outro(`${projectName} - ${lang.pcsucc} 🎉`);
-
-            // 读取 package.json 文件
-            // Read the package.json file
-            const packageJson = JSON.parse(fs.readFileSync(`${projectDir}/package.json`, 'utf-8'));
-
-            // 将项目内的 package.json 中的 name 属性修改为 projectName
-            // Modify the name attribute in package.json in the project to projectName
-            packageJson.name = projectName;
-
-            // 将修改后的 packageJson 写入到项目内的 package.json 文件中
-            // Write the modified packageJson to the package.json file in the project
-            fs.writeFileSync(`${projectDir}/package.json`, JSON.stringify(packageJson, null, 4), 'utf-8');
-
-            // 根据 item.value 的值，判断是否使用了 @sveltejs/kit
-            // According to the value of item.value, determine whether @sveltejs/kit is used
-            const isHasKit = item.value === 'skt' || item.value === 'sku' || item.value === 'sktt' || item.value === 'skut';
-
-            // 根据 item.value 的值，判断使用 Tailwind 还是 UnoCSS
-            // According to the value of item.value, determine whether to use Tailwind or UnoCSS
-            const isHasUno = item.value === 'vu' || item.value === 'sku' || item.value === 'vut' || item.value === 'skut';
-
-            // 获得依赖的版本号
-            // get the version number of the dependency
-            const versions = {
-                vite: packageJson.devDependencies.vite.replace('^', ''),
-                svelte: packageJson.devDependencies.svelte.replace('^', ''),
-                stdf: packageJson.devDependencies.stdf.replace('^', ''),
-            };
-
-            if (isHasKit) {
-                versions['@sveltejs/kit'] = packageJson.devDependencies['@sveltejs/kit'].replace('^', '');
-            }
-
-            if (isHasUno) {
-                versions['unocss'] = packageJson.devDependencies.unocss.replace('^', '');
-            } else {
-                versions['tailwindcss'] = packageJson.devDependencies.tailwindcss.replace('^', '');
-            }
-
-            // 将 versions 的键值拼接为 bold('Vite:') cyan(versions.vite) bold('Svelte:') cyan(versions.svelte) 的形式
-            // Splice the key value of versions into the form of bold('Vite:') cyan(versions.vite) bold('Svelte:') cyan(versions.svelte)
-            let versionsString = '';
-            for (const key in versions) {
-                versionsString += bold(key) + ': ' + cyan(versions[key]) + ' ';
-            }
-
-            // 显示版本号
-            // Display version number
-            console.log(`📦 ${versionsString}
+	// 如果 projectName 是数字，转为字符串
+	// If projectName is a number, convert it to a string
+	if (typeof projectName === 'number') {
+		projectName = projectName.toString();
+	}
+
+	// 项目目录
+	// Project directory
+	const projectDir = path.join(path.resolve(), projectName);
+
+	spinner.start('🚀 ' + lang.cfsing);
+
+	fs.mkdirSync(projectDir);
+
+	// 获取模板目录的绝对路径，考虑到 Windows 系统的兼容性, 使用 path.join
+	// Get the absolute path of the template directory, considering the compatibility of the Windows system, use path.join
+	const templatePath = path.resolve(fileURLToPath(import.meta.url), '../..', `templates/${item.template}`);
+
+	// 将 templatePath 目录下的所有文件复制到 projectDir 目录下
+	// Copy all files under the templatePath directory to the projectDir directory\
+	fs.copy(templatePath, projectDir)
+		.then(() => {
+			spinner.stop();
+			p.outro(`${projectName} - ${lang.pcsucc} 🎉`);
+
+			// 读取 package.json 文件
+			// Read the package.json file
+			const packageJson = JSON.parse(fs.readFileSync(`${projectDir}/package.json`, 'utf-8'));
+
+			// 将项目内的 package.json 中的 name 属性修改为 projectName
+			// Modify the name attribute in package.json in the project to projectName
+			packageJson.name = projectName;
+
+			// 将修改后的 packageJson 写入到项目内的 package.json 文件中
+			// Write the modified packageJson to the package.json file in the project
+			fs.writeFileSync(`${projectDir}/package.json`, JSON.stringify(packageJson, null, 4), 'utf-8');
+
+			// 根据 item.value 的值，判断是否使用了 @sveltejs/kit
+			// According to the value of item.value, determine whether @sveltejs/kit is used
+			const isHasKit = item.value === 'skt' || item.value === 'sku' || item.value === 'sktt' || item.value === 'skut';
+
+			// 根据 item.value 的值，判断使用 Tailwind 还是 UnoCSS
+			// According to the value of item.value, determine whether to use Tailwind or UnoCSS
+			const isHasUno = item.value === 'vu' || item.value === 'sku' || item.value === 'vut' || item.value === 'skut';
+
+			// 获得依赖的版本号
+			// get the version number of the dependency
+			const versions = {
+				vite: packageJson.devDependencies.vite.replace('^', ''),
+				svelte: packageJson.devDependencies.svelte.replace('^', ''),
+				stdf: packageJson.devDependencies.stdf.replace('^', ''),
+			};
+
+			if (isHasKit) {
+				versions['@sveltejs/kit'] = packageJson.devDependencies['@sveltejs/kit'].replace('^', '');
+			}
+
+			if (isHasUno) {
+				versions['unocss'] = packageJson.devDependencies.unocss.replace('^', '');
+			} else {
+				versions['tailwindcss'] = packageJson.devDependencies.tailwindcss.replace('^', '');
+			}
+
+			// 将 versions 的键值拼接为 bold('Vite:') cyan(versions.vite) bold('Svelte:') cyan(versions.svelte) 的形式
+			// Splice the key value of versions into the form of bold('Vite:') cyan(versions.vite) bold('Svelte:') cyan(versions.svelte)
+			let versionsString = '';
+			for (const key in versions) {
+				versionsString += bold(key) + ': ' + cyan(versions[key]) + ' ';
+			}
+
+			// 显示版本号
+			// Display version number
+			console.log(`📦 ${versionsString}
                 `);
 
-            // 显示提示信息
-            // Display prompt information
-            console.log(
-                `👉 ${bold(lang.tgs)}
+			// 显示提示信息
+			// Display prompt information
+			console.log(
+				`👉 ${bold(lang.tgs)}
 
     ${blue(`cd ${projectName}`)}
     ${blue('pnpm i / npm i / yarn')}
     ${blue('npm run dev')}
-    `
-            );
-            // 显示配置主题色
-            // Display configuration theme color
-            console.log(
-                `🎨 ${grey(isHasUno ? lang.pcyt_vu : lang.pcyt_vt)}
-    `
-            );
-        })
-        .catch(err => {
-            spinner.stop();
-            console.error(red(lang.cferror + '--' + err));
-        });
+    `,
+			);
+			// 显示配置主题色
+			// Display configuration theme color
+			console.log(
+				`🎨 ${grey(isHasUno ? lang.pcyt_vu : lang.pcyt_vt)}
+    `,
+			);
+		})
+		.catch(err => {
+			spinner.stop();
+			console.error(red(lang.cferror + '--' + err));
+		});
 }

packages/create-stdf/src/lang.js

@@ -1,199 +1,199 @@
 // 英语 english
 export const en_US = {
-    sort: 0,
-    name: 'English',
-    hnay: 'Has not adapted yet',
-    pn: 'Please enter the project name',
-    pncbne: 'Project name cannot be empty',
-    pane: 'Project name already exists',
-    psat: 'Please select a template',
-    oc: 'Operation cancelled',
-    pca: 'Please choose again',
-    cfsing: 'Creating file...',
-    pcsucc: 'Project created successfully',
-    tgs: 'To get started:',
-    pcyt_vt: 'Tip: Please configure your color system in the tailwind.config.js file',
-    pcyt_vu: 'Tip: Please configure your color system in the uno.config.js file',
-    cferror: 'Failed to create file',
-    pectn: 'Please enter the correct template name!',
+	sort: 0,
+	name: 'English',
+	hnay: 'Has not adapted yet',
+	pn: 'Please enter the project name',
+	pncbne: 'Project name cannot be empty',
+	pane: 'Project name already exists',
+	psat: 'Please select a template',
+	oc: 'Operation cancelled',
+	pca: 'Please choose again',
+	cfsing: 'Creating file...',
+	pcsucc: 'Project created successfully',
+	tgs: 'To get started:',
+	pcyt_vt: 'Tip: Please configure your color system in the tailwind.config.js file',
+	pcyt_vu: 'Tip: Please configure your color system in the uno.config.js file',
+	cferror: 'Failed to create file',
+	pectn: 'Please enter the correct template name!',
 };
 
 // 简体中文 chinese
 export const zh_CN = {
-    sort: 1,
-    name: '简体中文',
-    hnay: '暂未适配',
-    pn: '请输入项目名称',
-    pncbne: '项目名称不能为空',
-    pane: '项目名称已存在',
-    psat: '请选择一个模板',
-    oc: '操作已取消',
-    pca: '请重新选择',
-    cfsing: '正在创建文件...',
-    pcsucc: '项目创建成功',
-    tgs: '开始：',
-    pcyt_vt: '提示：请到 tailwind.config.js 文件内配置你的颜色系统',
-    pcyt_vu: '提示：请到 uno.config.js 文件内配置你的颜色系统',
-    cferror: '创建文件失败',
-    pectn: '请输入正确的模板名称！',
+	sort: 1,
+	name: '简体中文',
+	hnay: '暂未适配',
+	pn: '请输入项目名称',
+	pncbne: '项目名称不能为空',
+	pane: '项目名称已存在',
+	psat: '请选择一个模板',
+	oc: '操作已取消',
+	pca: '请重新选择',
+	cfsing: '正在创建文件...',
+	pcsucc: '项目创建成功',
+	tgs: '开始：',
+	pcyt_vt: '提示：请到 tailwind.config.js 文件内配置你的颜色系统',
+	pcyt_vu: '提示：请到 uno.config.js 文件内配置你的颜色系统',
+	cferror: '创建文件失败',
+	pectn: '请输入正确的模板名称！',
 };
 
 // 繁體中文 chinese traditional
 export const zh_TW = {
-    sort: 2,
-    name: '繁體中文',
-    hnay: '暫未適配',
-    pn: '請輸入項目名稱',
-    pncbne: '項目名稱不能為空',
-    pane: '項目名稱已存在',
-    psat: '請選擇一個模板',
-    oc: '操作已取消',
-    pca: '請重新選擇',
-    cfsing: '正在創建文件...',
-    pcsucc: '項目創建成功',
-    tgs: '開始：',
-    pcyt_vt: '提示：請到 tailwind.config.js 文件內配置你的顏色系統',
-    pcyt_vu: '提示：請到 uno.config.js 文件內配置你的顏色系統',
-    cferror: '創建文件失敗',
-    pectn: '請輸入正確的模板名稱！',
+	sort: 2,
+	name: '繁體中文',
+	hnay: '暫未適配',
+	pn: '請輸入項目名稱',
+	pncbne: '項目名稱不能為空',
+	pane: '項目名稱已存在',
+	psat: '請選擇一個模板',
+	oc: '操作已取消',
+	pca: '請重新選擇',
+	cfsing: '正在創建文件...',
+	pcsucc: '項目創建成功',
+	tgs: '開始：',
+	pcyt_vt: '提示：請到 tailwind.config.js 文件內配置你的顏色系統',
+	pcyt_vu: '提示：請到 uno.config.js 文件內配置你的顏色系統',
+	cferror: '創建文件失敗',
+	pectn: '請輸入正確的模板名稱！',
 };
 
 // 日语 japanese
 export const ja_JP = {
-    sort: 3,
-    name: '日本語',
-    hnay: 'まだ適応されていません',
-    pn: 'プロジェクト名を入力してください',
-    pncbne: 'プロジェクト名は空にできません',
-    pane: 'プロジェクト名が既に存在します',
-    psat: 'テンプレートを選択してください',
-    oc: '操作がキャンセルされました',
-    pca: 'もう一度選択してください',
-    cfsing: 'ファイルを作成しています...',
-    pcsucc: 'プロジェクトが正常に作成されました',
-    tgs: '開始：',
-    pcyt_vt: 'ヒント：tailwind.config.js ファイルでカラーシステムを構成してください',
-    pcyt_vu: 'ヒント：uno.config.js ファイルでカラーシステムを構成してください',
-    cferror: 'ファイルの作成に失敗しました',
-    pectn: '正しいテンプレート名を入力してください！',
+	sort: 3,
+	name: '日本語',
+	hnay: 'まだ適応されていません',
+	pn: 'プロジェクト名を入力してください',
+	pncbne: 'プロジェクト名は空にできません',
+	pane: 'プロジェクト名が既に存在します',
+	psat: 'テンプレートを選択してください',
+	oc: '操作がキャンセルされました',
+	pca: 'もう一度選択してください',
+	cfsing: 'ファイルを作成しています...',
+	pcsucc: 'プロジェクトが正常に作成されました',
+	tgs: '開始：',
+	pcyt_vt: 'ヒント：tailwind.config.js ファイルでカラーシステムを構成してください',
+	pcyt_vu: 'ヒント：uno.config.js ファイルでカラーシステムを構成してください',
+	cferror: 'ファイルの作成に失敗しました',
+	pectn: '正しいテンプレート名を入力してください！',
 };
 
 // 韩语 korean
 export const ko_KR = {
-    sort: 4,
-    name: '한국어',
-    hnay: '아직 적응하지 못했습니다',
-    pn: '프로젝트 이름을 입력하십시오',
-    pncbne: '프로젝트 이름은 비워 둘 수 없습니다',
-    pane: '프로젝트 이름이 이미 있습니다',
-    psat: '템플릿을 선택하십시오',
-    oc: '작업이 취소되었습니다',
-    pca: '다시 선택하십시오',
-    cfsing: '파일을 만드는 중입니다...',
-    pcsucc: '프로젝트가 성공적으로 생성되었습니다',
-    tgs: '시작：',
-    pcyt_vt: '팁：tailwind.config.js 파일에서 색상 시스템을 구성하십시오',
-    pcyt_vu: '팁：uno.config.js 파일에서 색상 시스템을 구성하십시오',
-    cferror: '파일 생성 실패',
-    pectn: '올바른 템플릿 이름을 입력하십시오!',
+	sort: 4,
+	name: '한국어',
+	hnay: '아직 적응하지 못했습니다',
+	pn: '프로젝트 이름을 입력하십시오',
+	pncbne: '프로젝트 이름은 비워 둘 수 없습니다',
+	pane: '프로젝트 이름이 이미 있습니다',
+	psat: '템플릿을 선택하십시오',
+	oc: '작업이 취소되었습니다',
+	pca: '다시 선택하십시오',
+	cfsing: '파일을 만드는 중입니다...',
+	pcsucc: '프로젝트가 성공적으로 생성되었습니다',
+	tgs: '시작：',
+	pcyt_vt: '팁：tailwind.config.js 파일에서 색상 시스템을 구성하십시오',
+	pcyt_vu: '팁：uno.config.js 파일에서 색상 시스템을 구성하십시오',
+	cferror: '파일 생성 실패',
+	pectn: '올바른 템플릿 이름을 입력하십시오!',
 };
 
 // 西班牙语 spanish
 export const es_ES = {
-    sort: 5,
-    name: 'Español',
-    hnay: 'Aún no se ha adaptado',
-    pn: 'Por favor ingrese el nombre del proyecto',
-    pncbne: 'El nombre del proyecto no puede estar vacío',
-    pane: 'El nombre del proyecto ya existe',
-    psat: 'Por favor seleccione una plantilla',
-    oc: 'Operación cancelada',
-    pca: 'Por favor, elija de nuevo',
-    cfsing: 'Creando archivo...',
-    pcsucc: 'Proyecto creado con éxito',
-    tgs: 'Para empezar:',
-    pcyt_vt: 'Consejo: configure su sistema de colores en el archivo tailwind.config.js',
-    pcyt_vu: 'Consejo: configure su sistema de colores en el archivo uno.config.js',
-    cferror: 'Error al crear archivo',
-    pectn: '¡Por favor ingrese el nombre de la plantilla correcto!',
+	sort: 5,
+	name: 'Español',
+	hnay: 'Aún no se ha adaptado',
+	pn: 'Por favor ingrese el nombre del proyecto',
+	pncbne: 'El nombre del proyecto no puede estar vacío',
+	pane: 'El nombre del proyecto ya existe',
+	psat: 'Por favor seleccione una plantilla',
+	oc: 'Operación cancelada',
+	pca: 'Por favor, elija de nuevo',
+	cfsing: 'Creando archivo...',
+	pcsucc: 'Proyecto creado con éxito',
+	tgs: 'Para empezar:',
+	pcyt_vt: 'Consejo: configure su sistema de colores en el archivo tailwind.config.js',
+	pcyt_vu: 'Consejo: configure su sistema de colores en el archivo uno.config.js',
+	cferror: 'Error al crear archivo',
+	pectn: '¡Por favor ingrese el nombre de la plantilla correcto!',
 };
 
 // 俄语 russian
 export const ru_RU = {
-    sort: 6,
-    name: 'Русский',
-    hnay: 'Еще не адаптировано',
-    pn: 'Пожалуйста, введите название проекта',
-    pncbne: 'Название проекта не может быть пустым',
-    pane: 'Название проекта уже существует',
-    psat: 'Пожалуйста, выберите шаблон',
-    oc: 'Операция отменена',
-    pca: 'Пожалуйста, выберите снова',
-    cfsing: 'Создание файла...',
-    pcsucc: 'Проект успешно создан',
-    tgs: 'Чтобы начать:',
-    pcyt_vt: 'Совет: настройте свою цветовую систему в файле tailwind.config.js',
-    pcyt_vu: 'Совет: настройте свою цветовую систему в файле uno.config.js',
-    cferror: 'Не удалось создать файл',
-    pectn: 'Пожалуйста, введите правильное имя шаблона!',
+	sort: 6,
+	name: 'Русский',
+	hnay: 'Еще не адаптировано',
+	pn: 'Пожалуйста, введите название проекта',
+	pncbne: 'Название проекта не может быть пустым',
+	pane: 'Название проекта уже существует',
+	psat: 'Пожалуйста, выберите шаблон',
+	oc: 'Операция отменена',
+	pca: 'Пожалуйста, выберите снова',
+	cfsing: 'Создание файла...',
+	pcsucc: 'Проект успешно создан',
+	tgs: 'Чтобы начать:',
+	pcyt_vt: 'Совет: настройте свою цветовую систему в файле tailwind.config.js',
+	pcyt_vu: 'Совет: настройте свою цветовую систему в файле uno.config.js',
+	cferror: 'Не удалось создать файл',
+	pectn: 'Пожалуйста, введите правильное имя шаблона!',
 };
 
 // 法语 french
 export const fr_FR = {
-    sort: 7,
-    name: 'Français',
-    hnay: "N'a pas encore adapté",
-    pn: 'Veuillez saisir le nom du projet',
-    pncbne: 'Le nom du projet ne peut pas être vide',
-    pane: 'Le nom du projet existe déjà',
-    psat: 'Veuillez sélectionner un modèle',
-    oc: 'Opération annulée',
-    pca: 'Veuillez choisir à nouveau',
-    cfsing: 'Création de fichier...',
-    pcsucc: 'Projet créé avec succès',
-    tgs: 'Pour commencer:',
-    pcyt_vt: 'Conseil: veuillez configurer votre système de couleurs dans le fichier tailwind.config.js',
-    pcyt_vu: 'Conseil: veuillez configurer votre système de couleurs dans le fichier uno.config.js',
-    cferror: 'Échec de la création du fichier',
-    pectn: 'Veuillez saisir le nom du modèle correct!',
+	sort: 7,
+	name: 'Français',
+	hnay: "N'a pas encore adapté",
+	pn: 'Veuillez saisir le nom du projet',
+	pncbne: 'Le nom du projet ne peut pas être vide',
+	pane: 'Le nom du projet existe déjà',
+	psat: 'Veuillez sélectionner un modèle',
+	oc: 'Opération annulée',
+	pca: 'Veuillez choisir à nouveau',
+	cfsing: 'Création de fichier...',
+	pcsucc: 'Projet créé avec succès',
+	tgs: 'Pour commencer:',
+	pcyt_vt: 'Conseil: veuillez configurer votre système de couleurs dans le fichier tailwind.config.js',
+	pcyt_vu: 'Conseil: veuillez configurer votre système de couleurs dans le fichier uno.config.js',
+	cferror: 'Échec de la création du fichier',
+	pectn: 'Veuillez saisir le nom du modèle correct!',
 };
 
 // 德语 german
 export const de_DE = {
-    sort: 8,
-    name: 'Deutsch',
-    hnay: 'Noch nicht angepasst',
-    pn: 'Bitte geben Sie den Projektnamen ein',
-    pncbne: 'Projektname darf nicht leer sein',
-    pane: 'Projektname existiert bereits',
-    psat: 'Bitte wählen Sie eine Vorlage aus',
-    oc: 'Vorgang abgebrochen',
-    pca: 'Bitte wählen Sie erneut',
-    cfsing: 'Erstelle Datei...',
-    pcsucc: 'Projekt erfolgreich erstellt',
-    tgs: 'Um zu beginnen:',
-    pcyt_vt: 'Tipp: Bitte konfigurieren Sie Ihr Farbsystem in der Datei tailwind.config.js',
-    pcyt_vu: 'Tipp: Bitte konfigurieren Sie Ihr Farbsystem in der Datei uno.config.js',
-    cferror: 'Fehler beim Erstellen der Datei',
-    pectn: 'Bitte geben Sie den richtigen Vorlagennamen ein!',
+	sort: 8,
+	name: 'Deutsch',
+	hnay: 'Noch nicht angepasst',
+	pn: 'Bitte geben Sie den Projektnamen ein',
+	pncbne: 'Projektname darf nicht leer sein',
+	pane: 'Projektname existiert bereits',
+	psat: 'Bitte wählen Sie eine Vorlage aus',
+	oc: 'Vorgang abgebrochen',
+	pca: 'Bitte wählen Sie erneut',
+	cfsing: 'Erstelle Datei...',
+	pcsucc: 'Projekt erfolgreich erstellt',
+	tgs: 'Um zu beginnen:',
+	pcyt_vt: 'Tipp: Bitte konfigurieren Sie Ihr Farbsystem in der Datei tailwind.config.js',
+	pcyt_vu: 'Tipp: Bitte konfigurieren Sie Ihr Farbsystem in der Datei uno.config.js',
+	cferror: 'Fehler beim Erstellen der Datei',
+	pectn: 'Bitte geben Sie den richtigen Vorlagennamen ein!',
 };
 
 // 意大利语 italian
 export const it_IT = {
-    sort: 9,
-    name: 'Italiano',
-    hnay: 'Non ancora adattato',
-    pn: 'Inserisci il nome del progetto',
-    pncbne: 'Il nome del progetto non può essere vuoto',
-    pane: 'Il nome del progetto esiste già',
-    psat: 'Seleziona un modello',
-    oc: 'Operazione annullata',
-    pca: 'Seleziona di nuovo',
-    cfsing: 'Creazione del file in corso...',
-    pcsucc: 'Progetto creato con successo',
-    tgs: 'Per iniziare:',
-    pcyt_vt: 'Suggerimento: configura il tuo sistema di colori nel file tailwind.config.js',
-    pcyt_vu: 'Suggerimento: configura il tuo sistema di colori nel file uno.config.js',
-    cferror: 'Impossibile creare il file',
-    pectn: 'Inserisci il nome del modello corretto!',
+	sort: 9,
+	name: 'Italiano',
+	hnay: 'Non ancora adattato',
+	pn: 'Inserisci il nome del progetto',
+	pncbne: 'Il nome del progetto non può essere vuoto',
+	pane: 'Il nome del progetto esiste già',
+	psat: 'Seleziona un modello',
+	oc: 'Operazione annullata',
+	pca: 'Seleziona di nuovo',
+	cfsing: 'Creazione del file in corso...',
+	pcsucc: 'Progetto creato con successo',
+	tgs: 'Per iniziare:',
+	pcyt_vt: 'Suggerimento: configura il tuo sistema di colori nel file tailwind.config.js',
+	pcyt_vu: 'Suggerimento: configura il tuo sistema di colori nel file uno.config.js',
+	cferror: 'Impossibile creare il file',
+	pectn: 'Inserisci il nome del modello corretto!',
 };

packages/create-stdf/templates/sveltekit-tailwind/README.md

@@ -4,9 +4,9 @@ This template should help get you started developing with Svelte + Tailwind + ST
 
 ## Recommended IDE Setup
 
--   [VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) + [Tailwind](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) + [STDF](https://stdf.design) .
+- [VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) + [Tailwind](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) + [STDF](https://stdf.design) .
 
--   [WebStorm](https://www.jetbrains.com/webstorm/) + [Svelte](https://www.jetbrains.com/help/webstorm/svelte.html) + [Tailwind](https://www.jetbrains.com/help/webstorm/tailwind-css.html) + [STDF](https://stdf.design) .
+- [WebStorm](https://www.jetbrains.com/webstorm/) + [Svelte](https://www.jetbrains.com/help/webstorm/svelte.html) + [Tailwind](https://www.jetbrains.com/help/webstorm/tailwind-css.html) + [STDF](https://stdf.design) .
 
 ## More Info
 

packages/create-stdf/templates/sveltekit-tailwind/package.json

@@ -1,23 +1,23 @@
 {
-    "name": "kit",
-    "version": "0.0.1",
-    "scripts": {
-        "dev": "vite dev",
-        "build": "vite build",
-        "preview": "vite preview"
-    },
-    "devDependencies": {
-        "@fontsource/fira-mono": "^4.5.10",
-        "@neoconfetti/svelte": "^1.0.0",
-        "@sveltejs/adapter-auto": "^2.0.0",
-        "@sveltejs/kit": "^1.20.4",
-        "autoprefixer": "^10.4.15",
-        "postcss": "^8.4.28",
-        "rollup-plugin-stdf-icon": "file:../../../rollup-plugin-stdf-icon",
-        "stdf": "file:../../../stdf",
-        "svelte": "^4.1.1",
-        "tailwindcss": "^3.3.3",
-        "vite": "^4.4.6"
-    },
-    "type": "module"
+	"name": "kit",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"devDependencies": {
+		"@fontsource/fira-mono": "^4.5.10",
+		"@neoconfetti/svelte": "^1.0.0",
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.20.4",
+		"autoprefixer": "^10.4.15",
+		"postcss": "^8.4.28",
+		"rollup-plugin-stdf-icon": "file:../../../rollup-plugin-stdf-icon",
+		"stdf": "file:../../../stdf",
+		"svelte": "^4.1.1",
+		"tailwindcss": "^3.3.3",
+		"vite": "^4.4.6"
+	},
+	"type": "module"
 }

packages/create-stdf/templates/sveltekit-tailwind/postcss.config.js

@@ -1,6 +1,6 @@
 export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};

packages/create-stdf/templates/sveltekit-tailwind/src/app.css

@@ -3,5 +3,5 @@
 @tailwind utilities;
 
 html {
-    -webkit-tap-highlight-color: transparent;
+	-webkit-tap-highlight-color: transparent;
 }

packages/create-stdf/templates/sveltekit-tailwind/src/app.html

@@ -1,19 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
+	<head>
+		<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/stdf.svg" media="(prefers-color-scheme: light)" />
+		<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/stdf_dark.svg" media="(prefers-color-scheme: dark)" />
+		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
+		<title>SvelteKit + Tailwind + STDF</title>
+		%sveltekit.head%
+	</head>
 
-<head>
-	<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/stdf.svg" media="(prefers-color-scheme: light)" />
-	<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/stdf_dark.svg"
-		media="(prefers-color-scheme: dark)" />
-	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
-	<title>SvelteKit + Tailwind + STDF</title>
-	%sveltekit.head%
-</head>
-
-<body data-sveltekit-preload-data="hover" class="bg-gray9 dark:bg-gray3 text-black dark:text-white/90">
-	<main style="display: contents">
-		%sveltekit.body%
-	</main>
-</body>
-
-</html>
+	<body data-sveltekit-preload-data="hover" class="bg-gray9 dark:bg-gray3 text-black dark:text-white/90">
+		<main style="display: contents">%sveltekit.body%</main>
+	</body>
+</html>

packages/create-stdf/templates/sveltekit-tailwind/src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script>
-    import '../app.css';
+	import '../app.css';
 </script>
 
 <slot />

packages/create-stdf/templates/sveltekit-tailwind/src/routes/+page.svelte

@@ -1,126 +1,126 @@
 <script>
-    import { setContext } from 'svelte';
-    import { Button, Cell, Icon, Calendar } from 'stdf';
-    import en_US from 'stdf/lang/en_US';
-    import zh_CN from 'stdf/lang/zh_CN';
-    import Counter from './Counter.svelte';
+	import { setContext } from 'svelte';
+	import { Button, Cell, Icon, Calendar } from 'stdf';
+	import en_US from 'stdf/lang/en_US';
+	import zh_CN from 'stdf/lang/zh_CN';
+	import Counter from './Counter.svelte';
 
-    import { browser } from '$app/environment';
+	import { browser } from '$app/environment';
 
-    if (browser) {
-        //解决ios不支持按钮:active伪类
-        // Solve the problem that ios does not support the button: active pseudo class
-        document.body.addEventListener('touchstart', function () {
-            //...空函数即可
-            // ... Empty function is OK
-        });
-    }
+	if (browser) {
+		//解决ios不支持按钮:active伪类
+		// Solve the problem that ios does not support the button: active pseudo class
+		document.body.addEventListener('touchstart', function () {
+			//...空函数即可
+			// ... Empty function is OK
+		});
+	}
 
-    //切换亮暗模式(toggle light or dark mode)
-    let theme = sessionStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
-    if (theme === 'dark') {
-        document.documentElement.classList.add('dark');
-    }
-    const toggleModeFun = () => {
-        if (theme === 'dark') {
-            // 切换到(light switch to light)
-            theme = 'light';
-            document.documentElement.classList.remove('dark');
-            sessionStorage.setItem('theme', 'light');
-        } else {
-            // 切换到(dark switch to dark)
-            theme = 'dark';
-            document.documentElement.classList.add('dark');
-            sessionStorage.setItem('theme', 'dark');
-        }
-    };
+	//切换亮暗模式(toggle light or dark mode)
+	let theme = sessionStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
+	if (theme === 'dark') {
+		document.documentElement.classList.add('dark');
+	}
+	const toggleModeFun = () => {
+		if (theme === 'dark') {
+			// 切换到(light switch to light)
+			theme = 'light';
+			document.documentElement.classList.remove('dark');
+			sessionStorage.setItem('theme', 'light');
+		} else {
+			// 切换到(dark switch to dark)
+			theme = 'dark';
+			document.documentElement.classList.add('dark');
+			sessionStorage.setItem('theme', 'dark');
+		}
+	};
 
-    // 设置语言(setting language)
-    let lang = sessionStorage.getItem('lang') === 'en_US' ? 'en_US' : 'zh_CN';
-    $: isZh = lang === 'zh_CN';
-    setContext('STDF_lang', sessionStorage.getItem('lang') === 'en_US' ? en_US : zh_CN);
-    const toggleLangFun = () => {
-        lang = isZh ? 'en_US' : 'zh_CN';
-        sessionStorage.setItem('lang', isZh ? 'en_US' : 'zh_CN');
-        // 刷新(refresh)
-        location.reload();
-    };
+	// 设置语言(setting language)
+	let lang = sessionStorage.getItem('lang') === 'en_US' ? 'en_US' : 'zh_CN';
+	$: isZh = lang === 'zh_CN';
+	setContext('STDF_lang', sessionStorage.getItem('lang') === 'en_US' ? en_US : zh_CN);
+	const toggleLangFun = () => {
+		lang = isZh ? 'en_US' : 'zh_CN';
+		sessionStorage.setItem('lang', isZh ? 'en_US' : 'zh_CN');
+		// 刷新(refresh)
+		location.reload();
+	};
 
-    // 进度条(percent)
-    let percent = 20;
-    const reduceFunc = () => {
-        percent > 0 && (percent -= 10);
-    };
-    const increaseFunc = () => {
-        percent < 100 && (percent += 10);
-    };
+	// 进度条(percent)
+	let percent = 20;
+	const reduceFunc = () => {
+		percent > 0 && (percent -= 10);
+	};
+	const increaseFunc = () => {
+		percent < 100 && (percent += 10);
+	};
 
-    // 日历(calendar)
-    let visible = false;
+	// 日历(calendar)
+	let visible = false;
 </script>
 
 <div class="flex justify-center items-center text-center gap-4 pt-10">
-    <a class="flex flex-col items-center w-10" href="https://kit.svelte.dev" target="_blank" rel="noreferrer">
-        <img src="/svelte.svg" alt="Svelte Logo" />
-    </a>+
-    <a class="flex flex-col items-center w-10" href="https://tailwindcss.com" target="_blank" rel="noreferrer">
-        <img src="/tailwindcss.svg" alt="Tailwind Logo" />
-    </a>+
-    <a class="flex flex-col items-center w-8" href="https://stdf.design" target="_blank" rel="noreferrer">
-        <svg viewBox="0 0 90 80" fill="currentColor">
-            <path
-                class="text-primary dark:text-dark"
-                d="M0 0H20H40H50C64.8056 0 77.7325 8.04398 84.6487 20H50H40V22.6757V30H50C55.5229 30 60 34.4771 60 40C60 45.5229 55.5229 50 50 50H40V57.3243V78.7398V80H20V66.4583V20H15.3513H0V0ZM50 80C72.0914 80 90 62.0914 90 40C90 36.547 89.5625 33.1962 88.7398 30H67.3244C69.0261 32.9417 70 36.3571 70 40C70 51.0457 61.0457 60 50 60V80Z"
-            />
-            <path class="text-dark dark:text-primary" d="M20 30V0L0 50H20V80L40 30H20Z" />
-        </svg>
-    </a>
+	<a class="flex flex-col items-center w-10" href="https://kit.svelte.dev" target="_blank" rel="noreferrer">
+		<img src="/svelte.svg" alt="Svelte Logo" />
+	</a>+
+	<a class="flex flex-col items-center w-10" href="https://tailwindcss.com" target="_blank" rel="noreferrer">
+		<img src="/tailwindcss.svg" alt="Tailwind Logo" />
+	</a>+
+	<a class="flex flex-col items-center w-8" href="https://stdf.design" target="_blank" rel="noreferrer">
+		<svg viewBox="0 0 90 80" fill="currentColor">
+			<path
+				class="text-primary dark:text-dark"
+				d="M0 0H20H40H50C64.8056 0 77.7325 8.04398 84.6487 20H50H40V22.6757V30H50C55.5229 30 60 34.4771 60 40C60 45.5229 55.5229 50 50 50H40V57.3243V78.7398V80H20V66.4583V20H15.3513H0V0ZM50 80C72.0914 80 90 62.0914 90 40C90 36.547 89.5625 33.1962 88.7398 30H67.3244C69.0261 32.9417 70 36.3571 70 40C70 51.0457 61.0457 60 50 60V80Z"
+			/>
+			<path class="text-dark dark:text-primary" d="M20 30V0L0 50H20V80L40 30H20Z" />
+		</svg>
+	</a>
 </div>
 <div class="text-center my-8 text-xs">
-    {#if isZh}
-        <p>这是一个使用 SvelteKit + Tailwind + STDF 构建的模板。</p>
-        <p class="mt-2">点击上方 LOGO 了解更多。</p>
-    {:else}
-        <p>This is a template using SvelteKit + TailwindCSS + STDF.</p>
-        <p class="mt-2">Click the logo above to learn more.</p>
-    {/if}
+	{#if isZh}
+		<p>这是一个使用 SvelteKit + Tailwind + STDF 构建的模板。</p>
+		<p class="mt-2">点击上方 LOGO 了解更多。</p>
+	{:else}
+		<p>This is a template using SvelteKit + TailwindCSS + STDF.</p>
+		<p class="mt-2">Click the logo above to learn more.</p>
+	{/if}
 </div>
 <div class="my-8">
-    <a href="about">
-        <Cell title={isZh ? '跳转 ABOUT' : 'Go to ABOUT'} />
-    </a>
+	<a href="about">
+		<Cell title={isZh ? '跳转 ABOUT' : 'Go to ABOUT'} />
+	</a>
 </div>
 <div class="my-8">
-    <Cell title={isZh ? '暗模式' : 'Dark mode'} right={{ type: 'switch', switch: { check: theme === 'dark' } }} on:click={toggleModeFun} />
+	<Cell title={isZh ? '暗模式' : 'Dark mode'} right={{ type: 'switch', switch: { check: theme === 'dark' } }} on:click={toggleModeFun} />
 </div>
 <div class="mt-8">
-    <Counter bind:percent />
+	<Counter bind:percent />
 </div>
 <div class="mb-8">
-    <Button heightIn="0" group fill="lineTheme">
-        <div class="flex divide-x">
-            <div class="flex-1 py-2 active:opacity-80" on:click={reduceFunc}>-10</div>
-            <div class="flex-1 py-2 active:opacity-80" on:click={increaseFunc}>+10</div>
-            <div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>{isZh ? '重置' : 'Reset'}</div>
-        </div>
-    </Button>
+	<Button heightIn="0" group fill="lineTheme">
+		<div class="flex divide-x">
+			<div class="flex-1 py-2 active:opacity-80" on:click={reduceFunc}>-10</div>
+			<div class="flex-1 py-2 active:opacity-80" on:click={increaseFunc}>+10</div>
+			<div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>{isZh ? '重置' : 'Reset'}</div>
+		</div>
+	</Button>
 </div>
 <div class="my-8">
-    <Button fill="lineTheme" on:click={() => (visible = true)}>{isZh ? '日历' : 'Calendar'}</Button>
+	<Button fill="lineTheme" on:click={() => (visible = true)}>{isZh ? '日历' : 'Calendar'}</Button>
 </div>
 <Calendar bind:visible />
 <div class="my-8 px-8 flex justify-between">
-    <Icon name="cake" theme path="symbols/Heroicons.svg" />
-    <Icon name="riding-line" path="symbols/Remix.svg" />
-    <Icon name="spy-line" theme path="symbols/Remix.svg" />
-    <Icon name="javascript-fill" injClass="text-[red] dark:text-green" path="symbols/Remix.svg" />
-    <Icon name="cup" theme path="symbols/IconPark.svg" />
+	<Icon name="cake" theme path="symbols/Heroicons.svg" />
+	<Icon name="riding-line" path="symbols/Remix.svg" />
+	<Icon name="spy-line" theme path="symbols/Remix.svg" />
+	<Icon name="javascript-fill" injClass="text-[red] dark:text-green" path="symbols/Remix.svg" />
+	<Icon name="cup" theme path="symbols/IconPark.svg" />
 </div>
 <div class="px-4 text-xs">
-    {isZh ? '图标：第一个来自' : 'Icons: The first one comes from'} <a class="underline" href="https://heroicons.com">Heroicons</a>
-    ，{isZh ? '最后一个来自' : 'the last one comes from'} <a class="underline" href="https://iconpark.oceanengine.com">IconPark</a>
-    ，{isZh ? '其余来自' : 'the rest come from'} <a class="underline" href="https://remixicon.com">Remix Icon</a> 。
+	{isZh ? '图标：第一个来自' : 'Icons: The first one comes from'} <a class="underline" href="https://heroicons.com">Heroicons</a>
+	，{isZh ? '最后一个来自' : 'the last one comes from'} <a class="underline" href="https://iconpark.oceanengine.com">IconPark</a>
+	，{isZh ? '其余来自' : 'the rest come from'} <a class="underline" href="https://remixicon.com">Remix Icon</a> 。
 </div>
 <div class="my-8">
-    <Button on:click={toggleLangFun}>{isZh ? '切换语言' : 'Toggle language'}</Button>
+	<Button on:click={toggleLangFun}>{isZh ? '切换语言' : 'Toggle language'}</Button>
 </div>

packages/create-stdf/templates/sveltekit-tailwind/src/routes/Counter.svelte

@@ -1,9 +1,9 @@
 <script>
-    import { Progress } from 'stdf';
+	import { Progress } from 'stdf';
 
-    export let percent = 20;
+	export let percent = 20;
 </script>
 
 <div class="p-4">
-    <Progress {percent} />
+	<Progress {percent} />
 </div>

packages/create-stdf/templates/sveltekit-tailwind/src/routes/about/+page.svelte

@@ -1,20 +1,20 @@
 <script>
-    import { NavBar } from 'stdf';
+	import { NavBar } from 'stdf';
 
-    const lang = sessionStorage.getItem('lang') === 'en_US' ? 'en_US' : 'zh_CN';
-    $: isZh = lang === 'zh_CN';
+	const lang = sessionStorage.getItem('lang') === 'en_US' ? 'en_US' : 'zh_CN';
+	$: isZh = lang === 'zh_CN';
 </script>
 
 <svelte:head>
-    <title>About</title>
-    <meta name="description" content="About this app" />
+	<title>About</title>
+	<meta name="description" content="About this app" />
 </svelte:head>
 
 <div class="sticky z-10 top-0">
-    <NavBar title={isZh ? '关于' : 'ABOUT'} on:clickleft={() => window.history.back()} />
+	<NavBar title={isZh ? '关于' : 'ABOUT'} on:clickleft={() => window.history.back()} />
 </div>
 
 <div class="px-2 py-20 text-center space-y-10">
-    <div class="text-3xl text-primary dark:text-dark">{isZh ? '这是一个关于页面' : 'This is a about page'}</div>
-    <div class="text-sm">{isZh ? '仅用于演示 SvelteKit 的路由功能' : "Only for demonstration of SvelteKit's routing functionality"}</div>
+	<div class="text-3xl text-primary dark:text-dark">{isZh ? '这是一个关于页面' : 'This is a about page'}</div>
+	<div class="text-sm">{isZh ? '仅用于演示 SvelteKit 的路由功能' : "Only for demonstration of SvelteKit's routing functionality"}</div>
 </div>

packages/create-stdf/templates/sveltekit-tailwind/svelte.config.js

@@ -3,19 +3,19 @@ import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-    kit: {
-        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-        // If your environment is not supported or you settled on a specific environment, switch out the adapter.
-        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
-        adapter: adapter(),
-    },
-    onwarn: (warning, handler) => {
-        if (warning.code.startsWith('a11y-')) {
-            return;
-        }
-        handler(warning);
-    },
-    preprocess: vitePreprocess(),
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter(),
+	},
+	onwarn: (warning, handler) => {
+		if (warning.code.startsWith('a11y-')) {
+			return;
+		}
+		handler(warning);
+	},
+	preprocess: vitePreprocess(),
 };
 
 export default config;

packages/create-stdf/templates/sveltekit-tailwind/tailwind.config.js

@@ -1,42 +1,42 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-    content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/stdf/**/*.svelte'],
-    theme: {
-        colors: {
-            // 主题色
-            primary: '#0B24FB',
-            dark: '#FFC043',
-            blue: '#0B24FB', // primary 别名
-            yellow: '#FFC043', // dark 别名
+	content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/stdf/**/*.svelte'],
+	theme: {
+		colors: {
+			// 主题色
+			primary: '#0B24FB',
+			dark: '#FFC043',
+			blue: '#0B24FB', // primary 别名
+			yellow: '#FFC043', // dark 别名
 
-            // 扩展色
-            purple: '#7356BF',
-            green: '#05944F',
-            orange: '#FF6937',
+			// 扩展色
+			purple: '#7356BF',
+			green: '#05944F',
+			orange: '#FF6937',
 
-            // 功能色
-            success: '#11BB8D',
-            warning: '#B95000',
-            error: '#DA1414',
-            info: '#2E5AAC',
+			// 功能色
+			success: '#11BB8D',
+			warning: '#B95000',
+			error: '#DA1414',
+			info: '#2E5AAC',
 
-            // 中性色
-            black: '#000000',
-            white: '#fff',
-            gray1: '#23262B',
-            gray2: '#2A2B2F',
-            gray3: '#303239',
-            gray4: '#373940',
-            gray5: '#414249',
-            gray6: '#747B84',
-            gray7: '#DADEE3',
-            gray8: '#EBEEF2',
-            gray9: '#F4F6F9',
-            gray10: '#FAFAFB',
-            transparent: 'transparent',
-        },
-        extend: {},
-    },
-    darkMode: 'class',
-    plugins: [],
+			// 中性色
+			black: '#000000',
+			white: '#fff',
+			gray1: '#23262B',
+			gray2: '#2A2B2F',
+			gray3: '#303239',
+			gray4: '#373940',
+			gray5: '#414249',
+			gray6: '#747B84',
+			gray7: '#DADEE3',
+			gray8: '#EBEEF2',
+			gray9: '#F4F6F9',
+			gray10: '#FAFAFB',
+			transparent: 'transparent',
+		},
+		extend: {},
+	},
+	darkMode: 'class',
+	plugins: [],
 };

packages/create-stdf/templates/sveltekit-tailwind/vite.config.js

@@ -3,19 +3,19 @@ import { defineConfig } from 'vite';
 import svgSprite from 'rollup-plugin-stdf-icon';
 
 export default defineConfig({
-    plugins: [
-        sveltekit({}),
-        // 一般来说，一个应用的所有 svg 都放在一个文件夹下，合并为一个 symbol 即可。
-        // 此处只是为了演示不同文件夹下的图标如何合并为不同的 symbol。
-        // Generally speaking, all of an application svg are placed in a folder and merged into one symbol.
-        // Here is just to show how icons in different folders are merged into different symbols.
-        svgSprite([
-            { inFile: 'src/lib/svgs/Heroicons', outFile: 'static/symbols', fileName: 'Heroicons' },
-            { inFile: 'src/lib/svgs/IconPark', outFile: 'static/symbols', fileName: 'IconPark' },
-            { inFile: 'src/lib/svgs/Remix', outFile: 'static/symbols', fileName: 'Remix' },
-            // 单独为 Cell 与 NavBar 用到的图标创建一个 symbol。详见：https://stdf.design/#/guide?nav=icon
-            // Create a symbol for the icons used by Cell and NavBar. See: https://stdf.design/#/guide?nav=icon
-            { inFile: 'src/lib/icons', outFile: 'static/fonts', fileName: 'symbol' },
-        ]),
-    ],
+	plugins: [
+		sveltekit({}),
+		// 一般来说，一个应用的所有 svg 都放在一个文件夹下，合并为一个 symbol 即可。
+		// 此处只是为了演示不同文件夹下的图标如何合并为不同的 symbol。
+		// Generally speaking, all of an application svg are placed in a folder and merged into one symbol.
+		// Here is just to show how icons in different folders are merged into different symbols.
+		svgSprite([
+			{ inFile: 'src/lib/svgs/Heroicons', outFile: 'static/symbols', fileName: 'Heroicons' },
+			{ inFile: 'src/lib/svgs/IconPark', outFile: 'static/symbols', fileName: 'IconPark' },
+			{ inFile: 'src/lib/svgs/Remix', outFile: 'static/symbols', fileName: 'Remix' },
+			// 单独为 Cell 与 NavBar 用到的图标创建一个 symbol。详见：https://stdf.design/#/guide?nav=icon
+			// Create a symbol for the icons used by Cell and NavBar. See: https://stdf.design/#/guide?nav=icon
+			{ inFile: 'src/lib/icons', outFile: 'static/fonts', fileName: 'symbol' },
+		]),
+	],
 });

packages/create-stdf/templates/sveltekit-uno/README.md

@@ -4,9 +4,9 @@ This template should help get you started developing with Svelte + UnoCSS + STDF
 
 ## Recommended IDE Setup
 
--   [VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) + [UnoCSS](https://marketplace.visualstudio.com/items?itemName=antfu.unocss) + [STDF](https://stdf.design) .
+- [VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) + [UnoCSS](https://marketplace.visualstudio.com/items?itemName=antfu.unocss) + [STDF](https://stdf.design) .
 
--   [WebStorm](https://www.jetbrains.com/webstorm/) + [Svelte](https://www.jetbrains.com/help/webstorm/svelte.html) + [UnoCSS](https://plugins.jetbrains.com/plugin/22204-unocss) + [STDF](https://stdf.design) .
+- [WebStorm](https://www.jetbrains.com/webstorm/) + [Svelte](https://www.jetbrains.com/help/webstorm/svelte.html) + [UnoCSS](https://plugins.jetbrains.com/plugin/22204-unocss) + [STDF](https://stdf.design) .
 
 ## More Info
 

packages/create-stdf/templates/sveltekit-uno/package.json

@@ -1,23 +1,23 @@
 {
-    "name": "kit",
-    "version": "0.0.1",
-    "scripts": {
-        "dev": "vite dev",
-        "build": "vite build",
-        "preview": "vite preview"
-    },
-    "devDependencies": {
-        "@fontsource/fira-mono": "^4.5.10",
-        "@neoconfetti/svelte": "^1.0.0",
-        "@sveltejs/adapter-auto": "^2.0.0",
-        "@sveltejs/kit": "^1.20.4",
-        "@unocss/extractor-svelte": "^0.54.2",
-        "@unocss/reset": "^0.54.2",
-        "rollup-plugin-stdf-icon": "file:../../../rollup-plugin-stdf-icon",
-        "stdf": "file:../../../stdf",
-        "svelte": "^4.1.1",
-        "unocss": "^0.53.6",
-        "vite": "^4.4.6"
-    },
-    "type": "module"
+	"name": "kit",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"devDependencies": {
+		"@fontsource/fira-mono": "^4.5.10",
+		"@neoconfetti/svelte": "^1.0.0",
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.20.4",
+		"@unocss/extractor-svelte": "^0.54.2",
+		"@unocss/reset": "^0.54.2",
+		"rollup-plugin-stdf-icon": "file:../../../rollup-plugin-stdf-icon",
+		"stdf": "file:../../../stdf",
+		"svelte": "^4.1.1",
+		"unocss": "^0.53.6",
+		"vite": "^4.4.6"
+	},
+	"type": "module"
 }

packages/create-stdf/templates/sveltekit-uno/src/app.css

@@ -1,6 +1,6 @@
 :root {
-    --un-default-border-color: currentColor;
+	--un-default-border-color: currentColor;
 }
 html {
-    -webkit-tap-highlight-color: transparent;
+	-webkit-tap-highlight-color: transparent;
 }

packages/create-stdf/templates/sveltekit-uno/src/app.html

@@ -1,19 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
+	<head>
+		<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/stdf.svg" media="(prefers-color-scheme: light)" />
+		<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/stdf_dark.svg" media="(prefers-color-scheme: dark)" />
+		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
+		<title>SvelteKit + UnoCSS + STDF</title>
+		%sveltekit.head%
+	</head>
 
-<head>
-	<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/stdf.svg" media="(prefers-color-scheme: light)" />
-	<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/stdf_dark.svg"
-		media="(prefers-color-scheme: dark)" />
-	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
-	<title>SvelteKit + UnoCSS + STDF</title>
-	%sveltekit.head%
-</head>
-
-<body data-sveltekit-preload-data="hover" class="bg-gray9 dark:bg-gray3 text-black dark:text-white/90">
-	<main style="display: contents">
-		%sveltekit.body%
-	</main>
-</body>
-
-</html>
+	<body data-sveltekit-preload-data="hover" class="bg-gray9 dark:bg-gray3 text-black dark:text-white/90">
+		<main style="display: contents">%sveltekit.body%</main>
+	</body>
+</html>

packages/create-stdf/templates/sveltekit-uno/src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <script>
-    import '@unocss/reset/tailwind.css';
-    import 'uno.css';
-    import '../app.css';
+	import '@unocss/reset/tailwind.css';
+	import 'uno.css';
+	import '../app.css';
 </script>
 
 <slot />

packages/create-stdf/templates/sveltekit-uno/src/routes/+page.svelte

@@ -1,126 +1,126 @@
 <script>
-    import { setContext } from 'svelte';
-    import { Button, Cell, Icon, Calendar } from 'stdf';
-    import en_US from 'stdf/lang/en_US';
-    import zh_CN from 'stdf/lang/zh_CN';
-    import Counter from './Counter.svelte';
+	import { setContext } from 'svelte';
+	import { Button, Cell, Icon, Calendar } from 'stdf';
+	import en_US from 'stdf/lang/en_US';
+	import zh_CN from 'stdf/lang/zh_CN';
+	import Counter from './Counter.svelte';
 
-    import { browser } from '$app/environment';
+	import { browser } from '$app/environment';
 
-    if (browser) {
-        //解决ios不支持按钮:active伪类
-        // Solve the problem that ios does not support the button: active pseudo class
-        document.body.addEventListener('touchstart', function () {
-            //...空函数即可
-            // ... Empty function is OK
-        });
-    }
+	if (browser) {
+		//解决ios不支持按钮:active伪类
+		// Solve the problem that ios does not support the button: active pseudo class
+		document.body.addEventListener('touchstart', function () {
+			//...空函数即可
+			// ... Empty function is OK
+		});
+	}
 
-    //切换亮暗模式(toggle light or dark mode)
-    let theme = sessionStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
-    if (theme === 'dark') {
-        document.documentElement.classList.add('dark');
-    }
-    const toggleModeFun = () => {
-        if (theme === 'dark') {
-            // 切换到(light switch to light)
-            theme = 'light';
-            document.documentElement.classList.remove('dark');
-            sessionStorage.setItem('theme', 'light');
-        } else {
-            // 切换到(dark switch to dark)
-            theme = 'dark';
-            document.documentElement.classList.add('dark');
-            sessionStorage.setItem('theme', 'dark');
-        }
-    };
+	//切换亮暗模式(toggle light or dark mode)
+	let theme = sessionStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
+	if (theme === 'dark') {
+		document.documentElement.classList.add('dark');
+	}
+	const toggleModeFun = () => {
+		if (theme === 'dark') {
+			// 切换到(light switch to light)
+			theme = 'light';
+			document.documentElement.classList.remove('dark');
+			sessionStorage.setItem('theme', 'light');
+		} else {
+			// 切换到(dark switch to dark)
+			theme = 'dark';
+			document.documentElement.classList.add('dark');
+			sessionStorage.setItem('theme', 'dark');
+		}
+	};
 
-    // 设置语言(setting language)
-    let lang = sessionStorage.getItem('lang') === 'en_US' ? 'en_US' : 'zh_CN';
-    $: isZh = lang === 'zh_CN';
-    setContext('STDF_lang', sessionStorage.getItem('lang') === 'en_US' ? en_US : zh_CN);
-    const toggleLangFun = () => {
-        lang = isZh ? 'en_US' : 'zh_CN';
-        sessionStorage.setItem('lang', isZh ? 'en_US' : 'zh_CN');
-        // 刷新(refresh)
-        location.reload();
-    };
+	// 设置语言(setting language)
+	let lang = sessionStorage.getItem('lang') === 'en_US' ? 'en_US' : 'zh_CN';
+	$: isZh = lang === 'zh_CN';
+	setContext('STDF_lang', sessionStorage.getItem('lang') === 'en_US' ? en_US : zh_CN);
+	const toggleLangFun = () => {
+		lang = isZh ? 'en_US' : 'zh_CN';
+		sessionStorage.setItem('lang', isZh ? 'en_US' : 'zh_CN');
+		// 刷新(refresh)
+		location.reload();
+	};
 
-    // 进度条(percent)
-    let percent = 20;
-    const reduceFunc = () => {
-        percent > 0 && (percent -= 10);
-    };
-    const increaseFunc = () => {
-        percent < 100 && (percent += 10);
-    };
+	// 进度条(percent)
+	let percent = 20;
+	const reduceFunc = () => {
+		percent > 0 && (percent -= 10);
+	};
+	const increaseFunc = () => {
+		percent < 100 && (percent += 10);
+	};
 
-    // 日历(calendar)
-    let visible = false;
+	// 日历(calendar)
+	let visible = false;
 </script>
 
 <div class="flex justify-center items-center text-center gap-4 pt-10">
-    <a class="flex flex-col items-center w-10" href="https://kit.svelte.dev" target="_blank" rel="noreferrer">
-        <img src="/svelte.svg" alt="Svelte Logo" />
-    </a>+
-    <a class="flex flex-col items-center w-8" href="https://unocss.dev" target="_blank" rel="noreferrer">
-        <img src="/uno.svg" alt="UnoCSS Logo" />
-    </a>+
-    <a class="flex flex-col items-center w-8" href="https://stdf.design" target="_blank" rel="noreferrer">
-        <svg viewBox="0 0 90 80" fill="currentColor">
-            <path
-                class="text-primary dark:text-dark"
-                d="M0 0H20H40H50C64.8056 0 77.7325 8.04398 84.6487 20H50H40V22.6757V30H50C55.5229 30 60 34.4771 60 40C60 45.5229 55.5229 50 50 50H40V57.3243V78.7398V80H20V66.4583V20H15.3513H0V0ZM50 80C72.0914 80 90 62.0914 90 40C90 36.547 89.5625 33.1962 88.7398 30H67.3244C69.0261 32.9417 70 36.3571 70 40C70 51.0457 61.0457 60 50 60V80Z"
-            />
-            <path class="text-dark dark:text-primary" d="M20 30V0L0 50H20V80L40 30H20Z" />
-        </svg>
-    </a>
+	<a class="flex flex-col items-center w-10" href="https://kit.svelte.dev" target="_blank" rel="noreferrer">
+		<img src="/svelte.svg" alt="Svelte Logo" />
+	</a>+
+	<a class="flex flex-col items-center w-8" href="https://unocss.dev" target="_blank" rel="noreferrer">
+		<img src="/uno.svg" alt="UnoCSS Logo" />
+	</a>+
+	<a class="flex flex-col items-center w-8" href="https://stdf.design" target="_blank" rel="noreferrer">
+		<svg viewBox="0 0 90 80" fill="currentColor">
+			<path
+				class="text-primary dark:text-dark"
+				d="M0 0H20H40H50C64.8056 0 77.7325 8.04398 84.6487 20H50H40V22.6757V30H50C55.5229 30 60 34.4771 60 40C60 45.5229 55.5229 50 50 50H40V57.3243V78.7398V80H20V66.4583V20H15.3513H0V0ZM50 80C72.0914 80 90 62.0914 90 40C90 36.547 89.5625 33.1962 88.7398 30H67.3244C69.0261 32.9417 70 36.3571 70 40C70 51.0457 61.0457 60 50 60V80Z"
+			/>
+			<path class="text-dark dark:text-primary" d="M20 30V0L0 50H20V80L40 30H20Z" />
+		</svg>
+	</a>
 </div>
 <div class="text-center my-8 text-xs">
-    {#if isZh}
-        <p>这是一个使用 SvelteKit + UnoCSS + STDF 构建的模板。</p>
-        <p class="mt-2">点击上方 LOGO 了解更多。</p>
-    {:else}
-        <p>This is a template using SvelteKit + TailwindCSS + STDF.</p>
-        <p class="mt-2">Click the logo above to learn more.</p>
-    {/if}
+	{#if isZh}
+		<p>这是一个使用 SvelteKit + UnoCSS + STDF 构建的模板。</p>
+		<p class="mt-2">点击上方 LOGO 了解更多。</p>
+	{:else}
+		<p>This is a template using SvelteKit + TailwindCSS + STDF.</p>
+		<p class="mt-2">Click the logo above to learn more.</p>
+	{/if}
 </div>
 <div class="my-8">
-    <a href="about">
-        <Cell title={isZh ? '跳转 ABOUT' : 'Go to ABOUT'} />
-    </a>
+	<a href="about">
+		<Cell title={isZh ? '跳转 ABOUT' : 'Go to ABOUT'} />
+	</a>
 </div>
 <div class="my-8">
-    <Cell title={isZh ? '暗模式' : 'Dark mode'} right={{ type: 'switch', switch: { check: theme === 'dark' } }} on:click={toggleModeFun} />
+	<Cell title={isZh ? '暗模式' : 'Dark mode'} right={{ type: 'switch', switch: { check: theme === 'dark' } }} on:click={toggleModeFun} />
 </div>
 <div class="mt-8">
-    <Counter bind:percent />
+	<Counter bind:percent />
 </div>
 <div class="mb-8">
-    <Button heightIn="0" group fill="lineTheme">
-        <div class="flex divide-x">
-            <div class="flex-1 py-2 active:opacity-80" on:click={reduceFunc}>-10</div>
-            <div class="flex-1 py-2 active:opacity-80" on:click={increaseFunc}>+10</div>
-            <div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>{isZh ? '重置' : 'Reset'}</div>
-        </div>
-    </Button>
+	<Button heightIn="0" group fill="lineTheme">
+		<div class="flex divide-x">
+			<div class="flex-1 py-2 active:opacity-80" on:click={reduceFunc}>-10</div>
+			<div class="flex-1 py-2 active:opacity-80" on:click={increaseFunc}>+10</div>
+			<div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>{isZh ? '重置' : 'Reset'}</div>
+		</div>
+	</Button>
 </div>
 <div class="my-8">
-    <Button fill="lineTheme" on:click={() => (visible = true)}>{isZh ? '日历' : 'Calendar'}</Button>
+	<Button fill="lineTheme" on:click={() => (visible = true)}>{isZh ? '日历' : 'Calendar'}</Button>
 </div>
 <Calendar bind:visible />
 <div class="my-8 px-8 flex justify-between">
-    <Icon name="cake" theme path="symbols/Heroicons.svg" />
-    <Icon name="riding-line" path="symbols/Remix.svg" />
-    <Icon name="spy-line" theme path="symbols/Remix.svg" />
-    <Icon name="javascript-fill" injClass="text-[red] dark:text-green" path="symbols/Remix.svg" />
-    <Icon name="cup" theme path="symbols/IconPark.svg" />
+	<Icon name="cake" theme path="symbols/Heroicons.svg" />
+	<Icon name="riding-line" path="symbols/Remix.svg" />
+	<Icon name="spy-line" theme path="symbols/Remix.svg" />
+	<Icon name="javascript-fill" injClass="text-[red] dark:text-green" path="symbols/Remix.svg" />
+	<Icon name="cup" theme path="symbols/IconPark.svg" />
 </div>
 <div class="px-4 text-xs">
-    {isZh ? '图标：第一个来自' : 'Icons: The first one comes from'} <a class="underline" href="https://heroicons.com">Heroicons</a>
-    ，{isZh ? '最后一个来自' : 'the last one comes from'} <a class="underline" href="https://iconpark.oceanengine.com">IconPark</a>
-    ，{isZh ? '其余来自' : 'the rest come from'} <a class="underline" href="https://remixicon.com">Remix Icon</a> 。
+	{isZh ? '图标：第一个来自' : 'Icons: The first one comes from'} <a class="underline" href="https://heroicons.com">Heroicons</a>
+	，{isZh ? '最后一个来自' : 'the last one comes from'} <a class="underline" href="https://iconpark.oceanengine.com">IconPark</a>
+	，{isZh ? '其余来自' : 'the rest come from'} <a class="underline" href="https://remixicon.com">Remix Icon</a> 。
 </div>
 <div class="my-8">
-    <Button on:click={toggleLangFun}>{isZh ? '切换语言' : 'Toggle language'}</Button>
+	<Button on:click={toggleLangFun}>{isZh ? '切换语言' : 'Toggle language'}</Button>
 </div>

packages/create-stdf/templates/sveltekit-uno/src/routes/Counter.svelte

@@ -1,9 +1,9 @@
 <script>
-    import { Progress } from 'stdf';
+	import { Progress } from 'stdf';
 
-    export let percent = 20;
+	export let percent = 20;
 </script>
 
 <div class="p-4">
-    <Progress {percent} />
+	<Progress {percent} />
 </div>

packages/create-stdf/templates/sveltekit-uno/src/routes/about/+page.svelte

@@ -1,20 +1,20 @@
 <script>
-    import { NavBar } from 'stdf';
+	import { NavBar } from 'stdf';
 
-    const lang = sessionStorage.getItem('lang') === 'en_US' ? 'en_US' : 'zh_CN';
-    $: isZh = lang === 'zh_CN';
+	const lang = sessionStorage.getItem('lang') === 'en_US' ? 'en_US' : 'zh_CN';
+	$: isZh = lang === 'zh_CN';
 </script>
 
 <svelte:head>
-    <title>About</title>
-    <meta name="description" content="About this app" />
+	<title>About</title>
+	<meta name="description" content="About this app" />
 </svelte:head>
 
 <div class="sticky z-10 top-0">
-    <NavBar title={isZh ? '关于' : 'ABOUT'} on:clickleft={() => window.history.back()} />
+	<NavBar title={isZh ? '关于' : 'ABOUT'} on:clickleft={() => window.history.back()} />
 </div>
 
 <div class="px-2 py-20 text-center space-y-10">
-    <div class="text-3xl text-primary dark:text-dark">{isZh ? '这是一个关于页面' : 'This is a about page'}</div>
-    <div class="text-sm">{isZh ? '仅用于演示 SvelteKit 的路由功能' : "Only for demonstration of SvelteKit's routing functionality"}</div>
+	<div class="text-3xl text-primary dark:text-dark">{isZh ? '这是一个关于页面' : 'This is a about page'}</div>
+	<div class="text-sm">{isZh ? '仅用于演示 SvelteKit 的路由功能' : "Only for demonstration of SvelteKit's routing functionality"}</div>
 </div>

packages/create-stdf/templates/sveltekit-uno/svelte.config.js

@@ -3,19 +3,19 @@ import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-    kit: {
-        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-        // If your environment is not supported or you settled on a specific environment, switch out the adapter.
-        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
-        adapter: adapter(),
-    },
-    onwarn: (warning, handler) => {
-        if (warning.code.startsWith('a11y-')) {
-            return;
-        }
-        handler(warning);
-    },
-    preprocess: vitePreprocess(),
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter(),
+	},
+	onwarn: (warning, handler) => {
+		if (warning.code.startsWith('a11y-')) {
+			return;
+		}
+		handler(warning);
+	},
+	preprocess: vitePreprocess(),
 };
 
 export default config;

packages/create-stdf/templates/sveltekit-uno/uno.config.js

@@ -2,49 +2,49 @@
 import { defineConfig, presetUno } from 'unocss';
 
 export default defineConfig({
-    // ...UnoCSS options
-    content: {
-        filesystem: ['src/**/*.html', './node_modules/stdf/**/*.svelte'],
-    },
-    presets: [presetUno()],
-    theme: {
-        colors: {
-            // 主题色
-            // Theme Color
-            primary: '#0B24FB',
-            dark: '#FFC043',
-            blue: '#0B24FB', // primary 别名 alias
-            yellow: '#FFC043', // dark 别名 alias
+	// ...UnoCSS options
+	content: {
+		filesystem: ['src/**/*.html', './node_modules/stdf/**/*.svelte'],
+	},
+	presets: [presetUno()],
+	theme: {
+		colors: {
+			// 主题色
+			// Theme Color
+			primary: '#0B24FB',
+			dark: '#FFC043',
+			blue: '#0B24FB', // primary 别名 alias
+			yellow: '#FFC043', // dark 别名 alias
 
-            // 扩展色
-            // Extended Color
-            purple: '#7356BF',
-            green: '#05944F',
-            orange: '#FF6937',
+			// 扩展色
+			// Extended Color
+			purple: '#7356BF',
+			green: '#05944F',
+			orange: '#FF6937',
 
-            // 功能色
-            // Functional Color
-            success: '#11BB8D',
-            warning: '#B95000',
-            error: '#DA1414',
-            info: '#2E5AAC',
+			// 功能色
+			// Functional Color
+			success: '#11BB8D',
+			warning: '#B95000',
+			error: '#DA1414',
+			info: '#2E5AAC',
 
-            // 中性色
-            // Neutral Color
-            black: '#000000',
-            white: '#fff',
-            gray1: '#23262B',
-            gray2: '#2A2B2F',
-            gray3: '#303239',
-            gray4: '#373940',
-            gray5: '#414249',
-            gray6: '#747B84',
-            gray7: '#DADEE3',
-            gray8: '#EBEEF2',
-            gray9: '#F4F6F9',
-            gray10: '#FAFAFB',
-            transparent: 'transparent',
-        },
-        extend: {},
-    },
+			// 中性色
+			// Neutral Color
+			black: '#000000',
+			white: '#fff',
+			gray1: '#23262B',
+			gray2: '#2A2B2F',
+			gray3: '#303239',
+			gray4: '#373940',
+			gray5: '#414249',
+			gray6: '#747B84',
+			gray7: '#DADEE3',
+			gray8: '#EBEEF2',
+			gray9: '#F4F6F9',
+			gray10: '#FAFAFB',
+			transparent: 'transparent',
+		},
+		extend: {},
+	},
 });

packages/create-stdf/templates/sveltekit-uno/vite.config.js

@@ -5,22 +5,22 @@ import extractorSvelte from '@unocss/extractor-svelte';
 import svgSprite from 'rollup-plugin-stdf-icon';
 
 export default defineConfig({
-    plugins: [
-        UnoCSS({
-            extractors: [extractorSvelte()],
-        }),
-        sveltekit({}),
-        // 一般来说，一个应用的所有 svg 都放在一个文件夹下，合并为一个 symbol 即可。
-        // 此处只是为了演示不同文件夹下的图标如何合并为不同的 symbol。
-        // Generally speaking, all of an application svg are placed in a folder and merged into one symbol.
-        // Here is just to show how icons in different folders are merged into different symbols.
-        svgSprite([
-            { inFile: 'src/lib/svgs/Heroicons', outFile: 'static/symbols', fileName: 'Heroicons' },
-            { inFile: 'src/lib/svgs/IconPark', outFile: 'static/symbols', fileName: 'IconPark' },
-            { inFile: 'src/lib/svgs/Remix', outFile: 'static/symbols', fileName: 'Remix' },
-            // 单独为 Cell 与 NavBar 用到的图标创建一个 symbol。详见：https://stdf.design/#/guide?nav=icon
-            // Create a symbol for the icons used by Cell and NavBar. See: https://stdf.design/#/guide?nav=icon
-            { inFile: 'src/lib/icons', outFile: 'static/fonts', fileName: 'symbol' },
-        ]),
-    ],
+	plugins: [
+		UnoCSS({
+			extractors: [extractorSvelte()],
+		}),
+		sveltekit({}),
+		// 一般来说，一个应用的所有 svg 都放在一个文件夹下，合并为一个 symbol 即可。
+		// 此处只是为了演示不同文件夹下的图标如何合并为不同的 symbol。
+		// Generally speaking, all of an application svg are placed in a folder and merged into one symbol.
+		// Here is just to show how icons in different folders are merged into different symbols.
+		svgSprite([
+			{ inFile: 'src/lib/svgs/Heroicons', outFile: 'static/symbols', fileName: 'Heroicons' },
+			{ inFile: 'src/lib/svgs/IconPark', outFile: 'static/symbols', fileName: 'IconPark' },
+			{ inFile: 'src/lib/svgs/Remix', outFile: 'static/symbols', fileName: 'Remix' },
+			// 单独为 Cell 与 NavBar 用到的图标创建一个 symbol。详见：https://stdf.design/#/guide?nav=icon
+			// Create a symbol for the icons used by Cell and NavBar. See: https://stdf.design/#/guide?nav=icon
+			{ inFile: 'src/lib/icons', outFile: 'static/fonts', fileName: 'symbol' },
+		]),
+	],
 });

packages/create-stdf/templates/vite-tailwind/README.md

@@ -4,9 +4,9 @@ This template should help get you started developing with Svelte + Tailwind + ST
 
 ## Recommended IDE Setup
 
--   [VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) + [Tailwind](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) + [STDF](https://stdf.design) .
+- [VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) + [Tailwind](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) + [STDF](https://stdf.design) .
 
--   [WebStorm](https://www.jetbrains.com/webstorm/) + [Svelte](https://www.jetbrains.com/help/webstorm/svelte.html) + [Tailwind](https://www.jetbrains.com/help/webstorm/tailwind-css.html) + [STDF](https://stdf.design) .
+- [WebStorm](https://www.jetbrains.com/webstorm/) + [Svelte](https://www.jetbrains.com/help/webstorm/svelte.html) + [Tailwind](https://www.jetbrains.com/help/webstorm/tailwind-css.html) + [STDF](https://stdf.design) .
 
 ## More Info
 

packages/create-stdf/templates/vite-tailwind/index.html

@@ -1,17 +1,15 @@
 <!doctype html>
 <html>
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/stdf.svg" media="(prefers-color-scheme: light)" />
+		<link rel="icon" type="image/svg+xml" href="/stdf_dark.svg" media="(prefers-color-scheme: dark)" />
+		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
+		<title>Vite + Svelte + Tailwind + STDF</title>
+	</head>
 
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/stdf.svg" media="(prefers-color-scheme: light)" />
-  <link rel="icon" type="image/svg+xml" href="/stdf_dark.svg" media="(prefers-color-scheme: dark)" />
-  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
-  <title>Vite + Svelte + Tailwind + STDF</title>
-</head>
-
-<body class="bg-gray9 dark:bg-gray3 text-black dark:text-white/90">
-  <div id="app"></div>
-  <script type="module" src="/src/main.js"></script>
-</body>
-
-</html>
+	<body class="bg-gray9 dark:bg-gray3 text-black dark:text-white/90">
+		<div id="app"></div>
+		<script type="module" src="/src/main.js"></script>
+	</body>
+</html>

packages/create-stdf/templates/vite-tailwind/package.json

@@ -1,21 +1,21 @@
 {
-    "name": "stdf-project",
-    "private": true,
-    "version": "0.0.0",
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "vite build",
-        "preview": "vite preview"
-    },
-    "devDependencies": {
-        "@sveltejs/vite-plugin-svelte": "^2.4.5",
-        "autoprefixer": "^10.4.14",
-        "postcss": "^8.4.27",
-        "stdf": "file:../../../stdf",
-        "svelte": "^4.1.1",
-        "tailwindcss": "^3.3.3",
-        "vite": "^4.4.6",
-        "rollup-plugin-stdf-icon": "file:../../../rollup-plugin-stdf-icon"
-    }
+	"name": "stdf-project",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"devDependencies": {
+		"@sveltejs/vite-plugin-svelte": "^2.4.5",
+		"autoprefixer": "^10.4.14",
+		"postcss": "^8.4.27",
+		"stdf": "file:../../../stdf",
+		"svelte": "^4.1.1",
+		"tailwindcss": "^3.3.3",
+		"vite": "^4.4.6",
+		"rollup-plugin-stdf-icon": "file:../../../rollup-plugin-stdf-icon"
+	}
 }

packages/create-stdf/templates/vite-tailwind/postcss.config.js

@@ -3,5 +3,5 @@ import tailwindConfig from './tailwind.config.js';
 import autoprefixer from 'autoprefixer';
 
 export default {
-    plugins: [tailwind(tailwindConfig), autoprefixer],
+	plugins: [tailwind(tailwindConfig), autoprefixer],
 };

packages/create-stdf/templates/vite-tailwind/src/App.svelte

@@ -1,123 +1,119 @@
 <script>
-    import { setContext } from 'svelte';
-    import en_US from 'stdf/lang/en_US';
-    import zh_CN from 'stdf/lang/zh_CN';
-    import { Button, Cell, Calendar, Icon } from 'stdf';
-    import Counter from './lib/Counter.svelte';
+	import { setContext } from 'svelte';
+	import en_US from 'stdf/lang/en_US';
+	import zh_CN from 'stdf/lang/zh_CN';
+	import { Button, Cell, Calendar, Icon } from 'stdf';
+	import Counter from './lib/Counter.svelte';
 
-    import viteLogo from './assets/vite.svg';
-    import svelteLogo from './assets/svelte.svg';
-    import tailwindLogo from './assets/tailwindcss.svg';
+	import viteLogo from './assets/vite.svg';
+	import svelteLogo from './assets/svelte.svg';
+	import tailwindLogo from './assets/tailwindcss.svg';
 
-    //切换亮暗模式(toggle light or dark mode)
-    let theme = sessionStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
-    if (theme === 'dark') {
-        document.documentElement.classList.add('dark');
-    }
-    const toggleModeFun = () => {
-        if (theme === 'dark') {
-            // 切换到(light switch to light)
-            theme = 'light';
-            document.documentElement.classList.remove('dark');
-            sessionStorage.setItem('theme', 'light');
-        } else {
-            // 切换到(dark switch to dark)
-            theme = 'dark';
-            document.documentElement.classList.add('dark');
-            sessionStorage.setItem('theme', 'dark');
-        }
-    };
+	//切换亮暗模式(toggle light or dark mode)
+	let theme = sessionStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
+	if (theme === 'dark') {
+		document.documentElement.classList.add('dark');
+	}
+	const toggleModeFun = () => {
+		if (theme === 'dark') {
+			// 切换到(light switch to light)
+			theme = 'light';
+			document.documentElement.classList.remove('dark');
+			sessionStorage.setItem('theme', 'light');
+		} else {
+			// 切换到(dark switch to dark)
+			theme = 'dark';
+			document.documentElement.classList.add('dark');
+			sessionStorage.setItem('theme', 'dark');
+		}
+	};
 
-    // 设置语言(setting language)
-    let lang = sessionStorage.getItem('lang') === 'en_US' ? 'en_US' : 'zh_CN';
-    $: isZh = lang === 'zh_CN';
-    setContext('STDF_lang', sessionStorage.getItem('lang') === 'en_US' ? en_US : zh_CN);
-    const toggleLangFun = () => {
-        lang = isZh ? 'en_US' : 'zh_CN';
-        sessionStorage.setItem('lang', isZh ? 'en_US' : 'zh_CN');
-        // 刷新(refresh)
-        location.reload();
-    };
+	// 设置语言(setting language)
+	let lang = sessionStorage.getItem('lang') === 'en_US' ? 'en_US' : 'zh_CN';
+	$: isZh = lang === 'zh_CN';
+	setContext('STDF_lang', sessionStorage.getItem('lang') === 'en_US' ? en_US : zh_CN);
+	const toggleLangFun = () => {
+		lang = isZh ? 'en_US' : 'zh_CN';
+		sessionStorage.setItem('lang', isZh ? 'en_US' : 'zh_CN');
+		// 刷新(refresh)
+		location.reload();
+	};
 
-    // 进度条(percent)
-    let percent = 20;
-    const reduceFunc = () => {
-        percent > 0 && (percent -= 10);
-    };
-    const increaseFunc = () => {
-        percent < 100 && (percent += 10);
-    };
+	// 进度条(percent)
+	let percent = 20;
+	const reduceFunc = () => {
+		percent > 0 && (percent -= 10);
+	};
+	const increaseFunc = () => {
+		percent < 100 && (percent += 10);
+	};
 
-    // 日历(calendar)
-    let visible = false;
+	// 日历(calendar)
+	let visible = false;
 </script>
 
 <main>
-    <div class="flex justify-center items-center text-center gap-4 pt-20">
-        <a class="flex flex-col items-center w-10" href="https://vitejs.dev" target="_blank" rel="noreferrer">
-            <img src={viteLogo} alt="Vite Logo" />
-        </a>+
-        <a class="flex flex-col items-center w-10" href="https://svelte.dev" target="_blank" rel="noreferrer">
-            <img src={svelteLogo} alt="Svelte Logo" />
-        </a>+
-        <a class="flex flex-col items-center w-10" href="https://tailwindcss.com" target="_blank" rel="noreferrer">
-            <img src={tailwindLogo} alt="Tailwind Logo" />
-        </a>+
-        <a class="flex flex-col items-center w-8" href="https://stdf.design" target="_blank" rel="noreferrer">
-            <svg viewBox="0 0 90 80" fill="currentColor">
-                <path
-                    class="text-primary dark:text-dark"
-                    d="M0 0H20H40H50C64.8056 0 77.7325 8.04398 84.6487 20H50H40V22.6757V30H50C55.5229 30 60 34.4771 60 40C60 45.5229 55.5229 50 50 50H40V57.3243V78.7398V80H20V66.4583V20H15.3513H0V0ZM50 80C72.0914 80 90 62.0914 90 40C90 36.547 89.5625 33.1962 88.7398 30H67.3244C69.0261 32.9417 70 36.3571 70 40C70 51.0457 61.0457 60 50 60V80Z"
-                />
-                <path class="text-dark dark:text-primary" d="M20 30V0L0 50H20V80L40 30H20Z" />
-            </svg>
-        </a>
-    </div>
-    <div class="text-center my-8 text-xs">
-        {#if isZh}
-            <p>这是一个使用 Vite + Svelte + Tailwind + STDF 构建的模板。</p>
-            <p class="mt-2">点击上方 LOGO 了解更多。</p>
-        {:else}
-            <p>This is a template using Vite + Svelte + TailwindCSS + STDF.</p>
-            <p class="mt-2">Click the logo above to learn more.</p>
-        {/if}
-    </div>
-    <div class="my-8">
-        <Cell
-            title={isZh ? '暗模式' : 'Dark mode'}
-            right={{ type: 'switch', switch: { check: theme === 'dark' } }}
-            on:click={toggleModeFun}
-        />
-    </div>
-    <div class="my-8">
-        <Counter bind:percent />
-    </div>
-    <div class="my-8">
-        <Button heightIn="0" group fill="lineTheme">
-            <div class="flex divide-x">
-                <div class="flex-1 py-2 active:opacity-80" on:click={reduceFunc}>-10</div>
-                <div class="flex-1 py-2 active:opacity-80" on:click={increaseFunc}>+10</div>
-                <div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>{isZh ? '重置' : 'Reset'}</div>
-            </div>
-        </Button>
-    </div>
-    <div class="my-8">
-        <Button fill="lineTheme" on:click={() => (visible = true)}>{isZh ? '日历' : 'Calendar'}</Button>
-    </div>
-    <Calendar bind:visible />
-    <div class="my-8 px-8 flex justify-between">
-        <Icon name="cake" theme path="fonts/Heroicons.svg" />
-        <Icon name="riding-line" path="fonts/Remix.svg" />
-        <Icon name="spy-line" theme path="fonts/Remix.svg" />
-        <Icon name="javascript-fill" injClass="text-[red] dark:text-green" path="fonts/Remix.svg" />
-        <Icon name="cup" theme path="fonts/IconPark.svg" />
-    </div>
-    <div class="px-4 text-xs">
-        {isZh ? '图标：第一个来自' : 'Icons: The first one comes from'} <a class="underline" href="https://heroicons.com">Heroicons</a>
-        ，{isZh ? '最后一个来自' : 'the last one comes from'} <a class="underline" href="https://iconpark.oceanengine.com">IconPark</a>
-        ，{isZh ? '其余来自' : 'the rest come from'} <a class="underline" href="https://remixicon.com">Remix Icon</a> 。
-    </div>
-    <div class="my-8">
-        <Button on:click={toggleLangFun}>{isZh ? '切换语言' : 'Toggle language'}</Button>
-    </div>
+	<div class="flex justify-center items-center text-center gap-4 pt-20">
+		<a class="flex flex-col items-center w-10" href="https://vitejs.dev" target="_blank" rel="noreferrer">
+			<img src={viteLogo} alt="Vite Logo" />
+		</a>+
+		<a class="flex flex-col items-center w-10" href="https://svelte.dev" target="_blank" rel="noreferrer">
+			<img src={svelteLogo} alt="Svelte Logo" />
+		</a>+
+		<a class="flex flex-col items-center w-10" href="https://tailwindcss.com" target="_blank" rel="noreferrer">
+			<img src={tailwindLogo} alt="Tailwind Logo" />
+		</a>+
+		<a class="flex flex-col items-center w-8" href="https://stdf.design" target="_blank" rel="noreferrer">
+			<svg viewBox="0 0 90 80" fill="currentColor">
+				<path
+					class="text-primary dark:text-dark"
+					d="M0 0H20H40H50C64.8056 0 77.7325 8.04398 84.6487 20H50H40V22.6757V30H50C55.5229 30 60 34.4771 60 40C60 45.5229 55.5229 50 50 50H40V57.3243V78.7398V80H20V66.4583V20H15.3513H0V0ZM50 80C72.0914 80 90 62.0914 90 40C90 36.547 89.5625 33.1962 88.7398 30H67.3244C69.0261 32.9417 70 36.3571 70 40C70 51.0457 61.0457 60 50 60V80Z"
+				/>
+				<path class="text-dark dark:text-primary" d="M20 30V0L0 50H20V80L40 30H20Z" />
+			</svg>
+		</a>
+	</div>
+	<div class="text-center my-8 text-xs">
+		{#if isZh}
+			<p>这是一个使用 Vite + Svelte + Tailwind + STDF 构建的模板。</p>
+			<p class="mt-2">点击上方 LOGO 了解更多。</p>
+		{:else}
+			<p>This is a template using Vite + Svelte + TailwindCSS + STDF.</p>
+			<p class="mt-2">Click the logo above to learn more.</p>
+		{/if}
+	</div>
+	<div class="my-8">
+		<Cell title={isZh ? '暗模式' : 'Dark mode'} right={{ type: 'switch', switch: { check: theme === 'dark' } }} on:click={toggleModeFun} />
+	</div>
+	<div class="my-8">
+		<Counter bind:percent />
+	</div>
+	<div class="my-8">
+		<Button heightIn="0" group fill="lineTheme">
+			<div class="flex divide-x">
+				<div class="flex-1 py-2 active:opacity-80" on:click={reduceFunc}>-10</div>
+				<div class="flex-1 py-2 active:opacity-80" on:click={increaseFunc}>+10</div>
+				<div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>{isZh ? '重置' : 'Reset'}</div>
+			</div>
+		</Button>
+	</div>
+	<div class="my-8">
+		<Button fill="lineTheme" on:click={() => (visible = true)}>{isZh ? '日历' : 'Calendar'}</Button>
+	</div>
+	<Calendar bind:visible />
+	<div class="my-8 px-8 flex justify-between">
+		<Icon name="cake" theme path="fonts/Heroicons.svg" />
+		<Icon name="riding-line" path="fonts/Remix.svg" />
+		<Icon name="spy-line" theme path="fonts/Remix.svg" />
+		<Icon name="javascript-fill" injClass="text-[red] dark:text-green" path="fonts/Remix.svg" />
+		<Icon name="cup" theme path="fonts/IconPark.svg" />
+	</div>
+	<div class="px-4 text-xs">
+		{isZh ? '图标：第一个来自' : 'Icons: The first one comes from'} <a class="underline" href="https://heroicons.com">Heroicons</a>
+		，{isZh ? '最后一个来自' : 'the last one comes from'} <a class="underline" href="https://iconpark.oceanengine.com">IconPark</a>
+		，{isZh ? '其余来自' : 'the rest come from'} <a class="underline" href="https://remixicon.com">Remix Icon</a> 。
+	</div>
+	<div class="my-8">
+		<Button on:click={toggleLangFun}>{isZh ? '切换语言' : 'Toggle language'}</Button>
+	</div>
 </main>

packages/create-stdf/templates/vite-tailwind/src/app.css

@@ -3,5 +3,5 @@
 @tailwind utilities;
 
 html {
-    -webkit-tap-highlight-color: transparent;
+	-webkit-tap-highlight-color: transparent;
 }

packages/create-stdf/templates/vite-tailwind/src/lib/Counter.svelte

@@ -1,9 +1,9 @@
 <script>
-    import { Progress } from 'stdf';
+	import { Progress } from 'stdf';
 
-    export let percent = 20;
+	export let percent = 20;
 </script>
 
 <div class="p-4">
-    <Progress {percent} />
+	<Progress {percent} />
 </div>

packages/create-stdf/templates/vite-tailwind/src/main.js

@@ -2,14 +2,14 @@ import './app.css';
 import App from './App.svelte';
 
 const app = new App({
-    target: document.getElementById('app'),
+	target: document.getElementById('app'),
 });
 
 //解决ios不支持按钮:active伪类
 // Solve the problem that ios does not support the button: active pseudo class
 document.body.addEventListener('touchstart', function () {
-    //...空函数即可
-    // ... Empty function is OK
+	//...空函数即可
+	// ... Empty function is OK
 });
 
 export default app;

packages/create-stdf/templates/vite-tailwind/svelte.config.js

@@ -1,7 +1,7 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 export default {
-    // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
-    // for more information about preprocessors
-    preprocess: vitePreprocess(),
+	// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
 };

packages/create-stdf/templates/vite-tailwind/tailwind.config.js

@@ -1,46 +1,46 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-    content: ['./index.html', './src/**/*.svelte', './node_modules/stdf/**/*.svelte'],
-    theme: {
-        colors: {
-            // 主题色
-            // Theme Color
-            primary: '#0B24FB',
-            dark: '#FFC043',
-            blue: '#0B24FB', // primary 别名 alias
-            yellow: '#FFC043', // dark 别名 alias
+	content: ['./index.html', './src/**/*.svelte', './node_modules/stdf/**/*.svelte'],
+	theme: {
+		colors: {
+			// 主题色
+			// Theme Color
+			primary: '#0B24FB',
+			dark: '#FFC043',
+			blue: '#0B24FB', // primary 别名 alias
+			yellow: '#FFC043', // dark 别名 alias
 
-            // 扩展色
-            // Extended Color
-            purple: '#7356BF',
-            green: '#05944F',
-            orange: '#FF6937',
+			// 扩展色
+			// Extended Color
+			purple: '#7356BF',
+			green: '#05944F',
+			orange: '#FF6937',
 
-            // 功能色
-            // Functional Color
-            success: '#11BB8D',
-            warning: '#B95000',
-            error: '#DA1414',
-            info: '#2E5AAC',
+			// 功能色
+			// Functional Color
+			success: '#11BB8D',
+			warning: '#B95000',
+			error: '#DA1414',
+			info: '#2E5AAC',
 
-            // 中性色
-            // Neutral Color
-            black: '#000000',
-            white: '#fff',
-            gray1: '#23262B',
-            gray2: '#2A2B2F',
-            gray3: '#303239',
-            gray4: '#373940',
-            gray5: '#414249',
-            gray6: '#747B84',
-            gray7: '#DADEE3',
-            gray8: '#EBEEF2',
-            gray9: '#F4F6F9',
-            gray10: '#FAFAFB',
-            transparent: 'transparent',
-        },
-        extend: {},
-    },
-    darkMode: 'class',
-    plugins: [],
+			// 中性色
+			// Neutral Color
+			black: '#000000',
+			white: '#fff',
+			gray1: '#23262B',
+			gray2: '#2A2B2F',
+			gray3: '#303239',
+			gray4: '#373940',
+			gray5: '#414249',
+			gray6: '#747B84',
+			gray7: '#DADEE3',
+			gray8: '#EBEEF2',
+			gray9: '#F4F6F9',
+			gray10: '#FAFAFB',
+			transparent: 'transparent',
+		},
+		extend: {},
+	},
+	darkMode: 'class',
+	plugins: [],
 };

packages/create-stdf/templates/vite-tailwind/vite.config.js

@@ -5,27 +5,27 @@ import svgSprite from 'rollup-plugin-stdf-icon';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [
-        svelte({
-            onwarn(warning, defaultHandler) {
-                if (warning.code.startsWith('a11y-')) {
-                    return;
-                }
-                // handle all other warnings normally
-                defaultHandler(warning);
-            },
-        }),
-        // 一般来说，一个应用的所有 svg 都放在一个文件夹下，合并为一个 symbol 即可。
-        // 如默认配置的 src/assets/icons 内，合并之后 symbol 会放置于 public/fonts/symbol.svg 下。
-        // 此处只是为了演示不同文件夹下的图标如何合并为不同的 symbol。
-        // Generally speaking, all of an application svg are placed in a folder and merged into one symbol.
-        // As in the default configuration of src/assets/icons, the merged symbol will be placed under public/fonts/symbol.svg.
-        // Here is just to show how icons in different folders are merged into different symbols.
-        svgSprite([
-            { inFile: 'src/assets/Heroicons', outFile: 'public/fonts', fileName: 'Heroicons' },
-            { inFile: 'src/assets/IconPark', outFile: 'public/fonts', fileName: 'IconPark' },
-            { inFile: 'src/assets/Remix', outFile: 'public/fonts', fileName: 'Remix' },
-        ]),
-    ],
-    css: { postcss },
+	plugins: [
+		svelte({
+			onwarn(warning, defaultHandler) {
+				if (warning.code.startsWith('a11y-')) {
+					return;
+				}
+				// handle all other warnings normally
+				defaultHandler(warning);
+			},
+		}),
+		// 一般来说，一个应用的所有 svg 都放在一个文件夹下，合并为一个 symbol 即可。
+		// 如默认配置的 src/assets/icons 内，合并之后 symbol 会放置于 public/fonts/symbol.svg 下。
+		// 此处只是为了演示不同文件夹下的图标如何合并为不同的 symbol。
+		// Generally speaking, all of an application svg are placed in a folder and merged into one symbol.
+		// As in the default configuration of src/assets/icons, the merged symbol will be placed under public/fonts/symbol.svg.
+		// Here is just to show how icons in different folders are merged into different symbols.
+		svgSprite([
+			{ inFile: 'src/assets/Heroicons', outFile: 'public/fonts', fileName: 'Heroicons' },
+			{ inFile: 'src/assets/IconPark', outFile: 'public/fonts', fileName: 'IconPark' },
+			{ inFile: 'src/assets/Remix', outFile: 'public/fonts', fileName: 'Remix' },
+		]),
+	],
+	css: { postcss },
 });

packages/create-stdf/templates/vite-uno/index.html

@@ -1,14 +1,15 @@
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/stdf.svg" media="(prefers-color-scheme: light)" />
-  <link rel="icon" type="image/svg+xml" href="/stdf_dark.svg" media="(prefers-color-scheme: dark)" />
-  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
-  <title>Vite + Svelte + UnoCSS + STDF</title>
-</head>
+<!doctype html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/stdf.svg" media="(prefers-color-scheme: light)" />
+		<link rel="icon" type="image/svg+xml" href="/stdf_dark.svg" media="(prefers-color-scheme: dark)" />
+		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
+		<title>Vite + Svelte + UnoCSS + STDF</title>
+	</head>
 
-<body class="bg-gray9 dark:bg-gray3 text-black dark:text-white/90">
-  <div id="app"></div>
-  <script type="module" src="/src/main.js"></script>
-</body>
-
-</html>
+	<body class="bg-gray9 dark:bg-gray3 text-black dark:text-white/90">
+		<div id="app"></div>
+		<script type="module" src="/src/main.js"></script>
+	</body>
+</html>

packages/create-stdf/templates/vite-uno/package.json

@@ -1,21 +1,21 @@
 {
-    "name": "stdf-project",
-    "private": true,
-    "version": "0.0.0",
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "vite build",
-        "preview": "vite preview"
-    },
-    "devDependencies": {
-        "@sveltejs/vite-plugin-svelte": "^2.4.5",
-        "@unocss/extractor-svelte": "^0.54.2",
-        "@unocss/reset": "^0.54.2",
-        "stdf": "file:../../../stdf",
-        "svelte": "^4.1.1",
-        "unocss": "^0.53.6",
-        "vite": "^4.4.6",
-        "rollup-plugin-stdf-icon": "file:../../../rollup-plugin-stdf-icon"
-    }
+	"name": "stdf-project",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"devDependencies": {
+		"@sveltejs/vite-plugin-svelte": "^2.4.5",
+		"@unocss/extractor-svelte": "^0.54.2",
+		"@unocss/reset": "^0.54.2",
+		"stdf": "file:../../../stdf",
+		"svelte": "^4.1.1",
+		"unocss": "^0.53.6",
+		"vite": "^4.4.6",
+		"rollup-plugin-stdf-icon": "file:../../../rollup-plugin-stdf-icon"
+	}
 }

packages/create-stdf/templates/vite-uno/src/App.svelte

@@ -1,123 +1,119 @@
 <script>
-    import { setContext } from 'svelte';
-    import en_US from 'stdf/lang/en_US';
-    import zh_CN from 'stdf/lang/zh_CN';
-    import { Button, Cell, Calendar, Icon } from 'stdf';
-    import Counter from './lib/Counter.svelte';
+	import { setContext } from 'svelte';
+	import en_US from 'stdf/lang/en_US';
+	import zh_CN from 'stdf/lang/zh_CN';
+	import { Button, Cell, Calendar, Icon } from 'stdf';
+	import Counter from './lib/Counter.svelte';
 
-    import viteLogo from './assets/vite.svg';
-    import svelteLogo from './assets/svelte.svg';
-    import unoLogo from './assets/uno.svg';
+	import viteLogo from './assets/vite.svg';
+	import svelteLogo from './assets/svelte.svg';
+	import unoLogo from './assets/uno.svg';
 
-    //切换亮暗模式(toggle light or dark mode)
-    let theme = sessionStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
-    if (theme === 'dark') {
-        document.documentElement.classList.add('dark');
-    }
-    const toggleModeFun = () => {
-        if (theme === 'dark') {
-            // 切换到(light switch to light)
-            theme = 'light';
-            document.documentElement.classList.remove('dark');
-            sessionStorage.setItem('theme', 'light');
-        } else {
-            // 切换到(dark switch to dark)
-            theme = 'dark';
-            document.documentElement.classList.add('dark');
-            sessionStorage.setItem('theme', 'dark');
-        }
-    };
+	//切换亮暗模式(toggle light or dark mode)
+	let theme = sessionStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
+	if (theme === 'dark') {
+		document.documentElement.classList.add('dark');
+	}
+	const toggleModeFun = () => {
+		if (theme === 'dark') {
+			// 切换到(light switch to light)
+			theme = 'light';
+			document.documentElement.classList.remove('dark');
+			sessionStorage.setItem('theme', 'light');
+		} else {
+			// 切换到(dark switch to dark)
+			theme = 'dark';
+			document.documentElement.classList.add('dark');
+			sessionStorage.setItem('theme', 'dark');
+		}
+	};
 
-    // 设置语言(setting language)
-    let lang = sessionStorage.getItem('lang') === 'en_US' ? 'en_US' : 'zh_CN';
-    $: isZh = lang === 'zh_CN';
-    setContext('STDF_lang', sessionStorage.getItem('lang') === 'en_US' ? en_US : zh_CN);
-    const toggleLangFun = () => {
-        lang = isZh ? 'en_US' : 'zh_CN';
-        sessionStorage.setItem('lang', isZh ? 'en_US' : 'zh_CN');
-        // 刷新(refresh)
-        location.reload();
-    };
+	// 设置语言(setting language)
+	let lang = sessionStorage.getItem('lang') === 'en_US' ? 'en_US' : 'zh_CN';
+	$: isZh = lang === 'zh_CN';
+	setContext('STDF_lang', sessionStorage.getItem('lang') === 'en_US' ? en_US : zh_CN);
+	const toggleLangFun = () => {
+		lang = isZh ? 'en_US' : 'zh_CN';
+		sessionStorage.setItem('lang', isZh ? 'en_US' : 'zh_CN');
+		// 刷新(refresh)
+		location.reload();
+	};
 
-    // 进度条(percent)
-    let percent = 20;
-    const reduceFunc = () => {
-        percent > 0 && (percent -= 10);
-    };
-    const increaseFunc = () => {
-        percent < 100 && (percent += 10);
-    };
+	// 进度条(percent)
+	let percent = 20;
+	const reduceFunc = () => {
+		percent > 0 && (percent -= 10);
+	};
+	const increaseFunc = () => {
+		percent < 100 && (percent += 10);
+	};
 
-    // 日历(calendar)
-    let visible = false;
+	// 日历(calendar)
+	let visible = false;
 </script>
 
 <main>
-    <div class="flex justify-center items-center text-center gap-4 pt-20">
-        <a class="flex flex-col items-center w-10" href="https://vitejs.dev" target="_blank" rel="noreferrer">
-            <img src={viteLogo} alt="Vite Logo" />
-        </a>+
-        <a class="flex flex-col items-center w-10" href="https://svelte.dev" target="_blank" rel="noreferrer">
-            <img src={svelteLogo} alt="Svelte Logo" />
-        </a>+
-        <a class="flex flex-col items-center w-8" href="https://unocss.dev" target="_blank" rel="noreferrer">
-            <img src={unoLogo} alt="UnoCSS Logo" />
-        </a>+
-        <a class="flex flex-col items-center w-8" href="https://stdf.design" target="_blank" rel="noreferrer">
-            <svg viewBox="0 0 90 80" fill="currentColor">
-                <path
-                    class="text-primary dark:text-dark"
-                    d="M0 0H20H40H50C64.8056 0 77.7325 8.04398 84.6487 20H50H40V22.6757V30H50C55.5229 30 60 34.4771 60 40C60 45.5229 55.5229 50 50 50H40V57.3243V78.7398V80H20V66.4583V20H15.3513H0V0ZM50 80C72.0914 80 90 62.0914 90 40C90 36.547 89.5625 33.1962 88.7398 30H67.3244C69.0261 32.9417 70 36.3571 70 40C70 51.0457 61.0457 60 50 60V80Z"
-                />
-                <path class="text-dark dark:text-primary" d="M20 30V0L0 50H20V80L40 30H20Z" />
-            </svg>
-        </a>
-    </div>
-    <div class="text-center my-8 text-xs">
-        {#if isZh}
-            <p>这是一个使用 Vite + Svelte + UnoCSS + STDF 构建的模板。</p>
-            <p class="mt-2">点击上方 LOGO 了解更多。</p>
-        {:else}
-            <p>This is a template using Vite + Svelte + UnoCSS + STDF.</p>
-            <p class="mt-2">Click the logo above to learn more.</p>
-        {/if}
-    </div>
-    <div class="my-8">
-        <Cell
-            title={isZh ? '暗模式' : 'Dark mode'}
-            right={{ type: 'switch', switch: { check: theme === 'dark' } }}
-            on:click={toggleModeFun}
-        />
-    </div>
-    <div class="my-8">
-        <Counter bind:percent />
-    </div>
-    <div class="my-8">
-        <Button heightIn="0" group fill="lineTheme">
-            <div class="flex divide-x">
-                <div class="flex-1 py-2 active:opacity-80" on:click={reduceFunc}>-10</div>
-                <div class="flex-1 py-2 active:opacity-80" on:click={increaseFunc}>+10</div>
-                <div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>{isZh ? '重置' : 'Reset'}</div>
-            </div>
-        </Button>
-    </div>
-    <div class="my-8">
-        <Button fill="lineTheme" on:click={() => (visible = true)}>{isZh ? '日历' : 'Calendar'}</Button>
-    </div>
-    <Calendar bind:visible />
-    <div class="my-8 px-8 flex justify-between">
-        <Icon name="cake" theme path="fonts/Heroicons.svg" />
-        <Icon name="riding-line" path="fonts/Remix.svg" />
-        <Icon name="spy-line" theme path="fonts/Remix.svg" />
-        <Icon name="javascript-fill" injClass="text-[red] dark:text-green" path="fonts/Remix.svg" />
-        <Icon name="cup" theme path="fonts/IconPark.svg" />
-    </div>
-    <div class="px-4 text-xs">
-        {isZh ? '图标：第一个来自' : 'Icons: The first one comes from'} <a class="underline" href="https://heroicons.com">Heroicons</a>
-        ，{isZh ? '最后一个来自' : 'the last one comes from'} <a class="underline" href="https://iconpark.oceanengine.com">IconPark</a>
-        ，{isZh ? '其余来自' : 'the rest come from'} <a class="underline" href="https://remixicon.com">Remix Icon</a> 。
-    </div>
-    <div class="my-8">
-        <Button on:click={toggleLangFun}>{isZh ? '切换语言' : 'Toggle language'}</Button>
-    </div>
+	<div class="flex justify-center items-center text-center gap-4 pt-20">
+		<a class="flex flex-col items-center w-10" href="https://vitejs.dev" target="_blank" rel="noreferrer">
+			<img src={viteLogo} alt="Vite Logo" />
+		</a>+
+		<a class="flex flex-col items-center w-10" href="https://svelte.dev" target="_blank" rel="noreferrer">
+			<img src={svelteLogo} alt="Svelte Logo" />
+		</a>+
+		<a class="flex flex-col items-center w-8" href="https://unocss.dev" target="_blank" rel="noreferrer">
+			<img src={unoLogo} alt="UnoCSS Logo" />
+		</a>+
+		<a class="flex flex-col items-center w-8" href="https://stdf.design" target="_blank" rel="noreferrer">
+			<svg viewBox="0 0 90 80" fill="currentColor">
+				<path
+					class="text-primary dark:text-dark"
+					d="M0 0H20H40H50C64.8056 0 77.7325 8.04398 84.6487 20H50H40V22.6757V30H50C55.5229 30 60 34.4771 60 40C60 45.5229 55.5229 50 50 50H40V57.3243V78.7398V80H20V66.4583V20H15.3513H0V0ZM50 80C72.0914 80 90 62.0914 90 40C90 36.547 89.5625 33.1962 88.7398 30H67.3244C69.0261 32.9417 70 36.3571 70 40C70 51.0457 61.0457 60 50 60V80Z"
+				/>
+				<path class="text-dark dark:text-primary" d="M20 30V0L0 50H20V80L40 30H20Z" />
+			</svg>
+		</a>
+	</div>
+	<div class="text-center my-8 text-xs">
+		{#if isZh}
+			<p>这是一个使用 Vite + Svelte + UnoCSS + STDF 构建的模板。</p>
+			<p class="mt-2">点击上方 LOGO 了解更多。</p>
+		{:else}
+			<p>This is a template using Vite + Svelte + UnoCSS + STDF.</p>
+			<p class="mt-2">Click the logo above to learn more.</p>
+		{/if}
+	</div>
+	<div class="my-8">
+		<Cell title={isZh ? '暗模式' : 'Dark mode'} right={{ type: 'switch', switch: { check: theme === 'dark' } }} on:click={toggleModeFun} />
+	</div>
+	<div class="my-8">
+		<Counter bind:percent />
+	</div>
+	<div class="my-8">
+		<Button heightIn="0" group fill="lineTheme">
+			<div class="flex divide-x">
+				<div class="flex-1 py-2 active:opacity-80" on:click={reduceFunc}>-10</div>
+				<div class="flex-1 py-2 active:opacity-80" on:click={increaseFunc}>+10</div>
+				<div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>{isZh ? '重置' : 'Reset'}</div>
+			</div>
+		</Button>
+	</div>
+	<div class="my-8">
+		<Button fill="lineTheme" on:click={() => (visible = true)}>{isZh ? '日历' : 'Calendar'}</Button>
+	</div>
+	<Calendar bind:visible />
+	<div class="my-8 px-8 flex justify-between">
+		<Icon name="cake" theme path="fonts/Heroicons.svg" />
+		<Icon name="riding-line" path="fonts/Remix.svg" />
+		<Icon name="spy-line" theme path="fonts/Remix.svg" />
+		<Icon name="javascript-fill" injClass="text-[red] dark:text-green" path="fonts/Remix.svg" />
+		<Icon name="cup" theme path="fonts/IconPark.svg" />
+	</div>
+	<div class="px-4 text-xs">
+		{isZh ? '图标：第一个来自' : 'Icons: The first one comes from'} <a class="underline" href="https://heroicons.com">Heroicons</a>
+		，{isZh ? '最后一个来自' : 'the last one comes from'} <a class="underline" href="https://iconpark.oceanengine.com">IconPark</a>
+		，{isZh ? '其余来自' : 'the rest come from'} <a class="underline" href="https://remixicon.com">Remix Icon</a> 。
+	</div>
+	<div class="my-8">
+		<Button on:click={toggleLangFun}>{isZh ? '切换语言' : 'Toggle language'}</Button>
+	</div>
 </main>

packages/create-stdf/templates/vite-uno/src/app.css

@@ -1,8 +1,8 @@
 @import '@unocss/reset/tailwind.css';
 
 :root {
-    --un-default-border-color: currentColor;
+	--un-default-border-color: currentColor;
 }
 html {
-    -webkit-tap-highlight-color: transparent;
+	-webkit-tap-highlight-color: transparent;
 }

packages/create-stdf/templates/vite-uno/src/lib/Counter.svelte

@@ -1,9 +1,9 @@
 <script>
-  import { Progress } from 'stdf';
+	import { Progress } from 'stdf';
 
-  export let percent = 20;
+	export let percent = 20;
 </script>
 
 <div class="p-4">
-  <Progress {percent} />
+	<Progress {percent} />
 </div>

packages/create-stdf/templates/vite-uno/src/main.js

@@ -3,7 +3,7 @@ import App from './App.svelte';
 import 'uno.css';
 
 const app = new App({
-    target: document.getElementById('app'),
+	target: document.getElementById('app'),
 });
 
 export default app;

packages/create-stdf/templates/vite-uno/svelte.config.js

@@ -1,7 +1,7 @@
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 export default {
-  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
-  // for more information about preprocessors
-  preprocess: vitePreprocess(),
-}
+	// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+};

packages/create-stdf/templates/vite-uno/uno.config.js

@@ -2,49 +2,49 @@
 import { defineConfig, presetUno } from 'unocss';
 
 export default defineConfig({
-    // ...UnoCSS options
-    content: {
-        filesystem: ['./node_modules/stdf/**/*.svelte'],
-    },
-    presets: [presetUno()],
-    theme: {
-        colors: {
-            // 主题色
-            // Theme Color
-            primary: '#0B24FB',
-            dark: '#FFC043',
-            blue: '#0B24FB', // primary 别名 alias
-            yellow: '#FFC043', // dark 别名 alias
+	// ...UnoCSS options
+	content: {
+		filesystem: ['./node_modules/stdf/**/*.svelte'],
+	},
+	presets: [presetUno()],
+	theme: {
+		colors: {
+			// 主题色
+			// Theme Color
+			primary: '#0B24FB',
+			dark: '#FFC043',
+			blue: '#0B24FB', // primary 别名 alias
+			yellow: '#FFC043', // dark 别名 alias
 
-            // 扩展色
-            // Extended Color
-            purple: '#7356BF',
-            green: '#05944F',
-            orange: '#FF6937',
+			// 扩展色
+			// Extended Color
+			purple: '#7356BF',
+			green: '#05944F',
+			orange: '#FF6937',
 
-            // 功能色
-            // Functional Color
-            success: '#11BB8D',
-            warning: '#B95000',
-            error: '#DA1414',
-            info: '#2E5AAC',
+			// 功能色
+			// Functional Color
+			success: '#11BB8D',
+			warning: '#B95000',
+			error: '#DA1414',
+			info: '#2E5AAC',
 
-            // 中性色
-            // Neutral Color
-            black: '#000000',
-            white: '#fff',
-            gray1: '#23262B',
-            gray2: '#2A2B2F',
-            gray3: '#303239',
-            gray4: '#373940',
-            gray5: '#414249',
-            gray6: '#747B84',
-            gray7: '#DADEE3',
-            gray8: '#EBEEF2',
-            gray9: '#F4F6F9',
-            gray10: '#FAFAFB',
-            transparent: 'transparent',
-        },
-        extend: {},
-    },
+			// 中性色
+			// Neutral Color
+			black: '#000000',
+			white: '#fff',
+			gray1: '#23262B',
+			gray2: '#2A2B2F',
+			gray3: '#303239',
+			gray4: '#373940',
+			gray5: '#414249',
+			gray6: '#747B84',
+			gray7: '#DADEE3',
+			gray8: '#EBEEF2',
+			gray9: '#F4F6F9',
+			gray10: '#FAFAFB',
+			transparent: 'transparent',
+		},
+		extend: {},
+	},
 });

packages/create-stdf/templates/vite-uno/vite.config.js

@@ -6,30 +6,30 @@ import svgSprite from 'rollup-plugin-stdf-icon';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [
-        UnoCSS({
-            extractors: [extractorSvelte()],
-        }),
-        svelte({
-            onwarn(warning, defaultHandler) {
-                if (warning.code.startsWith('a11y-')) {
-                    return;
-                }
+	plugins: [
+		UnoCSS({
+			extractors: [extractorSvelte()],
+		}),
+		svelte({
+			onwarn(warning, defaultHandler) {
+				if (warning.code.startsWith('a11y-')) {
+					return;
+				}
 
-                // handle all other warnings normally
-                defaultHandler(warning);
-            },
-        }),
-        // 一般来说，一个应用的所有 svg 都放在一个文件夹下，合并为一个 symbol 即可。
-        // 如默认配置的 src/assets/icons 内，合并之后 symbol 会放置于 public/fonts/symbol.svg 下。
-        // 此处只是为了演示不同文件夹下的图标如何合并为不同的 symbol。
-        // Generally speaking, all of an application svg are placed in a folder and merged into one symbol.
-        // As in the default configuration of src/assets/icons, the merged symbol will be placed under public/fonts/symbol.svg.
-        // Here is just to show how icons in different folders are merged into different symbols.
-        svgSprite([
-            { inFile: 'src/assets/Heroicons', outFile: 'public/fonts', fileName: 'Heroicons' },
-            { inFile: 'src/assets/IconPark', outFile: 'public/fonts', fileName: 'IconPark' },
-            { inFile: 'src/assets/Remix', outFile: 'public/fonts', fileName: 'Remix' },
-        ]),
-    ],
+				// handle all other warnings normally
+				defaultHandler(warning);
+			},
+		}),
+		// 一般来说，一个应用的所有 svg 都放在一个文件夹下，合并为一个 symbol 即可。
+		// 如默认配置的 src/assets/icons 内，合并之后 symbol 会放置于 public/fonts/symbol.svg 下。
+		// 此处只是为了演示不同文件夹下的图标如何合并为不同的 symbol。
+		// Generally speaking, all of an application svg are placed in a folder and merged into one symbol.
+		// As in the default configuration of src/assets/icons, the merged symbol will be placed under public/fonts/symbol.svg.
+		// Here is just to show how icons in different folders are merged into different symbols.
+		svgSprite([
+			{ inFile: 'src/assets/Heroicons', outFile: 'public/fonts', fileName: 'Heroicons' },
+			{ inFile: 'src/assets/IconPark', outFile: 'public/fonts', fileName: 'IconPark' },
+			{ inFile: 'src/assets/Remix', outFile: 'public/fonts', fileName: 'Remix' },
+		]),
+	],
 });