@coffic/cosy-ui 0.1.25 → 0.1.27

package/README.md

@@ -1,64 +1,26 @@
-# Coffic Shared UI
+# Cosy UI
 
 这是一个 Astro 组件库，为同一个组织下的多个项目提供统一的 UI 风格。
 
 ## 安装
 
 ```bash
-npm install @coffic/shared-ui
+npm install @coffic/cosy-ui
 ```
 
-## 必要依赖
-
-本组件库依赖以下包，请确保您的项目中已正确安装和配置：
-
-### 1. Astro
-
-确保您的项目是一个 Astro 项目。如果不是，可以按照以下步骤创建：
-
-```bash
-npm create astro@latest
-```
-
-### 2. TailwindCSS
-
-如果您的项目还没有配置 TailwindCSS，请按照以下步骤安装：
-
-```bash
-npm install -D tailwindcss @astrojs/tailwind
-```
-
-然后在您的 `astro.config.mjs` 中添加：
-
-```javascript
-import tailwind from '@astrojs/tailwind';
+在 Tailwind 的 CSS 文件中增加：
 
-export default defineConfig({
-  integrations: [tailwind()],
-});
-```
-
-### 3. DaisyUI
-
-安装 DaisyUI：
-
-```bash
-npm install -D daisyui
+```css
+@source '../node_modules/@coffic/shared-ui';
 ```
 
-在您的 `tailwind.config.js` 中添加 DaisyUI：
-
-```javascript
-export default {
-  plugins: [require('daisyui')],
-};
-```
+## 必要依赖
 
-### 4. CSS
+本组件库依赖以下包，请确保您的项目中已正确安装和配置：
 
-```css
-@source '../node_modules/@coffic/shared-ui';
-```
+- Astro
+- TailwindCSS
+- DaisyUI
 
 ## 内置组件
 
@@ -72,8 +34,6 @@ export default {
    - 组件的样式会受到您项目中 Tailwind 配置的影响
    - 如果您修改了 Tailwind 的默认主题或 DaisyUI 的主题，可能会影响组件的外观
 
-2. 建议在您的项目中保持默认的 Tailwind 和 DaisyUI 配置，以确保组件显示正常
-
 ## 贡献
 
 欢迎提交 Issue 和 Pull Request！

package/index.ts

@@ -1,7 +1,17 @@
-export { default as Header } from './src/components/Header.astro';
-export { default as Footer } from './src/components/Footer.astro';
+// 这里用于导出所有组件，注意按照字母排序
+export { default as Alert } from './src/components/Alert.astro';
+export { default as Article } from './src/components/Article.astro';
+export { default as Blog } from './src/components/Blog.astro';
 export { default as Banner } from './src/components/Banner.astro';
+export { default as Button } from './src/components/Button.astro';
+export { default as Card } from './src/components/Card.astro';
+export { default as CodeBlock } from './src/components/CodeBlock.astro';
+export { default as Footer } from './src/components/Footer.astro';
+export { default as Header } from './src/components/Header.astro';
+export { default as Hero } from './src/components/Hero.astro';
 export { default as Link } from './src/components/Link.astro';
+export { default as Modal } from './src/components/Modal.astro';
 export { default as SocialIcon } from './src/components/SocialIcon.astro';
-export { default as Component } from './src/components/Component.astro';
-export { default as ThemeItem } from './src/components/ThemeItem.astro';
+export { default as ThemeItem } from './src/components/ThemeItem.astro';
+export { default as TeamMember } from './src/components/TeamMember.astro';
+export { default as TeamMembers } from './src/components/TeamMembers.astro';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffic/cosy-ui",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "description": "A astro component library",
   "repository": {
     "url": "https://github.com/CofficLab/cosy-ui"
@@ -23,16 +23,19 @@
   "scripts": {
     "format": "prettier -w .",
     "lint": "eslint . --ext .ts,.js,.astro src",
-    "dev": "cd example && astro dev --host 0.0.0.0"
+    "dev": "astro dev --host 0.0.0.0 --root example",
+    "build": "astro build --root example",
+    "preview": "astro preview --root example"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.0.14",
     "@types/chai": "^5.2.0",
     "@types/eslint": "^9.6.1",
     "@types/mocha": "^10.0.10",
     "@types/node": "^22.13.10",
     "@typescript-eslint/parser": "^8.26.1",
-    "astro": "^5.5.1",
+    "astro": "^5.5.2",
     "chai": "^4.5.0",
     "daisyui": "^5.0.3",
     "eslint": "^8.57.1",
@@ -40,18 +43,18 @@
     "mocha": "^10.8.2",
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1",
+    "sharp": "^0.33.2",
     "tailwindcss": "^4.0.14",
     "typescript": "^5.8.2"
   },
   "peerDependencies": {
-    "@remixicon/vue": "^4.6.0",
-    "@astrojs/vue": "^5.0.7",
     "astro": "^5.0.0",
-    "daisyui": "^5.0.3",
-    "tailwindcss": "^4.0.13"
+    "daisyui": "^5.0.3"
   },
   "dependencies": {
     "@astrojs/vue": "^5.0.7",
+    "@remixicon/vue": "^4.6.0",
+    "prismjs": "^1.29.0",
     "vue": "^3.5.13"
   }
 }

package/src/components/Alert.astro

@@ -0,0 +1,78 @@
+---
+interface Props {
+  type?: 'info' | 'success' | 'warning' | 'error';
+  title?: string;
+  closeable?: boolean;
+  class?: string;
+}
+
+const {
+  type = 'info',
+  title,
+  closeable = false,
+  class: className = '',
+} = Astro.props;
+
+// 根据类型设置样式
+const alertClass = {
+  info: 'alert-info',
+  success: 'alert-success',
+  warning: 'alert-warning',
+  error: 'alert-error',
+}[type];
+
+// 根据类型设置图标
+const icons = {
+  info: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 stroke-current">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+  </svg>`,
+  success: `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 stroke-current" fill="none" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg>`,
+  warning: `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 stroke-current" fill="none" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+  </svg>`,
+  error: `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 stroke-current" fill="none" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg>`,
+};
+---
+
+<div class={`alert ${alertClass} ${className}`} role="alert">
+  <div class="flex items-center gap-2">
+    <Fragment set:html={icons[type]} />
+    <div class="flex-1">
+      {title && <h3 class="font-bold">{title}</h3>}
+      <div><slot /></div>
+    </div>
+    {closeable && (
+      <button class="btn btn-ghost btn-sm btn-circle close-alert">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    )}
+  </div>
+</div>
+
+{closeable && (
+  <script>
+    function initializeCloseButtons() {
+      const closeButtons = document.querySelectorAll('.close-alert');
+      closeButtons.forEach(button => {
+        button.addEventListener('click', () => {
+          const alert = button.closest('.alert');
+          if (alert) {
+            alert.remove();
+          }
+        });
+      });
+    }
+
+    // 初始化关闭按钮
+    initializeCloseButtons();
+
+    // Astro 页面切换时重新初始化
+    document.addEventListener('astro:page-load', initializeCloseButtons);
+  </script>
+)} 

package/src/components/Article.astro

@@ -0,0 +1,11 @@
+---
+interface Props {
+    class?: string;
+}
+
+const { class: className = '' } = Astro.props;
+---
+
+<article class:list={['prose prose-slate dark:prose-invert max-w-none', className]}>
+    <slot />
+</article>

package/src/components/Banner.astro

@@ -1,12 +1,49 @@
-<div class="w-full px-8 z-50 mx-auto">
+<div class="w-full max-w-7xl px-4 sm:px-8 z-50 mx-auto">
 	<div
-		class="mt-0 hero p-4 rounded-2xl bg-base-300/50 dark:bg-base-200/50 backdrop-blur-xl hover:shadow-2xl transform duration-100">
+		class="mt-0 hero p-4 rounded-2xl bg-base-300/50 dark:bg-base-200/50 backdrop-blur-xl
+		hover:shadow-2xl transform duration-300 ease-in-out
+		hover:scale-[1.02] hover:bg-base-300/70 dark:hover:bg-base-200/70
+		motion-safe:animate-fadeIn"
+	>
 		<div class="text-center hero-content">
-			<div class="max-w-md flex flex-row justify-center items-center mx-auto">
-				<p class="text-2xl md:text-3xl font-bold text-base-content">
+			<div class="w-full max-w-prose flex flex-row justify-center items-center mx-auto">
+				<p
+					class="text-xl sm:text-2xl md:text-3xl font-bold text-base-content
+					motion-safe:animate-slideUp"
+				>
 					<slot />
 				</p>
 			</div>
 		</div>
 	</div>
 </div>
+
+<style>
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes slideUp {
+		from {
+			opacity: 0;
+			transform: translateY(1rem);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.animate-fadeIn {
+		animation: fadeIn 0.5s ease-out;
+	}
+
+	.animate-slideUp {
+		animation: slideUp 0.5s ease-out;
+	}
+</style>

package/src/components/Blog.astro

@@ -0,0 +1,115 @@
+---
+interface Props {
+  title: string;
+  subtitle?: string;
+  author?: string;
+  date?: Date;
+  cover?: {
+    src: string;
+    alt?: string;
+  };
+  tags?: string[];
+}
+
+const {
+  title,
+  subtitle,
+  author,
+  date,
+  cover,
+  tags = [],
+} = Astro.props;
+
+// 格式化日期
+const formatDate = (date?: Date) => {
+  if (!date) return '';
+  return new Intl.DateTimeFormat('zh-CN', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }).format(date);
+};
+---
+
+<article class="article">
+  {/* 文章头部 */}
+  <header class="mb-8">
+    {cover && (
+      <div class="relative w-full h-[300px] md:h-[400px] mb-6 rounded-lg overflow-hidden">
+        <img
+          src={cover.src}
+          alt={cover.alt || title}
+          class="w-full h-full object-cover"
+        />
+      </div>
+    )}
+    
+    <div class="space-y-4">
+      <h1 class="text-4xl md:text-5xl font-bold tracking-tight">{title}</h1>
+      {subtitle && (
+        <p class="text-xl text-base-content/70">{subtitle}</p>
+      )}
+      
+      <div class="flex flex-wrap items-center gap-4 text-sm text-base-content/60">
+        {author && (
+          <div class="flex items-center gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+            </svg>
+            <span>{author}</span>
+          </div>
+        )}
+        
+        {date && (
+          <div class="flex items-center gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+              <line x1="16" y1="2" x2="16" y2="6"></line>
+              <line x1="8" y1="2" x2="8" y2="6"></line>
+              <line x1="3" y1="10" x2="21" y2="10"></line>
+            </svg>
+            <time datetime={date.toISOString()}>{formatDate(date)}</time>
+          </div>
+        )}
+      </div>
+
+      {tags.length > 0 && (
+        <div class="flex flex-wrap gap-2">
+          {tags.map(tag => (
+            <span class="badge badge-outline">{tag}</span>
+          ))}
+        </div>
+      )}
+    </div>
+  </header>
+
+  {/* 文章内容 */}
+  <div class="prose prose-lg max-w-none">
+    <slot />
+  </div>
+</article>
+
+<style>
+  /* 自定义文章样式 */
+  .article {
+    container-type: inline-size;
+  }
+
+  /* 优化大屏幕阅读体验 */
+  @container (min-width: 768px) {
+    .article {
+      font-size: 1.125rem;
+      line-height: 1.75;
+    }
+  }
+
+  /* 暗色主题适配 */
+  :global([data-theme="dark"]) .article {
+    --tw-prose-body: hsl(var(--bc));
+    --tw-prose-headings: hsl(var(--bc));
+    --tw-prose-links: hsl(var(--p));
+    --tw-prose-bold: hsl(var(--bc));
+    --tw-prose-quotes: hsl(var(--bc));
+    --tw-prose-code: hsl(var(--bc));
+  }
+</style> 

package/src/components/Button.astro

@@ -0,0 +1,49 @@
+---
+interface Props {
+  variant?: 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'ghost' | 'link' | 'outline' | 'neutral';
+  size?: 'lg' | 'md' | 'sm' | 'xs';
+  shape?: 'circle' | 'square';
+  wide?: boolean;
+  block?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  type?: 'button' | 'submit' | 'reset';
+  class?: string;
+  onClick?: string;
+}
+
+const {
+  variant,
+  size,
+  shape,
+  wide = false,
+  block = false,
+  loading = false,
+  disabled = false,
+  type = 'button',
+  class: className,
+  onClick,
+} = Astro.props;
+
+const classes = [
+  'btn',
+  variant && `btn-${variant}`,
+  size && `btn-${size}`,
+  shape && `btn-${shape}`,
+  wide && 'btn-wide',
+  block && 'btn-block',
+  loading && 'loading',
+  className,
+].filter(Boolean).join(' ');
+---
+
+<button
+  type={type}
+  class={classes}
+  disabled={disabled}
+  onclick={onClick}
+>
+  <slot name="icon-left" />
+  <slot />
+  <slot name="icon-right" />
+</button> 

package/src/components/Card.astro

@@ -0,0 +1,113 @@
+---
+interface Props {
+    title?: string;
+    subtitle?: string;
+    imageUrl?: string;
+    href?: string;
+}
+
+const { title, subtitle, imageUrl, href } = Astro.props;
+---
+
+<div class="group perspective-1000">
+    <div class:list={[
+        "card w-full bg-base-100/60 dark:bg-base-300/60 backdrop-blur-lg",
+        "transform transition-all duration-300 ease-out",
+        "hover:shadow-2xl hover:scale-[1.02]",
+        "active:scale-[0.98]",
+        "motion-safe:animate-fadeIn",
+        href && "cursor-pointer"
+    ]}>
+        {href ? (
+            <a href={href} class="card-body group-hover:translate-y-[-2px] transition-transform duration-300">
+                {imageUrl && (
+                    <figure class="relative overflow-hidden rounded-t-2xl">
+                        <img
+                            src={imageUrl}
+                            alt={title}
+                            class="w-full h-48 object-cover transform transition-transform duration-300 group-hover:scale-105"
+                        />
+                    </figure>
+                )}
+                {title && (
+                    <h2 class="card-title text-xl font-bold tracking-tight text-base-content">
+                        {title}
+                    </h2>
+                )}
+                {subtitle && (
+                    <p class="text-base-content/80">
+                        {subtitle}
+                    </p>
+                )}
+                <slot />
+            </a>
+        ) : (
+            <div class="card-body">
+                {imageUrl && (
+                    <figure class="relative overflow-hidden rounded-t-2xl">
+                        <img
+                            src={imageUrl}
+                            alt={title}
+                            class="w-full h-48 object-cover transform transition-transform duration-300 group-hover:scale-105"
+                        />
+                    </figure>
+                )}
+                {title && (
+                    <h2 class="card-title text-xl font-bold tracking-tight text-base-content">
+                        {title}
+                    </h2>
+                )}
+                {subtitle && (
+                    <p class="text-base-content/80">
+                        {subtitle}
+                    </p>
+                )}
+                <slot />
+            </div>
+        )}
+    </div>
+</div>
+
+<style>
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translateY(10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    .animate-fadeIn {
+        animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .perspective-1000 {
+        perspective: 1000px;
+    }
+
+    .card {
+        position: relative;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .card::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        background: radial-gradient(
+            circle at 50% 0%,
+            rgba(255, 255, 255, 0.1),
+            transparent 70%
+        );
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+
+    .card:hover::before {
+        opacity: 1;
+    }
+</style> 

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

@@ -27,7 +27,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 +51,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>

package/src/components/Link.astro

@@ -1,16 +1,82 @@
 ---
-interface Props {
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'a'> {
 	href: string;
 	external?: boolean;
 	class?: string;
+	'class:list'?: any;
+	variant?: 'default' | 'primary' | 'secondary' | 'text' | 'cta' | 'ghost';
+	animation?: 'none' | 'hover-lift' | 'hover-glow' | 'hover-scale';
+	size?: 'sm' | 'md' | 'lg';
 }
 
-const { href, external = false, class: className = '' } = Astro.props;
+const {
+	href,
+	external = false,
+	variant = 'default',
+	animation = 'none',
+	size = 'md',
+	class: className = '',
+	'class:list': classList,
+	...rest
+} = Astro.props;
+
+// 基础样式
+const baseStyles = "link no-underline hover:no-underline transition-all duration-200 ease-in-out";
+
+// 尺寸变体
+const sizeStyles = {
+	sm: "px-4 py-2 text-sm",
+	md: "px-6 py-3 text-base",
+	lg: "px-8 py-4 text-lg"
+};
+
+// 主题变体
+const variantStyles = {
+	default: "link-hover text-current hover:text-primary",
+	primary: "rounded-lg bg-blue-600 text-white font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 active:bg-blue-800",
+	secondary: "rounded-lg bg-gray-100 text-gray-800 font-medium hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:bg-gray-300",
+	text: "text-current hover:text-primary underline hover:no-underline",
+	cta: "rounded-lg bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 active:from-blue-800 active:to-indigo-800",
+	ghost: "text-current hover:text-primary bg-transparent hover:bg-base-200/50 rounded-lg"
+};
+
+// 动画效果
+const animationStyles = {
+	none: "",
+	"hover-lift": "hover:-translate-y-0.5 hover:shadow-lg",
+	"hover-glow": "hover:shadow-[0_0_15px_rgba(59,130,246,0.5)]",
+	"hover-scale": "hover:scale-105"
+};
+
+// 合并所有样式
+const finalClassName = [
+	baseStyles,
+	sizeStyles[size],
+	variantStyles[variant],
+	animationStyles[animation],
+	className
+].join(' ');
 ---
 
 <a
 	href={href}
-	class={`link link-hover ${className} no-underline hover:no-underline`}
-	{...external ? { target: '_blank', rel: 'noopener noreferrer' } : {}}>
+	class:list={[finalClassName, classList]}
+	{...external ? { target: '_blank', rel: 'noopener noreferrer' } : {}}
+	{...rest}
+>
 	<slot />
 </a>
+
+<style>
+	/* 添加渐变动画 */
+	.bg-gradient-to-r {
+		background-size: 200% auto;
+		transition: background-position 0.3s ease-in-out;
+	}
+	
+	.bg-gradient-to-r:hover {
+		background-position: right center;
+	}
+</style>

package/src/components/Modal.astro

@@ -0,0 +1,67 @@
+---
+interface Props {
+    /**
+     * Modal 的唯一标识符
+     */
+    id: string;
+    /**
+     * 模态框的标题
+     */
+    title?: string;
+    /**
+     * 是否显示关闭按钮
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+const {
+    id,
+    title,
+    showCloseButton = true,
+    class: className = '',
+} = Astro.props;
+---
+
+<dialog id={id} class="modal">
+    <div class:list={["modal-box relative", className]}>
+        {showCloseButton && (
+            <form method="dialog">
+                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+            </form>
+        )}
+        
+        {title && <h3 class="font-bold text-lg mb-4">{title}</h3>}
+        
+        <div class="modal-content">
+            <slot />
+        </div>
+
+        <div class="modal-action">
+            <slot name="actions" />
+        </div>
+    </div>
+
+    <form method="dialog" class="modal-backdrop">
+        <button>关闭</button>
+    </form>
+</dialog>
+
+<script define:vars={{ id }}>
+// 为了方便使用，我们提供一些辅助方法
+document.addEventListener('DOMContentLoaded', () => {
+    const modal = document.getElementById(id);
+    if (!modal) return;
+
+    // 为所有触发这个模态框的按钮添加点击事件
+    document.querySelectorAll(`[data-modal-target="${id}"]`).forEach(trigger => {
+        trigger.addEventListener('click', () => {
+            modal.showModal();
+        });
+    });
+});
+</script> 

package/src/components/TeamMember.astro

@@ -0,0 +1,68 @@
+---
+import { Image } from 'astro:assets';
+import type { ImageMetadata } from 'astro';
+import Link from './Link.astro';
+
+interface SocialLink {
+  platform: 'github' | 'twitter' | 'linkedin' | 'website' | 'email';
+  url: string;
+}
+
+export interface Props {
+  name: string;
+  role: string;
+  avatar: ImageMetadata | string;
+  bio: string;
+  socialLinks?: SocialLink[];
+  class?: string;
+}
+
+const { name, role, avatar, bio, socialLinks, class: className = '' } = Astro.props;
+
+const socialIcons = {
+  github: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>`,
+  twitter: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>`,
+  linkedin: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>`,
+  website: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm1 16.057v-3.05c.959-.69 2-1.367 2-3.007 0-2.233-1.5-3-2-3s-2 .767-2 3c0 1.64 1.041 2.317 2 3.007v3.05c-6.497 1.199-10 3.777-10 6.443h20c0-2.666-3.503-5.244-10-6.443z"/></svg>`,
+  email: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z"/><path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z"/></svg>`
+} as const;
+---
+
+<div class:list={["card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow duration-300", className]}>
+  <figure class="px-6 pt-6">
+    {typeof avatar === 'string' ? (
+      <img
+        src={avatar}
+        alt={`${name}'s avatar`}
+        class="rounded-xl w-48 h-48 object-cover"
+      />
+    ) : (
+      <Image
+        src={avatar}
+        alt={`${name}'s avatar`}
+        class="rounded-xl w-48 h-48 object-cover"
+      />
+    )}
+  </figure>
+  <div class="card-body items-center text-center">
+    <h2 class="card-title text-2xl font-bold">{name}</h2>
+    <p class="text-primary font-medium">{role}</p>
+    <p class="text-base-content/80">{bio}</p>
+    
+    {socialLinks && socialLinks.length > 0 && (
+      <div class="flex gap-4 mt-4">
+        {socialLinks.map(link => (
+          <Link
+            href={link.url}
+            external
+            variant="ghost"
+            class="p-2 hover:text-primary"
+            aria-label={`Visit ${name}'s ${link.platform} profile`}
+          >
+            <Fragment set:html={socialIcons[link.platform]} />
+          </Link>
+        ))}
+      </div>
+    )}
+  </div>
+</div> 

package/src/components/TeamMembers.astro

@@ -0,0 +1,43 @@
+---
+import type { ImageMetadata } from 'astro';
+import TeamMember from './TeamMember.astro';
+
+interface SocialLink {
+  platform: 'github' | 'twitter' | 'linkedin' | 'website' | 'email';
+  url: string;
+}
+
+interface TeamMemberData {
+  name: string;
+  role: string;
+  avatar: ImageMetadata | string;
+  bio: string;
+  socialLinks?: SocialLink[];
+}
+
+interface Props {
+  members: TeamMemberData[];
+  columns?: 2 | 3 | 4;
+  class?: string;
+}
+
+const { 
+  members,
+  columns = 3,
+  class: className = ''
+} = Astro.props;
+
+const gridCols = {
+  2: 'grid-cols-1 md:grid-cols-2',
+  3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+  4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
+} as const;
+---
+
+<div class:list={["w-full", className]}>
+  <div class:list={["grid gap-8", gridCols[columns]]}>
+    {members.map(member => (
+      <TeamMember {...member} />
+    ))}
+  </div>
+</div> 

package/src/components/ThemeItem.astro

@@ -1,14 +1,21 @@
 ---
+import Button from './Button.astro';
+
 interface Props {
-  theme: string;
-  label: string;
+	theme: string;
+	label: string;
 }
 
 const { theme, label } = Astro.props;
 ---
 
-<button
-  class="btn btn-sm w-full text-left justify-start"
-  data-set-theme={theme}>
-  {label}
-</button> 
+<Button
+	variant="ghost"
+	size="sm"
+	block
+	class="text-left justify-start"
+	data-set-theme={theme}
+>
+	{label}
+</Button>
+

package/src/components/Component.astro

@@ -1,10 +0,0 @@
----
-// Write your component code in this file!
-type Props = {
-	message: string;
-};
-
-const { message } = Astro.props;
----
-
-<div>Hello {message}!</div>

package/src/types/footer.ts

@@ -1,11 +0,0 @@
-export interface FooterLink {
-	key: string;
-	href: string;
-	external: boolean;
-	text: string;
-}
-
-export interface FooterNavGroup {
-	titleKey: string;
-	links: FooterLink[];
-}