@coffic/cosy-ui 0.8.22 → 0.8.23

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

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

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

@@ -0,0 +1,174 @@
+---
+/**
+ * @component InstallTabs
+ *
+ * @description
+ * 展示多个包管理器（npm、pnpm、yarn等）的安装命令，支持标签切换和一键复制。
+ * 只需传入包名即可自动生成各包管理器的安装命令。
+ *
+ * @props
+ * @param packageName 要安装的包名
+ * @param managers 支持的包管理器，默认['npm','pnpm','yarn']
+ * @param dev 是否为开发依赖，影响命令参数（如-D/--save-dev）
+ *
+ * @usage
+ * ```astro
+ * <InstallTabs packageName="react" />
+ * <InstallTabs packageName="vite" dev />
+ * <InstallTabs packageName="eslint" managers={["npm","yarn"]} />
+ * ```
+ */
+import '../../style.ts';
+import ButtonCopyInstall from './ButtonCopyInstall.astro';
+import { CodePanel } from '../code-panel';
+
+interface Props {
+  /** 要安装的包名 */
+  packageName: string;
+  /** 支持的包管理器，默认['npm','pnpm','yarn'] */
+  managers?: string[];
+  /** 是否为开发依赖 */
+  dev?: boolean;
+}
+
+const {
+  packageName,
+  managers = ['npm', 'pnpm', 'yarn'],
+  dev = false,
+} = Astro.props;
+
+const managerLabels: Record<string, string> = {
+  npm: 'npm',
+  pnpm: 'pnpm',
+  yarn: 'yarn',
+};
+
+function getCommand(manager: string, pkg: string, dev: boolean) {
+  switch (manager) {
+    case 'npm':
+      return `npm install${dev ? ' -D' : ''} ${pkg}`;
+    case 'pnpm':
+      return `pnpm add${dev ? ' -D' : ''} ${pkg}`;
+    case 'yarn':
+      return `yarn add${dev ? ' -D' : ''} ${pkg}`;
+    default:
+      return '';
+  }
+}
+
+const commands = managers.map((m) => getCommand(m, packageName, dev));
+---
+
+<div
+  class="cosy:mb-8 cosy:card cosy:p-0 cosy:overflow-hidden"
+  data-role="install-tabs">
+  <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">
+        {
+          managers.map((manager, idx) => (
+            <button
+              role="tab"
+              class={`cosy:tab${idx === 0 ? ' cosy:tab-active' : ''}`}
+              data-tab={`tab-${idx + 1}`}
+              aria-selected={idx === 0 ? 'true' : 'false'}>
+              {managerLabels[manager] ?? manager}
+            </button>
+          ))
+        }
+      </div>
+    </div>
+    <div class="cosy:flex cosy:items-center cosy:gap-2">
+      {
+        commands.map((cmd, idx) => (
+          <div
+            class={`cosy:install-copy-container ${idx === 0 ? 'cosy:block' : 'cosy:hidden'}`}
+            data-copy-container={`tab-${idx + 1}`}>
+            <ButtonCopyInstall code={cmd} />
+          </div>
+        ))
+      }
+    </div>
+  </div>
+  {
+    commands.map((cmd, idx) => (
+      <div
+        class={`cosy:install-panel ${idx === 0 ? 'cosy:block' : 'cosy:hidden'}`}
+        data-panel={`tab-${idx + 1}`}>
+        <CodePanel code={cmd} language="bash" theme="dark-plus" />
+      </div>
+    ))
+  }
+</div>
+
+<script>
+  function initializeInstallTabs() {
+    console.log('InstallTabs: 初始化安装标签组件');
+
+    // 为所有InstallTabs容器添加事件委托
+    document
+      .querySelectorAll('[data-role="install-tabs"]')
+      .forEach((container) => {
+        // 防止重复绑定
+        if (container.hasAttribute('data-initialized')) return;
+        container.setAttribute('data-initialized', 'true');
+
+        // 使用事件委托处理标签点击
+        container.addEventListener('click', (event) => {
+          const target = event.target as HTMLElement;
+          const tab = target.closest('[role="tab"][data-tab^="tab-"]');
+
+          if (!tab) return;
+
+          console.log('InstallTabs: 切换标签', tab.getAttribute('data-tab'));
+
+          const targetTab = tab.getAttribute('data-tab');
+          if (!targetTab) return;
+
+          // 更新标签状态
+          container
+            .querySelectorAll('[role="tab"][data-tab^="tab-"]')
+            .forEach((t) => {
+              t.classList.remove('cosy:tab-active');
+              t.setAttribute('aria-selected', 'false');
+            });
+          tab.classList.add('cosy:tab-active');
+          tab.setAttribute('aria-selected', 'true');
+
+          // 切换面板显示
+          container
+            .querySelectorAll('.cosy\\:install-panel')
+            .forEach((panel) => {
+              if (panel.getAttribute('data-panel') === targetTab) {
+                panel.classList.remove('cosy:hidden');
+                panel.classList.add('cosy:block');
+              } else {
+                panel.classList.add('cosy:hidden');
+                panel.classList.remove('cosy:block');
+              }
+            });
+
+          // 切换复制按钮显示
+          container
+            .querySelectorAll('.cosy\\:install-copy-container')
+            .forEach((copyContainer) => {
+              if (
+                copyContainer.getAttribute('data-copy-container') === targetTab
+              ) {
+                copyContainer.classList.remove('cosy:hidden');
+                copyContainer.classList.add('cosy:block');
+              } else {
+                copyContainer.classList.add('cosy:hidden');
+                copyContainer.classList.remove('cosy:block');
+              }
+            });
+        });
+      });
+  }
+
+  document.addEventListener('astro:page-load', () => {
+    console.log('InstallTabs: 页面加载完成，初始化安装标签组件');
+    initializeInstallTabs();
+  });
+</script>

package/dist/src-astro/install-tabs/index.ts

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

package/dist/src-astro/install-tabs/types.ts

@@ -0,0 +1,8 @@
+export interface InstallTabsProps {
+    /** 要安装的包名 */
+    packageName: string;
+    /** 支持的包管理器，默认['npm','pnpm','yarn'] */
+    managers?: string[];
+    /** 是否为开发依赖 */
+    dev?: boolean;
+} 

package/dist/src-astro/layout-app/AppLayout.astro

@@ -195,16 +195,7 @@ const {
 }: Props = Astro.props;
 ---
 
-<BaseLayout
-  title={metaConfig.title}
-  description={metaConfig.description}
-  keywords={metaConfig.keywords}
-  author={metaConfig.author}
-  robots={metaConfig.robots}
-  head={metaConfig.head}
-  favicon={metaConfig.favicon}
-  debug={debug}
-  {...rest}>
+<BaseLayout {...metaConfig} debug={debug}>
   <ClientRouter />
   {
     showHeader && (

package/dist/src-astro/layout-basic/BaseLayout.astro

@@ -52,9 +52,7 @@
 import '../../style.ts';
 import { type IMetaProps } from '../../index-astro';
 
-export interface Props extends IMetaProps {
-  debug?: boolean;
-}
+export interface Props extends IMetaProps {}
 
 const {
   title,
@@ -68,10 +66,28 @@ const {
   class: className,
   favicon,
   'class:list': classList,
+  background = 'default',
 } = Astro.props;
 
+// 处理背景色 class
+const bgClassMap: Record<string, string> = {
+  default: 'cosy:bg-base-100',
+  white: 'cosy:bg-white',
+  gray: 'cosy:bg-gray-100',
+  dark: 'cosy:bg-gray-900',
+  'gradient-blue': 'cosy:bg-gradient-to-br cosy:from-blue-400 cosy:to-blue-600',
+  'gradient-pink': 'cosy:bg-gradient-to-br cosy:from-pink-400 cosy:to-pink-600',
+  'gradient-green':
+    'cosy:bg-gradient-to-br cosy:from-green-400 cosy:to-green-600',
+};
+
 // 处理类名
-let bodyClasses = debug ? 'cosy:border cosy:border-red-500' : className || '';
+let bodyClasses = [
+  debug ? 'cosy:border cosy:border-red-500' : className || '',
+  bgClassMap[background] || '',
+]
+  .filter(Boolean)
+  .join(' ');
 ---
 
 <!doctype html>

package/dist/src-astro/types/meta.ts

@@ -1,55 +1,67 @@
 export interface IMetaProps {
-  title: string;
-  description: string;
-  keywords: string;
-  author: string;
-  robots: string;
-
-  /**
-   * 图标
-   */
-  favicon?: ImageMetadata;
-
-  /**
-   * 基础路径，用于处理网站部署在二级目录的情况
-   * @default ""
-   */
-  basePath?: string;
-
-  /**
-   * 站点名称
-   */
-  siteName?: string;
-
-  /**
-   * 页面语言
-   * @default "zh-CN"
-   */
-  lang?: string;
-
-  /**
-   * 是否包含视口元标签
-   * @default true
-   */
-  viewport?: boolean;
-
-  /**
-   * 自定义CSS
-   */
-  customStyles?: string;
-
-  /**
-   * 自定义头部内容
-   */
-  head?: astroHTML.JSX.Element;
-
-  /**
-   * 页面类名
-   */
-  class?: string;
-
-  /**
-   * 类名列表
-   */
-  'class:list'?: any;
+    title: string;
+    description: string;
+    keywords: string;
+    author: string;
+    robots: string;
+
+    /**
+     * 图标
+     */
+    favicon?: ImageMetadata;
+
+    /**
+     * 基础路径，用于处理网站部署在二级目录的情况
+     * @default ""
+     */
+    basePath?: string;
+
+    /**
+     * 站点名称
+     */
+    siteName?: string;
+
+    /**
+     * 页面语言
+     * @default "zh-CN"
+     */
+    lang?: string;
+
+    /**
+     * 是否包含视口元标签
+     * @default true
+     */
+    viewport?: boolean;
+
+    /**
+     * 自定义CSS
+     */
+    customStyles?: string;
+
+    /**
+     * 自定义头部内容
+     */
+    head?: astroHTML.JSX.Element;
+
+    /**
+     * 页面类名
+     */
+    class?: string;
+
+    /**
+     * 类名列表
+     */
+    'class:list'?: any;
+
+    /**
+     * 调试模式，显示边框
+     * @default false
+     */
+    debug?: boolean;
+
+    /**
+     * 预设背景色，可选值：'default' | 'white' | 'gray' | 'dark' | 'gradient-blue' | 'gradient-pink' | 'gradient-green'
+     * @default 'default'
+     */
+    background?: 'default' | 'white' | 'gray' | 'dark' | 'gradient-blue' | 'gradient-pink' | 'gradient-green';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffic/cosy-ui",
-  "version": "0.8.22",
+  "version": "0.8.23",
   "description": "An astro component library",
   "author": {
     "name": "nookery",
@@ -63,7 +63,8 @@
     "@remixicon/vue": "^4.6.0",
     "astro-integration-kit": "^0.18.0",
     "fs-extra": "^11.3.0",
-    "html-to-image": "^1.11.13"
+    "html-to-image": "^1.11.13",
+    "shiki": "^3.7.0"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",