@coffic/cosy-ui 0.2.2 → 0.3.0-beta.1

package/dist/components/layouts/Sidebar.astro

@@ -0,0 +1,119 @@
+---
+/**
+ * Sidebar组件
+ * 
+ * 用于文档页面的侧边栏导航
+ * 
+ * @example
+ * ```astro
+ * ---
+ * import Sidebar from './Sidebar.astro';
+ * 
+ * const sidebarItems = [
+ *   { title: "入门", items: [
+ *     { href: "/docs/getting-started", text: "快速开始" },
+ *     { href: "/docs/installation", text: "安装" }
+ *   ]}
+ * ];
+ * ---
+ * 
+ * <Sidebar sidebarItems={sidebarItems} currentPath="/docs/getting-started" />
+ * ```
+ */
+
+import { isPathMatch } from '../../utils/path';
+import "../../app.css"
+
+export interface SidebarItem {
+  href: string;
+  text: string;
+  items?: SidebarItem[];
+}
+
+export interface SidebarSection {
+  title: string;
+  items: SidebarItem[];
+}
+
+export interface Props {
+  /**
+   * 侧边栏项目
+   */
+  sidebarItems: SidebarSection[];
+  
+  /**
+   * 当前路径
+   */
+  currentPath: string;
+}
+
+const { sidebarItems, currentPath } = Astro.props;
+---
+
+<aside class="w-64 border-r border-base-300 shrink-0">
+  <nav class="p-4 sticky top-16">
+    {sidebarItems.map((section: SidebarSection) => (
+      <div class="mb-6">
+        <h3 class="font-bold mb-2 text-base-content/70">{section.title}</h3>
+        <ul class="menu bg-base-200 rounded-box w-56">
+          {section.items.map((item: SidebarItem) => {
+            const isActive = isPathMatch(currentPath, item.href);
+            return (
+              <li>
+                <a 
+                  href={item.href} 
+                  class:list={[
+                    "hover:bg-base-300",
+                    { "menu-active": isActive }
+                  ]}
+                >
+                  {item.text}
+                </a>
+                {item.items && (
+                  <ul>
+                    {item.items.map((subitem: SidebarItem) => {
+                      const isSubActive = isPathMatch(currentPath, subitem.href);
+                      return (
+                        <li>
+                          <a 
+                            href={subitem.href} 
+                            class:list={[
+                              "hover:bg-base-300",
+                              { "active": isSubActive }
+                            ]}
+                          >
+                            {subitem.text}
+                          </a>
+                          {subitem.items && (
+                            <ul>
+                              {subitem.items.map((subsubitem: SidebarItem) => {
+                                const isSubSubActive = isPathMatch(currentPath, subsubitem.href);
+                                return (
+                                  <li>
+                                    <a 
+                                      href={subsubitem.href} 
+                                      class:list={[
+                                        "hover:bg-base-300",
+                                        { "active": isSubSubActive }
+                                      ]}
+                                    >
+                                      {subsubitem.text}
+                                    </a>
+                                  </li>
+                                );
+                              })}
+                            </ul>
+                          )}
+                        </li>
+                      );
+                    })}
+                  </ul>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    ))}
+  </nav>
+</aside> 

package/dist/components/navigation/TableOfContents.astro

@@ -5,6 +5,7 @@
  * @description
  * TableOfContents 组件是一个目录导航组件，用于显示页面内容的标题结构。
  * 它会自动检测页面中的标题元素，生成目录列表，并在用户滚动页面时高亮当前可见的标题。
+ * 当页面只有一个标题或没有足够的标题结构时，组件会自动隐藏。
  * 
  * @design
  * 设计理念：
@@ -12,6 +13,7 @@
  * 2. 上下文感知 - 自动高亮当前阅读位置，提供阅读进度反馈
  * 3. 视觉层次 - 通过缩进和样式区分不同级别的标题
  * 4. 响应式设计 - 在小屏幕设备上自动隐藏，优化空间利用
+ * 5. 智能显示 - 当页面结构不需要目录时自动隐藏
  * 
  * @usage
  * 基本用法：
@@ -72,6 +74,11 @@ interface Props {
    * @default "main"
    */
   containerSelector?: string;
+  /**
+   * 显示目录所需的最少标题数量
+   * @default 2
+   */
+  minHeadings?: number;
 }
 
 const {
@@ -81,34 +88,52 @@ const {
   maxDepth = 3,
   title = '目录',
   containerSelector = 'main',
+  minHeadings = 2,
 } = Astro.props;
 
 // 生成唯一ID，确保多个TOC实例不会冲突
 const tocId = `toc-${Math.random().toString(36).substring(2, 9)}`;
 ---
 
-<div class={`toc ${fixed ? 'toc-fixed' : ''} ${className}`}>
-  <div class="toc-container">
-    <div class="toc-title">{title}</div>
-    <ul class="toc-list" id={tocId}>
-      <!-- 目录项将通过 JavaScript 动态生成 -->
-      <li class="toc-placeholder">加载中...</li>
-    </ul>
+<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>
+      <ul class="menu menu-sm" id={tocId}>
+        <!-- 目录项将通过 JavaScript 动态生成 -->
+        <li class="text-base-content/60">加载中...</li>
+      </ul>
+    </div>
   </div>
 </div>
 
-<script define:vars={{ selector, maxDepth, tocId, containerSelector }}>
+<script define:vars={{ selector, maxDepth, tocId, containerSelector, minHeadings }}>
   // 在页面加载完成后生成目录
   function generateTOC() {
     // 使用指定的容器选择器查找内容容器
     const container = document.querySelector(containerSelector);
     if (!container) return;
     
-    // 只查找容器内的标题，而不是整个页面
-    const headings = container.querySelectorAll(selector);
+    // 排除 CodeExample 组件中的标题
+    const headings = Array.from(container.querySelectorAll(selector)).filter(heading => {
+      // 检查标题是否在 CodeExample 组件内
+      const isInCodeExample = heading.closest('.code-example') !== null;
+      return !isInCodeExample;
+    });
+    
     const tocList = document.getElementById(tocId);
+    const tocContainer = document.getElementById(`${tocId}-container`);
     
-    if (!tocList || headings.length === 0) return;
+    if (!tocList || !tocContainer) return;
+    
+    // 如果标题数量少于最小要求，保持隐藏状态并退出
+    if (headings.length < minHeadings) {
+      tocContainer.style.display = 'none';
+      return;
+    }
+    
+    // 显示目录容器
+    tocContainer.style.display = 'block';
     
     // 清空占位符
     tocList.innerHTML = '';
@@ -142,20 +167,17 @@ const tocId = `toc-${Math.random().toString(36).substring(2, 9)}`;
       if (level > maxDepth) return;
       
       const listItem = document.createElement('li');
-      listItem.className = `toc-item toc-level-${level}`;
-      listItem.dataset.headingId = heading.id; // 添加数据属性，便于后续查找
+      listItem.className = `toc-level-${level}`;
+      listItem.dataset.headingId = heading.id;
       
       const link = document.createElement('a');
       link.href = `#${heading.id}`;
       link.textContent = heading.textContent;
-      link.className = 'toc-link';
+      link.className = 'text-base-content/80 hover:text-primary transition-colors';
       
-      // 添加前缀标记，增强视觉层次
+      // 添加缩进
       if (level === 3) {
-        const prefix = document.createElement('span');
-        prefix.className = 'toc-prefix';
-        prefix.innerHTML = '└─ ';
-        link.prepend(prefix);
+        link.style.paddingLeft = '1.5rem';
       }
       
       listItem.appendChild(link);
@@ -188,12 +210,10 @@ const tocId = `toc-${Math.random().toString(36).substring(2, 9)}`;
       });
     });
     
-    // 如果没有找到标题，显示提示信息
-    if (tocList.children.length === 0) {
-      const listItem = document.createElement('li');
-      listItem.textContent = '没有找到标题';
-      listItem.className = 'toc-empty';
-      tocList.appendChild(listItem);
+    // 如果没有找到标题或标题数量不足，隐藏目录
+    if (tocList.children.length < minHeadings) {
+      tocContainer.style.display = 'none';
+      return;
     }
     
     // 添加活动标题高亮
@@ -230,11 +250,14 @@ const tocId = `toc-${Math.random().toString(36).substring(2, 9)}`;
   
   // 高亮当前可见的标题
   function highlightActiveHeading() {
+    const tocContainer = document.getElementById(`${tocId}-container`);
+    if (!tocContainer || tocContainer.style.display === 'none') return;
+    
     const container = document.querySelector(containerSelector);
     if (!container) return;
     
     const headings = Array.from(container.querySelectorAll(selector));
-    if (headings.length === 0) return;
+    if (headings.length < minHeadings) return;
     
     // 获取视口高度和滚动位置
     const viewportHeight = window.innerHeight;
@@ -261,33 +284,24 @@ const tocId = `toc-${Math.random().toString(36).substring(2, 9)}`;
     // 如果找到了最接近的标题，使用它的ID
     if (closestHeading) {
       activeHeadingId = closestHeading.id;
-      
-      // 为当前活动标题添加一个临时的高亮效果
-      headings.forEach(h => h.classList.remove('current-heading'));
-      closestHeading.classList.add('current-heading');
-      
-      // 5秒后移除高亮效果
-      setTimeout(() => {
-        closestHeading.classList.remove('current-heading');
-      }, 5000);
     } else if (headings.length > 0) {
       // 如果没有找到，使用第一个标题
       activeHeadingId = headings[0].id;
     }
     
     // 更新活动链接样式
-    const tocLinks = document.querySelectorAll(`#${tocId} .toc-link`);
+    const tocLinks = document.querySelectorAll(`#${tocId} a`);
     let hasActiveLink = false;
     
     tocLinks.forEach(link => {
       const href = link.getAttribute('href').substring(1);
       
       // 清除所有高亮
-      link.classList.remove('toc-active', 'toc-parent-active');
+      link.classList.remove('text-primary', 'font-medium');
       
       // 添加当前活动标题的高亮
       if (href === activeHeadingId) {
-        link.classList.add('toc-active');
+        link.classList.add('text-primary', 'font-medium');
         hasActiveLink = true;
         
         // 添加一个动画效果，使高亮更明显
@@ -298,41 +312,26 @@ const tocId = `toc-${Math.random().toString(36).substring(2, 9)}`;
           duration: 300,
           easing: 'ease-out'
         });
-        
-        // 如果是 h3，也高亮相关的 h2
-        const h3Item = link.closest('.toc-level-3');
-        if (h3Item) {
-          // 找到前面最近的 h2
-          let prevItem = h3Item.previousElementSibling;
-          while (prevItem) {
-            if (prevItem.classList.contains('toc-level-2')) {
-              const h2Link = prevItem.querySelector('.toc-link');
-              if (h2Link) h2Link.classList.add('toc-parent-active');
-              break;
-            }
-            prevItem = prevItem.previousElementSibling;
-          }
-        }
       }
     });
     
     // 如果没有找到活动链接，尝试高亮第一个标题
     if (!hasActiveLink && tocLinks.length > 0) {
-      tocLinks[0].classList.add('toc-active');
+      tocLinks[0].classList.add('text-primary', 'font-medium');
     }
     
     // 确保活动链接在视图中可见
-    const activeLink = document.querySelector(`#${tocId} .toc-active`);
+    const activeLink = document.querySelector(`#${tocId} a.text-primary`);
     if (activeLink && tocList) {
-      const tocContainer = document.querySelector('.toc-fixed');
-      if (tocContainer) {
+      const tocScrollContainer = document.querySelector('.fixed');
+      if (tocScrollContainer) {
         const linkTop = activeLink.offsetTop;
-        const containerScrollTop = tocContainer.scrollTop;
-        const containerHeight = tocContainer.clientHeight;
+        const containerScrollTop = tocScrollContainer.scrollTop;
+        const containerHeight = tocScrollContainer.clientHeight;
         
         // 如果链接不在可视区域内，滚动到可见位置
         if (linkTop < containerScrollTop || linkTop > containerScrollTop + containerHeight) {
-          tocContainer.scrollTop = linkTop - containerHeight / 2;
+          tocScrollContainer.scrollTop = linkTop - containerHeight / 2;
         }
       }
     }
@@ -344,9 +343,13 @@ const tocId = `toc-${Math.random().toString(36).substring(2, 9)}`;
   generateTOC();
   
   // 添加resize事件监听，在窗口大小变化时重新计算高亮
-  window.addEventListener('resize', throttle(highlightActiveHeading, 100));
+  window.addEventListener('resize', throttle(() => {
+    generateTOC(); // 重新生成TOC，以防窗口大小变化导致标题可见性变化
+    highlightActiveHeading();
+  }, 100));
   
   // 立即触发一次高亮计算
+  setTimeout(generateTOC, 100);
   setTimeout(highlightActiveHeading, 500);
 </script>
 

package/dist/components/typography/Article.astro

@@ -135,10 +135,26 @@ const {
 	style = ""
 } = Astro.props;
 
-// 根据宽度选项设置类名
-const widthClass = `article-width-${width}`;
+// 根据宽度设置对应的 Tailwind 类名
+const widthClasses = {
+	narrow: 'max-w-2xl',
+	medium: 'max-w-4xl',
+	wide: 'max-w-6xl',
+	full: 'w-full'
+}[width];
+
+// 基础样式类
+const baseClasses = [
+	'prose', // 使用 Tailwind Typography 插件的基础类
+	'prose-slate',
+	'w-full',
+	'mx-auto',
+	'dark:prose-invert', // 暗黑模式支持,
+	widthClasses,
+	className
+];
 ---
 
-<article class:list={['article', widthClass, className]} style={style}>
+<article class:list={baseClasses} style={style}>
 	<slot />
 </article>

package/dist/utils/path.ts

@@ -0,0 +1,15 @@
+/**
+ * 判断当前路径是否匹配目标路径
+ * @param currentPath 当前路径
+ * @param targetPath 目标路径
+ * @returns 是否匹配
+ */
+export function isPathMatch(currentPath: string, targetPath: string): boolean {
+    const debug = true
+
+    if (debug) {
+        console.log("🍋 isPathMatch", currentPath, targetPath);
+    }
+
+    return currentPath === targetPath || currentPath.endsWith(targetPath) || ("/" + currentPath).endsWith(targetPath);
+} 

package/package.json

@@ -1,11 +1,14 @@
 {
 	"name": "@coffic/cosy-ui",
-	"version": "0.2.2",
+	"version": "0.3.0-beta.1",
 	"description": "An astro component library",
 	"author": {
 		"name": "nookery",
 		"url": "https://github.com/nookery"
 	},
+	"repository": {
+		"url": "https://github.com/CofficLab/cosy-ui"
+	},
 	"license": "MIT",
 	"keywords": [
 		"astro-integration",
@@ -28,8 +31,10 @@
 		"index.ts"
 	],
 	"scripts": {
-		"dev": "astro dev",
-		"build": "vite build && tsx scripts/post-build.ts"
+		"dev": "astro dev --host 0.0.0.0",
+		"build": "pnpm build:ui && pnpm build:docs",
+		"build:ui": "vite build && tsx scripts/post-build.ts",
+		"build:docs": "astro build"
 	},
 	"type": "module",
 	"peerDependencies": {
@@ -41,7 +46,9 @@
 	},
 	"devDependencies": {
 		"@astrojs/check": "^0.9.4",
+		"@astrojs/mdx": "^4.2.0",
 		"@astrojs/ts-plugin": "^1.10.4",
+		"@tailwindcss/typography": "^0.5.16",
 		"@tailwindcss/vite": "^4.0.14",
 		"@types/chai": "^5.2.0",
 		"@types/eslint": "^9.6.1",
@@ -65,4 +72,4 @@
 		"typescript": "^5.8.2",
 		"vite": "^6.2.2"
 	}
-}
+}