@coffic/cosy-ui 0.1.28 → 0.2.0

package/src/components/CodeBlock.astro

@@ -1,186 +0,0 @@
----
-interface Props {
-  code: string;
-  lang?: string;
-  title?: string;
-  showLineNumbers?: boolean;
-}
-
-const {
-  code,
-  lang = 'plaintext',
-  title,
-  showLineNumbers = true,
-} = Astro.props;
-
-// 移除代码字符串开头和结尾的空行
-const trimmedCode = code.trim();
-
-// 生成行号
-const lines = trimmedCode.split('\n');
-const lineNumbers = Array.from({ length: lines.length }, (_, i) => i + 1);
----
-
-<div class="code-block not-prose rounded-lg border border-base-300 bg-base-200 my-4">
-  {/* 标题栏 */}
-  {title && (
-    <div class="flex items-center justify-between px-4 py-2 border-b border-base-300">
-      <span class="text-sm font-medium">{title}</span>
-      <button
-        class="copy-button btn btn-ghost btn-xs gap-1"
-        data-code={trimmedCode}
-        title="复制代码"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-        </svg>
-        <span class="copy-text">复制</span>
-      </button>
-    </div>
-  )}
-
-  {/* 代码区域 */}
-  <div class="relative">
-    {/* 行号 */}
-    {showLineNumbers && (
-      <div class="hidden md:block absolute left-0 top-0 bottom-0 px-4 py-4 select-none text-base-content/50 bg-base-300 border-r border-base-300">
-        {lineNumbers.map(num => (
-          <div class="text-right leading-6 text-sm">{num}</div>
-        ))}
-      </div>
-    )}
-
-    {/* 代码内容 */}
-    <pre class={`language-${lang} ${showLineNumbers ? 'pl-[3.5rem]' : 'px-4'} py-4 m-0 overflow-x-auto`}><code class={`language-${lang}`} set:html={trimmedCode} /></pre>
-  </div>
-</div>
-
-<script>
-  function initializeCopyButtons() {
-    const copyButtons = document.querySelectorAll('.copy-button');
-    
-    copyButtons.forEach(button => {
-      button.addEventListener('click', async () => {
-        const code = button.getAttribute('data-code') || '';
-        const copyText = button.querySelector('.copy-text');
-        
-        try {
-          await navigator.clipboard.writeText(code);
-          if (copyText) {
-            copyText.textContent = '已复制！';
-            setTimeout(() => {
-              copyText.textContent = '复制';
-            }, 2000);
-          }
-        } catch (err) {
-          console.error('复制失败:', err);
-          if (copyText) {
-            copyText.textContent = '复制失败';
-            setTimeout(() => {
-              copyText.textContent = '复制';
-            }, 2000);
-          }
-        }
-      });
-    });
-  }
-
-  // 在页面加载时初始化
-  initializeCopyButtons();
-
-  // 在 Astro 页面切换时重新初始化
-  document.addEventListener('astro:page-load', initializeCopyButtons);
-</script>
-
-<style is:global>
-  /* Prism.js 暗色主题自定义 */
-  .code-block pre {
-    background: transparent !important;
-  }
-  
-  .code-block code {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    font-size: 0.875rem;
-    line-height: 1.5rem;
-  }
-
-  /* 代码高亮颜色 */
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: #636f88;
-  }
-
-  .token.punctuation {
-    color: #81a1c1;
-  }
-
-  .namespace {
-    opacity: 0.7;
-  }
-
-  .token.property,
-  .token.tag,
-  .token.constant,
-  .token.symbol,
-  .token.deleted {
-    color: #81a1c1;
-  }
-
-  .token.number {
-    color: #b48ead;
-  }
-
-  .token.boolean {
-    color: #81a1c1;
-  }
-
-  .token.selector,
-  .token.attr-name,
-  .token.string,
-  .token.char,
-  .token.builtin,
-  .token.inserted {
-    color: #a3be8c;
-  }
-
-  .token.operator,
-  .token.entity,
-  .token.url,
-  .language-css .token.string,
-  .style .token.string,
-  .token.variable {
-    color: #81a1c1;
-  }
-
-  .token.atrule,
-  .token.attr-value,
-  .token.function,
-  .token.class-name {
-    color: #88c0d0;
-  }
-
-  .token.keyword {
-    color: #81a1c1;
-  }
-
-  .token.regex,
-  .token.important {
-    color: #ebcb8b;
-  }
-
-  .token.important,
-  .token.bold {
-    font-weight: bold;
-  }
-
-  .token.italic {
-    font-style: italic;
-  }
-
-  .token.entity {
-    cursor: help;
-  }
-</style> 

package/src/components/Footer.astro

@@ -1,130 +0,0 @@
----
-import { processSocialLink } from '../utils/social';
-import Link from './Link.astro';
-import Banner from './Banner.astro';
-import SocialIcon from './SocialIcon.astro';
-import type { FooterProps } from '../types/footer';
-
-interface Props extends FooterProps {}
-
-const {
-	siteName,
-	homeLink,
-	slogan,
-	company,
-	copyright,
-	inspirationalSlogan,
-	icp,
-	logo,
-	products = [],
-	aboutLink,
-	contactLink,
-	termsLink,
-	privacyLink,
-	socialLinks = [],
-}: Props = Astro.props;
-
-const currentYear = new Date().getFullYear();
-
-// 处理社交链接
-const processedSocialLinks = socialLinks.map((link) => processSocialLink(link));
----
-
-<footer class="bg-base-200/50 dark:bg-base-300/50 z-50 backdrop-blur-md">
-	<div class="footer sm:footer-horizontal p-10 text-base-content">
-		<aside class="flex flex-col items-center sm:items-start gap-2 place-self-center">
-			<Link href={homeLink}>
-				<div class="flex items-center gap-2 rounded-2xl">
-					{
-						logo && (
-							<img
-								src={logo.src}
-								alt={logo.alt}
-								class="h-6 w-6 fill-current rounded-2xl"
-								width="32"
-								height="32"
-							/>
-						)
-					}
-					<span class="text-xl font-bold">{siteName}</span>
-				</div>
-			</Link>
-			<p class="text-sm opacity-70 self-center">{slogan}</p>
-
-			<div class="flex gap-4 mt-4 sm:mt-0">
-				{
-					processedSocialLinks.map((link) => (
-						<Link
-							href={link.url}
-							external={true}
-							class="btn btn-ghost btn-sm p-1 hover:text-primary"
-						>
-							<SocialIcon platform={link.platform} />
-							<span class="sr-only">{link.name}</span>
-						</Link>
-					))
-				}
-			</div>
-		</aside>
-
-		{
-			products.length > 0 && (
-				<nav class="place-self-center text-center flex flex-col items-center min-h-[200px]">
-					<h6 class="footer-title">产品</h6>
-					<div class="flex flex-col gap-2">
-						{products.map((product) => (
-							<Link href={product.href} external={product.external}>
-								{product.name}
-							</Link>
-						))}
-					</div>
-				</nav>
-			)
-		}
-
-		{
-			(aboutLink || contactLink) && (
-				<nav class="place-self-center text-center flex flex-col items-center min-h-[200px]">
-					<h6 class="footer-title">关于</h6>
-					<div class="flex flex-col gap-2">
-						{aboutLink && <Link href={aboutLink}>关于我们</Link>}
-						{contactLink && <Link href={contactLink}>联系我们</Link>}
-					</div>
-				</nav>
-			)
-		}
-
-		{
-			(termsLink || privacyLink) && (
-				<nav class="place-self-center text-center flex flex-col items-center min-h-[200px]">
-					<h6 class="footer-title">法律</h6>
-					<div class="flex flex-col gap-2">
-						{termsLink && <Link href={termsLink}>服务条款</Link>}
-						{privacyLink && <Link href={privacyLink}>隐私政策</Link>}
-					</div>
-				</nav>
-			)
-		}
-	</div>
-
-	<Banner>
-		{inspirationalSlogan}
-	</Banner>
-
-	<div class="flex flex-col sm:flex-col justify-center items-center p-4 text-sm opacity-70">
-		<div class="flex items-center gap-2">
-			<p>
-				© {currentYear}
-				{company} - {copyright}
-			</p>
-		</div>
-
-		{
-			icp && (
-				<div class="text-center py-4">
-					<p>{icp}</p>
-				</div>
-			)
-		}
-	</div>
-</footer>

package/src/components/Header.astro

@@ -1,305 +0,0 @@
----
-import { Image } from 'astro:assets';
-import { RiSearch2Line, RiMenuLine, RiSunCloudyLine } from '@remixicon/vue';
-import ThemeItem from './ThemeItem.astro';
-import Link from './Link.astro';
-import Button from './Button.astro';
-
-interface Props {
-	logo: ImageMetadata;
-	languages?: Array<{ code: string; name: string }>;
-	currentLocale?: string;
-	navItems?: Array<{
-		href: string;
-		label: string;
-		match: (path: string) => boolean;
-	}>;
-	socialLinks?: Array<{
-		name: string;
-		url: string;
-		icon: any;
-	}>;
-}
-
-const {
-	logo,
-	languages = [
-		{ code: 'zh-cn', name: '简体中文' },
-		{ code: 'en', name: 'English' },
-	],
-	currentLocale = 'zh-cn',
-	navItems = [],
-} = Astro.props;
-
-const currentLanguageName =
-	languages.find((lang) => lang.code === currentLocale)?.name || '简体中文';
-
-const themes = [
-	{ id: 'default', name: 'Default' },
-	{ id: 'light', name: 'Light' },
-	{ id: 'dark', name: 'Dark' },
-	{ id: 'pastel', name: 'Pastel' },
-	{ id: 'lemonade', name: 'Lemonade' },
-	{ id: 'cupcake', name: 'Cupcake' },
-	{ id: 'nord', name: 'Nord' },
-	{ id: 'business', name: 'Business' },
-	{ id: 'luxury', name: 'Luxury' },
-];
-
-const currentPath = Astro.url.pathname;
-
-// 为每个语言生成对应的URL
-function generateLanguageUrl(langCode: string): string {
-	const pathParts = currentPath.split('/').filter(Boolean);
-	const firstPathPart = pathParts[0];
-	const supportedLanguages = languages.map((lang) => lang.code);
-	const isFirstPartLang = supportedLanguages.includes(firstPathPart);
-
-	if (isFirstPartLang) {
-		pathParts[0] = langCode;
-		return '/' + pathParts.join('/');
-	} else {
-		return '/' + langCode + (currentPath === '/' ? '' : currentPath);
-	}
-}
----
-
-<header
-	class="bg-gradient-to-r from-neutral-900/80 via-neutral-800/80 to-neutral-900/80
-	dark:from-neutral-800/80 dark:via-neutral-700/80 dark:to-neutral-800/80 backdrop-blur
-	flex flex-row justify-between
-	text-neutral-200 dark:text-neutral-300
-	px-4
-	rounded-lg h-12 mt-1 mx-4 fixed top-0 left-0 right-0 z-50
-	border border-white/5 dark:border-black/5"
->
-	<div class="flex flex-row justify-start items-center">
-		<Link href="/" transition:persist>
-			<div class="h-8 w-8 flex flex-col items-center justify-center">
-				<Image src={logo} alt="logo" class="fill-current" />
-			</div>
-		</Link>
-
-		<!-- 移动端菜单按钮 -->
-		<Button variant="ghost" size="sm" class="lg:hidden ml-2" onClick="mobile_menu.showModal()">
-			<RiMenuLine class="w-5 h-5" slot="icon-left" />
-		</Button>
-
-		<!-- 桌面端导航 -->
-		<div class="hidden lg:flex flex-row gap-4 items-center ml-4" transition:animate="fade">
-			{navItems.map((item) => <Link href={item.href}>{item.label}</Link>)}
-		</div>
-	</div>
-
-	<div class="h-12 flex flex-row justify-end gap-2 items-center">
-		<div class="dropdown dropdown-end">
-			<Button variant="ghost" size="sm" class="p-1">
-				{currentLanguageName}
-			</Button>
-			<ul
-				tabindex={0}
-				class="dropdown-content menu bg-slate-900 dark:bg-slate-800 rounded-box z-[1] w-40 p-2 shadow-lg"
-			>
-				{
-					languages.map((lang) => (
-						<li>
-							<Link href={generateLanguageUrl(lang.code)}>{lang.name}</Link>
-						</li>
-					))
-				}
-			</ul>
-		</div>
-		<div class="dropdown dropdown-end">
-			<Button variant="ghost" size="sm" class="p-1">
-				<RiSunCloudyLine class="w-5 h-5" slot="icon-left" />
-			</Button>
-			<ul
-				tabindex={0}
-				class="dropdown-content menu bg-neutral-900 dark:bg-neutral-800 rounded-box z-[1] w-56 p-2 shadow-lg"
-			>
-				{themes.map((theme) => <ThemeItem theme={theme.id} label={theme.name} />)}
-			</ul>
-		</div>
-		<Button variant="ghost" size="sm" class="p-1" onClick="my_modal_1.showModal()">
-			<RiSearch2Line class="w-5 h-5" slot="icon-left" />
-		</Button>
-	</div>
-</header>
-
-<!-- 移动端菜单模态框 -->
-<dialog id="mobile_menu" class="modal">
-	<div class="modal-box bg-neutral-900 dark:bg-neutral-800 text-neutral-200 dark:text-neutral-300">
-		<h3 class="font-bold text-lg mb-4">
-			{currentLocale === 'zh-cn' ? '菜单' : 'Menu'}
-		</h3>
-		<div class="flex flex-col gap-2">
-			{
-				navItems.map((item) => (
-					<Link
-						href={item.href}
-						class:list={[
-							'btn btn-sm w-full text-left justify-start',
-							{
-								'btn-ghost': !item.match(currentPath),
-								'btn-primary': item.match(currentPath),
-							},
-						]}
-					>
-						{item.label}
-					</Link>
-				))
-			}
-		</div>
-		<div class="modal-action">
-			<form method="dialog">
-				<Button>
-					{currentLocale === 'zh-cn' ? '关闭' : 'Close'}
-				</Button>
-			</form>
-		</div>
-	</div>
-	<form method="dialog" class="modal-backdrop bg-black/20 backdrop-blur-sm">
-		<Button variant="ghost">关闭</Button>
-	</form>
-</dialog>
-
-<!-- 搜索模态框 -->
-<!-- <dialog id="my_modal_1" class="modal">
-	<div
-		class="modal-box bg-neutral-900 dark:bg-neutral-800 text-neutral-200 dark:text-neutral-300">
-		<Search />
-		<div class="modal-action">
-			<form method="dialog">
-				<button class="btn">
-					{currentLocale === 'zh-cn' ? '关闭' : 'Close'}
-				</button>
-			</form>
-		</div>
-	</div>
-	<form method="dialog" class="modal-backdrop bg-black/20 backdrop-blur-sm">
-		<button>关闭</button>
-	</form>
-</dialog> -->
-
-<style is:global>
-	.pagefind-ui {
-		--pagefind-ui-scale: 0.75;
-		--pagefind-ui-primary: navy;
-		--pagefind-ui-text: black;
-		--pagefind-ui-border: slategrey;
-		--pagefind-ui-border-width: 1px;
-		--pagefind-ui-border-radius: 0.25rem;
-		--pagefind-ui-font: sans-serif;
-		width: 100%;
-	}
-
-	.pagefind-ui.yellow {
-		--pagefind-ui-background: lightyellow;
-	}
-
-	.pagefind-ui.red {
-		--pagefind-ui-background: peachpuff;
-		width: 100%;
-	}
-
-	.pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
-		position: relative;
-		padding: 0;
-		box-shadow: none;
-		background-color: transparent;
-	}
-
-	.pagefind-ui .pagefind-ui__result-link {
-		color: var(--pagefind-ui-primary);
-	}
-
-	.pagefind-ui .pagefind-ui__result-excerpt {
-		color: var(--pagefind-ui-text);
-	}
-
-	/* 响应式调整 */
-	@media (max-width: 1023px) {
-		.modal-box {
-			max-height: 80vh;
-			overflow-y: auto;
-		}
-	}
-
-	/* 模态框动画 */
-	.modal {
-		transition-duration: 200ms;
-	}
-
-	.modal-box {
-		transition-duration: 300ms;
-		transform-origin: center;
-	}
-
-	@keyframes slideUp {
-		from {
-			transform: translateY(1rem);
-			opacity: 0;
-		}
-		to {
-			transform: translateY(0);
-			opacity: 1;
-		}
-	}
-
-	@keyframes fadeIn {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
-
-	.modal[open] .modal-box {
-		animation: slideUp 0.3s ease-out forwards;
-	}
-
-	.modal[open] .modal-backdrop {
-		animation: fadeIn 0.2s ease-out forwards;
-	}
-</style>
-
-<script>
-	function initializeThemeSwitch() {
-		const themeItems = document.querySelectorAll('[data-set-theme]');
-		const updateActiveTheme = (currentTheme) => {
-			themeItems.forEach((item) => {
-				const themeId = item.getAttribute('data-set-theme');
-				const isActive = themeId === currentTheme;
-				item.classList.toggle('bg-primary', isActive);
-				item.classList.toggle('text-primary-content', isActive);
-			});
-		};
-
-		themeItems.forEach((item) => {
-			// 移除可能存在的旧事件监听器
-			item.removeEventListener('click', handleThemeClick);
-			// 添加新的事件监听器
-			item.addEventListener('click', handleThemeClick);
-		});
-
-		function handleThemeClick(event) {
-			const item = event.currentTarget;
-			const theme = item.getAttribute('data-set-theme');
-			document.documentElement.setAttribute('data-theme', theme ?? 'default');
-			localStorage.setItem('theme', theme ?? 'default');
-			updateActiveTheme(theme ?? 'default');
-		}
-
-		// 从本地存储中获取主题并更新激活状态
-		const savedTheme = localStorage.getItem('theme') || 'default';
-		document.documentElement.setAttribute('data-theme', savedTheme);
-		updateActiveTheme(savedTheme);
-	}
-
-	// 初始加载时初始化
-	document.addEventListener('DOMContentLoaded', initializeThemeSwitch);
-
-	// Astro view transitions 后重新初始化
-	document.addEventListener('astro:after-swap', initializeThemeSwitch);
-</script>

package/src/components/Hero.astro

@@ -1,69 +0,0 @@
----
-import Link from './Link.astro';
-
-interface Link {
-	text: string;
-	href: string;
-}
-
-interface Props {
-	title: string;
-	description: string;
-	image?: {
-		src: string;
-		alt: string;
-	};
-	links: Link[];
-}
-
-const { title, description, image, links = [] } = Astro.props;
----
-
-<div class="py-16 px-8 text-center w-full min-h-screen relative overflow-hidden">
-	<div class="relative z-10 rounded-lg w-full h-full">
-		{image && <img src={image.src} alt={image.alt} class="h-1/2 mx-auto mb-8 drop-shadow-xl" />}
-
-		<h2 class="text-4xl mb-4 animate-fade-up">{title}</h2>
-		<p class="text-lg mb-12 text-center max-w-2xl mx-auto">
-			{description}
-		</p>
-
-		<div class="my-12 w-full">
-			<slot name="app" />
-		</div>
-
-		<div class="flex flex-row justify-center gap-8 mx-auto w-full">
-			{
-				links.map((link) => (
-					<Link
-						href={link.href}
-						external
-						variant="cta"
-						animation="hover-lift"
-						size="lg"
-					>
-						{link.text}
-					</Link>
-				))
-			}
-		</div>
-	</div>
-</div>
-
-<style>
-	@keyframes fade-up {
-		from {
-			opacity: 0;
-			transform: translateY(-20px);
-		}
-
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	.animate-fade-up {
-		animation: fade-up 0.8s ease-out forwards;
-	}
-</style>