@coffic/cosy-ui 0.8.20 → 0.8.22

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] - "服务条款"页面链接
@@ -151,6 +172,7 @@ import {
   LanguageUtil,
   type IFooterProps,
   createTextGetter,
+  Link,
 } from '../../index-astro';
 import FooterSection from './FooterSection.astro';
 import '../../style.ts';
@@ -165,6 +187,7 @@ const {
   icp,
   logo,
   products = [],
+  friendlyLinks = [],
   aboutLink,
   contactLink,
   termsLink,
@@ -220,9 +243,7 @@ const debugClasses = debug
     ]}>
     {/* 品牌区域 */}
     <aside class:list={['cosy:max-w-xs cosy:text-center', debugClasses.aside]}>
-      <a
-        href={homeLink}
-        class="cosy:flex cosy:items-center cosy:gap-2 cosy:mb-4 cosy:no-underline">
+      <Link href={homeLink} align="center" noUnderline block class="cosy:mb-4">
         {
           logo && (
             <img
@@ -238,21 +259,25 @@ const debugClasses = debug
           <h2 class="cosy:font-bold cosy:text-xl">{siteName}</h2>
           <p class="cosy:text-base-content/70">{slogan}</p>
         </div>
-      </a>
+      </Link>
 
       {/* 社交媒体链接 */}
       {
         processedSocialLinks.length > 0 && (
           <div class="cosy:flex cosy:justify-center cosy:gap-2 cosy:mt-4">
             {processedSocialLinks.map((link) => (
-              <a
+              <Link
                 href={link.url}
-                class="cosy:btn cosy:btn-circle cosy:btn-ghost cosy:btn-sm"
-                target="_blank"
+                btn
+                circle
+                ghost
+                size="sm"
+                color="primary"
+                external
                 rel="noopener noreferrer"
                 aria-label={link.name}>
                 <SocialIcon platform={link.platform} />
-              </a>
+              </Link>
             ))}
           </div>
         )
@@ -272,16 +297,23 @@ const debugClasses = debug
         )
       }
 
+      {/* 友情链接导航 */}
+      {
+        friendlyLinks.length > 0 && (
+          <FooterSection title={t('friendlyLinks')} links={friendlyLinks} />
+        )
+      }
+
       {/* 关于导航 */}
       {
         (aboutLink || contactLink || teamLink || careersLink) && (
           <FooterSection
             title={t('about')}
             links={[
-              { name: t('aboutUs'), href: aboutLink },
-              { name: t('team'), href: teamLink },
-              { name: t('careers'), href: careersLink },
-              { name: t('contactUs'), href: contactLink },
+              { name: t('aboutUs'), href: aboutLink ?? '' },
+              { name: t('team'), href: teamLink ?? '' },
+              { name: t('careers'), href: careersLink ?? '' },
+              { name: t('contactUs'), href: contactLink ?? '' },
             ].filter((link) => link.href)}
           />
         )
@@ -299,11 +331,11 @@ const debugClasses = debug
           <FooterSection
             title={t('resources')}
             links={[
-              { name: t('news'), href: newsLink },
-              { name: t('blog'), href: blogLink },
-              { name: t('faq'), href: faqLink },
-              { name: t('history'), href: historyLink },
-              { name: t('techStack'), href: techStackLink },
+              { name: t('news'), href: newsLink ?? '' },
+              { name: t('blog'), href: blogLink ?? '' },
+              { name: t('faq'), href: faqLink ?? '' },
+              { name: t('history'), href: historyLink ?? '' },
+              { name: t('techStack'), href: techStackLink ?? '' },
             ].filter((link) => link.href)}
           />
         )
@@ -315,8 +347,8 @@ const debugClasses = debug
           <FooterSection
             title={t('legal')}
             links={[
-              { name: t('terms'), href: termsLink },
-              { name: t('privacy'), href: privacyLink },
+              { name: t('terms'), href: termsLink ?? '' },
+              { name: t('privacy'), href: privacyLink ?? '' },
             ].filter((link) => link.href)}
           />
         )
@@ -337,7 +369,7 @@ const debugClasses = debug
 {/* 底部版权信息 */}
 <div
   class:list={[
-    'cosy:footer cosy:footer-center cosy:p-4 cosy:bg-base-300 cosy:text-base-content',
+    'cosy:footer cosy:footer-center cosy:p-4 cosy:bg-base-300',
     debugClasses.footer,
   ]}>
   <aside

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

@@ -6,10 +6,7 @@
  * FooterSection 组件用于在页脚中显示一组链接，通常用于导航、产品列表等。
  */
 
-interface Link {
-  name: string;
-  href?: string;
-}
+import { Link, type IProduct } from '../../index-astro';
 
 interface Props {
   /**
@@ -20,7 +17,7 @@ interface Props {
   /**
    * 链接列表
    */
-  links: Link[];
+  links: IProduct[];
 }
 
 const { title, links } = Astro.props;
@@ -33,12 +30,13 @@ const { title, links } = Astro.props;
       links.map((link) => (
         <li class="cosy:list-none">
           {link.href ? (
-            <a
+            <Link
               href={link.href}
-              class="cosy:link cosy:link-hover cosy:no-underline cosy:hover:no-underline"
-            >
+              size="sm"
+              target={link.external ? '_blank' : '_self'}
+              variant="text">
               {link.name}
-            </a>
+            </Link>
           ) : (
             <span class="cosy:opacity-50">{link.name}</span>
           )}

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

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

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

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

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

@@ -143,7 +143,7 @@
  * @prop {string} links[].text - 链接按钮的文本
  * @prop {string} links[].href - 链接按钮的目标地址
  * @prop {string} links[].variant - 链接按钮的变体，可选值："primary", "secondary", "accent", "info", "success", "warning", "error"
- * @prop {string} [background="gradient"] - 背景样式，可选值："gradient", "plain"
+ * @prop {string} [background="gradient"] - 背景样式，可选值："gradient", "plain", "gradient-primary", "gradient-secondary", "gradient-accent", "gradient-success", "gradient-warning", "gradient-info", "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"
  * @prop {string} [align="center"] - 内容对齐方式，可选值："center", "left", "right"
  * @prop {string} [imagePosition="right"] - 图片位置，可选值："right", "left", "top", "bottom"
  * @prop {string} [backgroundImage] - 背景图片的URL
@@ -157,6 +157,7 @@ import { Button } from '../../index-astro';
 interface Link {
   text: string;
   href: string;
+  target?: '_self' | '_blank' | '_parent' | '_top';
   variant:
     | 'primary'
     | 'secondary'
@@ -175,7 +176,29 @@ interface Props {
     alt: string;
   };
   links: Link[];
-  background?: 'gradient' | 'plain';
+  background?:
+    | 'gradient'
+    | 'plain'
+    | 'gradient-primary'
+    | 'gradient-secondary'
+    | 'gradient-accent'
+    | 'gradient-success'
+    | 'gradient-warning'
+    | 'gradient-info'
+    | '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';
   align?: 'center' | 'left' | 'right';
   imagePosition?: 'right' | 'left' | 'top' | 'bottom';
   backgroundImage?: string;
@@ -199,6 +222,49 @@ const {
 // 确保不透明度在0-1之间
 const safeOpacity = Math.max(0, Math.min(1, overlayOpacity));
 
+// 渐变色背景映射
+const gradientBgClassMap = {
+  gradient: 'cosy:bg-gradient-to-br cosy:from-primary/10 cosy:to-secondary/20',
+  'gradient-primary':
+    'cosy:bg-gradient-to-br cosy:from-primary-400 cosy:to-primary-700',
+  'gradient-secondary':
+    'cosy:bg-gradient-to-br cosy:from-secondary-400 cosy:to-secondary-700',
+  'gradient-accent':
+    'cosy:bg-gradient-to-br cosy:from-accent-400 cosy:to-accent-700',
+  'gradient-success':
+    'cosy:bg-gradient-to-br cosy:from-success-400 cosy:to-success-700',
+  'gradient-warning':
+    'cosy:bg-gradient-to-br cosy:from-warning-400 cosy:to-warning-700',
+  'gradient-info': 'cosy:bg-gradient-to-br cosy:from-info-400 cosy:to-info-700',
+  'gradient-sky': 'cosy:bg-gradient-to-br cosy:from-sky-400 cosy:to-indigo-500',
+  'gradient-sunset':
+    'cosy:bg-gradient-to-br cosy:from-orange-400 cosy:via-pink-500 cosy:to-red-500',
+  'gradient-forest':
+    'cosy:bg-gradient-to-br cosy:from-green-700 cosy:to-lime-300',
+  'gradient-ocean':
+    'cosy:bg-gradient-to-br cosy:from-cyan-400 cosy:to-blue-700',
+  'gradient-mountain':
+    'cosy:bg-gradient-to-br cosy:from-gray-400 cosy:to-blue-900',
+  'gradient-flower':
+    'cosy:bg-gradient-to-br cosy:from-pink-300 cosy:via-purple-400 cosy:to-fuchsia-500',
+  'gradient-watermelon':
+    'cosy:bg-gradient-to-br cosy:from-green-300 cosy:via-pink-400 cosy:to-red-500',
+  'gradient-lemon':
+    'cosy:bg-gradient-to-br cosy:from-yellow-200 cosy:via-yellow-400 cosy:to-yellow-600',
+  'gradient-grape':
+    'cosy:bg-gradient-to-br cosy:from-purple-400 cosy:via-indigo-500 cosy:to-purple-700',
+  'gradient-blueberry':
+    'cosy:bg-gradient-to-br cosy:from-blue-400 cosy:via-blue-600 cosy:to-indigo-700',
+  'gradient-mango':
+    'cosy:bg-gradient-to-br cosy:from-yellow-300 cosy:via-orange-400 cosy:to-orange-600',
+  'gradient-kiwi':
+    'cosy:bg-gradient-to-br cosy:from-lime-200 cosy:via-green-400 cosy:to-green-700',
+  'gradient-pitaya':
+    'cosy:bg-gradient-to-br cosy:from-pink-200 cosy:via-fuchsia-400 cosy:to-lime-300',
+  'gradient-banana':
+    'cosy:bg-gradient-to-br cosy:from-yellow-100 cosy:via-yellow-300 cosy:to-yellow-500',
+};
+
 // 确定容器类
 const containerClasses = [
   'cosy:hero',
@@ -206,8 +272,9 @@ const containerClasses = [
   'cosy:w-full',
   'cosy:relative',
   backgroundImage ? 'cosy:bg-cover cosy:bg-center' : '',
-  !backgroundImage && background === 'gradient'
-    ? 'cosy:bg-gradient-to-br cosy:from-primary/10 cosy:to-secondary/20'
+  !backgroundImage && background.startsWith('gradient')
+    ? gradientBgClassMap[background as keyof typeof gradientBgClassMap] ||
+      gradientBgClassMap['gradient']
     : '',
   !backgroundImage && background === 'plain' ? 'cosy:bg-base-100' : '',
 ].join(' ');
@@ -329,7 +396,7 @@ const contentOrder = {
 
 <div
   class={containerClasses}
-  style={backgroundImage ? `background-image: url(${backgroundImage})` : ''}
+  style={backgroundImage ? `background-image: url(${backgroundImage})` : {}}
   ignore-heading>
   {
     backgroundImage && backgroundOverlay !== 'none' && (
@@ -353,9 +420,7 @@ const contentOrder = {
         (align === 'left' ? 'cosy:text-left cosy:items-start' : '') +
         (align === 'right' ? 'cosy:text-right cosy:items-end' : '')}>
       <h2 class={titleClasses}>{title}</h2>
-      <p class={descriptionClasses}>
-        {description}
-      </p>
+      <p class={descriptionClasses}>{description}</p>
 
       {
         Astro.slots.has('app') && (
@@ -368,7 +433,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/CodeIcon.astro

@@ -0,0 +1,22 @@
+---
+// @component CodeIcon
+// @description 代码相关的图标，用于表示代码块、开发等场景
+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="code" size={size} stroke={color} 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

@@ -17,6 +17,8 @@ export { default as CheckCircle } from './CheckCircle.astro';
 export { default as CheckIcon } from './CheckIcon.astro';
 export { default as ClipboardIcon } from './ClipboardIcon.astro';
 export { default as CloseIcon } from './CloseIcon.astro';
+export { default as CodeIcon } from './CodeIcon.astro';
+export { default as DeleteIcon } from './DeleteIcon.astro';
 export { default as ErrorIcon } from './ErrorIcon.astro';
 export { default as GithubIcon } from './GithubIcon.astro';
 export { default as InfoCircle } from './InfoCircle.astro';
@@ -36,7 +38,6 @@ export { default as StarIcon } from './StarIcon.astro';
 export { default as HeartIcon } from './HeartIcon.astro';
 export { default as SaveIcon } from './SaveIcon.astro';
 export { default as EditIcon } from './EditIcon.astro';
-export { default as DeleteIcon } from './DeleteIcon.astro';
 export { default as ToolsIcon } from './ToolsIcon.astro';
 export { default as WalletIcon } from './WalletIcon.astro';
 export { default as ReportIcon } from './ReportIcon.astro';
@@ -44,4 +45,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/language-switcher/LanguageSwitcher.astro

@@ -32,16 +32,20 @@ import '../../style.ts';
 
 interface Props {
   languages: string[];
+  /**
+   * 自定义类名
+   */
+  class?: string;
 }
 
-const { languages = ['zh-cn', 'en'] } = Astro.props;
+const { languages = ['zh-cn', 'en'], class: className = '' } = Astro.props;
 
 const currentLocale = Astro.currentLocale;
 const currentLanguageName = LanguageUtil.getLanguageName(currentLocale);
 ---
 
 <!-- 语言切换按钮 -->
-<div class="cosy:dropdown cosy:dropdown-end">
+<div class={`cosy:dropdown cosy:dropdown-end ${className}`}>
   <div tabindex="0" role="button" class:list={['cosy:btn cosy:btn-ghost']}>
     <span class="cosy:mr-1">{currentLanguageName}</span>
     <ChevronDownIcon size="16px" class="cosy:w-4 cosy:h-4" />

package/dist/src-astro/link/Link.astro

@@ -85,6 +85,21 @@ interface Props extends HTMLAttributes<'a'> {
   size?: LinkSize;
   debug?: boolean;
   centerText?: boolean;
+  btn?: boolean;
+  circle?: boolean;
+  ghost?: boolean;
+  noUnderline?: boolean;
+  rounded?: boolean;
+  fullWidth?: boolean;
+  color?:
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error';
+  align?: 'left' | 'center' | 'right';
 }
 
 const {
@@ -98,13 +113,21 @@ const {
   'class:list': classList,
   debug = false,
   centerText = false,
+  btn = false,
+  circle = false,
+  ghost = false,
+  noUnderline = true,
+  rounded = false,
+  fullWidth = false,
+  color,
+  align,
   ...rest
 } = Astro.props;
 
 // 构建类名
 const classes = [
   // 基础链接样式
-  'cosy:items-center cosy:cursor-pointer cosy:no-underline cosy:transition-all cosy:duration-200',
+  'cosy:items-center cosy:cursor-pointer cosy:transition-all cosy:duration-200',
 
   // 显示方式
   block ? 'cosy:flex cosy:w-full' : 'cosy:inline-flex',
@@ -113,7 +136,7 @@ const classes = [
   variant === 'primary' && 'cosy:text-primary cosy:hover:text-primary-focus',
   variant === 'secondary' &&
     'cosy:text-secondary cosy:hover:text-secondary-focus',
-  variant === 'text' && 'cosy:text-neutral cosy:hover:text-neutral-focus',
+  variant === 'text',
   variant === 'cta' &&
     'cosy:text-accent cosy:hover:text-accent-focus cosy:font-medium',
   variant === 'ghost' &&
@@ -136,11 +159,35 @@ const classes = [
   animation === 'hover-scale' &&
     'cosy:hover:scale-105 cosy:transition-transform',
 
+  // 新增：按钮风格
+  btn && 'cosy:btn',
+  btn && size === 'sm' && 'cosy:btn-sm',
+  btn && size === 'lg' && 'cosy:btn-lg',
+  btn && ghost && 'cosy:btn-ghost',
+  btn && color && `cosy:btn-${color}`,
+  btn && fullWidth && 'cosy:btn-block',
+  btn && circle && 'cosy:btn-circle',
+  btn && rounded && 'cosy:rounded-full',
+
+  // 非按钮风格下的圆角
+  !btn && rounded && 'cosy:rounded',
+
+  // 非按钮风格下的无下划线
+  !btn && noUnderline && 'cosy:no-underline cosy:hover:no-underline',
+
+  // 宽度100%
+  fullWidth && !btn && 'cosy:w-full',
+
+  // 对齐
+  align === 'center' && 'cosy:justify-center cosy:text-center',
+  align === 'right' && 'cosy:justify-end cosy:text-right',
+  align === 'left' && 'cosy:justify-start cosy:text-left',
+
   // 自定义类名
   className,
 ];
 
-// 文本居中样式
+// 文本居中样式（兼容旧用法）
 if (centerText) {
   classes.push('cosy:justify-center cosy:text-center');
 }

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 };