@coffic/cosy-ui 0.9.78 → 0.9.79

package/dist/src-astro/apple-phone/ApplePhone.astro

@@ -70,8 +70,6 @@ interface Props extends IApplePhonePropsBase {}
 
 const {
 	height = DEFAULT_HEIGHT,
-	title = "",
-	withShadow = true,
 	showFrame = true,
 	backgroundColor = undefined,
 } = Astro.props as Props;
@@ -84,7 +82,6 @@ const scaleRatio = currentHeight / 500;
 const uniqueId = `apple-phone-${Math.random().toString(36).substr(2, 9)}`;
 
 // 响应式数据
-let showAlertDialog = false;
 let alertMessage = "";
 ---
 
@@ -105,7 +102,7 @@ let alertMessage = "";
     <!-- 内容区域 -->
     <div
         class="cosy:inset-0 cosy:h-full cosy:flex cosy:flex-col"
-        style={`width: ${MAIN_CONTENT_WIDTH_ASPECT_RATIO * 100}%; height: ${MAIN_CONTENT_HEIGHT_ASPECT_RATIO * 100}%; left: 50%; top: 50%; transform: translate(-50%, -50%); position: absolute; z-index: 20;`}>
+        style={`width: ${MAIN_CONTENT_WIDTH_ASPECT_RATIO * 100}%; height: ${MAIN_CONTENT_HEIGHT_ASPECT_RATIO * 100}%; left: 50%; top: 50%; transform: translate(-50%, -50%); position: absolute;`}>
         <Container
             rounded="lg"
             height="full"
@@ -115,6 +112,9 @@ let alertMessage = "";
             <slot />
         </Container>
     </div>
+
+    <!-- iPhone 边框（第二次渲染，盖住内容四角） -->
+    {showFrame && <PhoneFrame />}
 </div>
 
 <AlertDialog id={`${uniqueId}-alert`} message={alertMessage} />

package/dist/src-astro/apple-phone/StatusBarContent.astro

@@ -23,7 +23,6 @@
  * @slots
  */
 
-import "../../style";
 import { IPhoneSignalIcon, IPhoneWifiIcon, IPhoneBatteryIcon } from "../icons";
 
 interface Props {

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

@@ -1,6 +1,5 @@
 ---
 import Image from "../image/Image.astro";
-import "../../style.ts";
 import type { ImageSource } from "../image/types.ts";
 
 export interface Props {

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

@@ -2,7 +2,6 @@
 import ContainerBg from "./ContainerBg.astro";
 import AspectRatioBox from "./AspectRatioBox.astro";
 import HeightDrivenAspect from "./HeightDrivenAspect.astro";
-import "../../style.ts";
 import type { IContainerProps } from "./props.ts";
 import { getContainerCombinedClasses } from "./class.ts";
 

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

@@ -1,5 +1,4 @@
 ---
-import "../../style.ts";
 import { Alert } from "../../index-astro";
 
 interface Props {

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

@@ -6,7 +6,6 @@
  * 根据 fit 模式（contain/cover）计算合适的宽度
  */
 import type { RoundedSize } from "../../src/common/rounded";
-import { roundedClasses } from "../../src/common";
 
 export interface Props {
 	aspectRatio: number;

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

@@ -16,6 +16,7 @@
  * @prop {Object} [sidebarConfig] - 侧边栏配置，包含导航项等
  * @prop {...HTMLAttributes<'div'>} [rest] - 其他HTML div标签属性
  * @slots
+ * @slot background - 自定义背景层（最低层，用于渐变、图片等背景效果）
  * @slot default - 主内容区域
  * @slot footer - 自定义全局footer（优先级最高，会覆盖内置Footer）
  * @slot header - 自定义全局header（优先级最高，会覆盖内置AppHeader）
@@ -305,6 +306,29 @@
  *   </footer>
  * </AppLayout>
  * ```
+ *
+ * 自定义背景示例：
+ * ```astro
+ * <AppLayout
+ *   metaConfig={{
+ *     title: "文档标题",
+ *     description: "文档描述"
+ *   }}
+ *   sidebarConfig={{
+ *     sidebarItems: sidebarItems
+ *   }}
+ * >
+ *   <!-- 自定义背景层，渲染在最底层 -->
+ *   <div slot="background" class="cosy:fixed cosy:inset-0 cosy:bg-gradient-to-br cosy:from-blue-600 cosy:to-purple-800">
+ *     <!-- 装饰性模糊元素 -->
+ *     <div class="cosy:absolute cosy:top-10 cosy:left-10 cosy:w-96 cosy:h-96 cosy:bg-white/10 cosy:rounded-full cosy:blur-3xl"></div>
+ *     <div class="cosy:absolute cosy:bottom-10 cosy:right-10 cosy:w-96 cosy:h-96 cosy:bg-white/10 cosy:rounded-full cosy:blur-3xl"></div>
+ *   </div>
+ *
+ *   <h1>文档内容</h1>
+ *   <p>背景层会在所有内容下方渲染</p>
+ * </AppLayout>
+ * ```
  */
 
 import "../../style.ts";
@@ -360,6 +384,17 @@ const sidebarHeightClass = getSidebarHeightClass(
     bodyOnly={bodyOnly}
     theme={theme}
     enableClientRouter={enableClientRouter}>
+    <!-- 背景层（最底层，z-index: 0） -->
+    {
+        Astro.slots.has('background') && (
+            <div
+                aria-label="AppLayout-Background"
+                style="position: fixed; inset: 0; z-index: 0; pointer-events: none;">
+                <slot name="background" />
+            </div>
+        )
+    }
+
     {
         // 优先级：自定义 header slot > 内置 AppHeader > 不显示
         Astro.slots.has('header') ? (
@@ -383,7 +418,7 @@ const sidebarHeightClass = getSidebarHeightClass(
         padding="none"
         width="full"
         centered={true}
-        class="cosy:min-h-screen">
+        class="cosy:min-h-screen cosy:relative cosy:z-[1]">
         <!-- 侧边栏容器 -->
         {
             showSidebar && (

package/dist/src-astro/picture-book/PictureBookTextBox.astro

@@ -26,7 +26,7 @@
  * - width?: number - 宽度（百分比）
  * - heightPx?: number - 高度（像素）。不设置则根据内容自适应高度
  * - zIndex?: number - 层叠顺序，默认 10
- * - bg?: 'none' | 'paper' | 'muted' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' - 预设背景，支持 daisyUI 主题
+ * - bg?: BackgroundColor - 预设背景，支持所有通用背景色
  * - backdropBlur?: number - 背景虚化像素（backdrop-filter: blur(px)）
  * - paddingPx?: number - 内边距（px）
  * - roundedPx?: number - 圆角（px）
@@ -37,6 +37,8 @@
  */
 
 import "../../style.ts";
+import type { BackgroundColor } from "../../src/common/backgrounds";
+import { getBackgroundClass } from "../../src/common/backgrounds";
 
 export interface IPictureBookTextBoxProps {
 	top?: number;
@@ -47,17 +49,7 @@ export interface IPictureBookTextBoxProps {
 	heightPx?: number;
 	height?: number; // 百分比高度，建议与 width/top 等配合以实现同比缩放
 	zIndex?: number;
-	bg?:
-		| "none"
-		| "paper"
-		| "muted"
-		| "primary"
-		| "secondary"
-		| "accent"
-		| "info"
-		| "success"
-		| "warning"
-		| "error";
+	bg?: BackgroundColor;
 	backdropBlur?: number;
 	paddingPx?: number; // 固定像素内边距（不随容器缩放）
 	roundedPx?: number; // 固定像素圆角（不随容器缩放）
@@ -71,31 +63,8 @@ const props = Astro.props as IPictureBookTextBoxProps;
 
 const pct = (v?: number) => (typeof v === "number" ? `${v}%` : undefined);
 
-const bgClass = (() => {
-	switch (props.bg) {
-		case "paper":
-			return "cosy:bg-base-100/80 cosy:text-base-content";
-		case "muted":
-			return "cosy:bg-base-200/70 cosy:text-base-content";
-		case "primary":
-			return "cosy:bg-primary/20 cosy:text-base-content";
-		case "secondary":
-			return "cosy:bg-secondary/20 cosy:text-base-content";
-		case "accent":
-			return "cosy:bg-accent/20 cosy:text-base-content";
-		case "info":
-			return "cosy:bg-info/20 cosy:text-base-content";
-		case "success":
-			return "cosy:bg-success/20 cosy:text-base-content";
-		case "warning":
-			return "cosy:bg-warning/20 cosy:text-base-content";
-		case "error":
-			return "cosy:bg-error/20 cosy:text-base-content";
-		case "none":
-		default:
-			return "";
-	}
-})();
+// 使用通用背景色类名
+const bgClass = getBackgroundClass(props.bg);
 
 const paddingStyle = (() => {
 	if (typeof props.paddingCqw === "number")

package/dist/src-vue/apple-phone/StatusBarContent.vue

@@ -68,8 +68,12 @@ const scaledIconHeight = computed(() => {
 // 设置定时器更新时间
 let timeInterval: number;
 onMounted(() => {
-	updateTime();
-	timeInterval = window.setInterval(updateTime, 60000); // 每分钟更新一次
+	// 使用 requestAnimationFrame 确保在客户端渲染完成后再更新时间
+	// 这样可以避免 SSR hydration mismatch 问题
+	requestAnimationFrame(() => {
+		updateTime();
+		timeInterval = window.setInterval(updateTime, 60000); // 每分钟更新一次
+	});
 });
 
 onUnmounted(() => {
@@ -80,69 +84,78 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div class="cosy:flex cosy:items-center cosy:h-full cosy:justify-between">
-        <!-- 左侧时间 -->
-        <span class="cosy:font-medium time-text" :style="{ fontSize: scaledFontSize }">
-            {{ currentTime }}
-        </span>
-
-        <!-- 右侧状态图标 -->
-        <div class="cosy:flex cosy:flex-row cosy:items-center cosy:space-x-1 cosy:h-full">
-            <!-- 信号图标 -->
-            <div class="cosy:flex cosy:items-center cosy:justify-center" :style="{
-                width: scaledIconSize,
-                height: scaledIconHeight,
-                minWidth: 0,
-                minHeight: 0,
-            }">
-                <IPhoneSignalIcon class="status-icon" />
-            </div>
-
-            <!-- WiFi图标 -->
-            <div class="cosy:flex cosy:items-center cosy:justify-center" :style="{
-                width: scaledIconSize,
-                height: scaledIconHeight,
-                minWidth: 0,
-                minHeight: 0,
-            }">
-                <IPhoneWifiIcon class="status-icon" />
-            </div>
-
-            <!-- 电池图标 -->
-            <div class="cosy:flex cosy:items-center cosy:justify-center" :style="{
-                width: scaledIconSize,
-                height: scaledIconHeight,
-                minWidth: 0,
-                minHeight: 0,
-            }">
-                <IPhoneBatteryIcon class="battery-icon" />
-            </div>
-        </div>
+  <div class="cosy:flex cosy:items-center cosy:h-full cosy:justify-between">
+    <!-- 左侧时间 -->
+    <span
+      class="cosy:font-medium time-text"
+      :style="{ fontSize: scaledFontSize }">
+      {{ currentTime }}
+    </span>
+
+    <!-- 右侧状态图标 -->
+    <div
+      class="cosy:flex cosy:flex-row cosy:items-center cosy:space-x-1 cosy:h-full">
+      <!-- 信号图标 -->
+      <div
+        class="cosy:flex cosy:items-center cosy:justify-center"
+        :style="{
+          width: scaledIconSize,
+          height: scaledIconHeight,
+          minWidth: 0,
+          minHeight: 0,
+        }">
+        <IPhoneSignalIcon class="status-icon" />
+      </div>
+
+      <!-- WiFi图标 -->
+      <div
+        class="cosy:flex cosy:items-center cosy:justify-center"
+        :style="{
+          width: scaledIconSize,
+          height: scaledIconHeight,
+          minWidth: 0,
+          minHeight: 0,
+        }">
+        <IPhoneWifiIcon class="status-icon" />
+      </div>
+
+      <!-- 电池图标 -->
+      <div
+        class="cosy:flex cosy:items-center cosy:justify-center"
+        :style="{
+          width: scaledIconSize,
+          height: scaledIconHeight,
+          minWidth: 0,
+          minHeight: 0,
+        }">
+        <IPhoneBatteryIcon class="battery-icon" />
+      </div>
     </div>
+  </div>
 </template>
 
 <style scoped>
-/* 确保图标渲染更平滑 */
-svg {
+  /* 确保图标渲染更平滑 */
+  svg {
     shape-rendering: geometricPrecision;
-}
+  }
 
-/* 时间文字基础样式 */
-.time-text {
+  /* 时间文字基础样式 */
+  .time-text {
     line-height: 1;
     transition: font-size 0.2s ease;
-}
+  }
 
-/* 状态图标通用样式 */
-.status-icon,
-.battery-icon {
+  /* 状态图标通用样式 */
+  .status-icon,
+  .battery-icon {
     color: #000000;
     fill: currentColor;
-}
+  }
 
-.status-icon svg,
-.battery-icon svg {
+  .status-icon svg,
+  .battery-icon svg {
     width: 100%;
     height: 100%;
-}
+  }
 </style>

package/package.json

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