MacWindow

简介

MacWindow 组件模拟 macOS 风格的应用窗口，包含标题栏、工具栏按钮、标签页和状态栏。适用于创建模拟桌面应用界面或代码编辑器等场景。

组件特性：

完整的 macOS 风格窗口外观，包含关闭、最小化、最大化按钮
支持标签页功能，可切换不同内容区域
提供工具栏和状态栏插槽，支持自定义内容
支持侧边栏布局，适合文件浏览器等应用
可自定义窗口高度和阴影效果
支持窗口操作事件回调

基础用法

最简单的窗口展示：

代码编辑器

窗口内容区域

---
/**
 * @component MacWindow.Basic
 *
 * @description
 * 基础MacWindow组件示例，展示最简单的窗口用法。
 */
import { MacWindow } from '@coffic/cosy-ui/vue';
---

<MacWindow title="代码编辑器">
  <div class="cosy:p-4">窗口内容区域</div>
</MacWindow>

带标签页的窗口

通过 tabs 属性添加标签页功能：

设置

当前选择的标签: 外观

<!--
@component MacWindow.WithTabs

@description
带标签页的MacWindow组件示例，展示标签页功能。
使用Vue的响应式特性来处理标签切换，无需手动DOM操作。
-->
<template>
    <MacWindow title="设置" :tabs="['通用', '外观', '高级']" :defaultTab="activeTab" :onTabClick="handleTabClick">
        <div class="cosy:p-4">
            <div>当前选择的标签: {{ activeTab }}</div>
        </div>
    </MacWindow>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { MacWindow } from '@coffic/cosy-ui/vue';

// 响应式状态
const activeTab = ref('外观');

// 处理标签点击事件
const handleTabClick = (tab: string) => {
    console.log('切换到标签:', tab);
    activeTab.value = tab;
};
</script>

窗口事件处理

通过事件回调函数处理窗口操作：

应用窗口

窗口内容区域

<!--
@component MacWindow.WithEvents

@description
带事件处理的MacWindow组件示例，展示窗口操作事件。
使用Vue的响应式特性来显示事件信息，而不是使用alert。
-->
<template>
    <MacWindow title="应用窗口" :tabs="['信息', '设置', '帮助']" :onTabClick="handleTabClick" :onCloseWindow="handleCloseWindow"
        :onMinimizeWindow="handleMinimizeWindow" :onMaximizeWindow="handleMaximizeWindow">
        <div class="cosy:p-4">
            <div class="cosy:space-y-2">
                <div class="cosy:font-medium">窗口内容区域</div>
                <div v-if="eventLog.length > 0" class="cosy:space-y-1">
                    <div class="cosy:text-sm cosy:text-base-content/70">最近事件：</div>
                    <div v-for="(event, index) in eventLog" :key="index"
                        class="cosy:text-xs cosy:bg-base-200 cosy:px-2 cosy:py-1 cosy:rounded">
                        {{ event }}
                    </div>
                </div>
            </div>
        </div>
    </MacWindow>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { MacWindow } from '@coffic/cosy-ui/vue';

// 响应式状态 - 事件日志
const eventLog = ref<string[]>([]);

// 添加事件到日志
const addEvent = (event: string) => {
    const timestamp = new Date().toLocaleTimeString();
    eventLog.value.unshift(`${timestamp} - ${event}`);
    // 只保留最近5个事件
    if (eventLog.value.length > 5) {
        eventLog.value = eventLog.value.slice(0, 5);
    }
};

// 处理标签点击事件
const handleTabClick = (tab: string) => {
    console.log('切换到标签:', tab);
    addEvent(`切换到标签: ${tab}`);
};

// 处理关闭窗口事件
const handleCloseWindow = () => {
    console.log('关闭窗口');
    addEvent('关闭窗口');
};

// 处理最小化窗口事件
const handleMinimizeWindow = () => {
    console.log('最小化窗口');
    addEvent('最小化窗口');
};

// 处理最大化窗口事件
const handleMaximizeWindow = () => {
    console.log('最大化窗口');
    addEvent('最大化窗口');
};
</script>

工具栏和状态栏

使用工具栏和状态栏插槽添加自定义功能：

文件浏览器

窗口内容区域

---
/**
 * @component MacWindow.WithToolbar
 *
 * @description
 * 带工具栏和状态栏的MacWindow组件示例，展示自定义工具栏功能。
 */
import { MacWindow } from '@coffic/cosy-ui/vue';
---

<MacWindow title="文件浏览器">
  <template #toolbar>
    <button
      class="cosy:btn cosy:btn-ghost cosy:btn-sm"
      onclick="console.log('搜索')">
      🔍
    </button>
    <button
      class="cosy:btn cosy:btn-ghost cosy:btn-sm"
      onclick="console.log('设置')">
      ⚙️
    </button>
  </template>

  <div class="cosy:p-4">窗口内容区域</div>

  <template #status>
    <div class="cosy:text-xs">就绪</div>
    <button
      class="cosy:btn cosy:btn-ghost cosy:btn-xs"
      onclick="console.log('信息')">
      ℹ️
    </button>
  </template>
</MacWindow>

侧边栏布局

使用侧边栏插槽创建文件浏览器风格的布局：

文件浏览器

主内容区域

---
/**
 * @component MacWindow.WithSidebar
 *
 * @description
 * 带侧边栏的MacWindow组件示例，展示文件浏览器风格的布局。
 */
import { MacWindow } from '@coffic/cosy-ui/vue';
---

<MacWindow title="文件浏览器">
  <template #sidebar>
    <div class="cosy:w-48 cosy:border-r cosy:border-base-300 cosy:p-2">
      <div class="cosy:font-medium cosy:mb-2">文件夹</div>
      <ul>
        <li
          class="cosy:py-1 cosy:px-2 hover:cosy:bg-base-200 cosy:rounded cosy:cursor-pointer">
          文档
        </li>
        <li
          class="cosy:py-1 cosy:px-2 hover:cosy:bg-base-200 cosy:rounded cosy:cursor-pointer">
          下载
        </li>
        <li
          class="cosy:py-1 cosy:px-2 hover:cosy:bg-base-200 cosy:rounded cosy:cursor-pointer">
          图片
        </li>
      </ul>
    </div>
  </template>
  <div class="cosy:p-4">主内容区域</div>
</MacWindow>

自定义高度

通过 height 属性自定义窗口高度：

终端

$ echo "Hello, World!"
Hello, World!
$ _

---
/**
 * @component MacWindow.CustomHeight
 *
 * @description
 * 自定义高度的MacWindow组件示例，展示终端风格的窗口。
 */
import { MacWindow } from '@coffic/cosy-ui/vue';
---

<MacWindow title="终端" height="cosy:h-64">
  <div class="cosy:p-4 cosy:bg-gray-900 cosy:text-green-400 cosy:font-mono">
    $ echo "Hello, World!"<br />
    Hello, World!<br />
    $ _
  </div>
</MacWindow>