logo
English
导航

MacWindow

Introduction

The MacWindow component simulates a macOS-style application window with title bar, toolbar buttons, tabs, and status bar. It’s suitable for creating desktop application interfaces or code editors.

Component Features:

  • Complete macOS-style window appearance with close, minimize, and maximize buttons
  • Tab functionality support for switching between different content areas
  • Toolbar and status bar slots for custom content
  • Sidebar layout support, perfect for file browsers and similar applications
  • Customizable window height and shadow effects
  • Window operation event callbacks

Basic Usage

Simple window display:

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

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

Window with Tabs

Add tab functionality using the tabs property:

设置
当前选择的标签: 外观
 
<!--
@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>

Window Event Handling

Handle window operations through event callback functions:

应用窗口
窗口内容区域
 
<!--
@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>

Toolbar and Status Bar

Add custom functionality using toolbar and status bar slots:

文件浏览器
窗口内容区域
---
/**
 * @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>

Create file browser-style layout using the sidebar slot:

文件浏览器
主内容区域
---
/**
 * @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>

Custom Height

Customize window height using the height property:

终端
$ 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>