@coffic/cosy-ui 0.3.1-beta.1 → 0.3.2-beta.1

package/dist/components/layouts/DocumentationLayout.astro

@@ -81,6 +81,8 @@ import Main from '../containers/Main.astro';
 import Header from './Header.astro';
 import Sidebar from './Sidebar.astro';
 import DefaultLogo from '../../assets/logo.png';
+import { getText } from '../../utils/i18n';
+import { getValidLanguage } from '../../utils/language';
 
 export interface SidebarItem {
   href: string;
@@ -362,6 +364,9 @@ const {
 } = Astro.props;
 
 const currentPath = Astro.url.pathname;
+
+// 获取有效的语言代码
+const validLang = getValidLanguage(currentLocale);
 ---
 
 <BaseLayout 
@@ -405,7 +410,7 @@ const currentPath = Astro.url.pathname;
           <div class="w-64 shrink-0">
             <div class="sticky top-16">
               <slot name="toc">
-                <TableOfContents />
+                <TableOfContents lang={currentLocale} />
               </slot>
             </div>
           </div>
@@ -417,11 +422,12 @@ const currentPath = Astro.url.pathname;
   {showFooter && (
     <Footer 
       siteName={siteName}
+      lang={currentLocale}
       homeLink={footerHomeLink || "/"}
-      slogan={footerSlogan || "优雅、高效的组件库"}
+      slogan={footerSlogan || getText(validLang, 'footer', 'slogan') || getText(validLang, 'footer', 'defaultSlogan')}
       company={footerCompany || siteName}
-      copyright={footerCopyright || "保留所有权利"}
-      inspirationalSlogan={footerInspirationalSlogan || "构建美好的数字体验"}
+      copyright={footerCopyright || getText(validLang, 'footer', 'copyright')}
+      inspirationalSlogan={footerInspirationalSlogan || getText(validLang, 'footer', 'inspirationalSlogan')}
       aboutLink={footerAboutLink || "/about"}
       contactLink={footerContactLink || "/contact"}
       icp={footerIcp}

package/dist/components/layouts/Footer.astro

@@ -12,6 +12,7 @@
  * 2. 响应式布局 - 在不同屏幕尺寸下保持良好的可用性和美观性
  * 3. 可定制性 - 支持多种配置选项，适应不同网站的需求
  * 4. 品牌一致性 - 与网站整体设计风格保持一致
+ * 5. 多语言支持 - 支持多种语言显示，自动检测当前语言环境
  * 
  * 视觉特点：
  * - 分区布局：清晰区分不同类别的信息
@@ -89,6 +90,27 @@
  * />
  * ```
  * 
+ * 指定语言：
+ * ```astro
+ * <Footer 
+ *   siteName="My Website"
+ *   homeLink="/"
+ *   slogan="Simple and Powerful"
+ *   company="My Company"
+ *   copyright="All Rights Reserved"
+ *   lang="en"
+ * />
+ * ```
+ * 
+ * 启用日志：
+ * ```astro
+ * <Footer 
+ *   siteName="我的网站"
+ *   homeLink="/"
+ *   enableLogging={true}
+ * />
+ * ```
+ * 
  * @props
  * @prop {string} siteName - 网站名称
  * @prop {string} homeLink - 首页链接
@@ -114,6 +136,8 @@
  * @prop {string} [mediaLink] - "媒体报道"页面链接
  * @prop {string} [techStackLink] - "技术栈"页面链接
  * @prop {boolean} [debug=false] - 调试模式
+ * @prop {string} [lang] - 语言代码，默认自动检测
+ * @prop {boolean} [enableLogging=false] - 是否启用日志输出
  * 
  * @accessibility
  * - 使用语义化HTML结构，确保屏幕阅读器可以正确解析
@@ -125,11 +149,24 @@ import { processSocialLink } from '../../utils/social';
 import Link from '../base/Link.astro';
 import SocialIcon from '../icons/SocialIcon.astro';
 import type { FooterProps } from '../../types/footer';
+import { getCurrentLanguage, LanguageSource } from '../../utils/language';
+import { createTextGetter } from '../../utils/i18n';
 
 // 导入样式
 import '../../app.css';
 
-interface Props extends FooterProps {}
+interface Props extends FooterProps {
+	/**
+	 * 语言代码
+	 * @default 自动检测
+	 */
+	lang?: string;
+	/**
+	 * 是否启用日志输出
+	 * @default false
+	 */
+	enableLogging?: boolean;
+}
 
 const {
 	siteName,
@@ -156,8 +193,31 @@ const {
 	mediaLink,
 	techStackLink,
 	debug = false,
+	lang: userLang,
+	enableLogging = false,
 }: Props = Astro.props;
 
+// 获取当前语言
+const langInfo = getCurrentLanguage(userLang);
+// 创建文本获取函数
+const t = createTextGetter(langInfo, 'footer');
+
+// 获取语言来源的描述
+function getLanguageSourceDescription(source: LanguageSource): string {
+  switch (source) {
+    case LanguageSource.USER:
+      return '用户指定';
+    case LanguageSource.URL:
+      return 'URL参数';
+    case LanguageSource.BROWSER:
+      return '浏览器设置';
+    case LanguageSource.DEFAULT:
+      return '默认语言';
+    default:
+      return '未知来源';
+  }
+}
+
 const currentYear = new Date().getFullYear();
 
 // 处理社交链接
@@ -220,7 +280,7 @@ const debugClasses = debug ? {
 			{/* 产品导航 */}
 			{products.length > 0 && (
 				<nav class:list={["h-full", debugClasses.nav]}>
-					<h6 class="footer-title">产品</h6>
+					<h6 class="footer-title">{t('products')}</h6>
 					{products.map((product) => (
 						<Link href={product.href} external={product.external} size='sm' block animation='hover-lift'>
 							{product.name}
@@ -232,32 +292,32 @@ const debugClasses = debug ? {
 			{/* 关于导航 */}
 			{(aboutLink || contactLink || teamLink || careersLink) && (
 				<nav class:list={["h-full", debugClasses.nav]}>
-					<h6 class="footer-title">关于</h6>
-					{aboutLink && <Link href={aboutLink} block animation='hover-lift' size='sm'>关于我们</Link>}
-					{teamLink && <Link href={teamLink} block animation='hover-lift' size='sm'>团队介绍</Link>}
-					{careersLink && <Link href={careersLink} block animation='hover-lift' size='sm'>加入我们</Link>}
-					{contactLink && <Link href={contactLink} block animation='hover-lift' size='sm'>联系我们</Link>}
+					<h6 class="footer-title">{t('about')}</h6>
+					{aboutLink && <Link href={aboutLink} block animation='hover-lift' size='sm'>{t('aboutUs')}</Link>}
+					{teamLink && <Link href={teamLink} block animation='hover-lift' size='sm'>{t('team')}</Link>}
+					{careersLink && <Link href={careersLink} block animation='hover-lift' size='sm'>{t('careers')}</Link>}
+					{contactLink && <Link href={contactLink} block animation='hover-lift' size='sm'>{t('contactUs')}</Link>}
 				</nav>
 			)}
 
 			{/* 资源导航 */}
 			{(newsLink || historyLink || partnersLink || blogLink || faqLink || mediaLink || techStackLink) && (
 				<nav class:list={["", debugClasses.nav]}>
-					<h6 class="footer-title">资源</h6>
-					{newsLink && <Link href={newsLink} block animation='hover-lift' size='sm'>新闻动态</Link>}
-					{blogLink && <Link href={blogLink} block animation='hover-lift' size='sm'>技术博客</Link>}
-					{faqLink && <Link href={faqLink} block animation='hover-lift' size='sm'>常见问题</Link>}
-					{historyLink && <Link href={historyLink} block animation='hover-lift' size='sm'>发展历程</Link>}
-					{techStackLink && <Link href={techStackLink} block animation='hover-lift' size='sm'>技术栈</Link>}
+					<h6 class="footer-title">{t('resources')}</h6>
+					{newsLink && <Link href={newsLink} block animation='hover-lift' size='sm'>{t('news')}</Link>}
+					{blogLink && <Link href={blogLink} block animation='hover-lift' size='sm'>{t('blog')}</Link>}
+					{faqLink && <Link href={faqLink} block animation='hover-lift' size='sm'>{t('faq')}</Link>}
+					{historyLink && <Link href={historyLink} block animation='hover-lift' size='sm'>{t('history')}</Link>}
+					{techStackLink && <Link href={techStackLink} block animation='hover-lift' size='sm'>{t('techStack')}</Link>}
 				</nav>
 			)}
 
 			{/* 法律导航 */}
 			{(termsLink || privacyLink) && (
 				<nav class:list={["", debugClasses.nav]}>
-					<h6 class="footer-title">法律</h6>
-					{termsLink && <Link href={termsLink} block animation='hover-lift' size='sm'>服务条款</Link>}
-					{privacyLink && <Link href={privacyLink} block animation='hover-lift' size='sm'>隐私政策</Link>}
+					<h6 class="footer-title">{t('legal')}</h6>
+					{termsLink && <Link href={termsLink} block animation='hover-lift' size='sm'>{t('terms')}</Link>}
+					{privacyLink && <Link href={privacyLink} block animation='hover-lift' size='sm'>{t('privacy')}</Link>}
 				</nav>
 			)}
 		</div>
@@ -275,7 +335,7 @@ const debugClasses = debug ? {
 <div class:list={["footer footer-center p-4 bg-base-300 text-base-content", debugClasses.footer]}>
 	<aside class:list={["items-center grid-flow-col", debugClasses.aside]}>
 		<p class="text-sm opacity-70">
-			© {currentYear} {company} - {copyright}
+			© {currentYear} {company} - {copyright || t('allRightsReserved')}
 		</p>
 		{icp && (
 			<p class="text-sm opacity-70 ml-4">
@@ -285,6 +345,25 @@ const debugClasses = debug ? {
 	</aside>
 </div>
 
+<script define:vars={{ langInfo, enableLogging }}>
+  // 输出语言信息到控制台
+  if (enableLogging) {
+    console.log(`[Footer] 语言信息:`, {
+      语言代码: langInfo.code,
+      语言来源: langInfo.source,
+      来源描述: (() => {
+        switch (langInfo.source) {
+          case 'user': return '用户指定';
+          case 'url': return 'URL参数';
+          case 'browser': return '浏览器设置';
+          case 'default': return '默认语言';
+          default: return '未知来源';
+        }
+      })()
+    });
+  }
+</script>
+
 <style scoped>
 	@reference '../../app.css';
 	nav {

package/dist/components/navigation/TableOfContents.astro

@@ -14,6 +14,7 @@
  * 3. 视觉层次 - 通过缩进和样式区分不同级别的标题
  * 4. 响应式设计 - 在小屏幕设备上自动隐藏，优化空间利用
  * 5. 智能显示 - 当页面结构不需要目录时自动隐藏
+ * 6. 多语言支持 - 支持多种语言显示，自动检测当前语言环境
  * 
  * @usage
  * 基本用法：
@@ -39,10 +40,22 @@
  * ```astro
  * <TableOfContents containerSelector=".article-content" />
  * ```
+ * 
+ * 指定语言：
+ * ```astro
+ * <TableOfContents lang="zh-cn" />
+ * ```
+ * 
+ * 启用日志：
+ * ```astro
+ * <TableOfContents enableLogging={true} />
+ * ```
  */
 
 // 导入样式
 import '../../app.css';
+import { getCurrentLanguage, LanguageSource } from '../../utils/language';
+import { createTextGetter } from '../../utils/i18n';
 
 interface Props {
   /**
@@ -66,7 +79,7 @@ interface Props {
   maxDepth?: number;
   /**
    * 标题文本
-   * @default "目录"
+   * @default 根据语言自动选择
    */
   title?: string;
   /**
@@ -79,6 +92,16 @@ interface Props {
    * @default 2
    */
   minHeadings?: number;
+  /**
+   * 语言
+   * @default 自动检测
+   */
+  lang?: string;
+  /**
+   * 是否启用日志输出
+   * @default false
+   */
+  enableLogging?: boolean;
 }
 
 const {
@@ -86,28 +109,70 @@ const {
   class: className = '',
   selector = 'h2, h3',
   maxDepth = 3,
-  title = '目录',
   containerSelector = 'main',
   minHeadings = 2,
+  lang: userLang,
+  title,
+  enableLogging = true,
 } = Astro.props;
 
+// 获取当前语言
+const langInfo = getCurrentLanguage(userLang);
+// 创建文本获取函数
+const t = createTextGetter(langInfo, 'tableOfContents');
+// 获取标题文本，如果用户提供了标题则使用用户提供的标题
+const titleText = title || t('title');
+
 // 生成唯一ID，确保多个TOC实例不会冲突
 const tocId = `toc-${Math.random().toString(36).substring(2, 9)}`;
+
+// 获取语言来源的描述
+function getLanguageSourceDescription(source: LanguageSource): string {
+  switch (source) {
+    case LanguageSource.USER:
+      return '用户指定';
+    case LanguageSource.URL:
+      return 'URL参数';
+    case LanguageSource.BROWSER:
+      return '浏览器设置';
+    case LanguageSource.DEFAULT:
+      return '默认语言';
+    default:
+      return '未知来源';
+  }
+}
 ---
 
 <div class={`toc-container ${fixed ? 'fixed top-20 right-4 w-64' : 'w-full max-w-xs'} ${className}`} id={`${tocId}-container`} style="display: none;">
   <div class="card bg-base-100 shadow-xl">
     <div class="card-body p-4">
-      <div class="card-title text-lg font-bold mb-2">{title}</div>
+      <div class="card-title text-lg font-bold mb-2">{titleText}</div>
       <ul class="menu menu-sm" id={tocId}>
         <!-- 目录项将通过 JavaScript 动态生成 -->
-        <li class="text-base-content/60">加载中...</li>
+        <li class="text-base-content/60">{t('loading')}</li>
       </ul>
     </div>
   </div>
 </div>
 
-<script define:vars={{ selector, maxDepth, tocId, containerSelector, minHeadings }}>
+<script define:vars={{ selector, maxDepth, tocId, containerSelector, minHeadings, langInfo, enableLogging }}>
+  // 输出语言信息到控制台
+  if (enableLogging) {
+    console.log(`[TableOfContents] 语言信息:`, {
+      语言代码: langInfo.code,
+      语言来源: langInfo.source,
+      来源描述: (() => {
+        switch (langInfo.source) {
+          case 'user': return '用户指定';
+          case 'url': return 'URL参数';
+          case 'browser': return '浏览器设置';
+          case 'default': return '默认语言';
+          default: return '未知来源';
+        }
+      })()
+    });
+  }
+
   // 在页面加载完成后生成目录
   function generateTOC() {
     // 使用指定的容器选择器查找内容容器

package/dist/types/footer.ts

@@ -34,4 +34,13 @@ export interface FooterProps {
     faqLink?: string;
     mediaLink?: string;
     techStackLink?: string;
+    /**
+     * 语言代码，默认自动检测
+     */
+    lang?: string;
+    /**
+     * 是否启用日志输出
+     * @default false
+     */
+    enableLogging?: boolean;
 } 

package/dist/utils/i18n.ts

@@ -0,0 +1,85 @@
+/**
+ * 国际化文本配置
+ * 
+ * 提供组件的多语言文本内容
+ */
+
+import type { SupportedLanguage, LanguageInfo } from './language';
+
+// 定义文本内容的类型
+type TextContent = Record<string, Record<string, string>>;
+
+// 多语言文本内容
+export const texts: Record<SupportedLanguage, TextContent> = {
+    'en': {
+        tableOfContents: {
+            title: 'Table of Contents',
+            loading: 'Loading...'
+        },
+        footer: {
+            products: 'Products',
+            about: 'About',
+            aboutUs: 'About Us',
+            team: 'Our Team',
+            careers: 'Careers',
+            contactUs: 'Contact Us',
+            resources: 'Resources',
+            news: 'News',
+            blog: 'Blog',
+            faq: 'FAQ',
+            history: 'History',
+            techStack: 'Tech Stack',
+            legal: 'Legal',
+            terms: 'Terms of Service',
+            privacy: 'Privacy Policy',
+            slogan: 'Build a beautiful digital experience',
+            allRightsReserved: 'All Rights Reserved'
+        }
+    },
+    'zh-cn': {
+        tableOfContents: {
+            title: '目录',
+            loading: '加载中...'
+        },
+        footer: {
+            products: '产品',
+            about: '关于',
+            aboutUs: '关于我们',
+            team: '团队介绍',
+            careers: '加入我们',
+            contactUs: '联系我们',
+            defaultSlogan: '优雅、高效的组件库',
+            resources: '资源',
+            news: '新闻动态',
+            blog: '技术博客',
+            faq: '常见问题',
+            history: '发展历程',
+            techStack: '技术栈',
+            legal: '法律',
+            terms: '服务条款',
+            privacy: '隐私政策',
+            allRightsReserved: '保留所有权利'
+        }
+    }
+};
+
+/**
+ * 获取指定语言的文本内容
+ * @param lang 语言代码
+ * @param component 组件名称
+ * @param key 文本键名
+ * @returns 对应的文本内容
+ */
+export function getText(lang: SupportedLanguage, component: string, key: string): string {
+    return texts[lang]?.[component]?.[key] || texts['en'][component]?.[key] || '';
+}
+
+/**
+ * 创建组件的文本获取函数
+ * @param langInfo 语言信息
+ * @param component 组件名称
+ * @returns 文本获取函数
+ */
+export function createTextGetter(langInfo: LanguageInfo, component: string) {
+    return (key: string): string => getText(langInfo.code, component, key);
+} 

package/dist/utils/language.ts

@@ -0,0 +1,156 @@
+/**
+ * 语言工具模块
+ * 
+ * 提供语言相关的工具函数，用于多语言支持
+ */
+
+// 支持的语言列表
+export const SUPPORTED_LANGUAGES = ['en', 'zh-cn'] as const;
+export type SupportedLanguage = typeof SUPPORTED_LANGUAGES[number];
+
+// 语言来源枚举
+export enum LanguageSource {
+    USER = 'user',           // 用户指定
+    URL = 'url',             // 从URL获取
+    BROWSER = 'browser',     // 从浏览器设置获取
+    DEFAULT = 'default'      // 默认语言
+}
+
+// 语言信息接口
+export interface LanguageInfo {
+    code: SupportedLanguage;  // 语言代码
+    source: LanguageSource;   // 语言来源
+}
+
+// 默认语言
+export const DEFAULT_LANGUAGE: SupportedLanguage = 'en';
+
+/**
+ * 检查语言是否被支持
+ * @param lang 要检查的语言代码
+ * @returns 如果语言被支持返回true，否则返回false
+ */
+export function isLanguageSupported(lang?: string): lang is SupportedLanguage {
+    if (!lang) return false;
+    return SUPPORTED_LANGUAGES.includes(lang as SupportedLanguage);
+}
+
+/**
+ * 获取有效的语言代码
+ * @param lang 用户提供的语言代码
+ * @returns 有效的语言代码，如果提供的语言不支持则返回默认语言
+ */
+export function getValidLanguage(lang?: string): SupportedLanguage {
+    if (lang && isLanguageSupported(lang)) {
+        return lang;
+    }
+    return DEFAULT_LANGUAGE;
+}
+
+/**
+ * 从URL中提取语言代码
+ * @returns 从URL中提取的语言代码，如果无法提取则返回undefined
+ */
+function getLanguageFromURL(): string | undefined {
+    if (typeof window === 'undefined') return undefined;
+
+    // 尝试从路径中提取语言代码
+    // 例如: /zh-cn/components/button
+    const pathMatch = window.location.pathname.match(/^\/([\w-]+)\//);
+    if (pathMatch && isLanguageSupported(pathMatch[1])) {
+        return pathMatch[1];
+    }
+
+    // 尝试从查询参数中提取语言代码
+    // 例如: ?lang=zh-cn
+    const urlParams = new URLSearchParams(window.location.search);
+    const langParam = urlParams.get('lang');
+    if (langParam && isLanguageSupported(langParam)) {
+        return langParam;
+    }
+
+    return undefined;
+}
+
+/**
+ * 从浏览器设置中获取首选语言
+ * @returns 从浏览器设置中获取的语言代码，如果无法获取则返回undefined
+ */
+function getLanguageFromBrowser(): string | undefined {
+    if (typeof navigator === 'undefined') return undefined;
+
+    // 获取浏览器语言
+    const browserLang = navigator.language.toLowerCase();
+
+    // 检查完整匹配
+    if (isLanguageSupported(browserLang)) {
+        return browserLang;
+    }
+
+    // 检查语言前缀匹配
+    // 例如: zh-TW -> zh-cn
+    const langPrefix = browserLang.split('-')[0];
+    for (const lang of SUPPORTED_LANGUAGES) {
+        if (lang.startsWith(langPrefix)) {
+            return lang;
+        }
+    }
+
+    return undefined;
+}
+
+/**
+ * 自动检测当前语言
+ * @returns 检测到的语言信息，包括语言代码和来源
+ */
+export function detectLanguage(): LanguageInfo {
+    // 尝试从URL中获取语言
+    const urlLang = getLanguageFromURL();
+    if (urlLang) {
+        return {
+            code: urlLang as SupportedLanguage,
+            source: LanguageSource.URL
+        };
+    }
+
+    // 尝试从浏览器设置中获取语言
+    const browserLang = getLanguageFromBrowser();
+    if (browserLang) {
+        return {
+            code: browserLang as SupportedLanguage,
+            source: LanguageSource.BROWSER
+        };
+    }
+
+    // 如果无法检测，返回默认语言
+    return {
+        code: DEFAULT_LANGUAGE,
+        source: LanguageSource.DEFAULT
+    };
+}
+
+/**
+ * 获取当前语言
+ * @param userLang 用户指定的语言（可选）
+ * @returns 当前应使用的语言信息，包括语言代码和来源
+ */
+export function getCurrentLanguage(userLang?: string): LanguageInfo {
+    // 如果用户指定了语言，优先使用用户指定的语言
+    if (userLang) {
+        if (isLanguageSupported(userLang)) {
+            return {
+                code: userLang as SupportedLanguage,
+                source: LanguageSource.USER
+            };
+        } else {
+            // 用户指定的语言不支持，使用默认语言
+            return {
+                code: DEFAULT_LANGUAGE,
+                source: LanguageSource.DEFAULT
+            };
+        }
+    }
+
+    // 否则自动检测语言
+    return detectLanguage();
+} 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@coffic/cosy-ui",
-	"version": "0.3.1-beta.1",
+	"version": "0.3.2-beta.1",
 	"description": "An astro component library",
 	"author": {
 		"name": "nookery",