@coffic/cosy-ui 0.1.25 → 0.1.28

package/src/components/CodeBlock.astro

@@ -0,0 +1,186 @@
+---
+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

@@ -3,6 +3,9 @@ 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,
@@ -19,7 +22,7 @@ const {
 	termsLink,
 	privacyLink,
 	socialLinks = [],
-} = Astro.props;
+}: Props = Astro.props;
 
 const currentYear = new Date().getFullYear();
 
@@ -27,7 +30,7 @@ const currentYear = new Date().getFullYear();
 const processedSocialLinks = socialLinks.map((link) => processSocialLink(link));
 ---
 
-<footer class="bg-green-200/50 dark:bg-base-300/50 z-50 backdrop-blur-md">
+<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}>
@@ -51,15 +54,14 @@ const processedSocialLinks = socialLinks.map((link) => processSocialLink(link));
 			<div class="flex gap-4 mt-4 sm:mt-0">
 				{
 					processedSocialLinks.map((link) => (
-						<a
+						<Link
 							href={link.url}
-							target="_blank"
-							rel="noopener noreferrer"
+							external={true}
 							class="btn btn-ghost btn-sm p-1 hover:text-primary"
-							title={link.name}>
+						>
 							<SocialIcon platform={link.platform} />
 							<span class="sr-only">{link.name}</span>
-						</a>
+						</Link>
 					))
 				}
 			</div>

package/src/components/Header.astro

@@ -1,8 +1,9 @@
 ---
 import { Image } from 'astro:assets';
-import { RiGithubFill, RiSearch2Line, RiMenuLine, RiSunCloudyLine } from '@remixicon/vue';
+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;
@@ -70,7 +71,8 @@ function generateLanguageUrl(langCode: string): string {
 	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">
+	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">
@@ -79,68 +81,48 @@ function generateLanguageUrl(langCode: string): string {
 		</Link>
 
 		<!-- 移动端菜单按钮 -->
-		<button class="lg:hidden btn btn-ghost btn-sm p-1 ml-2" onclick="mobile_menu.showModal()">
-			<RiMenuLine class="w-5 h-5" />
-		</button>
+		<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
-						class:list={[
-							'btn btn-sm',
-							{
-								'btn-ghost': !item.match(currentPath),
-								'btn-primary': item.match(currentPath),
-							},
-						]}
-						href={item.href}>
-						{item.label}
-					</Link>
-				))
-			}
+			{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">
-			<div tabindex={0} role="button" class="btn btn-ghost btn-sm p-1">
+			<Button variant="ghost" size="sm" class="p-1">
 				{currentLanguageName}
-			</div>
+			</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">
+				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)}
-								class:list={[
-									{
-										'bg-primary text-white': currentLocale === lang.code,
-									},
-								]}>
-								{lang.name}
-							</Link>
+							<Link href={generateLanguageUrl(lang.code)}>{lang.name}</Link>
 						</li>
 					))
 				}
 			</ul>
 		</div>
 		<div class="dropdown dropdown-end">
-			<div tabindex={0} role="button" class="btn btn-ghost btn-sm p-1">
-				<RiSunCloudyLine class="w-5 h-5" />
-			</div>
+			<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">
+				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 class="btn btn-ghost btn-sm p-1" onclick="my_modal_1.showModal()">
-			<RiSearch2Line class="w-5 h-5" />
-		</button>
+		<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>
 
@@ -153,7 +135,8 @@ function generateLanguageUrl(langCode: string): string {
 		<div class="flex flex-col gap-2">
 			{
 				navItems.map((item) => (
-					<a
+					<Link
+						href={item.href}
 						class:list={[
 							'btn btn-sm w-full text-left justify-start',
 							{
@@ -161,22 +144,22 @@ function generateLanguageUrl(langCode: string): string {
 								'btn-primary': item.match(currentPath),
 							},
 						]}
-						href={item.href}>
+					>
 						{item.label}
-					</a>
+					</Link>
 				))
 			}
 		</div>
 		<div class="modal-action">
 			<form method="dialog">
-				<button class="btn">
+				<Button>
 					{currentLocale === 'zh-cn' ? '关闭' : 'Close'}
-				</button>
+				</Button>
 			</form>
 		</div>
 	</div>
 	<form method="dialog" class="modal-backdrop bg-black/20 backdrop-blur-sm">
-		<button>关闭</button>
+		<Button variant="ghost">关闭</Button>
 	</form>
 </dialog>
 
@@ -284,7 +267,7 @@ function generateLanguageUrl(langCode: string): string {
 <script>
 	function initializeThemeSwitch() {
 		const themeItems = document.querySelectorAll('[data-set-theme]');
-		const updateActiveTheme = (currentTheme: string) => {
+		const updateActiveTheme = (currentTheme) => {
 			themeItems.forEach((item) => {
 				const themeId = item.getAttribute('data-set-theme');
 				const isActive = themeId === currentTheme;
@@ -300,8 +283,8 @@ function generateLanguageUrl(langCode: string): string {
 			item.addEventListener('click', handleThemeClick);
 		});
 
-		function handleThemeClick(event: Event) {
-			const item = event.currentTarget as HTMLElement;
+		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');

package/src/components/Hero.astro

@@ -0,0 +1,69 @@
+---
+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>