@coffic/cosy-ui 0.8.22 → 0.8.24

package/dist/index-astro.ts

@@ -7,6 +7,8 @@ export * from './src-astro/card';
 export * from './src-astro/code-block';
 export * from './src-astro/code-container';
 export * from './src-astro/code-example';
+export * from './src-astro/code-panel';
+export * from './src-astro/install-tabs';
 export * from './src-astro/contact';
 export * from './src-astro/container';
 export * from './src-astro/errors';
@@ -44,6 +46,7 @@ export * from './src-astro/theme-switcher';
 export * from './src-astro/toc';
 export * from './src-astro/toast';
 export * from './src-astro/confirm-dialog';
+export * from './src-astro/list';
 
 // 类型定义 (按字母顺序)
 export * from './src-astro/types/article';

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/grid/Grid.astro

@@ -114,29 +114,283 @@ const {
   ...rest
 } = Astro.props;
 
-// 处理响应式列数
+// 处理响应式列数（所有 class 必须静态字符串，不能拼接）
 const getColsClasses = (cols: ResponsiveValue<number>) => {
+  // 单一数字
   if (typeof cols === 'number') {
-    return `cosy:grid-cols-${cols}`;
+    switch (cols) {
+      case 1:
+        return 'cosy:grid-cols-1';
+      case 2:
+        return 'cosy:grid-cols-2';
+      case 3:
+        return 'cosy:grid-cols-3';
+      case 4:
+        return 'cosy:grid-cols-4';
+      case 5:
+        return 'cosy:grid-cols-5';
+      case 6:
+        return 'cosy:grid-cols-6';
+      case 7:
+        return 'cosy:grid-cols-7';
+      case 8:
+        return 'cosy:grid-cols-8';
+      case 9:
+        return 'cosy:grid-cols-9';
+      case 10:
+        return 'cosy:grid-cols-10';
+      case 11:
+        return 'cosy:grid-cols-11';
+      case 12:
+        return 'cosy:grid-cols-12';
+      default:
+        return '';
+    }
   }
-
-  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(' ');
+  // 响应式对象
+  let result: string[] = [];
+  const responsive = cols as any;
+  if (responsive.base) {
+    switch (responsive.base) {
+      case 1:
+        result.push('cosy:grid-cols-1');
+        break;
+      case 2:
+        result.push('cosy:grid-cols-2');
+        break;
+      case 3:
+        result.push('cosy:grid-cols-3');
+        break;
+      case 4:
+        result.push('cosy:grid-cols-4');
+        break;
+      case 5:
+        result.push('cosy:grid-cols-5');
+        break;
+      case 6:
+        result.push('cosy:grid-cols-6');
+        break;
+      case 7:
+        result.push('cosy:grid-cols-7');
+        break;
+      case 8:
+        result.push('cosy:grid-cols-8');
+        break;
+      case 9:
+        result.push('cosy:grid-cols-9');
+        break;
+      case 10:
+        result.push('cosy:grid-cols-10');
+        break;
+      case 11:
+        result.push('cosy:grid-cols-11');
+        break;
+      case 12:
+        result.push('cosy:grid-cols-12');
+        break;
+    }
+  }
+  if (responsive.sm) {
+    switch (responsive.sm) {
+      case 1:
+        result.push('cosy:sm:grid-cols-1');
+        break;
+      case 2:
+        result.push('cosy:sm:grid-cols-2');
+        break;
+      case 3:
+        result.push('cosy:sm:grid-cols-3');
+        break;
+      case 4:
+        result.push('cosy:sm:grid-cols-4');
+        break;
+      case 5:
+        result.push('cosy:sm:grid-cols-5');
+        break;
+      case 6:
+        result.push('cosy:sm:grid-cols-6');
+        break;
+      case 7:
+        result.push('cosy:sm:grid-cols-7');
+        break;
+      case 8:
+        result.push('cosy:sm:grid-cols-8');
+        break;
+      case 9:
+        result.push('cosy:sm:grid-cols-9');
+        break;
+      case 10:
+        result.push('cosy:sm:grid-cols-10');
+        break;
+      case 11:
+        result.push('cosy:sm:grid-cols-11');
+        break;
+      case 12:
+        result.push('cosy:sm:grid-cols-12');
+        break;
+    }
+  }
+  if (responsive.md) {
+    switch (responsive.md) {
+      case 1:
+        result.push('cosy:md:grid-cols-1');
+        break;
+      case 2:
+        result.push('cosy:md:grid-cols-2');
+        break;
+      case 3:
+        result.push('cosy:md:grid-cols-3');
+        break;
+      case 4:
+        result.push('cosy:md:grid-cols-4');
+        break;
+      case 5:
+        result.push('cosy:md:grid-cols-5');
+        break;
+      case 6:
+        result.push('cosy:md:grid-cols-6');
+        break;
+      case 7:
+        result.push('cosy:md:grid-cols-7');
+        break;
+      case 8:
+        result.push('cosy:md:grid-cols-8');
+        break;
+      case 9:
+        result.push('cosy:md:grid-cols-9');
+        break;
+      case 10:
+        result.push('cosy:md:grid-cols-10');
+        break;
+      case 11:
+        result.push('cosy:md:grid-cols-11');
+        break;
+      case 12:
+        result.push('cosy:md:grid-cols-12');
+        break;
+    }
+  }
+  if (responsive.lg) {
+    switch (responsive.lg) {
+      case 1:
+        result.push('cosy:lg:grid-cols-1');
+        break;
+      case 2:
+        result.push('cosy:lg:grid-cols-2');
+        break;
+      case 3:
+        result.push('cosy:lg:grid-cols-3');
+        break;
+      case 4:
+        result.push('cosy:lg:grid-cols-4');
+        break;
+      case 5:
+        result.push('cosy:lg:grid-cols-5');
+        break;
+      case 6:
+        result.push('cosy:lg:grid-cols-6');
+        break;
+      case 7:
+        result.push('cosy:lg:grid-cols-7');
+        break;
+      case 8:
+        result.push('cosy:lg:grid-cols-8');
+        break;
+      case 9:
+        result.push('cosy:lg:grid-cols-9');
+        break;
+      case 10:
+        result.push('cosy:lg:grid-cols-10');
+        break;
+      case 11:
+        result.push('cosy:lg:grid-cols-11');
+        break;
+      case 12:
+        result.push('cosy:lg:grid-cols-12');
+        break;
+    }
+  }
+  if (responsive.xl) {
+    switch (responsive.xl) {
+      case 1:
+        result.push('cosy:xl:grid-cols-1');
+        break;
+      case 2:
+        result.push('cosy:xl:grid-cols-2');
+        break;
+      case 3:
+        result.push('cosy:xl:grid-cols-3');
+        break;
+      case 4:
+        result.push('cosy:xl:grid-cols-4');
+        break;
+      case 5:
+        result.push('cosy:xl:grid-cols-5');
+        break;
+      case 6:
+        result.push('cosy:xl:grid-cols-6');
+        break;
+      case 7:
+        result.push('cosy:xl:grid-cols-7');
+        break;
+      case 8:
+        result.push('cosy:xl:grid-cols-8');
+        break;
+      case 9:
+        result.push('cosy:xl:grid-cols-9');
+        break;
+      case 10:
+        result.push('cosy:xl:grid-cols-10');
+        break;
+      case 11:
+        result.push('cosy:xl:grid-cols-11');
+        break;
+      case 12:
+        result.push('cosy:xl:grid-cols-12');
+        break;
+    }
+  }
+  if (responsive['2xl']) {
+    switch (responsive['2xl']) {
+      case 1:
+        result.push('cosy:2xl:grid-cols-1');
+        break;
+      case 2:
+        result.push('cosy:2xl:grid-cols-2');
+        break;
+      case 3:
+        result.push('cosy:2xl:grid-cols-3');
+        break;
+      case 4:
+        result.push('cosy:2xl:grid-cols-4');
+        break;
+      case 5:
+        result.push('cosy:2xl:grid-cols-5');
+        break;
+      case 6:
+        result.push('cosy:2xl:grid-cols-6');
+        break;
+      case 7:
+        result.push('cosy:2xl:grid-cols-7');
+        break;
+      case 8:
+        result.push('cosy:2xl:grid-cols-8');
+        break;
+      case 9:
+        result.push('cosy:2xl:grid-cols-9');
+        break;
+      case 10:
+        result.push('cosy:2xl:grid-cols-10');
+        break;
+      case 11:
+        result.push('cosy:2xl:grid-cols-11');
+        break;
+      case 12:
+        result.push('cosy:2xl:grid-cols-12');
+        break;
+    }
+  }
+  return result.join(' ');
 };
 
 // 间距映射

package/dist/src-astro/install-tabs/ButtonCopyInstall.astro

@@ -0,0 +1,102 @@
+---
+import { ClipboardIcon } from '../icons';
+
+/**
+ * 安装命令复制按钮，带气泡toast反馈
+ * @param code 要复制的命令字符串
+ */
+interface Props {
+  code: string;
+}
+
+const { code } = Astro.props;
+const uniqueId = `copy-install-${Math.random().toString(36).substr(2, 9)}`;
+const toastId = `toast-${uniqueId}`;
+---
+
+<button
+  class="cosy:gap-2 cosy:btn cosy:btn-ghost cosy:btn-sm"
+  aria-label="复制安装命令"
+  type="button"
+  style="position: relative;"
+  id={uniqueId}
+  data-code={code}>
+  <span class="cosy:copy-icon"><ClipboardIcon /></span>
+  <span
+    id={toastId}
+    style="
+      display: none;
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: #22c55e;
+      color: #fff;
+      padding: 0.75rem 1.25rem;
+      border-radius: 0.5rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      white-space: nowrap;
+      z-index: 99999;
+      box-shadow: 0 10px 25px rgba(0,0,0,0.15);
+      pointer-events: none;
+      transition: all 0.2s ease;
+    ">
+    复制成功 ✓
+  </span>
+</button>
+
+<script>
+  function initializeCopyInstall() {
+    console.log('InstallTabs: 初始化复制按钮');
+
+    document.querySelectorAll('[id^="copy-install-"]').forEach((btn) => {
+      // 防止重复绑定事件
+      if (btn.hasAttribute('data-initialized')) return;
+      btn.setAttribute('data-initialized', 'true');
+
+      btn.addEventListener('click', () => {
+        const code = btn.getAttribute('data-code') || '';
+        const toastId = `toast-${btn.id}`;
+        const toast = document.getElementById(toastId);
+
+        console.log('InstallTabs: 点击复制按钮', { code, toastId, toast });
+
+        navigator.clipboard
+          .writeText(code)
+          .then(() => {
+            console.log('InstallTabs: 复制成功', code);
+            if (toast && toast instanceof HTMLElement) {
+              console.log('InstallTabs: 显示toast');
+              // 确保toast在最前面
+              document.body.appendChild(toast);
+
+              toast.style.display = 'block';
+              toast.style.opacity = '1';
+              toast.style.visibility = 'visible';
+
+              setTimeout(() => {
+                toast.style.opacity = '0';
+                setTimeout(() => {
+                  toast.style.display = 'none';
+                  toast.style.visibility = 'hidden';
+                  // 移回原位
+                  btn.appendChild(toast);
+                }, 200);
+              }, 2000);
+            } else {
+              console.error('InstallTabs: 无法找到toast元素', toastId);
+            }
+          })
+          .catch((err) => {
+            console.error('InstallTabs: 复制失败', err);
+          });
+      });
+    });
+  }
+
+  document.addEventListener('astro:page-load', () => {
+    console.log('InstallTabs: 页面加载完成，初始化复制按钮');
+    initializeCopyInstall();
+  });
+</script>