@coffic/cosy-ui 0.9.26 → 0.9.28

package/dist/src-astro/link/Link.astro

@@ -13,6 +13,29 @@
  * 3. 一致性 - 保持与整体设计系统的一致性
  * 4. 可访问性 - 确保链接可被键盘导航和屏幕阅读器识别
  *
+ * @props
+ * @prop {string} [active=false] - 是否为激活状态
+ * @prop {string} [align] - 对齐方式：left、center、right
+ * @prop {string} [animation='none'] - 动画效果：none、hover-lift、hover-glow、hover-scale
+ * @prop {boolean} [block=false] - 是否为块级显示
+ * @prop {boolean} [btn=false] - 是否启用按钮风格
+ * @prop {boolean} [circle=false] - 是否为圆形按钮（需配合 btn 使用）
+ * @prop {string} [class] - 自定义 CSS 类名
+ * @prop {any} [class:list] - 类名列表
+ * @prop {string} [color] - 按钮颜色（需配合 btn 使用）：primary、secondary、accent、info、success、warning、error
+ * @prop {boolean} [debug=false] - 是否显示调试边框
+ * @prop {boolean} [external=false] - 是否为外部链接，自动新窗口打开
+ * @prop {boolean} [fullWidth=false] - 是否占满宽度
+ * @prop {boolean} [ghost=false] - 是否为幽灵按钮（需配合 btn 使用）
+ * @prop {string} href - 链接地址（必需）
+ * @prop {string} [icon] - 图标名称，支持所有可用的图标组件
+ * @prop {string} [navigationType] - 导航类型（需配合 navigation 变体使用）：previous、next
+ * @prop {boolean} [noUnderline=true] - 是否移除下划线
+ * @prop {boolean} [rounded=false] - 是否添加圆角
+ * @prop {string} [size='md'] - 尺寸大小：sm、md、lg
+ * @prop {string} [variant='default'] - 样式变体：default、primary、secondary、text、cta、ghost、light、navigation、github
+ * @prop {...HTMLAttributes<'a'>} [rest] - 其他 HTML <a> 标签属性
+ *
  * @usage
  * 基本用法：
  * ```astro
@@ -31,6 +54,19 @@
  * <Link href="/docs" variant="text">查看文档</Link>
  * <Link href="/get-started" variant="cta">立即开始</Link>
  * <Link href="/preview" variant="ghost">预览</Link>
+ * <Link href="/previous" variant="navigation" navigationType="previous">上一页</Link>
+ * <Link href="/next" variant="navigation" navigationType="next">下一页</Link>
+ * <Link href="https://github.com/user/repo" variant="github">GitHub 仓库</Link>
+ * ```
+ *
+ * 图标支持：
+ * ```astro
+ * <Link href="/home" icon="HomeIcon">首页</Link>
+ * <Link href="/settings" icon="SettingsIcon">设置</Link>
+ * <Link href="/search" icon="SearchIcon">搜索</Link>
+ * <Link href="/user" icon="UserIcon">用户</Link>
+ * <Link href="/mail" icon="MailIcon">邮件</Link>
+ * <Link href="/download" icon="DownloadIcon">下载</Link>
  * ```
  *
  * 块级显示：
@@ -52,56 +88,20 @@
  * <Link href="/medium" size="md">中型链接</Link>
  * <Link href="/large" size="lg">大型链接</Link>
  * ```
+ *
+ * 按钮风格：
+ * ```astro
+ * <Link href="/signup" btn>按钮链接</Link>
+ * <Link href="/ghost" btn ghost>幽灵按钮</Link>
+ * <Link href="/circle" btn circle>圆形按钮</Link>
+ * <Link href="/full" btn fullWidth>全宽按钮</Link>
+ * ```
  */
 
 import '../../style.ts';
-
-import type { HTMLAttributes } from 'astro/types';
-
-// 定义链接尺寸类型
-type LinkSize = 'sm' | 'md' | 'lg';
-
-// 定义链接变体类型
-type LinkVariant =
-  | 'default'
-  | 'primary'
-  | 'secondary'
-  | 'text'
-  | 'cta'
-  | 'ghost'
-  | 'light';
-
-// 定义链接动画类型
-type LinkAnimation = 'none' | 'hover-lift' | 'hover-glow' | 'hover-scale';
-
-interface Props extends HTMLAttributes<'a'> {
-  href: string;
-  external?: boolean;
-  block?: boolean;
-  class?: string;
-  'class:list'?: any;
-  variant?: LinkVariant;
-  animation?: LinkAnimation;
-  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';
-  active?: boolean;
-}
+import { ChevronLeftIcon, ChevronRightIcon, GithubIcon } from '../icons';
+// 导入所有图标组件
+import * as Icons from '../icons';
 
 const {
   href,
@@ -113,7 +113,6 @@ const {
   class: className = '',
   'class:list': classList,
   debug = false,
-  centerText = false,
   btn = false,
   circle = false,
   ghost = false,
@@ -123,9 +122,14 @@ const {
   color,
   align,
   active = false,
+  navigationType,
+  icon,
   ...rest
 } = Astro.props;
 
+// 获取图标组件
+const IconComponent = icon ? (Icons as any)[icon] : null;
+
 // 构建类名
 const classes = [
   // 基础链接样式
@@ -134,6 +138,9 @@ const classes = [
   // 显示方式
   block ? 'cosy:flex cosy:w-full' : 'cosy:inline-flex',
 
+  // 图标和文字间距（当有图标时添加间距）
+  icon && 'cosy:gap-2',
+
   // 变体样式
   variant === 'primary' && 'cosy:text-primary cosy:hover:text-primary-focus',
   variant === 'secondary' &&
@@ -147,6 +154,10 @@ const classes = [
     'cosy:text-base-content cosy:hover:text-base-content/90',
   variant === 'light' &&
     'cosy:text-white cosy:hover:text-white/90 cosy:font-medium',
+  variant === 'navigation' &&
+    'cosy:flex cosy:items-center cosy:gap-3 cosy:p-4 cosy:bg-base-100 cosy:border cosy:border-base-300 cosy:rounded-lg cosy:shadow-sm cosy:hover:shadow-md cosy:hover:border-base-400 cosy:transition-all cosy:duration-300 cosy:ease-in-out cosy:no-underline cosy:hover:no-underline cosy:font-medium cosy:text-base-content cosy:hover:text-base-content cosy:hover:-translate-y-1 cosy:hover:scale-[1.01] cosy:backdrop-blur-sm cosy:hover:backdrop-blur-md',
+  variant === 'github' &&
+    'cosy:flex cosy:items-center cosy:gap-2 cosy:text-base-content cosy:hover:text-base-content/80 cosy:transition-colors cosy:duration-200 cosy:no-underline cosy:hover:no-underline cosy:font-medium',
 
   // 尺寸样式
   size === 'sm' && 'cosy:text-sm',
@@ -192,11 +203,6 @@ const classes = [
   className,
 ];
 
-// 文本居中样式（兼容旧用法）
-if (centerText) {
-  classes.push('cosy:justify-center cosy:text-center');
-}
-
 // 调试样式
 if (debug) {
   classes.push('cosy:border cosy:border-dashed cosy:border-red-500');
@@ -208,5 +214,9 @@ if (debug) {
   class:list={[classes, classList]}
   {...external ? { target: '_blank', rel: 'noopener noreferrer' } : {}}
   {...rest}>
+  {navigationType === 'previous' && <ChevronLeftIcon />}
+  {variant === 'github' && <GithubIcon />}
+  {IconComponent && <IconComponent />}
   <slot />
+  {navigationType === 'next' && <ChevronRightIcon />}
 </a>

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

@@ -1,17 +1,2 @@
-import Link from './Link.astro';
-import LinkBasic from './LinkBasic.astro';
-import LinkVariants from './LinkVariants.astro';
-import LinkAnimations from './LinkAnimations.astro';
-import BasicSourceCode from './LinkBasic.astro?raw';
-import VariantsSourceCode from './LinkVariants.astro?raw';
-import AnimationsSourceCode from './LinkAnimations.astro?raw';
-import { extractSimpleExample } from '../../src/utils/component';
-
-export { Link, LinkBasic, LinkVariants, LinkAnimations };
-
-// 导出示例源代码
-export const LinkExampleCodes = {
-  Basic: extractSimpleExample(BasicSourceCode, 'Link'),
-  Variants: extractSimpleExample(VariantsSourceCode, 'Link'),
-  Animations: extractSimpleExample(AnimationsSourceCode, 'Link'),
-};
+export { default as Link } from './Link.astro';
+export type { LinkProps } from './types';

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

@@ -0,0 +1,102 @@
+import type { HTMLAttributes } from 'astro/types';
+
+// 定义链接尺寸类型
+export type LinkSize = 'sm' | 'md' | 'lg';
+
+// 定义链接变体类型
+export type LinkVariant =
+    | 'default'
+    | 'primary'
+    | 'secondary'
+    | 'text'
+    | 'cta'
+    | 'ghost'
+    | 'light'
+    | 'navigation'
+    | 'github';
+
+// 定义链接动画类型
+export type LinkAnimation = 'none' | 'hover-lift' | 'hover-glow' | 'hover-scale';
+
+// 定义图标类型（排除需要特殊属性的组件）
+export type LinkIconName =
+    | 'AlertTriangle'
+    | 'AppStoreIcon'
+    | 'CalendarIcon'
+    | 'ChartIcon'
+    | 'CheckCircle'
+    | 'CheckIcon'
+    | 'ChevronDownIcon'
+    | 'ChevronLeftIcon'
+    | 'ChevronRightIcon'
+    | 'ClipboardIcon'
+    | 'CloseIcon'
+    | 'CodeIcon'
+    | 'DashboardIcon'
+    | 'DeleteIcon'
+    | 'DocumentIcon'
+    | 'DownloadIcon'
+    | 'EditIcon'
+    | 'ErrorIcon'
+    | 'FolderIcon'
+    | 'GithubIcon'
+    | 'GlobeIcon'
+    | 'HeartIcon'
+    | 'HomeIcon'
+    | 'InfoCircle'
+    | 'InfoIcon'
+    | 'InboxArchive'
+    | 'LinkIcon'
+    | 'LinkedinIcon'
+    | 'LogOut'
+    | 'MailIcon'
+    | 'MenuIcon'
+    | 'MessageIcon'
+    | 'NotificationIcon'
+    | 'RefreshIcon'
+    | 'ReportIcon'
+    | 'SaveIcon'
+    | 'SearchIcon'
+    | 'SecurityIcon'
+    | 'SettingsIcon'
+    | 'StarIcon'
+    | 'SunCloudyIcon'
+    | 'ToolsIcon'
+    | 'TwitterIcon'
+    | 'UploadIcon'
+    | 'UserIcon'
+    | 'UsersIcon'
+    | 'WalletIcon'
+    | 'WarningIcon'
+    | 'WebsiteIcon'
+    | 'XCircle';
+
+export interface LinkProps extends HTMLAttributes<'a'> {
+    href: string;
+    external?: boolean;
+    block?: boolean;
+    class?: string;
+    'class:list'?: any;
+    variant?: LinkVariant;
+    animation?: LinkAnimation;
+    size?: LinkSize;
+    debug?: 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';
+    active?: boolean;
+    navigationType?: 'previous' | 'next';
+    icon?: LinkIconName;
+} 

package/dist/src-astro/placeholder/PlaceHolder.astro

@@ -1,7 +1,7 @@
 ---
 /**
  * @component PlaceHolder
- * @description 占位符组件，用于在布局中占用指定的空间
+ * @description 占位符组件，用于在布局中占用指定的空间，支持自定义宽度、高度、内边距和背景色
  * @usage
  * ```astro
  * <PlaceHolder width="md" height="lg" padding="md" background="base-200">
@@ -9,19 +9,21 @@
  * </PlaceHolder>
  * ```
  * @props
- * - width: 宽度尺寸 ('none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full')
- * - height: 高度尺寸 ('none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full')
- * - padding: 内边距大小 ('none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl')
- * - background: 背景色类名，如 'base-200', 'primary', 'secondary'
- * - class: 自定义 CSS 类名
+ * @prop {string} [background] - 背景色类名，可选值：base-100、base-200、base-300、primary、secondary、accent、info、success、warning、error
+ * @prop {string} [class] - 自定义 CSS 类名，用于添加额外的样式
+ * @prop {string} [height='md'] - 高度尺寸，可选值：none、xs、sm、md、lg、xl、2xl、3xl、4xl、5xl、6xl、full
+ * @prop {string} [padding='none'] - 内边距大小，可选值：none、xs、sm、md、lg、xl
+ * @prop {string} [width='md'] - 宽度尺寸，可选值：none、xs、sm、md、lg、xl、2xl、3xl、4xl、5xl、6xl、full
  * @slots
- * - default: 占位符内容
+ * @slot default - 占位符内容
  */
 import '../../style.ts';
 import type { PlaceHolderProps } from './types';
 
 interface Props extends PlaceHolderProps {
-  width?:
+  background?: string;
+  class?: string;
+  height?:
     | 'none'
     | 'xs'
     | 'sm'
@@ -34,7 +36,8 @@ interface Props extends PlaceHolderProps {
     | '5xl'
     | '6xl'
     | 'full';
-  height?:
+  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  width?:
     | 'none'
     | 'xs'
     | 'sm'
@@ -47,17 +50,14 @@ interface Props extends PlaceHolderProps {
     | '5xl'
     | '6xl'
     | 'full';
-  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  background?: string;
-  class?: string;
 }
 
 const {
-  width = 'md',
-  height = 'md',
-  padding = 'none',
   background,
   class: className = '',
+  height = 'md',
+  padding = 'none',
+  width = 'md',
 } = Astro.props;
 
 // 宽度样式映射

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

@@ -3,14 +3,14 @@ export type PlaceHolderHeight = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl
 export type PlaceHolderPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 export interface PlaceHolderProps {
-    /** 占位符宽度 */
-    width?: PlaceHolderWidth;
-    /** 占位符高度 */
-    height?: PlaceHolderHeight;
-    /** 内边距大小 */
-    padding?: PlaceHolderPadding;
     /** 背景色类名，如 'base-200', 'primary', 'secondary' */
     background?: string;
     /** 自定义 CSS 类名 */
     class?: string;
+    /** 占位符高度 */
+    height?: PlaceHolderHeight;
+    /** 内边距大小 */
+    padding?: PlaceHolderPadding;
+    /** 占位符宽度 */
+    width?: PlaceHolderWidth;
 } 

package/dist/src-astro/toc/TableOfContents.astro

@@ -1,111 +1,85 @@
 ---
 /**
  * @component TableOfContents
+ * @description 目录导航组件，用于显示页面内容的标题结构，自动检测页面中的标题元素，生成目录列表，并在用户滚动页面时高亮当前可见的标题
+ * @usage 用于创建页面内容的目录导航，帮助用户快速了解页面结构和导航到特定内容
+ * @props
+ * @prop {string} [class] - 自定义 CSS 类名，用于覆盖默认样式
+ * @prop {string} [containerSelector='main'] - 内容容器选择器，用于限制标题搜索范围
+ * @prop {boolean} [fixed=true] - 是否固定在右侧，设置为 false 时目录会跟随内容流
+ * @prop {string} [lang] - 语言设置，默认自动检测当前语言环境
+ * @prop {number} [maxDepth=3] - 最大深度，控制目录显示的标题级别
+ * @prop {number} [minHeadings=2] - 显示目录所需的最少标题数量，少于此时目录会自动隐藏
+ * @prop {string} [selector='h2, h3'] - 标题选择器，用于指定要包含在目录中的标题元素
+ * @prop {string} [title] - 目录标题文本，默认根据语言自动选择
+ * @slots
+ * @slot default - 目录内容（通常为空，内容由 JavaScript 动态生成）
  *
- * @description
- * TableOfContents 组件是一个目录导航组件，用于显示页面内容的标题结构。
- * 它会自动检测页面中的标题元素，生成目录列表，并在用户滚动页面时高亮当前可见的标题。
- * 当页面只有一个标题或没有足够的标题结构时，组件会自动隐藏。
- *
- * @design
- * 设计理念：
- * 1. 导航辅助 - 帮助用户快速了解页面结构和导航到特定内容
- * 2. 上下文感知 - 自动高亮当前阅读位置，提供阅读进度反馈
- * 3. 视觉层次 - 通过缩进和样式区分不同级别的标题
- * 4. 响应式设计 - 在小屏幕设备上自动隐藏，优化空间利用
- * 5. 智能显示 - 当页面结构不需要目录时自动隐藏
- * 6. 多语言支持 - 支持多种语言显示，自动检测当前语言环境
- *
- * @usage
- * 基本用法：
- * ```astro
- * <TableOfContents />
- * ```
- *
- * 自定义标题和选择器：
- * ```astro
- * <TableOfContents
- *   title="章节导航"
- *   selector="h2, h3, h4"
- *   maxDepth={4}
- * />
- * ```
- *
- * 非固定位置：
- * ```astro
- * <TableOfContents fixed={false} />
- * ```
- *
- * 指定内容容器：
- * ```astro
- * <TableOfContents containerSelector=".article-content" />
- * ```
- *
- * 指定语言：
- * ```astro
- * <TableOfContents lang="zh-cn" />
- * ```
- *
- * 启用日志：
- * ```astro
- * <TableOfContents enableLogging={true} />
- * ```
+ * 功能特性：
+ * - 自动检测页面标题结构
+ * - 智能显示/隐藏（根据标题数量）
+ * - 滚动时高亮当前标题
+ * - 平滑滚动到目标位置
+ * - 响应式设计（小屏幕自动隐藏）
+ * - 多语言支持
+ * - 支持自定义容器和选择器
+ * - 自动生成标题 ID
+ * - 排除特定标题（通过 ignore-heading 属性）
  */
-
-// 导入样式
 import '../../style.ts';
 import { createTextGetter } from '../../src/utils/i18n.ts';
 import { LanguageUtil } from '../../src/utils/language.ts';
 
 interface Props {
+  /**
+   * 自定义 CSS 类名
+   */
+  class?: string;
+  /**
+   * 内容容器选择器，用于限制标题搜索范围
+   * @default "main"
+   */
+  containerSelector?: string;
   /**
    * 是否固定在右侧
    * @default true
    */
   fixed?: boolean;
   /**
-   * 自定义类名
-   */
-  class?: string;
-  /**
-   * 标题选择器
-   * @default "h2, h3"
+   * 语言设置
+   * @default 自动检测
    */
-  selector?: string;
+  lang?: string;
   /**
    * 最大深度
    * @default 3
    */
   maxDepth?: number;
-  /**
-   * 标题文本
-   * @default 根据语言自动选择
-   */
-  title?: string;
-  /**
-   * 内容容器选择器，用于限制标题搜索范围
-   * @default "main"
-   */
-  containerSelector?: string;
   /**
    * 显示目录所需的最少标题数量
    * @default 2
    */
   minHeadings?: number;
   /**
-   * 语言
-   * @default 自动检测
+   * 标题选择器
+   * @default "h2, h3"
    */
-  lang?: string;
+  selector?: string;
+  /**
+   * 目录标题文本
+   * @default 根据语言自动选择
+   */
+  title?: string;
 }
 
 const {
-  fixed = true,
   class: className = '',
-  selector = 'h2, h3',
-  maxDepth = 3,
   containerSelector = 'main',
+  fixed = true,
+  lang,
+  maxDepth = 3,
   minHeadings = 2,
+  selector = 'h2, h3',
   title,
 } = Astro.props;
 
@@ -121,13 +95,16 @@ const tocId = `toc-${Math.random().toString(36).substring(2, 9)}`;
 ---
 
 <aside
-  class:list={['cosy:hidden cosy:xl:block cosy:w-64 cosy:shrink-0', className]}>
+  class:list={[
+    'cosy:hidden cosy:xl:block cosy:w-64 cosy:pr-3 cosy:shrink-0',
+    className,
+  ]}>
   <div class="cosy:top-18 cosy:sticky">
     <div
-      class={`toc-container toc-scroll-container ${fixed ? 'cosy:w-64' : 'cosy:w-full cosy:max-w-xs'}`}
+      class={`toc-container toc-scroll-container ${fixed ? 'cosy:w-60' : 'cosy:w-full cosy:max-w-xs'}`}
       id={`${tocId}-container`}
       style="display: none;">
-      <div class="cosy:bg-base-100 cosy:shadow-inner cosy:card">
+      <div class="cosy:bg-base-200 cosy:shadow-inner cosy:card">
         <div class="cosy:p-4 cosy:card-body">
           <div class="cosy:mb-2 cosy:font-bold cosy:text-lg cosy:card-title">
             {titleText}

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

@@ -1,11 +1,3 @@
 import TableOfContents from './TableOfContents.astro';
-import TableOfContentsBasic from './TableOfContentsBasic.astro';
-import BasicSourceCode from './TableOfContentsBasic.astro?raw';
-import { extractSimpleExample } from '../../src/utils/component';
 
-export { TableOfContents, TableOfContentsBasic };
-
-// 导出示例源代码
-export const TableOfContentsExampleCodes = {
-  Basic: extractSimpleExample(BasicSourceCode, 'TableOfContents'),
-};
+export { TableOfContents };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffic/cosy-ui",
-  "version": "0.9.26",
+  "version": "0.9.28",
   "description": "An astro component library",
   "author": {
     "name": "nookery",

package/dist/src-astro/link/LinkAnimations.astro

@@ -1,29 +0,0 @@
----
-import Link from './Link.astro';
----
-
-<div class="cosy:space-y-4">
-  <div class="cosy:flex cosy:gap-4">
-    <Link href="/hover-lift" animation="hover-lift" variant="primary">
-      上浮效果
-    </Link>
-
-    <Link href="/hover-glow" animation="hover-glow" variant="secondary">
-      发光效果
-    </Link>
-
-    <Link href="/hover-scale" animation="hover-scale" variant="cta">
-      缩放效果
-    </Link>
-  </div>
-
-  <div class="cosy:flex cosy:gap-4">
-    <Link href="/block-link" block centerText variant="primary">
-      块级居中链接
-    </Link>
-  </div>
-
-  <div class="cosy:bg-base-200 cosy:p-4">
-    <Link href="/light-variant" variant="light"> 浅色背景中的链接 </Link>
-  </div>
-</div>

package/dist/src-astro/link/LinkBasic.astro

@@ -1,17 +0,0 @@
----
-import Link from './Link.astro';
----
-
-<div class="cosy:space-y-4">
-  <div>
-    <Link href="/about">默认链接</Link>
-  </div>
-
-  <div>
-    <Link href="https://example.com" external>外部链接</Link>
-  </div>
-
-  <div>
-    <p>这是一段文字，其中包含一个<Link href="/inline">内联链接</Link>。</p>
-  </div>
-</div>

package/dist/src-astro/link/LinkVariants.astro

@@ -1,20 +0,0 @@
----
-import Link from './Link.astro';
----
-
-<div class="cosy:space-y-4">
-  <div class="cosy:flex cosy:gap-4">
-    <Link href="/signup" variant="primary">主要链接</Link>
-    <Link href="/learn-more" variant="secondary">次要链接</Link>
-    <Link href="/docs" variant="text">文本链接</Link>
-    <Link href="/get-started" variant="cta">行动号召</Link>
-    <Link href="/preview" variant="ghost">幽灵链接</Link>
-    <Link href="/help" variant="light">浅色链接</Link>
-  </div>
-
-  <div class="cosy:flex cosy:gap-4">
-    <Link href="/small" size="sm">小型链接</Link>
-    <Link href="/medium" size="md">中型链接</Link>
-    <Link href="/large" size="lg">大型链接</Link>
-  </div>
-</div>