@coffic/cosy-ui 0.9.20 → 0.9.22

package/dist/src-astro/layout-app/AppLayout.astro

@@ -194,6 +194,60 @@ const {
   loadingDelay = 100,
   ...rest
 }: Props = Astro.props;
+
+// 动态计算Container最小高度
+function getContainerMinHeightClass(headerHeight: string = 'md') {
+  const heightValueMap = {
+    '3xs': 'cosy:min-h-[calc(100vh-1rem)]',
+    '2xs': 'cosy:min-h-[calc(100vh-1.5rem)]',
+    xs: 'cosy:min-h-[calc(100vh-2rem)]',
+    sm: 'cosy:min-h-[calc(100vh-2.5rem)]',
+    md: 'cosy:min-h-[calc(100vh-3rem)]',
+    lg: 'cosy:min-h-[calc(100vh-4rem)]',
+    xl: 'cosy:min-h-[calc(100vh-5rem)]',
+  };
+  return (
+    heightValueMap[headerHeight as keyof typeof heightValueMap] ||
+    'cosy:min-h-[calc(100vh-3rem)]'
+  );
+}
+
+const containerMinHeightClass = getContainerMinHeightClass(
+  headerConfig?.height
+);
+
+// 计算Sidebar的top值和高度值
+function getSidebarTopClass(headerHeight: string = 'md') {
+  const topMap = {
+    '3xs': 'cosy:top-4',
+    '2xs': 'cosy:top-6',
+    xs: 'cosy:top-8',
+    sm: 'cosy:top-10',
+    md: 'cosy:top-12',
+    lg: 'cosy:top-16',
+    xl: 'cosy:top-20',
+  };
+  return topMap[headerHeight as keyof typeof topMap] || 'cosy:top-12';
+}
+
+function getSidebarHeightClass(headerHeight: string = 'md') {
+  const heightValueMap = {
+    '3xs': 'cosy:h-[calc(100vh-1rem)]',
+    '2xs': 'cosy:h-[calc(100vh-1.5rem)]',
+    xs: 'cosy:h-[calc(100vh-2rem)]',
+    sm: 'cosy:h-[calc(100vh-2.5rem)]',
+    md: 'cosy:h-[calc(100vh-3rem)]',
+    lg: 'cosy:h-[calc(100vh-4rem)]',
+    xl: 'cosy:h-[calc(100vh-5rem)]',
+  };
+  return (
+    heightValueMap[headerHeight as keyof typeof heightValueMap] ||
+    'cosy:h-[calc(100vh-3rem)]'
+  );
+}
+
+const sidebarTopClass = getSidebarTopClass(headerConfig?.height);
+const sidebarHeightClass = getSidebarHeightClass(headerConfig?.height);
 ---
 
 <BaseLayout {...metaConfig} debug={debug}>
@@ -213,17 +267,30 @@ const {
     )
   }
 
-  <Container flex="row" gap="md" size="full" padding="none">
+  <Container
+    flex="row"
+    gap="none"
+    size="full"
+    padding="none"
+    class={containerMinHeightClass}>
     <!-- 侧边栏容器 -->
-    {showSidebar && <Sidebar {...sidebarConfig} />}
+    {
+      showSidebar && (
+        <Sidebar
+          {...sidebarConfig}
+          topClass={sidebarTopClass}
+          heightClass={sidebarHeightClass}
+        />
+      )
+    }
 
     <!-- 主内容区域 -->
-    <Main {...mainContentConfig}>
+    <Main {...mainContentConfig} class="cosy:flex-1 cosy:min-w-0">
       <SkeletonLoader
         showLoading={true}
         loadingSize="xl"
         loadingDelay={loadingDelay}
-        skeletonClass="cosy:w-full cosy:h-screen  cosy:flex cosy:items-center cosy:justify-center">
+        skeletonClass="cosy:w-full cosy:h-screen cosy:flex cosy:items-center cosy:justify-center">
         <slot />
       </SkeletonLoader>
     </Main>

package/dist/src-astro/layout-dashboard/index.ts

@@ -13,5 +13,5 @@ export {
 };
 
 // 导出类型和函数
-export type { NavItem, SidebarSize, UserMenuItem } from './types';
+export type { SidebarSize, UserMenuItem } from './types';
 export { getIconFromHref, getNavItemIcon, getSidebarWidth } from './types';

package/dist/src-astro/placeholder/PlaceHolder.astro

@@ -0,0 +1,142 @@
+---
+/**
+ * @component PlaceHolder
+ * @description 占位符组件，用于在布局中占用指定的空间
+ * @usage
+ * ```astro
+ * <PlaceHolder width="md" height="lg" padding="md" background="base-200">
+ *   <p>内容</p>
+ * </PlaceHolder>
+ * ```
+ * @props
+ * - width: 宽度尺寸 ('none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full')
+ * - height: 高度尺寸 ('none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full')
+ * - padding: 内边距大小 ('none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl')
+ * - background: 背景色类名，如 'base-200', 'primary', 'secondary'
+ * - class: 自定义 CSS 类名
+ * @slots
+ * - default: 占位符内容
+ */
+import '../../style.ts';
+import type { PlaceHolderProps } from './types';
+
+interface Props extends PlaceHolderProps {
+  width?:
+    | 'none'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | '3xl'
+    | '4xl'
+    | '5xl'
+    | '6xl'
+    | 'full';
+  height?:
+    | 'none'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | '3xl'
+    | '4xl'
+    | '5xl'
+    | '6xl'
+    | 'full';
+  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  background?: string;
+  class?: string;
+}
+
+const {
+  width = 'md',
+  height = 'md',
+  padding = 'none',
+  background,
+  class: className = '',
+} = Astro.props;
+
+// 宽度样式映射
+const widthClassMap = {
+  none: '',
+  xs: 'cosy:w-8',
+  sm: 'cosy:w-16',
+  md: 'cosy:w-24',
+  lg: 'cosy:w-32',
+  xl: 'cosy:w-40',
+  '2xl': 'cosy:w-48',
+  '3xl': 'cosy:w-56',
+  '4xl': 'cosy:w-64',
+  '5xl': 'cosy:w-72',
+  '6xl': 'cosy:w-80',
+  full: 'cosy:w-full',
+} as const;
+
+// 高度样式映射
+const heightClassMap = {
+  none: '',
+  xs: 'cosy:h-8',
+  sm: 'cosy:h-16',
+  md: 'cosy:h-24',
+  lg: 'cosy:h-32',
+  xl: 'cosy:h-40',
+  '2xl': 'cosy:h-48',
+  '3xl': 'cosy:h-56',
+  '4xl': 'cosy:h-64',
+  '5xl': 'cosy:h-72',
+  '6xl': 'cosy:h-80',
+  full: 'cosy:h-full',
+} as const;
+
+// 内边距样式映射
+const paddingClassMap = {
+  none: '',
+  xs: 'cosy:p-1',
+  sm: 'cosy:p-2',
+  md: 'cosy:p-4',
+  lg: 'cosy:p-6',
+  xl: 'cosy:p-8',
+} as const;
+
+// 背景色样式映射
+const backgroundClassMap = {
+  'base-100': 'cosy:bg-base-100',
+  'base-200': 'cosy:bg-base-200',
+  'base-300': 'cosy:bg-base-300',
+  primary: 'cosy:bg-primary',
+  secondary: 'cosy:bg-secondary',
+  accent: 'cosy:bg-accent',
+  info: 'cosy:bg-info',
+  success: 'cosy:bg-success',
+  warning: 'cosy:bg-warning',
+  error: 'cosy:bg-error',
+} as const;
+
+const widthClass = widthClassMap[width as keyof typeof widthClassMap] || '';
+const heightClass = heightClassMap[height as keyof typeof heightClassMap] || '';
+const paddingClass =
+  paddingClassMap[padding as keyof typeof paddingClassMap] || '';
+const backgroundClass = background
+  ? backgroundClassMap[background as keyof typeof backgroundClassMap] || ''
+  : '';
+
+const combinedClass =
+  `placeholder ${widthClass} ${heightClass} ${paddingClass} ${backgroundClass} ${className}`.trim();
+---
+
+<div class={combinedClass}>
+  <slot />
+</div>
+
+<style>
+  .placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.5rem;
+  }
+</style>

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

@@ -0,0 +1,2 @@
+export { default as PlaceHolder } from './PlaceHolder.astro';
+export type { PlaceHolderProps, PlaceHolderWidth, PlaceHolderHeight, PlaceHolderPadding } from './types'; 

package/dist/src-astro/placeholder/types.ts

@@ -0,0 +1,16 @@
+export type PlaceHolderWidth = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full';
+export type PlaceHolderHeight = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full';
+export type PlaceHolderPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface PlaceHolderProps {
+    /** 占位符宽度 */
+    width?: PlaceHolderWidth;
+    /** 占位符高度 */
+    height?: PlaceHolderHeight;
+    /** 内边距大小 */
+    padding?: PlaceHolderPadding;
+    /** 背景色类名，如 'base-200', 'primary', 'secondary' */
+    background?: string;
+    /** 自定义 CSS 类名 */
+    class?: string;
+} 

package/dist/src-astro/products/ProductCard.astro

@@ -81,6 +81,8 @@
  *   description="无阴影的简洁风格"
  * />
  * ```
+ *
+
  */
 
 import {
@@ -321,7 +323,7 @@ const buttonsContainerClass =
 
 <div
   class:list={[
-    'cosy:card cosy:bg-base-100 cosy:transition-shadow cosy:duration-300',
+    'cosy:card cosy:bg-base-200 cosy:transition-shadow cosy:duration-300',
     shadowStyles[shadow],
     currentSize.card,
     equalHeight && currentSize.cardHeight,

package/dist/src-astro/products/Products.astro

@@ -60,6 +60,22 @@
  *   products={products}
  * />
  * ```
+ *
+ * 显示容器边框：
+ * ```astro
+ * <Products
+ *   showBorder={true}
+ *   products={products}
+ * />
+ * ```
+ *
+ * 设置上下外边距：
+ * ```astro
+ * <Products
+ *   margin="lg"
+ *   products={products}
+ * />
+ * ```
  */
 
 import { ProductCard } from '../../index-astro';
@@ -81,6 +97,9 @@ type ResponsiveColumns = {
 // 定义间距大小
 type GapSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
+// 定义外边距大小
+type MarginSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
 // 定义布局类型
 type LayoutType = 'grid' | 'list';
 
@@ -125,6 +144,21 @@ export interface Props {
    * 应用于所有ProductCard
    */
   descriptionLines?: number;
+  /**
+   * 是否显示容器边框
+   * 控制Products组件整体容器的边框显示
+   */
+  showBorder?: boolean;
+  /**
+   * 上下外边距
+   * - none: 无外边距
+   * - xs: 超小外边距
+   * - sm: 小外边距
+   * - md: 中等外边距（默认）
+   * - lg: 大外边距
+   * - xl: 超大外边距
+   */
+  margin?: MarginSize;
   /**
    * 自定义类名
    */
@@ -139,6 +173,8 @@ const {
   gap = 'md',
   equalHeight = true,
   descriptionLines,
+  showBorder = false,
+  margin = 'md',
   class: className = '',
 } = Astro.props;
 
@@ -151,6 +187,16 @@ const gapMap = {
   xl: 'cosy:gap-8',
 };
 
+// 外边距映射
+const marginMap = {
+  none: '',
+  xs: 'cosy:my-1',
+  sm: 'cosy:my-2',
+  md: 'cosy:my-4',
+  lg: 'cosy:my-6',
+  xl: 'cosy:my-8',
+};
+
 // 获取响应式列数类名
 const getColumnsClasses = () => {
   if (typeof columns === 'number') {
@@ -181,7 +227,9 @@ const getLayoutClasses = () => {
 const containerClasses = [
   ...getLayoutClasses(),
   gapMap[gap],
+  marginMap[margin],
   'cosy:w-full',
+  showBorder && 'cosy:border cosy:border-base-300 cosy:p-4 cosy:rounded-lg',
   className,
 ];
 ---

package/dist/src-astro/sidebar/Sidebar.astro

@@ -27,14 +27,19 @@ import { getMarginTopClass, getMarginBottomClass } from './utils.ts';
 import MobileNav from './MobileNav.astro';
 import type { ISidebarProps } from '../../index-astro';
 
-export interface Props extends ISidebarProps {}
+export interface Props extends ISidebarProps {
+  topClass?: string;
+  heightClass?: string;
+}
 
 const {
   sidebarItems,
   class: className,
   debug = false,
-  marginTop = 'md',
-  marginBottom = 'md',
+  marginTop = 'none',
+  marginBottom = 'none',
+  topClass = 'cosy:top-12',
+  heightClass = 'cosy:h-[calc(100vh-3rem)]',
 } = Astro.props;
 
 // 自动获取当前路径
@@ -67,26 +72,24 @@ const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
 
 {/* 桌面端侧边栏 */}
 <aside
-  data-sidebar
+  data-desktop-sidebar
   data-current-path={currentPath}
   data-margin-top={marginTop}
   data-margin-bottom={marginBottom}
   class:list={[
     className,
     debugClass,
-    'cosy:hidden cosy:lg:block',
+    'cosy:hidden cosy:w-60 cosy:lg:block cosy:bg-base-200 cosy:px-4 cosy:overflow-y-auto cosy:sticky',
+    topClass,
+    heightClass,
     getMarginTopClass(marginTop),
     getMarginBottomClass(marginBottom),
   ]}>
-  <div
-    class="cosy:top-16 cosy:sticky cosy:pb-48 cosy:h-[calc(100vh-0rem)] cosy:overflow-y-auto"
-    data-desktop-sidebar-content>
-    <SidebarNav
-      sidebarItems={sidebarItems}
-      currentPath={currentPath}
-      debug={debug}
-    />
-  </div>
+  <SidebarNav
+    sidebarItems={sidebarItems}
+    currentPath={currentPath}
+    debug={debug}
+  />
 </aside>
 
 <script>
@@ -95,9 +98,7 @@ const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
   // 处理侧边栏滚动位置保存和恢复
   document.addEventListener('astro:before-preparation', () => {
     // 保存桌面端滚动位置
-    const desktopContent = document.querySelector(
-      '[data-desktop-sidebar-content]'
-    );
+    const desktopContent = document.querySelector('[data-desktop-sidebar]');
     if (desktopContent) {
       saveScrollPosition(desktopContent, 'sidebarScrollPosition');
     }
@@ -113,9 +114,7 @@ const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
 
   document.addEventListener('astro:page-load', () => {
     // 恢复桌面端滚动位置
-    const desktopContent = document.querySelector(
-      '[data-desktop-sidebar-content]'
-    );
+    const desktopContent = document.querySelector('[data-desktop-sidebar]');
     if (desktopContent) {
       restoreScrollPosition(desktopContent, 'sidebarScrollPosition');
     }

package/dist/src-astro/sidebar/SidebarNav.astro

@@ -8,6 +8,7 @@
 import '../../style.ts';
 import NavItem from './NavItem.astro';
 import type { ISidebarItem } from '../types/sidebar.ts';
+import { Heading } from '../../index-astro.ts';
 
 interface Props {
   /**
@@ -45,20 +46,16 @@ const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
 <nav
   data-sidebar-nav
   data-current-path={currentPath}
-  class:list={['cosy:p-4', debugClass, className]}>
+  class:list={['cosy:p-0', debugClass, className]}>
   {
     sidebarItems.map((section: ISidebarItem) => (
-      <div class:list={['cosy:mb-6', debugClass]}>
-        <h3
-          class:list={[
-            'cosy:font-bold cosy:mb-2 cosy:text-base-content/70',
-            debugClass,
-          ]}>
+      <div class:list={[debugClass]}>
+        <Heading level={5} align="center" href={section.href}>
           {section.text}
-        </h3>
+        </Heading>
         <ul
           class:list={[
-            'cosy:menu cosy:bg-base-200 cosy:rounded-box cosy:w-56 cosy:no-underline',
+            'cosy:menu cosy:rounded-box cosy:w-full cosy:no-underline',
             debugClass,
           ]}>
           {section.items?.map((item: ISidebarItem) => (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffic/cosy-ui",
-  "version": "0.9.20",
+  "version": "0.9.22",
   "description": "An astro component library",
   "author": {
     "name": "nookery",
@@ -60,38 +60,38 @@
     "astro-integration-kit": "^0.18.0",
     "fs-extra": "^11.3.0",
     "html-to-image": "^1.11.13",
-    "shiki": "^3.7.0"
+    "shiki": "^3.9.1"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/mdx": "^4.2.6",
+    "@astrojs/mdx": "^4.3.3",
     "@astrojs/ts-plugin": "^1.10.4",
-    "@eslint/js": "^9.27.0",
+    "@eslint/js": "^9.32.0",
     "@tailwindcss/typography": "^0.5.16",
-    "@tailwindcss/vite": "^4.1.7",
+    "@tailwindcss/vite": "^4.1.11",
     "@tsconfig/node22": "^22.0.2",
     "@types/chai": "^5.2.2",
     "@types/eslint": "^9.6.1",
     "@types/fs-extra": "^11.0.4",
     "@types/mocha": "^10.0.10",
-    "@types/node": "^22.15.19",
-    "@types/react": "^19.1.4",
-    "@typescript-eslint/parser": "^8.32.1",
-    "astro": "^5.7.13",
+    "@types/node": "^22.17.0",
+    "@types/react": "^19.1.9",
+    "@typescript-eslint/parser": "^8.38.0",
+    "astro": "^5.12.8",
     "chai": "^4.5.0",
-    "daisyui": "^5.0.35",
-    "eslint": "^9.27.0",
+    "daisyui": "^5.0.50",
+    "eslint": "^9.32.0",
     "eslint-plugin-astro": "^1.3.1",
-    "globals": "^16.1.0",
+    "globals": "^16.3.0",
     "mocha": "^10.8.2",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.2",
     "prettier-plugin-astro": "^0.14.1",
     "rollup-plugin-copy": "^3.5.0",
     "sharp": "^0.33.5",
-    "tailwindcss": "^4.1.7",
-    "tsx": "^4.19.4",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.32.1",
+    "tailwindcss": "^4.1.11",
+    "tsx": "^4.20.3",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.38.0",
     "vite": "^6.3.5"
   }
 }

package/dist/src-astro/container/EContainerBasic.astro

@@ -1,15 +0,0 @@
----
-/**
- * @component Container.Basic
- *
- * @description
- * 基础Container组件示例，展示最简单的容器用法。
- */
-import { Container } from '../../index-astro';
----
-
-<Container>
-  <p class="cosy:text-center">
-    这是一个基础容器，内容会被限制在一个合理的宽度内并居中显示
-  </p>
-</Container>

package/dist/src-astro/container/EContainerBasicContainer.astro

@@ -1,11 +0,0 @@
----
-import { CodeContainer } from '../../index-astro';
-import ContainerBasic from './EContainerBasic.astro';
-import ContainerBasicSourceCode from './EContainerBasic.astro?raw';
----
-
-<CodeContainer codes={[ContainerBasicSourceCode]}>
-  <div id="tab-1">
-    <ContainerBasic />
-  </div>
-</CodeContainer>

package/dist/src-astro/container/EContainerFlexBetween.astro

@@ -1,23 +0,0 @@
----
-/**
- * @component Container.FlexBetween
- *
- * @description
- * 展示Container组件的两端对齐(justify="between")布局功能。
- */
-import '../../style.ts';
-import { Container } from '../../index-astro';
----
-
-<Container flex="row" justify="between" border padding="md">
-  <div class="cosy:bg-primary cosy:text-primary-content cosy:p-4 cosy:rounded">
-    左侧
-  </div>
-  <div
-    class="cosy:bg-secondary cosy:text-secondary-content cosy:p-4 cosy:rounded">
-    中间
-  </div>
-  <div class="cosy:bg-accent cosy:text-accent-content cosy:p-4 cosy:rounded">
-    右侧
-  </div>
-</Container>

package/dist/src-astro/container/EContainerFlexCenter.astro

@@ -1,30 +0,0 @@
----
-/**
- * @component Container.FlexCenter
- *
- * @description
- * 展示Container组件的居中对齐(items="center" justify="center")布局功能。
- */
-import '../../style.ts';
-import { Container } from '../../index-astro';
----
-
-<Container
-  flex="row"
-  gap="md"
-  items="center"
-  justify="center"
-  border
-  padding="md"
-  class="cosy:h-32">
-  <div class="cosy:bg-primary cosy:text-primary-content cosy:p-4 cosy:rounded">
-    居中项
-  </div>
-  <div
-    class="cosy:bg-secondary cosy:text-secondary-content cosy:p-6 cosy:rounded">
-    较大项
-  </div>
-  <div class="cosy:bg-accent cosy:text-accent-content cosy:p-2 cosy:rounded">
-    较小项
-  </div>
-</Container>

package/dist/src-astro/container/EContainerFlexColumn.astro

@@ -1,23 +0,0 @@
----
-/**
- * @component Container.FlexColumn
- *
- * @description
- * 展示Container组件的列排列(flex="col")布局功能。
- */
-import '../../style.ts';
-import { Container } from '../../index-astro';
----
-
-<Container flex="col" gap="md" border padding="md">
-  <div class="cosy:bg-primary cosy:text-primary-content cosy:p-4 cosy:rounded">
-    第一项
-  </div>
-  <div
-    class="cosy:bg-secondary cosy:text-secondary-content cosy:p-4 cosy:rounded">
-    第二项
-  </div>
-  <div class="cosy:bg-accent cosy:text-accent-content cosy:p-4 cosy:rounded">
-    第三项
-  </div>
-</Container>