@coffic/cosy-ui 1.0.14 → 1.0.15

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.14",
+	"version": "1.0.15",
 	"description": "An astro component library",
 	"author": {
 		"name": "nookery",