@coffic/cosy-ui 0.8.17 → 0.8.18

package/dist/index-vue.ts

@@ -29,8 +29,8 @@ export * from './src-vue/icons/index';
 export * from './src-vue/list/index';
 
 // Windows
-// export { MacWindowExamples, MacWindowExampleCodes, MacWindow } from './vue/MacWindow';
-// export { iPhoneWindowExamples, iPhoneWindowExampleCodes, iPhoneWindow } from './vue/iPhone';
+export * from './src-vue/mac-window/index';
+export * from './src-vue/iPhone/index';
 
 // SmartLink
 // export { default as SmartLink } from './vue/SmartLink.vue';

package/dist/src-vue/iPhone/StatusBarContent.vue

@@ -0,0 +1,121 @@
+<!--
+@component StatusBarContent
+
+@description
+StatusBarContent 组件显示 iPhone 状态栏的内容，包括时间、信号、WiFi 和电池图标。
+组件会自动更新时间显示，并支持根据设备大小进行缩放。
+
+@usage
+基本用法：
+```vue
+<StatusBarContent />
+```
+
+带缩放比例：
+```vue
+<StatusBarContent :scaleRatio="1.5" />
+```
+
+@props
+@prop {Number} [scaleRatio=1] - 缩放比例，用于根据设备大小调整文字和图标大小
+@slots
+@emits
+-->
+<script lang="ts">
+import { defineComponent, ref, onMounted, onUnmounted, computed } from 'vue';
+import { IPhoneSignalIcon, IPhoneWifiIcon, IPhoneBatteryIcon } from '../icons';
+import '../../style.ts';
+
+export default defineComponent({
+    name: 'StatusBarContent',
+    components: {
+        IPhoneSignalIcon,
+        IPhoneWifiIcon,
+        IPhoneBatteryIcon,
+    },
+    props: {
+        scaleRatio: {
+            type: Number,
+            default: 1,
+        },
+    },
+    setup(props) {
+        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 baseHeight = 60; // 基础高度百分比
+            return `${baseHeight * props.scaleRatio}%`;
+        });
+
+        // 设置定时器更新时间
+        let timeInterval: number;
+        onMounted(() => {
+            updateTime();
+            timeInterval = window.setInterval(updateTime, 60000); // 每分钟更新一次
+        });
+
+        onUnmounted(() => {
+            if (timeInterval) {
+                clearInterval(timeInterval);
+            }
+        });
+
+        return {
+            currentTime,
+            scaledFontSize,
+            scaledIconSize,
+            scaledIconHeight,
+        };
+    },
+});
+</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 :style="{ width: scaledIconSize, height: scaledIconHeight, minWidth: 0, minHeight: 0 }">
+                <IPhoneBatteryIcon />
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+/* 确保图标渲染更平滑 */
+svg {
+    shape-rendering: geometricPrecision;
+}
+
+/* 时间文字基础样式 */
+.time-text {
+    line-height: 1;
+    transition: font-size 0.2s ease;
+}
+</style>

package/dist/src-vue/iPhone/iPhoneWindow.vue

@@ -27,8 +27,30 @@ iPhoneWindow 组件模拟 iPhone 设备的外观，包含状态栏、时间显
 </iPhoneWindow>
 ```
 
+自定义高度：
+```vue
+<iPhoneWindow height="md">
+  <div>应用内容</div>
+</iPhoneWindow>
+```
+
+使用较大高度：
+```vue
+<iPhoneWindow height="2xl">
+  <div>应用内容</div>
+</iPhoneWindow>
+```
+
 @props
-@prop {String} [height='h-96'] - 窗口高度
+@prop {'sm'|'md'|'lg'|'xl'|'2xl'|'3xl'|'4xl'|'5xl'} [height='lg'] - 窗口高度选项
+- sm: 256px (h-64)
+- md: 320px (h-80) 
+- lg: 384px (h-96) - 默认值
+- xl: 480px
+- 2xl: 560px
+- 3xl: 640px
+- 4xl: 720px
+- 5xl: 800px
 @prop {String} [title=''] - 窗口标题
 @prop {Array} [statusBarButtons=[]] - 状态栏按钮数组
 @prop {Boolean} [withShadow=true] - 是否显示阴影效果
@@ -43,205 +65,170 @@ iPhoneWindow 组件模拟 iPhone 设备的外观，包含状态栏、时间显
 <script lang="ts">
 import '../../style.ts';
 import { AlertDialog } from '../../index-vue.ts';
-import { ref, onMounted, onUnmounted, defineComponent } from 'vue';
-// 导入内部图片资源
+import { ref, defineComponent } from 'vue';
 import iphoneFrame from './assets/iPhone 14 Pro - Deep Purple - Portrait.png';
+import StatusBarContent from './StatusBarContent.vue';
+
+// iPhone边框图片-宽度
+const iphoneFrameWidth = 1339;
+// iPhone边框图片-高度
+const iphoneFrameHeight = 2716;
+// iPhone边框图片-状态栏离上边框的距离
+const iphoneFrameStatusBarTop = 115;
+// iPhone边框图片-状态栏高度
+const iphoneFrameStatusBarHeight = 110;
+
+// 比例-总宽度
+const mainContentWidthAspectRatio = 1179 / iphoneFrameWidth;
+// 比例-总高度
+const mainContentHeightAspectRatio = 2556 / iphoneFrameHeight;
+// 比例-状态栏高度
+const iphoneFrameStatusBarHeightAspectRatio = iphoneFrameStatusBarHeight / iphoneFrameHeight;
+// 比例-状态栏离上边框的距离
+const iphoneFrameStatusBarTopAspectRatio = iphoneFrameStatusBarTop / iphoneFrameHeight;
+
+// 预定义的高度选项
+type HeightOption = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+
+const heightClasses: Record<HeightOption, string> = {
+    sm: 'cosy:h-64',    // 256px
+    md: 'cosy:h-80',    // 320px
+    lg: 'cosy:h-96',    // 384px
+    xl: 'cosy:h-[480px]', // 480px
+    '2xl': 'cosy:h-[560px]', // 560px
+    '3xl': 'cosy:h-[640px]', // 640px
+    '4xl': 'cosy:h-[720px]', // 720px
+    '5xl': 'cosy:h-[800px]', // 800px
+};
 
 export default defineComponent({
-  name: 'iPhoneWindow',
-  components: {
-    AlertDialog,
-  },
-  props: {
-    height: {
-      type: String,
-      default: 'h-96',
-    },
-    title: {
-      type: String,
-      default: '',
-    },
-    statusBarButtons: {
-      type: Array,
-      default: () => [],
+    name: 'iPhoneWindow',
+    components: {
+        AlertDialog,
+        StatusBarContent,
     },
-    withShadow: {
-      type: Boolean,
-      default: true,
+    props: {
+        height: {
+            type: String as () => HeightOption,
+            default: 'lg',
+            validator: (value: string) => {
+                return Object.keys(heightClasses).includes(value);
+            },
+        },
+        debug: {
+            type: Boolean,
+            default: false,
+        },
+        title: {
+            type: String,
+            default: '',
+        },
+        statusBarButtons: {
+            type: Array,
+            default: () => [],
+        },
+        withShadow: {
+            type: Boolean,
+            default: true,
+        },
+        showFrame: {
+            type: Boolean,
+            default: true,
+        },
+        backgroundColor: {
+            type: String,
+            default: '',
+        },
     },
-    showFrame: {
-      type: Boolean,
-      default: true,
+    setup(props) {
+        const showAlertDialog = ref(false);
+        const alertMessage = ref('');
+
+        // 获取图片URL
+        const frameSrc =
+            typeof iphoneFrame === 'string' ? iphoneFrame : iphoneFrame.src;
+
+        // 计算当前高度的缩放比例
+        const getScaleRatio = () => {
+            const heightValues = {
+                sm: 256,
+                md: 320,
+                lg: 384,
+                xl: 480,
+                '2xl': 560,
+                '3xl': 640,
+                '4xl': 720,
+                '5xl': 800,
+            };
+            const currentHeight = heightValues[props.height];
+            // 基于特定高度计算缩放比例
+            return currentHeight / 500;
+        };
+
+        return {
+            showAlertDialog,
+            alertMessage,
+            frameSrc,
+            heightClasses,
+            mainContentWidthAspectRatio,
+            mainContentHeightAspectRatio,
+            iphoneFrameWidth,
+            iphoneFrameHeight,
+            iphoneFrameStatusBarTop,
+            iphoneFrameStatusBarHeight,
+            iphoneFrameStatusBarHeightAspectRatio,
+            iphoneFrameStatusBarTopAspectRatio,
+            getScaleRatio,
+        };
     },
-    backgroundColor: {
-      type: String,
-      default: '',
-    },
-  },
-  setup() {
-    const showAlertDialog = ref(false);
-    const alertMessage = ref('');
-    const currentTime = ref('12:00');
-
-    // 获取图片URL
-    const frameSrc =
-      typeof iphoneFrame === 'string' ? iphoneFrame : iphoneFrame.src;
-
-    // 更新时间的函数
-    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}`;
-    };
-
-    // 设置定时器更新时间
-    let timeInterval: number;
-    onMounted(() => {
-      updateTime();
-      timeInterval = window.setInterval(updateTime, 60000); // 每分钟更新一次
-    });
-
-    onUnmounted(() => {
-      if (timeInterval) {
-        clearInterval(timeInterval);
-      }
-    });
-
-    return {
-      showAlertDialog,
-      alertMessage,
-      currentTime,
-      frameSrc,
-    };
-  },
 });
 </script>
 
 <template>
-  <div class="cosy:relative cosy:w-full">
-    <div class="cosy:relative cosy:aspect-[9/19.5]">
-      <!-- iPhone 边框 (放在最底层) -->
-      <img
-        v-if="showFrame"
-        :src="frameSrc"
-        alt="iPhone frame"
-        class="cosy:absolute cosy:inset-0 cosy:w-full cosy:h-full cosy:object-contain"
-      />
-
-      <!-- 内容区域 -->
-      <div
-        :class="[
-          'cosy:absolute cosy:inset-0',
-          showFrame ? 'cosy:px-[6%] cosy:pt-[13%] cosy:pb-[13%]' : '',
-        ]"
-      >
-        <div
-          :class="[
-            'cosy:w-full cosy:h-full cosy:flex cosy:flex-col cosy:overflow-hidden',
-            showFrame
-              ? 'cosy:rounded-t-[2.5em] cosy:rounded-b-[2.5rem]'
-              : 'cosy:rounded-lg cosy:shadow',
-            backgroundColor || 'cosy:bg-transparent',
-          ]"
-        >
-          <!-- 顶部状态栏 (z-index 设为负数，确保在边框下方) -->
-          <div
-            class="cosy:flex-none cosy:h-12 cosy:px-4 cosy:z-0 cosy:relative"
-          >
-            <div
-              class="cosy:flex cosy:items-center cosy:h-full cosy:justify-between"
-            >
-              <!-- 左侧时间 -->
-              <div class="cosy:flex cosy:items-center">
-                <span
-                  class="cosy:text-sm cosy:font-medium cosy:text-gray-700 cosy:dark:text-gray-200"
-                  >{{ currentTime }}</span
-                >
-              </div>
-              <!-- 右侧状态图标 -->
-              <div class="cosy:flex cosy:items-center cosy:space-x-1.5">
-                <!-- 信号图标 -->
-                <svg
-                  class="cosy:w-5 cosy:h-3.5 cosy:text-gray-700 cosy:dark:text-gray-200"
-                  viewBox="0 0 20 12"
-                  fill="none"
-                  stroke="currentColor"
-                >
-                  <path
-                    d="M1 11h2V6H1v5zm4 0h2V4H5v7zm4 0h2V2H9v9zm4 0h2V0h-2v11z"
-                    fill="currentColor"
-                  />
-                  <path
-                    d="M17 11h2V0h-2v11z"
-                    fill="currentColor"
-                    opacity="0.4"
-                  />
-                </svg>
-                <!-- Wi-Fi图标 -->
-                <svg
-                  class="cosy:w-5 cosy:h-4 cosy:text-gray-700 cosy:dark:text-gray-200"
-                  viewBox="0 0 16 12"
-                  fill="currentColor"
-                >
-                  <path
-                    d="M8 10.5a1 1 0 100-2 1 1 0 000 2zM4.25 7.25a5 5 0 017.5 0l-1.06 1.06a3.5 3.5 0 00-5.38 0L4.25 7.25z"
-                  />
-                  <path
-                    d="M1.75 4.75a8.5 8.5 0 0112.5 0l-1.06 1.06a7 7 0 00-10.38 0L1.75 4.75z"
-                  />
-                </svg>
-                <!-- 电池图标 -->
-                <div class="cosy:flex cosy:items-center cosy:space-x-0.5">
-                  <svg
-                    class="cosy:w-6 cosy:h-3.5 cosy:text-gray-700 cosy:dark:text-gray-200"
-                    viewBox="0 0 25 12"
-                    fill="none"
-                    stroke="currentColor"
-                  >
-                    <rect
-                      x="0.5"
-                      y="0.5"
-                      width="21"
-                      height="11"
-                      rx="2.5"
-                      stroke-width="1"
-                    />
-                    <rect
-                      x="2"
-                      y="2"
-                      width="18"
-                      height="8"
-                      rx="1"
-                      fill="currentColor"
-                    />
-                    <path
-                      d="M23 4h1a1 1 0 011 1v2a1 1 0 01-1 1h-1V4z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </div>
-              </div>
+    <div :class="['cosy:relative', heightClasses[height]]" :style="{
+        aspectRatio: `${iphoneFrameWidth}/${iphoneFrameHeight}`,
+        // 调试模式，背景色为半透明的黄色
+        backgroundColor: debug ? 'rgba(255, 255, 0, 0.3)' : 'transparent',
+    }">
+        <!-- iPhone 边框 -->
+        <img v-if="showFrame" style="max-width: 100%; max-height: 100%;" :src="frameSrc" alt="iPhone frame" />
+
+        <!-- 顶部状态栏 -->
+        <div :style="{
+            position: 'absolute',
+            top: iphoneFrameStatusBarTopAspectRatio * 100 + '%',
+            height: iphoneFrameStatusBarHeightAspectRatio * 100 + '%',
+            width: mainContentWidthAspectRatio * 100 + '%',
+            left: '50%',
+            transform: 'translate(-50%, 0)',
+            paddingLeft: '5%',
+            paddingRight: '5%',
+            // 调试模式，背景色为半透明的红色
+            backgroundColor: debug ? 'rgba(255, 0, 0, 0.3)' : 'transparent',
+            zIndex: 10,
+        }">
+            <StatusBarContent :scaleRatio="getScaleRatio()" />
+        </div>
+
+        <!-- 内容区域 -->
+        <div class="cosy:inset-0 cosy:h-full" :style="{
+            width: mainContentWidthAspectRatio * 100 + '%',
+            height: mainContentHeightAspectRatio * 100 + '%',
+            // 水平居中
+            left: '50%',
+            // 垂直居中
+            top: '50%',
+            transform: 'translate(-50%, -50%)',
+            position: 'absolute',
+            // 调试模式，背景色为半透明的蓝色
+            backgroundColor: debug ? 'rgba(0, 0, 255, 0.3)' : 'transparent',
+            zIndex: 10,
+        }">
+            <div :class="[debug ? 'cosy:bg-green-300/50' : '', 'cosy:h-full cosy:w-full']">
+                <slot />
             </div>
-          </div>
-
-          <!-- 主要内容区域 -->
-          <div
-            class="cosy:flex-1 cosy:flex cosy:flex-col cosy:overflow-hidden cosy:relative"
-          >
-            <slot />
-          </div>
         </div>
-      </div>
     </div>
-  </div>
-  <!-- 添加 AlertDialog 组件 -->
-  <AlertDialog v-model="showAlertDialog" :message="alertMessage" />
-</template>
-
-<style scoped>
-/* 确保图标渲染更平滑 */
-svg {
-  shape-rendering: geometricPrecision;
-}
-</style>
+
+    <AlertDialog v-model="showAlertDialog" :message="alertMessage" />
+</template>

package/dist/src-vue/iPhone/index.ts

@@ -1,31 +1,27 @@
 import Basic from './Basic.vue';
-import WeatherApp from './WeatherApp.vue';
 import NoFrame from './NoFrame.vue';
 import CustomBackground from './CustomBackground.vue';
 import BasicSource from './Basic.vue?raw';
 import NoFrameSource from './NoFrame.vue?raw';
 import CustomBackgroundSource from './CustomBackground.vue?raw';
-import WeatherAppSource from './WeatherApp.vue?raw';
-import { extractSimpleExample } from '../../utils/component';
+import { extractSimpleExample } from '../utils/component';
 
 // 导出主组件
 export { default as iPhoneWindow } from './iPhoneWindow.vue';
 
 // 将示例组件整合为一个对象导出
 export const iPhoneWindowExamples = {
-  Basic,
-  WeatherApp,
-  NoFrame,
-  CustomBackground,
+    Basic,
+    NoFrame,
+    CustomBackground,
 };
 
 // 导出示例组件的源代码（简化版本）
 export const iPhoneWindowExampleCodes = {
-  Basic: extractSimpleExample(BasicSource, 'iPhoneWindow'),
-  NoFrame: extractSimpleExample(NoFrameSource, 'iPhoneWindow'),
-  CustomBackground: extractSimpleExample(
-    CustomBackgroundSource,
-    'iPhoneWindow'
-  ),
-  WeatherApp: extractSimpleExample(WeatherAppSource, 'iPhoneWindow'),
+    Basic: extractSimpleExample(BasicSource, 'iPhoneWindow'),
+    NoFrame: extractSimpleExample(NoFrameSource, 'iPhoneWindow'),
+    CustomBackground: extractSimpleExample(
+        CustomBackgroundSource,
+        'iPhoneWindow'
+    ),
 };

package/dist/src-vue/icons/IPhoneBatteryIcon.vue

@@ -0,0 +1,7 @@
+<template>
+    <svg width="100%" height="100%" viewBox="0 0 25 12" fill="none" stroke="currentColor" style="display: block;">
+        <rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke-width="1" />
+        <rect x="2" y="2" width="18" height="8" rx="1" fill="currentColor" />
+        <path d="M23 4h1a1 1 0 011 1v2a1 1 0 01-1 1h-1V4z" fill="currentColor" />
+    </svg>
+</template>

package/dist/src-vue/icons/IPhoneSignalIcon.vue

@@ -0,0 +1,6 @@
+<template>
+    <svg width="100%" height="100%" viewBox="0 0 20 12" fill="none" stroke="currentColor" style="display: block;">
+        <path d="M1 11h2V6H1v5zm4 0h2V4H5v7zm4 0h2V2H9v9zm4 0h2V0h-2v11z" fill="currentColor" />
+        <path d="M17 11h2V0h-2v11z" fill="currentColor" opacity="0.4" />
+    </svg>
+</template>

package/dist/src-vue/icons/IPhoneWifiIcon.vue

@@ -0,0 +1,6 @@
+<template>
+    <svg width="100%" height="100%" viewBox="0 0 16 12" fill="currentColor" style="display: block;">
+        <path d="M8 10.5a1 1 0 100-2 1 1 0 000 2zM4.25 7.25a5 5 0 017.5 0l-1.06 1.06a3.5 3.5 0 00-5.38 0L4.25 7.25z" />
+        <path d="M1.75 4.75a8.5 8.5 0 0112.5 0l-1.06 1.06a7 7 0 00-10.38 0L1.75 4.75z" />
+    </svg>
+</template>

package/dist/src-vue/icons/index.ts

@@ -17,3 +17,6 @@ export { default as SuccessIcon } from './SuccessIcon.vue';
 export { default as UserIcon } from './UserIcon.vue';
 export { default as WarningIcon } from './WarningIcon.vue';
 export { default as XCircleIcon } from './XCircleIcon.vue';
+export { default as IPhoneSignalIcon } from './IPhoneSignalIcon.vue';
+export { default as IPhoneWifiIcon } from './IPhoneWifiIcon.vue';
+export { default as IPhoneBatteryIcon } from './IPhoneBatteryIcon.vue';