@coffic/cosy-ui 0.8.20 → 0.8.22

package/dist/src/assets/iconData.ts

@@ -224,4 +224,14 @@ export const iconData: Record<string, IconData> = {
     download: {
         path: 'M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 11l3 3m0 0l3-3m-3 3V4',
     },
+
+    // App Store图标（苹果logo）
+    appstore: {
+        path: 'M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM8.82258 15.3427L8.03226 16.7137C7.80645 17.1089 7.30242 17.2419 6.90726 17.0161C6.5121 16.7903 6.37903 16.2863 6.60484 15.8911L7.19355 14.875C7.85484 14.6694 8.39516 14.8266 8.82258 15.3427ZM13.2097 8.66129L15.6331 12.8548H17.7742C18.2298 12.8548 18.5968 13.2218 18.5968 13.6774C18.5968 14.1331 18.2298 14.5 17.7742 14.5H16.5847L17.3871 15.8911C17.6129 16.2863 17.4798 16.7863 17.0847 17.0161C16.6895 17.2419 16.1895 17.1089 15.9597 16.7137L12.9194 11.4476C12.2298 10.2581 12.7218 9.06452 13.2097 8.66129ZM13.4879 5.61694C13.8831 5.84274 14.0161 6.34677 13.7903 6.74194L10.2621 12.8508H12.8145C13.6411 12.8508 14.1048 13.8226 13.746 14.496H6.26613C5.81048 14.496 5.44355 14.129 5.44355 13.6734C5.44355 13.2177 5.81048 12.8508 6.26613 12.8508H8.3629L11.0484 8.19758L10.2097 6.74194C9.98387 6.34677 10.1169 5.84677 10.5121 5.61694C10.9073 5.39113 11.4073 5.52419 11.6371 5.91935L11.996 6.55242L12.3629 5.91935C12.5887 5.52419 13.0927 5.39113 13.4879 5.61694Z',
+        viewBox: '0 0 24 24',
+    },
+
+    code: {
+        path: 'M8 6L2 12L8 18M16 6L22 12L16 18M10 16L14 8',
+    },
 };

package/dist/src/utils/i18n.ts

@@ -9,56 +9,58 @@ type TextContent = Record<string, Record<string, string>>;
 
 // 多语言文本内容
 export const texts: Record<string, TextContent> = {
-  en: {
-    tableOfContents: {
-      title: 'Table of Contents',
-      loading: 'Loading...',
+    en: {
+        tableOfContents: {
+            title: 'Table of Contents',
+            loading: 'Loading...',
+        },
+        footer: {
+            products: 'Products',
+            about: 'About',
+            aboutUs: 'About Us',
+            team: 'Our Team',
+            careers: 'Careers',
+            contactUs: 'Contact Us',
+            resources: 'Resources',
+            news: 'News',
+            blog: 'Blog',
+            faq: 'FAQ',
+            history: 'History',
+            techStack: 'Tech Stack',
+            legal: 'Legal',
+            terms: 'Terms of Service',
+            privacy: 'Privacy Policy',
+            slogan: 'Build a beautiful digital experience',
+            allRightsReserved: 'All Rights Reserved',
+            friendlyLinks: 'Friendly Links',
+        },
     },
-    footer: {
-      products: 'Products',
-      about: 'About',
-      aboutUs: 'About Us',
-      team: 'Our Team',
-      careers: 'Careers',
-      contactUs: 'Contact Us',
-      resources: 'Resources',
-      news: 'News',
-      blog: 'Blog',
-      faq: 'FAQ',
-      history: 'History',
-      techStack: 'Tech Stack',
-      legal: 'Legal',
-      terms: 'Terms of Service',
-      privacy: 'Privacy Policy',
-      slogan: 'Build a beautiful digital experience',
-      allRightsReserved: 'All Rights Reserved',
+    'zh-cn': {
+        tableOfContents: {
+            title: '目录',
+            loading: '加载中...',
+        },
+        footer: {
+            products: '产品',
+            about: '关于',
+            aboutUs: '关于我们',
+            team: '团队介绍',
+            careers: '加入我们',
+            contactUs: '联系我们',
+            defaultSlogan: '优雅、高效的组件库',
+            resources: '资源',
+            news: '新闻动态',
+            blog: '技术博客',
+            faq: '常见问题',
+            history: '发展历程',
+            techStack: '技术栈',
+            legal: '法律',
+            terms: '服务条款',
+            privacy: '隐私政策',
+            allRightsReserved: '保留所有权利',
+            friendlyLinks: '友情链接',
+        },
     },
-  },
-  'zh-cn': {
-    tableOfContents: {
-      title: '目录',
-      loading: '加载中...',
-    },
-    footer: {
-      products: '产品',
-      about: '关于',
-      aboutUs: '关于我们',
-      team: '团队介绍',
-      careers: '加入我们',
-      contactUs: '联系我们',
-      defaultSlogan: '优雅、高效的组件库',
-      resources: '资源',
-      news: '新闻动态',
-      blog: '技术博客',
-      faq: '常见问题',
-      history: '发展历程',
-      techStack: '技术栈',
-      legal: '法律',
-      terms: '服务条款',
-      privacy: '隐私政策',
-      allRightsReserved: '保留所有权利',
-    },
-  },
 };
 
 /**
@@ -69,7 +71,7 @@ export const texts: Record<string, TextContent> = {
  * @returns 对应的文本内容
  */
 export function getText(lang: string, component: string, key: string): string {
-  return texts[lang]?.[component]?.[key] || texts['en'][component]?.[key] || '';
+    return texts[lang]?.[component]?.[key] || texts['en'][component]?.[key] || '';
 }
 
 /**
@@ -79,5 +81,5 @@ export function getText(lang: string, component: string, key: string): string {
  * @returns 文本获取函数
  */
 export function createTextGetter(langInfo: string, component: string) {
-  return (key: string): string => getText(langInfo, component, key);
+    return (key: string): string => getText(langInfo, component, key);
 }

package/dist/src-astro/banner/Banner.astro

@@ -56,7 +56,23 @@ interface Props {
     | 'info'
     | 'success'
     | 'warning'
-    | 'error';
+    | 'error'
+    // 大自然灵感渐变
+    | 'gradient-sky'
+    | 'gradient-sunset'
+    | 'gradient-forest'
+    | 'gradient-ocean'
+    | 'gradient-mountain'
+    | 'gradient-flower'
+    // 水果灵感渐变
+    | 'gradient-watermelon'
+    | 'gradient-lemon'
+    | 'gradient-grape'
+    | 'gradient-blueberry'
+    | 'gradient-mango'
+    | 'gradient-kiwi'
+    | 'gradient-pitaya'
+    | 'gradient-banana';
 
   /**
    * 文本颜色，默认根据背景色自动设置
@@ -101,7 +117,43 @@ const getTextColorClass = () => {
     : 'cosy:text-gray-800';
 };
 
-// 组合CSS类
+// 渐变色背景映射
+const gradientBgClassMap = {
+  'gradient-sky': 'cosy:bg-gradient-to-r cosy:from-sky-400 cosy:to-indigo-500',
+  'gradient-watermelon':
+    'cosy:bg-gradient-to-r cosy:from-green-300 cosy:via-pink-400 cosy:to-red-500',
+  'gradient-lemon':
+    'cosy:bg-gradient-to-r cosy:from-yellow-200 cosy:via-yellow-400 cosy:to-yellow-600',
+  'gradient-grape':
+    'cosy:bg-gradient-to-r cosy:from-purple-400 cosy:via-indigo-500 cosy:to-purple-700',
+  'gradient-mango':
+    'cosy:bg-gradient-to-r cosy:from-yellow-300 cosy:via-orange-400 cosy:to-orange-600',
+  'gradient-forest':
+    'cosy:bg-gradient-to-r cosy:from-green-700 cosy:to-lime-300',
+  'gradient-ocean': 'cosy:bg-gradient-to-r cosy:from-cyan-400 cosy:to-blue-700',
+  'gradient-sunset':
+    'cosy:bg-gradient-to-r cosy:from-orange-400 cosy:via-pink-500 cosy:to-red-500',
+  'gradient-flower':
+    'cosy:bg-gradient-to-r cosy:from-pink-300 cosy:via-purple-400 cosy:to-fuchsia-500',
+  'gradient-pitaya':
+    'cosy:bg-gradient-to-r cosy:from-pink-200 cosy:via-fuchsia-400 cosy:to-lime-300',
+  'gradient-banana':
+    'cosy:bg-gradient-to-r cosy:from-yellow-100 cosy:via-yellow-300 cosy:to-yellow-500',
+  'gradient-blueberry':
+    'cosy:bg-gradient-to-r cosy:from-blue-400 cosy:via-blue-600 cosy:to-indigo-700',
+  'gradient-kiwi':
+    'cosy:bg-gradient-to-r cosy:from-lime-200 cosy:via-green-400 cosy:to-green-700',
+};
+
+const isGradient =
+  typeof bgColor === 'string' && bgColor.startsWith('gradient-');
+let bgClass = '';
+if (isGradient) {
+  bgClass =
+    gradientBgClassMap[bgColor as keyof typeof gradientBgClassMap] ?? '';
+} else {
+  bgClass = `cosy:bg-${bgColor}`;
+}
 const bannerClasses = [
   'cosy:w-full',
   'cosy:py-8',
@@ -119,7 +171,7 @@ const bannerClasses = [
   'cosy:shadow-md',
   'cosy:hover:shadow-lg',
   'cosy:hover:scale-[1.01]',
-  `cosy:bg-${bgColor}`,
+  bgClass,
   getTextColorClass(),
   className,
 ].join(' ');

package/dist/src-astro/banner/index.ts

@@ -1,54 +1,3 @@
 import Banner from './Banner.astro';
-import BannerBasic from './BannerBasic.astro';
-import BannerPrimary from './BannerPrimary.astro';
-import BannerSecondary from './BannerSecondary.astro';
-import BannerSuccess from './BannerSuccess.astro';
-import BannerWarning from './BannerWarning.astro';
-import BannerDanger from './BannerDanger.astro';
-import BannerInfo from './BannerInfo.astro';
-import BannerCustomStyle from './BannerCustomStyle.astro';
-import BannerFadeIn from './BannerFadeIn.astro';
-import BannerSlideUp from './BannerSlideUp.astro';
-import BannerAllAnimations from './BannerAllAnimations.astro';
-import BasicSourceCode from './BannerBasic.astro?raw';
-import PrimarySourceCode from './BannerPrimary.astro?raw';
-import SecondarySourceCode from './BannerSecondary.astro?raw';
-import SuccessSourceCode from './BannerSuccess.astro?raw';
-import WarningSourceCode from './BannerWarning.astro?raw';
-import DangerSourceCode from './BannerDanger.astro?raw';
-import InfoSourceCode from './BannerInfo.astro?raw';
-import CustomStyleSourceCode from './BannerCustomStyle.astro?raw';
-import FadeInSourceCode from './BannerFadeIn.astro?raw';
-import SlideUpSourceCode from './BannerSlideUp.astro?raw';
-import AllAnimationsSourceCode from './BannerAllAnimations.astro?raw';
-import { extractSimpleExample } from '../../src/utils/component';
 
-export {
-  Banner,
-  BannerBasic,
-  BannerPrimary,
-  BannerSecondary,
-  BannerSuccess,
-  BannerWarning,
-  BannerDanger,
-  BannerInfo,
-  BannerCustomStyle,
-  BannerFadeIn,
-  BannerSlideUp,
-  BannerAllAnimations,
-};
-
-// 导出示例源代码
-export const BannerExampleCodes = {
-  Basic: extractSimpleExample(BasicSourceCode, 'Banner'),
-  Primary: extractSimpleExample(PrimarySourceCode, 'Banner'),
-  Secondary: extractSimpleExample(SecondarySourceCode, 'Banner'),
-  Success: extractSimpleExample(SuccessSourceCode, 'Banner'),
-  Warning: extractSimpleExample(WarningSourceCode, 'Banner'),
-  Danger: extractSimpleExample(DangerSourceCode, 'Banner'),
-  Info: extractSimpleExample(InfoSourceCode, 'Banner'),
-  CustomStyle: extractSimpleExample(CustomStyleSourceCode, 'Banner'),
-  FadeIn: extractSimpleExample(FadeInSourceCode, 'Banner'),
-  SlideUp: extractSimpleExample(SlideUpSourceCode, 'Banner'),
-  AllAnimations: extractSimpleExample(AllAnimationsSourceCode, 'Banner'),
-};
+export { Banner };

package/dist/src-astro/button/Button.astro

@@ -69,7 +69,20 @@ interface Props {
     | 'ghost'
     | 'link'
     | 'outline'
-    | 'neutral';
+    | 'neutral'
+    | 'gradient-sky'
+    | 'gradient-watermelon'
+    | 'gradient-lemon'
+    | 'gradient-grape'
+    | 'gradient-mango'
+    | 'gradient-forest'
+    | 'gradient-ocean'
+    | 'gradient-sunset'
+    | 'gradient-flower'
+    | 'gradient-pitaya'
+    | 'gradient-banana'
+    | 'gradient-blueberry'
+    | 'gradient-kiwi';
   size?: 'lg' | 'md' | 'sm' | 'xs';
   shape?: 'circle' | 'square';
   wide?: boolean;
@@ -81,7 +94,7 @@ interface Props {
   onClick?: string;
   formmethod?: string;
   href?: string;
-  target?: string;
+  target?: '_self' | '_blank' | '_parent' | '_top';
   [key: string]: any; // 允许任意自定义属性
 }
 
@@ -119,6 +132,32 @@ const getButtonClasses = () => {
     link: 'cosy:btn-link',
     outline: 'cosy:btn-outline',
     neutral: 'cosy:btn-neutral',
+    'gradient-sky':
+      'cosy:bg-gradient-to-r cosy:from-sky-400 cosy:to-indigo-500 cosy:text-white hover:cosy:from-sky-500 hover:cosy:to-indigo-600',
+    'gradient-watermelon':
+      'cosy:bg-gradient-to-r cosy:from-green-300 cosy:via-pink-400 cosy:to-red-500 cosy:text-white hover:cosy:from-green-400 hover:cosy:to-red-600',
+    'gradient-lemon':
+      'cosy:bg-gradient-to-r cosy:from-yellow-200 cosy:via-yellow-400 cosy:to-yellow-600 cosy:text-gray-900 hover:cosy:from-yellow-300 hover:cosy:to-yellow-700',
+    'gradient-grape':
+      'cosy:bg-gradient-to-r cosy:from-purple-400 cosy:via-indigo-500 cosy:to-purple-700 cosy:text-white hover:cosy:from-purple-500 hover:cosy:to-purple-800',
+    'gradient-mango':
+      'cosy:bg-gradient-to-r cosy:from-yellow-300 cosy:via-orange-400 cosy:to-orange-600 cosy:text-white hover:cosy:from-yellow-400 hover:cosy:to-orange-700',
+    'gradient-forest':
+      'cosy:bg-gradient-to-r cosy:from-green-700 cosy:to-lime-300 cosy:text-white hover:cosy:from-green-800 hover:cosy:to-lime-400',
+    'gradient-ocean':
+      'cosy:bg-gradient-to-r cosy:from-cyan-400 cosy:to-blue-700 cosy:text-white hover:cosy:from-cyan-500 hover:cosy:to-blue-800',
+    'gradient-sunset':
+      'cosy:bg-gradient-to-r cosy:from-orange-400 cosy:via-pink-500 cosy:to-red-500 cosy:text-white hover:cosy:from-orange-500 hover:cosy:to-red-600',
+    'gradient-flower':
+      'cosy:bg-gradient-to-r cosy:from-pink-300 cosy:via-purple-400 cosy:to-fuchsia-500 cosy:text-white hover:cosy:from-pink-400 hover:cosy:to-fuchsia-600',
+    'gradient-pitaya':
+      'cosy:bg-gradient-to-r cosy:from-pink-200 cosy:via-fuchsia-400 cosy:to-lime-300 cosy:text-white hover:cosy:from-pink-300 hover:cosy:to-lime-400',
+    'gradient-banana':
+      'cosy:bg-gradient-to-r cosy:from-yellow-100 cosy:via-yellow-300 cosy:to-yellow-500 cosy:text-gray-900 hover:cosy:from-yellow-200 hover:cosy:to-yellow-600',
+    'gradient-blueberry':
+      'cosy:bg-gradient-to-r cosy:from-blue-400 cosy:via-blue-600 cosy:to-indigo-700 cosy:text-white hover:cosy:from-blue-500 hover:cosy:to-indigo-800',
+    'gradient-kiwi':
+      'cosy:bg-gradient-to-r cosy:from-lime-200 cosy:via-green-400 cosy:to-green-700 cosy:text-white hover:cosy:from-lime-300 hover:cosy:to-green-800',
   };
 
   // Size classes

package/dist/src-astro/code-container/ButtonCodeToggle.astro

@@ -0,0 +1,55 @@
+---
+import { CodeIcon } from '../icons';
+const { isCodeView = false } = Astro.props;
+---
+
+<button
+  role="switch"
+  class={`cosy:btn cosy:btn-ghost cosy:btn-sm ${isCodeView ? 'cosy:btn-primary' : ''}`}
+  aria-checked={isCodeView ? 'true' : 'false'}
+  aria-label="切换代码/预览"
+  data-toggle="code">
+  <span class="cosy:code-icon"><CodeIcon /></span>
+</button>
+
+<script>
+  function initializeCodeToggle() {
+    console.log('CodeContainer: 初始化代码/预览切换按钮');
+    const codeToggles = document.querySelectorAll('[data-toggle="code"]');
+    codeToggles.forEach((toggle) => {
+      toggle.addEventListener('click', () => {
+        const container = toggle.closest('[data-role="code-container"]');
+        if (!container) {
+          console.error('CodeContainer: 无法找到父容器');
+          return;
+        }
+        const isChecked = toggle.getAttribute('aria-checked') === 'true';
+        toggle.setAttribute('aria-checked', !isChecked ? 'true' : 'false');
+        toggle.classList.toggle('cosy:btn-primary', !isChecked);
+        toggle.classList.toggle('cosy:btn-ghost', isChecked);
+        const activeExample = container.querySelector(
+          '.cosy\\:example-container:not(.cosy\\:hidden)'
+        );
+        if (!activeExample) {
+          console.error('CodeContainer: 无法找到活动示例');
+          return;
+        }
+        activeExample
+          .querySelectorAll('.cosy\\:code-example-panel')
+          .forEach((panel) => {
+            if (panel.getAttribute('data-panel') === 'code') {
+              panel.classList.toggle('cosy:hidden', isChecked);
+              panel.classList.toggle('cosy:block', !isChecked);
+            } else {
+              panel.classList.toggle('cosy:hidden', !isChecked);
+              panel.classList.toggle('cosy:block', isChecked);
+            }
+          });
+      });
+    });
+  }
+
+  document.addEventListener('astro:page-load', () => {
+    initializeCodeToggle();
+  });
+</script>

package/dist/src-astro/code-container/ButtonCopyCode.astro

@@ -0,0 +1,74 @@
+---
+import { ClipboardIcon } from '../icons';
+---
+
+<button
+  class="cosy:gap-2 cosy:btn cosy:btn-ghost cosy:btn-sm"
+  aria-label="复制代码"
+  id="cosy-copy-btn"
+  type="button"
+  style="position: relative;">
+  <span class="cosy:copy-icon"><ClipboardIcon /></span>
+  <span
+    id="copy-toast"
+    style="
+    display: none;
+    position: absolute;
+    top: -2.5rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #22c55e;
+    color: #fff;
+    padding: 0.25rem 0.75rem;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    white-space: nowrap;
+    z-index: 10;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    pointer-events: none;
+    transition: opacity 0.2s;
+  "
+    >复制成功</span
+  >
+</button>
+
+<script>
+  function initializeCopyCode() {
+    console.log('CodeContainer: 初始化复制代码按钮');
+
+    const copyButtons = document.querySelectorAll('[aria-label="复制代码"]');
+    copyButtons.forEach((button) => {
+      button.addEventListener('click', () => {
+        const container = button.closest('[data-role="code-container"]');
+        if (!container) return;
+        const activeExample = container.querySelector(
+          '.cosy\\:example-container:not(.cosy\\:hidden)'
+        );
+        if (!activeExample) return;
+        const codePanel = activeExample.querySelector('[data-panel="code"]');
+        if (!codePanel) return;
+        const codeElement = codePanel.querySelector('code');
+        if (!codeElement) return;
+        const code = codeElement.textContent || '';
+        navigator.clipboard.writeText(code).then(() => {
+          // 气泡提示
+          const toast = button.querySelector('#copy-toast');
+          if (toast && toast instanceof HTMLElement) {
+            toast.style.display = 'block';
+            toast.style.opacity = '1';
+            setTimeout(() => {
+              toast.style.opacity = '0';
+              setTimeout(() => {
+                toast.style.display = 'none';
+              }, 200);
+            }, 2000);
+          }
+        });
+      });
+    });
+  }
+
+  document.addEventListener('astro:page-load', () => {
+    initializeCopyCode();
+  });
+</script>