MacWindow

Introduction

The MacWindow component simulates a macOS-style application window, including a title bar, toolbar buttons, tabs, and status bar. Suitable for creating simulated 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, suitable for file browsers and other applications
Customizable window height and shadow effects
Window operation event callback support
Multiple preset background color themes including default, primary, secondary, accent, neutral, info, success, warning, and error

Examples

Simplest window display:

代码编辑器-Astro版本

窗口内容区域

代码编辑器-Vue版本

窗口内容区域

---



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

<MacWindow title="代码编辑器-Astro版本">
  <PlaceHolder width="full" height="lg" padding="md">
    窗口内容区域
  </PlaceHolder>
</MacWindow>

<script setup>
import { MacWindow } from "@coffic/cosy-ui/vue";
</script>

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

Props

bgType

Background color theme type, supporting multiple preset colors.

默认背景窗口

这是使用默认背景色的 MacWindow 组件。

背景色：浅色主题，适合大多数场景。

主要背景窗口

这是使用主要背景的 MacWindow 组件。

背景色：主要主题背景，适合重要内容。

次要背景窗口

这是使用次要背景的 MacWindow 组件。

背景色：次要主题背景，适合辅助内容。

强调背景窗口

这是使用强调背景的 MacWindow 组件。

背景色：强调主题背景，适合突出显示。

中性背景窗口

这是使用中性背景的 MacWindow 组件。

背景色：中性主题背景，适合中性内容。

信息背景窗口

这是使用信息背景的 MacWindow 组件。

背景色：信息主题背景，适合提示信息。

成功背景窗口

这是使用成功背景的 MacWindow 组件。

背景色：成功主题背景，适合成功状态。

警告背景窗口

这是使用警告背景的 MacWindow 组件。

背景色：警告主题背景，适合警告状态。

错误背景窗口

这是使用错误背景的 MacWindow 组件。

背景色：错误主题背景，适合错误状态。

默认背景窗口

这是使用默认背景的 MacWindow 组件。

主要背景窗口

这是使用主要背景的 MacWindow 组件。

次要背景窗口

这是使用次要背景的 MacWindow 组件。

强调背景窗口

这是使用强调背景的 MacWindow 组件。

中性背景窗口

这是使用中性背景的 MacWindow 组件。

信息背景窗口

这是使用信息背景的 MacWindow 组件。

成功背景窗口

这是使用成功背景的 MacWindow 组件。

警告背景窗口

这是使用警告背景的 MacWindow 组件。

错误背景窗口

这是使用错误背景的 MacWindow 组件。

---



/**
 * @component MacWindow Default Background Example
 * @description 展示 MacWindow 组件的默认背景色
 */

import { MacWindow, PlaceHolder } from "@coffic/cosy-ui";
---

<MacWindow title="默认背景窗口" height="h-48">
  <PlaceHolder width="full" height="lg" padding="md">
    <p>这是使用默认背景色的 MacWindow 组件。</p>
    <p>背景色：浅色主题，适合大多数场景。</p>
  </PlaceHolder>
</MacWindow>

---



/**
 * @component MacWindow Primary Background Example
 * @description 展示 MacWindow 组件的主要背景色
 */

import { MacWindow, PlaceHolder } from "@coffic/cosy-ui";
---

<MacWindow title="主要背景窗口" height="h-48" bgType="primary">
  <PlaceHolder width="full" height="lg" padding="md">
    <p>这是使用主要背景的 MacWindow 组件。</p>
    <p>背景色：主要主题背景，适合重要内容。</p>
  </PlaceHolder>
</MacWindow>

---



/**
 * @component MacWindow Secondary Background Example
 * @description 展示 MacWindow 组件的次要背景色
 */

import { MacWindow, PlaceHolder } from "@coffic/cosy-ui";
---

<MacWindow title="次要背景窗口" height="h-48" bgType="secondary">
  <PlaceHolder width="full" height="lg" padding="md">
    <p>这是使用次要背景的 MacWindow 组件。</p>
    <p>背景色：次要主题背景，适合辅助内容。</p>
  </PlaceHolder>
</MacWindow>

---



/**
 * @component MacWindow Accent Background Example
 * @description 展示 MacWindow 组件的强调背景色
 */

import { MacWindow, PlaceHolder } from "@coffic/cosy-ui";
---

<MacWindow title="强调背景窗口" height="h-48" bgType="accent">
  <PlaceHolder width="full" height="lg" padding="md">
    <p>这是使用强调背景的 MacWindow 组件。</p>
    <p>背景色：强调主题背景，适合突出显示。</p>
  </PlaceHolder>
</MacWindow>

---



/**
 * @component MacWindow Neutral Background Example
 * @description 展示 MacWindow 组件的中性背景色
 */

import { MacWindow, PlaceHolder } from "@coffic/cosy-ui";
---

<MacWindow title="中性背景窗口" height="h-48" bgType="neutral">
  <PlaceHolder width="full" height="lg" padding="md">
    <p>这是使用中性背景的 MacWindow 组件。</p>
    <p>背景色：中性主题背景，适合中性内容。</p>
  </PlaceHolder>
</MacWindow>

---



/**
 * @component MacWindow Info Background Example
 * @description 展示 MacWindow 组件的信息背景色
 */

import { MacWindow, PlaceHolder } from "@coffic/cosy-ui";
---

<MacWindow title="信息背景窗口" height="h-48" bgType="info">
  <PlaceHolder width="full" height="lg" padding="md">
    <p>这是使用信息背景的 MacWindow 组件。</p>
    <p>背景色：信息主题背景，适合提示信息。</p>
  </PlaceHolder>
</MacWindow>

---



/**
 * @component MacWindow Success Background Example
 * @description 展示 MacWindow 组件的成功背景色
 */

import { MacWindow, PlaceHolder } from "@coffic/cosy-ui";
---

<MacWindow title="成功背景窗口" height="h-48" bgType="success">
  <PlaceHolder width="full" height="lg" padding="md">
    <p>这是使用成功背景的 MacWindow 组件。</p>
    <p>背景色：成功主题背景，适合成功状态。</p>
  </PlaceHolder>
</MacWindow>

---



/**
 * @component MacWindow Warning Background Example
 * @description 展示 MacWindow 组件的警告背景色
 */

import { MacWindow, PlaceHolder } from "@coffic/cosy-ui";
---

<MacWindow title="警告背景窗口" height="h-48" bgType="warning">
  <PlaceHolder width="full" height="lg" padding="md">
    <p>这是使用警告背景的 MacWindow 组件。</p>
    <p>背景色：警告主题背景，适合警告状态。</p>
  </PlaceHolder>
</MacWindow>

---



/**
 * @component MacWindow Error Background Example
 * @description 展示 MacWindow 组件的错误背景色
 */

import { MacWindow, PlaceHolder } from "@coffic/cosy-ui";
---

<MacWindow title="错误背景窗口" height="h-48" bgType="error">
  <PlaceHolder width="full" height="lg" padding="md">
    <p>这是使用错误背景的 MacWindow 组件。</p>
    <p>背景色：错误主题背景，适合错误状态。</p>
  </PlaceHolder>
</MacWindow>

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

<template>
    <MacWindow title="默认背景窗口" height="h-48" bgType="base-100">
        <PlaceHolder width="full" height="lg" padding="md">
            <p>这是使用默认背景的 MacWindow 组件。</p>
        </PlaceHolder>
    </MacWindow>
</template>

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

<template>
    <MacWindow title="主要背景窗口" height="h-48" bgType="primary">
        <PlaceHolder width="full" height="lg" padding="md">
            <p>这是使用主要背景的 MacWindow 组件。</p>
        </PlaceHolder>
    </MacWindow>
</template>

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

<template>
    <MacWindow title="次要背景窗口" height="h-48" bgType="secondary">
        <PlaceHolder width="full" height="lg" padding="md">
            <p>这是使用次要背景的 MacWindow 组件。</p>
        </PlaceHolder>
    </MacWindow>
</template>

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

<template>
    <MacWindow title="强调背景窗口" height="h-48" bgType="accent">
        <PlaceHolder width="full" height="lg" padding="md">
            <p>这是使用强调背景的 MacWindow 组件。</p>
        </PlaceHolder>
    </MacWindow>
</template>

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

<template>
    <MacWindow title="中性背景窗口" height="h-48" bgType="neutral">
        <PlaceHolder width="full" height="lg" padding="md">
            <p>这是使用中性背景的 MacWindow 组件。</p>
        </PlaceHolder>
    </MacWindow>
</template>

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

<template>
    <MacWindow title="信息背景窗口" height="h-48" bgType="info">
        <PlaceHolder width="full" height="lg" padding="md">
            <p>这是使用信息背景的 MacWindow 组件。</p>
        </PlaceHolder>
    </MacWindow>
</template>

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

<template>
    <MacWindow title="成功背景窗口" height="h-48" bgType="success">
        <PlaceHolder width="full" height="lg" padding="md">
            <p>这是使用成功背景的 MacWindow 组件。</p>
        </PlaceHolder>
    </MacWindow>
</template>

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

<template>
    <MacWindow title="警告背景窗口" height="h-48" bgType="warning">
        <PlaceHolder width="full" height="lg" padding="md">
            <p>这是使用警告背景的 MacWindow 组件。</p>
        </PlaceHolder>
    </MacWindow>
</template>

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

<template>
    <MacWindow title="错误背景窗口" height="h-48" bgType="error">
        <PlaceHolder width="full" height="lg" padding="md">
            <p>这是使用错误背景的 MacWindow 组件。</p>
        </PlaceHolder>
    </MacWindow>
</template>

height

Custom window height, supporting pixel values or percentages.

终端-Astro版本

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

自定义高度窗口

自定义高度示例

这个窗口使用了自定义高度 `h-32`，比默认的 `h-96` 要矮一些。

你可以通过 `height` 属性来调整窗口的高度。

---



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

<MacWindow title="终端-Astro版本" height="cosy:h-64">
  <PlaceHolder width="full" height="lg" padding="md">
    <div style="color: #10b981; font-family: monospace;">
      $ echo "Hello, World!"<br />
      Hello, World!<br />
      $ _
    </div>
  </PlaceHolder>
</MacWindow>

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

<template>
    <MacWindow title="自定义高度窗口" height="h-32" bgType="accent">
        <div style="padding: 1rem;">
            <h3 style="margin-bottom: 1rem; font-weight: 600;">自定义高度示例</h3>
            <p>这个窗口使用了自定义高度 `h-32`，比默认的 `h-96` 要矮一些。</p>
            <p>你可以通过 `height` 属性来调整窗口的高度。</p>
        </div>
    </MacWindow>
</template>

onClose

Window close event callback function.

应用窗口-Astro版本

窗口内容区域

onMinimize

Window minimize event callback function.

应用窗口-Astro版本

窗口内容区域

onMaximize

Window maximize event callback function.

应用窗口-Astro版本

窗口内容区域

tabs

Tab configuration, supporting multiple tab switching.

设置-Astro版本

外观设置内容

当前选择的标签: 外观

设置-Vue版本

当前选择的标签: 外观

---



/**
 * @component MacWindow.WithTabs
 *
 * @description
 * 带标签页的MacWindow组件示例，展示标签页功能。
 * 使用客户端JavaScript来处理标签切换。
 */
import { MacWindow, PlaceHolder } from "@coffic/cosy-ui";

const windowId = "with-tabs-window";
---

<MacWindow
  title="设置-Astro版本"
  tabs={['通用', '外观', '高级']}
  defaultTab="外观"
  id={windowId}>
  <div id="tab-通用" style="display: none;">
    <PlaceHolder width="full" height="lg" padding="md" background="base-200">
      <div>通用设置内容</div>
      <div style="margin-top: 0.5rem;">当前选择的标签: 通用</div>
    </PlaceHolder>
  </div>
  <div id="tab-外观">
    <PlaceHolder width="full" height="lg" padding="md" background="base-200">
      <div>外观设置内容</div>
      <div style="margin-top: 0.5rem;">当前选择的标签: 外观</div>
    </PlaceHolder>
  </div>
  <div id="tab-高级" style="display: none;">
    <PlaceHolder width="full" height="lg" padding="md" background="base-200">
      <div>高级设置内容</div>
      <div style="margin-top: 0.5rem;">当前选择的标签: 高级</div>
    </PlaceHolder>
  </div>
</MacWindow>

<script>
  // 标签切换逻辑
  document.addEventListener('DOMContentLoaded', () => {
    const windowElement = document.querySelector(
      '[data-window-id="with-tabs-window"]'
    );
    if (windowElement) {
      const tabButtons = windowElement.querySelectorAll('[data-tab]');
      tabButtons.forEach((button) => {
        button.addEventListener('click', (e) => {
          const clickedTab = (e.target as HTMLElement).getAttribute('data-tab');
          if (clickedTab) {
            console.log('切换到标签:', clickedTab);

            // 更新内容显示
            const tabContents = windowElement.querySelectorAll('[id^="tab-"]');
            tabContents.forEach((content) => {
              (content as HTMLElement).style.display = 'none';
            });

            const selectedContent = windowElement.querySelector(
              `#tab-${clickedTab}`
            );
            if (selectedContent) {
              (selectedContent as HTMLElement).style.display = 'block';
            }
          }
        });
      });
    }
  });
</script>

<!--
@component MacWindow.WithTabs

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

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

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

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

width

Window width, supporting Container component width property values: none, xs, sm, md, lg, xl, full.

小窗口

小宽度窗口内容

中等窗口

中等宽度窗口内容

大窗口

大宽度窗口内容

全宽窗口

全宽窗口内容

小窗口

小宽度窗口内容

中等窗口

中等宽度窗口内容

大窗口

大宽度窗口内容

全宽窗口

全宽窗口内容

---



import { MacWindow, PlaceHolder } from "@coffic/cosy-ui";
---

<MacWindow title="小窗口" width="sm" height="h-48">
  <PlaceHolder width="full" height="lg" padding="md">
    小宽度窗口内容
  </PlaceHolder>
</MacWindow>

---



import { MacWindow, PlaceHolder } from "@coffic/cosy-ui";
---

<MacWindow title="中等窗口" width="md" height="h-48">
  <PlaceHolder width="full" height="lg" padding="md">
    中等宽度窗口内容
  </PlaceHolder>
</MacWindow>

---



import { MacWindow, PlaceHolder } from "@coffic/cosy-ui";
---

<MacWindow title="大窗口" width="lg" height="h-48">
  <PlaceHolder width="full" height="lg" padding="md">
    大宽度窗口内容
  </PlaceHolder>
</MacWindow>

---



import { MacWindow, PlaceHolder } from "@coffic/cosy-ui";
---

<MacWindow title="全宽窗口" width="full" height="h-48">
  <PlaceHolder width="full" height="lg" padding="md">
    全宽窗口内容
  </PlaceHolder>
</MacWindow>

<template>
  <MacWindow title="小窗口" width="sm" height="h-48">
    <PlaceHolder width="full" height="lg" padding="md">
      小宽度窗口内容
    </PlaceHolder>
  </MacWindow>
</template>

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

<template>
  <MacWindow title="中等窗口" width="md" height="h-48">
    <PlaceHolder width="full" height="lg" padding="md">
      中等宽度窗口内容
    </PlaceHolder>
  </MacWindow>
</template>

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

<template>
  <MacWindow title="大窗口" width="lg" height="h-48">
    <PlaceHolder width="full" height="lg" padding="md">
      大宽度窗口内容
    </PlaceHolder>
  </MacWindow>
</template>

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

<template>
  <MacWindow title="全宽窗口" width="full" height="h-48">
    <PlaceHolder width="full" height="lg" padding="md">
      全宽窗口内容
    </PlaceHolder>
  </MacWindow>
</template>

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

Slots

default

Default slot for placing the main content of the window.

Sidebar slot for creating file browser-style layouts.

文件浏览器-Astro版本

主内容区域

文件浏览器-Vue版本

文件夹

📁 文档

📁 图片

📁 音乐

📁 视频

文件列表

📄document.pdf

📄report.docx

📄presentation.pptx

---



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

<MacWindow title="文件浏览器-Astro版本">
  <template #sidebar>
    <div
      style="width: 12rem; border-right: 1px solid #d1d5db; padding: 0.5rem;">
      <div style="font-weight: 500; margin-bottom: 0.5rem;">文件夹</div>
      <ul>
        <li
          style="padding: 0.25rem 0.5rem; border-radius: 0.25rem; cursor: pointer; margin-bottom: 0.25rem;">
          文档
        </li>
        <li
          style="padding: 0.25rem 0.5rem; border-radius: 0.25rem; cursor: pointer; margin-bottom: 0.25rem;">
          下载
        </li>
        <li
          style="padding: 0.25rem 0.5rem; border-radius: 0.25rem; cursor: pointer; margin-bottom: 0.25rem;">
          图片
        </li>
      </ul>
    </div>
  </template>
  <PlaceHolder width="full" height="lg" padding="md"> 主内容区域 </PlaceHolder>
</MacWindow>

<!--
@component MacWindow.WithSidebar

@description
带侧边栏的MacWindow组件示例，展示侧边栏插槽的使用。
-->
<template>
  <MacWindow title="文件浏览器-Vue版本">
    <div
      slot="sidebar"
      class="cosy:w-64 cosy:bg-base-200 cosy:border-r cosy:border-base-300"
    >
      <div class="cosy:p-4">
        <div class="cosy:font-medium cosy:mb-2">文件夹</div>
        <div class="cosy:space-y-1">
          <div
            class="cosy:text-sm cosy:px-2 cosy:py-1 cosy:rounded cosy:bg-base-100"
          >
            📁 文档
          </div>
          <div class="cosy:text-sm cosy:px-2 cosy:py-1 cosy:rounded">
            📁 图片
          </div>
          <div class="cosy:text-sm cosy:px-2 cosy:py-1 cosy:rounded">
            📁 音乐
          </div>
          <div class="cosy:text-sm cosy:px-2 cosy:py-1 cosy:rounded">
            📁 视频
          </div>
        </div>
      </div>
    </div>

    <div class="cosy:p-4">
      <div class="cosy:font-medium cosy:mb-4">文件列表</div>
      <div class="cosy:space-y-2">
        <div class="cosy:flex cosy:items-center cosy:space-x-2">
          <span class="cosy:text-lg">📄</span>
          <span class="cosy:text-sm">document.pdf</span>
        </div>
        <div class="cosy:flex cosy:items-center cosy:space-x-2">
          <span class="cosy:text-lg">📄</span>
          <span class="cosy:text-sm">report.docx</span>
        </div>
        <div class="cosy:flex cosy:items-center cosy:space-x-2">
          <span class="cosy:text-lg">📄</span>
          <span class="cosy:text-sm">presentation.pptx</span>
        </div>
      </div>
    </div>
  </MacWindow>
</template>

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

Toolbar slot for placing toolbar buttons and functionality.

文件浏览器-Astro版本

窗口内容区域

文件浏览器-Vue版本

窗口内容

就绪

---



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

<MacWindow title="文件浏览器-Astro版本">
  <template #toolbar>
    <button
      style="background: transparent; border: none; padding: 0.25rem 0.5rem; cursor: pointer;"
      onclick="console.log('搜索')">
      🔍
    </button>
    <button
      style="background: transparent; border: none; padding: 0.25rem 0.5rem; cursor: pointer;"
      onclick="console.log('设置')">
      ⚙️
    </button>
  </template>

  <PlaceHolder width="full" height="lg" padding="md">
    窗口内容区域
  </PlaceHolder>

  <template #status>
    <div style="font-size: 0.75rem;">就绪</div>
    <button
      style="background: transparent; border: none; padding: 0.125rem 0.25rem; cursor: pointer; font-size: 0.75rem;"
      onclick="console.log('信息')">
      ℹ️
    </button>
  </template>
</MacWindow>

<!--
@component MacWindow.WithToolbar

@description
带工具栏的MacWindow组件示例，展示工具栏和状态栏插槽的使用。
-->
<template>
  <MacWindow title="文件浏览器-Vue版本">
    <div slot="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>
    </div>

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

    <div slot="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>
    </div>
  </MacWindow>
</template>

<script setup lang="ts">
import { InfoIcon, MacWindow, SearchIcon, SettingsIcon } from "@coffic/cosy-ui/vue";
</script>