@coffic/cosy-ui 0.8.21 → 0.8.23

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

@@ -0,0 +1,14 @@
+---
+interface Props {
+  code: string;
+}
+const { code = '' } = Astro.props;
+---
+
+<div class="cosy:hidden cosy:code-example-panel" data-panel="code">
+  <pre
+    class="cosy:overflow-x-auto"
+    style="margin:0">
+    <code class="cosy:language-astro">{code}</code>
+  </pre>
+</div>

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

@@ -0,0 +1,100 @@
+---
+import CodeToggleButton from './ButtonCodeToggle.astro';
+import CopyCodeButton from './ButtonCopyCode.astro';
+
+interface Props {
+  titles: string[];
+  activeTab: number;
+  isCodeView: boolean;
+  code: string;
+}
+
+const {
+  titles = [],
+  activeTab = 0,
+  isCodeView = false,
+  code = '',
+} = Astro.props;
+---
+
+<div
+  class="cosy:flex cosy:justify-between cosy:items-center cosy:bg-base-200 cosy:px-4 cosy:rounded-t">
+  <!-- 标签 -->
+  <div class="cosy:flex cosy:items-center cosy:gap-4">
+    <div role="tablist" class="cosy:tabs cosy:tabs-box">
+      {
+        titles.map((title: string, index: number) => (
+          <button
+            role="tab"
+            class={`cosy:tab ${index === activeTab ? 'cosy:tab-active' : ''}`}
+            data-tab={`tab-${index + 1}`}>
+            {title || `示例 ${index + 1}`}
+          </button>
+        ))
+      }
+    </div>
+  </div>
+  <!-- 工具按钮 -->
+  <div class="cosy:flex cosy:items-center cosy:gap-2">
+    <CodeToggleButton isCodeView={isCodeView} />
+    <CopyCodeButton code={code} />
+  </div>
+</div>
+
+<script>
+  function initializeTab() {
+    console.log('CodeContainer: 初始化标签切换按钮');
+
+    const exampleTabs = document.querySelectorAll(
+      '[role="tab"][data-tab^="tab-"]'
+    );
+    exampleTabs.forEach((tab) => {
+      tab.addEventListener('click', () => {
+        console.log('CodeContainer: 切换示例', tab.getAttribute('data-tab'));
+        const container = tab.closest('[data-role="code-container"]');
+        if (!container) return;
+
+        // 更新标签状态
+        container
+          .querySelectorAll('[role="tab"][data-tab^="tab-"]')
+          .forEach((t) => {
+            t.classList.remove('cosy:tab-active');
+          });
+        tab.classList.add('cosy:tab-active');
+
+        // 获取当前标签对应的内容 id
+        const targetId = tab.getAttribute('data-tab');
+        if (!targetId) return;
+
+        // 切换示例容器
+        container
+          .querySelectorAll('.cosy\\:example-container')
+          .forEach((example) => {
+            if (example.getAttribute('data-example') === targetId) {
+              example.classList.remove('cosy:hidden');
+              example.classList.add('cosy:block');
+            } else {
+              example.classList.add('cosy:hidden');
+              example.classList.remove('cosy:block');
+            }
+          });
+
+        // 更新对应内容的可见性
+        const allContent = container.querySelectorAll('[id^="tab-"]');
+        allContent.forEach((content) => {
+          if (content.id === targetId) {
+            content.classList.remove('cosy:hidden');
+            content.classList.add('cosy:block');
+          } else {
+            content.classList.add('cosy:hidden');
+            content.classList.remove('cosy:block');
+          }
+        });
+      });
+    });
+  }
+
+  document.addEventListener('astro:page-load', () => {
+    initializeTab();
+  });
+</script>

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

@@ -0,0 +1,17 @@
+---
+interface Props {
+  text: string;
+}
+const { text = '' } = Astro.props;
+---
+
+{
+  text && (
+    <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">
+      {text}
+    </p>
+  )
+}

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

@@ -0,0 +1,93 @@
+---
+// 预览组件，渲染slot内容
+---
+
+<div class="cosy:code-example-panel cosy:block" data-panel="preview">
+  <slot />
+</div>
+
+<!-- 样式隔离和重置 -->
+<style>
+  /* 预览区域样式重置，防止外部样式影响内部组件 */
+  [data-role='code-container'] .cosy\:reset-styles {
+    /* 重置所有可能影响布局的样式 */
+    all: initial;
+    font-family: inherit;
+    color: inherit;
+    line-height: 1.5;
+
+    /* 恢复必要的基础样式 */
+    display: block;
+    box-sizing: border-box;
+
+    /* 隔离样式作用域 */
+    isolation: isolate;
+    contain: layout style;
+  }
+
+  /* 重置内部所有元素的样式 */
+  [data-role='code-container'] .cosy\:reset-styles * {
+    all: unset;
+    display: revert;
+    box-sizing: border-box;
+  }
+
+  /* 恢复必要的文本样式 */
+  [data-role='code-container'] .cosy\:reset-styles {
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Arial,
+      sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    color: #374151;
+  }
+
+  /* 恢复基本的HTML元素样式 */
+  [data-role='code-container'] .cosy\:reset-styles h1,
+  [data-role='code-container'] .cosy\:reset-styles h2,
+  [data-role='code-container'] .cosy\:reset-styles h3,
+  [data-role='code-container'] .cosy\:reset-styles h4,
+  [data-role='code-container'] .cosy\:reset-styles h5,
+  [data-role='code-container'] .cosy\:reset-styles h6 {
+    font-weight: bold;
+    margin-bottom: 0.5em;
+  }
+
+  [data-role='code-container'] .cosy\:reset-styles p {
+    margin-bottom: 1em;
+  }
+
+  [data-role='code-container'] .cosy\:reset-styles ul,
+  [data-role='code-container'] .cosy\:reset-styles ol {
+    padding-left: 1.5em;
+    margin-bottom: 1em;
+  }
+
+  [data-role='code-container'] .cosy\:reset-styles li {
+    margin-bottom: 0.25em;
+  }
+
+  /* 防止内部组件的样式泄漏到外部 */
+  [data-role='code-container'] .cosy\:code-preview-area {
+    position: relative;
+    z-index: 0;
+  }
+
+  /* 确保预览区域的样式隔离 */
+  [data-role='code-container'] .cosy\:code-preview-area::before {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+    pointer-events: none;
+    z-index: -1;
+  }
+</style>

package/dist/src-astro/code-panel/CodePanel.astro

@@ -0,0 +1,109 @@
+---
+/**
+ * @component CodePanel
+ *
+ * @description
+ * 代码展示面板组件，支持语法高亮、多主题切换和行号显示。
+ * 基于 Shiki 提供高质量的代码高亮效果，与 VS Code 保持一致的渲染效果。
+ * 支持服务端渲染，无需客户端 JavaScript 即可展示代码高亮。
+ *
+ * @features
+ * - 🎨 语法高亮：基于 Shiki，支持 180+ 编程语言
+ * - 🎭 多主题：支持 VS Code 主题（dark-plus、light-plus、github-dark 等）
+ * - 📏 行号显示：可选的行号显示功能
+ * - 🚀 性能优化：服务端渲染，避免客户端重复计算
+ * - 📱 响应式：自适应不同屏幕尺寸
+ * - 🎯 可访问性：语义化 HTML 结构，支持键盘导航
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <CodePanel code="console.log('Hello, world!');" />
+ * ```
+ *
+ * 指定语言和主题：
+ * ```astro
+ * <CodePanel
+ *   code="const name = 'TypeScript';"
+ *   language="typescript"
+ *   theme="github-dark"
+ *   showLineNumbers={true}
+ * />
+ * ```
+ *
+ * 在切换面板中使用：
+ * ```astro
+ * <CodePanel
+ *   code={sourceCode}
+ *   language="astro"
+ *   visible={false}
+ * />
+ * ```
+ *
+ * @props
+ * @param {string} code - 要显示的代码字符串
+ * @param {string} [language="typescript"] - 代码语言，用于语法高亮
+ * @param {string} [theme="dark-plus"] - 主题名称
+ * @param {boolean} [showLineNumbers=false] - 是否显示行号
+ * @param {boolean} [visible=true] - 是否显示在面板中
+ * @param {string} [class] - 自定义类名
+ *
+ * @slots
+ * 此组件不包含插槽，通过 props 传入代码内容
+ *
+ * @accessibility
+ * - 使用语义化的 HTML 结构
+ * - 代码区域具有适当的 aria 标签
+ * - 支持键盘导航和屏幕阅读器
+ * - 高对比度主题支持
+ */
+import type { CodePanelProps } from './types';
+import '../../style.ts';
+
+interface Props extends CodePanelProps {}
+
+const {
+  code = '',
+  language = 'typescript',
+  theme = 'dark-plus',
+  showLineNumbers = false,
+  visible = true,
+  class: className = '',
+} = Astro.props;
+
+// 优化 Shiki 加载 - 使用动态导入避免构建时创建多个实例
+let highlightedCode = code;
+try {
+  // 使用动态导入避免构建时的性能问题
+  const { createHighlighter } = await import('shiki');
+
+  const highlighter = await createHighlighter({
+    themes: [theme],
+    langs: [language],
+  });
+
+  highlightedCode = highlighter.codeToHtml(code, {
+    lang: language,
+    theme: theme,
+    transformers: [],
+  });
+
+  // 释放资源
+  highlighter.dispose?.();
+} catch (error) {
+  console.warn(
+    'CodePanel: Shiki highlighting failed, falling back to plain text:',
+    error
+  );
+  // 降级到普通代码块
+  highlightedCode = `<pre><code>${code}</code></pre>`;
+}
+---
+
+<div data-panel="code" role="region" aria-label="代码展示面板">
+  <!-- Shiki 渲染的代码 -->
+  <div
+    class="cosy:w-full not-prose cosy-shiki-container"
+    set:html={highlightedCode}
+  />
+</div>

package/dist/src-astro/code-panel/index.ts

@@ -0,0 +1,2 @@
+export { default as CodePanel } from './CodePanel.astro';
+export type { CodePanelProps } from './types'; 

package/dist/src-astro/code-panel/types.ts

@@ -0,0 +1,17 @@
+/**
+ * CodePanel 组件的属性接口
+ */
+export interface CodePanelProps {
+    /** 要显示的代码字符串 */
+    code: string;
+    /** 代码语言，用于语法高亮，默认 'typescript' */
+    language?: string;
+    /** 主题名称，默认 'dark-plus' */
+    theme?: 'dark-plus' | 'light-plus' | 'github-dark' | 'github-light' | 'nord' | 'dracula';
+    /** 是否显示行号，默认 false */
+    showLineNumbers?: boolean;
+    /** 是否显示在面板中（用于切换），默认 true */
+    visible?: boolean;
+    /** 自定义类名 */
+    class?: string;
+} 

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

@@ -172,6 +172,7 @@ import {
   LanguageUtil,
   type IFooterProps,
   createTextGetter,
+  Link,
 } from '../../index-astro';
 import FooterSection from './FooterSection.astro';
 import '../../style.ts';
@@ -242,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
@@ -260,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>
         )
@@ -307,10 +310,10 @@ const debugClasses = debug
           <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)}
           />
         )
@@ -328,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)}
           />
         )
@@ -344,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)}
           />
         )
@@ -366,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
@@ -176,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;
@@ -200,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',
@@ -207,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(' ');
@@ -330,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' && (
@@ -354,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') && (

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