[doc]移除不必要的CSS动画样式，更新Create和Theme页面的Markdown导入，优化Generator页面的主题处理逻辑。

docs/site/src/routes/+page.svelte

@@ -803,19 +803,3 @@
 		</div>
 	</div>
 </div>
-
-<style>
-	@keyframes spin-line {
-		to {
-			transform: rotate(360deg);
-		}
-	}
-	.animate-spin-line {
-		animation: spin-line 6s linear infinite;
-		background: conic-gradient(transparent 50deg, rgba(var(--color-primary), 0.4) 80deg, transparent 90deg);
-	}
-	.animate-spin-line-dark {
-		animation: spin-line 6s linear infinite;
-		background: conic-gradient(transparent 50deg, rgba(var(--color-dark), 0.6) 80deg, transparent 90deg);
-	}
-</style>

docs/site/src/routes/guide/Create.svelte

@@ -2,7 +2,9 @@
 	import { mdTextToHljs, groupIconMdPlugin } from '../../utils/index.js';
 	import { isWideScreenStore } from '../../store.js';
 
+	// @ts-ignore
 	import createText from '../../../../../../packages/create-stdf/README_CN.md';
+	// @ts-ignore
 	import createText_en from '../../../../../../packages/create-stdf/README.md';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
@@ -12,7 +14,7 @@
 </script>
 
 <article
-	class="prose pb-12 dark:prose-invert prose-strong:text-primary dark:prose-strong:text-dark {$isWideScreenStore
+	class="prose dark:prose-invert prose-strong:text-primary dark:prose-strong:text-dark pb-12 {$isWideScreenStore
 		? 'max-w-full'
 		: 'max-w-5xl'}"
 >

docs/site/src/routes/guide/generator/+page.svelte

@@ -4,7 +4,8 @@
 	import ClipboardJS from 'clipboard';
 	import ModeSwitch from '$lib/modeSwitch/ModeSwitch.svelte';
 	import { currentColorStore } from '../../../store';
-	import themes, { type ThemeItem } from '../../../data/themes';
+	import themes from '../../../data/themes';
+	import type { STDFTheme } from 'stdf/theme';
 	import {
 		generatePalette,
 		generateThemeBlack,
@@ -26,6 +27,12 @@
 	let windowHeight = $state(0);
 	const initTheme = themes.find((item) => item.name === $currentColorStore) as ThemeItem;
 
+	type ThemeItem = {
+		name: string;
+		name_CN: string;
+		theme: typeof STDFTheme;
+	};
+
 	const setPropertyFunc = (name: string, value: string) => {
 		const rgbStr = value.startsWith('oklch') ? value : hexToRgb(value);
 		document.documentElement.style.setProperty(name, rgbStr);
@@ -86,7 +93,9 @@
 		dark: { hex: '', hsl: '', rgb: '', oklch: '' }
 	});
 	let stateColor = $state({ success: '', warning: '', error: '', info: '' });
-	let extendList: { color: string; alias: string; hex: string }[] = $state(initTheme.theme.color.extend);
+	let extendList: { color: string; alias: string; hex: string }[] = $state(
+		initTheme.theme.color.extend.map((item) => ({ ...item, hex: getHexFunc(item.color) }))
+	);
 
 	let name = $state(initTheme.name);
 	let showCopyTip = $state(false);
@@ -325,7 +334,7 @@ ${extendListStr2}
 				}
 			});
 		} else {
-			setPropertyFunc(`--color-functional-${type}`, item?.color);
+			setPropertyFunc(`--color-functional-${type}`, item?.color ?? '');
 			(functionalObj as unknown as Record<string, string>)[type] = colorValue;
 		}
 		currentColorObj = {

docs/site/src/routes/guide/theme/+page.svelte

@@ -2,7 +2,9 @@
 	import { mdTextToHljs } from '../../../utils/index';
 	import { isWideScreenStore } from '../../../store';
 
+	// @ts-ignore
 	import theme from '../../../../../mds/guide/theme.md';
+	// @ts-ignore
 	import theme_en from '../../../../../mds/guide/theme_en.md';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';