@coffic/cosy-ui 0.6.8 → 0.6.12

package/dist/vue/FeatureCard.vue

@@ -0,0 +1,209 @@
+<template>
+  <component
+    :is="link ? 'a' : 'div'"
+    :href="link || undefined"
+    :target="link ? '_blank' : undefined"
+    :rel="link ? 'noopener noreferrer' : undefined"
+    :class="[
+      'card bg-base-100/10 backdrop-blur-lg p-8 transition-all duration-300 hover:-translate-y-1 shadow-lg',
+      {
+        'hover:bg-primary/15 cursor-pointer': link,
+        'cursor-default': !link
+      }
+    ]"
+  >
+    <div class="card-body p-0">
+      <div class="mb-4">
+        <component
+          :is="icon"
+          v-if="icon"
+          class="text-4xl text-base-content"
+        />
+        <component
+          :is="getPresetIcon"
+          v-else-if="presetIcon"
+          class="text-4xl text-base-content"
+        />
+        <div
+          v-else
+          class="text-4xl text-base-content"
+        >
+          {{ emoji }}
+        </div>
+      </div>
+      <h3 class="card-title text-lg font-medium text-base-content">
+        {{ title }}
+      </h3>
+      <p
+        v-if="description"
+        class="text-base-content/70"
+      >
+        {{ description }}
+      </p>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, type Component } from 'vue';
+import {
+    // 开发相关
+    RiGithubFill,
+    RiGitBranchLine,
+    RiTerminalBoxLine,
+    RiCommandLine,
+    RiCodeSSlashLine,
+    RiBracesLine,
+    RiDatabase2Line,
+    RiServerLine,
+    // 文档相关
+    RiBookOpenLine,
+    RiFileTextLine,
+    RiArticleLine,
+    RiDraftLine,
+    RiFileListLine,
+    // 媒体相关
+    RiImage2Line,
+    RiVideoLine,
+    RiMusic2Line,
+    RiPlayCircleLine,
+    RiMovieLine,
+    // 社交相关
+    RiUserLine,
+    RiTeamLine,
+    RiChat1Line,
+    RiMessage2Line,
+    RiShareLine,
+    // 工具相关
+    RiToolsLine,
+    RiSettings4Line,
+    RiDashboardLine,
+    RiAppsLine,
+    RiPlugLine,
+    // 安全相关
+    RiShieldLine,
+    RiLockLine,
+    RiKeyLine,
+    RiUserSettingsLine,
+    // 云服务相关
+    RiCloudLine,
+    RiUploadCloud2Line,
+    RiDownloadCloud2Line,
+    RiCloudOffLine,
+    // 设备相关
+    RiSmartphoneLine,
+    RiTabletLine,
+    RiComputerLine,
+    RiWifiLine,
+    // 数据相关
+    RiPieChartLine,
+    RiLineChartLine,
+    RiBarChartLine,
+    // AI/机器学习相关
+    RiRobot2Line,
+    RiBrainLine,
+    RiCpuLine,
+    // 其他常用
+    RiRocketLine,
+    RiLightbulbLine,
+    RiStarLine,
+    RiHeartLine,
+    RiThumbUpLine
+} from '@remixicon/vue';
+
+// 预设图标映射
+const presetIcons = {
+    // 开发类
+    github: RiGithubFill,
+    git: RiGitBranchLine,
+    terminal: RiTerminalBoxLine,
+    command: RiCommandLine,
+    code: RiCodeSSlashLine,
+    api: RiBracesLine,
+    database: RiDatabase2Line,
+    server: RiServerLine,
+
+    // 文档类
+    book: RiBookOpenLine,
+    file: RiFileTextLine,
+    article: RiArticleLine,
+    draft: RiDraftLine,
+    list: RiFileListLine,
+
+    // 媒体类
+    image: RiImage2Line,
+    video: RiVideoLine,
+    music: RiMusic2Line,
+    play: RiPlayCircleLine,
+    movie: RiMovieLine,
+
+    // 社交类
+    user: RiUserLine,
+    team: RiTeamLine,
+    chat: RiChat1Line,
+    message: RiMessage2Line,
+    share: RiShareLine,
+
+    // 工具类
+    tools: RiToolsLine,
+    settings: RiSettings4Line,
+    dashboard: RiDashboardLine,
+    apps: RiAppsLine,
+    plugin: RiPlugLine,
+
+    // 安全类
+    shield: RiShieldLine,
+    lock: RiLockLine,
+    key: RiKeyLine,
+    security: RiUserSettingsLine,
+
+    // 云服务类
+    cloud: RiCloudLine,
+    upload: RiUploadCloud2Line,
+    download: RiDownloadCloud2Line,
+    offline: RiCloudOffLine,
+
+    // 设备类
+    mobile: RiSmartphoneLine,
+    tablet: RiTabletLine,
+    computer: RiComputerLine,
+    wifi: RiWifiLine,
+
+    // 数据类
+    chart: RiPieChartLine,
+    line: RiLineChartLine,
+    bar: RiBarChartLine,
+    data: RiDatabase2Line,
+
+    // AI/机器学习类
+    robot: RiRobot2Line,
+    brain: RiBrainLine,
+    cpu: RiCpuLine,
+
+    // 其他常用
+    rocket: RiRocketLine,
+    idea: RiLightbulbLine,
+    star: RiStarLine,
+    heart: RiHeartLine,
+    like: RiThumbUpLine
+} as const;
+
+type PresetIconType = keyof typeof presetIcons;
+
+interface Props {
+    title: string;
+    description?: string;
+    link?: string;
+    emoji?: string;
+    icon?: Component; // 自定义图标组件
+    presetIcon?: PresetIconType; // 预设图标名称
+}
+
+const props = defineProps<Props>();
+
+// 获取预设图标组件
+const getPresetIcon = computed(() => {
+    if (!props.presetIcon) return null;
+    return presetIcons[props.presetIcon];
+});
+</script>

package/dist/vue/FeatureGroup.vue

@@ -0,0 +1,22 @@
+<template>
+  <div
+    data-type="feature-group"
+    class="flex mt-8 flex-col items-center container mx-auto justify-center my-2 gap-24 w-full"
+  >
+    <div
+      v-for="(component, index) in $slots.default?.() || []"
+      :key="index"
+      class="w-full relative group"
+    >
+      <div class="relative">
+        <BaseFeature :background-class-index="index">
+          <component :is="component" />
+        </BaseFeature>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import BaseFeature from './BannerBox.vue'
+</script>

package/dist/vue/ListItem.vue

@@ -0,0 +1,5 @@
+<template>
+  <li class="mb-2 rounded-md p-2 flex items-center gap-3 hover:bg-accent">
+    <slot />
+  </li>
+</template>

package/dist/vue/MacWindow.vue

@@ -0,0 +1,224 @@
+<!--
+@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',
+    components: {
+        AlertDialog
+    },
+    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>