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

---
/**
 * @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.WithEvents
 *
 * @description
 * 带事件处理的MacWindow组件示例，展示窗口操作事件。
 * 使用客户端JavaScript来处理事件和显示事件信息。
 */
import { MacWindow, PlaceHolder } from '@coffic/cosy-ui';

const windowId = 'with-events-window';
---

<MacWindow
  title="应用窗口-Astro版本"
  tabs={['信息', '设置', '帮助']}
  id={windowId}>
  <div id="tab-信息">
    <PlaceHolder width="full" height="lg" padding="md" background="base-200">
      <div style="display: flex; flex-direction: column; gap: 0.5rem;">
        <div style="font-weight: 500;">窗口内容区域</div>
        <div
          id="event-log"
          style="display: flex; flex-direction: column; gap: 0.25rem;">
          <div style="font-size: 0.875rem; opacity: 0.7;">最近事件：</div>
          <!-- 事件日志将通过 JavaScript 动态添加 -->
        </div>
      </div>
    </PlaceHolder>
  </div>
  <div id="tab-设置" style="display: none;">
    <PlaceHolder width="full" height="lg" padding="md" background="base-200">
      设置内容
    </PlaceHolder>
  </div>
  <div id="tab-帮助" style="display: none;">
    <PlaceHolder width="full" height="lg" padding="md" background="base-200">
      帮助内容
    </PlaceHolder>
  </div>
</MacWindow>

<script>
  // 事件日志管理
  let eventLog: string[] = [];

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

  // 更新事件日志显示
  function updateEventLog() {
    const eventLogElement = document.getElementById('event-log');
    if (eventLogElement) {
      // 直接使用 eventLogElement 作为容器，因为它已经有正确的类名
      const logContainer = eventLogElement;
      if (logContainer) {
        // 清除现有事件
        const existingEvents = logContainer.querySelectorAll('.event-item');
        existingEvents.forEach((event) => event.remove());

        // 添加新事件
        eventLog.forEach((event) => {
          const eventDiv = document.createElement('div');
          eventDiv.className = 'event-item';
          eventDiv.style.cssText =
            'font-size: 0.75rem; background-color: #e5e7eb; padding: 0.25rem 0.5rem; border-radius: 0.25rem;';
          eventDiv.textContent = event;
          logContainer.appendChild(eventDiv);
        });
      }
    }
  }

  // 窗口事件处理
  document.addEventListener('DOMContentLoaded', () => {
    const windowElement = document.querySelector(
      '[data-window-id="with-events-window"]'
    );
    if (windowElement) {
      // 监听窗口控制按钮点击 - 使用更通用的选择器
      const controlButtons = windowElement.querySelectorAll(
        'div[class*="bg-error"], div[class*="bg-warning"], div[class*="bg-success"]'
      );

      controlButtons.forEach((button) => {
        button.addEventListener('click', () => {
          const buttonClasses = button.className;
          if (buttonClasses.includes('bg-error')) {
            console.log('关闭窗口');
            addEvent('关闭窗口');
          } else if (buttonClasses.includes('bg-warning')) {
            console.log('最小化窗口');
            addEvent('最小化窗口');
          } else if (buttonClasses.includes('bg-success')) {
            console.log('最大化窗口');
            addEvent('最大化窗口');
          }
        });
      });

      // 监听标签切换
      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);
            addEvent(`切换到标签: ${clickedTab}`);
          }
        });
      });
    }
  });
</script>

---
/**
 * @component MacWindow.WithEvents
 *
 * @description
 * 带事件处理的MacWindow组件示例，展示窗口操作事件。
 * 使用客户端JavaScript来处理事件和显示事件信息。
 */
import { MacWindow, PlaceHolder } from '@coffic/cosy-ui';

const windowId = 'with-events-window';
---

<MacWindow
  title="应用窗口-Astro版本"
  tabs={['信息', '设置', '帮助']}
  id={windowId}>
  <div id="tab-信息">
    <PlaceHolder width="full" height="lg" padding="md" background="base-200">
      <div style="display: flex; flex-direction: column; gap: 0.5rem;">
        <div style="font-weight: 500;">窗口内容区域</div>
        <div
          id="event-log"
          style="display: flex; flex-direction: column; gap: 0.25rem;">
          <div style="font-size: 0.875rem; opacity: 0.7;">最近事件：</div>
          <!-- 事件日志将通过 JavaScript 动态添加 -->
        </div>
      </div>
    </PlaceHolder>
  </div>
  <div id="tab-设置" style="display: none;">
    <PlaceHolder width="full" height="lg" padding="md" background="base-200">
      设置内容
    </PlaceHolder>
  </div>
  <div id="tab-帮助" style="display: none;">
    <PlaceHolder width="full" height="lg" padding="md" background="base-200">
      帮助内容
    </PlaceHolder>
  </div>
</MacWindow>

<script>
  // 事件日志管理
  let eventLog: string[] = [];

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

  // 更新事件日志显示
  function updateEventLog() {
    const eventLogElement = document.getElementById('event-log');
    if (eventLogElement) {
      // 直接使用 eventLogElement 作为容器，因为它已经有正确的类名
      const logContainer = eventLogElement;
      if (logContainer) {
        // 清除现有事件
        const existingEvents = logContainer.querySelectorAll('.event-item');
        existingEvents.forEach((event) => event.remove());

        // 添加新事件
        eventLog.forEach((event) => {
          const eventDiv = document.createElement('div');
          eventDiv.className = 'event-item';
          eventDiv.style.cssText =
            'font-size: 0.75rem; background-color: #e5e7eb; padding: 0.25rem 0.5rem; border-radius: 0.25rem;';
          eventDiv.textContent = event;
          logContainer.appendChild(eventDiv);
        });
      }
    }
  }

  // 窗口事件处理
  document.addEventListener('DOMContentLoaded', () => {
    const windowElement = document.querySelector(
      '[data-window-id="with-events-window"]'
    );
    if (windowElement) {
      // 监听窗口控制按钮点击 - 使用更通用的选择器
      const controlButtons = windowElement.querySelectorAll(
        'div[class*="bg-error"], div[class*="bg-warning"], div[class*="bg-success"]'
      );

      controlButtons.forEach((button) => {
        button.addEventListener('click', () => {
          const buttonClasses = button.className;
          if (buttonClasses.includes('bg-error')) {
            console.log('关闭窗口');
            addEvent('关闭窗口');
          } else if (buttonClasses.includes('bg-warning')) {
            console.log('最小化窗口');
            addEvent('最小化窗口');
          } else if (buttonClasses.includes('bg-success')) {
            console.log('最大化窗口');
            addEvent('最大化窗口');
          }
        });
      });

      // 监听标签切换
      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);
            addEvent(`切换到标签: ${clickedTab}`);
          }
        });
      });
    }
  });
</script>

---
/**
 * @component MacWindow.WithEvents
 *
 * @description
 * 带事件处理的MacWindow组件示例，展示窗口操作事件。
 * 使用客户端JavaScript来处理事件和显示事件信息。
 */
import { MacWindow, PlaceHolder } from '@coffic/cosy-ui';

const windowId = 'with-events-window';
---

<MacWindow
  title="应用窗口-Astro版本"
  tabs={['信息', '设置', '帮助']}
  id={windowId}>
  <div id="tab-信息">
    <PlaceHolder width="full" height="lg" padding="md" background="base-200">
      <div style="display: flex; flex-direction: column; gap: 0.5rem;">
        <div style="font-weight: 500;">窗口内容区域</div>
        <div
          id="event-log"
          style="display: flex; flex-direction: column; gap: 0.25rem;">
          <div style="font-size: 0.875rem; opacity: 0.7;">最近事件：</div>
          <!-- 事件日志将通过 JavaScript 动态添加 -->
        </div>
      </div>
    </PlaceHolder>
  </div>
  <div id="tab-设置" style="display: none;">
    <PlaceHolder width="full" height="lg" padding="md" background="base-200">
      设置内容
    </PlaceHolder>
  </div>
  <div id="tab-帮助" style="display: none;">
    <PlaceHolder width="full" height="lg" padding="md" background="base-200">
      帮助内容
    </PlaceHolder>
  </div>
</MacWindow>

<script>
  // 事件日志管理
  let eventLog: string[] = [];

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

  // 更新事件日志显示
  function updateEventLog() {
    const eventLogElement = document.getElementById('event-log');
    if (eventLogElement) {
      // 直接使用 eventLogElement 作为容器，因为它已经有正确的类名
      const logContainer = eventLogElement;
      if (logContainer) {
        // 清除现有事件
        const existingEvents = logContainer.querySelectorAll('.event-item');
        existingEvents.forEach((event) => event.remove());

        // 添加新事件
        eventLog.forEach((event) => {
          const eventDiv = document.createElement('div');
          eventDiv.className = 'event-item';
          eventDiv.style.cssText =
            'font-size: 0.75rem; background-color: #e5e7eb; padding: 0.25rem 0.5rem; border-radius: 0.25rem;';
          eventDiv.textContent = event;
          logContainer.appendChild(eventDiv);
        });
      }
    }
  }

  // 窗口事件处理
  document.addEventListener('DOMContentLoaded', () => {
    const windowElement = document.querySelector(
      '[data-window-id="with-events-window"]'
    );
    if (windowElement) {
      // 监听窗口控制按钮点击 - 使用更通用的选择器
      const controlButtons = windowElement.querySelectorAll(
        'div[class*="bg-error"], div[class*="bg-warning"], div[class*="bg-success"]'
      );

      controlButtons.forEach((button) => {
        button.addEventListener('click', () => {
          const buttonClasses = button.className;
          if (buttonClasses.includes('bg-error')) {
            console.log('关闭窗口');
            addEvent('关闭窗口');
          } else if (buttonClasses.includes('bg-warning')) {
            console.log('最小化窗口');
            addEvent('最小化窗口');
          } else if (buttonClasses.includes('bg-success')) {
            console.log('最大化窗口');
            addEvent('最大化窗口');
          }
        });
      });

      // 监听标签切换
      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);
            addEvent(`切换到标签: ${clickedTab}`);
          }
        });
      });
    }
  });
</script>

---
/**
 * @component MacWindow.WithToolbar
 *
 * @description
 * 带工具栏和状态栏的MacWindow组件示例，展示自定义工具栏功能。
 */
import { MacWindow } from '@coffic/cosy-ui';
import { 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.WithSidebar
 *
 * @description
 * 带侧边栏的MacWindow组件示例，展示文件浏览器风格的布局。
 */
import { MacWindow } from '@coffic/cosy-ui';
import { 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>