@coffic/cosy-ui 0.7.4 → 0.8.6

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

@@ -0,0 +1,24 @@
+---
+/**
+ * @component Footer.WithProducts
+ *
+ * @description
+ * 展示带有产品链接的页脚示例。
+ */
+import { Footer } from '../../index-astro';
+---
+
+<Footer
+  siteName="我的网站"
+  homeLink="/"
+  slogan="简单而强大"
+  company="我的公司"
+  copyright="保留所有权利"
+  inspirationalSlogan="构建美好的数字体验"
+  products={[
+    { name: '产品A', href: '/products/a' },
+    { name: '产品B', href: '/products/b' },
+    { name: '产品C', href: '/products/c' },
+    { name: '外部产品', href: 'https://example.com', external: true },
+  ]}
+/>

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

@@ -0,0 +1,11 @@
+---
+import { CodeContainer } from '../../index-astro';
+import FooterWithProducts from './EFooterWithProducts.astro';
+import FooterWithProductsSourceCode from './EFooterWithProducts.astro?raw';
+---
+
+<CodeContainer codes={[FooterWithProductsSourceCode]}>
+  <div id="tab-1">
+    <FooterWithProducts />
+  </div>
+</CodeContainer>

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

@@ -0,0 +1,24 @@
+---
+/**
+ * @component Footer.WithSocial
+ *
+ * @description
+ * 展示带有社交媒体链接的页脚示例。
+ */
+import { Footer } from '../../index-astro';
+---
+
+<Footer
+  siteName="我的网站"
+  homeLink="/"
+  slogan="简单而强大"
+  company="我的公司"
+  copyright="保留所有权利"
+  inspirationalSlogan="构建美好的数字体验"
+  socialLinks={[
+    'https://github.com/myusername',
+    'https://twitter.com/myusername',
+    'https://linkedin.com/in/myusername',
+    'https://facebook.com/myusername',
+  ]}
+/>

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

@@ -0,0 +1,11 @@
+---
+import { CodeContainer } from '../../index-astro';
+import FooterWithSocial from './EFooterWithSocial.astro';
+import FooterWithSocialSourceCode from './EFooterWithSocial.astro?raw';
+---
+
+<CodeContainer codes={[FooterWithSocialSourceCode]}>
+  <div id="tab-1">
+    <FooterWithSocial />
+  </div>
+</CodeContainer>

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

@@ -0,0 +1,351 @@
+---
+/**
+ * @component Footer
+ *
+ * @description
+ * Footer 组件用于创建网站的页脚部分，提供版权信息、导航链接和社交媒体链接等内容。
+ * 该组件支持高度自定义，可以根据需要显示或隐藏不同的部分。
+ *
+ * @design
+ * 设计理念：
+ * 1. 清晰的信息层次 - 通过视觉层次和分组展示不同类别的页脚信息
+ * 2. 响应式布局 - 在不同屏幕尺寸下保持良好的可用性和美观性
+ * 3. 可定制性 - 支持多种配置选项，适应不同网站的需求
+ * 4. 品牌一致性 - 与网站整体设计风格保持一致
+ * 5. 多语言支持 - 支持多种语言显示，自动检测当前语言环境
+ *
+ * 视觉特点：
+ * - 分区布局：清晰区分不同类别的信息
+ * - 简洁设计：使用适当的间距和字体大小确保可读性
+ * - 品牌展示：突出显示网站名称和标语
+ * - 社交媒体整合：提供社交媒体链接的展示
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Footer
+ *   siteName="我的网站"
+ *   homeLink="/"
+ *   slogan="简单而强大"
+ *   company="我的公司"
+ *   copyright="保留所有权利"
+ *   inspirationalSlogan="构建美好的数字体验"
+ * />
+ * ```
+ *
+ * 添加社交媒体链接：
+ * ```astro
+ * <Footer
+ *   siteName="我的网站"
+ *   homeLink="/"
+ *   slogan="简单而强大"
+ *   company="我的公司"
+ *   copyright="保留所有权利"
+ *   inspirationalSlogan="构建美好的数字体验"
+ *   socialLinks={[
+ *     "https://github.com/myusername",
+ *     "https://twitter.com/myusername"
+ *   ]}
+ * />
+ * ```
+ *
+ * 添加产品链接：
+ * ```astro
+ * <Footer
+ *   siteName="我的网站"
+ *   homeLink="/"
+ *   slogan="简单而强大"
+ *   company="我的公司"
+ *   copyright="保留所有权利"
+ *   inspirationalSlogan="构建美好的数字体验"
+ *   products={[
+ *     { name: "产品A", href: "/products/a" },
+ *     { name: "产品B", href: "/products/b" }
+ *   ]}
+ * />
+ * ```
+ *
+ * 完整示例：
+ * ```astro
+ * <Footer
+ *   siteName="我的网站"
+ *   homeLink="/"
+ *   slogan="简单而强大"
+ *   company="我的公司"
+ *   copyright="保留所有权利"
+ *   inspirationalSlogan="构建美好的数字体验"
+ *   logo={{ src: "/logo.png", alt: "网站Logo" }}
+ *   products={[
+ *     { name: "产品A", href: "/products/a" },
+ *     { name: "产品B", href: "/products/b" }
+ *   ]}
+ *   socialLinks={[
+ *     "https://github.com/myusername",
+ *     "https://twitter.com/myusername"
+ *   ]}
+ *   aboutLink="/about"
+ *   contactLink="/contact"
+ *   termsLink="/terms"
+ *   privacyLink="/privacy"
+ * />
+ * ```
+ *
+ * 指定语言：
+ * ```astro
+ * <Footer
+ *   siteName="My Website"
+ *   homeLink="/"
+ *   slogan="Simple and Powerful"
+ *   company="My Company"
+ *   copyright="All Rights Reserved"
+ *   lang="en"
+ * />
+ * ```
+ *
+ * 启用日志：
+ * ```astro
+ * <Footer
+ *   siteName="我的网站"
+ *   homeLink="/"
+ *   enableLogging={true}
+ * />
+ * ```
+ *
+ * @props
+ * @prop {string} siteName - 网站名称
+ * @prop {string} homeLink - 首页链接
+ * @prop {string} slogan - 网站标语
+ * @prop {string} company - 公司名称
+ * @prop {string} copyright - 版权信息
+ * @prop {string} inspirationalSlogan - 鼓舞人心的标语，显示在横幅中
+ * @prop {string} [icp] - ICP备案号（中国网站需要）
+ * @prop {Object} [logo] - 网站Logo对象，包含src和alt属性
+ * @prop {Array<Object>} [products=[]] - 产品链接数组，每个对象包含name、href和可选的external属性
+ * @prop {string} [aboutLink] - "关于我们"页面链接
+ * @prop {string} [contactLink] - "联系我们"页面链接
+ * @prop {string} [termsLink] - "服务条款"页面链接
+ * @prop {string} [privacyLink] - "隐私政策"页面链接
+ * @prop {Array<string>} [socialLinks=[]] - 社交媒体链接数组
+ * @prop {string} [teamLink] - "团队介绍"页面链接
+ * @prop {string} [careersLink] - "加入我们"页面链接
+ * @prop {string} [newsLink] - "新闻动态"页面链接
+ * @prop {string} [historyLink] - "发展历程"页面链接
+ * @prop {string} [partnersLink] - "合作伙伴"页面链接
+ * @prop {string} [blogLink] - "技术博客"页面链接
+ * @prop {string} [faqLink] - "常见问题"页面链接
+ * @prop {string} [mediaLink] - "媒体报道"页面链接
+ * @prop {string} [techStackLink] - "技术栈"页面链接
+ * @prop {boolean} [debug=false] - 调试模式
+ * @prop {string} [lang] - 语言代码，默认自动检测
+ * @prop {boolean} [enableLogging=false] - 是否启用日志输出
+ *
+ * @accessibility
+ * - 使用语义化HTML结构，确保屏幕阅读器可以正确解析
+ * - 所有链接都有明确的文本描述
+ * - 社交媒体图标包含屏幕阅读器专用的文本说明
+ */
+
+import { processSocialLink } from '../utils/social.ts';
+import {
+  SocialIcon,
+  LanguageUtil,
+  type IFooterProps,
+  createTextGetter,
+} from '../../index-astro';
+import FooterSection from './FooterSection.astro';
+import '../../style.ts';
+
+const {
+  siteName,
+  homeLink,
+  slogan,
+  company,
+  copyright,
+  inspirationalSlogan,
+  icp,
+  logo,
+  products = [],
+  aboutLink,
+  contactLink,
+  termsLink,
+  privacyLink,
+  socialLinks = [],
+  teamLink,
+  careersLink,
+  newsLink,
+  historyLink,
+  partnersLink,
+  blogLink,
+  faqLink,
+  mediaLink,
+  techStackLink,
+  debug = false,
+} = Astro.props as IFooterProps;
+
+// 获取当前语言
+const lang = LanguageUtil.getCurrentLanguage(Astro);
+// 创建文本获取函数
+const t = createTextGetter(lang, 'footer');
+
+const currentYear = new Date().getFullYear();
+
+// 处理社交链接
+const processedSocialLinks = socialLinks.map((url) => processSocialLink(url));
+
+// 调试模式的样式类
+const debugClasses = debug
+  ? {
+      footer: 'cosy:border-2 cosy:border-blue-500',
+      section: 'cosy:border-2 cosy:border-green-500',
+      nav: 'cosy:border-2 cosy:border-yellow-500',
+      aside: 'cosy:border-2 cosy:border-purple-500',
+    }
+  : {
+      footer: '',
+      section: '',
+      nav: '',
+      aside: '',
+    };
+---
+
+<footer
+  class:list={[
+    'cosy:footer cosy:z-50 cosy:sm:footer-horizontal cosy:bg-base-200 cosy:text-base-content cosy:p-10',
+    debugClasses.footer,
+  ]}>
+  <div
+    class:list={[
+      'cosy:flex cosy:flex-col cosy:md:h-56 cosy:gap-8 cosy:container cosy:mx-auto cosy:items-center cosy:w-full cosy:md:flex-row cosy:md:justify-between',
+      debugClasses.section,
+    ]}>
+    {/* 品牌区域 */}
+    <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">
+        {
+          logo && (
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              class="cosy:w-12 cosy:h-12 cosy:mask cosy:mask-squircle"
+              width="48"
+              height="48"
+            />
+          )
+        }
+        <div>
+          <h2 class="cosy:font-bold cosy:text-xl">{siteName}</h2>
+          <p class="cosy:text-base-content/70">{slogan}</p>
+        </div>
+      </a>
+
+      {/* 社交媒体链接 */}
+      {
+        processedSocialLinks.length > 0 && (
+          <div class="cosy:flex cosy:justify-center cosy:gap-2 cosy:mt-4">
+            {processedSocialLinks.map((link) => (
+              <a
+                href={link.url}
+                class="cosy:btn cosy:btn-circle cosy:btn-ghost cosy:btn-sm"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={link.name}>
+                <SocialIcon platform={link.platform} />
+              </a>
+            ))}
+          </div>
+        )
+      }
+    </aside>
+
+    {/* 导航区域 */}
+    <div
+      class:list={[
+        'cosy:flex cosy:h-full cosy:flex-col cosy:justify-center cosy:gap-8 cosy:mx-auto cosy:max-w-xl cosy:text-center cosy:items-center cosy:w-full cosy:md:flex-row cosy:md:justify-between cosy:md:items-start',
+        debugClasses.section,
+      ]}>
+      {/* 产品导航 */}
+      {
+        products.length > 0 && (
+          <FooterSection title={t('products')} links={products} />
+        )
+      }
+
+      {/* 关于导航 */}
+      {
+        (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 },
+            ].filter((link) => link.href)}
+          />
+        )
+      }
+
+      {/* 资源导航 */}
+      {
+        (newsLink ||
+          historyLink ||
+          partnersLink ||
+          blogLink ||
+          faqLink ||
+          mediaLink ||
+          techStackLink) && (
+          <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 },
+            ].filter((link) => link.href)}
+          />
+        )
+      }
+
+      {/* 法律导航 */}
+      {
+        (termsLink || privacyLink) && (
+          <FooterSection
+            title={t('legal')}
+            links={[
+              { name: t('terms'), href: termsLink },
+              { name: t('privacy'), href: privacyLink },
+            ].filter((link) => link.href)}
+          />
+        )
+      }
+    </div>
+  </div>
+</footer>
+
+{/* 横幅 */}
+{
+  inspirationalSlogan && (
+    <aside class:list={['cosy:p-4 cosy:w-full', debugClasses.aside]}>
+      <p class="cosy:text-center">{inspirationalSlogan}</p>
+    </aside>
+  )
+}
+
+{/* 底部版权信息 */}
+<div
+  class:list={[
+    'cosy:footer cosy:footer-center cosy:p-4 cosy:bg-base-300 cosy:text-base-content',
+    debugClasses.footer,
+  ]}>
+  <aside
+    class:list={['cosy:items-center cosy:grid-flow-col', debugClasses.aside]}>
+    <p class="cosy:opacity-70 cosy:text-sm">
+      © {currentYear}
+      {company} - {copyright || t('allRightsReserved')}
+    </p>
+    {icp && <p class="cosy:opacity-70 cosy:ml-4 cosy:text-sm">{icp}</p>}
+  </aside>
+</div>

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

@@ -0,0 +1,49 @@
+---
+/**
+ * @component FooterSection
+ *
+ * @description
+ * FooterSection 组件用于在页脚中显示一组链接，通常用于导航、产品列表等。
+ */
+
+interface Link {
+  name: string;
+  href?: string;
+}
+
+interface Props {
+  /**
+   * 区块标题
+   */
+  title: string;
+
+  /**
+   * 链接列表
+   */
+  links: Link[];
+}
+
+const { title, links } = Astro.props;
+---
+
+<nav class="cosy:flex cosy:flex-col cosy:gap-2">
+  <h6 class="cosy:footer-title">{title}</h6>
+  <ul class="cosy:flex cosy:flex-col cosy:gap-2">
+    {
+      links.map((link) => (
+        <li class="cosy:list-none">
+          {link.href ? (
+            <a
+              href={link.href}
+              class="cosy:link cosy:link-hover cosy:no-underline cosy:hover:no-underline"
+            >
+              {link.name}
+            </a>
+          ) : (
+            <span class="cosy:opacity-50">{link.name}</span>
+          )}
+        </li>
+      ))
+    }
+  </ul>
+</nav>

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

@@ -0,0 +1,31 @@
+import Footer from './Footer.astro';
+import FooterBasicContainer from './EFooterBasicContainer.astro';
+import FooterWithSocialContainer from './EFooterWithSocialContainer.astro';
+import FooterWithProductsContainer from './EFooterWithProductsContainer.astro';
+import FooterWithLogoContainer from './EFooterWithLogoContainer.astro';
+import FooterWithNavigationContainer from './EFooterWithNavigationContainer.astro';
+import FooterCompleteContainer from './EFooterCompleteContainer.astro';
+import FooterFeaturesContainer from './EFooterFeaturesContainer.astro';
+import EFooterBasicSourceCode from './EFooterBasic.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { default as Footer } from './Footer.astro';
+
+// 导出示例源代码
+export const FooterExampleCodes = {
+  Basic: extractSimpleExample(EFooterBasicSourceCode, 'Footer'),
+};
+
+// 导出页脚包
+export const FooterPackage = {
+  Footer,
+  FooterContainers: {
+    Basic: FooterBasicContainer,
+    WithSocial: FooterWithSocialContainer,
+    WithProducts: FooterWithProductsContainer,
+    WithLogo: FooterWithLogoContainer,
+    WithNavigation: FooterWithNavigationContainer,
+    Complete: FooterCompleteContainer,
+    Features: FooterFeaturesContainer,
+  },
+};

package/dist/src-astro/grid/Grid.astro

@@ -0,0 +1,190 @@
+---
+/**
+ * @component Grid
+ *
+ * @description
+ * Grid 组件是一个灵活的网格布局组件，用于创建响应式的多列布局。
+ * 它封装了 CSS Grid 的常用功能，提供简单易用的接口来控制网格的列数和间距。
+ *
+ * @design
+ * 设计理念：
+ * 1. 简单易用 - 通过简洁的 API 控制复杂的 Grid 布局
+ * 2. 响应式优先 - 内置响应式断点，轻松创建适应不同屏幕尺寸的布局
+ * 3. 灵活可配置 - 支持自定义列数和间距
+ * 4. 语义化属性 - 使用直观的属性名称，降低学习成本
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Grid cols={3} gap="md">
+ *   <div>第一列</div>
+ *   <div>第二列</div>
+ *   <div>第三列</div>
+ * </Grid>
+ * ```
+ *
+ * 响应式网格：
+ * ```astro
+ * <Grid cols={{base: 1, md: 2, lg: 3}} gap="lg">
+ *   <div>响应式网格</div>
+ *   <div>在不同屏幕尺寸下</div>
+ *   <div>显示不同的列数</div>
+ * </Grid>
+ * ```
+ *
+ * 自定义行列间距：
+ * ```astro
+ * <Grid cols={2} rowGap="lg" colGap="sm">
+ *   <div>行间距大</div>
+ *   <div>列间距小</div>
+ *   <div>第三项</div>
+ *   <div>第四项</div>
+ * </Grid>
+ * ```
+ *
+ * @props
+ * @prop {number | Object} [cols=1] - 网格列数，可以是固定值或响应式对象
+ * @prop {string} [gap="md"] - 网格间距，可选值：none, xs, sm, md, lg, xl
+ * @prop {string} [rowGap] - 行间距，默认与 gap 相同
+ * @prop {string} [colGap] - 列间距，默认与 gap 相同
+ * @prop {string} [class] - 自定义类名
+ * @prop {any} [class:list] - 类名列表
+ */
+
+// 导入样式
+import '../../style.ts';
+
+import type { HTMLAttributes } from 'astro/types';
+
+type GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type Breakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+type ResponsiveValue<T> =
+  | T
+  | {
+      base?: T;
+      sm?: T;
+      md?: T;
+      lg?: T;
+      xl?: T;
+      '2xl'?: T;
+    };
+
+interface Props extends HTMLAttributes<'div'> {
+  /**
+   * 网格列数，可以是固定值或响应式对象
+   * @default 1
+   */
+  cols?: ResponsiveValue<number>;
+
+  /**
+   * 网格间距
+   * @default "md"
+   */
+  gap?: GapSize;
+
+  /**
+   * 行间距，默认与gap相同
+   */
+  rowGap?: GapSize;
+
+  /**
+   * 列间距，默认与gap相同
+   */
+  colGap?: GapSize;
+
+  /**
+   * 自定义类名
+   */
+  class?: string;
+
+  /**
+   * 类名列表
+   */
+  'class:list'?: any;
+}
+
+const {
+  cols = 1,
+  gap = 'md',
+  rowGap,
+  colGap,
+  class: className = '',
+  'class:list': classList,
+  ...rest
+} = Astro.props;
+
+// 处理响应式列数
+const getColsClasses = (cols: ResponsiveValue<number>) => {
+  if (typeof cols === 'number') {
+    return `cosy:grid-cols-${cols}`;
+  }
+
+  const breakpoints: Record<Breakpoint, string> = {
+    base: '',
+    sm: 'sm:',
+    md: 'md:',
+    lg: 'lg:',
+    xl: 'xl:',
+    '2xl': '2xl:',
+  };
+
+  return Object.entries(cols)
+    .map(([breakpoint, value]) => {
+      if (breakpoint === 'base') {
+        return `cosy:grid-cols-${value}`;
+      }
+      return `cosy:${breakpoints[breakpoint as Breakpoint]}grid-cols-${value}`;
+    })
+    .join(' ');
+};
+
+// 间距映射
+const gapClasses: Record<GapSize, string> = {
+  none: 'cosy:gap-0',
+  xs: 'cosy:gap-2',
+  sm: 'cosy:gap-4',
+  md: 'cosy:gap-6',
+  lg: 'cosy:gap-8',
+  xl: 'cosy:gap-12',
+};
+
+// 行间距映射
+const rowGapClasses: Record<GapSize, string> = {
+  none: 'cosy:row-gap-0',
+  xs: 'cosy:row-gap-2',
+  sm: 'cosy:row-gap-4',
+  md: 'cosy:row-gap-6',
+  lg: 'cosy:row-gap-8',
+  xl: 'cosy:row-gap-12',
+};
+
+// 列间距映射
+const colGapClasses: Record<GapSize, string> = {
+  none: 'cosy:col-gap-0',
+  xs: 'cosy:col-gap-2',
+  sm: 'cosy:col-gap-4',
+  md: 'cosy:col-gap-6',
+  lg: 'cosy:col-gap-8',
+  xl: 'cosy:col-gap-12',
+};
+
+// 构建最终类名
+const gridClasses = [
+  'cosy:grid',
+  getColsClasses(cols),
+  rowGap
+    ? rowGapClasses[rowGap as GapSize]
+    : colGap
+      ? gapClasses[gap as GapSize]
+      : gapClasses[gap as GapSize],
+  colGap ? colGapClasses[colGap as GapSize] : null,
+  className,
+]
+  .filter(Boolean)
+  .join(' ');
+---
+
+<div class:list={[gridClasses, classList]} {...rest}>
+  <slot />
+</div>