@coffic/cosy-ui 0.9.1 → 0.9.2

package/dist/src-astro/header/Header.astro

@@ -12,19 +12,35 @@
  * 2. 响应式适配 - 在移动端和桌面端都有合适的展现形式
  * 3. 可定制性 - 支持多种配置选项，适应不同网站的风格和需求
  * 4. 多语言支持 - 内置语言切换功能，便于构建国际化网站
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Header />
+ * ```
+ *
+ * 启用语言切换功能：
+ * ```astro
+ * ---
+ * import * as astroI18n from 'astro:i18n';
+ * ---
+ * <Header astroI18n={astroI18n} />
+ * ```
+ *
+ * @props
+ * - astroI18n - 完整的 astro:i18n 模块（启用语言切换时需要）
  */
 import {
+  Image,
   LanguageSwitcher,
+  Link,
   LinkUtil,
   type IHeaderProps,
   type INavItem,
   NavItems,
-  Link,
-  Image,
   ThemeSwitcher,
 } from '../../index-astro';
 import Logo from '../../src/assets/logo-rounded.png';
-import { i18n } from 'astro:config/server';
 
 export interface Props extends IHeaderProps {
   debug?: boolean;
@@ -42,6 +58,7 @@ const {
   paddingVertical = 'none',
   navPosition = 'center',
   showThemeSwitcher = true,
+  astroI18n,
 } = Astro.props;
 
 // 根据高度设置样式
@@ -79,6 +96,10 @@ const logoSizeClasses = {
 
 const logoSizeClass = logoSizeClasses[height];
 const linkHeightClass = linkHeightClasses[height];
+
+// 检查 i18n 是否启用，通过 Astro.currentLocale 来判断
+let isI18nEnabled = Astro.currentLocale !== undefined;
+
 const currentPath = Astro.url.pathname;
 const activeLink = LinkUtil.getActiveLink(
   currentPath,
@@ -200,7 +221,7 @@ const activeLink = LinkUtil.getActiveLink(
       }
 
       {showThemeSwitcher && <ThemeSwitcher />}
-      {i18n !== undefined && <LanguageSwitcher />}
+      {isI18nEnabled && <LanguageSwitcher astroI18n={astroI18n} />}
 
       <slot name="navbar-end" />
     </div>

package/dist/src-astro/language-switcher/LanguageSwitcher.astro

@@ -14,51 +14,71 @@
  * 4. 一致的视觉风格 - 使用与整体设计系统一致的下拉菜单样式
  *
  * @usage
- * 基本用法：
+ * 基本用法（需要用户传入 astro:i18n 模块）：
  * ```astro
- * <LanguageSwitcher />
+ * ---
+ * import * as astroI18n from 'astro:i18n';
+ * ---
+ * <LanguageSwitcher astroI18n={astroI18n} />
  * ```
  *
+ * @props
+ * - astroI18n - 完整的 astro:i18n 模块
+ * - class - 自定义CSS类名
  */
 
+import { ChevronDownIcon, Link, ListItem } from '../../index-astro';
 import {
-  ChevronDownIcon,
-  LanguageUtil,
-  Link,
-  ListItem,
-} from '../../index-astro';
+  checkSwitcherRenderState,
+  generateSwitcherLinks,
+  type SwitcherLink,
+} from './switcher_util';
 import '../../style.ts';
-import { i18n } from 'astro:config/server';
 
 interface Props {
+  /**
+   * 完整的 astro:i18n 模块
+   */
+  astroI18n?: any;
+
   /**
    * 自定义类名
    */
   class?: string;
 }
 
-const { class: className = '' } = Astro.props;
+const { astroI18n, class: className = '' } = Astro.props;
 
-let links: any[] = [];
-let currentLocale: string | undefined = undefined;
-let currentLanguageName: string | undefined = undefined;
+// 检查渲染状态
+const renderState = checkSwitcherRenderState(Astro.currentLocale, astroI18n);
+
+// 输出警告信息
+if (renderState.warnings) {
+  renderState.warnings.forEach((warning) => console.warn(warning));
+}
 
-if (i18n !== undefined) {
-  const { getSwitcherLinks } = await import('./switcher_util.ts');
-  links = getSwitcherLinks(Astro);
+let links: SwitcherLink[] = [];
 
-  currentLocale = Astro.currentLocale!;
-  currentLanguageName = LanguageUtil.getLanguageName(currentLocale);
-} else {
-  throw new Error('can not use LanguageSwitcher when i18n is disabled');
+// 如果应该渲染，生成切换链接
+if (renderState.shouldRender && Astro.currentLocale) {
+  try {
+    links = generateSwitcherLinks(
+      astroI18n,
+      Astro.currentLocale,
+      Astro.url.pathname
+    );
+  } catch (error) {
+    // 如果生成链接失败，设置为不渲染
+    renderState.shouldRender = false;
+  }
 }
 ---
 
 {
-  i18n !== undefined && (
+  renderState.shouldRender && (
     <div class={`cosy:dropdown cosy:dropdown-end ${className}`}>
       <div tabindex="0" role="button" class:list={['cosy:btn cosy:btn-ghost']}>
-        <span class="cosy:mr-1">{currentLanguageName}</span>
+        <span class="cosy:mr-1">{renderState.currentLanguageName}</span>
         <ChevronDownIcon size="16px" class="cosy:w-4 cosy:h-4" />
       </div>
       <ul
@@ -66,7 +86,7 @@ if (i18n !== undefined) {
         class="cosy:z-[1] cosy:bg-base-100 cosy:shadow cosy:p-2 cosy:rounded-box cosy:w-32 cosy:dropdown-content cosy:menu">
         {links.map((link) => (
           <ListItem>
-            <Link href={link.url} active={currentLocale === link.locale}>
+            <Link href={link.url} active={Astro.currentLocale === link.locale}>
               {link.name}
             </Link>
           </ListItem>

package/dist/src-astro/language-switcher/switcher_util.ts

@@ -1,6 +1,4 @@
-import { getRelativeLocaleUrl, getRelativeLocaleUrlList } from 'astro:i18n';
-import type { AstroGlobal } from 'astro';
-import { LanguageUtil } from '../../index-astro';
+import { LanguageUtil } from "../../src/utils/language"
 
 export interface SwitcherLink {
     locale: string;
@@ -8,33 +6,79 @@ export interface SwitcherLink {
     url: string;
 }
 
-// 获取基础路径
-const getBaseUrl = (): string => {
-    return import.meta.env.BASE_URL;
+/**
+ * 获取基础 URL
+ */
+export const getBaseUrl = (): string => {
+    return import.meta.env.BASE_URL || '/';
 };
 
-const getLocaleFromUrl = (url: string): string => {
+/**
+ * 从 URL 中提取语言代码
+ */
+export const getLocaleFromUrl = (url: string): string => {
     return url.replace(getBaseUrl(), '').split('/')[0];
 };
 
-export function getSwitcherLinks(astro: AstroGlobal): SwitcherLink[] {
-    const currentLocale = astro.currentLocale;
+/**
+ * 生成语言切换链接
+ * @param astroI18n - astro:i18n 模块
+ * @param currentLocale - 当前语言代码
+ * @param pathname - 当前页面路径
+ * @returns 语言切换链接数组
+ */
+export const generateSwitcherLinks = (
+    astroI18n: any,
+    currentLocale: string,
+    pathname: string
+): SwitcherLink[] => {
+    try {
+        const { getRelativeLocaleUrl, getRelativeLocaleUrlList } = astroI18n;
 
-    if (currentLocale === undefined) {
-        throw new Error('can not get switcher links when i18n is disabled');
+        const currentLocalURLPrefix = getRelativeLocaleUrl(currentLocale, '');
+        const pathWithSlash = pathname + '/';
+        const slug = pathWithSlash.replace(currentLocalURLPrefix, '');
+        const urls = getRelativeLocaleUrlList(slug);
+
+        return urls.map((url: string) => ({
+            locale: getLocaleFromUrl(url),
+            name: LanguageUtil.getLanguageName(getLocaleFromUrl(url)),
+            url: url,
+        }));
+    } catch (error) {
+        console.warn('LanguageSwitcher: Error generating switcher links:', error);
+        throw error;
     }
+};
 
-    const currentLocalURLPrefix = getRelativeLocaleUrl(currentLocale, '');
-    const pathname = astro.url.pathname + '/';
-    const slug = pathname.replace(
-        currentLocalURLPrefix,
-        ''
-    );
-    const urls = getRelativeLocaleUrlList(slug);
-
-    return urls.map((url) => ({
-        locale: getLocaleFromUrl(url),
-        name: LanguageUtil.getLanguageName(getLocaleFromUrl(url)),
-        url: url
-    }));
-}
+/**
+ * 检查语言切换器是否应该渲染
+ * @param currentLocale - 当前语言代码
+ * @param astroI18n - astro:i18n 模块
+ * @returns 是否应该渲染的状态信息
+ */
+export const checkSwitcherRenderState = (
+    currentLocale: string | undefined,
+    astroI18n: any
+): {
+    shouldRender: boolean;
+    currentLanguageName?: string;
+    warnings?: string[];
+} => {
+    const warnings: string[] = [];
+
+    if (!currentLocale) {
+        warnings.push('LanguageSwitcher: i18n is not enabled in the current project');
+        return { shouldRender: false, warnings };
+    }
+
+    if (!astroI18n) {
+        warnings.push('LanguageSwitcher: astroI18n module is required. Please pass the astro:i18n module as a prop.');
+        return { shouldRender: false, warnings };
+    }
+
+    return {
+        shouldRender: true,
+        currentLanguageName: LanguageUtil.getLanguageName(currentLocale),
+    };
+};

package/dist/src-astro/layout-dashboard/tools.ts

@@ -115,7 +115,7 @@ const hrefToIconMap: Record<string, string> = {
  */
 export function getIconFromHref(href: string, fallbackIcon: string = 'folder'): string {
     // 将 href 转换为小写并移除路径分隔符
-    const normalizedHref = href.toLowerCase().replace(/[\/\-_]/g, '');
+    const normalizedHref = href.toLowerCase().replace(/[/\-_]/g, '');
 
     // 遍历映射表，找到匹配的关键词
     for (const [keyword, iconName] of Object.entries(hrefToIconMap)) {

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

@@ -1,4 +1,5 @@
 import type { INavItem } from './nav';
+import type { ImageMetadata } from 'astro';
 
 export interface IHeaderProps {
     /**
@@ -7,6 +8,11 @@ export interface IHeaderProps {
      */
     defaultSidebarOpen?: boolean;
 
+    /**
+     * 完整的 astro:i18n 模块（启用语言切换时需要）
+     */
+    astroI18n?: any;
+
     /**
      * 导航栏高度
      * @default "md"

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

@@ -5,67 +5,67 @@ import type { IMetaProps } from './meta';
 import type { ISidebarProps } from './sidebar';
 
 export interface IAppLayoutProps {
-  /**
-   * 是否显示侧边栏
-   * @default true
-   */
-  showSidebar?: boolean;
+    /**
+     * 是否显示侧边栏
+     * @default true
+     */
+    showSidebar?: boolean;
 
-  /**
-   * 是否显示页眉
-   * @default true
-   */
-  showHeader?: boolean;
+    /**
+     * 是否显示页眉
+     * @default true
+     */
+    showHeader?: boolean;
 
-  /**
-   * 是否显示页脚
-   * @default true
-   */
-  showFooter?: boolean;
+    /**
+     * 是否显示页脚
+     * @default true
+     */
+    showFooter?: boolean;
 
-  /**
-   * 自定义头部内容
-   */
-  head?: astroHTML.JSX.Element;
+    /**
+     * 自定义头部内容
+     */
+    head?: any;
 
-  /**
-   * 自定义头部内容
-   */
-  headerConfig: IHeaderProps;
+    /**
+     * 自定义头部内容
+     */
+    headerConfig: IHeaderProps;
 
-  /**
-   * 侧边栏配置
-   */
-  sidebarConfig: ISidebarProps;
+    /**
+     * 侧边栏配置
+     */
+    sidebarConfig: ISidebarProps;
 
-  /**
-   * 主内容配置
-   */
-  mainContentConfig: IMainContentProps;
+    /**
+     * 主内容配置
+     */
+    mainContentConfig: IMainContentProps;
 
-  /**
-   * 页面类名
-   */
-  class?: string;
+    /**
+     * 页面类名
+     */
+    class?: string;
 
-  /**
-   * 类名列表
-   */
-  'class:list'?: any;
+    /**
+     * 类名列表
+     */
+    'class:list'?: any;
 
-  /**
-   * 调试模式，显示各个部分的边框
-   * @default false
-   */
-  debug?: boolean;
+    /**
+     * 调试模式，显示各个部分的边框
+     * @default false
+     */
+    debug?: boolean;
 
-  /**
-   * 元数据配置
-   */
-  metaConfig: IMetaProps;
+    /**
+     * 元数据配置
+     */
+    metaConfig: IMetaProps;
 
-  /**
-   * 页脚相关配置
-   */
-  footerConfig: IFooterProps;
+    /**
+     * 页脚相关配置
+     */
+    footerConfig: IFooterProps;
 }

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

@@ -1,3 +1,5 @@
+import type { ImageMetadata } from 'astro';
+
 export interface IMetaProps {
     title: string;
     description: string;
@@ -41,7 +43,7 @@ export interface IMetaProps {
     /**
      * 自定义头部内容
      */
-    head?: astroHTML.JSX.Element;
+    head?: any;
 
     /**
      * 页面类名

package/package.json

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

package/dist/src-vue/utils/language.ts

@@ -1,121 +0,0 @@
-import { getRelativeLocaleUrl } from 'astro:i18n';
-import type { AstroGlobal } from 'astro';
-import { cosyLogger } from '../cosy';
-
-// 默认语言
-export const DEFAULT_LANGUAGE = 'en';
-
-/**
- * 语言工具模块
- *
- * 提供语言相关的工具函数，用于多语言支持
- */
-export class LanguageUtil {
-  static getRelativeLink(locale: string, astro: AstroGlobal): string {
-    const debug = false;
-    const currentLocale = astro.currentLocale;
-    const originalPath = astro.originPathname;
-    const result = getRelativeLocaleUrl(
-      locale,
-      originalPath.replaceAll('/' + currentLocale, '')
-    );
-
-    if (debug) {
-      cosyLogger.debug(
-        `getRelativeLink: locale=${locale}, currentPath=${originalPath}, currentLocale=${currentLocale}, result=${result}`
-      );
-    }
-
-    return result;
-  }
-
-  static getLanguageName(code: string | undefined): string {
-    switch (code) {
-      case 'en':
-        return 'English';
-      case 'zh-cn':
-        return '简体中文';
-      case 'zh':
-        return '中文';
-      case undefined:
-      default:
-        return 'not known';
-    }
-  }
-
-  /**
-   * 获取当前语言
-   * @param astro Astro全局对象
-   * @returns 当前应使用的语言代码
-   */
-  static getCurrentLanguage(astro: AstroGlobal): string {
-    // 尝试从Astro全局对象中获取语言
-    const astroLang = astro.currentLocale;
-    if (astroLang) {
-      return astroLang;
-    }
-    // 尝试从URL中获取语言
-    const urlLang = this.getLanguageFromURL(astro.url.pathname);
-    if (urlLang) {
-      return urlLang;
-    }
-
-    // 尝试从浏览器设置中获取语言
-    const browserLang = this.getLanguageFromBrowser();
-    if (browserLang) {
-      return browserLang;
-    }
-
-    // 尝试从Astro全局对象中获取语言
-    const preferredLocale = astro.preferredLocale;
-    if (preferredLocale) {
-      return preferredLocale;
-    }
-
-    // 如果无法检测，返回默认语言
-    return DEFAULT_LANGUAGE;
-  }
-
-  /**
-   * 从URL中提取语言代码
-   * @param url 当前URL
-   * @returns 从URL中提取的语言代码，如果无法提取则返回undefined
-   */
-  private static getLanguageFromURL(url: string): string | undefined {
-    let currentUrl = url;
-
-    if (currentUrl === undefined) {
-      if (typeof window === 'undefined') return undefined;
-      currentUrl = window.location.href;
-    }
-
-    // 尝试从路径中提取语言代码
-    // 例如: /zh-cn/components/button
-    const pathMatch = currentUrl.match(/^\/([\w-]+)\//);
-    if (pathMatch) {
-      return pathMatch[1];
-    }
-
-    // 尝试从查询参数中提取语言代码
-    // 例如: ?lang=zh-cn
-    const urlParams = new URLSearchParams(currentUrl.split('?')[1]);
-    const langParam = urlParams.get('lang');
-    if (langParam) {
-      return langParam;
-    }
-
-    return undefined;
-  }
-
-  /**
-   * 从浏览器设置中获取首选语言
-   * @returns 从浏览器设置中获取的语言代码，如果无法获取则返回undefined
-   */
-  private static getLanguageFromBrowser(): string | undefined {
-    if (typeof navigator === 'undefined') return undefined;
-
-    // 获取浏览器语言
-    const browserLang = navigator.language.toLowerCase();
-    return browserLang;
-  }
-}