@coffic/cosy-ui 0.1.25 → 0.1.28

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,18 @@
-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 Image } from './src/components/Image.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.28",
   "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">
+    <div 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>