@coffic/cosy-ui 0.3.12 → 0.3.15

package/dist/components/layouts/Sidebar.astro

@@ -22,6 +22,10 @@
  */
 
 import { isPathMatch } from '../../utils/path';
+import Modal from '../display/Modal.astro';
+import Button from '../base/Button.astro';
+import SidebarNav from './SidebarNav.astro';
+import MenuIcon from '../icons/MenuIcon.astro';
 import "../../app.css"
 
 export interface SidebarItem {
@@ -45,75 +49,71 @@ export interface Props {
    * 当前路径
    */
   currentPath: string;
+
+  /**
+   * 桌面端类名
+   */
+  class?: string;
+
+  /**
+   * 是否开启调试模式，显示边框
+   * @default false
+   */
+  debug?: boolean;
 }
 
-const { sidebarItems, currentPath } = Astro.props;
+const { 
+  sidebarItems, 
+  currentPath, 
+  class: className,
+  debug = false
+} = Astro.props;
+
+const debugClass = debug ? "cosy:border cosy:border-red-500" : "";
+
+// 获取当前活动的一级导航项
+const currentSection = sidebarItems.find(section => 
+  section.items.some(item => isPathMatch(currentPath, item.href))
+);
 ---
 
-<aside class="cosy:w-64 cosy:border-r cosy:border-base-300 cosy:shrink-0">
-  <nav class="cosy:p-4 cosy:sticky cosy:top-16">
-    {sidebarItems.map((section: SidebarSection) => (
-      <div class="cosy:mb-6">
-        <h3 class="cosy:font-bold cosy:mb-2 cosy:text-base-content/70">{section.title}</h3>
-        <ul class="cosy:menu cosy:bg-base-200 cosy:rounded-box cosy:w-56">
-          {section.items.map((item: SidebarItem) => {
-            const isActive = isPathMatch(currentPath, item.href);
-            return (
-              <li>
-                <a 
-                  href={item.href} 
-                  class:list={[
-                    "cosy:hover:bg-base-300",
-                    { "cosy: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={[
-                              "cosy:hover:bg-base-300",
-                              { "cosy: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={[
-                                        "cosy:hover:bg-base-300",
-                                        { "cosy:active": isSubSubActive }
-                                      ]}
-                                    >
-                                      {subsubitem.text}
-                                    </a>
-                                  </li>
-                                );
-                              })}
-                            </ul>
-                          )}
-                        </li>
-                      );
-                    })}
-                  </ul>
-                )}
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-    ))}
-  </nav>
-</aside> 
+{/* 移动端导航栏 */}
+<div class:list={[
+  "cosy:flex cosy:lg:hidden cosy:items-center cosy:justify-between cosy:px-4 cosy:py-2 cosy:border-b cosy:border-base-300 cosy:bg-base-100 cosy:relative cosy:z-10",
+  debugClass
+]}>
+  <div class="cosy:flex cosy:items-center cosy:gap-2">
+    <button
+      type="button"
+      class="cosy:p-2 cosy:btn cosy:btn-ghost cosy:btn-sm"
+      data-modal-target="mobile-sidebar"
+    >
+      <MenuIcon class="cosy:w-5 cosy:h-5" />
+    </button>
+    <span class="cosy:font-medium cosy:text-sm">
+      {currentSection?.title || "导航"}
+    </span>
+  </div>
+</div>
+
+{/* 移动端侧边栏弹出层 */}
+<Modal id="mobile-sidebar" class="cosy:mx-4 cosy:lg:w-80 cosy:w-[calc(100vw-2rem)] cosy:max-w-full">
+  <div class="cosy:h-[calc(100vh-8rem)] cosy:overflow-y-auto">
+    <SidebarNav
+      sidebarItems={sidebarItems}
+      currentPath={currentPath}
+      debug={debug}
+    />
+  </div>
+</Modal>
+
+{/* 桌面端侧边栏 */}
+<aside class:list={[className, debugClass, "cosy:hidden cosy:lg:block"]}>
+  <div class="cosy:top-16 cosy:sticky cosy:h-[calc(100vh-4rem)]">
+    <SidebarNav
+      sidebarItems={sidebarItems}
+      currentPath={currentPath}
+      debug={debug}
+    />
+  </div>
+</aside>

package/dist/components/layouts/SidebarNav.astro

@@ -0,0 +1,122 @@
+---
+/**
+ * SidebarNav组件
+ * 
+ * 用于渲染侧边栏的导航内容
+ */
+
+import { isPathMatch } from '../../utils/path';
+import "../../app.css"
+
+export interface SidebarItem {
+  href: string;
+  text: string;
+  items?: SidebarItem[];
+}
+
+export interface SidebarSection {
+  title: string;
+  items: SidebarItem[];
+}
+
+interface Props {
+  /**
+   * 侧边栏项目
+   */
+  sidebarItems: SidebarSection[];
+  
+  /**
+   * 当前路径
+   */
+  currentPath: string;
+
+  /**
+   * 是否开启调试模式，显示边框
+   * @default false
+   */
+  debug?: boolean;
+
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const { 
+  sidebarItems, 
+  currentPath, 
+  debug = false,
+  class: className
+} = Astro.props;
+
+const debugClass = debug ? "cosy:border cosy:border-red-500" : "";
+---
+
+<nav class:list={["cosy:p-4", debugClass, className]}>
+  {sidebarItems.map((section: SidebarSection) => (
+    <div class:list={["cosy:mb-6", debugClass]}>
+      <h3 class:list={["cosy:font-bold cosy:mb-2 cosy:text-base-content/70", debugClass]}>{section.title}</h3>
+      <ul class:list={["cosy:menu cosy:bg-base-200 cosy:rounded-box cosy:w-56", debugClass]}>
+        {section.items.map((item: SidebarItem) => {
+          const isActive = isPathMatch(currentPath, item.href);
+          return (
+            <li class:list={[debugClass]}>
+              <a 
+                href={item.href} 
+                class:list={[
+                  "cosy:hover:bg-base-300",
+                  { "cosy:menu-active": isActive },
+                  debugClass
+                ]}
+              >
+                {item.text}
+              </a>
+              {item.items && (
+                <ul class:list={[debugClass]}>
+                  {item.items.map((subitem: SidebarItem) => {
+                    const isSubActive = isPathMatch(currentPath, subitem.href);
+                    return (
+                      <li class:list={[debugClass]}>
+                        <a 
+                          href={subitem.href} 
+                          class:list={[
+                            "cosy:hover:bg-base-300",
+                            { "cosy:active": isSubActive },
+                            debugClass
+                          ]}
+                        >
+                          {subitem.text}
+                        </a>
+                        {subitem.items && (
+                          <ul class:list={[debugClass]}>
+                            {subitem.items.map((subsubitem: SidebarItem) => {
+                              const isSubSubActive = isPathMatch(currentPath, subsubitem.href);
+                              return (
+                                <li class:list={[debugClass]}>
+                                  <a 
+                                    href={subsubitem.href} 
+                                    class:list={[
+                                      "cosy:hover:bg-base-300",
+                                      { "cosy:active": isSubSubActive },
+                                      debugClass
+                                    ]}
+                                  >
+                                    {subsubitem.text}
+                                  </a>
+                                </li>
+                              );
+                            })}
+                          </ul>
+                        )}
+                      </li>
+                    );
+                  })}
+                </ul>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  ))}
+</nav> 

package/dist/components/navigation/TableOfContents.astro

@@ -54,7 +54,7 @@
 
 // 导入样式
 import '../../app.css';
-import { getCurrentLanguage, LanguageSource } from '../../utils/language';
+import { getCurrentLanguage } from '../../utils/language';
 import { createTextGetter } from '../../utils/i18n';
 
 interface Props {
@@ -97,11 +97,6 @@ interface Props {
    * @default 自动检测
    */
   lang?: string;
-  /**
-   * 是否启用日志输出
-   * @default false
-   */
-  enableLogging?: boolean;
 }
 
 const {
@@ -113,7 +108,6 @@ const {
   minHeadings = 2,
   lang: userLang,
   title,
-  enableLogging = true,
 } = Astro.props;
 
 // 获取当前语言
@@ -125,54 +119,28 @@ 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 ? 'cosy:fixed cosy:top-20 cosy:right-4 cosy:w-64' : 'cosy:w-full cosy:max-w-xs'} ${className}`} id={`${tocId}-container`} style="display: none;">
-  <div class="cosy:card cosy:bg-base-100 cosy:shadow-xl">
-    <div class="cosy:card-body cosy:p-4">
-      <div class="cosy:card-title cosy:text-lg cosy:font-bold cosy:mb-2">{titleText}</div>
-      <ul class="cosy:menu cosy:menu-sm" id={tocId}>
-        <!-- 目录项将通过 JavaScript 动态生成 -->
-        <li class="cosy:text-base-content/60">{t('loading')}</li>
-      </ul>
+<aside class:list={[
+  'cosy:hidden cosy:xl:block cosy:w-64 cosy:shrink-0',
+  className
+]}>
+  <div class="cosy:top-16 cosy:sticky">
+    <div class={`toc-container ${fixed ? 'cosy:w-64' : 'cosy:w-full cosy:max-w-xs'}`} id={`${tocId}-container`} style="display: none;">
+      <div class="cosy:bg-base-100 cosy:shadow-xl cosy:card">
+        <div class="cosy:p-4 cosy:card-body">
+          <div class="cosy:mb-2 cosy:font-bold cosy:text-lg cosy:card-title">{titleText}</div>
+          <ul class="cosy:menu cosy:menu-sm" id={tocId}>
+            <!-- 目录项将通过 JavaScript 动态生成 -->
+            <li class="cosy:text-base-content/60">{t('loading')}</li>
+          </ul>
+        </div>
+      </div>
     </div>
   </div>
-</div>
-
-<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 '未知来源';
-        }
-      })()
-    });
-  }
+</aside>
 
+<script define:vars={{ selector, maxDepth, tocId, containerSelector, minHeadings, langInfo }}>
   // 在页面加载完成后生成目录
   function generateTOC() {
     // 使用指定的容器选择器查找内容容器

package/package.json

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

package/dist/components/containers/index.ts

@@ -1,3 +0,0 @@
-export { default as Container } from './Container.astro';
-export { default as Section } from './Section.astro';
-export { default as Main } from './Main.astro';