@coffic/cosy-ui 0.8.21 → 0.8.22

package/dist/src/assets/iconData.ts

@@ -230,4 +230,8 @@ export const iconData: Record<string, IconData> = {
         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-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;
@@ -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>

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

@@ -34,7 +34,10 @@
  * ```
  */
 
-import { ClipboardIcon, CheckIcon, InfoIcon } from '../../index-astro';
+import CodeToolbar from './CodeToolbar.astro';
+import Description from './Description.astro';
+import Preview from './Preview.astro';
+import CodePanel from './CodePanel.astro';
 import '../../style.ts';
 
 interface Props {
@@ -66,318 +69,40 @@ const {
 ---
 
 <div data-role="code-container" class="cosy:mb-8 cosy:card" ignore-heading>
-  <!-- 工具栏 -->
-  <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">
-        {
-          codes.map((_, index) => (
-            <button
-              role="tab"
-              class={`cosy:tab ${index === 0 ? 'cosy:tab-active' : ''}`}
-              data-tab={`tab-${index + 1}`}>
-              {titles[index] || `示例 ${index + 1}`}
-            </button>
-          ))
-        }
-      </div>
-    </div>
-
-    <!-- 工具按钮 -->
-    <div class="cosy:flex cosy:items-center cosy:gap-2">
-      <button
-        role="switch"
-        class="cosy:btn cosy:btn-ghost cosy:btn-sm"
-        aria-checked="false"
-        aria-label="切换代码/预览"
-        data-toggle="code">
-        <span class="cosy:code-icon"><InfoIcon /></span>
-      </button>
-      <button
-        class="cosy:gap-2 cosy:btn cosy:btn-ghost cosy:btn-sm"
-        aria-label="复制代码">
-        <span class="cosy:copy-icon"><ClipboardIcon /></span>
-        <span class="cosy:hidden cosy:check-icon"><CheckIcon /></span>
-      </button>
-    </div>
-  </div>
+  <CodeToolbar
+    titles={titles.length ? titles : codes.map((_, i) => `示例 ${i + 1}`)}
+    activeTab={0}
+    isCodeView={false}
+    code={codes[0]}
+  />
 
   {
     codes.map((code, index) => (
       <div
         class={`cosy:example-container ${index === 0 ? 'cosy:block' : 'cosy:hidden'}`}
         data-example={`tab-${index + 1}`}>
-        {/* 描述 */}
-        {descriptions[index] && (
-          <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>
-        )}
+        <Description text={descriptions[index]} />
 
         <div class="cosy:relative cosy:p-4 cosy:bg-gradient-to-br cosy:from-red-100 cosy:to-green-300 cosy:dark:from-red-900/20 cosy:dark:to-green-900/20 cosy:rounded-b">
-          <div class="cosy:block cosy:code-example-panel" data-panel="preview">
+          <Preview>
             <div
               class={`cosy:code-preview-area ${resetStyles ? 'cosy:reset-styles' : ''}`}
               data-preview-area={`tab-${index + 1}`}>
               <slot />
             </div>
-          </div>
+          </Preview>
 
-          <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>
+          <CodePanel code={code} />
         </div>
       </div>
     ))
   }
 </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>
-
 <script>
   function initializeCodeContainer() {
     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');
-          }
-        });
-      });
-    });
-
-    // 代码开关功能
-    const codeToggles = document.querySelectorAll('[data-toggle="code"]');
-    codeToggles.forEach((toggle) => {
-      toggle.addEventListener('click', () => {
-        console.log('code toggle clicked', toggle);
-        const container = toggle.closest('[data-role="code-container"]');
-        if (!container) {
-          console.error('CodeContainer: 无法找到父容器');
-          return;
-        }
-
-        // 切换开关状态
-        const isChecked = toggle.getAttribute('aria-checked') === 'true';
-        console.log('代码按钮 isChecked:', isChecked);
-        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') {
-              console.log(
-                '处理代码面板的展示/隐藏，此时的isChecked:',
-                isChecked
-              );
-              panel.classList.toggle('cosy:hidden', isChecked);
-              panel.classList.toggle('cosy:block', !isChecked);
-            } else {
-              console.log(
-                '处理预览面板的展示/隐藏，此时的isChecked:',
-                isChecked
-              );
-              panel.classList.toggle('cosy:hidden', !isChecked);
-              panel.classList.toggle('cosy:block', isChecked);
-            }
-          });
-      });
-    });
-
-    // 复制代码功能
-    const copyButtons = document.querySelectorAll('[aria-label="复制代码"]');
-    copyButtons.forEach((button) => {
-      button.addEventListener('click', () => {
-        const container = button.closest('[data-role="code-container"]');
-        if (!container) return;
-
-        // 确保代码面板是显示的
-        const codeToggle = container.querySelector('[data-toggle="code"]');
-        if (codeToggle?.getAttribute('aria-checked') !== 'true') {
-          (codeToggle as HTMLElement)?.click();
-        }
-
-        // 找到当前显示的示例
-        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(() => {
-          button.classList.add('cosy:btn-success');
-          button
-            .querySelector('.cosy\\:copy-icon')
-            ?.classList.add('cosy:hidden');
-          button
-            .querySelector('.cosy\\:check-icon')
-            ?.classList.remove('cosy:hidden');
-
-          setTimeout(() => {
-            button.classList.remove('cosy:btn-success');
-            button
-              .querySelector('.cosy\\:copy-icon')
-              ?.classList.remove('cosy:hidden');
-            button
-              .querySelector('.cosy\\:check-icon')
-              ?.classList.add('cosy:hidden');
-          }, 3000);
-        });
-      });
-    });
-
     // 初始化时隐藏除第一个以外的所有内容
     document
       .querySelectorAll('[data-role="code-container"]')

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>