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

package/dist/components/display/CodeExample.astro

@@ -28,7 +28,8 @@
  */
 
 // 导入图标
-import { ClipboardIcon, CheckIcon } from '../../index';
+import { ClipboardIcon, CheckIcon } from '../../index'
+import "../../app.css"
 
 interface Props {
   title?: string;
@@ -39,138 +40,40 @@ interface Props {
 const { title, description, code } = Astro.props;
 ---
 
-<div class="code-example">
-  {title && <h3 class="code-example-title">{title}</h3>}
-  {description && <p class="code-example-description">{description}</p>}
-  
-  <div class="code-example-tabs">
-    <button class="code-example-tab active" data-tab="preview">预览</button>
-    <button class="code-example-tab" data-tab="code">代码</button>
+<div class="card bg-base-100 shadow-lg mb-8 rounded-none code-example">
+  {title && <h3 class="card-title p-4 border-b border-base-300">{title}</h3>}
+  {description && <p class="px-4 pt-4 text-base-content/70">{description}</p>}
+  
+  <div class="flex justify-between items-center px-4 bg-base-200 rounded-none">
+    <div role="tablist" class="tabs tabs-box">
+      <button role="tab" class="tab tab-active" data-tab="preview">预览</button>
+      <button role="tab" class="tab" data-tab="code">代码</button>
+    </div>
+    <div class="flex items-center gap-2">
+      <button class="btn btn-ghost btn-sm gap-2" aria-label="复制代码">
+        <span class="copy-icon"><ClipboardIcon /></span>
+        <span class="check-icon hidden text-success"><CheckIcon /></span>
+        <span class="copy-text">复制代码</span>
+      </button>
+    </div>
   </div>
   
-  <div class="code-example-content">
+  <div class="relative p-0">
     <div class="code-example-panel active" data-panel="preview">
-      <div class="code-example-preview">
+      <div class="p-6 bg-base-100">
         <slot />
       </div>
     </div>
     
     <div class="code-example-panel" data-panel="code">
-      <div class="code-example-code">
-        <div class="code-example-header">
-          <button class="copy-button" aria-label="复制代码">
-            <span class="copy-icon"><ClipboardIcon /></span>
-            <span class="check-icon"><CheckIcon /></span>
-            <span class="copy-text">复制代码</span>
-          </button>
-        </div>
-        <pre><code class="language-astro">{code}</code></pre>
+      <div class="bg-base-300 px-6 py-2">
+        <pre class="overflow-x-auto"><code class="language-astro">{code}</code></pre>
       </div>
     </div>
   </div>
 </div>
 
 <style>
-  /* 颜色变量 - 支持亮色和暗黑模式 */
-  :root {
-    /* 亮色模式变量 */
-    --code-example-border: #e2e8f0;
-    --code-example-bg: #ffffff;
-    --code-example-text: #333333;
-    --code-example-title-border: #e2e8f0;
-    --code-example-description-color: #64748b;
-    --code-example-tabs-bg: #f8fafc;
-    --code-example-tab-color: #64748b;
-    --code-example-tab-hover-color: #0f172a;
-    --code-example-tab-active-color: #3b82f6;
-    --code-example-tab-active-border: #3b82f6;
-    --code-example-preview-bg: #ffffff;
-    --code-example-code-bg: #1e293b;
-    --code-example-code-text: #e2e8f0;
-    --code-example-header-bg: #334155;
-    --code-example-copy-button-color: #e2e8f0;
-    --code-example-copy-button-hover-bg: rgba(255, 255, 255, 0.1);
-    --code-example-copy-success-color: #4ade80;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :root {
-      /* 暗黑模式变量 */
-      --code-example-border: #2d3748;
-      --code-example-bg: #1a202c;
-      --code-example-text: #e2e8f0;
-      --code-example-title-border: #2d3748;
-      --code-example-description-color: #a0aec0;
-      --code-example-tabs-bg: #171e2e;
-      --code-example-tab-color: #a0aec0;
-      --code-example-tab-hover-color: #e2e8f0;
-      --code-example-tab-active-color: #60a5fa;
-      --code-example-tab-active-border: #60a5fa;
-      --code-example-preview-bg: #1a202c;
-      --code-example-code-bg: #0f172a;
-      --code-example-code-text: #e2e8f0;
-      --code-example-header-bg: #1e293b;
-      --code-example-copy-button-color: #e2e8f0;
-      --code-example-copy-button-hover-bg: rgba(255, 255, 255, 0.1);
-      --code-example-copy-success-color: #4ade80;
-    }
-  }
-  
-  .code-example {
-    margin-bottom: 2rem;
-    border: 1px solid var(--code-example-border);
-    border-radius: 0.5rem;
-    overflow: hidden;
-    background-color: var(--code-example-bg);
-    color: var(--code-example-text);
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-  }
-  
-  .code-example-title {
-    font-size: 1.25rem;
-    font-weight: bold;
-    margin: 0;
-    padding: 1rem;
-    border-bottom: 1px solid var(--code-example-title-border);
-  }
-  
-  .code-example-description {
-    padding: 0 1rem;
-    color: var(--code-example-description-color);
-    margin-top: 0.5rem;
-    margin-bottom: 1rem;
-  }
-  
-  .code-example-tabs {
-    display: flex;
-    border-bottom: 1px solid var(--code-example-title-border);
-    background-color: var(--code-example-tabs-bg);
-  }
-  
-  .code-example-tab {
-    padding: 0.75rem 1.5rem;
-    background: transparent;
-    border: none;
-    border-bottom: 2px solid transparent;
-    cursor: pointer;
-    font-weight: 500;
-    color: var(--code-example-tab-color);
-    transition: all 0.2s ease;
-  }
-  
-  .code-example-tab:hover {
-    color: var(--code-example-tab-hover-color);
-  }
-  
-  .code-example-tab.active {
-    color: var(--code-example-tab-active-color);
-    border-bottom-color: var(--code-example-tab-active-border);
-  }
-  
-  .code-example-content {
-    position: relative;
-  }
-  
   .code-example-panel {
     display: none;
   }
@@ -178,99 +81,23 @@ const { title, description, code } = Astro.props;
   .code-example-panel.active {
     display: block;
   }
-  
-  .code-example-preview {
-    padding: 1.5rem;
-    background-color: var(--code-example-preview-bg);
-  }
-  
-  .code-example-code {
-    position: relative;
-    background-color: var(--code-example-code-bg);
-    color: var(--code-example-code-text);
-    overflow: auto;
-  }
-  
-  .code-example-header {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    padding: 0.5rem 1rem;
-    background-color: var(--code-example-header-bg);
-  }
-  
-  .copy-button {
-    background: transparent;
-    border: none;
-    color: var(--code-example-copy-button-color);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 0.75rem;
-    border-radius: 0.25rem;
-    transition: background-color 0.2s;
-    font-size: 0.875rem;
-  }
-  
-  .copy-button:hover {
-    background-color: var(--code-example-copy-button-hover-bg);
-  }
-  
-  .copy-icon, .check-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1rem;
-    height: 1rem;
-  }
-  
-  .check-icon {
-    display: none;
-    color: var(--code-example-copy-success-color);
-  }
-  
-  .copy-button.copied .copy-icon {
-    display: none;
-  }
-  
-  .copy-button.copied .check-icon {
-    display: flex;
-  }
-  
-  .copy-button.copied .copy-text {
-    color: var(--code-example-copy-success-color);
-  }
-  
-  pre {
-    margin: 0;
-    padding: 1rem;
-    overflow-x: auto;
-  }
-  
-  code {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    white-space: pre;
-    font-size: 0.9rem;
-    line-height: 1.5;
-  }
 </style>
 
 <script>
   function initializeCodeExample() {
     // 标签切换功能
-    const tabs = document.querySelectorAll('.code-example-tab');
+    const tabs = document.querySelectorAll('.tab');
     
     tabs.forEach(tab => {
       tab.addEventListener('click', () => {
         // 获取当前标签组
-        const tabGroup = tab.closest('.code-example-tabs');
+        const tabGroup = tab.closest('.tabs');
         if (!tabGroup) return;
         
-        const codeExample = tab.closest('.code-example');
+        const codeExample = tab.closest('.card');
         if (!codeExample) return;
         
-        const contentContainer = codeExample.querySelector('.code-example-content');
+        const contentContainer = codeExample.querySelector('.relative');
         if (!contentContainer) return;
         
         // 获取目标面板
@@ -278,10 +105,10 @@ const { title, description, code } = Astro.props;
         if (!targetTab) return;
         
         // 更新标签状态
-        tabGroup.querySelectorAll('.code-example-tab').forEach(t => {
-          t.classList.remove('active');
+        tabGroup.querySelectorAll('.tab').forEach(t => {
+          t.classList.remove('tab-active');
         });
-        tab.classList.add('active');
+        tab.classList.add('tab-active');
         
         // 更新面板状态
         contentContainer.querySelectorAll('.code-example-panel').forEach(panel => {
@@ -296,11 +123,11 @@ const { title, description, code } = Astro.props;
     });
     
     // 复制代码功能
-    const copyButtons = document.querySelectorAll('.copy-button');
+    const copyButtons = document.querySelectorAll('.btn-ghost');
     
     copyButtons.forEach(button => {
       button.addEventListener('click', () => {
-        const codeBlock = button.closest('.code-example-code');
+        const codeBlock = button.closest('.bg-base-300');
         if (!codeBlock) return;
         
         const codeElement = codeBlock.querySelector('code');
@@ -311,11 +138,17 @@ const { title, description, code } = Astro.props;
         // 复制到剪贴板
         navigator.clipboard.writeText(code).then(() => {
           // 显示复制成功状态
-          button.classList.add('copied');
+          button.classList.add('btn-success');
+          button.querySelector('.copy-icon')?.classList.add('hidden');
+          button.querySelector('.check-icon')?.classList.remove('hidden');
+          button.querySelector('.copy-text')?.classList.add('text-success');
           
           // 3秒后恢复原状
           setTimeout(() => {
-            button.classList.remove('copied');
+            button.classList.remove('btn-success');
+            button.querySelector('.copy-icon')?.classList.remove('hidden');
+            button.querySelector('.check-icon')?.classList.add('hidden');
+            button.querySelector('.copy-text')?.classList.remove('text-success');
           }, 3000);
         });
       });

package/dist/components/layouts/DocumentationLayout.astro

@@ -79,6 +79,7 @@ import Article from '../typography/Article.astro';
 import Footer from './Footer.astro';
 import Main from '../containers/Main.astro';
 import Header from './Header.astro';
+import Sidebar from './Sidebar.astro';
 import DefaultLogo from '../../assets/logo.png';
 
 export interface SidebarItem {
@@ -120,6 +121,12 @@ export interface Props {
    */
   logo?: ImageMetadata;
   
+  /**
+   * Logo链接地址
+   * @default "/"
+   */
+  logoHref?: string;
+  
   /**
    * 侧边栏项目
    */
@@ -182,6 +189,12 @@ export interface Props {
    * 当前语言
    */
   currentLocale?: string;
+  
+  /**
+   * 基础路径，用于处理网站部署在二级目录的情况
+   * @default ""
+   */
+  basePath?: string;
 
   /**
    * 页脚相关配置
@@ -297,6 +310,11 @@ export interface Props {
    * 技术栈链接
    */
   footerTechStackLink?: string;
+
+  /**
+   * 首页链接
+   */
+  footerHomeLink?: string;
 }
 
 const {
@@ -305,6 +323,7 @@ const {
   keywords,
   siteName = "文档中心",
   logo = DefaultLogo,
+  logoHref = "/",
   sidebarItems,
   showTableOfContents = true,
   showHeader = true,
@@ -312,10 +331,12 @@ const {
   head,
   class: className,
   'class:list': classList,
-  debug = false,
+  debug = true,
   navItems,
   languages,
   currentLocale,
+  basePath = "",
+  footerHomeLink,
   footerSlogan,
   footerCompany,
   footerCopyright,
@@ -354,10 +375,12 @@ const currentPath = Astro.url.pathname;
   {showHeader && (
     <Header
       logo={logo}
+      logoHref={logoHref}
       navItems={navItems}
       languages={languages}
       currentLocale={currentLocale}
       sticky={true}
+      basePath={basePath}
     />
   )}
   
@@ -368,61 +391,13 @@ const currentPath = Astro.url.pathname;
   )}
   
   <div class="flex-1 flex">
-    <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 menu-sm">
-              {section.items.map((item: SidebarItem) => {
-                const isActive = currentPath === item.href;
-                return (
-                  <li>
-                    <a 
-                      href={item.href} 
-                      class:list={[
-                        "hover:bg-base-200",
-                        { "active": isActive }
-                      ]}
-                    >
-                      {item.text}
-                    </a>
-                    {item.items && (
-                      <ul class="menu menu-sm pl-4">
-                        {item.items.map((subitem: SidebarItem) => {
-                          const isSubActive = currentPath === subitem.href;
-                          return (
-                            <li>
-                              <a 
-                                href={subitem.href} 
-                                class:list={[
-                                  "hover:bg-base-200",
-                                  { "active": isSubActive }
-                                ]}
-                              >
-                                {subitem.text}
-                              </a>
-                            </li>
-                          );
-                        })}
-                      </ul>
-                    )}
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
-        ))}
-      </nav>
-    </aside>
+    <Sidebar sidebarItems={sidebarItems} currentPath={currentPath} />
     
     <Main 
-      class="flex-1 py-8" 
+      class="flex-1 py-8 min-h-screen" 
     >
       <div class="container mx-auto px-4 flex gap-8">
-        <Article 
-          class="prose max-w-3xl" 
-        >
+        <Article >
           <slot />
         </Article>
         
@@ -442,7 +417,7 @@ const currentPath = Astro.url.pathname;
   {showFooter && (
     <Footer 
       siteName={siteName}
-      homeLink="/"
+      homeLink={footerHomeLink || "/"}
       slogan={footerSlogan || "优雅、高效的组件库"}
       company={footerCompany || siteName}
       copyright={footerCopyright || "保留所有权利"}

package/dist/components/layouts/Footer.astro

@@ -178,7 +178,7 @@ const debugClasses = debug ? {
 ---
 
 <footer class:list={["footer sm:footer-horizontal bg-base-200 text-base-content p-10", debugClasses.footer]}>
-	<div class:list={["flex container mx-auto sm:flex-col md:flex-row justify-between gap-8", debugClasses.section]}>
+	<div class:list={["flex flex-col gap-8 container mx-auto items-center w-full md:flex-row md:justify-between", debugClasses.section]}>
 		{/* 品牌区域 */}
 		<aside class:list={["max-w-xs", debugClasses.aside]}>
 			<a href={homeLink} class="flex items-center gap-2 mb-4">
@@ -215,13 +215,14 @@ const debugClasses = debug ? {
 			)}
 		</aside>
 
-		<div class:list={["grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-10 sm:justify-end", debugClasses.section]}>
+		{/* 导航区域 */}
+		<div class:list={["flex flex-col gap-8 mx-auto max-w-xl text-center items-center w-full md:flex-row md:justify-between md:items-start", debugClasses.section]}>
 			{/* 产品导航 */}
 			{products.length > 0 && (
-				<nav class:list={["", debugClasses.nav]}>
+				<nav class:list={["h-full", debugClasses.nav]}>
 					<h6 class="footer-title">产品</h6>
 					{products.map((product) => (
-						<Link href={product.href} external={product.external} block animation='hover-lift'>
+						<Link href={product.href} external={product.external} size='sm' block animation='hover-lift'>
 							{product.name}
 						</Link>
 					))}
@@ -230,12 +231,12 @@ const debugClasses = debug ? {
 
 			{/* 关于导航 */}
 			{(aboutLink || contactLink || teamLink || careersLink) && (
-				<nav class:list={["", debugClasses.nav]}>
-					<h6 class="footer-title">关于我们</h6>
-					{aboutLink && <Link href={aboutLink} block animation='hover-lift'>关于我们</Link>}
-					{teamLink && <Link href={teamLink} block animation='hover-lift'>团队介绍</Link>}
-					{careersLink && <Link href={careersLink} block animation='hover-lift'>加入我们</Link>}
-					{contactLink && <Link href={contactLink} block animation='hover-lift'>联系我们</Link>}
+				<nav class:list={["h-full", debugClasses.nav]}>
+					<h6 class="footer-title">关于</h6>
+					{aboutLink && <Link href={aboutLink} block animation='hover-lift' size='sm'>关于我们</Link>}
+					{teamLink && <Link href={teamLink} block animation='hover-lift' size='sm'>团队介绍</Link>}
+					{careersLink && <Link href={careersLink} block animation='hover-lift' size='sm'>加入我们</Link>}
+					{contactLink && <Link href={contactLink} block animation='hover-lift' size='sm'>联系我们</Link>}
 				</nav>
 			)}
 
@@ -243,10 +244,11 @@ const debugClasses = debug ? {
 			{(newsLink || historyLink || partnersLink || blogLink || faqLink || mediaLink || techStackLink) && (
 				<nav class:list={["", debugClasses.nav]}>
 					<h6 class="footer-title">资源</h6>
-					{newsLink && <Link href={newsLink} block animation='hover-lift'>新闻动态</Link>}
-					{blogLink && <Link href={blogLink} block animation='hover-lift'>技术博客</Link>}
-					{faqLink && <Link href={faqLink} block animation='hover-lift'>常见问题</Link>}
-					{techStackLink && <Link href={techStackLink} block animation='hover-lift'>技术栈</Link>}
+					{newsLink && <Link href={newsLink} block animation='hover-lift' size='sm'>新闻动态</Link>}
+					{blogLink && <Link href={blogLink} block animation='hover-lift' size='sm'>技术博客</Link>}
+					{faqLink && <Link href={faqLink} block animation='hover-lift' size='sm'>常见问题</Link>}
+					{historyLink && <Link href={historyLink} block animation='hover-lift' size='sm'>发展历程</Link>}
+					{techStackLink && <Link href={techStackLink} block animation='hover-lift' size='sm'>技术栈</Link>}
 				</nav>
 			)}
 
@@ -254,8 +256,8 @@ const debugClasses = debug ? {
 			{(termsLink || privacyLink) && (
 				<nav class:list={["", debugClasses.nav]}>
 					<h6 class="footer-title">法律</h6>
-					{termsLink && <Link href={termsLink} block animation='hover-lift'>服务条款</Link>}
-					{privacyLink && <Link href={privacyLink} block animation='hover-lift'>隐私政策</Link>}
+					{termsLink && <Link href={termsLink} block animation='hover-lift' size='sm'>服务条款</Link>}
+					{privacyLink && <Link href={privacyLink} block animation='hover-lift' size='sm'>隐私政策</Link>}
 				</nav>
 			)}
 		</div>
@@ -282,3 +284,10 @@ const debugClasses = debug ? {
 		)}
 	</aside>
 </div>
+
+<style scoped>
+	@reference '../../app.css';
+	nav {
+		@apply flex flex-col gap-3;
+	}
+</style>

package/dist/components/layouts/Header.astro

@@ -15,6 +15,11 @@ interface ImageMetadata {
 
 interface Props {
 	logo: ImageMetadata;
+	/**
+	 * Logo 链接地址
+	 * @default "/"
+	 */
+	logoHref?: string;
 	languages?: Array<{ code: string; name: string }>;
 	currentLocale?: string;
 	navItems?: Array<{
@@ -32,19 +37,47 @@ interface Props {
 	 * @default true
 	 */
 	sticky?: boolean;
+	/**
+	 * 基础路径，用于处理网站部署在二级目录的情况
+	 * @default ""
+	 */
+	basePath?: string;
 }
 
 const {
 	logo,
+	logoHref = "/",
 	navItems = [],
 	sticky = true,
+	languages = [
+		{ code: 'zh-cn', name: '中文' },
+		{ code: 'en', name: 'English' }
+	],
+	currentLocale = 'zh-cn',
+	basePath = ''
 } = Astro.props;
 
 type NavItem = { href: string; label: string; match: (path: string) => boolean };
+
+// 获取当前路径
+const currentPath = Astro.url.pathname;
+
+// 处理基础路径
+const basePathPattern = basePath ? new RegExp(`^${basePath}`) : null;
+const pathWithoutBase = basePathPattern ? currentPath.replace(basePathPattern, '') : currentPath;
+
+// 提取路径部分，排除语言代码
+const pathWithoutLocale = pathWithoutBase.replace(/^\/(zh-cn|en)/, '');
+
+// 生成语言切换链接
+function getLanguageUrl(langCode: string) {
+	// 如果有基础路径，需要加上
+	return `${basePath}/${langCode}${pathWithoutLocale}`;
+}
 ---
 
 <header class:list={[
-	"navbar bg-accent/80 backdrop-blur border-b border-base-200 z-50 w-full",
+	"navbar bg-accent/30 backdrop-blur border-base-200 z-50 w-full",
 	{ "fixed top-0": sticky }
 ]}>
 	<div class="navbar-start">
@@ -66,7 +99,7 @@ type NavItem = { href: string; label: string; match: (path: string) => boolean }
 			</ul>
 		</div>
 
-		<Link href="/" class="btn btn-ghost">
+		<Link href={logoHref} class="btn btn-ghost">
 			<Image src={logo} alt="logo" class="w-10 h-10" />
 		</Link>
 	</div>
@@ -85,14 +118,24 @@ type NavItem = { href: string; label: string; match: (path: string) => boolean }
 	</div>
 
 	<div class="navbar-end">
-		<Button 
-			variant="ghost" 
-			size="sm" 
-			class="btn-circle"
-			onClick="my_modal_1.showModal()"
-		>
-			<SearchIcon class="w-5 h-5" />
-		</Button>
+		<!-- 语言切换按钮 -->
+		<div class="dropdown dropdown-end">
+			<div tabindex="0" role="button" class="btn btn-ghost btn-sm">
+				<span class="mr-1">{currentLocale === 'zh-cn' ? '中文' : 'English'}</span>
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+				</svg>
+			</div>
+			<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-32">
+				{languages.map((lang) => (
+					<li class={currentLocale === lang.code ? "disabled" : ""}>
+						<a href={getLanguageUrl(lang.code)} class={currentLocale === lang.code ? "active" : ""}>
+							{lang.name}
+						</a>
+					</li>
+				))}
+			</ul>
+		</div>
 	</div>
 </header>