@coffic/cosy-ui 0.9.49 → 0.9.51

package/dist/src-astro/image/Image.astro

@@ -16,7 +16,7 @@
  *
  * @props
  * - alt: string - 图片的替代文本，用于无障碍访问和图片加载失败时的显示
- * - border?: 'none' | 'sm' | 'md' | 'lg' | 'xl' - 图片的边框样式，支持多种边框粗细
+ * - border?: BorderSize - 图片的边框样式，支持多种边框粗细
  * - class?: string - 自定义 CSS 类名，用于覆盖默认样式
  * - height?: number - 图片的高度，单位为像素
  * - hover?: 'none' | 'scale' | 'brightness' | 'blur' - 图片的悬停效果，支持缩放、亮度调整和模糊效果
@@ -25,9 +25,9 @@
  * - loadingIndicator?: 'pulse' | 'spinner' | 'progress' | 'skeleton' - 加载指示器类型，支持脉冲、旋转器、进度条和骨架屏（仅对远程图片有效）
  * - objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' - 图片的填充方式，控制图片如何适应容器
  * - objectPosition?: string - 图片的位置，控制图片在容器中的对齐方式
- * - rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' - 图片的圆角大小，提供多种圆角选项
- * - mask?: 'circle' | 'decagon' | 'diamond' | 'heart' | 'hexagon' | 'hexagon-2' | 'none' | 'pentagon' | 'square' | 'squircle' | 'star' | 'star-2' | 'triangle' | 'triangle-2' | 'triangle-3' | 'triangle-4' - 图片的遮罩形状，支持多种几何形状
- * - shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' - 图片的阴影效果，增强视觉层次感
+ * - rounded?: RoundedSize - 图片的圆角大小，提供多种圆角选项
+ * - mask?: MaskType - 图片的遮罩形状，支持多种几何形状
+ * - shadow?: ShadowSize - 图片的阴影效果，增强视觉层次感
  * - showError?: boolean - 是否显示加载失败的错误图，默认为 true（仅对远程图片有效）
  * - showPlaceholder?: boolean - 是否显示加载中的占位图，默认为 true（仅对远程图片有效）
  * - src: ImageSource - 图片源，可以是本地图片或远程URL
@@ -68,11 +68,15 @@
 
 import type { ImageMetadata } from 'astro';
 import '../../style.ts';
+import type {
+  RoundedSize,
+  MaskType,
+  ShadowSize,
+  BorderSize,
+} from '../../src/common';
 import type { ImageSource } from './image.ts';
 import LocalImage from './LocalImage.astro';
 import RemoteImage from './RemoteImage.astro';
-import type { BorderType } from './utils';
-import ImagePromptPanel from './ImagePromptPanel.astro';
 
 export interface Props {
   /**
@@ -83,7 +87,7 @@ export interface Props {
    * 图片的边框样式
    * @default "none"
    */
-  border?: BorderType;
+  border?: BorderSize;
   /**
    * 自定义类名
    */
@@ -126,33 +130,17 @@ export interface Props {
    * 图片的圆角大小
    * @default "none"
    */
-  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+  rounded?: RoundedSize;
   /**
    * 图片的遮罩形状
    * @default "none"
    */
-  mask?:
-    | 'circle'
-    | 'decagon'
-    | 'diamond'
-    | 'heart'
-    | 'hexagon'
-    | 'hexagon-2'
-    | 'none'
-    | 'pentagon'
-    | 'square'
-    | 'squircle'
-    | 'star'
-    | 'star-2'
-    | 'triangle'
-    | 'triangle-2'
-    | 'triangle-3'
-    | 'triangle-4';
+  mask?: MaskType;
   /**
    * 图片的阴影效果
    * @default "none"
    */
-  shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  shadow?: ShadowSize;
   /**
    * 是否显示加载失败的错误图
    * @default true
@@ -208,19 +196,6 @@ export interface Props {
    * @default "constrained"
    */
   layout?: string;
-  /**
-   * 生成提示词
-   */
-  prompt?: string;
-  /**
-   * 使用模型
-   */
-  model?: string;
-  /**
-   * 是否展示生成信息面板（prompt/model）
-   * @default true
-   */
-  showPromptPanel?: boolean;
 }
 
 const {
@@ -246,9 +221,6 @@ const {
   tooltipPlacement = 'top',
   tooltipColor = 'neutral',
   tooltipOpen = false,
-  prompt = '',
-  model = '',
-  showPromptPanel = true,
 } = Astro.props;
 
 // 判断是否为本地图片（ImageMetadata）
@@ -292,7 +264,18 @@ const localProps = {
 };
 ---
 
-<div class={`cosy:relative not-prose cosy:w-full cosy:h-full cosy:block`}>
+<div
+  class="not-prose
+  cosy:relative
+  cosy:w-full
+  cosy:h-full
+  cosy:align-middle
+  cosy:mx-auto
+  cosy:my-auto
+  cosy:justify-center
+  cosy:flex
+  cosy:items-center"
+  data-image-container>
   {
     isLocalImage ? (
       <LocalImage {...localProps} />
@@ -300,11 +283,4 @@ const localProps = {
       <RemoteImage {...remoteProps} />
     )
   }
-
-  {/* 生成信息面板 */}
-  {
-    showPromptPanel !== false && (prompt || model) && (
-      <ImagePromptPanel prompt={prompt} model={model} />
-    )
-  }
 </div>

package/dist/src-astro/image/ImageError.astro

@@ -5,12 +5,8 @@
  */
 
 import { AlertTriangle } from '../../index-astro';
-import {
-  roundedClasses,
-  maskClasses,
-  type RoundedType,
-  type MaskType,
-} from './utils';
+import { roundedClasses, maskClasses } from './utils';
+import type { MaskType, RoundedSize } from '../../src/common';
 
 interface Props {
   /**
@@ -20,7 +16,7 @@ interface Props {
   /**
    * 圆角大小
    */
-  rounded?: RoundedType;
+  rounded?: RoundedSize;
   /**
    * 遮罩形状
    */

package/dist/src-astro/image/ImagePlaceholder.astro

@@ -4,12 +4,8 @@
  * @description 图片加载占位图组件
  */
 
-import {
-  roundedClasses,
-  maskClasses,
-  type RoundedType,
-  type MaskType,
-} from './utils';
+import { roundedClasses, maskClasses } from './utils';
+import type { MaskType, RoundedSize } from '../../src/common';
 
 interface Props {
   /**
@@ -27,7 +23,7 @@ interface Props {
   /**
    * 圆角大小
    */
-  rounded?: RoundedType;
+  rounded?: RoundedSize;
   /**
    * 遮罩形状
    */

package/dist/src-astro/image/LocalImage.astro

@@ -39,13 +39,15 @@ import {
   hoverClasses,
   transitionClasses,
   type ObjectFitType,
-  type RoundedType,
-  type MaskType,
-  type ShadowType,
-  type BorderType,
   type HoverType,
   type TransitionType,
 } from './utils';
+import type {
+  MaskType,
+  ShadowSize,
+  BorderSize,
+  RoundedSize,
+} from '../../src/common';
 
 interface Props {
   /**
@@ -56,7 +58,7 @@ interface Props {
    * 图片的边框样式
    * @default "none"
    */
-  border?: BorderType;
+  border?: BorderSize;
   /**
    * 自定义类名
    */
@@ -84,7 +86,7 @@ interface Props {
    * 图片的圆角大小
    * @default "none"
    */
-  rounded?: RoundedType;
+  rounded?: RoundedSize;
   /**
    * 图片的遮罩形状
    * @default "none"
@@ -94,7 +96,7 @@ interface Props {
    * 图片的阴影效果
    * @default "none"
    */
-  shadow?: ShadowType;
+  shadow?: ShadowSize;
   /**
    * 本地图片元数据
    */

package/dist/src-astro/image/RemoteImage.astro

@@ -33,7 +33,6 @@
 
 import '../../style.ts';
 import ImageTooltipWrapper from './TooltipWrapper.astro';
-import ImageContainer from './ImageContainer.astro';
 import ImagePlaceholder from './ImagePlaceholder.astro';
 import ImageError from './ImageError.astro';
 import {
@@ -45,13 +44,15 @@ import {
   hoverClasses,
   transitionClasses,
   type ObjectFitType,
-  type RoundedType,
-  type MaskType,
-  type ShadowType,
-  type BorderType,
   type HoverType,
   type TransitionType,
 } from './utils';
+import type {
+  MaskType,
+  ShadowSize,
+  BorderSize,
+  RoundedSize,
+} from '../../src/common';
 
 interface Props {
   /**
@@ -62,7 +63,7 @@ interface Props {
    * 图片的边框样式
    * @default "none"
    */
-  border?: BorderType;
+  border?: BorderSize;
   /**
    * 自定义类名
    */
@@ -105,7 +106,7 @@ interface Props {
    * 图片的圆角大小
    * @default "none"
    */
-  rounded?: RoundedType;
+  rounded?: RoundedSize;
   /**
    * 图片的遮罩形状
    * @default "none"
@@ -115,7 +116,7 @@ interface Props {
    * 图片的阴影效果
    * @default "none"
    */
-  shadow?: ShadowType;
+  shadow?: ShadowSize;
   /**
    * 是否显示加载失败的错误图
    * @default true
@@ -283,31 +284,14 @@ const imgClasses = [
   initializeImageHandlers();
 </script>
 
-<ImageContainer>
-  {
-    tooltip ? (
-      <ImageTooltipWrapper
-        tooltip={tooltip}
-        tooltipPlacement={tooltipPlacement}
-        tooltipColor={tooltipColor}
-        tooltipOpen={tooltipOpen}>
-        <img
-          src={imageUrl}
-          alt={alt}
-          width={width}
-          height={height}
-          loading={loading}
-          class={imgClasses}
-          style={{ objectPosition }}
-          data-remote="true"
-          decoding="async"
-          data-loading="true"
-          data-src={imageUrl}
-        />
-      </ImageTooltipWrapper>
-    ) : (
+{
+  tooltip ? (
+    <ImageTooltipWrapper
+      tooltip={tooltip}
+      tooltipPlacement={tooltipPlacement}
+      tooltipColor={tooltipColor}
+      tooltipOpen={tooltipOpen}>
       <img
-        remote-image
         src={imageUrl}
         alt={alt}
         width={width}
@@ -320,21 +304,36 @@ const imgClasses = [
         data-loading="true"
         data-src={imageUrl}
       />
-    )
-  }
+    </ImageTooltipWrapper>
+  ) : (
+    <img
+      remote-image
+      src={imageUrl}
+      alt={alt}
+      width={width}
+      height={height}
+      loading={loading}
+      class={imgClasses}
+      style={{ objectPosition }}
+      data-remote="true"
+      decoding="async"
+      data-loading="true"
+      data-src={imageUrl}
+    />
+  )
+}
 
-  {/* 加载占位图 */}
-  {
-    showPlaceholder && (
-      <ImagePlaceholder
-        isRemote={true}
-        loadingIndicator={loadingIndicator}
-        rounded={rounded}
-        mask={mask}
-      />
-    )
-  }
+{/* 加载占位图 */}
+{
+  showPlaceholder && (
+    <ImagePlaceholder
+      isRemote={true}
+      loadingIndicator={loadingIndicator}
+      rounded={rounded}
+      mask={mask}
+    />
+  )
+}
 
-  {/* 错误占位图 */}
-  {showError && <ImageError rounded={rounded} mask={mask} />}
-</ImageContainer>
+{/* 错误占位图 */}
+{showError && <ImageError rounded={rounded} mask={mask} />}

package/dist/src-astro/image/image.ts

@@ -1,16 +1,7 @@
 import type { ImageMetadata } from 'astro';
 
-/**
- * 图片元数据接口
- * 用于统一管理项目中的图片元数据类型
- * 继承自 Astro 的 ImageMetadata 类型
- */
-export interface IImageMetadata extends ImageMetadata {
-    // 可以在这里添加额外的属性
-}
-
 /**
  * 图片源类型
- * 可以是 IImageMetadata 对象、字符串 URL 或 Astro 的 ImageMetadata
+ * 可以是 ImageMetadata 对象、字符串 URL 或 Astro 的 ImageMetadata
  */
 export type ImageSource = string | ImageMetadata;

package/dist/src-astro/image/utils.ts

@@ -2,46 +2,17 @@
  * 图片组件公共工具函数
  */
 
-// 圆角类名映射
-export const roundedClasses = {
-    none: '',
-    sm: 'cosy:rounded-sm',
-    md: 'cosy:rounded-md',
-    lg: 'cosy:rounded-lg',
-    xl: 'cosy:rounded-xl',
-    '2xl': 'cosy:rounded-2xl',
-    '3xl': 'cosy:rounded-3xl',
-    full: 'cosy:rounded-full',
-} as const;
+// 圆角类名映射（从 common 导入）
+export { roundedClasses, type RoundedSize } from '../../src/common/rounded';
 
-// 边框类名映射
-export const borderClasses = {
-    none: '',
-    sm: 'cosy:border cosy:border-base-300',
-    md: 'cosy:border-2 cosy:border-base-300',
-    lg: 'cosy:border-4 cosy:border-base-300',
-    xl: 'cosy:border-8 cosy:border-base-300',
-} as const;
+// 边框类名映射（从 common 导入）
+export { borderClasses, type BorderSize } from '../../src/common/border';
 
-// 遮罩类名映射
-export const maskClasses = {
-    circle: 'cosy:mask cosy:mask-circle',
-    decagon: 'cosy:mask cosy:mask-decagon',
-    diamond: 'cosy:mask cosy:mask-diamond',
-    heart: 'cosy:mask cosy:mask-heart',
-    hexagon: 'cosy:mask cosy:mask-hexagon',
-    'hexagon-2': 'cosy:mask cosy:mask-hexagon-2',
-    none: '',
-    pentagon: 'cosy:mask cosy:mask-pentagon',
-    square: 'cosy:mask cosy:mask-square',
-    squircle: 'cosy:mask cosy:mask-squircle',
-    star: 'cosy:mask cosy:mask-star',
-    'star-2': 'cosy:mask cosy:mask-star-2',
-    triangle: 'cosy:mask cosy:mask-triangle',
-    'triangle-2': 'cosy:mask cosy:mask-triangle-2',
-    'triangle-3': 'cosy:mask cosy:mask-triangle-3',
-    'triangle-4': 'cosy:mask cosy:mask-triangle-4',
-} as const;
+// 遮罩类名映射（从 common 导入）
+export { maskClasses, type MaskType } from '../../src/common/mask';
+
+// 阴影类名映射（从 common 导入）
+export { shadowClasses, type ShadowSize } from '../../src/common/shadow';
 
 // 对象填充方式类名映射
 export const objectFitClasses = {
@@ -52,15 +23,6 @@ export const objectFitClasses = {
     'scale-down': 'cosy:object-scale-down',
 } as const;
 
-// 阴影类名映射
-export const shadowClasses = {
-    none: '',
-    sm: 'cosy:shadow-sm',
-    md: 'cosy:shadow-md',
-    lg: 'cosy:shadow-lg',
-    xl: 'cosy:shadow-xl',
-    '2xl': 'cosy:shadow-2xl',
-} as const;
 
 // 悬停效果类名映射
 export const hoverClasses = {
@@ -79,10 +41,6 @@ export const transitionClasses = {
 } as const;
 
 // 类型定义
-export type RoundedType = keyof typeof roundedClasses;
-export type BorderType = keyof typeof borderClasses;
-export type MaskType = keyof typeof maskClasses;
 export type ObjectFitType = keyof typeof objectFitClasses;
-export type ShadowType = keyof typeof shadowClasses;
 export type HoverType = keyof typeof hoverClasses;
 export type TransitionType = keyof typeof transitionClasses;

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

@@ -4,9 +4,7 @@
  * @description 应用布局组件，适用于页面布局，包含头部导航、侧边栏导航和目录
  * @usage 用于创建包含头部、侧边栏、主内容区和页脚的完整页面布局
  * @props
- * @prop {any} [class:list] - 类名列表
- * @prop {string} [class] - 自定义CSS类名
- * @prop {boolean} [debug=false] - 是否启用调试模式，显示各个部分的边框
+ *
  * @prop {Object} [footerConfig] - 页脚配置，包含站点信息、社交媒体链接等
  * @prop {Object} [headerConfig] - 头部配置，传递给AppHeader组件
  * @prop {number} [loadingDelay=100] - 加载中界面延迟显示的时间（毫秒）
@@ -164,7 +162,6 @@
  *   sidebarConfig={{
  *     sidebarItems: sidebarItems
  *   }}
- *   debug={true}
  * >
  *   <h1>文档内容</h1>
  *   <p>这是文档的主要内容</p>
@@ -247,89 +244,57 @@ import {
   Main,
   Sidebar,
   Modal,
+  Skeleton,
 } from '../../index-astro';
+import {
+  getContainerMinHeightClass,
+  getSidebarTopClass,
+  getSidebarHeightClass,
+  type HeaderHeight,
+} from '../../src/common/index';
 import AppHeader from './AppHeader.astro';
-import SkeletonLoader from './SkeletonLoader.astro';
 
-interface Props extends IAppLayoutProps {}
+interface Props extends IAppLayoutProps {
+  /** 是否启用 Astro ClientRouter */
+  enableClientRouter?: boolean;
+}
 
 const {
   sidebarConfig,
   showHeader = true,
   showFooter = true,
   showSidebar = true,
-  class: className,
-  'class:list': classList,
-  debug = false,
   mainContentConfig,
   footerConfig,
   headerConfig,
   metaConfig,
   loadingDelay = 100,
-  ...rest
+  bodyOnly = false,
+  theme,
+  enableClientRouter = true,
 }: 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
+  headerConfig?.height as HeaderHeight
 );
 
-// 计算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);
+const sidebarTopClass = getSidebarTopClass(
+  headerConfig?.height as HeaderHeight
+);
+const sidebarHeightClass = getSidebarHeightClass(
+  headerConfig?.height as HeaderHeight
+);
 ---
 
-<BaseLayout {...metaConfig} debug={debug}>
+<BaseLayout
+  {...metaConfig}
+  bodyOnly={bodyOnly}
+  theme={theme}
+  enableClientRouter={enableClientRouter}>
   {
     showHeader && (
       <AppHeader
         headerConfig={headerConfig}
-        debug={debug}
         showSidebar={showSidebar}
         showSearch={Astro.slots.has('modal-search')}>
         <slot name="navbar-start" slot="navbar-start" />
@@ -360,13 +325,13 @@ const sidebarHeightClass = getSidebarHeightClass(headerConfig?.height);
 
     <!-- 主内容区域 -->
     <Main {...mainContentConfig} class="cosy:flex-1 cosy:min-w-xs">
-      <SkeletonLoader
+      <Skeleton
         showLoading={true}
         loadingSize="xl"
         loadingDelay={loadingDelay}
         skeletonClass="cosy:w-full cosy:h-screen cosy:flex cosy:items-center cosy:justify-center">
         <slot />
-      </SkeletonLoader>
+      </Skeleton>
     </Main>
   </Container>
 

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

@@ -3,5 +3,6 @@
  */
 
 import AppLayout from './AppLayout.astro';
+import AppHeader from './AppHeader.astro';
 
-export { AppLayout };
+export { AppLayout, AppHeader };