@coffic/cosy-ui 0.8.16 → 0.8.18

package/dist/src-vue/mac-window/MacWindow.vue

@@ -0,0 +1,262 @@
+<!--
+@component MacWindow
+
+@description
+MacWindow 组件模拟 macOS 风格的应用窗口，包含标题栏、工具栏按钮、标签页和状态栏。
+适用于创建模拟桌面应用界面或代码编辑器等场景。
+
+@usage
+基本用法：
+```vue
+<MacWindow title="代码编辑器">
+  <div>窗口内容</div>
+</MacWindow>
+```
+
+带标签页：
+```vue
+<template>
+  <MacWindow
+    title="设置"
+    :tabs="['通用', '外观', '高级']"
+    defaultTab="外观"
+    :onTabClick="(tab) => { 
+      activeTab = tab;
+      console.log('切换到标签:', tab);
+    }"
+  >
+    <div v-if="activeTab === '通用'">通用设置内容</div>
+    <div v-if="activeTab === '外观'">外观设置内容</div>
+    <div v-if="activeTab === '高级'">高级设置内容</div>
+  </MacWindow>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { MacWindow } from 'cosy-ui';
+
+const activeTab = ref('外观');
+</script>
+```
+
+带自定义事件处理：
+```vue
+<MacWindow 
+  title="文件浏览器"
+  :onCloseWindow="() => handleClose()"
+  :onTabClick="(tab) => handleTabChange(tab)"
+>
+  <div>窗口内容</div>
+</MacWindow>
+```
+
+带工具栏和状态栏：
+```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=[]] - 标签页字符串数组，如 ['标签1', '标签2', '标签3']
+@prop {String} [defaultTab=''] - 默认选中的标签页
+@prop {Function} [onCloseWindow=null] - 关闭窗口时调用的函数
+@prop {Function} [onMinimizeWindow=null] - 最小化窗口时调用的函数
+@prop {Function} [onMaximizeWindow=null] - 最大化窗口时调用的函数
+@prop {Function} [onTabClick=null] - 点击标签页时调用的函数，接收标签页值作为参数
+
+@slots
+@slot default - 窗口主要内容
+@slot sidebar - 侧边栏内容
+@slot toolbar - 工具栏内容，位于标题栏右侧
+@slot status - 状态栏内容，位于窗口底部
+
+@emits
+@emit {update:modelValue} - 切换标签页时触发，用于v-model
+-->
+
+<script lang="ts">
+import '../../style.ts';
+import AlertDialog from '../alert-dialog/AlertDialog.vue';
+import { ref, defineComponent, type PropType } from 'vue';
+
+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 PropType<string[]>,
+            default: () => [],
+        },
+        defaultTab: {
+            type: String,
+            default: '',
+        },
+        onCloseWindow: {
+            type: Function,
+            default: null,
+        },
+        onMinimizeWindow: {
+            type: Function,
+            default: null,
+        },
+        onMaximizeWindow: {
+            type: Function,
+            default: null,
+        },
+        onTabClick: {
+            type: Function,
+            default: null,
+        },
+    },
+    setup(props) {
+        const showAlertDialog = ref(false);
+        const alertMessage = ref('');
+        const activeTab = ref(props.defaultTab);
+
+        // 如果没有设置默认标签或默认标签不在tabs中，则选择第一个标签
+        if (
+            (!activeTab.value || !props.tabs.includes(activeTab.value)) &&
+            props.tabs.length > 0
+        ) {
+            activeTab.value = props.tabs[0] as string;
+        }
+
+        const handleCloseWindow = () => {
+            alertMessage.value = '关闭APP窗口（这是演示，不会真实操作）';
+            showAlertDialog.value = true;
+            if (props.onCloseWindow) {
+                props.onCloseWindow();
+            }
+        };
+
+        const handleMinimizeWindow = () => {
+            alertMessage.value = '最小化窗口（这是演示，不会真实操作）';
+            showAlertDialog.value = true;
+            if (props.onMinimizeWindow) {
+                props.onMinimizeWindow();
+            }
+        };
+
+        const handleMaximizeWindow = () => {
+            alertMessage.value = '最大化窗口（这是演示，不会真实操作）';
+            showAlertDialog.value = true;
+            if (props.onMaximizeWindow) {
+                props.onMaximizeWindow();
+            }
+        };
+
+        const handleTabClick = (tab: string) => {
+            activeTab.value = tab;
+            if (props.onTabClick) {
+                props.onTabClick(tab);
+            }
+        };
+
+        return {
+            showAlertDialog,
+            alertMessage,
+            activeTab,
+            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',
+                        activeTab === tab
+                            ? 'cosy:bg-base-100 cosy:text-base-content cosy:shadow'
+                            : 'cosy:text-base-content/70 hover:cosy:text-base-content',
+                    ]" @click="handleTabClick(tab)">
+                        {{ tab }}
+                    </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/src-vue/mac-window/index.ts

@@ -0,0 +1,2 @@
+// 导出主组件
+export { default as MacWindow } from './MacWindow.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffic/cosy-ui",
-  "version": "0.8.16",
+  "version": "0.8.18",
   "description": "An astro component library",
   "author": {
     "name": "nookery",
@@ -48,9 +48,19 @@
   },
   "type": "module",
   "peerDependencies": {
-    "astro": "^5.1.3"
+    "astro": "^5.1.3",
+    "vue": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "astro": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
   },
   "dependencies": {
+    "@remixicon/vue": "^4.6.0",
     "astro-integration-kit": "^0.18.0",
     "fs-extra": "^11.3.0",
     "html-to-image": "^1.11.13"

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

@@ -1 +0,0 @@
-export { default as VueCounter } from './VueCounter.vue';

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

@@ -1,143 +0,0 @@
-<!--
-@component iPhoneWindow.WeatherApp
-
-@description
-天气应用示例，展示一个更复杂的 iPhone 应用界面，包含标题栏、主内容区和底部导航。
-
-@usage
-```vue
-<iPhoneWindowExamples.WeatherApp />
-```
--->
-
-<script lang="ts">
-import '../../app.css';
-import { defineComponent } from 'vue';
-import iPhoneWindow from './iPhoneWindow.vue';
-
-export default defineComponent({
-  name: 'iPhoneWindowWeatherAppExample',
-  components: {
-    iPhoneWindow,
-  },
-});
-</script>
-
-<template>
-  <iPhoneWindow>
-    <div class="cosy:flex cosy:flex-col cosy:h-full">
-      <!-- 应用标题栏 -->
-      <div
-        class="cosy:bg-primary cosy:text-white cosy:px-4 cosy:py-3 cosy:flex cosy:items-center cosy:justify-between"
-      >
-        <h2 class="cosy:font-medium">天气预报</h2>
-        <button class="cosy:btn cosy:btn-ghost cosy:btn-sm cosy:p-1">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="cosy:h-5 cosy:w-5"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        </button>
-      </div>
-
-      <!-- 主要内容 -->
-      <div
-        class="cosy:flex-1 cosy:p-4 cosy:bg-gradient-to-b cosy:from-blue-400 cosy:to-blue-600"
-      >
-        <div class="cosy:text-center cosy:text-white">
-          <div class="cosy:text-5xl cosy:font-light cosy:mb-2">23°</div>
-          <div class="cosy:text-xl cosy:mb-4">晴朗</div>
-          <div class="cosy:text-sm cosy:opacity-90">上海市，今天</div>
-        </div>
-
-        <div
-          class="cosy:mt-8 cosy:bg-white/20 cosy:backdrop-blur-sm cosy:rounded-xl cosy:p-4"
-        >
-          <div
-            class="cosy:grid cosy:grid-cols-3 cosy:gap-4 cosy:text-center cosy:text-white"
-          >
-            <div>
-              <div class="cosy:text-sm cosy:opacity-80">湿度</div>
-              <div class="cosy:font-medium">68%</div>
-            </div>
-            <div>
-              <div class="cosy:text-sm cosy:opacity-80">风速</div>
-              <div class="cosy:font-medium">8 km/h</div>
-            </div>
-            <div>
-              <div class="cosy:text-sm cosy:opacity-80">能见度</div>
-              <div class="cosy:font-medium">10 km</div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 底部导航 -->
-      <div
-        class="cosy:bg-white cosy:border-t cosy:border-gray-200 cosy:flex cosy:justify-around cosy:py-2"
-      >
-        <button class="cosy:p-2 cosy:text-primary">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="cosy:h-6 cosy:w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
-            />
-          </svg>
-        </button>
-        <button class="cosy:p-2">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="cosy:h-6 cosy:w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-        </button>
-        <button class="cosy:p-2">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="cosy:h-6 cosy:w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-            />
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-  </iPhoneWindow>
-</template>

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

@@ -1,247 +0,0 @@
-<!--
-@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 '../../style.ts';
-import { AlertDialog } from '../../index-vue.ts';
-import { ref, onMounted, onUnmounted, defineComponent } from 'vue';
-// 导入内部图片资源
-import iphoneFrame from './assets/iPhone 14 Pro - Deep Purple - Portrait.png';
-
-export default defineComponent({
-  name: 'iPhoneWindow',
-  components: {
-    AlertDialog,
-  },
-  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');
-
-    // 获取图片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>
-          </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/src-vue/mac-window-vue/Basic.vue

@@ -1,9 +0,0 @@
-<script setup>
-import { MacWindow } from './index';
-</script>
-
-<template>
-  <MacWindow title="代码编辑器">
-    <div class="cosy:p-4">窗口内容区域</div>
-  </MacWindow>
-</template>