@coffic/cosy-ui 0.8.19 → 0.8.21

package/dist/src/assets/iconData.ts

@@ -224,4 +224,10 @@ 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',
+    },
+};

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/button/Button.astro

@@ -81,7 +81,7 @@ interface Props {
   onClick?: string;
   formmethod?: string;
   href?: string;
-  target?: string;
+  target?: '_self' | '_blank' | '_parent' | '_top';
   [key: string]: any; // 允许任意自定义属性
 }
 

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

@@ -111,7 +111,10 @@ const {
         data-example={`tab-${index + 1}`}>
         {/* 描述 */}
         {descriptions[index] && (
-          <p class="cosy:px-4 cosy:py-2 cosy:text-sm cosy:bg-gradient-to-b not-prose cosy:from-blue-100/50 cosy:to-blue-100/90 ">
+          <p
+            class="cosy:px-6 cosy:py-2 cosy:text-sm not-prose
+          cosy:bg-gradient-to-b cosy:from-blue-100/50 cosy:to-blue-100/90 
+          cosy:dark:from-blue-900/20 cosy:dark:to-blue-900/20">
             {descriptions[index]}
           </p>
         )}

package/dist/src-astro/footer/Footer.astro

@@ -65,6 +65,22 @@
  * />
  * ```
  *
+ * 添加友情链接：
+ * ```astro
+ * <Footer
+ *   siteName="我的网站"
+ *   homeLink="/"
+ *   slogan="简单而强大"
+ *   company="我的公司"
+ *   copyright="保留所有权利"
+ *   inspirationalSlogan="构建美好的数字体验"
+ *   friendlyLinks={[
+ *     { name: "合作伙伴A", href: "https://partner-a.com" },
+ *     { name: "合作伙伴B", href: "https://partner-b.com", external: true }
+ *   ]}
+ * />
+ * ```
+ *
  * 完整示例：
  * ```astro
  * <Footer
@@ -79,6 +95,10 @@
  *     { name: "产品A", href: "/products/a" },
  *     { name: "产品B", href: "/products/b" }
  *   ]}
+ *   friendlyLinks={[
+ *     { name: "合作伙伴A", href: "https://partner-a.com" },
+ *     { name: "合作伙伴B", href: "https://partner-b.com", external: true }
+ *   ]}
  *   socialLinks={[
  *     "https://github.com/myusername",
  *     "https://twitter.com/myusername"
@@ -121,6 +141,7 @@
  * @prop {string} [icp] - ICP备案号（中国网站需要）
  * @prop {Object} [logo] - 网站Logo对象，包含src和alt属性
  * @prop {Array<Object>} [products=[]] - 产品链接数组，每个对象包含name、href和可选的external属性
+ * @prop {Array<Object>} [friendlyLinks=[]] - 友情链接数组，每个对象包含name、href和可选的external属性
  * @prop {string} [aboutLink] - "关于我们"页面链接
  * @prop {string} [contactLink] - "联系我们"页面链接
  * @prop {string} [termsLink] - "服务条款"页面链接
@@ -165,6 +186,7 @@ const {
   icp,
   logo,
   products = [],
+  friendlyLinks = [],
   aboutLink,
   contactLink,
   termsLink,
@@ -272,6 +294,13 @@ const debugClasses = debug
         )
       }
 
+      {/* 友情链接导航 */}
+      {
+        friendlyLinks.length > 0 && (
+          <FooterSection title={t('friendlyLinks')} links={friendlyLinks} />
+        )
+      }
+
       {/* 关于导航 */}
       {
         (aboutLink || contactLink || teamLink || careersLink) && (

package/dist/src-astro/hero/Hero.astro

@@ -157,6 +157,7 @@ import { Button } from '../../index-astro';
 interface Link {
   text: string;
   href: string;
+  target?: '_self' | '_blank' | '_parent' | '_top';
   variant:
     | 'primary'
     | 'secondary'
@@ -368,7 +369,11 @@ const contentOrder = {
       <div class={linksContainerClasses}>
         {
           links.map((link: Link) => (
-            <Button href={link.href} variant={link.variant} size="lg">
+            <Button
+              href={link.href}
+              target={link.target}
+              variant={link.variant}
+              size="lg">
               {link.text}
             </Button>
           ))

package/dist/src-astro/icons/AppStoreIcon.astro

@@ -0,0 +1,37 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+/**
+ * App Store图标组件
+ */
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon
+  name="appstore"
+  strokeWidth="0.5"
+  size={size}
+  fill={true}
+  class={className}
+/>

package/dist/src-astro/icons/AstroIcon.astro

@@ -19,6 +19,12 @@ interface Props {
    */
   stroke?: string;
 
+  /**
+   * 描边宽度
+   * @default "2"
+   */
+  strokeWidth?: string;
+
   /**
    * 自定义类名
    */
@@ -35,6 +41,7 @@ const {
   name,
   size = '24px',
   stroke = 'currentColor',
+  strokeWidth = '2',
   class: className = '',
   fill = false,
 } = Astro.props;
@@ -51,7 +58,7 @@ const viewBox = icon?.viewBox || '0 0 24 24';
       viewBox={viewBox}
       fill={fill ? 'currentColor' : 'none'}
       stroke={stroke}
-      stroke-width="2"
+      stroke-width={strokeWidth}
       stroke-linecap="round"
       stroke-linejoin="round"
       class={className}>

package/dist/src-astro/icons/WebsiteIcon.astro

@@ -0,0 +1,31 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+/**
+ * 网站图标组件
+ */
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="website" size={size} stroke={color} class={className} />

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

@@ -44,4 +44,5 @@ export { default as SecurityIcon } from './SecurityIcon.astro';
 export { default as UploadIcon } from './UploadIcon.astro';
 export { default as DownloadIcon } from './DownloadIcon.astro';
 export { default as LogOut } from './LogOut.astro';
-
+export { default as AppStoreIcon } from './AppStoreIcon.astro';
+export { default as WebsiteIcon } from './WebsiteIcon.astro';

package/dist/src-astro/nav-item/index.ts

@@ -1,11 +1,3 @@
 import NavItems from './NavItems.astro';
-import NavItemsBasic from './NavItemsBasic.astro';
-import BasicSourceCode from './NavItemsBasic.astro?raw';
-import { extractSimpleExample } from '../../src/utils/component';
 
-export { NavItems, NavItemsBasic };
-
-// 导出示例源代码
-export const NavItemsExampleCodes = {
-  Basic: extractSimpleExample(BasicSourceCode, 'NavItems'),
-};
+export { NavItems };

package/dist/src-astro/products/ProductCard.astro

@@ -64,9 +64,32 @@
  *   />
  * </div>
  * ```
+ *
+ * 自定义阴影样式：
+ * ```astro
+ * <ProductCard
+ *   shadow="lg"
+ *   name="突出显示的产品"
+ *   image="/images/products/product1.jpg"
+ *   description="使用大阴影突出显示的产品"
+ * />
+ *
+ * <ProductCard
+ *   shadow="none"
+ *   name="简洁风格产品"
+ *   image="/images/products/product2.jpg"
+ *   description="无阴影的简洁风格"
+ * />
+ * ```
  */
 
-import { SocialIcon, Image, Link } from '../../index-astro';
+import {
+  SocialIcon,
+  Image,
+  Button,
+  LinkIcon,
+  AppStoreIcon,
+} from '../../index-astro';
 import '../../style.ts';
 import type { ImageSource } from '../types/image.ts';
 
@@ -138,6 +161,15 @@ export interface Props {
    * 自定义类名
    */
   class?: string;
+  /**
+   * 卡片阴影样式
+   * - none: 无阴影
+   * - sm: 小阴影
+   * - md: 中等阴影（默认）
+   * - lg: 大阴影
+   * - xl: 超大阴影
+   */
+  shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
 }
 
 const {
@@ -155,6 +187,7 @@ const {
   equalHeight = false,
   descriptionLines,
   class: className = '',
+  shadow = 'md',
 } = Astro.props;
 
 // 尺寸样式映射
@@ -238,6 +271,15 @@ const sizeStyles = {
 
 const currentSize = sizeStyles[size];
 
+// 阴影样式映射
+const shadowStyles = {
+  none: 'cosy:shadow-none',
+  sm: 'cosy:shadow-sm cosy:hover:shadow-md',
+  md: 'cosy:shadow-md cosy:hover:shadow-lg',
+  lg: 'cosy:shadow-lg cosy:hover:shadow-xl',
+  xl: 'cosy:shadow-xl cosy:hover:shadow-2xl',
+};
+
 // 描述文本的行数限制
 const descriptionClass = descriptionLines
   ? `cosy:line-clamp-${descriptionLines}`
@@ -279,7 +321,8 @@ const buttonsContainerClass =
 
 <div
   class:list={[
-    'cosy:card cosy:bg-base-100 cosy:shadow-md cosy:hover:shadow-lg cosy:transition-shadow cosy:duration-300',
+    'cosy:card cosy:bg-base-100 cosy:transition-shadow cosy:duration-300',
+    shadowStyles[shadow],
     currentSize.card,
     equalHeight && currentSize.cardHeight,
     'cosy:flex cosy:flex-col',
@@ -319,54 +362,47 @@ const buttonsContainerClass =
     <div class={buttonsContainerClass}>
       {
         productUrl && (
-          <Link
+          <Button
             href={productUrl}
-            external
+            target="_blank"
             variant="primary"
-            class:list={[
-              'cosy:btn cosy:bg-[#4468e3] cosy:hover:bg-[#3857cc] cosy:border-0',
-              'cosy:text-white cosy:font-bold cosy:shadow-sm',
-              buttonLayoutClass,
-              currentSize.buttons,
-            ]}
+            class:list={[buttonLayoutClass, currentSize.buttons]}
             aria-label={`Visit ${name}'s website`}>
+            <span slot="icon-left">
+              <LinkIcon size="22px" />
+            </span>
             {primaryButtonText}
-          </Link>
+          </Button>
         )
       }
       {
         appStoreUrl && (
-          <Link
+          <Button
             href={appStoreUrl}
-            external
+            target="_blank"
             variant="secondary"
-            class:list={[
-              'cosy:btn cosy:bg-[#161616] cosy:hover:bg-black cosy:border-0',
-              'cosy:text-white cosy:font-bold cosy:shadow-sm',
-              buttonLayoutClass,
-              currentSize.buttons,
-            ]}
+            class:list={[buttonLayoutClass, currentSize.buttons]}
             aria-label={`Download ${name} on App Store`}>
+            <span slot="icon-left">
+              <AppStoreIcon size="22px" />
+            </span>
             {secondaryButtonText}
-          </Link>
+          </Button>
         )
       }
       {
         githubUrl && (
-          <Link
+          <Button
             href={githubUrl}
-            external
-            variant="ghost"
-            class:list={[
-              'cosy:btn cosy:bg-[#f0f0f0] cosy:hover:bg-[#e0e0e0] cosy:border-0',
-              'cosy:text-[#24292f] cosy:font-bold cosy:shadow-sm',
-              buttonLayoutClass,
-              currentSize.buttons,
-            ]}
+            target="_blank"
+            variant="info"
+            class:list={[buttonLayoutClass, currentSize.buttons]}
             aria-label={`View ${name}'s GitHub repository`}>
-            <SocialIcon platform="github" size="18px" />
-            <span class="cosy:inline-block">{githubButtonText}</span>
-          </Link>
+            <span slot="icon-left">
+              <SocialIcon platform="github" size="22px" />
+            </span>
+            {githubButtonText}
+          </Button>
         )
       }
     </div>