@coffic/cosy-ui 0.8.24 → 0.8.26

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

@@ -63,8 +63,8 @@ iPhoneWindow 组件模拟 iPhone 设备的外观，包含状态栏、时间显
 @emits
 -->
 <script lang="ts">
-import '../../style.ts';
-import { AlertDialog } from '../../index-vue.ts';
+import '../../style';
+import { AlertDialog } from '../../index-vue';
 import { ref, defineComponent } from 'vue';
 import iphoneFrame from './assets/iPhone 14 Pro - Deep Purple - Portrait.png';
 import StatusBarContent from './StatusBarContent.vue';
@@ -83,148 +83,168 @@ const mainContentWidthAspectRatio = 1179 / iphoneFrameWidth;
 // 比例-总高度
 const mainContentHeightAspectRatio = 2556 / iphoneFrameHeight;
 // 比例-状态栏高度
-const iphoneFrameStatusBarHeightAspectRatio = iphoneFrameStatusBarHeight / iphoneFrameHeight;
+const iphoneFrameStatusBarHeightAspectRatio =
+  iphoneFrameStatusBarHeight / iphoneFrameHeight;
 // 比例-状态栏离上边框的距离
-const iphoneFrameStatusBarTopAspectRatio = iphoneFrameStatusBarTop / 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
+  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,
+  name: 'iPhoneWindow',
+  components: {
+    AlertDialog,
+    StatusBarContent,
+  },
+  props: {
+    height: {
+      type: String as () => HeightOption,
+      default: 'lg',
+      validator: (value: string) => {
+        return Object.keys(heightClasses).includes(value);
+      },
     },
-    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: '',
-        },
+    debug: {
+      type: Boolean,
+      default: false,
     },
-    setup(props) {
-        const showAlertDialog = ref(false);
-        const alertMessage = ref('');
-
-        // 计算当前高度的缩放比例
-        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,
-            iphoneFrame: (iphoneFrame as any).src || iphoneFrame,
-            heightClasses,
-            mainContentWidthAspectRatio,
-            mainContentHeightAspectRatio,
-            iphoneFrameWidth,
-            iphoneFrameHeight,
-            iphoneFrameStatusBarTop,
-            iphoneFrameStatusBarHeight,
-            iphoneFrameStatusBarHeightAspectRatio,
-            iphoneFrameStatusBarTopAspectRatio,
-            getScaleRatio,
-        };
+    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('');
+
+    // 计算当前高度的缩放比例
+    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,
+      iphoneFrame: (iphoneFrame as any).src || iphoneFrame,
+      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="iphoneFrame" 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 cosy:overflow-hidden']">
-                <slot />
-            </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="iphoneFrame"
+      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 cosy:overflow-hidden',
+        ]"
+      >
+        <slot />
+      </div>
     </div>
+  </div>
 
-    <AlertDialog v-model="showAlertDialog" :message="alertMessage" />
-</template>
+  <AlertDialog v-model="showAlertDialog" :message="alertMessage" />
+</template>

package/dist/src-vue/list/ListItem.vue

@@ -1,50 +1,95 @@
 <template>
-  <li
-    class="cosy:mb-2 cosy:rounded-md cosy:bg-base-300 cosy:p-2 cosy:flex cosy:items-center cosy:gap-3 cosy:hover:bg-accent/10 cosy:relative cosy:overflow-hidden"
+  <ListItemRing
+    v-if="animationType === 'ring'"
+    :loading="loading"
+    :duration="duration"
     @click="$emit('click')"
   >
-    <div
-      v-if="loading"
-      class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
-      :style="{ animationDuration: duration + 'ms' }"
-    ></div>
-    <div
-      class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3"
-    >
-      <slot />
-    </div>
-  </li>
+    <slot />
+  </ListItemRing>
+
+  <ListItemIconLeft
+    v-else-if="animationType === 'icon-left'"
+    :loading="loading"
+    :duration="duration"
+    @click="$emit('click')"
+  >
+    <slot />
+  </ListItemIconLeft>
+
+  <ListItemIconRight
+    v-else-if="animationType === 'icon-right'"
+    :loading="loading"
+    :duration="duration"
+    @click="$emit('click')"
+  >
+    <slot />
+  </ListItemIconRight>
+
+  <ListItemBreath
+    v-else-if="animationType === 'breath'"
+    :loading="loading"
+    :duration="duration"
+    @click="$emit('click')"
+  >
+    <slot />
+  </ListItemBreath>
+
+  <ListItemPulse
+    v-else-if="animationType === 'pulse'"
+    :loading="loading"
+    :duration="duration"
+    @click="$emit('click')"
+  >
+    <slot />
+  </ListItemPulse>
+
+  <ListItemGlow
+    v-else-if="animationType === 'glow'"
+    :loading="loading"
+    :duration="duration"
+    @click="$emit('click')"
+  >
+    <slot />
+  </ListItemGlow>
+
+  <!-- 默认使用 ring 动画 -->
+  <ListItemRing
+    v-else
+    :loading="loading"
+    :duration="duration"
+    @click="$emit('click')"
+  >
+    <slot />
+  </ListItemRing>
 </template>
 
 <script setup lang="ts">
-import { defineProps, withDefaults, defineEmits } from 'vue';
+import ListItemRing from './ListItemRing.vue';
+import ListItemIconLeft from './ListItemIconLeft.vue';
+import ListItemIconRight from './ListItemIconRight.vue';
+import ListItemBreath from './ListItemBreath.vue';
+import ListItemPulse from './ListItemPulse.vue';
+import ListItemGlow from './ListItemGlow.vue';
 
 withDefaults(
   defineProps<{
     loading?: boolean;
-    duration?: number; // 进度条动画时长，毫秒
+    duration?: number;
+    animationType?:
+      | 'ring'
+      | 'icon-left'
+      | 'icon-right'
+      | 'breath'
+      | 'pulse'
+      | 'glow';
   }>(),
   {
     loading: false,
-    duration: 1500,
+    duration: undefined,
+    animationType: 'ring',
   }
 );
 
 defineEmits(['click']);
 </script>
-
-<style scoped>
-.loading-bar {
-  width: 0%;
-  height: 100%;
-  animation: loading-bar-anim linear forwards;
-}
-@keyframes loading-bar-anim {
-  0% {
-    width: 0%;
-  }
-  100% {
-    width: 100%;
-  }
-}
-</style>

package/dist/src-vue/list/ListItemBreath.vue

@@ -0,0 +1,70 @@
+<template>
+  <li
+    :class="[
+      'cosy:mb-2 cosy:rounded-md cosy:bg-base-300 cosy:p-2 cosy:flex cosy:items-center cosy:gap-3 cosy:hover:bg-accent/10 cosy:relative cosy:overflow-hidden',
+      loading && !duration ? 'breath-anim' : '',
+    ]"
+    @click="$emit('click')"
+  >
+    <div v-if="loading">
+      <template v-if="duration">
+        <div
+          class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
+          :style="{ animationDuration: duration + 'ms' }"
+        ></div>
+      </template>
+    </div>
+    <div
+      class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3"
+    >
+      <slot />
+    </div>
+  </li>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    loading?: boolean;
+    duration?: number;
+  }>(),
+  {
+    loading: false,
+    duration: undefined,
+  }
+);
+
+defineEmits(['click']);
+</script>
+
+<style scoped>
+/* 背景色呼吸动画 */
+@keyframes breath {
+  0%,
+  100% {
+    background-color: rgb(55 65 81); /* base-300 等效颜色 */
+  }
+  50% {
+    background-color: rgb(139 92 246 / 0.3); /* accent 色彩 */
+  }
+}
+.breath-anim {
+  animation: breath 2s ease-in-out infinite;
+  background-color: rgb(55 65 81); /* 确保有初始背景色 */
+}
+
+/* 进度条动画 */
+.loading-bar {
+  width: 0%;
+  height: 100%;
+  animation: loading-bar-anim linear forwards;
+}
+@keyframes loading-bar-anim {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+</style>

package/dist/src-vue/list/ListItemGlow.vue

@@ -0,0 +1,75 @@
+<template>
+  <li
+    :class="[
+      'cosy:mb-2 cosy:rounded-md cosy:bg-base-300 cosy:p-2 cosy:flex cosy:items-center cosy:gap-3 cosy:hover:bg-accent/10 cosy:relative cosy:overflow-hidden',
+      loading && !duration ? 'glow-anim' : '',
+    ]"
+    @click="$emit('click')"
+  >
+    <div v-if="loading">
+      <template v-if="duration">
+        <div
+          class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
+          :style="{ animationDuration: duration + 'ms' }"
+        ></div>
+      </template>
+    </div>
+    <div
+      class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3"
+    >
+      <slot />
+    </div>
+  </li>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    loading?: boolean;
+    duration?: number;
+  }>(),
+  {
+    loading: false,
+    duration: undefined,
+  }
+);
+
+defineEmits(['click']);
+</script>
+
+<style scoped>
+/* 发光边框动画 */
+@keyframes glow {
+  0%,
+  100% {
+    border: 1px solid rgb(139 92 246 / 0.3);
+    box-shadow: 0 0 5px rgb(139 92 246 / 0.3);
+  }
+  50% {
+    border: 1px solid rgb(139 92 246 / 0.8);
+    box-shadow:
+      0 0 20px rgb(139 92 246 / 0.6),
+      0 0 30px rgb(139 92 246 / 0.4),
+      inset 0 0 10px rgb(139 92 246 / 0.2);
+  }
+}
+.glow-anim {
+  animation: glow 2s ease-in-out infinite;
+  border: 1px solid rgb(139 92 246 / 0.3); /* 确保有初始边框 */
+}
+
+/* 进度条动画 */
+.loading-bar {
+  width: 0%;
+  height: 100%;
+  animation: loading-bar-anim linear forwards;
+}
+@keyframes loading-bar-anim {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+</style>

package/dist/src-vue/list/ListItemIconLeft.vue

@@ -0,0 +1,63 @@
+<template>
+  <li
+    class="cosy:mb-2 cosy:rounded-md cosy:bg-base-300 cosy:p-2 cosy:flex cosy:items-center cosy:gap-3 cosy:hover:bg-accent/10 cosy:relative cosy:overflow-hidden"
+    @click="$emit('click')"
+  >
+    <div v-if="loading">
+      <template v-if="duration">
+        <div
+          class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
+          :style="{ animationDuration: duration + 'ms' }"
+        ></div>
+      </template>
+    </div>
+    <div
+      class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3"
+    >
+      <!-- 前置 loading 图标 -->
+      <div
+        v-if="loading && !duration"
+        class="cosy:flex-shrink-0 cosy:transform-none"
+        style="transform: none !important"
+      >
+        <div
+          class="cosy:loading cosy:loading-spinner cosy:loading-sm cosy:text-accent"
+        ></div>
+      </div>
+
+      <slot />
+    </div>
+  </li>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    loading?: boolean;
+    duration?: number;
+  }>(),
+  {
+    loading: false,
+    duration: undefined,
+  }
+);
+
+defineEmits(['click']);
+</script>
+
+<style scoped>
+/* 进度条动画 */
+.loading-bar {
+  width: 0%;
+  height: 100%;
+  animation: loading-bar-anim linear forwards;
+}
+@keyframes loading-bar-anim {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+</style>