@coffic/cosy-ui 1.0.14 → 1.0.16

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-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/iPadAir11-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>

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

@@ -0,0 +1,119 @@
+---
+/**
+ * @component StatusBarContent
+ *
+ * @description
+ * StatusBarContent 组件显示 iPad 状态栏的内容，包括时间、信号、WiFi 和电池图标。
+ * 组件会自动更新时间显示，并支持根据设备大小进行缩放。
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <StatusBarContent />
+ * ```
+ *
+ * 带缩放比例：
+ * ```astro
+ * <StatusBarContent scaleRatio={1.5} />
+ * ```
+ *
+ * @props
+ * @prop {Number} [scaleRatio=1] - 缩放比例，用于根据设备大小调整文字和图标大小
+ */
+
+import { cn } from '../../src/class';
+import { IPhoneBatteryIcon, IPhoneSignalIcon, IPhoneWifiIcon } from '../icons';
+
+interface Props {
+    scaleRatio?: number;
+}
+
+const { scaleRatio = 1 } = Astro.props as Props;
+
+// 计算缩放后的字体大小
+const scaledFontSize = `${14 * scaleRatio}px`;
+
+// 计算缩放后的图标尺寸
+const scaledIconSize = `${15 * scaleRatio}px`;
+
+// 使用 classBuilder 构建各个部分的类名
+const containerClass = cn()
+    .flex('row')
+    .items('center')
+    .h('full')
+    .justify('between')
+    .build();
+
+const timeTextClass = cn().weight('medium').build();
+
+const iconsContainerClass = cn()
+    .flex('row')
+    .items('center')
+    .gap(1)
+    .h('full')
+    .build();
+
+const iconWrapperClass = cn()
+    .flex('row')
+    .items('center')
+    .justify('center')
+    .build();
+
+const statusIconClass = cn().add('status-icon').build();
+
+const batteryIconClass = cn().add('battery-icon').build();
+---
+
+<div class={containerClass}>
+    <!-- 左侧时间 -->
+    <span
+        class={timeTextClass}
+        data-time-text
+        style={`font-size: ${scaledFontSize}; line-height: 1; transition: font-size 0.2s ease;`}>
+        12:00
+    </span>
+
+    <!-- 右侧状态图标 -->
+    <div class={iconsContainerClass}>
+        <!-- 信号图标 -->
+        <div
+            class={iconWrapperClass}
+            style={`width: ${scaledIconSize}; height: ${scaledIconSize}; min-width: 0; min-height: 0;`}>
+            <IPhoneSignalIcon class={statusIconClass} />
+        </div>
+
+        <!-- WiFi图标 -->
+        <div
+            class={iconWrapperClass}
+            style={`width: ${scaledIconSize}; height: ${scaledIconSize}; min-width: 0; min-height: 0;`}>
+            <IPhoneWifiIcon class={statusIconClass} />
+        </div>
+
+        <!-- 电池图标 -->
+        <div
+            class={iconWrapperClass}
+            style={`width: ${scaledIconSize}; height: ${scaledIconSize}; min-width: 0; min-height: 0;`}>
+            <IPhoneBatteryIcon class={batteryIconClass} />
+        </div>
+    </div>
+</div>
+
+<style>
+    /* 确保图标渲染更平滑 */
+    svg {
+        shape-rendering: geometricPrecision;
+    }
+
+    /* 状态图标通用样式 */
+    .status-icon,
+    .battery-icon {
+        color: #000000;
+        fill: currentColor;
+    }
+
+    .status-icon svg,
+    .battery-icon svg {
+        width: 100%;
+        height: 100%;
+    }
+</style>

package/dist/src-astro/apple-pad/index.ts

@@ -0,0 +1,5 @@
+// 导出主组件
+export { default as ApplePad } from "./ApplePad.astro";
+
+// 导出类型
+export type { IApplePadProps } from "./props";

package/dist/src-astro/apple-pad/props.ts

@@ -0,0 +1,6 @@
+import type { IApplePadPropsBase } from "../../src/components/apple-pad/applePadPropsBase";
+
+/**
+ * ApplePad 组件的 Astro 版本属性接口（继承基础接口）
+ */
+export interface IApplePadProps extends IApplePadPropsBase {}

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

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { AlertDialog, Container } from "../../index-vue";
+import PadFrame from "./PadFrame.vue";
+import StatusBarContent from "./StatusBarContent.vue";
+
+/**
+ * @component ApplePad
+ * @description ApplePad 组件模拟 iPad 设备的外观，包含状态栏、时间显示和设备边框。
+ * 适用于创建平板应用界面原型或展示平板端设计效果。
+ * @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=''] - 内容区域背景色
+ * @slots
+ * @slot default - 主要内容区域
+ * @emits
+ */
+
+import type { IApplePadProps } from "./props";
+
+interface Props extends IApplePadProps {}
+
+// Props 定义
+const props = withDefaults(defineProps<Props>(), {
+	height: "lg",
+	title: "",
+	withShadow: true,
+	showFrame: true,
+	backgroundColor: undefined,
+});
+
+import {
+	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";
+
+// 响应式数据
+const showAlertDialog = ref(false);
+const alertMessage = ref("");
+
+// 计算当前高度的缩放比例
+const getScaleRatio = () => {
+	const currentHeight = HEIGHT_VALUES[props.height];
+	return currentHeight / 600;
+};
+</script>
+
+<template>
+  <div
+    :class="['cosy:relative not-prose cosy:mx-auto', HEIGHT_CLASSES[height]]"
+    :style="{
+      aspectRatio: `${IPAD_FRAME_WIDTH}/${IPAD_FRAME_HEIGHT}`,
+    }"
+    apple-pad>
+    <!-- iPad 边框 -->
+    <PadFrame v-if="showFrame" />
+
+    <!-- 顶部状态栏 -->
+    <div
+      :style="{
+        position: 'absolute',
+        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)',
+        paddingLeft: '5%',
+        paddingRight: '5%',
+        zIndex: 50,
+      }">
+      <StatusBarContent :scaleRatio="getScaleRatio()" />
+    </div>
+
+    <!-- 内容区域 -->
+    <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',
+      }">
+      <Container
+        rounded="lg"
+        height="full"
+        padding="none"
+        class="cosy:h-full cosy:overflow-y-auto cosy:overscroll-y-contain"
+        :background="backgroundColor || 'accent/90'">
+        <slot />
+      </Container>
+    </div>
+
+    <!-- iPad 边框（第二次渲染，盖住内容四角） -->
+    <PadFrame v-if="showFrame" />
+  </div>
+
+  <AlertDialog v-model="showAlertDialog" :message="alertMessage" />
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import ipadFrame from "../../src/components/apple-pad/assets/iPadAir11-M2-Purple-Portrait.png";
+
+const ipadFrameSrc = (ipadFrame as any).src || ipadFrame;
+</script>
+
+<template>
+  <div
+    style="
+      max-width: 100%;
+      max-height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 10;
+      pointer-events: none;
+    ">
+    <img :src="ipadFrameSrc" alt="iPad frame" />
+  </div>
+</template>