@coffic/cosy-ui 1.0.13 → 1.0.15

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/iPad Air 11\" - 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>

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

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import {
+	IPhoneBatteryIcon,
+	IPhoneSignalIcon,
+	IPhoneWifiIcon,
+} from "../icons/index";
+
+/**
+ * @component StatusBarContent
+ * @description StatusBarContent 组件显示 iPad 状态栏的内容，包括时间、信号、WiFi 和电池图标。
+ * 组件会自动更新时间显示，并支持根据设备大小进行缩放。
+ * @usage
+ * 基本用法：
+ * ```vue
+ * <StatusBarContent />
+ * ```
+ *
+ * 带缩放比例：
+ * ```vue
+ * <StatusBarContent :scaleRatio="1.5" />
+ * ```
+ * @props
+ * @prop {Number} [scaleRatio=1] - 缩放比例，用于根据设备大小调整文字和图标大小
+ */
+
+// Props 定义
+interface Props {
+	scaleRatio?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	scaleRatio: 1,
+});
+
+// 响应式数据
+const currentTime = ref("12:00");
+
+// 更新时间的函数
+const updateTime = () => {
+	const now = new Date();
+	const hours = now.getHours().toString().padStart(2, "0");
+	const minutes = now.getMinutes().toString().padStart(2, "0");
+	currentTime.value = `${hours}:${minutes}`;
+};
+
+// 计算缩放后的字体大小
+const scaledFontSize = computed(() => {
+	const baseFontSize = 14;
+	return `${baseFontSize * props.scaleRatio}px`;
+});
+
+// 计算缩放后的图标尺寸
+const scaledIconSize = computed(() => {
+	const baseIconSize = 15;
+	return `${baseIconSize * props.scaleRatio}px`;
+});
+
+// 计算缩放后的图标高度
+const scaledIconHeight = computed(() => {
+	const baseIconSize = 15;
+	return `${baseIconSize * props.scaleRatio}px`;
+});
+
+// 设置定时器更新时间
+let timeInterval: number;
+onMounted(() => {
+	requestAnimationFrame(() => {
+		updateTime();
+		timeInterval = window.setInterval(updateTime, 60000);
+	});
+});
+
+onUnmounted(() => {
+	if (timeInterval) {
+		clearInterval(timeInterval);
+	}
+});
+</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>
+</template>
+
+<style scoped>
+  svg {
+    shape-rendering: geometricPrecision;
+  }
+
+  .time-text {
+    line-height: 1;
+    transition: font-size 0.2s ease;
+  }
+
+  .status-icon,
+  .battery-icon {
+    color: #000000;
+    fill: currentColor;
+  }
+
+  .status-icon svg,
+  .battery-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+</style>

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

@@ -0,0 +1,2 @@
+// 导出主组件
+export { default as ApplePad } from "./ApplePad.vue";

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

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

package/package.json

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