多窗口管理 #

┌─────────────────────────────────────────────────────────────┐
│                      多窗口应用                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐        │
│  │  主窗口     │  │  设置窗口   │  │  详情窗口   │        │
│  │   main      │  │  settings   │  │   detail    │        │
│  │             │  │             │  │             │        │
│  │  主界面     │  │  配置页面   │  │  详情页面   │        │
│  └─────────────┘  └─────────────┘  └─────────────┘        │
│         │               │               │                  │
│         └───────────────┼───────────────┘                  │
│                         │                                  │
│                         ▼                                  │
│              ┌─────────────────────┐                       │
│              │    窗口管理器       │                       │
│              │  Window Manager     │                       │
│              └─────────────────────┘                       │
│                                                             │
└─────────────────────────────────────────────────────────────┘

// WindowManager.ts
import { WebviewWindow, WindowOptions } from '@tauri-apps/api/webviewWindow';

interface WindowConfig {
    label: string;
    options: WindowOptions;
    singleton?: boolean;
}

class WindowManager {
    private windows: Map<string, WebviewWindow> = new Map();
    private configs: Map<string, WindowConfig> = new Map();

    register(config: WindowConfig) {
        this.configs.set(config.label, config);
    }

    async open(label: string, data?: unknown) {
        const config = this.configs.get(label);
        if (!config) {
            throw new Error(`Window config not found: ${label}`);
        }

        // 单例窗口检查
        if (config.singleton) {
            const existing = await this.get(label);
            if (existing) {
                await existing.setFocus();
                if (data) {
                    await existing.emit('window-data', data);
                }
                return existing;
            }
        }

        // 创建新窗口
        const window = new WebviewWindow(label, config.options);
        this.windows.set(label, window);

        // 监听窗口关闭
        window.once('tauri://destroyed', () => {
            this.windows.delete(label);
        });

        // 发送初始数据
        if (data) {
            window.once('tauri://created', async () => {
                await window.emit('window-data', data);
            });
        }

        return window;
    }

    async get(label: string) {
        return WebviewWindow.getByLabel(label);
    }

    async close(label: string) {
        const window = await this.get(label);
        if (window) {
            await window.close();
        }
    }

    async closeAll() {
        const all = WebviewWindow.getAll();
        for (const window of all) {
            await window.close();
        }
    }

    async focus(label: string) {
        const window = await this.get(label);
        if (window) {
            await window.setFocus();
        }
    }
}

export const windowManager = new WindowManager();

// 注册窗口
windowManager.register({
    label: 'settings',
    options: {
        url: 'settings.html',
        title: 'Settings',
        width: 500,
        height: 600,
        center: true,
    },
    singleton: true,
});

windowManager.register({
    label: 'detail',
    options: {
        url: 'detail.html',
        title: 'Detail',
        width: 600,
        height: 400,
        center: true,
    },
    singleton: false,
});

// 打开设置窗口
await windowManager.open('settings');

// 打开详情窗口并传递数据
await windowManager.open('detail', { id: 123, name: 'Item' });

// 关闭窗口
await windowManager.close('detail');

// 关闭所有窗口
await windowManager.closeAll();

import { WebviewWindow } from '@tauri-apps/api/webviewWindow';

// 获取所有窗口
const windows = WebviewWindow.getAll();
console.log('All windows:', windows.map(w => w.label));

import { getCurrentWindow } from '@tauri-apps/api/window';

const currentWindow = getCurrentWindow();
console.log('Current window:', currentWindow.label);

import { WebviewWindow } from '@tauri-apps/api/webviewWindow';

const settingsWindow = await WebviewWindow.getByLabel('settings');
if (settingsWindow) {
    await settingsWindow.setFocus();
}

import { useState, useEffect } from 'react';
import { WebviewWindow } from '@tauri-apps/api/webviewWindow';

function WindowSwitcher() {
    const [windows, setWindows] = useState<WebviewWindow[]>([]);

    useEffect(() => {
        const updateWindows = () => {
            setWindows(WebviewWindow.getAll());
        };

        updateWindows();
        // 定期更新窗口列表
        const interval = setInterval(updateWindows, 1000);

        return () => clearInterval(interval);
    }, []);

    const focusWindow = async (label: string) => {
        const window = await WebviewWindow.getByLabel(label);
        if (window) {
            await window.setFocus();
        }
    };

    return (
        <div className="window-switcher">
            {windows.map((window) => (
                <button
                    key={window.label}
                    onClick={() => focusWindow(window.label)}
                >
                    {window.label}
                </button>
            ))}
        </div>
    );
}

import { useState } from 'react';
import { WebviewWindow } from '@tauri-apps/api/webviewWindow';

function WindowMenu() {
    const [isOpen, setIsOpen] = useState(false);

    const windows = WebviewWindow.getAll();

    const handleWindowClick = async (window: WebviewWindow) => {
        await window.setFocus();
        setIsOpen(false);
    };

    return (
        <div className="window-menu">
            <button onClick={() => setIsOpen(!isOpen)}>
                Window
            </button>
            
            {isOpen && (
                <ul className="window-list">
                    {windows.map((window) => (
                        <li key={window.label}>
                            <button onClick={() => handleWindowClick(window)}>
                                {window.label}
                            </button>
                        </li>
                    ))}
                </ul>
            )}
        </div>
    );
}

// WindowStateSync.ts
import { WebviewWindow } from '@tauri-apps/api/webviewWindow';
import { emit, listen } from '@tauri-apps/api/event';

class WindowStateSync {
    private state: Map<string, unknown> = new Map();

    async broadcast(key: string, value: unknown) {
        this.state.set(key, value);
        await emit('state-sync', { key, value });
    }

    async subscribe(callback: (key: string, value: unknown) => void) {
        return listen<{ key: string; value: unknown }>(
            'state-sync',
            (event) => {
                this.state.set(event.payload.key, event.payload.value);
                callback(event.payload.key, event.payload.value);
            }
        );
    }

    get(key: string) {
        return this.state.get(key);
    }
}

export const windowStateSync = new WindowStateSync();

// 主窗口：广播状态变更
await windowStateSync.broadcast('theme', 'dark');
await windowStateSync.broadcast('user', { name: 'Alice' });

// 其他窗口：监听状态变更
const unlisten = await windowStateSync.subscribe((key, value) => {
    console.log(`State updated: ${key} =`, value);
    if (key === 'theme') {
        applyTheme(value as string);
    }
});

import { emitTo, listen } from '@tauri-apps/api/event';

// 发送消息到指定窗口
async function sendToWindow(label: string, message: unknown) {
    await emitTo(label, 'window-message', message);
}

// 接收消息
await listen('window-message', (event) => {
    console.log('Received message:', event.payload);
});

// WindowMessenger.ts
import { emitTo, listen } from '@tauri-apps/api/event';

class WindowMessenger {
    private requestId = 0;

    async request<T>(
        targetLabel: string,
        action: string,
        data: unknown
    ): Promise<T> {
        const id = ++this.requestId;
        
        return new Promise((resolve, reject) => {
            const timeout = setTimeout(() => {
                reject(new Error('Request timeout'));
            }, 5000);

            listen<{ id: number; result: T }>(
                `response-${id}`,
                (event) => {
                    clearTimeout(timeout);
                    resolve(event.payload.result);
                }
            );

            emitTo(targetLabel, 'request', { id, action, data });
        });
    }

    async respond(requestId: number, targetLabel: string, result: unknown) {
        await emitTo(targetLabel, `response-${requestId}`, { id: requestId, result });
    }
}

export const messenger = new WindowMessenger();

// 发送请求
const result = await messenger.request<string>(
    'main',
    'get-config',
    { key: 'theme' }
);

// 处理请求
await listen('request', async (event) => {
    const { id, action, data } = event.payload;
    
    if (action === 'get-config') {
        const config = getConfig(data.key);
        await messenger.respond(id, 'settings', config);
    }
});

// 创建窗口时的钩子
const windowHooks = new Map<string, () => void>();

function registerWindowHook(label: string, hook: () => void) {
    windowHooks.set(label, hook);
}

async function createWindowWithHook(label: string, options: WindowOptions) {
    const window = new WebviewWindow(label, options);
    
    window.once('tauri://created', () => {
        const hook = windowHooks.get(label);
        if (hook) {
            hook();
        }
    });
    
    return window;
}

import { getCurrentWindow } from '@tauri-apps/api/window';

const window = getCurrentWindow();

await window.onCloseRequested(async (event) => {
    const confirmed = await showConfirmDialog(
        '确定要关闭吗？',
        '未保存的更改将丢失。'
    );
    
    if (!confirmed) {
        event.preventDefault();
    }
});

class WindowGroupManager {
    private groups: Map<string, Set<string>> = new Map();

    addToGroup(groupName: string, windowLabel: string) {
        if (!this.groups.has(groupName)) {
            this.groups.set(groupName, new Set());
        }
        this.groups.get(groupName)!.add(windowLabel);
    }

    removeFromGroup(groupName: string, windowLabel: string) {
        this.groups.get(groupName)?.delete(windowLabel);
    }

    async closeGroup(groupName: string) {
        const labels = this.groups.get(groupName);
        if (labels) {
            for (const label of labels) {
                await windowManager.close(label);
            }
        }
    }

    getGroupWindows(groupName: string) {
        return Array.from(this.groups.get(groupName) || []);
    }
}

export const groupManager = new WindowGroupManager();

// 添加窗口到分组
groupManager.addToGroup('editors', 'editor-1');
groupManager.addToGroup('editors', 'editor-2');
groupManager.addToGroup('editors', 'editor-3');

// 关闭整个分组
await groupManager.closeGroup('editors');

import { LogicalPosition } from '@tauri-apps/api/dpi';
import { WebviewWindow } from '@tauri-apps/api/webviewWindow';

async function tileWindows(windows: WebviewWindow[]) {
    const screenWidth = window.screen.width;
    const screenHeight = window.screen.height;
    const count = windows.length;
    
    const cols = Math.ceil(Math.sqrt(count));
    const rows = Math.ceil(count / cols);
    
    const windowWidth = screenWidth / cols;
    const windowHeight = screenHeight / rows;
    
    for (let i = 0; i < windows.length; i++) {
        const col = i % cols;
        const row = Math.floor(i / cols);
        
        await windows[i].setPosition(
            new LogicalPosition(col * windowWidth, row * windowHeight)
        );
        await windows[i].setSize(
            { width: windowWidth, height: windowHeight }
        );
    }
}

async function cascadeWindows(windows: WebviewWindow[]) {
    const offset = 30;
    
    for (let i = 0; i < windows.length; i++) {
        await windows[i].setPosition(
            new LogicalPosition(offset * i, offset * i)
        );
        await windows[i].setFocus();
    }
}

async function openSingletonWindow(label: string, options: WindowOptions) {
    const existing = await WebviewWindow.getByLabel(label);
    
    if (existing) {
        await existing.setFocus();
        return existing;
    }
    
    return new WebviewWindow(label, options);
}

class WindowPool {
    private pool: WebviewWindow[] = [];
    private maxSize: number;

    constructor(maxSize: number = 5) {
        this.maxSize = maxSize;
    }

    async acquire(options: WindowOptions): Promise<WebviewWindow> {
        if (this.pool.length > 0) {
            const window = this.pool.pop()!;
            await window.show();
            return window;
        }

        return new WebviewWindow(`pool-${Date.now()}`, options);
    }

    async release(window: WebviewWindow) {
        if (this.pool.length < this.maxSize) {
            await window.hide();
            this.pool.push(window);
        } else {
            await window.close();
        }
    }
}

function logAllWindows() {
    const windows = WebviewWindow.getAll();
    console.log('=== Window Status ===');
    windows.forEach(async (window) => {
        console.log({
            label: window.label,
            title: await window.title(),
            visible: await window.isVisible(),
            focused: await window.isFocused(),
        });
    });
}

import { listen } from '@tauri-apps/api/event';

// 追踪所有窗口事件
await listen('window-event', (event) => {
    console.log('Window event:', event);
});