@coffic/cosy-ui 1.0.13 → 1.0.15

package/dist/index-astro.ts

@@ -20,6 +20,7 @@ export * from "./src/utils/url";
 export * from "./src-astro/alert";
 export * from "./src-astro/alert-dialog";
 export * from "./src-astro/api-test";
+export * from "./src-astro/apple-pad";
 export * from "./src-astro/apple-phone";
 export * from "./src-astro/article";
 export * from "./src-astro/avatar";

package/dist/index-vue.ts

@@ -3,6 +3,7 @@ import "./app.css";
 export * from "./src-vue/alert/index";
 // 导出组件，按照字母排序
 export * from "./src-vue/alert-dialog/index";
+export * from "./src-vue/apple-pad/index";
 export * from "./src-vue/apple-phone/index";
 export * from "./src-vue/avatar/index";
 export * from "./src-vue/badge/index";

package/dist/src/components/apple-pad/applePadPropsBase.d.ts

@@ -0,0 +1,31 @@
+import type { BackgroundColor } from "../../../src/common/backgrounds";
+/**
+ * ApplePad 组件的基础属性接口（与框架无关）
+ */
+export interface IApplePadPropsBase {
+    /**
+     * 窗口高度选项
+     * @default 'lg'
+     */
+    height?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl";
+    /**
+     * 窗口标题
+     * @default ''
+     */
+    title?: string;
+    /**
+     * 是否显示阴影效果
+     * @default true
+     */
+    withShadow?: boolean;
+    /**
+     * 是否显示 iPad 边框
+     * @default true
+     */
+    showFrame?: boolean;
+    /**
+     * 内容区域背景色
+     * @default undefined
+     */
+    backgroundColor?: BackgroundColor;
+}

package/dist/src/components/apple-pad/applePadPropsBase.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/apple-pad/constants.d.ts

@@ -0,0 +1,36 @@
+/**
+ * ApplePad 组件的常量定义
+ *
+ * 基于 iPad Air 11" M2 竖屏模式
+ * 边框图片: 1900 × 2620 px
+ * 设备屏幕: 1640 × 2360 点
+ */
+export declare const IPAD_FRAME_WIDTH = 1900;
+export declare const IPAD_FRAME_HEIGHT = 2620;
+export declare const IPAD_FRAME_STATUS_BAR_TOP = 155;
+export declare const IPAD_FRAME_STATUS_BAR_HEIGHT = 70;
+export declare const MAIN_CONTENT_WIDTH_ASPECT_RATIO: number;
+export declare const MAIN_CONTENT_HEIGHT_ASPECT_RATIO: number;
+export declare const IPAD_FRAME_STATUS_BAR_HEIGHT_ASPECT_RATIO: number;
+export declare const IPAD_FRAME_STATUS_BAR_TOP_ASPECT_RATIO: number;
+export declare const HEIGHT_CLASSES: {
+    readonly sm: "cosy:h-[400px]";
+    readonly md: "cosy:h-[500px]";
+    readonly lg: "cosy:h-[600px]";
+    readonly xl: "cosy:h-[700px]";
+    readonly "2xl": "cosy:h-[800px]";
+    readonly "3xl": "cosy:h-[900px]";
+    readonly "4xl": "cosy:h-[1000px]";
+    readonly "5xl": "cosy:h-[1100px]";
+};
+export declare const HEIGHT_VALUES: {
+    readonly sm: 400;
+    readonly md: 500;
+    readonly lg: 600;
+    readonly xl: 700;
+    readonly "2xl": 800;
+    readonly "3xl": 900;
+    readonly "4xl": 1000;
+    readonly "5xl": 1100;
+};
+export declare const DEFAULT_HEIGHT: keyof typeof HEIGHT_VALUES;

package/dist/src/components/apple-pad/constants.js

@@ -0,0 +1,43 @@
+/**
+ * ApplePad 组件的常量定义
+ *
+ * 基于 iPad Air 11" M2 竖屏模式
+ * 边框图片: 1900 × 2620 px
+ * 设备屏幕: 1640 × 2360 点
+ */
+// iPad 边框图片尺寸
+export const IPAD_FRAME_WIDTH = 1900;
+export const IPAD_FRAME_HEIGHT = 2620;
+// iPad 边框图片 - 状态栏离上边框的距离
+export const IPAD_FRAME_STATUS_BAR_TOP = 155;
+// iPad 边框图片 - 状态栏高度
+export const IPAD_FRAME_STATUS_BAR_HEIGHT = 70;
+// 比例计算
+export const MAIN_CONTENT_WIDTH_ASPECT_RATIO = 1640 / IPAD_FRAME_WIDTH;
+export const MAIN_CONTENT_HEIGHT_ASPECT_RATIO = 2360 / IPAD_FRAME_HEIGHT;
+export const IPAD_FRAME_STATUS_BAR_HEIGHT_ASPECT_RATIO = IPAD_FRAME_STATUS_BAR_HEIGHT / IPAD_FRAME_HEIGHT;
+export const IPAD_FRAME_STATUS_BAR_TOP_ASPECT_RATIO = IPAD_FRAME_STATUS_BAR_TOP / IPAD_FRAME_HEIGHT;
+// 预定义的高度选项（iPad 比 iPhone 大，默认值也更大）
+export const HEIGHT_CLASSES = {
+    sm: "cosy:h-[400px]", // 400px
+    md: "cosy:h-[500px]", // 500px
+    lg: "cosy:h-[600px]", // 600px
+    xl: "cosy:h-[700px]", // 700px
+    "2xl": "cosy:h-[800px]", // 800px
+    "3xl": "cosy:h-[900px]", // 900px
+    "4xl": "cosy:h-[1000px]", // 1000px
+    "5xl": "cosy:h-[1100px]", // 1100px
+};
+// 高度值映射
+export const HEIGHT_VALUES = {
+    sm: 400,
+    md: 500,
+    lg: 600,
+    xl: 700,
+    "2xl": 800,
+    "3xl": 900,
+    "4xl": 1000,
+    "5xl": 1100,
+};
+// 默认高度
+export const DEFAULT_HEIGHT = "lg";

package/dist/src/styles/prose/prose-table.css

@@ -1,9 +1,8 @@
 /* Prose 表格样式 - 现代化设计 */
 
 /* 表格 */
-.prose :where(table):not(:where([class~='not-prose'], [class~='not-prose'] *)),
 .cosy\:prose
-	:where(table):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+:where(table):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
 	width: 100%;
 	table-layout: auto;
 	text-align: left;
@@ -23,7 +22,6 @@
 	background-color: #ffffff;
 }
 
-.prose :where(thead):not(:where([class~='not-prose'], [class~='not-prose'] *)),
 .cosy\:prose
 	:where(thead):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
 	border-bottom-width: 2px;
@@ -56,8 +54,6 @@
 	border-right: none;
 }
 
-.prose
-	:where(tbody tr):not(:where([class~='not-prose'], [class~='not-prose'] *)),
 .cosy\:prose
 	:where(tbody tr):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
 	border-bottom: 1px solid var(--tw-prose-td-borders, #e5e7eb);
@@ -76,14 +72,10 @@
 }
 
 /* Hover 效果 */
-.prose
+.cosy\:prose
 :where(tbody tr):hover:not(
 	:where([class~='not-prose'], [class~='not-prose'] *)
-),
-.cosy\:prose
-	:where(tbody tr):hover:not(
-		:where([class~='not-prose'], [class~='not-prose'] *)
-	) {
+) {
 	background-color: #f9fafb;
 	transform: scale(1.01);
 	box-shadow:
@@ -92,19 +84,13 @@
 }
 
 /* 斑马纹效果 */
-.prose
+.cosy\:prose
 :where(tbody tr:nth-child(even)):not(
 	:where([class~='not-prose'], [class~='not-prose'] *)
-),
-.cosy\:prose
-	:where(tbody tr:nth-child(even)):not(
-		:where([class~='not-prose'], [class~='not-prose'] *)
-	) {
+) {
 	background-color: rgba(249, 250, 251, 0.5);
 }
 
-.prose
-	:where(tbody td):not(:where([class~='not-prose'], [class~='not-prose'] *)),
 .cosy\:prose
 	:where(tbody td):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
 	vertical-align: middle;
@@ -112,10 +98,6 @@
 	border-right: 1px solid rgba(0, 0, 0, 0.03);
 }
 
-.prose
-	:where(tbody td:last-child):not(
-		:where([class~='not-prose'], [class~='not-prose'] *)
-	),
 .cosy\:prose
 	:where(tbody td:last-child):not(
 		:where([class~='not-prose'], [class~='not-prose'] *)
@@ -123,7 +105,6 @@
 	border-right: none;
 }
 
-.prose :where(tfoot):not(:where([class~='not-prose'], [class~='not-prose'] *)),
 .cosy\:prose
 	:where(tfoot):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
 	border-top: 2px solid var(--tw-prose-th-borders, #d1d5db);
@@ -131,8 +112,6 @@
 	font-weight: 600;
 }
 
-.prose
-	:where(tfoot td):not(:where([class~='not-prose'], [class~='not-prose'] *)),
 .cosy\:prose
 	:where(tfoot td):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
 	vertical-align: middle;
@@ -140,10 +119,6 @@
 	border-right: 1px solid rgba(0, 0, 0, 0.05);
 }
 
-.prose
-	:where(tfoot td:last-child):not(
-		:where([class~='not-prose'], [class~='not-prose'] *)
-	),
 .cosy\:prose
 	:where(tfoot td:last-child):not(
 		:where([class~='not-prose'], [class~='not-prose'] *)
@@ -155,9 +130,6 @@
 
 /* 默认主题跟随系统主题 - 当 data-theme='default' 且系统是暗黑模式时生效 */
 @media (prefers-color-scheme: dark) {
-	[data-theme='default']
-		.prose.dark\:prose-invert
-		:where(table):not(:where([class~='not-prose'], [class~='not-prose'] *)),
 	[data-theme='default']
 		.cosy\:prose.cosy\:dark\:prose-invert
 		:where(table):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
@@ -168,29 +140,18 @@
 			0 1px 2px -1px rgba(0, 0, 0, 0.3);
 	}
 
-	[data-theme='default']
-		.prose.dark\:prose-invert
-		:where(thead):not(:where([class~='not-prose'], [class~='not-prose'] *)),
 	[data-theme='default']
 		.cosy\:prose.cosy\:dark\:prose-invert
 		:where(thead):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
 		background: linear-gradient(to bottom, #374151 0%, #1f2937 100%);
 	}
 
-	[data-theme='default']
-		.prose.dark\:prose-invert
-		:where(thead th):not(:where([class~='not-prose'], [class~='not-prose'] *)),
 	[data-theme='default']
 		.cosy\:prose.cosy\:dark\:prose-invert
 		:where(thead th):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
 		border-right: 1px solid rgba(255, 255, 255, 0.1);
 	}
 
-	[data-theme='default']
-		.prose.dark\:prose-invert
-		:where(tbody tr):hover:not(
-			:where([class~='not-prose'], [class~='not-prose'] *)
-		),
 	[data-theme='default']
 		.cosy\:prose.cosy\:dark\:prose-invert
 		:where(tbody tr):hover:not(
@@ -202,11 +163,6 @@
 			0 4px 6px -1px rgba(0, 0, 0, 0.3);
 	}
 
-	[data-theme='default']
-		.prose.dark\:prose-invert
-		:where(tbody tr:nth-child(even)):not(
-			:where([class~='not-prose'], [class~='not-prose'] *)
-		),
 	[data-theme='default']
 		.cosy\:prose.cosy\:dark\:prose-invert
 		:where(tbody tr:nth-child(even)):not(
@@ -215,27 +171,18 @@
 		background-color: rgba(55, 65, 81, 0.3);
 	}
 
-	[data-theme='default']
-		.prose.dark\:prose-invert
-		:where(tbody td):not(:where([class~='not-prose'], [class~='not-prose'] *)),
 	[data-theme='default']
 		.cosy\:prose.cosy\:dark\:prose-invert
 		:where(tbody td):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
 		border-right: 1px solid rgba(255, 255, 255, 0.05);
 	}
 
-	[data-theme='default']
-		.prose.dark\:prose-invert
-		:where(tfoot):not(:where([class~='not-prose'], [class~='not-prose'] *)),
 	[data-theme='default']
 		.cosy\:prose.cosy\:dark\:prose-invert
 		:where(tfoot):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
 		background: linear-gradient(to top, #374151 0%, #1f2937 100%);
 	}
 
-	[data-theme='default']
-		.prose.dark\:prose-invert
-		:where(tfoot td):not(:where([class~='not-prose'], [class~='not-prose'] *)),
 	[data-theme='default']
 		.cosy\:prose.cosy\:dark\:prose-invert
 		:where(tfoot td):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
@@ -244,9 +191,6 @@
 }
 
 /* 所有暗色主题的通用样式 - 通过 data-theme-tone='dark' 判断 */
-[data-theme-tone='dark']
-	.prose.dark\:prose-invert
-	:where(table):not(:where([class~='not-prose'], [class~='not-prose'] *)),
 [data-theme-tone='dark']
 	.cosy\:prose.cosy\:dark\:prose-invert
 	:where(table):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
@@ -257,29 +201,18 @@
 		0 1px 2px -1px rgba(0, 0, 0, 0.3);
 }
 
-[data-theme-tone='dark']
-	.prose.dark\:prose-invert
-	:where(thead):not(:where([class~='not-prose'], [class~='not-prose'] *)),
 [data-theme-tone='dark']
 	.cosy\:prose.cosy\:dark\:prose-invert
 	:where(thead):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
 	background: linear-gradient(to bottom, #374151 0%, #1f2937 100%);
 }
 
-[data-theme-tone='dark']
-	.prose.dark\:prose-invert
-	:where(thead th):not(:where([class~='not-prose'], [class~='not-prose'] *)),
 [data-theme-tone='dark']
 	.cosy\:prose.cosy\:dark\:prose-invert
 	:where(thead th):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
 	border-right: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-[data-theme-tone='dark']
-	.prose.dark\:prose-invert
-	:where(tbody tr):hover:not(
-		:where([class~='not-prose'], [class~='not-prose'] *)
-	),
 [data-theme-tone='dark']
 	.cosy\:prose.cosy\:dark\:prose-invert
 	:where(tbody tr):hover:not(
@@ -291,11 +224,6 @@
 		0 4px 6px -1px rgba(0, 0, 0, 0.3);
 }
 
-[data-theme-tone='dark']
-	.prose.dark\:prose-invert
-	:where(tbody tr:nth-child(even)):not(
-		:where([class~='not-prose'], [class~='not-prose'] *)
-	),
 [data-theme-tone='dark']
 	.cosy\:prose.cosy\:dark\:prose-invert
 	:where(tbody tr:nth-child(even)):not(
@@ -304,27 +232,18 @@
 	background-color: rgba(55, 65, 81, 0.3);
 }
 
-[data-theme-tone='dark']
-	.prose.dark\:prose-invert
-	:where(tbody td):not(:where([class~='not-prose'], [class~='not-prose'] *)),
 [data-theme-tone='dark']
 	.cosy\:prose.cosy\:dark\:prose-invert
 	:where(tbody td):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
 	border-right: 1px solid rgba(255, 255, 255, 0.05);
 }
 
-[data-theme-tone='dark']
-	.prose.dark\:prose-invert
-	:where(tfoot):not(:where([class~='not-prose'], [class~='not-prose'] *)),
 [data-theme-tone='dark']
 	.cosy\:prose.cosy\:dark\:prose-invert
 	:where(tfoot):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
 	background: linear-gradient(to top, #374151 0%, #1f2937 100%);
 }
 
-[data-theme-tone='dark']
-	.prose.dark\:prose-invert
-	:where(tfoot td):not(:where([class~='not-prose'], [class~='not-prose'] *)),
 [data-theme-tone='dark']
 	.cosy\:prose.cosy\:dark\:prose-invert
 	:where(tfoot td):not(:where([class~='not-prose'], [class~='not-prose'] *)) {

package/dist/src-astro/apple-pad/ApplePad.astro

@@ -0,0 +1,165 @@
+---
+/**
+ * @component ApplePad
+ *
+ * @description
+ * ApplePad 组件模拟 iPad 设备的外观，包含状态栏、时间显示和设备边框。
+ * 适用于创建平板应用界面原型或展示平板端设计效果。
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <ApplePad title="我的应用">
+ *   <div>应用内容</div>
+ * </ApplePad>
+ * ```
+ *
+ * 自定义高度和背景色：
+ * ```astro
+ * <ApplePad height="xl" backgroundColor="primary/10">
+ *   <div>应用内容</div>
+ * </ApplePad>
+ * ```
+ *
+ * 不显示边框：
+ * ```astro
+ * <ApplePad showFrame={false}>
+ *   <div>应用内容</div>
+ * </ApplePad>
+ * ```
+ *
+ * @props
+ * @prop {'sm'|'md'|'lg'|'xl'|'2xl'|'3xl'|'4xl'|'5xl'} [height='lg'] - 窗口高度选项
+ * - sm: 400px
+ * - md: 500px
+ * - lg: 600px - 默认值
+ * - xl: 700px
+ * - 2xl: 800px
+ * - 3xl: 900px
+ * - 4xl: 1000px
+ * - 5xl: 1100px
+ * @prop {String} [title=''] - 窗口标题
+ * @prop {Boolean} [withShadow=true] - 是否显示阴影效果
+ * @prop {Boolean} [showFrame=true] - 是否显示 iPad 边框
+ * @prop {BackgroundColor} [backgroundColor=''] - 内容区域背景色，等同于为其内部的 Container 设置背景色
+ *
+ * @slots
+ * @slot default - 主要内容区域
+ */
+
+import { cn } from '../../src/class';
+import type { IApplePadPropsBase } from '../../src/components/apple-pad/applePadPropsBase';
+import {
+    DEFAULT_HEIGHT,
+    HEIGHT_CLASSES,
+    HEIGHT_VALUES,
+    IPAD_FRAME_HEIGHT,
+    IPAD_FRAME_STATUS_BAR_HEIGHT_ASPECT_RATIO,
+    IPAD_FRAME_STATUS_BAR_TOP_ASPECT_RATIO,
+    IPAD_FRAME_WIDTH,
+    MAIN_CONTENT_HEIGHT_ASPECT_RATIO,
+    MAIN_CONTENT_WIDTH_ASPECT_RATIO,
+} from '../../src/components/apple-pad/constants';
+import { AlertDialog } from '../alert-dialog';
+import { Container } from '../container';
+import PadFrame from './PadFrame.astro';
+import StatusBarContent from './StatusBarContent.astro';
+
+// Props 定义 - 使用共享接口
+interface Props extends IApplePadPropsBase {}
+
+const {
+    height = DEFAULT_HEIGHT,
+    showFrame = true,
+    backgroundColor = undefined,
+} = Astro.props as Props;
+
+// 计算当前高度的缩放比例
+const currentHeight = HEIGHT_VALUES[height];
+const scaleRatio = currentHeight / 600;
+
+// 生成唯一的ID
+const uniqueId = `apple-pad-${Math.random().toString(36).slice(2, 11)}`;
+
+// 响应式数据
+const alertMessage = '';
+
+// 使用 classBuilder 构建各个部分的类名
+const padContainerClass = cn()
+    .relative()
+    .add('not-prose', 'cosy:mx-auto', HEIGHT_CLASSES[height])
+    .build();
+
+const statusBarClass = cn().absolute().w('full').add('cosy:z-50').build();
+
+const contentAreaClass = cn()
+    .absolute()
+    .add('cosy:inset-0')
+    .h('full')
+    .flex('col')
+    .build();
+
+const containerClass = cn()
+    .h('full')
+    .add('cosy:overflow-y-auto', 'cosy:overscroll-y-contain')
+    .build();
+---
+
+<div
+    class={padContainerClass}
+    style={`aspect-ratio: ${IPAD_FRAME_WIDTH}/${IPAD_FRAME_HEIGHT};`}
+    apple-pad>
+    <!-- iPad 边框 -->
+    {showFrame && <PadFrame />}
+
+    <!-- 顶部状态栏 -->
+    <div
+        class={statusBarClass}
+        style={`top: ${IPAD_FRAME_STATUS_BAR_TOP_ASPECT_RATIO * 100}%; height: ${IPAD_FRAME_STATUS_BAR_HEIGHT_ASPECT_RATIO * 100}%; width: ${MAIN_CONTENT_WIDTH_ASPECT_RATIO * 100}%; left: 50%; transform: translate(-50%, 0); padding-left: 5%; padding-right: 5%;`}>
+        <!-- StatusBarContent 组件 -->
+        <StatusBarContent scaleRatio={scaleRatio} />
+    </div>
+
+    <!-- 内容区域 -->
+    <div
+        class={contentAreaClass}
+        style={`width: ${MAIN_CONTENT_WIDTH_ASPECT_RATIO * 100}%; height: ${MAIN_CONTENT_HEIGHT_ASPECT_RATIO * 100}%; left: 50%; top: 50%; transform: translate(-50%, -50%);`}>
+        <Container
+            rounded="lg"
+            height="full"
+            padding="none"
+            class={containerClass}
+            background={backgroundColor || 'accent/90'}>
+            <slot />
+        </Container>
+    </div>
+
+    <!-- iPad 边框（第二次渲染，盖住内容四角） -->
+    {showFrame && <PadFrame />}
+</div>
+
+<AlertDialog id={`${uniqueId}-alert`} message={alertMessage} />
+
+<script>
+    // 全局函数，用于处理状态栏时间更新
+    function updateTime() {
+        const now = new Date();
+        const hours = now.getHours().toString().padStart(2, '0');
+        const minutes = now.getMinutes().toString().padStart(2, '0');
+        return `${hours}:${minutes}`;
+    }
+
+    // 更新时间显示
+    function updateStatusBarTime() {
+        const timeElements = document.querySelectorAll('[data-time-text]');
+        timeElements.forEach((element) => {
+            (element as HTMLElement).textContent = updateTime();
+        });
+    }
+
+    // 初始化并设置定时器
+    document.addEventListener('DOMContentLoaded', () => {
+        updateStatusBarTime();
+        setInterval(updateStatusBarTime, 60000); // 每分钟更新一次
+    });
+</script>

package/dist/src-astro/apple-pad/PadFrame.astro

@@ -0,0 +1,23 @@
+---
+/**
+ * @component PadFrame
+ * @description ApplePad 组件的内部边框组件，用于显示 iPad 设备的边框
+ */
+
+import { cn } from '../../src/class';
+import ipadFrame from '../../src/components/apple-pad/assets/iPad Air 11" - M2 - Purple - Portrait.png';
+import { Image } from '../image';
+
+// 使用 class builder 构建类名
+const frameClass = cn()
+    .add('cosy:max-w-full', 'cosy:max-h-full')
+    .absolute()
+    .add('cosy:top-0', 'cosy:left-0')
+    .add('cosy:z-10')
+    .add('cosy:pointer-events-none')
+    .build();
+---
+
+<div class={frameClass}>
+    <Image src={ipadFrame} alt="iPad frame" />
+</div>