@coffic/cosy-ui 0.8.16 → 0.8.18

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

@@ -0,0 +1,234 @@
+<!--
+@component iPhoneWindow
+
+@description
+iPhoneWindow 组件模拟 iPhone 设备的外观，包含状态栏、时间显示和设备边框。
+适用于创建移动应用界面原型或展示移动端设计效果。
+
+@usage
+基本用法：
+```vue
+<iPhoneWindow>
+  <div>应用内容</div>
+</iPhoneWindow>
+```
+
+不显示边框：
+```vue
+<iPhoneWindow :showFrame="false">
+  <div>应用内容</div>
+</iPhoneWindow>
+```
+
+自定义背景色：
+```vue
+<iPhoneWindow backgroundColor="bg-blue-50">
+  <div>应用内容</div>
+</iPhoneWindow>
+```
+
+自定义高度：
+```vue
+<iPhoneWindow height="md">
+  <div>应用内容</div>
+</iPhoneWindow>
+```
+
+使用较大高度：
+```vue
+<iPhoneWindow height="2xl">
+  <div>应用内容</div>
+</iPhoneWindow>
+```
+
+@props
+@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] - 是否显示阴影效果
+@prop {Boolean} [showFrame=true] - 是否显示 iPhone 边框
+@prop {String} [backgroundColor=''] - 内容区域背景色
+
+@slots
+@slot default - 主要内容区域
+
+@emits
+-->
+<script lang="ts">
+import '../../style.ts';
+import { AlertDialog } from '../../index-vue.ts';
+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,
+        StatusBarContent,
+    },
+    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: '',
+        },
+    },
+    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,
+        };
+    },
+});
+</script>
+
+<template>
+    <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>
+
+    <AlertDialog v-model="showAlertDialog" :message="alertMessage" />
+</template>

package/dist/src-vue/{iPhone-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/ErrorIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Icon from './VueIcon.vue';
+
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: '24px',
+  color: 'currentColor',
+  class: '',
+});
+</script>
+
+<template>
+  <Icon name="xCircle" :size="size" :color="color" :class="props.class" />
+</template>

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/SuccessIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Icon from './VueIcon.vue';
+
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: '24px',
+  color: 'currentColor',
+  class: '',
+});
+</script>
+
+<template>
+  <Icon name="checkCircle" :size="size" :color="color" :class="props.class" />
+</template>

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

@@ -30,7 +30,7 @@ import { Icon } from 'cosy-ui';
 <script setup lang="ts">
 import '../../style.js';
 import { computed } from 'vue';
-import { iconData } from '../../assets/iconData';
+import { iconData } from '../../src/assets/iconData';
 
 interface Props {
   /**
@@ -69,8 +69,18 @@ const viewBox = computed(() => {
 </script>
 
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" :viewBox="viewBox" fill="none" :stroke="color"
-    stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :class="props.class">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    :viewBox="viewBox"
+    fill="none"
+    :stroke="color"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :class="props.class"
+  >
     <path v-if="icon" :d="icon.path" />
   </svg>
 </template>

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Icon from './VueIcon.vue';
+
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: '24px',
+  color: 'currentColor',
+  class: '',
+});
+</script>
+
+<template>
+  <Icon name="alertTriangle" :size="size" :color="color" :class="props.class" />
+</template>

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

@@ -1 +1,22 @@
-export { default as List } from './InfoIcon.vue';
+export { default as AlertTriangleIcon } from './AlertTriangleIcon.vue';
+export { default as CalendarIcon } from './CalendarIcon.vue';
+export { default as CheckIcon } from './CheckIcon.vue';
+export { default as CheckCircleIcon } from './CheckCircleIcon.vue';
+export { default as ChevronDownIcon } from './ChevronDownIcon.vue';
+export { default as ClipboardIcon } from './ClipboardIcon.vue';
+export { default as CloseIcon } from './CloseIcon.vue';
+export { default as ErrorIcon } from './ErrorIcon.vue';
+export { default as InboxArchiveIcon } from './InboxArchiveIcon.vue';
+export { default as InfoCircleIcon } from './InfoCircleIcon.vue';
+export { default as InfoIcon } from './InfoIcon.vue';
+export { default as LinkIcon } from './LinkIcon.vue';
+export { default as MenuIcon } from './MenuIcon.vue';
+export { default as SearchIcon } from './SearchIcon.vue';
+export { default as SettingsIcon } from './SettingsIcon.vue';
+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';