@coffic/cosy-ui 0.9.40 → 0.9.41

package/dist/src-astro/stats-display/StatsDisplay.astro

@@ -0,0 +1,201 @@
+---
+/**
+ * @component StatsDisplay
+ *
+ * @description
+ * StatsDisplay 组件用于展示统计数据，采用极简设计风格。
+ * 适合在首页、关于我们页面或产品介绍页面中展示关键数据指标。
+ * 支持多种布局模式和自定义样式。
+ *
+ * StatsDisplay component for showcasing statistical data with minimalist design.
+ * Perfect for displaying key metrics on homepages, about pages, or product introduction pages.
+ * Supports multiple layout modes and custom styling options.
+ *
+ * @design
+ * 设计理念 / Design Principles:
+ * 1. 极简美学 - 大数字、细字重、简洁布局 / Minimalist Aesthetics - Large numbers, thin font weights, clean layouts
+ * 2. 视觉层次 - 通过字体大小和颜色建立清晰层次 / Visual Hierarchy - Clear hierarchy through font sizes and colors
+ * 3. 响应式设计 - 自适应不同屏幕尺寸 / Responsive Design - Adapts to different screen sizes
+ * 4. 可定制性 - 支持多种样式和布局选项 / Customizability - Multiple styling and layout options
+ *
+ * @usage
+ * 基本用法 / Basic Usage:
+ * ```astro
+ * <StatsDisplay
+ *   stats={[
+ *     { value: "10+", label: "年经验" },
+ *     { value: "500+", label: "客户" },
+ *     { value: "1000+", label: "项目" }
+ *   ]}
+ * />
+ * ```
+ *
+ * 自定义样式 / Custom Styling:
+ * ```astro
+ * <StatsDisplay
+ *   stats={[
+ *     { value: "10M+", label: "用户", color: "blue" },
+ *     { value: "20+", label: "奖项", color: "success" }
+ *   ]}
+ *   valueSize="4xl"
+ *   valueColor="primary"
+ *   labelColor="gray"
+ * />
+ * ```
+ *
+ * 预设颜色使用 / Using Preset Colors:
+ * ```astro
+ * <StatsDisplay
+ *   stats={[
+ *     { value: "99%", label: "满意度", color: "success" },
+ *     { value: "24/7", label: "支持", color: "info" }
+ *   ]}
+ *   valueColor="primary"
+ *   labelColor="secondary"
+ * />
+ * ```
+ *
+ * 紧凑模式 / Compact Mode:
+ * ```astro
+ * <StatsDisplay
+ *   stats={stats}
+ *   compact
+ *   columns={2}
+ * />
+ * ```
+ *
+ * @props
+ * @param {Array<{value: string, label: string, color?: string|PresetColor}>} stats - 统计数据数组 / Statistical data array
+ * @param {string} [class] - 自定义CSS类 / Custom CSS class
+ * @param {boolean} [compact] - 是否使用紧凑模式 / Whether to use compact mode
+ * @param {number} [columns] - 列数（响应式）/ Number of columns (responsive)
+ * @param {string} [valueSize] - 数值字体大小 / Font size for values
+ * @param {string|PresetColor} [valueColor] - 数值颜色（支持预设颜色）/ Color for values (supports preset colors)
+ * @param {string|PresetColor} [labelColor] - 标签颜色（支持预设颜色）/ Color for labels (supports preset colors)
+ * @param {string} [valueWeight] - 数值字重 / Font weight for values
+ * @param {string} [labelWeight] - 标签字重 / Font weight for labels
+ * @param {string} [gap] - 项目间距 / Spacing between items
+ * @param {string} [align] - 对齐方式 / Alignment option
+ *
+ * @presetColors
+ * 预设颜色选项 / Preset color options:
+ * - primary: 主色调 (#3b82f6)
+ * - secondary: 次要色调 (#6b7280)
+ * - success: 成功色 (#10b981)
+ * - warning: 警告色 (#f59e0b)
+ * - error: 错误色 (#ef4444)
+ * - info: 信息色 (#06b6d4)
+ * - blue: 蓝色 (#3b82f6)
+ * - green: 绿色 (#10b981)
+ * - yellow: 黄色 (#f59e0b)
+ * - red: 红色 (#ef4444)
+ * - purple: 紫色 (#8b5cf6)
+ * - pink: 粉色 (#ec4899)
+ * - indigo: 靛蓝 (#6366f1)
+ * - gray: 灰色 (#6b7280)
+ */
+
+import '../../style.ts';
+import Text from '../text/Text.astro';
+import type { PresetColor, StatItem } from './types';
+
+// 预设颜色映射 / Preset color mapping
+const PRESET_COLORS: Record<PresetColor, string> = {
+  primary: '#3b82f6',
+  secondary: '#6b7280',
+  success: '#10b981',
+  warning: '#f59e0b',
+  error: '#ef4444',
+  info: '#06b6d4',
+  blue: '#3b82f6',
+  green: '#10b981',
+  yellow: '#f59e0b',
+  red: '#ef4444',
+  purple: '#8b5cf6',
+  pink: '#ec4899',
+  indigo: '#6366f1',
+  gray: '#6b7280',
+};
+
+// 颜色解析函数 / Color resolution function
+const resolveColor = (
+  color: string | PresetColor | undefined,
+  defaultColor: string
+): string => {
+  if (!color) return defaultColor;
+  return PRESET_COLORS[color as PresetColor] || color;
+};
+
+const {
+  stats = [],
+  class: className = '',
+  compact = false,
+  columns = 4,
+  valueSize = '3xl',
+  valueColor = 'primary',
+  labelColor = 'gray',
+  valueWeight = 'thin',
+  labelWeight = 'light',
+  gap = 'lg',
+  align = 'center',
+} = Astro.props;
+
+// 构建容器样式类
+const containerClasses = [
+  'cosy:grid',
+  `cosy:grid-cols-${columns}`,
+  `cosy:gap-${gap}`,
+  `cosy:text-${align}`,
+  compact ? 'cosy:gap-md' : '',
+  className,
+]
+  .filter(Boolean)
+  .join(' ');
+
+// 构建数值样式
+const getValueStyle = (item: StatItem) => {
+  return [
+    `cosy:text-${valueSize}`,
+    `cosy:font-${valueWeight}`,
+    'cosy:mb-2',
+    'cosy:leading-none',
+  ].join(' ');
+};
+
+// 构建标签样式
+const getLabelStyle = () =>
+  [`cosy:text-${labelWeight}`, 'cosy:leading-relaxed'].join(' ');
+
+// 获取数值颜色样式
+const getValueColorStyle = (item: StatItem): string => {
+  const customColor = item.color
+    ? resolveColor(item.color, '#3b82f6')
+    : resolveColor(valueColor, '#3b82f6');
+  return `color: ${customColor};`;
+};
+
+// 获取标签颜色样式
+const getLabelColorStyle = (item: StatItem): string => {
+  // 如果单个项目有自定义颜色，优先使用项目颜色
+  // 否则使用全局 labelColor 设置
+  const customColor = item.color
+    ? resolveColor(item.color, '#6b7280')
+    : resolveColor(labelColor, '#6b7280');
+  return `color: ${customColor};`;
+};
+---
+
+<div class={containerClasses}>
+  {
+    stats.map((stat: StatItem) => (
+      <div class="cosy:flex cosy:flex-col cosy:items-center">
+        <div class={getValueStyle(stat)} style={getValueColorStyle(stat)}>
+          {stat.value}
+        </div>
+        <Text class={getLabelStyle()} style={getLabelColorStyle(stat)}>
+          {stat.label}
+        </Text>
+      </div>
+    ))
+  }
+</div>

package/dist/src-astro/stats-display/index.ts

@@ -0,0 +1,10 @@
+export { default as StatsDisplay } from './StatsDisplay.astro';
+export type {
+    StatsDisplayProps,
+    StatItem,
+    PresetColor,
+    FontSize,
+    FontWeight,
+    Spacing,
+    Alignment
+} from './types';

package/dist/src-astro/stats-display/types.ts

@@ -0,0 +1,79 @@
+/**
+ * @fileoverview StatsDisplay 组件类型定义
+ * Type definitions for StatsDisplay component
+ */
+
+/** 预设颜色类型 / Preset color types */
+export type PresetColor =
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'info'
+    | 'blue'
+    | 'green'
+    | 'yellow'
+    | 'red'
+    | 'purple'
+    | 'pink'
+    | 'indigo'
+    | 'gray';
+
+/** 字体大小类型 / Font size types */
+export type FontSize =
+    | 'xs'
+    | 'sm'
+    | 'base'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | '3xl'
+    | '4xl'
+    | '5xl'
+    | '6xl';
+
+/** 字重类型 / Font weight types */
+export type FontWeight = 'thin' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+
+/** 间距类型 / Spacing types */
+export type Spacing = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+
+/** 对齐方式类型 / Alignment types */
+export type Alignment = 'left' | 'center' | 'right';
+
+/** 统计项接口 / Stat item interface */
+export interface StatItem {
+    /** 数值 / Numeric value */
+    value: string;
+    /** 标签 / Description label */
+    label: string;
+    /** 自定义颜色（可选）/ Custom color (optional) */
+    color?: string | PresetColor;
+}
+
+/** StatsDisplay 组件属性接口 / StatsDisplay component props interface */
+export interface StatsDisplayProps {
+    /** 统计数据数组 / Statistical data array */
+    stats: StatItem[];
+    /** 自定义CSS类 / Custom CSS class */
+    class?: string;
+    /** 是否使用紧凑模式 / Whether to use compact mode */
+    compact?: boolean;
+    /** 列数（响应式）/ Number of columns (responsive) */
+    columns?: number;
+    /** 数值字体大小 / Font size for values */
+    valueSize?: FontSize;
+    /** 数值颜色 / Color for values */
+    valueColor?: string | PresetColor;
+    /** 标签颜色 / Color for labels */
+    labelColor?: string | PresetColor;
+    /** 数值字重 / Font weight for values */
+    valueWeight?: FontWeight;
+    /** 标签字重 / Font weight for labels */
+    labelWeight?: FontWeight;
+    /** 项目间距 / Spacing between items */
+    gap?: Spacing;
+    /** 对齐方式 / Alignment option */
+    align?: Alignment;
+}

package/dist/src-astro/text/Text.astro

@@ -86,6 +86,7 @@
  * @prop {boolean} [underline=false] - 是否添加下划线
  * @prop {boolean} [truncate=false] - 是否截断文本并显示省略号
  * @prop {string} [class] - 自定义 CSS 类名
+ * @prop {string} [style] - 自定义内联样式
  *
  * @slots
  * @slot default - 文本内容
@@ -107,6 +108,7 @@ export interface Props {
   underline?: boolean;
   truncate?: boolean;
   class?: string;
+  style?: string;
 }
 
 const {
@@ -119,6 +121,7 @@ const {
   underline = false,
   truncate = false,
   class: className = '',
+  style = '',
 } = Astro.props;
 
 // 根据大小设置样式
@@ -169,7 +172,7 @@ const truncateClass = truncate ? 'cosy:truncate' : '';
 const combinedClass = `text ${sizeClass} ${weightClass} ${colorClass} ${alignClass} ${italicClass} ${underlineClass} ${truncateClass} ${className}`;
 ---
 
-<Element class={combinedClass}>
+<Element class={combinedClass} style={style}>
   <slot />
 </Element>
 

package/dist/src-vue/container/Container.vue

@@ -20,98 +20,100 @@ import { allBackgroundClasses } from './backgrounds';
  * @props {string} [background] - 预设的语义化背景色，使用 Tailwind v4 语法（如 bg-primary/50）
  */
 
-interface Props extends IContainerProps { }
+interface Props extends IContainerProps {}
 
 const props = withDefaults(defineProps<Props>(), {
-    size: 'md',
-    padding: 'md',
-    centered: true,
-    border: false,
-    gap: 'none',
-    rounded: 'none',
-    class: '',
+  padding: 'md',
+  centered: true,
+  border: false,
+  gap: 'none',
+  rounded: 'none',
+  class: '',
 });
 
 // 静态类名映射
 const sizeClasses = {
-    xs: 'cosy:max-w-xs',
-    sm: 'cosy:max-w-sm',
-    md: 'cosy:max-w-2xl',
-    lg: 'cosy:max-w-4xl',
-    xl: 'cosy:max-w-6xl',
-    full: 'cosy:w-full',
+  none: '',
+  xs: 'cosy:max-w-xs',
+  sm: 'cosy:max-w-sm',
+  md: 'cosy:max-w-2xl',
+  lg: 'cosy:max-w-4xl',
+  xl: 'cosy:max-w-6xl',
+  full: 'cosy:w-full',
 } as const;
 
 const paddingClasses = {
-    none: 'cosy:p-0',
-    sm: 'cosy:p-2',
-    md: 'cosy:p-4',
-    lg: 'cosy:p-6',
-    xl: 'cosy:p-8',
+  none: 'cosy:p-0',
+  sm: 'cosy:p-2',
+  md: 'cosy:p-4',
+  lg: 'cosy:p-6',
+  xl: 'cosy:p-8',
 } as const;
 
 const roundedClasses = {
-    none: '',
-    sm: 'cosy:rounded-sm',
-    md: 'cosy:rounded-md',
-    lg: 'cosy:rounded-lg',
-    xl: 'cosy:rounded-xl',
-    full: 'cosy:rounded-full',
+  none: '',
+  sm: 'cosy:rounded-sm',
+  md: 'cosy:rounded-md',
+  lg: 'cosy:rounded-lg',
+  xl: 'cosy:rounded-xl',
+  full: 'cosy:rounded-full',
 } as const;
 
 const flexClasses = {
-    row: 'cosy:flex cosy:flex-row',
-    col: 'cosy:flex cosy:flex-col',
-    'row-reverse': 'cosy:flex cosy:flex-row-reverse',
-    'col-reverse': 'cosy:flex cosy:flex-col-reverse',
+  row: 'cosy:flex cosy:flex-row',
+  col: 'cosy:flex cosy:flex-col',
+  'row-reverse': 'cosy:flex cosy:flex-row-reverse',
+  'col-reverse': 'cosy:flex cosy:flex-col-reverse',
 } as const;
 
 const gapClasses = {
-    none: 'cosy:gap-0',
-    xs: 'cosy:gap-1',
-    sm: 'cosy:gap-2',
-    md: 'cosy:gap-4',
-    lg: 'cosy:gap-6',
-    xl: 'cosy:gap-8',
+  none: 'cosy:gap-0',
+  xs: 'cosy:gap-1',
+  sm: 'cosy:gap-2',
+  md: 'cosy:gap-4',
+  lg: 'cosy:gap-6',
+  xl: 'cosy:gap-8',
 } as const;
 
 const itemsClasses = {
-    start: 'cosy:items-start',
-    end: 'cosy:items-end',
-    center: 'cosy:items-center',
-    baseline: 'cosy:items-baseline',
-    stretch: 'cosy:items-stretch',
+  start: 'cosy:items-start',
+  end: 'cosy:items-end',
+  center: 'cosy:items-center',
+  baseline: 'cosy:items-baseline',
+  stretch: 'cosy:items-stretch',
 } as const;
 
 const justifyClasses = {
-    start: 'cosy:justify-start',
-    end: 'cosy:justify-end',
-    center: 'cosy:justify-center',
-    between: 'cosy:justify-between',
-    around: 'cosy:justify-around',
-    evenly: 'cosy:justify-evenly',
+  start: 'cosy:justify-start',
+  end: 'cosy:justify-end',
+  center: 'cosy:justify-center',
+  between: 'cosy:justify-between',
+  around: 'cosy:justify-around',
+  evenly: 'cosy:justify-evenly',
 } as const;
 
 // 构建CSS类名
+const resolvedSize = computed(() => props.width ?? 'md');
+
 const containerClasses = computed(() => [
-    'cosy:w-full',
-    props.centered ? 'cosy:mx-auto' : '',
-    sizeClasses[props.size],
-    paddingClasses[props.padding],
-    roundedClasses[props.rounded],
-    props.border ? 'cosy:border' : '',
-    props.flex ? flexClasses[props.flex] : '',
-    props.flex ? gapClasses[props.gap] : '',
-    props.items && props.flex ? itemsClasses[props.items] : '',
-    props.justify && props.flex ? justifyClasses[props.justify] : '',
-    // 处理背景色 - 使用预定义的完整类名
-    props.background ? allBackgroundClasses[props.background] : '',
-    props.class,
+  'cosy:w-full',
+  props.centered ? 'cosy:mx-auto' : '',
+  sizeClasses[resolvedSize.value],
+  paddingClasses[props.padding],
+  roundedClasses[props.rounded],
+  props.border ? 'cosy:border' : '',
+  props.flex ? flexClasses[props.flex] : '',
+  props.flex ? gapClasses[props.gap] : '',
+  props.items && props.flex ? itemsClasses[props.items] : '',
+  props.justify && props.flex ? justifyClasses[props.justify] : '',
+  // 处理背景色 - 使用预定义的完整类名
+  props.background ? allBackgroundClasses[props.background] : '',
+  props.class,
 ]);
 </script>
 
 <template>
-    <section :class="containerClasses" container>
-        <slot />
-    </section>
+  <section :class="containerClasses" container>
+    <slot />
+  </section>
 </template>

package/dist/src-vue/container/types.ts

@@ -49,10 +49,10 @@ export interface IContainerProps {
     padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
 
     /**
-     * 容器尺寸
-     * @default "md"
+     * （推荐）容器宽度（与 Astro 版本保持一致）
+     * 与 size 等价；如同时传入，优先使用 width
      */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    width?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 
     /**
      * 圆角大小

package/dist/src-vue/heading/Heading.vue

@@ -23,11 +23,13 @@ import type { IHeadingProps } from './types';
  * 1. 层次清晰 - 通过不同级别的标题建立内容的视觉层次结构
  * 2. 一致性 - 确保整个应用中标题样式的一致性
  * 3. 可定制性 - 支持多种配置选项，适应不同场景需求
- * 4. 无障碍性 - 遵循语义化HTML标准，确保屏幕阅读器可以正确解析内容结构
- * 5. 链接支持 - 标题可以作为链接使用，提供更好的导航体验
+ * 4. 字体控制 - 提供精细的字体粗细控制，满足不同设计需求
+ * 5. 无障碍性 - 遵循语义化HTML标准，确保屏幕阅读器可以正确解析内容结构
+ * 6. 链接支持 - 标题可以作为链接使用，提供更好的导航体验
  *
  * 视觉特点：
  * - 字体大小和粗细随级别变化
+ * - 支持自定义字体粗细（thin 到 black 共8个级别）
  * - 可选的下划线或底部边框
  * - 可定制的颜色和间距
  * - 响应式设计，在不同屏幕尺寸下保持良好的可读性
@@ -76,6 +78,18 @@ import type { IHeadingProps } from './types';
  * <Heading :level="3" background="primary" color="white">主要背景色标题</Heading>
  * ```
  *
+ * 字体粗细支持：
+ * ```vue
+ * <Heading :level="2" weight="thin">细体标题</Heading>
+ * <Heading :level="2" weight="light">轻体标题</Heading>
+ * <Heading :level="2" weight="normal">正常标题</Heading>
+ * <Heading :level="2" weight="medium">中等标题</Heading>
+ * <Heading :level="2" weight="semibold">半粗体标题</Heading>
+ * <Heading :level="2" weight="bold">粗体标题</Heading>
+ * <Heading :level="2" weight="extrabold">特粗体标题</Heading>
+ * <Heading :level="2" weight="black">超粗体标题</Heading>
+ * ```
+ *
  * @props
  * @prop {'left'|'center'|'right'} [align='left'] - 文本对齐方式
  * @prop {boolean} [anchor=false] - 是否显示锚点链接图标
@@ -89,6 +103,7 @@ import type { IHeadingProps } from './types';
  * @prop {'none'|'sm'|'md'|'lg'|'xl'} [margin='md'] - 上下外边距大小
  * @prop {'none'|'sm'|'md'|'lg'|'xl'} [padding='none'] - 内边距大小（仅在设置背景色时生效）
  * @prop {boolean} [underline=false] - 是否显示下划线
+ * @prop {'thin'|'light'|'normal'|'medium'|'semibold'|'bold'|'extrabold'|'black'} [weight] - 字体粗细，不指定时根据标题级别使用默认粗细（h1: bold, h2-h3: semibold, h4-h6: medium）
  *
  * @slots
  * @slot default - 标题内容
@@ -115,21 +130,60 @@ const props = withDefaults(defineProps<Props>(), {
   margin: 'md',
   padding: 'none',
   underline: false,
+  weight: undefined,
 });
 
-// 根据级别和颜色设置样式
-const headingClass = computed(() => {
+// 字体粗细映射
+const weightClassMap = {
+  thin: 'cosy:font-thin',
+  light: 'cosy:font-light',
+  normal: 'cosy:font-normal',
+  medium: 'cosy:font-medium',
+  semibold: 'cosy:font-semibold',
+  bold: 'cosy:font-bold',
+  extrabold: 'cosy:font-extrabold',
+  black: 'cosy:font-black',
+};
+
+// 根据级别设置基础样式（不包含字体粗细）
+const baseHeadingClass = computed(() => {
   const levelMap = {
-    1: 'cosy:text-4xl cosy:font-bold',
-    2: 'cosy:text-3xl cosy:font-semibold',
-    3: 'cosy:text-2xl cosy:font-semibold',
-    4: 'cosy:text-xl cosy:font-medium',
-    5: 'cosy:text-lg cosy:font-medium',
-    6: 'cosy:text-base cosy:font-medium',
+    1: 'cosy:text-4xl',
+    2: 'cosy:text-3xl',
+    3: 'cosy:text-2xl',
+    4: 'cosy:text-xl',
+    5: 'cosy:text-lg',
+    6: 'cosy:text-base',
   };
   return levelMap[props.level as keyof typeof levelMap] || levelMap[2];
 });
 
+// 默认字体粗细（当未指定 weight 时使用）
+const defaultWeightClass = computed(() => {
+  const defaultMap = {
+    1: 'cosy:font-bold',
+    2: 'cosy:font-semibold',
+    3: 'cosy:font-semibold',
+    4: 'cosy:font-medium',
+    5: 'cosy:font-medium',
+    6: 'cosy:font-medium',
+  };
+  return defaultMap[props.level as keyof typeof defaultMap] || defaultMap[2];
+});
+
+// 字体粗细样式
+const weightClass = computed(() => {
+  if (props.weight && props.weight in weightClassMap) {
+    return weightClassMap[props.weight as keyof typeof weightClassMap];
+  }
+  return defaultWeightClass.value;
+});
+
+// 组合标题样式类
+const headingClass = computed(() => {
+  return `${baseHeadingClass.value} ${weightClass.value}`;
+});
+
 const colorClass = computed(() => {
   const colorMap = {
     default: '',

package/dist/src-vue/heading/types.ts

@@ -22,5 +22,14 @@ export interface IHeadingProps {
     margin?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
     padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
     underline?: boolean;
+    weight?:
+    | 'thin'
+    | 'light'
+    | 'normal'
+    | 'medium'
+    | 'semibold'
+    | 'bold'
+    | 'extrabold'
+    | 'black';
 }