@coffic/cosy-ui 0.6.6 → 0.6.10

package/dist/vue/MacWindow.vue

@@ -0,0 +1,221 @@
+<!--
+@component MacWindow
+
+@description
+MacWindow 组件模拟 macOS 风格的应用窗口，包含标题栏、工具栏按钮、标签页和状态栏。
+适用于创建模拟桌面应用界面或代码编辑器等场景。
+
+@usage
+基本用法：
+```vue
+<MacWindow title="代码编辑器">
+  <div>窗口内容</div>
+</MacWindow>
+```
+
+带标签页：
+```vue
+<template>
+  <MacWindow
+    title="设置"
+    v-model="activeTab"
+    :tabs="[
+      { label: '通用', value: 'general' },
+      { label: '外观', value: 'appearance' },
+      { label: '高级', value: 'advanced' }
+    ]"
+  >
+    <div v-if="activeTab === 'general'">通用设置内容</div>
+    <div v-if="activeTab === 'appearance'">外观设置内容</div>
+    <div v-if="activeTab === 'advanced'">高级设置内容</div>
+  </MacWindow>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { MacWindow } from 'cosy-ui';
+
+const activeTab = ref('general');
+</script>
+```
+
+带工具栏和状态栏：
+```vue
+<MacWindow title="文件浏览器">
+<template #toolbar>
+    <button class="cosy:btn cosy:btn-ghost cosy:btn-sm">
+      <SearchIcon class="cosy:w-4 cosy:h-4" />
+    </button>
+    <button class="cosy:btn cosy:btn-ghost cosy:btn-sm">
+      <SettingsIcon class="cosy:w-4 cosy:h-4" />
+    </button>
+  </template>
+
+<div>窗口内容</div>
+
+<template #status>
+    <div class="cosy:text-xs">就绪</div>
+    <button class="cosy:btn cosy:btn-ghost cosy:btn-xs">
+      <InfoIcon class="cosy:w-4 cosy:h-4" />
+    </button>
+  </template>
+</MacWindow>
+```
+
+@props
+@prop {String} [height='h-96'] - 窗口高度
+@prop {String} [title=''] - 窗口标题
+@prop {Boolean} [withShadow=true] - 是否显示阴影效果
+@prop {Array} [tabs=[]] - 标签页数组，每个标签包含label和value属性
+@prop {String} [modelValue=''] - 当前选中的标签页value值，可使用v-model绑定
+
+@slots
+@slot default - 窗口主要内容
+@slot sidebar - 侧边栏内容
+@slot toolbar - 工具栏内容，位于标题栏右侧
+@slot status - 状态栏内容，位于窗口底部
+
+@emits
+@emit {close} - 点击关闭按钮时触发
+@emit {minimize} - 点击最小化按钮时触发
+@emit {maximize} - 点击最大化按钮时触发
+@emit {update:modelValue} - 切换标签页时触发，用于v-model
+-->
+
+<script lang="ts">
+import '../app.css'
+import AlertDialog from './AlertDialog.vue'
+import { ref, defineComponent } from 'vue'
+
+// 定义标签页类型
+interface Tab {
+    label: string;
+    value: string;
+}
+
+export default defineComponent({
+    name: 'MacWindow',
+    props: {
+        height: {
+            type: String,
+            default: 'h-96'
+        },
+        title: {
+            type: String,
+            default: ''
+        },
+        withShadow: {
+            type: Boolean,
+            default: true
+        },
+        tabs: {
+            type: Array as () => Tab[],
+            default: () => []
+        },
+        modelValue: {
+            type: String,
+            default: ''
+        }
+    },
+    emits: ['close', 'minimize', 'maximize', 'update:modelValue'],
+    setup(props, { emit }) {
+        const showAlertDialog = ref(false)
+        const alertMessage = ref('')
+
+        const handleCloseWindow = () => {
+            alertMessage.value = '关闭APP窗口（这是演示，不会真实操作）'
+            showAlertDialog.value = true
+            emit('close')
+        }
+
+        const handleMinimizeWindow = () => {
+            alertMessage.value = '最小化窗口（这是演示，不会真实操作）'
+            showAlertDialog.value = true
+            emit('minimize')
+        }
+
+        const handleMaximizeWindow = () => {
+            alertMessage.value = '最大化窗口（这是演示，不会真实操作）'
+            showAlertDialog.value = true
+            emit('maximize')
+        }
+
+        const handleTabClick = (value: string) => {
+            emit('update:modelValue', value)
+        }
+
+        return {
+            showAlertDialog,
+            alertMessage,
+            handleCloseWindow,
+            handleMinimizeWindow,
+            handleMaximizeWindow,
+            handleTabClick
+        }
+    }
+})
+</script>
+
+<template>
+    <div class="cosy:flex cosy:max-w-5xl cosy:mx-auto cosy:bg-base-100 cosy:relative cosy:rounded-2xl cosy:overflow-hidden"
+        :class="[
+            height,
+            withShadow ? 'cosy:shadow-lg' : ''
+        ]">
+        <!-- 窗口控制按钮 -->
+        <div
+            class="cosy:absolute cosy:top-0 cosy:left-0 cosy:right-0 cosy:flex cosy:items-center cosy:h-12 cosy:px-4 cosy:bg-base-200 cosy:border-b cosy:border-base-300">
+            <div class="cosy:flex cosy:items-center cosy:space-x-2">
+                <div class="cosy:w-3 cosy:h-3 cosy:rounded-full cosy:bg-error cosy:cursor-pointer hover:cosy:opacity-80 cosy:transition-opacity"
+                    @click="handleCloseWindow" />
+                <div class="cosy:w-3 cosy:h-3 cosy:rounded-full cosy:bg-warning cosy:cursor-pointer hover:cosy:opacity-80 cosy:transition-opacity"
+                    @click="handleMinimizeWindow" />
+                <div class="cosy:w-3 cosy:h-3 cosy:rounded-full cosy:bg-success cosy:cursor-pointer hover:cosy:opacity-80 cosy:transition-opacity"
+                    @click="handleMaximizeWindow" />
+            </div>
+            <div class="cosy:ml-6 cosy:text-sm cosy:font-medium cosy:text-base-content">
+                {{ title }}
+            </div>
+
+            <!-- 标签选择器 -->
+            <div v-if="tabs?.length" class="cosy:flex-1 cosy:flex cosy:justify-center">
+                <div class="cosy:inline-flex cosy:rounded-lg cosy:bg-base-300 cosy:p-1">
+                    <button v-for="(tab, index) in tabs" :key="index" :class="[
+                        'cosy:px-3 cosy:py-1 cosy:text-sm cosy:rounded-md cosy:transition-colors',
+                        modelValue === tab.value
+                            ? 'cosy:bg-base-100 cosy:text-base-content cosy:shadow'
+                            : 'cosy:text-base-content/70 hover:cosy:text-base-content'
+                    ]" @click="handleTabClick(tab.value)">
+                        {{ tab.label }}
+                    </button>
+                </div>
+            </div>
+
+            <!-- 工具栏插槽 -->
+            <div class="cosy:ml-auto cosy:flex cosy:items-center cosy:space-x-2">
+                <slot name="toolbar"></slot>
+            </div>
+        </div>
+
+        <!-- 主要内容区域 -->
+        <div class="cosy:flex-1 cosy:flex cosy:flex-col cosy:pt-12 cosy:h-full">
+            <div class="cosy:flex cosy:flex-1 cosy:h-full cosy:overflow-hidden">
+                <!-- 左侧栏插槽 -->
+                <slot name="sidebar" />
+
+                <!-- 主内容插槽 -->
+                <slot />
+            </div>
+
+            <!-- 底部状态栏 -->
+            <div v-if="$slots.status"
+                class="cosy:h-6 cosy:bg-base-200/95 cosy:border-t cosy:border-base-300 cosy:flex cosy:items-center cosy:justify-end cosy:px-4 cosy:text-sm">
+                <div class="cosy:flex cosy:items-center cosy:space-x-2">
+                    <slot name="status"></slot>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- AlertDialog 组件 -->
+    <AlertDialog v-model="showAlertDialog" :message="alertMessage" />
+</template>

package/dist/vue/SmartBanner.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import Banner from '../entities/Banner';
+import BannerBox from './BannerBox.vue';
+import FeatureCard from './FeatureCard.vue';
+
+defineProps({
+    lang: {
+        type: String,
+        default: 'en',
+        validator: (value: string) => ['en', 'zh-cn'].includes(value)
+    },
+    banner: {
+        type: Banner,
+        required: true
+    },
+    backgroundClassIndex: {
+        type: Number,
+        default: 0
+    }
+})
+</script>
+
+<template>
+    <BannerBox :background-class-index="backgroundClassIndex">
+        <div class="py-16 px-8 text-center w-full rounded-2xl" data-type="smart-banner">
+            <h2 class="text-4xl mb-4">
+                {{ banner.getTitle(lang) }}
+            </h2>
+
+            <p v-if="banner.getDescription(lang).length > 0" class="text-lg text-center max-w-2xl mx-auto">
+                {{ banner.getDescription(lang) }}
+            </p>
+
+            <div class="flex flex-row justify-center gap-8 mx-auto w-full mt-24">
+                <FeatureCard v-for="feature in banner.getFeatures()" :key="feature.getTitle(lang)"
+                    :emoji="feature.emoji" :title="feature.getTitle(lang)" :link="feature.link" />
+            </div>
+
+            <div class="mt-12">
+                <component :is="banner.getComponent()" v-if="banner.getComponent()"
+                    v-bind="banner.getComponentProps()" />
+            </div>
+        </div>
+    </BannerBox>
+</template>

package/dist/vue/SmartHero.vue

@@ -0,0 +1,94 @@
+<template>
+  <div
+    class="py-16 px-8 text-center w-full min-h-screen relative overflow-hidden
+               "
+  >
+    <div class="relative z-10  rounded-lg w-full h-full">
+      <template v-if="image.src">
+        <img
+          :src="image.src"
+          :alt="image.alt"
+          class="h-1/2 mx-auto mb-8 drop-shadow-xl"
+        >
+      </template>
+
+      <h2 class="text-4xl mb-4 animate-fade-up">
+        {{ title }}
+      </h2>
+      <p class="text-lg mb-12 text-center max-w-2xl mx-auto">
+        {{ description }}
+      </p>
+
+      <div class="my-12 w-full">
+        <slot name="app" />
+      </div>
+
+      <div class="flex flex-row justify-center gap-8 mx-auto w-full">
+        <a
+          v-for="link in links"
+          :key="link.text"
+          :href="link.href"
+          target="_blank"
+          class="px-6 py-3 rounded-lg bg-blue-600 text-white font-medium
+                           transition-all duration-300 ease-in-out
+                           hover:bg-blue-700 hover:shadow-lg hover:-translate-y-0.5
+                           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
+                           active:bg-blue-800 active:translate-y-0"
+        >
+          {{ link.text }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+interface Link {
+    text: string;
+    href: string;
+}
+
+defineProps({
+    title: {
+        type: String,
+        required: true
+    },
+    description: {
+        type: String,
+        required: true
+    },
+    image: {
+        type: Object,
+        required: false,
+        default: () => ({
+            src: '',
+            alt: ''
+        })
+    },
+    links: {
+        type: Array as PropType<Link[]>,
+        required: true,
+        default: () => []
+    }
+})
+</script>
+
+<style scoped>
+@keyframes fade-up {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.animate-fade-up {
+    animation: fade-up 0.8s ease-out forwards;
+}
+</style>

package/dist/vue/SmartLink.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{
+    href: string;
+    external?: boolean;
+    externalClass?: string;
+}>();
+</script>
+
+<template>
+  <a
+    :href="href"
+    :target="external ? '_blank' : undefined"
+    :rel="external ? 'noopener noreferrer' : undefined"
+    :class="{
+      'no-underline rounded-md p-1 transition-all duration-300 hover:text-primary/80': true,
+      [externalClass]: external
+    }"
+  >
+    <slot />
+  </a>
+</template>

package/dist/vue/TagList.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="flex flex-col gap-1 card bg-base-100 shadow-xl p-4 rounded-md">
+    <a
+      v-for="tag in tags"
+      :key="tag"
+      :href="`/blogs/tags/${tag}`"
+      class="badge badge-primary no-underline"
+    >
+      {{ tag }}
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+    props: {
+        tags: {
+            type: Array,
+            required: true
+        }
+    }
+}
+</script>

package/dist/vue/WildBanner.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="w-full px-8 z-50 mx-auto">
+    <div
+      class="mt-0 hero p-4 rounded-2xl bg-base-300/50 dark:bg-base-200/50 backdrop-blur-xl hover:shadow-2xl transform duration-100"
+    >
+      <div class="text-center hero-content">
+        <div class="max-w-md flex flex-row justify-center items-center mx-auto">
+          <p class="text-2xl md:text-3xl font-bold text-base-content">
+            <slot />
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/vue/iPhoneWindow.vue

@@ -0,0 +1,186 @@
+<!--
+@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>
+```
+
+@props
+@prop {String} [height='h-96'] - 窗口高度
+@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 '../app.css'
+import AlertDialog from './AlertDialog.vue'
+import { ref, onMounted, onUnmounted, defineComponent } from 'vue'
+
+export default defineComponent({
+    name: 'iPhoneWindow',
+    props: {
+        height: {
+            type: String,
+            default: 'h-96'
+        },
+        title: {
+            type: String,
+            default: ''
+        },
+        statusBarButtons: {
+            type: Array,
+            default: () => []
+        },
+        withShadow: {
+            type: Boolean,
+            default: true
+        },
+        showFrame: {
+            type: Boolean,
+            default: true
+        },
+        backgroundColor: {
+            type: String,
+            default: ''
+        }
+    },
+    setup() {
+        const showAlertDialog = ref(false)
+        const alertMessage = ref('')
+
+        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}`
+        }
+
+        // 设置定时器更新时间
+        let timeInterval: number
+        onMounted(() => {
+            updateTime()
+            timeInterval = window.setInterval(updateTime, 60000) // 每分钟更新一次
+        })
+
+        onUnmounted(() => {
+            if (timeInterval) {
+                clearInterval(timeInterval)
+            }
+        })
+
+        return {
+            showAlertDialog,
+            alertMessage,
+            currentTime
+        }
+    }
+})
+</script>
+
+<template>
+    <div class="cosy:relative cosy:w-full">
+        <div class="cosy:relative cosy:aspect-[9/19.5]">
+            <!-- iPhone 边框 (放在最底层) -->
+            <img v-if="showFrame"
+                src="/assets/iPhone 14 Pro/iPhone 14 Pro - Deep Purple - Portrait.imageset/iPhone 14 Pro - Deep Purple - Portrait.png"
+                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>
+                    </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>

package/dist/vue.ts

@@ -0,0 +1,14 @@
+export * from './vue/TagList.vue';
+export { default as AlertDialog } from './vue/AlertDialog.vue';
+export * from './vue/BannerBox.vue';
+export * from './vue/SmartHero.vue';
+export * from './vue/ConfirmDialog.vue';
+export * from './vue/FeatureButton.vue';
+export * from './vue/FeatureCard.vue';
+export * from './vue/FeatureGroup.vue';
+export { default as iPhoneWindow } from './vue/iPhoneWindow.vue';
+export * from './vue/ListItem.vue';
+export { default as MacWindow } from './vue/MacWindow.vue';
+export * from './vue/SmartBanner.vue';
+export * from './vue/SmartLink.vue';
+export * from './vue/WildBanner.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@coffic/cosy-ui",
-    "version": "0.6.6",
+    "version": "0.6.10",
     "description": "An astro component library",
     "author": {
         "name": "nookery",
@@ -25,7 +25,9 @@
     "main": "./dist/index.js",
     "exports": {
         ".": "./dist/index.js",
-        "./collection": "./dist/collection.js"
+        "./collection": "./dist/collection.js",
+        "./icons": "./dist/icons.js",
+        "./vue": "./dist/vue.js"
     },
     "files": [
         "dist",
@@ -45,8 +47,10 @@
         "astro": "^5.1.3"
     },
     "dependencies": {
+        "@remixicon/vue": "^4.6.0",
         "astro-integration-kit": "^0.18.0",
-        "fs-extra": "^11.3.0"
+        "fs-extra": "^11.3.0",
+        "html-to-image": "^1.11.13"
     },
     "devDependencies": {
         "@astrojs/check": "^0.9.4",