@coffic/cosy-ui 0.9.10 → 0.9.11

package/dist/index-astro.ts

@@ -5,6 +5,7 @@ export * from './src-astro/banner';
 export * from './src-astro/badge';
 export * from './src-astro/button/index_astro';
 export * from './src-astro/card';
+export * from './src-astro/card-course';
 export * from './src-astro/code-block';
 export * from './src-astro/code-container';
 export * from './src-astro/code-example';
@@ -39,6 +40,7 @@ export * from './src-astro/products';
 export * from './src-astro/register';
 export * from './src-astro/section';
 export * from './src-astro/sidebar';
+export * from './src-astro/smart-bg';
 export * from './src-astro/speak';
 export * from './src-astro/stack';
 export * from './src-astro/team-member';

package/dist/src-astro/card/Card.astro

@@ -70,12 +70,21 @@
 
 import '../../style.ts';
 
-interface Props {
+/**
+ * Card 组件的 Props 接口
+ */
+export interface CardProps {
+  /** 卡片标题 */
   title: string;
+  /** 卡片副标题或描述 */
   subtitle?: string;
+  /** 卡片顶部图片的URL */
   imageUrl?: string;
+  /** 如果提供，卡片将变成可点击的链接 */
   href?: string;
+  /** 是否使用紧凑模式 */
   compact?: boolean;
+  /** 自定义CSS类，可用于覆盖默认样式 */
   class?: string;
 }
 

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

@@ -1,17 +1 @@
 export { default as Card } from './Card.astro';
-export { default as CardCourse } from './CardCourse.astro';
-
-// Export types
-export interface CardProps {
-  title: string;
-  subtitle?: string;
-  imageUrl?: string;
-  href?: string;
-  compact?: boolean;
-  class?: string;
-}
-
-export interface CardCourseProps {
-  title: string;
-  link: string;
-}

package/dist/src-astro/card-course/CardCourse.astro

@@ -0,0 +1,83 @@
+---
+/**
+ * @component CardCourse
+ *
+ * @description
+ * 课程卡片组件，用于展示课程信息，具有统一的设计风格。支持动态图标和渐变背景。
+ *
+ * @usage
+ * ```astro
+ * <CardCourse courseName="React 基础教程" lang="zh" href="/courses/react-basics" />
+ * ```
+ *
+ * @props
+ * - courseName: string - 课程标题
+ * - description?: string - 课程描述
+ * - lang: string - 语言（"en" 或 "zh"）
+ * - href: string - 课程链接
+ * - iconSize?: "sm" | "md" | "lg" | "xl" - 图标尺寸，默认为 "md"
+ */
+
+import '../../style.ts';
+import { formatDisplayName, getIconSizeClasses } from './config';
+import CardCourseIcon from './CardCourseIcon.astro';
+import CardCourseContent from './CardCourseContent.astro';
+import CardCourseButton from './CardCourseButton.astro';
+import { SmartBg } from '../smart-bg';
+
+interface Props {
+  courseName: string;
+  description?: string;
+  lang: string;
+  href: string;
+  iconSize?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+const {
+  courseName,
+  description = '',
+  lang,
+  href,
+  iconSize = 'md',
+} = Astro.props;
+
+const displayName = formatDisplayName(courseName);
+const iconSizeClasses = getIconSizeClasses(iconSize);
+---
+
+<div
+  class={`
+    cosy:card 
+    cosy:shadow-lg
+    cosy:hover:shadow-2xl 
+    cosy:hover:scale-105 
+    cosy:overflow-hidden
+    cosy:relative 
+    cosy:group 
+    cosy:cursor-pointer 
+    cosy:transform 
+    cosy:ease-in-out
+    cosy:transition-all
+    cosy:duration-300
+    cosy:border
+    cosy:border-base-content/30
+    cosy:backdrop-blur-sm`}>
+  <!-- 背景 -->
+  <SmartBg
+    keyword={courseName}
+    class="cosy:card-body cosy:p-6 cosy:relative cosy:z-10"
+    enableGradient={true}>
+    <!-- 背景图标 -->
+    <CardCourseIcon courseName={courseName} iconSizeClasses={iconSizeClasses} />
+
+    <div class="cosy:card-body cosy:p-6 cosy:relative cosy:z-10">
+      <!-- 内容区域 -->
+      <CardCourseContent displayName={displayName} description={description} />
+
+      <!-- 按钮区域 -->
+      <div class="cosy:card-actions cosy:justify-start cosy:mt-4">
+        <CardCourseButton href={href} lang={lang} />
+      </div>
+    </div>
+  </SmartBg>
+</div>

package/dist/src-astro/card-course/CardCourseButton.astro

@@ -0,0 +1,19 @@
+---
+/**
+ * @component CardCourseButton
+ * @description 课程卡片按钮组件，使用组件库中的 Button 组件
+ */
+
+import { Button } from '../../index-astro';
+
+interface Props {
+  href: string;
+  lang: string;
+}
+
+const { href, lang } = Astro.props;
+---
+
+<Button href={href} variant="primary" size="md">
+  {lang === 'en' ? 'Start Learning' : '开始学习'}
+</Button>

package/dist/src-astro/card-course/CardCourseContent.astro

@@ -0,0 +1,29 @@
+---
+/**
+ * @component CardCourseContent
+ * @description 课程卡片内容区域组件，包含标题和描述
+ */
+
+interface Props {
+  displayName: string;
+  description?: string;
+}
+
+const { displayName, description } = Astro.props;
+---
+
+<!-- 标题和描述区域 -->
+<div
+  class="cosy:mb-4 cosy:transition-all cosy:duration-300 hover:cosy:transform hover:cosy:translate-x-1">
+  <h3
+    class="cosy:text-lg cosy:font-semibold cosy:truncate cosy:text-start cosy:transition-all cosy:duration-300 hover:cosy:scale-105 cosy:origin-left cosy:group-hover:cosy:animate-bounce">
+    {displayName}
+  </h3>
+  {
+    description && (
+      <p class="cosy:text-sm cosy:mt-4 cosy:line-clamp-3 cosy:text-start cosy:transition-all cosy:duration-300 hover:cosy:opacity-80 cosy:transform hover:cosy:translate-x-1 cosy:group-hover:cosy:animate-pulse">
+        {description}
+      </p>
+    )
+  }
+</div>

package/dist/src-astro/card-course/CardCourseIcon.astro

@@ -0,0 +1,20 @@
+---
+/**
+ * @component CardCourseIcon
+ * @description 课程卡片背景图标组件，处理图标的显示和动画
+ */
+
+import { SmartIcon } from '../icons';
+
+interface Props {
+  courseName: string;
+  iconSizeClasses: string;
+}
+
+const { courseName, iconSizeClasses } = Astro.props;
+---
+
+<div
+  class={`cosy:absolute cosy:top-2 cosy:right-2 cosy:opacity-30 hover:cosy:opacity-50 cosy:transition-all cosy:duration-500 cosy:ease-out hover:cosy:scale-110 hover:cosy:rotate-12 ${iconSizeClasses} cosy:group-hover:cosy:animate-pulse`}>
+  <SmartIcon keyword={courseName} class="cosy:w-full cosy:h-full" />
+</div>

package/dist/src-astro/card-course/config.ts

@@ -0,0 +1,39 @@
+/**
+ * 图标尺寸配置
+ * 预设的几种图标尺寸类名
+ */
+export const iconSizeConfig: Record<string, string> = {
+    sm: 'cosy:w-16 cosy:h-16',
+    md: 'cosy:w-24 cosy:h-24',
+    lg: 'cosy:w-32 cosy:h-32',
+    xl: 'cosy:w-40 cosy:h-40',
+};
+
+/**
+ * 获取图标尺寸类名
+ * @param size 图标尺寸
+ * @returns 对应的CSS类名
+ */
+export function getIconSizeClasses(size: "sm" | "md" | "lg" | "xl" = "md"): string {
+    return iconSizeConfig[size] || iconSizeConfig.md;
+}
+
+/**
+ * 标准化课程名称
+ * 将课程名称转换为小写并用下划线替换特殊字符
+ */
+export function normalizeName(name: string): string {
+    return name.toLowerCase().replace(/[^a-z0-9]/g, '_');
+}
+
+/**
+ * 格式化课程显示名称
+ * 将下划线替换为空格并首字母大写
+ * @param courseName 课程名称
+ * @returns 格式化后的显示名称
+ */
+export function formatDisplayName(courseName: string): string {
+    return courseName
+        .replace(/_/g, ' ')
+        .replace(/\b\w/g, (l) => l.toUpperCase());
+} 

package/dist/src-astro/card-course/index.ts

@@ -0,0 +1,3 @@
+export { default as CardCourse } from './CardCourse.astro';
+export type { CardCourseProps } from './types';
+export * from './config'; 

package/dist/src-astro/card-course/types.ts

@@ -0,0 +1,15 @@
+/**
+ * CardCourse 组件的 Props 接口
+ */
+export interface CardCourseProps {
+    /** 课程标题 */
+    courseName: string;
+    /** 课程描述 */
+    description?: string;
+    /** 语言（"en" 或 "zh"） */
+    lang: string;
+    /** 课程链接 */
+    href: string;
+    /** 图标尺寸，默认为 "md" */
+    iconSize?: "sm" | "md" | "lg" | "xl";
+} 

package/dist/src-astro/icons/SmartIcon.astro

@@ -0,0 +1,195 @@
+---
+/**
+ * @component SmartIcon
+ * @description 根据关键词自动渲染最合适的图标组件，支持中英文关键词，未匹配时渲染默认图标。
+ * @props {string} keyword - 关键词
+ * @usage <SmartIcon keyword="用户" class="w-6 h-6" />
+ */
+import SocialIcon from './SocialIcon.astro';
+import TwitterIcon from './TwitterIcon.astro';
+import UserIcon from './UserIcon.astro';
+import WarningIcon from './WarningIcon.astro';
+import XCircle from './XCircle.astro';
+import InfoIcon from './InfoIcon.astro';
+import LinkIcon from './LinkIcon.astro';
+import LinkedinIcon from './LinkedinIcon.astro';
+import MenuIcon from './MenuIcon.astro';
+import RefreshIcon from './RefreshIcon.astro';
+import SearchIcon from './SearchIcon.astro';
+import SuccessIcon from './SuccessIcon.astro';
+import SunCloudyIcon from './SunCloudyIcon.astro';
+import AlertTriangle from './AlertTriangle.astro';
+import CalendarIcon from './CalendarIcon.astro';
+import CheckCircle from './CheckCircle.astro';
+import CheckIcon from './CheckIcon.astro';
+import ClipboardIcon from './ClipboardIcon.astro';
+import CloseIcon from './CloseIcon.astro';
+import CodeIcon from './CodeIcon.astro';
+import DeleteIcon from './DeleteIcon.astro';
+import ErrorIcon from './ErrorIcon.astro';
+import GithubIcon from './GithubIcon.astro';
+import InfoCircle from './InfoCircle.astro';
+import InboxArchive from './InboxArchive.astro';
+import SettingsIcon from './SettingsIcon.astro';
+import ChevronDownIcon from './ChevronDownIcon.astro';
+import HomeIcon from './HomeIcon.astro';
+import DashboardIcon from './DashboardIcon.astro';
+import ChartIcon from './ChartIcon.astro';
+import DocumentIcon from './DocumentIcon.astro';
+import NotificationIcon from './NotificationIcon.astro';
+import UsersIcon from './UsersIcon.astro';
+import MessageIcon from './MessageIcon.astro';
+import MailIcon from './MailIcon.astro';
+import FolderIcon from './FolderIcon.astro';
+import StarIcon from './StarIcon.astro';
+import HeartIcon from './HeartIcon.astro';
+import SaveIcon from './SaveIcon.astro';
+import EditIcon from './EditIcon.astro';
+import ToolsIcon from './ToolsIcon.astro';
+import WalletIcon from './WalletIcon.astro';
+import ReportIcon from './ReportIcon.astro';
+import SecurityIcon from './SecurityIcon.astro';
+import UploadIcon from './UploadIcon.astro';
+import DownloadIcon from './DownloadIcon.astro';
+import LogOut from './LogOut.astro';
+import AppStoreIcon from './AppStoreIcon.astro';
+import WebsiteIcon from './WebsiteIcon.astro';
+
+const { keyword = '', ...rest } = Astro.props;
+
+const zhMap: { [key: string]: any } = {
+  用户: UserIcon,
+  人: UserIcon,
+  账号: UserIcon,
+  个人: UserIcon,
+  警告: WarningIcon,
+  注意: WarningIcon,
+  信息: InfoIcon,
+  提示: InfoIcon,
+  链接: LinkIcon,
+  菜单: MenuIcon,
+  刷新: RefreshIcon,
+  搜索: SearchIcon,
+  成功: SuccessIcon,
+  太阳: SunCloudyIcon,
+  天气: SunCloudyIcon,
+  日历: CalendarIcon,
+  勾: CheckIcon,
+  对: CheckIcon,
+  完成: CheckIcon,
+  剪贴板: ClipboardIcon,
+  关闭: CloseIcon,
+  叉: CloseIcon,
+  代码: CodeIcon,
+  删除: DeleteIcon,
+  错误: ErrorIcon,
+  github: GithubIcon,
+  设置: SettingsIcon,
+  主页: HomeIcon,
+  首页: HomeIcon,
+  仪表盘: DashboardIcon,
+  图表: ChartIcon,
+  文档: DocumentIcon,
+  文件: DocumentIcon,
+  通知: NotificationIcon,
+  群: UsersIcon,
+  成员: UsersIcon,
+  消息: MessageIcon,
+  邮件: MailIcon,
+  文件夹: FolderIcon,
+  收藏: StarIcon,
+  星: StarIcon,
+  喜欢: HeartIcon,
+  心: HeartIcon,
+  保存: SaveIcon,
+  编辑: EditIcon,
+  工具: ToolsIcon,
+  钱包: WalletIcon,
+  报告: ReportIcon,
+  安全: SecurityIcon,
+  上传: UploadIcon,
+  下载: DownloadIcon,
+  退出: LogOut,
+  应用: AppStoreIcon,
+  网站: WebsiteIcon,
+  社交: SocialIcon,
+  推特: TwitterIcon,
+};
+
+const iconMap: { [key: string]: any } = {
+  social: SocialIcon,
+  twitter: TwitterIcon,
+  user: UserIcon,
+  warning: WarningIcon,
+  x_circle: XCircle,
+  info: InfoIcon,
+  link: LinkIcon,
+  linkedin: LinkedinIcon,
+  menu: MenuIcon,
+  refresh: RefreshIcon,
+  search: SearchIcon,
+  success: SuccessIcon,
+  suncloudy: SunCloudyIcon,
+  alerttriangle: AlertTriangle,
+  calendar: CalendarIcon,
+  checkcircle: CheckCircle,
+  check: CheckIcon,
+  clipboard: ClipboardIcon,
+  close: CloseIcon,
+  code: CodeIcon,
+  delete: DeleteIcon,
+  error: ErrorIcon,
+  github: GithubIcon,
+  infocircle: InfoCircle,
+  inboxarchive: InboxArchive,
+  settings: SettingsIcon,
+  chevrondown: ChevronDownIcon,
+  home: HomeIcon,
+  dashboard: DashboardIcon,
+  chart: ChartIcon,
+  document: DocumentIcon,
+  notification: NotificationIcon,
+  users: UsersIcon,
+  message: MessageIcon,
+  mail: MailIcon,
+  folder: FolderIcon,
+  star: StarIcon,
+  heart: HeartIcon,
+  save: SaveIcon,
+  edit: EditIcon,
+  tools: ToolsIcon,
+  wallet: WalletIcon,
+  report: ReportIcon,
+  security: SecurityIcon,
+  upload: UploadIcon,
+  download: DownloadIcon,
+  logout: LogOut,
+  appstore: AppStoreIcon,
+  website: WebsiteIcon,
+};
+
+let IconComponent = DocumentIcon;
+if (keyword) {
+  for (const zh in zhMap) {
+    if (keyword.includes(zh)) {
+      IconComponent = zhMap[zh];
+      break;
+    }
+  }
+  if (IconComponent === DocumentIcon) {
+    const lower = keyword.toLowerCase();
+    if (iconMap[lower]) {
+      IconComponent = iconMap[lower];
+    } else {
+      for (const key in iconMap) {
+        if (lower.includes(key)) {
+          IconComponent = iconMap[key];
+          break;
+        }
+      }
+    }
+  }
+}
+---
+
+<IconComponent {...rest} />

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

@@ -47,3 +47,6 @@ export { default as DownloadIcon } from './DownloadIcon.astro';
 export { default as LogOut } from './LogOut.astro';
 export { default as AppStoreIcon } from './AppStoreIcon.astro';
 export { default as WebsiteIcon } from './WebsiteIcon.astro';
+
+// 智能图标
+export { default as SmartIcon } from './SmartIcon.astro';

package/dist/src-astro/smart-bg/SmartBg.astro

@@ -0,0 +1,34 @@
+---
+/**
+ * @component SmartBg
+ * @description 根据关键词自动分配合适的背景色，支持中英文关键词，未匹配时使用默认色。可选启用渐变色。
+ * @props {string} keyword - 关键词
+ * @props {boolean} enableGradient - 是否启用渐变色，默认 false
+ * @usage <SmartBg keyword="JavaScript" enableGradient>内容</SmartBg>
+ */
+import { bgColorMap, bgGradientMap, mapKeywordToBgKey } from './bg-util';
+
+const {
+  keyword = '',
+  class: className = '',
+  style = '',
+  enableGradient = false,
+  showKey = false,
+} = Astro.props;
+
+const bgKey = mapKeywordToBgKey(keyword);
+const bgClass = enableGradient
+  ? bgGradientMap[bgKey] || bgGradientMap['neutral']
+  : bgColorMap[bgKey] || bgColorMap['neutral'];
+---
+
+<div class={`${bgClass} ${className}`} style={style}>
+  <slot />
+  {
+    showKey && (
+      <span style="position:absolute;right:0.5rem;bottom:0.5rem;z-index:10;font-size:0.75rem;opacity:0.7;background:rgba(0,0,0,0.1);padding:0.1em 0.5em;border-radius:0.25em;pointer-events:none;">
+        {bgKey}
+      </span>
+    )
+  }
+</div>

package/dist/src-astro/smart-bg/bg-util.ts

@@ -0,0 +1,76 @@
+// 背景色 key 到类名的映射
+export const bgColorMap: { [key: string]: string } = {
+    primary: 'cosy:bg-blue-500 cosy:dark:bg-blue-800',
+    success: 'cosy:bg-green-500 cosy:dark:bg-green-800',
+    danger: 'cosy:bg-red-500 cosy:dark:bg-red-800',
+    warning: 'cosy:bg-yellow-400 cosy:dark:bg-yellow-600',
+    info: 'cosy:bg-cyan-400 cosy:dark:bg-cyan-700',
+    neutral: 'cosy:bg-gray-200 cosy:dark:bg-gray-700',
+    forest: 'cosy:bg-green-700 cosy:dark:bg-green-900',
+    ocean: 'cosy:bg-blue-700 cosy:dark:bg-blue-900',
+    sky: 'cosy:bg-sky-400 cosy:dark:bg-sky-700',
+    lemon: 'cosy:bg-lime-300 cosy:dark:bg-lime-700',
+    orange: 'cosy:bg-orange-400 cosy:dark:bg-orange-700',
+    cherry: 'cosy:bg-rose-500 cosy:dark:bg-rose-800',
+    grape: 'cosy:bg-purple-500 cosy:dark:bg-purple-800',
+    banana: 'cosy:bg-yellow-300 cosy:dark:bg-yellow-600',
+    watermelon: 'cosy:bg-pink-400 cosy:dark:bg-pink-700',
+    peach: 'cosy:bg-orange-200 cosy:dark:bg-orange-500',
+    avocado: 'cosy:bg-lime-600 cosy:dark:bg-lime-900',
+    coconut: 'cosy:bg-stone-200 cosy:dark:bg-stone-600',
+    blueberry: 'cosy:bg-indigo-500 cosy:dark:bg-indigo-900',
+    kiwi: 'cosy:bg-green-400 cosy:dark:bg-green-700',
+    mint: 'cosy:bg-teal-300 cosy:dark:bg-teal-700',
+    sand: 'cosy:bg-yellow-200 cosy:dark:bg-yellow-700',
+    sunset: 'cosy:bg-pink-300 cosy:dark:bg-pink-700',
+    lavender: 'cosy:bg-purple-300 cosy:dark:bg-purple-700',
+    snow: 'cosy:bg-white cosy:dark:bg-gray-800',
+};
+
+// 渐变色 key 到类名的映射
+export const bgGradientMap: { [key: string]: string } = {
+    primary: 'cosy:bg-gradient-to-r cosy:from-blue-300 cosy:via-blue-400 cosy:to-blue-500 cosy:dark:from-blue-700 cosy:dark:via-blue-800 cosy:dark:to-blue-900',
+    success: 'cosy:bg-gradient-to-r cosy:from-green-300 cosy:via-green-400 cosy:to-green-500 cosy:dark:from-green-700 cosy:dark:via-green-800 cosy:dark:to-green-900',
+    danger: 'cosy:bg-gradient-to-r cosy:from-red-300 cosy:via-red-400 cosy:to-red-500 cosy:dark:from-red-700 cosy:dark:via-red-800 cosy:dark:to-red-900',
+    warning: 'cosy:bg-gradient-to-r cosy:from-yellow-200 cosy:via-yellow-300 cosy:to-yellow-400 cosy:dark:from-yellow-600 cosy:dark:via-yellow-700 cosy:dark:to-yellow-800',
+    info: 'cosy:bg-gradient-to-r cosy:from-cyan-200 cosy:via-cyan-300 cosy:to-cyan-400 cosy:dark:from-cyan-600 cosy:dark:via-cyan-700 cosy:dark:to-cyan-800',
+    neutral: 'cosy:bg-gradient-to-r cosy:from-gray-100 cosy:via-gray-200 cosy:to-gray-300 cosy:dark:from-gray-700 cosy:dark:via-gray-800 cosy:dark:to-gray-900',
+    forest: 'cosy:bg-gradient-to-r cosy:from-green-600 cosy:via-green-700 cosy:to-green-800 cosy:dark:from-green-800 cosy:dark:via-green-900 cosy:dark:to-green-950',
+    ocean: 'cosy:bg-gradient-to-r cosy:from-blue-400 cosy:via-blue-600 cosy:to-blue-800 cosy:dark:from-blue-800 cosy:dark:via-blue-900 cosy:dark:to-blue-950',
+    sky: 'cosy:bg-gradient-to-r cosy:from-sky-200 cosy:via-sky-300 cosy:to-sky-400 cosy:dark:from-sky-700 cosy:dark:via-sky-800 cosy:dark:to-sky-900',
+    lemon: 'cosy:bg-gradient-to-r cosy:from-lime-200 cosy:via-lime-300 cosy:to-lime-400 cosy:dark:from-lime-700 cosy:dark:via-lime-800 cosy:dark:to-lime-900',
+    orange: 'cosy:bg-gradient-to-r cosy:from-orange-200 cosy:via-orange-300 cosy:to-orange-400 cosy:dark:from-orange-700 cosy:dark:via-orange-800 cosy:dark:to-orange-900',
+    cherry: 'cosy:bg-gradient-to-r cosy:from-rose-300 cosy:via-rose-400 cosy:to-rose-500 cosy:dark:from-rose-700 cosy:dark:via-rose-800 cosy:dark:to-rose-900',
+    grape: 'cosy:bg-gradient-to-r cosy:from-purple-300 cosy:via-purple-400 cosy:to-purple-500 cosy:dark:from-purple-700 cosy:dark:via-purple-800 cosy:dark:to-purple-900',
+    banana: 'cosy:bg-gradient-to-r cosy:from-yellow-100 cosy:via-yellow-200 cosy:to-yellow-300 cosy:dark:from-yellow-600 cosy:dark:via-yellow-700 cosy:dark:to-yellow-800',
+    watermelon: 'cosy:bg-gradient-to-r cosy:from-pink-200 cosy:via-pink-300 cosy:to-pink-400 cosy:dark:from-pink-700 cosy:dark:via-pink-800 cosy:dark:to-pink-900',
+    peach: 'cosy:bg-gradient-to-r cosy:from-orange-100 cosy:via-orange-200 cosy:to-orange-300 cosy:dark:from-orange-500 cosy:dark:via-orange-600 cosy:dark:to-orange-700',
+    avocado: 'cosy:bg-gradient-to-r cosy:from-lime-400 cosy:via-lime-500 cosy:to-lime-600 cosy:dark:from-lime-800 cosy:dark:via-lime-900 cosy:dark:to-lime-950',
+    coconut: 'cosy:bg-gradient-to-r cosy:from-stone-100 cosy:via-stone-200 cosy:to-stone-300 cosy:dark:from-stone-600 cosy:dark:via-stone-700 cosy:dark:to-stone-800',
+    blueberry: 'cosy:bg-gradient-to-r cosy:from-indigo-300 cosy:via-indigo-400 cosy:to-indigo-500 cosy:dark:from-indigo-800 cosy:dark:via-indigo-900 cosy:dark:to-indigo-950',
+    kiwi: 'cosy:bg-gradient-to-r cosy:from-green-200 cosy:via-green-300 cosy:to-green-400 cosy:dark:from-green-700 cosy:dark:via-green-800 cosy:dark:to-green-900',
+    mint: 'cosy:bg-gradient-to-r cosy:from-teal-200 cosy:via-teal-300 cosy:to-teal-400 cosy:dark:from-teal-700 cosy:dark:via-teal-800 cosy:dark:to-teal-900',
+    sand: 'cosy:bg-gradient-to-r cosy:from-yellow-100 cosy:via-yellow-200 cosy:to-yellow-300 cosy:dark:from-yellow-700 cosy:dark:via-yellow-800 cosy:dark:to-yellow-900',
+    sunset: 'cosy:bg-gradient-to-r cosy:from-pink-200 cosy:via-pink-300 cosy:to-pink-400 cosy:dark:from-pink-700 cosy:dark:via-pink-800 cosy:dark:to-pink-900',
+    lavender: 'cosy:bg-gradient-to-r cosy:from-purple-100 cosy:via-purple-200 cosy:to-purple-300 cosy:dark:from-purple-700 cosy:dark:via-purple-800 cosy:dark:to-purple-900',
+    snow: 'cosy:bg-gradient-to-r cosy:from-white cosy:via-gray-100 cosy:to-gray-200 cosy:dark:from-gray-800 cosy:dark:via-gray-900 cosy:dark:to-black',
+};
+
+// 哈希函数，将字符串映射为数字
+function hashString(str: string): number {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = ((hash << 5) - hash) + str.charCodeAt(i);
+        hash |= 0; // 转为32位整数
+    }
+    return Math.abs(hash);
+}
+
+// 关键词到 key 的哈希映射
+export function mapKeywordToBgKey(keyword: string): string {
+    const keys = Object.keys(bgColorMap);
+    if (!keyword) return 'neutral';
+    const hash = hashString(keyword.toLowerCase());
+    const idx = hash % keys.length;
+    return keys[idx];
+} 

package/dist/src-astro/smart-bg/index.ts

@@ -0,0 +1 @@
+export { default as SmartBg } from './SmartBg.astro';

package/package.json

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