@coffic/cosy-ui 0.8.12 → 0.8.16

package/dist/index-astro.ts

@@ -24,12 +24,15 @@ export * from './src-astro/layout-basic';
 export * from './src-astro/layout-basic/BaseLayout.astro';
 export * from './src-astro/layout-dashboard';
 export * from './src-astro/link';
+export * from './src-astro/login';
+export * from './src-astro/logout';
 export * from './src-astro/main';
 export * from './src-astro/modal';
 export * from './src-astro/module';
 export * from './src-astro/nav-item';
 export * from './src-astro/nav-section';
 export * from './src-astro/products';
+export * from './src-astro/register';
 export * from './src-astro/section';
 export * from './src-astro/sidebar';
 export * from './src-astro/sidebar-nav';
@@ -39,6 +42,8 @@ export * from './src-astro/team-member';
 export * from './src-astro/text';
 export * from './src-astro/theme-switcher';
 export * from './src-astro/toc';
+export * from './src-astro/toast';
+export * from './src-astro/confirm-dialog';
 
 // 类型定义 (按字母顺序)
 export * from './src-astro/types/article';
@@ -72,15 +77,18 @@ export * from './src-astro/database/LessonDB';
 export * from './src-astro/database/MetaDB';
 
 // 工具类型
-export type { ImageProvider, ImageOptions } from './src-astro/utils/image';
-export * from './src-astro/utils/image';
-export * from './src-astro/utils/i18n';
-export * from './src-astro/utils/path';
-export * from './src-astro/utils/url';
-export * from './src-astro/utils/language';
-export * from './src-astro/utils/lang_package';
-export * from './src-astro/utils/logger';
-export * from './src-astro/utils/link';
+export type { ImageProvider, ImageOptions } from './src/utils/image';
+export * from './src/utils/image';
+export * from './src/utils/i18n';
+export * from './src/utils/path';
+export * from './src/utils/url';
+export * from './src/utils/language';
+export * from './src/utils/lang_package';
+export * from './src/utils/logger';
+export * from './src/utils/link';
 
 // 图标组件
-export * from './src-astro/icons';
+export * from './src-astro/icons';
+
+// 数据库
+export * from './src-astro/database/index'; 

package/dist/index-vue.ts

@@ -14,10 +14,10 @@ export * from './src-vue/counter-vue/index';
 export * from './src-vue/confirm-dialog-vue/index';
 
 // Buttons
-export * from './src-vue/buttons-vue/index';
+export * from './src-vue/buttons/index';
 
 // Icons
-export * from './src-vue/icons-vue/index';
+export * from './src-vue/icons/index';
 
 // List
 export * from './src-vue/list-vue/index';

package/dist/{vue → src}/utils/language.ts

@@ -1,6 +1,6 @@
 import { getRelativeLocaleUrl } from 'astro:i18n';
 import type { AstroGlobal } from 'astro';
-import { cosyLogger } from '../cosy';
+import { cosyLogger } from '../../src-astro/cosy';
 
 // 默认语言
 export const DEFAULT_LANGUAGE = 'en';

package/dist/src/utils/link.ts

@@ -0,0 +1,250 @@
+import { cosyLogger } from '../../src-astro/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 `${this.getBaseUrl()}${lang}/lessons/${lessonId.replace(`${lang}`, '')}`;
+        } else {
+            const idWithoutLang = lessonId.replace(`${lang}/`, '');
+            return `${this.getBaseUrl()}${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/{vue → src}/utils/path.ts

@@ -1,4 +1,4 @@
-import { cosyLogger } from '../cosy';
+import { cosyLogger } from '../../src-astro/cosy';
 
 /**
  * 判断当前路径是否匹配目标路径

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

@@ -1,7 +1,7 @@
 import Article from './Article.astro';
 import ArticleBasic from './ArticleBasic.astro';
 import BasicSourceCode from './ArticleBasic.astro?raw';
-import { extractSimpleExample } from '../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 export { Article, ArticleBasic };
 

package/dist/src-astro/assets/iconData.ts

@@ -200,6 +200,11 @@ export const iconData: Record<string, IconData> = {
         path: 'M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z',
     },
 
+    // 退出登录图标
+    logOut: {
+        path: 'M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4m7 14l5-5-5-5m5 5H9',
+    },
+
     // 报告图标
     report: {
         path: 'M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',

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

@@ -21,7 +21,7 @@ import CustomStyleSourceCode from './BannerCustomStyle.astro?raw';
 import FadeInSourceCode from './BannerFadeIn.astro?raw';
 import SlideUpSourceCode from './BannerSlideUp.astro?raw';
 import AllAnimationsSourceCode from './BannerAllAnimations.astro?raw';
-import { extractSimpleExample } from '../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 export {
   Banner,

package/dist/src-astro/code-container/CodeContainer.astro

@@ -4,13 +4,12 @@
  *
  * @description
  * 用于展示代码示例的容器组件，提供样式隔离功能防止内外样式相互影响。
- * 支持两种隔离模式：样式重置模式和iframe完全隔离模式。
+ * 支持样式重置模式。
  * 使用时只需在默认slot中传入内容，并为每个示例设置对应的id (tab-1, tab-2等)
  *
  * @features
  * - 样式隔离：防止外部样式影响内部组件展示
  * - 样式重置：重置内部样式，避免样式冲突
- * - iframe模式：完全隔离的预览环境
  * - 代码预览切换：支持预览和代码视图切换
  * - 多标签页：支持多个示例的标签页展示
  *
@@ -26,13 +25,6 @@
  *   </div>
  * </CodeContainer>
  *
- * <!-- 使用iframe完全隔离 -->
- * <CodeContainer codes={[code]} useIframe={true}>
- *   <div id="tab-1">
- *     <SomeComponent />
- *   </div>
- * </CodeContainer>
- *
  * <!-- 禁用样式重置 -->
  * <CodeContainer codes={[code]} resetStyles={false}>
  *   <div id="tab-1">
@@ -58,11 +50,6 @@ interface Props {
    * 每个示例对应的源代码
    */
   codes: string[];
-  /**
-   * 是否使用iframe隔离内容
-   * @default false
-   */
-  useIframe?: boolean;
   /**
    * 是否重置内部样式
    * @default true
@@ -74,7 +61,6 @@ const {
   titles = [],
   descriptions = [],
   codes,
-  useIframe = false,
   resetStyles = true,
 } = Astro.props;
 ---
@@ -132,22 +118,11 @@ const {
 
         <div class="cosy:relative cosy:p-4 cosy:bg-gradient-to-br cosy:from-red-100 cosy:to-green-300 cosy:rounded-b">
           <div class="cosy:block cosy:code-example-panel" data-panel="preview">
-            {useIframe ? (
-              <div class="cosy:w-full cosy:min-h-64 cosy:bg-white cosy:rounded cosy:border">
-                <iframe
-                  class="cosy:w-full cosy:min-h-64 cosy:border-none cosy:rounded"
-                  data-preview-frame={`tab-${index + 1}`}
-                  sandbox="allow-scripts allow-same-origin"
-                  title={`示例预览 ${index + 1}`}
-                />
-              </div>
-            ) : (
-              <div
-                class={`cosy:code-preview-area ${resetStyles ? 'cosy:reset-styles' : ''}`}
-                data-preview-area={`tab-${index + 1}`}>
-                <slot />
-              </div>
-            )}
+            <div
+              class={`cosy:code-preview-area ${resetStyles ? 'cosy:reset-styles' : ''}`}
+              data-preview-area={`tab-${index + 1}`}>
+              <slot />
+            </div>
           </div>
 
           <div class="cosy:hidden cosy:code-example-panel" data-panel="code">
@@ -228,13 +203,6 @@ const {
     margin-bottom: 0.25em;
   }
 
-  /* iframe 隔离样式 */
-  [data-role='code-container'] iframe[data-preview-frame] {
-    background: white;
-    border: 1px solid #e5e7eb;
-    border-radius: 0.375rem;
-  }
-
   /* 防止内部组件的样式泄漏到外部 */
   [data-role='code-container'] .cosy\:code-preview-area {
     position: relative;
@@ -255,62 +223,9 @@ const {
 </style>
 
 <script>
-  function initializeIframePreviews() {
-    const iframes = document.querySelectorAll('[data-preview-frame]');
-
-    iframes.forEach((iframe) => {
-      const container = iframe.closest('[data-role="code-container"]');
-      if (!container) return;
-
-      const frameId = iframe.getAttribute('data-preview-frame');
-      const contentElement = container.querySelector(`#${frameId}`);
-
-      if (contentElement) {
-        // 创建独立的HTML文档内容
-        const iframeElement = iframe as HTMLIFrameElement;
-        const iframeDoc =
-          iframeElement.contentDocument ||
-          iframeElement.contentWindow?.document;
-        if (iframeDoc) {
-          const htmlContent = `
-            <!DOCTYPE html>
-            <html>
-            <head>
-              <meta charset="UTF-8">
-              <meta name="viewport" content="width=device-width, initial-scale=1.0">
-              <title>示例预览</title>
-              <style>
-                /* 基础样式重置 */
-                * { margin: 0; padding: 0; box-sizing: border-box; }
-                body { 
-                  font-family: system-ui, -apple-system, sans-serif; 
-                  padding: 1rem;
-                  background: white;
-                  color: #374151;
-                  line-height: 1.5;
-                }
-              </style>
-            </head>
-            <body>
-              ${contentElement.innerHTML}
-            </body>
-            </html>
-          `;
-
-          iframeDoc.open();
-          iframeDoc.write(htmlContent);
-          iframeDoc.close();
-        }
-      }
-    });
-  }
-
   function initializeCodeContainer() {
     console.log('CodeContainer: 初始化代码容器');
 
-    // 初始化 iframe 预览
-    initializeIframePreviews();
-
     // 示例切换功能
     const exampleTabs = document.querySelectorAll(
       '[role="tab"][data-tab^="tab-"]'

package/dist/src-astro/confirm-dialog/ConfirmDialog.astro

@@ -0,0 +1,119 @@
+---
+/**
+ * @component ConfirmDialog
+ *
+ * @description
+ * ConfirmDialog 组件用于显示确认对话框，支持自定义标题、消息内容和按钮文本。
+ * 它会覆盖在页面内容上方，并提供一个聚焦的交互环境。
+ *
+ * @design
+ * 设计理念：
+ * 1. 聚焦交互 - 通过遮罩层和动画效果引导用户注意力
+ * 2. 灵活布局 - 支持标题、内容和操作按钮的自定义
+ * 3. 可访问性 - 支持键盘导航和屏幕阅读器
+ * 4. 响应式设计 - 在不同屏幕尺寸下保持良好的用户体验
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <ConfirmDialog
+ *   id="delete-confirm"
+ *   title="确认删除"
+ *   message="您确定要删除这个项目吗？此操作无法撤销。"
+ * />
+ *
+ * <!-- 触发按钮 -->
+ * <button data-confirm-dialog-target="delete-confirm">删除</button>
+ * ```
+ *
+ * 自定义按钮文本：
+ * ```astro
+ * <ConfirmDialog
+ *   id="save-confirm"
+ *   title="保存更改"
+ *   message="您确定要保存这些更改吗？"
+ *   confirmText="保存"
+ *   cancelText="取消"
+ * />
+ * ```
+ */
+
+import '../../style.ts';
+import type { ConfirmDialogProps } from './types';
+import { getConfirmDialogStyle } from './types';
+
+const {
+  id,
+  title = '确认操作',
+  message,
+  cancelText = '取消',
+  confirmText = '确认',
+  class: className = '',
+} = Astro.props as ConfirmDialogProps;
+
+const style = getConfirmDialogStyle();
+---
+
+<dialog id={id} class:list={['cosy:modal', 'cosy:modal-middle', className]}>
+  <div
+    class:list={[
+      'cosy:modal-box',
+      'cosy:p-6',
+      'cosy:max-w-sm',
+      'cosy:rounded-lg',
+      'cosy:shadow-lg',
+      style.bg,
+    ]}>
+    {
+      title && (
+        <h3 class:list={['cosy:text-lg', 'cosy:font-medium', style.text]}>
+          {title}
+        </h3>
+      )
+    }
+    <p class:list={['cosy:py-4', style.text]}>{message}</p>
+
+    <div class:list={['cosy:modal-action', 'cosy:gap-2']}>
+      <form method="dialog" class="cosy:flex cosy:gap-2">
+        <button class:list={[style.cancelBtn]}>{cancelText}</button>
+        <button
+          class:list={[style.confirmBtn]}
+          onclick={`window.handleConfirmDialog?.('${id}')`}
+          type="submit">{confirmText}</button
+        >
+      </form>
+    </div>
+  </div>
+
+  <form method="dialog" class="cosy:modal-backdrop">
+    <button>关闭</button>
+  </form>
+</dialog>
+
+<script is:inline define:vars={{ id }}>
+  // 为了方便使用，我们提供一些辅助方法
+  document.addEventListener('DOMContentLoaded', () => {
+    const dialog = document.getElementById(id);
+    if (!dialog) return;
+
+    // 为所有触发这个确认框的按钮添加点击事件
+    document
+      .querySelectorAll(`[data-confirm-dialog-target="${id}"]`)
+      .forEach((trigger) => {
+        trigger.addEventListener('click', () => {
+          dialog.showModal();
+        });
+      });
+
+    // 全局处理确认事件的方法
+    if (!window.handleConfirmDialog) {
+      window.handleConfirmDialog = (dialogId) => {
+        // 触发自定义事件
+        const event = new CustomEvent('confirm-dialog-confirm', {
+          detail: { dialogId },
+        });
+        document.dispatchEvent(event);
+      };
+    }
+  });
+</script>

package/dist/src-astro/confirm-dialog/index.ts

@@ -0,0 +1,2 @@
+export { default as ConfirmDialog } from './ConfirmDialog.astro';
+export type { ConfirmDialogProps } from './types'; 

package/dist/src-astro/confirm-dialog/types.ts

@@ -0,0 +1,47 @@
+export interface ConfirmDialogProps {
+    /**
+     * 对话框的唯一标识符
+     */
+    id: string;
+
+    /**
+     * 对话框标题
+     */
+    title?: string;
+
+    /**
+     * 对话框消息内容
+     */
+    message: string;
+
+    /**
+     * 取消按钮文本
+     */
+    cancelText?: string;
+
+    /**
+     * 确认按钮文本
+     */
+    confirmText?: string;
+
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+export interface ConfirmDialogStyle {
+    bg: string;
+    border: string;
+    text: string;
+    confirmBtn: string;
+    cancelBtn: string;
+}
+
+export const getConfirmDialogStyle = (): ConfirmDialogStyle => ({
+    bg: 'cosy:bg-base-100',
+    border: 'cosy:border-base-300',
+    text: 'cosy:text-base-content',
+    confirmBtn: 'cosy:btn cosy:btn-primary',
+    cancelBtn: 'cosy:btn cosy:btn-ghost',
+});