@coffic/cosy-ui 0.7.2 → 0.8.6

package/dist/src-astro/utils/link.ts

@@ -0,0 +1,250 @@
+import { cosyLogger } from '../cosy';
+
+export class LinkUtil {
+  // 从 astro.config.ts 中获取基础路径
+  static getBaseUrl = (): string => {
+    return import.meta.env.BASE_URL;
+  };
+
+  // 生成带基础路径的完整 URL
+  static createUrl = (path: string): string => {
+    const baseUrl = LinkUtil.getBaseUrl();
+    // 如果路径以 '/' 开头，去除开头的 '/'
+    if (path.startsWith('/')) {
+      path = path.substring(1);
+    }
+
+    return `${baseUrl}${path}`;
+  };
+
+  /**
+   * 规范化语言代码
+   * @param lang - 语言代码
+   * @returns 规范化后的语言代码
+   */
+  static normalizeLanguage(lang: string): string {
+    const normalizedLang = lang.toLowerCase().replace('zh-CN', 'zh-cn');
+    if (normalizedLang.length == 0) {
+      console.error('lang is empty');
+      return 'en';
+    }
+    return normalizedLang;
+  }
+
+  static getHomeLink(lang: string): string {
+    return `${this.getBaseUrl}/${lang}`;
+  }
+
+  static getLessonsLink(lang: string): string {
+    return `/${lang}/lessons`;
+  }
+
+  static getExperimentsLink(lang: string): string {
+    return `/${lang}/experiments`;
+  }
+
+  static getExperimentLink(lang: string, experimentId: string): string {
+    if (experimentId.endsWith(lang)) {
+      return `/${lang}/experiments/${experimentId.replace(`${lang}`, '')}`;
+    } else {
+      const idWithoutLang = experimentId.replace(`${lang}/`, '');
+      return `/${lang}/experiments/${idWithoutLang}`;
+    }
+  }
+
+  static getCoursesLink(lang: string): string {
+    return `/${lang}/courses`;
+  }
+
+  static getBlogsLink(lang: string): string {
+    return `/${lang}/blogs`;
+  }
+
+  static getLessonLink(lang: string, lessonId: string): string {
+    if (lessonId.endsWith(lang)) {
+      return `/${lang}/lessons/${lessonId.replace(`${lang}`, '')}`;
+    } else {
+      const idWithoutLang = lessonId.replace(`${lang}/`, '');
+      return `/${lang}/lessons/${idWithoutLang}`;
+    }
+  }
+
+  static getTagLink(lang: string, tagName: string): string {
+    return `/${lang}/blogs/tag/${tagName}`;
+  }
+
+  static getBlogLink(blogId: string, lang: string): string {
+    const debug = false;
+    const blogIdWithoutLang = blogId.replace(`${lang}/`, '');
+
+    if (debug) {
+      cosyLogger.info(`获取博客文档链接，博客文档ID: ${blogId}`);
+    }
+
+    return `/${lang}/blogs/${blogIdWithoutLang}`;
+  }
+
+  static getCourseLink(courseId: string): string {
+    const debug = false;
+    const lang = courseId.split('/')[0];
+    const courseIdWithoutLang = courseId.replace(`${lang}/`, '');
+
+    if (debug) {
+      cosyLogger.info(`获取课程文档链接，课程文档ID: ${courseId}`);
+    }
+
+    return LinkUtil.createUrl(`/${lang}/courses/${courseIdWithoutLang}`);
+  }
+
+  static getMetaLink(lang: string, slug: string): string {
+    return `/${this.normalizeLanguage(lang)}/meta/${slug}`;
+  }
+
+  static getSigninLink(lang: string): string {
+    return `/${this.normalizeLanguage(lang)}/signin`;
+  }
+
+  static getAuthCallbackCookieLink(lang: string): string {
+    return `/${this.normalizeLanguage(lang)}/auth/callback_cookie`;
+  }
+
+  static getAuthCallbackTokenLink(lang: string): string {
+    return `/${this.normalizeLanguage(lang)}/auth/callback_token`;
+  }
+
+  static getAuthAccountLink(lang: string): string {
+    return `/${this.normalizeLanguage(lang)}/auth/account`;
+  }
+
+  static getDashboardUrl(lang: string): string {
+    return `/${this.normalizeLanguage(lang)}/auth/dashboard`;
+  }
+
+  static getAuthErrorLink(lang: string): string {
+    return `/${this.normalizeLanguage(lang)}/auth/error`;
+  }
+
+  static getPrivacyLink(lang: string): string {
+    return this.getMetaLink(lang, 'privacy');
+  }
+
+  static getTermsLink(lang: string): string {
+    return this.getMetaLink(lang, 'terms');
+  }
+
+  static getAboutLink(lang: string): string {
+    return this.getMetaLink(lang, 'about');
+  }
+
+  /**
+   * 根据ID生成链接
+   *
+   * 该函数根据文档ID生成对应的链接路径。
+   *
+   * @param {string} id - 文档ID, 例如 'courses/zh-cn/supervisor/index.md'
+   * @returns {string} 返回生成的链接路径
+   * @example
+   * // 例如：
+   * // id=courses/zh-cn/supervisor/index.md，则返回/zh-cn/courses/supervisor
+   * // id=courses/en/supervisor/index.md，则返回/en/courses/supervisor
+   */
+  static getLink(id: string): string {
+    const category = id.split('/')[0];
+    const lang = id.split('/')[1];
+    const path = id.split('/').slice(2).join('/');
+
+    const link = `/${lang}/${category}/${path}`;
+    return link.replace(/\/+/g, '/');
+  }
+
+  /**
+   * 根据分类生成顶级链接
+   *
+   * @param {string} category - 分类名称
+   * @param {string} lang - 语言代码，例如 'zh-cn', 'en'
+   * @returns {string} 返回生成的顶级链接路径
+   * @example
+   * // 例如：
+   * // category=courses, lang=zh-cn，则返回/zh-cn/courses
+   * // category=courses, lang=en，则返回/en/courses
+   */
+  static getTopLevelLink(category: string, lang: string): string {
+    return `/${lang}/${category}`;
+  }
+
+  /**
+   * 处理首页重定向
+   * @param locale - 语言代码
+   * @returns 规范化的语言代码
+   */
+  static homeRedirect(locale: string): string {
+    return locale || 'en';
+  }
+
+  /**
+   * 检查是否为首页路径
+   * @param pathname - 路径
+   * @returns 是否为首页
+   */
+  static isHomePath(pathname: string): boolean {
+    return pathname === '/' || pathname === '';
+  }
+
+  static isHomeLink(path: string, lang: string): boolean {
+    return path === `/${lang}` || path === `/${lang}/`;
+  }
+
+  static isLessonsLink(path: string, lang: string): boolean {
+    return (
+      path === `/${lang}/lessons` ||
+      path === `/${lang}/lessons/` ||
+      path.startsWith(`/${lang}/lessons/`)
+    );
+  }
+
+  static isExperimentsLink(path: string, lang: string): boolean {
+    return (
+      path === `/${lang}/experiments` ||
+      path === `/${lang}/experiments/` ||
+      path.startsWith(`/${lang}/experiments/`)
+    );
+  }
+
+  static isCoursesLink(path: string, lang: string): boolean {
+    return (
+      path === `/${lang}/courses` ||
+      path === `/${lang}/courses/` ||
+      path.startsWith(`/${lang}/courses/`)
+    );
+  }
+
+  static isBlogsLink(path: string, lang: string): boolean {
+    return (
+      path === `/${lang}/blogs` ||
+      path === `/${lang}/blogs/` ||
+      path.startsWith(`/${lang}/blogs/`)
+    );
+  }
+
+  static getOAuthSuccessLink(currentOrigin: string): string {
+    return `${currentOrigin}/api/callback_success`;
+  }
+
+  static getOAuthErrorLink(currentOrigin: string): string {
+    return `${currentOrigin}/api/callback_error`;
+  }
+
+  static getLoginLink(currentOrigin: string): string {
+    return `${currentOrigin}/api/login`;
+  }
+
+  static getActiveLink(currentLink: string, links: string[]): string {
+    let activeLink = '';
+    for (const link of links) {
+      if (currentLink.startsWith(link) && link.length > activeLink.length) {
+        activeLink = link;
+      }
+    }
+    return activeLink;
+  }
+}

package/dist/src-astro/utils/logger.ts

@@ -0,0 +1,136 @@
+type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+
+// 控制是否显示时间戳
+const SHOW_TIMESTAMP = false;
+
+// ANSI 颜色代码
+const colors = {
+  reset: '\x1b[0m',
+  debug: '\x1b[36m', // 青色
+  info: '\x1b[32m', // 绿色
+  warn: '\x1b[33m', // 黄色
+  error: '\x1b[31m', // 红色
+  gray: '\x1b[90m', // 灰色用于时间戳
+};
+
+export class Logger {
+  private topic: string = '';
+
+  private formatArray(arr: any[]): string {
+    const MAX_LINES = 70;
+    const MAX_LENGTH = 100;
+
+    const truncateString = (str: string): string => {
+      return str.length > MAX_LENGTH ? str.slice(0, MAX_LENGTH) + '...' : str;
+    };
+
+    const truncateObject = (obj: any): any => {
+      if (typeof obj !== 'object' || obj === null) {
+        return typeof obj === 'string' ? truncateString(obj) : obj;
+      }
+
+      const result: any = Array.isArray(obj) ? [] : {};
+      for (const [key, value] of Object.entries(obj)) {
+        result[key] =
+          typeof value === 'string'
+            ? truncateString(value)
+            : typeof value === 'object'
+              ? truncateObject(value)
+              : value;
+      }
+      return result;
+    };
+
+    const items = arr.slice(0, MAX_LINES).map((item) => {
+      const truncatedItem = truncateObject(item);
+      // 使用2个空格缩进，并在每行前添加 "  • "
+      const jsonString = JSON.stringify(truncatedItem, null, 2)
+        .split('\n')
+        .map((line, index) => (index === 0 ? `  • ${line}` : `    ${line}`))
+        .join('\n');
+      return jsonString;
+    });
+
+    let output = items.join('\n');
+    if (arr.length > MAX_LINES) {
+      const remainingCount = arr.length - MAX_LINES;
+      output += `\n  ⋮ ... and ${remainingCount} more items`;
+    }
+
+    return output;
+  }
+
+  private log(
+    level: LogLevel,
+    message: string | object | any[],
+    newLine: boolean = false
+  ) {
+    // 使用本地时间，并格式化为 HH:mm:ss 格式
+    const timestamp = new Date().toLocaleTimeString('zh-CN', {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    });
+
+    const formattedMessage = Array.isArray(message)
+      ? this.formatArray(message)
+      : typeof message === 'object'
+        ? JSON.stringify(message, null, 2)
+        : message;
+
+    const timestampPart = SHOW_TIMESTAMP
+      ? `${colors.gray}${timestamp}${colors.reset} `
+      : '';
+
+    const emoji = {
+      debug: '🔍',
+      info: '🐳',
+      warn: '🚨',
+      error: '❌',
+    }[level];
+
+    if (newLine) {
+      console.log('');
+    }
+
+    console.log(
+      timestampPart +
+        `${colors[level]}${emoji} ` +
+        this.getPrefix() +
+        `${level.toUpperCase()}${colors.reset} ` +
+        `${colors.gray}:${colors.reset} ` +
+        `${colors[level]}${formattedMessage}${colors.reset}`
+    );
+  }
+
+  private getPrefix() {
+    return this.topic ? `[${this.topic}] ` : '';
+  }
+
+  constructor(topic: string = '') {
+    this.topic = topic;
+  }
+
+  debug(message: string | object) {
+    this.log('debug', message);
+  }
+
+  info(message: string | object) {
+    this.log('info', message);
+  }
+
+  warn(message: string | object) {
+    this.log('warn', message);
+  }
+
+  error(message: string | object) {
+    this.log('error', message, true);
+  }
+
+  array(title: string, arr: any[]) {
+    this.log('info', title + '\n' + this.formatArray(arr));
+  }
+}
+
+export const defaultLogger = new Logger();

package/dist/src-astro/utils/path.ts

@@ -0,0 +1,59 @@
+import { cosyLogger } from '../cosy';
+
+/**
+ * 判断当前路径是否匹配目标路径
+ * @param currentPath 当前路径
+ * @param targetPath 目标路径
+ * @returns 是否匹配
+ */
+export function isPathMatch(currentPath: string, targetPath: string): boolean {
+  const debug = false;
+
+  if (debug) {
+    cosyLogger.info(`判断 ${currentPath} 是否匹配 ${targetPath}`);
+  }
+
+  // 如果完全匹配，直接返回
+  if (currentPath === targetPath) {
+    if (debug) {
+      cosyLogger.info(`${currentPath} 完全匹配 ${targetPath}`);
+    }
+    return true;
+  }
+
+  // 标准化路径，移除最后的斜杠
+  const normalizedCurrentPath = currentPath.endsWith('/')
+    ? currentPath.slice(0, -1)
+    : currentPath;
+
+  const normalizedTargetPath = targetPath.endsWith('/')
+    ? targetPath.slice(0, -1)
+    : targetPath;
+
+  // 直接比较完整路径
+  if (normalizedCurrentPath === normalizedTargetPath) {
+    return true;
+  }
+
+  // 提取不带基础路径的部分进行比较
+  // 例如把 /cosy-ui/zh-cn/components/button 中提取 /zh-cn/components/button
+  const currentPathSegments = normalizedCurrentPath.split('/').filter(Boolean);
+  const targetPathSegments = normalizedTargetPath.split('/').filter(Boolean);
+
+  // 如果目标路径长度大于当前路径，不可能匹配
+  if (targetPathSegments.length > currentPathSegments.length) {
+    return false;
+  }
+
+  // 从后向前比较路径段
+  for (let i = 1; i <= targetPathSegments.length; i++) {
+    if (
+      currentPathSegments[currentPathSegments.length - i] !==
+      targetPathSegments[targetPathSegments.length - i]
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+}

package/dist/src-astro/utils/social.ts

@@ -0,0 +1,90 @@
+// 定义支持的社交平台及其配置
+interface PlatformConfig {
+  name: string;
+  domains: string[];
+}
+
+// 处理后的社交链接类型
+export interface ProcessedSocialLink {
+  url: string;
+  name: string;
+  platform: string;
+}
+
+// 社交平台配置
+const platformConfigs: Record<string, PlatformConfig> = {
+  github: {
+    name: 'GitHub',
+    domains: ['github.com'],
+  },
+  twitter: {
+    name: 'Twitter',
+    domains: ['twitter.com', 'x.com'],
+  },
+  linkedin: {
+    name: 'LinkedIn',
+    domains: ['linkedin.com'],
+  },
+  weibo: {
+    name: '微博',
+    domains: ['weibo.com'],
+  },
+  wechat: {
+    name: '微信',
+    domains: ['wechat.com', 'weixin.qq.com'],
+  },
+  zhihu: {
+    name: '知乎',
+    domains: ['zhihu.com'],
+  },
+  bilibili: {
+    name: 'BiliBili',
+    domains: ['bilibili.com'],
+  },
+  youtube: {
+    name: 'YouTube',
+    domains: ['youtube.com', 'youtu.be'],
+  },
+  discord: {
+    name: 'Discord',
+    domains: ['discord.com', 'discord.gg'],
+  },
+};
+
+// 从 URL 判断社交平台
+function detectPlatform(url: string): [string, PlatformConfig] | null {
+  try {
+    const urlObj = new URL(url);
+    const hostname = urlObj.hostname.toLowerCase();
+
+    for (const [platform, config] of Object.entries(platformConfigs)) {
+      if (config.domains.some((domain) => hostname.includes(domain))) {
+        return [platform, config];
+      }
+    }
+  } catch (e) {
+    console.error('Invalid URL:', url, e);
+  }
+  return null;
+}
+
+// 处理社交链接
+export function processSocialLink(url: string): ProcessedSocialLink {
+  const platformInfo = detectPlatform(url);
+
+  if (!platformInfo) {
+    // 如果无法识别平台，返回默认值
+    return {
+      url: url,
+      name: '社交链接',
+      platform: 'default',
+    };
+  }
+
+  const [platform, config] = platformInfo;
+  return {
+    url: url,
+    name: config.name,
+    platform,
+  };
+}

package/dist/src-astro/utils/theme.ts

@@ -0,0 +1,122 @@
+interface ThemeManager {
+  updateActiveTheme: (currentTheme: string) => void;
+  handleThemeClick: (this: HTMLElement) => void;
+  initialize: () => void;
+  setTheme: (theme: string) => void;
+  detectSystemTheme: () => string;
+}
+
+/**
+ * 创建主题管理器
+ *
+ * 提供主题切换、主题持久化存储和系统主题检测等功能
+ *
+ * @returns ThemeManager 主题管理器对象
+ */
+export function createThemeManager(): ThemeManager {
+  const getThemeItems = () =>
+    document.querySelectorAll<HTMLElement>('[data-theme]');
+
+  const updateActiveTheme = (currentTheme: string) => {
+    const themeItems = getThemeItems();
+    themeItems.forEach((item) => {
+      const themeId = item.getAttribute('data-theme');
+      const isActive = themeId === currentTheme;
+
+      // 设置元素的 data-active 属性
+      item.setAttribute('data-active', String(isActive));
+
+      // 仅对于旧式主题按钮（data-set-theme 属性），保留旧的类切换行为
+      if (item.hasAttribute('data-set-theme')) {
+        item.classList.toggle('cosy:bg-primary', isActive);
+        item.classList.toggle('cosy:text-primary-content', isActive);
+      }
+    });
+  };
+
+  function handleThemeClick(this: HTMLElement) {
+    const theme =
+      this.getAttribute('data-set-theme') || this.getAttribute('data-theme');
+    if (theme) {
+      setTheme(theme);
+    }
+  }
+
+  /**
+   * 设置主题
+   *
+   * @param theme 主题ID
+   */
+  const setTheme = (theme: string) => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+    updateActiveTheme(theme);
+  };
+
+  /**
+   * 检测系统主题偏好（亮色/暗色）
+   *
+   * @returns 'dark' 或 'light'
+   */
+  const detectSystemTheme = (): string => {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light';
+  };
+
+  /**
+   * 初始化主题管理器
+   *
+   * 从本地存储中获取主题设置，如果没有则尝试使用系统主题，最后使用默认主题
+   */
+  const initialize = () => {
+    // 从本地存储中获取主题
+    let savedTheme = localStorage.getItem('theme');
+
+    // 如果没有保存的主题，则尝试使用系统主题
+    if (!savedTheme) {
+      const systemTheme = detectSystemTheme();
+      if (systemTheme === 'dark') {
+        savedTheme = 'dark';
+      } else {
+        savedTheme = 'default'; // 默认使用默认主题
+      }
+    }
+
+    // 设置主题
+    document.documentElement.setAttribute('data-theme', savedTheme);
+    updateActiveTheme(savedTheme);
+
+    // 添加主题切换事件监听器
+    // 支持新旧两种类型的主题切换按钮
+    const themeItems = [
+      ...Array.from(document.querySelectorAll<HTMLElement>('[data-set-theme]')),
+      ...Array.from(
+        document.querySelectorAll<HTMLElement>('.cosy\\:theme-item')
+      ),
+    ];
+
+    themeItems.forEach((item) => {
+      item.removeEventListener('click', handleThemeClick);
+      item.addEventListener('click', handleThemeClick);
+    });
+
+    // 监听系统主题变化
+    window
+      .matchMedia('(prefers-color-scheme: dark)')
+      .addEventListener('change', (e) => {
+        // 只有当用户没有手动设置过主题时，才跟随系统主题变化
+        if (!localStorage.getItem('theme')) {
+          setTheme(e.matches ? 'dark' : 'default');
+        }
+      });
+  };
+
+  return {
+    updateActiveTheme,
+    handleThemeClick,
+    initialize,
+    setTheme,
+    detectSystemTheme,
+  };
+}

package/dist/{utils → src-astro/utils}/url.ts

@@ -4,7 +4,7 @@
  * @returns 是否是GitHub仓库
  */
 export function isGitHubRepo(url: string): boolean {
-    return url.includes('github.com');
+  return url.includes('github.com');
 }
 
 /**
@@ -13,5 +13,5 @@ export function isGitHubRepo(url: string): boolean {
  * @returns 是否是GitLab仓库
  */
 export function isGitLabRepo(url: string): boolean {
-    return url.includes('gitlab.com');
+  return url.includes('gitlab.com');
 }

package/dist/vue/SmartLink.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{
+  href: string;
+  external?: boolean;
+  externalClass?: string;
+}>();
+</script>
+
+<template>
+  <a
+    :href="href"
+    :target="external ? '_blank' : undefined"
+    :rel="external ? 'noopener noreferrer' : undefined"
+    :class="{
+      'cosy:no-underline cosy:rounded-md cosy:p-1 cosy:transition-all cosy:duration-300 cosy:hover:text-primary/80': true,
+      [externalClass]: external,
+    }"
+  >
+    <slot />
+  </a>
+</template>