@coffic/cosy-ui 0.7.2 → 0.8.6

package/dist/src-astro/assets/iconData.ts

@@ -0,0 +1,117 @@
+/**
+ * 图标数据共享文件
+ * 这个文件包含所有图标的SVG路径数据
+ * 供Astro和Vue组件共同使用
+ */
+
+export interface IconData {
+  /**
+   * 图标路径数据
+   */
+  path: string;
+  /**
+   * 额外的视图框设置，默认为"0 0 24 24"
+   */
+  viewBox?: string;
+}
+
+export const iconData: Record<string, IconData> = {
+  // 警告三角形图标
+  alertTriangle: {
+    path: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
+  },
+
+  // 成功检查图标
+  checkCircle: {
+    path: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
+  },
+
+  // 信息图标
+  infoCircle: {
+    path: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+  },
+
+  // 错误图标
+  xCircle: {
+    path: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z',
+  },
+
+  // 搜索图标
+  search: {
+    path: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z',
+  },
+
+  // 设置图标
+  settings: {
+    path: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z',
+  },
+
+  // 信息图标
+  info: {
+    path: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+  },
+
+  // 用户图标
+  user: {
+    path: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
+  },
+
+  // 菜单图标
+  menu: {
+    path: 'M4 6h16M4 12h16M4 18h16',
+  },
+
+  // 关闭图标
+  close: {
+    path: 'M6 18L18 6M6 6l12 12',
+  },
+
+  // 检查图标
+  check: {
+    path: 'M5 13l4 4L19 7',
+  },
+
+  // 下拉图标
+  chevronDown: {
+    path: 'M19 9l-7 7-7-7',
+  },
+
+  // 日历图标
+  calendar: {
+    path: 'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z',
+  },
+
+  // 链接图标
+  link: {
+    path: 'M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1',
+  },
+
+  // 剪贴板图标
+  clipboard: {
+    path: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2',
+  },
+
+  // 收件箱归档图标
+  inboxArchive: {
+    path: 'M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4',
+  },
+
+  // GitHub 图标
+  github: {
+    path: 'M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z',
+  },
+
+  // 领英图标
+  linkedin: {
+    path: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z',
+  },
+
+  // Twitter 图标
+  twitter: {
+    path: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z',
+  },
+
+  sunCloudy: {
+    path: 'M9.98392 5.05991C11.1323 3.22236 13.1734 2 15.5 2C19.0899 2 22 4.91015 22 8.5C22 9.58031 21.7365 10.5991 21.2701 11.4955C22.3351 12.4985 23 13.9216 23 15.5C23 18.5376 20.5376 21 17.5 21H9C4.58172 21 1 17.4183 1 13C1 8.58172 4.58172 5 9 5C9.33312 5 9.66149 5.02036 9.98392 5.05991ZM12.0554 5.60419C14.0675 6.43637 15.6662 8.06578 16.4576 10.0986C16.7951 10.0339 17.1436 10 17.5 10C18.2351 10 18.9366 10.1442 19.5776 10.4059C19.8486 9.82719 20 9.18128 20 8.5C20 6.01472 17.9853 4 15.5 4C14.1177 4 12.8809 4.6233 12.0554 5.60419ZM17.5 19C19.433 19 21 17.433 21 15.5C21 13.567 19.433 12 17.5 12C16.5205 12 15.6351 12.4023 14.9998 13.0507C14.9999 13.0338 15 13.0169 15 13C15 9.68629 12.3137 7 9 7C5.68629 7 3 9.68629 3 13C3 16.3137 5.68629 19 9 19H17.5Z',
+  },
+};

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

@@ -0,0 +1,174 @@
+---
+/**
+ * @component Banner
+ *
+ * @description
+ * Banner 组件用于在页面中展示醒目的横幅信息，通常用于展示重要的标语、公告或营销信息。
+ * 组件设计简洁大方，具有平滑的动画效果，能够吸引用户注意力。
+ *
+ * @design
+ * 设计理念：
+ * 1. 视觉冲击力 - 使用大号字体和醒目的背景，确保信息能够被用户注意到
+ * 2. 简洁明了 - 简单的布局和充足的留白，让信息更容易被理解
+ * 3. 动态效果 - 支持多种动画效果选择
+ * 4. 响应式设计 - 在不同屏幕尺寸下保持良好的可读性
+ *
+ * 视觉特点：
+ * - 圆角设计：柔和的视觉效果
+ * - 悬停效果：轻微放大和阴影增强，提供交互反馈
+ * - 动画效果：支持淡入、上滑或组合动画
+ * - 模糊背景：半透明背景配合模糊效果，现代感强
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Banner>欢迎使用我们的服务</Banner>
+ * ```
+ *
+ * 指定动画效果：
+ * ```astro
+ * <Banner animation="fade">淡入效果的横幅</Banner>
+ * ```
+ *
+ * @slots
+ * @slot default - Banner 中显示的文本内容
+ *
+ * @accessibility
+ * - 使用适当的字体大小和行高，确保文本可读性
+ * - 动画遵循 prefers-reduced-motion 媒体查询，尊重用户的动画偏好设置
+ */
+
+import '../../style.ts';
+
+interface Props {
+  /**
+   * 自定义CSS类，可用于覆盖默认样式
+   */
+  class?: string;
+
+  /**
+   * 背景颜色，默认为primary
+   */
+  bgColor?:
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error';
+
+  /**
+   * 文本颜色，默认根据背景色自动设置
+   */
+  textColor?: string;
+
+  /**
+   * 动画效果类型，可选值：
+   * - 'none': 无动画
+   * - 'fade': 仅淡入效果
+   * - 'slide': 仅上滑效果
+   * - 'both': 淡入和上滑效果
+   * 默认为'both'
+   */
+  animation?: 'none' | 'fade' | 'slide' | 'both';
+
+  /**
+   * @deprecated 使用animation属性替代
+   */
+  animated?: boolean;
+}
+
+const {
+  class: className = '',
+  bgColor = 'primary',
+  textColor = '',
+  animation = 'both',
+  animated, // 向后兼容
+} = Astro.props;
+
+// 处理向后兼容
+const effectiveAnimation = animated === false ? 'none' : animation;
+
+// 根据背景色自动设置文本颜色
+const getTextColorClass = () => {
+  if (textColor) return `cosy:text-${textColor}`;
+
+  // 对于深色背景，使用白色文本
+  const darkBgColors = ['primary', 'secondary', 'accent', 'error'];
+  return darkBgColors.includes(bgColor)
+    ? 'cosy:text-white'
+    : 'cosy:text-gray-800';
+};
+
+// 组合CSS类
+const bannerClasses = [
+  'cosy:w-full',
+  'cosy:py-8',
+  'cosy:px-4',
+  'cosy:rounded-lg',
+  'cosy:text-center',
+  'cosy:text-2xl',
+  'cosy:md:text-3xl',
+  'cosy:font-bold',
+  'cosy:transition-all',
+  'cosy:duration-300',
+  'cosy:ease-in-out',
+  'cosy:backdrop-blur-sm',
+  'cosy:bg-opacity-90',
+  'cosy:shadow-md',
+  'cosy:hover:shadow-lg',
+  'cosy:hover:scale-[1.01]',
+  `cosy:bg-${bgColor}`,
+  getTextColorClass(),
+  className,
+].join(' ');
+
+// 动画类
+const animationClasses = {
+  none: '',
+  fade: 'cosy:animate-fadeIn',
+  slide: 'cosy:animate-slideUp',
+  both: 'cosy:animate-fadeIn cosy:animate-slideUp',
+}[effectiveAnimation];
+---
+
+<div class={`${bannerClasses} ${animationClasses}`}>
+  <slot />
+</div>
+
+<style>
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideUp {
+    from {
+      transform: translateY(20px);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  /* 动画类 */
+  .cosy\:animate-fadeIn {
+    animation: fadeIn 0.8s ease-in-out;
+  }
+
+  .cosy\:animate-slideUp {
+    animation: slideUp 0.5s ease-out;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cosy\:animate-fadeIn,
+    .cosy\:animate-slideUp {
+      animation: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,10 @@
+---
+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/{banner → src-astro/banner}/BannerBasic.astro

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

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

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

package/dist/{banner → src-astro/banner}/BannerDanger.astro

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

package/dist/{banner → src-astro/banner}/BannerFadeIn.astro

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

package/dist/{banner → src-astro/banner}/BannerInfo.astro

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

package/dist/{banner → src-astro/banner}/BannerPrimary.astro

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

package/dist/{banner → src-astro/banner}/BannerSecondary.astro

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

package/dist/{banner → src-astro/banner}/BannerSlideUp.astro

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

package/dist/{banner → src-astro/banner}/BannerSuccess.astro

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

package/dist/{banner → src-astro/banner}/BannerWarning.astro

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

package/dist/{banner → src-astro/banner}/index.ts

@@ -23,7 +23,20 @@ import SlideUpSourceCode from './BannerSlideUp.astro?raw';
 import AllAnimationsSourceCode from './BannerAllAnimations.astro?raw';
 import { extractSimpleExample } from '../utils/component';
 
-export { Banner, BannerBasic, BannerPrimary, BannerSecondary, BannerSuccess, BannerWarning, BannerDanger, BannerInfo, BannerCustomStyle, BannerFadeIn, BannerSlideUp, BannerAllAnimations };
+export {
+  Banner,
+  BannerBasic,
+  BannerPrimary,
+  BannerSecondary,
+  BannerSuccess,
+  BannerWarning,
+  BannerDanger,
+  BannerInfo,
+  BannerCustomStyle,
+  BannerFadeIn,
+  BannerSlideUp,
+  BannerAllAnimations,
+};
 
 // 导出示例源代码
 export const BannerExampleCodes = {
@@ -38,4 +51,4 @@ export const BannerExampleCodes = {
   FadeIn: extractSimpleExample(FadeInSourceCode, 'Banner'),
   SlideUp: extractSimpleExample(SlideUpSourceCode, 'Banner'),
   AllAnimations: extractSimpleExample(AllAnimationsSourceCode, 'Banner'),
-};
+};

package/dist/src-astro/button/Button.astro

@@ -0,0 +1,192 @@
+---
+/**
+ * @component Button
+ *
+ * @description
+ * Button 组件用于触发一个即时操作，如表单提交、打开对话框等。
+ * 支持多种样式变体、尺寸和状态，可以满足不同场景的需求。
+ *
+ * @design
+ * 设计理念：
+ * 1. 直观易用 - 通过视觉差异清晰传达按钮的重要性和功能
+ * 2. 响应式交互 - 提供丰富的状态反馈，增强用户体验
+ * 3. 可定制性 - 支持多种配置选项，适应不同场景需求
+ * 4. 无障碍性 - 确保所有用户都能获得良好体验
+ *
+ * 视觉特点：
+ * - 悬停效果：轻微上浮和阴影增强
+ * - 点击效果：轻微下沉
+ * - 加载状态：显示加载动画
+ * - 多种颜色变体：适应不同场景和语义
+ * - 多种尺寸：适应不同布局需求
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Button>默认按钮</Button>
+ * <Button variant="primary">主要按钮</Button>
+ * ```
+ *
+ * 不同尺寸：
+ * ```astro
+ * <Button size="sm">小型按钮</Button>
+ * <Button size="lg">大型按钮</Button>
+ * ```
+ *
+ * 状态变化：
+ * ```astro
+ * <Button disabled>禁用按钮</Button>
+ * <Button loading>加载中</Button>
+ * ```
+ *
+ * 带图标：
+ * ```astro
+ * <Button>
+ *   <span slot="icon-left">👈</span>
+ *   左侧图标
+ * </Button>
+ * ```
+ *
+ * 链接按钮：
+ * ```astro
+ * <Button href="https://example.com">跳转链接</Button>
+ * <Button href="https://example.com" target="_blank">新窗口打开</Button>
+ * ```
+ */
+
+// 导入样式
+import '../../style.ts';
+
+interface Props {
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'ghost'
+    | 'link'
+    | 'outline'
+    | 'neutral';
+  size?: 'lg' | 'md' | 'sm' | 'xs';
+  shape?: 'circle' | 'square';
+  wide?: boolean;
+  block?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  type?: 'button' | 'submit' | 'reset';
+  class?: string;
+  onClick?: string;
+  formmethod?: string;
+  href?: string;
+  target?: string;
+  [key: string]: any; // 允许任意自定义属性
+}
+
+const {
+  variant = 'primary',
+  size = 'md',
+  shape,
+  wide = false,
+  block = false,
+  loading = false,
+  disabled = false,
+  type = 'button',
+  class: className,
+  onClick,
+  formmethod,
+  href,
+  target,
+  ...rest
+} = Astro.props;
+
+// 计算按钮的类名
+const getButtonClasses = () => {
+  const classes = ['cosy:btn'];
+
+  // Variant classes
+  const variantClasses = {
+    primary: 'cosy:btn-primary',
+    secondary: 'cosy:btn-secondary',
+    accent: 'cosy:btn-accent',
+    info: 'cosy:btn-info',
+    success: 'cosy:btn-success',
+    warning: 'cosy:btn-warning',
+    error: 'cosy:btn-error',
+    ghost: 'cosy:btn-ghost',
+    link: 'cosy:btn-link',
+    outline: 'cosy:btn-outline',
+    neutral: 'cosy:btn-neutral',
+  };
+
+  // Size classes
+  const sizeClasses = {
+    lg: 'cosy:btn-lg',
+    md: 'cosy:btn-md',
+    sm: 'cosy:btn-sm',
+    xs: 'cosy:btn-xs',
+  };
+
+  // Shape classes
+  const shapeClasses = {
+    circle: 'cosy:btn-circle',
+    square: 'cosy:btn-square',
+  };
+
+  if (variantClasses[variant]) {
+    classes.push(variantClasses[variant]);
+  }
+
+  if (sizeClasses[size]) {
+    classes.push(sizeClasses[size]);
+  }
+
+  if (shape && shapeClasses[shape]) {
+    classes.push(shapeClasses[shape]);
+  }
+
+  if (wide) classes.push('cosy:btn-wide');
+  if (block) classes.push('cosy:btn-block');
+  if (loading) classes.push('cosy:loading');
+  if (className) classes.push(className);
+
+  return classes;
+};
+
+const buttonClasses = getButtonClasses();
+---
+
+{
+  href ? (
+    <a
+      href={href}
+      class:list={buttonClasses}
+      target={target}
+      onclick={onClick}
+      data-variant={variant}
+      {...rest}>
+      <span class="cosy:flex cosy:items-center cosy:gap-2">
+        <slot name="icon-left" />
+        <slot />
+        <slot name="icon-right" />
+      </span>
+    </a>
+  ) : (
+    <button
+      type={formmethod === 'dialog' ? 'submit' : type}
+      class:list={buttonClasses}
+      disabled={disabled}
+      onclick={onClick}
+      formmethod={formmethod}
+      data-variant={variant}
+      {...rest}>
+      <span class="cosy:flex cosy:items-center cosy:gap-2">
+        <slot name="icon-left" />
+        <slot />
+        <slot name="icon-right" />
+      </span>
+    </button>
+  )
+}

package/dist/src-astro/button/ButtonBasic.astro

@@ -0,0 +1,18 @@
+---
+import Button from './Button.astro';
+---
+
+<div class="cosy:flex cosy:flex-wrap cosy:gap-2">
+  <Button>默认按钮</Button>
+  <Button variant="primary">主要按钮</Button>
+  <Button variant="secondary">次要按钮</Button>
+  <Button variant="accent">强调按钮</Button>
+  <Button variant="info">信息按钮</Button>
+  <Button variant="success">成功按钮</Button>
+  <Button variant="warning">警告按钮</Button>
+  <Button variant="error">错误按钮</Button>
+  <Button variant="ghost">幽灵按钮</Button>
+  <Button variant="link">链接按钮</Button>
+  <Button variant="outline">轮廓按钮</Button>
+  <Button variant="neutral">中性按钮</Button>
+</div>

package/dist/{button → src-astro/button}/ButtonBasicContainer.astro

@@ -1,11 +1,11 @@
 ---
-import { CodeContainer } from '../index';
+import { CodeContainer } from '../../index-astro';
 import ButtonBasic from './ButtonBasic.astro';
 import ButtonBasicSourceCode from './ButtonBasic.astro?raw';
 ---
 
 <CodeContainer codes={[ButtonBasicSourceCode]} titles={['Basic']}>
-	<div id="tab-1">
-		<ButtonBasic />
-	</div>
+  <div id="tab-1">
+    <ButtonBasic />
+  </div>
 </CodeContainer>

package/dist/src-astro/button/ButtonIconBoth.astro

@@ -0,0 +1,9 @@
+---
+import Button from './Button.astro';
+---
+
+<Button>
+  <span slot="icon-left">←</span>
+  两侧图标按钮
+  <span slot="icon-right">→</span>
+</Button>

package/dist/{button → src-astro/button}/ButtonIconLeft.astro

@@ -3,6 +3,6 @@ import Button from './Button.astro';
 ---
 
 <Button>
-	<span slot="icon-left">←</span>
-	左侧图标按钮
+  <span slot="icon-left">←</span>
+  左侧图标按钮
 </Button>

package/dist/{button → src-astro/button}/ButtonIconRight.astro

@@ -3,6 +3,6 @@ import Button from './Button.astro';
 ---
 
 <Button>
-	右侧图标按钮
-	<span slot="icon-right">→</span>
+  右侧图标按钮
+  <span slot="icon-right">→</span>
 </Button>