@coffic/cosy-ui 0.8.21 → 0.8.23

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

@@ -17,6 +17,8 @@ export { default as CheckCircle } from './CheckCircle.astro';
 export { default as CheckIcon } from './CheckIcon.astro';
 export { default as ClipboardIcon } from './ClipboardIcon.astro';
 export { default as CloseIcon } from './CloseIcon.astro';
+export { default as CodeIcon } from './CodeIcon.astro';
+export { default as DeleteIcon } from './DeleteIcon.astro';
 export { default as ErrorIcon } from './ErrorIcon.astro';
 export { default as GithubIcon } from './GithubIcon.astro';
 export { default as InfoCircle } from './InfoCircle.astro';
@@ -36,7 +38,6 @@ export { default as StarIcon } from './StarIcon.astro';
 export { default as HeartIcon } from './HeartIcon.astro';
 export { default as SaveIcon } from './SaveIcon.astro';
 export { default as EditIcon } from './EditIcon.astro';
-export { default as DeleteIcon } from './DeleteIcon.astro';
 export { default as ToolsIcon } from './ToolsIcon.astro';
 export { default as WalletIcon } from './WalletIcon.astro';
 export { default as ReportIcon } from './ReportIcon.astro';

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/language-switcher/LanguageSwitcher.astro

@@ -32,16 +32,20 @@ import '../../style.ts';
 
 interface Props {
   languages: string[];
+  /**
+   * 自定义类名
+   */
+  class?: string;
 }
 
-const { languages = ['zh-cn', 'en'] } = Astro.props;
+const { languages = ['zh-cn', 'en'], class: className = '' } = Astro.props;
 
 const currentLocale = Astro.currentLocale;
 const currentLanguageName = LanguageUtil.getLanguageName(currentLocale);
 ---
 
 <!-- 语言切换按钮 -->
-<div class="cosy:dropdown cosy:dropdown-end">
+<div class={`cosy:dropdown cosy:dropdown-end ${className}`}>
   <div tabindex="0" role="button" class:list={['cosy:btn cosy:btn-ghost']}>
     <span class="cosy:mr-1">{currentLanguageName}</span>
     <ChevronDownIcon size="16px" class="cosy:w-4 cosy:h-4" />

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/link/Link.astro

@@ -85,6 +85,21 @@ interface Props extends HTMLAttributes<'a'> {
   size?: LinkSize;
   debug?: boolean;
   centerText?: boolean;
+  btn?: boolean;
+  circle?: boolean;
+  ghost?: boolean;
+  noUnderline?: boolean;
+  rounded?: boolean;
+  fullWidth?: boolean;
+  color?:
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error';
+  align?: 'left' | 'center' | 'right';
 }
 
 const {
@@ -98,13 +113,21 @@ const {
   'class:list': classList,
   debug = false,
   centerText = false,
+  btn = false,
+  circle = false,
+  ghost = false,
+  noUnderline = true,
+  rounded = false,
+  fullWidth = false,
+  color,
+  align,
   ...rest
 } = Astro.props;
 
 // 构建类名
 const classes = [
   // 基础链接样式
-  'cosy:items-center cosy:cursor-pointer cosy:no-underline cosy:transition-all cosy:duration-200',
+  'cosy:items-center cosy:cursor-pointer cosy:transition-all cosy:duration-200',
 
   // 显示方式
   block ? 'cosy:flex cosy:w-full' : 'cosy:inline-flex',
@@ -113,7 +136,7 @@ const classes = [
   variant === 'primary' && 'cosy:text-primary cosy:hover:text-primary-focus',
   variant === 'secondary' &&
     'cosy:text-secondary cosy:hover:text-secondary-focus',
-  variant === 'text' && 'cosy:text-neutral cosy:hover:text-neutral-focus',
+  variant === 'text',
   variant === 'cta' &&
     'cosy:text-accent cosy:hover:text-accent-focus cosy:font-medium',
   variant === 'ghost' &&
@@ -136,11 +159,35 @@ const classes = [
   animation === 'hover-scale' &&
     'cosy:hover:scale-105 cosy:transition-transform',
 
+  // 新增：按钮风格
+  btn && 'cosy:btn',
+  btn && size === 'sm' && 'cosy:btn-sm',
+  btn && size === 'lg' && 'cosy:btn-lg',
+  btn && ghost && 'cosy:btn-ghost',
+  btn && color && `cosy:btn-${color}`,
+  btn && fullWidth && 'cosy:btn-block',
+  btn && circle && 'cosy:btn-circle',
+  btn && rounded && 'cosy:rounded-full',
+
+  // 非按钮风格下的圆角
+  !btn && rounded && 'cosy:rounded',
+
+  // 非按钮风格下的无下划线
+  !btn && noUnderline && 'cosy:no-underline cosy:hover:no-underline',
+
+  // 宽度100%
+  fullWidth && !btn && 'cosy:w-full',
+
+  // 对齐
+  align === 'center' && 'cosy:justify-center cosy:text-center',
+  align === 'right' && 'cosy:justify-end cosy:text-right',
+  align === 'left' && 'cosy:justify-start cosy:text-left',
+
   // 自定义类名
   className,
 ];
 
-// 文本居中样式
+// 文本居中样式（兼容旧用法）
 if (centerText) {
   classes.push('cosy:justify-center cosy:text-center');
 }

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.21",
+  "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",

package/dist/src-astro/banner/BannerAllAnimations.astro

@@ -1,10 +0,0 @@
----
-import { Banner } from '../../index-astro';
----
-
-<div class="flex flex-col gap-4">
-  <Banner animation="none">这是一个没有动画的横幅</Banner>
-  <Banner animation="fade">这是一个只有淡入动画的横幅</Banner>
-  <Banner animation="slide">这是一个只有上滑动画的横幅</Banner>
-  <Banner animation="both">这是一个同时有淡入和上滑动画的横幅</Banner>
-</div>

package/dist/src-astro/banner/BannerBasic.astro

@@ -1,5 +0,0 @@
----
-import { Banner } from '../../index-astro';
----
-
-<Banner>欢迎使用我们的服务</Banner>

package/dist/src-astro/banner/BannerCustomStyle.astro

@@ -1,8 +0,0 @@
----
-import { Banner } from '../../index-astro';
----
-
-<Banner
-  class="bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold">
-  这是一个自定义样式的横幅
-</Banner>

package/dist/src-astro/banner/BannerDanger.astro

@@ -1,5 +0,0 @@
----
-import { Banner } from '../../index-astro';
----
-
-<Banner bgColor="error">这是一个危险颜色的横幅</Banner>

package/dist/src-astro/banner/BannerFadeIn.astro

@@ -1,5 +0,0 @@
----
-import { Banner } from '../../index-astro';
----
-
-<Banner animation="fade"> 这是一个只有淡入动画的横幅 </Banner>

package/dist/src-astro/banner/BannerInfo.astro

@@ -1,5 +0,0 @@
----
-import { Banner } from '../../index-astro';
----
-
-<Banner bgColor="info">这是一个信息颜色的横幅</Banner>

package/dist/src-astro/banner/BannerPrimary.astro

@@ -1,5 +0,0 @@
----
-import { Banner } from '../../index-astro';
----
-
-<Banner bgColor="primary">这是一个主要颜色的横幅</Banner>