# Windows Web

**Repository Path**: biaoge-top/windows-web

## Basic Information

- **Project Name**: Windows Web
- **Description**: Windows Web 是一款创新的网页窗口化工具，它允许开发者和用户将任意网页转换为可拖动、可调整大小的独立窗口，提供类似桌面应用的使用体验。
- **Primary Language**: Unknown
- **License**: AFL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-01-30
- **Last Updated**: 2026-01-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Windows Web 开发文档

## 1. 项目概述

Windows Web 是一款创新的网页窗口化工具，它允许开发者和用户将任意网页转换为可拖动、可调整大小的独立窗口，提供类似桌面应用的使用体验。

![输入图片说明](image.png)

### 1.1 核心价值
- **多窗口管理**：在单个浏览器标签页中创建和管理多个独立网页窗口
- **桌面化体验**：提供类似操作系统窗口的交互体验
- **高度定制**：支持窗口拖动、调整大小、最小化、最大化等操作
- **跨平台兼容**：基于纯 JavaScript 实现，无需安装插件

### 1.2 应用场景
- **多任务并行**：同时查看多个网页内容而不切换标签页
- **网页组件化**：将大型网页拆分为多个独立窗口进行管理
- **开发调试**：在开发过程中同时查看多个相关页面
- **教育教学**：同时展示多个参考资料

## 2. 核心功能

### 2.1 窗口管理
- **创建窗口**：通过 `winweb(url)` 函数快速创建网页窗口
- **窗口拖动**：支持通过顶部拖拽区域移动窗口
- **大小调整**：支持通过右下角调整窗口大小
- **最小化**：将窗口最小化为右侧的彩色图标按钮
- **最大化**：将窗口扩展为全屏显示
- **关闭窗口**：完全移除窗口及其相关资源

### 2.2 智能布局
- **自适应屏幕**：根据屏幕宽高比例自动调整初始窗口大小
  - 宽屏模式（宽度 > 高度×2）：高度 90vh，宽度 135vh
  - 竖屏模式（高度 > 宽度×2）：宽度 90vw，高度 135vw
  - 正常模式：宽度 80vw，高度 80vh
- **多窗口排列**：最小化窗口时在右侧垂直排列，自动调整位置

### 2.3 视觉设计
- **美观界面**：模仿现代操作系统窗口风格
- **彩色图标**：最小化窗口时生成随机明亮背景颜色的图标
- **响应式设计**：适应不同屏幕尺寸和分辨率

### 2.4 网页集成
- **标题自动获取**：通过 API 自动获取网页标题并显示在窗口顶部
- **iframe 加载**：使用 iframe 加载目标网页
- **错误处理**：当 iframe 加载失败时自动在新标签页打开

## 3. 技术实现

### 3.1 核心架构
- **面向对象设计**：使用 ES6 类封装窗口功能
- **单例模式**：通过静态属性管理多窗口实例
- **事件驱动**：基于 DOM 事件实现交互功能

### 3.2 关键技术

#### 3.2.1 窗口创建与管理
```javascript
class WindowsWeb {
    static minimizedWindows = [];
    static instanceCount = 0;
    
    constructor(url) {
        this.url = url;
        this.container = null;
        this.iframe = null;
        // ... 其他属性初始化
        this.instanceId = ++WindowsWeb.instanceCount;
        this.init();
    }
    
    init() {
        this.createContainer();
        this.addEventListeners();
        this.fetchTitle();
    }
}
```

#### 3.2.2 窗口拖动实现
```javascript
handleMouseDown(e) {
    if (this.isMinimized) return;
    
    this.isDragging = true;
    this.startX = e.clientX;
    this.startY = e.clientY;
    
    const rect = this.container.getBoundingClientRect();
    this.winwebX = rect.left;
    this.winwebY = rect.top;
}

handleMouseMove(e) {
    if (!this.isDragging) return;
    
    const dx = e.clientX - this.startX;
    const dy = e.clientY - this.startY;
    
    this.container.style.position = 'absolute';
    this.container.style.left = (this.winwebX + dx) + 'px';
    this.container.style.top = (this.winwebY + dy) + 'px';
    this.container.style.transform = 'none';
}
```

#### 3.2.3 窗口大小调整
```javascript
handleResizeMouseDown(e) {
    if (this.isMinimized) return;
    
    this.isResizing = true;
    this.resizeStartX = e.clientX;
    this.resizeStartY = e.clientY;
    
    this.originalWidth = this.container.offsetWidth;
    this.originalHeight = this.container.offsetHeight;
    
    e.preventDefault();
}

handleResizeMouseMove(e) {
    if (!this.isResizing) return;
    
    const dx = e.clientX - this.resizeStartX;
    const dy = e.clientY - this.resizeStartY;
    
    const newWidth = this.originalWidth + dx;
    const newHeight = this.originalHeight + dy;
    
    if (newWidth > 200) {
        this.container.style.width = newWidth + 'px';
    }
    if (newHeight > 150) {
        this.container.style.height = newHeight + 'px';
    }
}
```

#### 3.2.4 最小化与恢复
```javascript
handleMinimize() {
    if (!this.isMinimized) {
        // 保存窗口状态
        this.originalSize.width = this.container.offsetWidth + 'px';
        this.originalSize.height = this.container.offsetHeight + 'px';
        this.originalSize.left = this.container.style.left || '';
        this.originalSize.top = this.container.style.top || '';
        this.originalSize.transform = this.container.style.transform || 'translate(-50%, -50%)';
        
        // 隐藏窗口并创建恢复按钮
        this.container.style.display = 'none';
        this.createRestoreButton();
        
        this.isMinimized = true;
    }
}

createRestoreButton() {
    // 生成随机明亮背景颜色
    const randomColor = this.generateRandomBrightColor();
    
    // 创建恢复按钮
    const restoreButton = document.createElement('div');
    restoreButton.id = 'winweb-restore-button-' + this.instanceId;
    restoreButton.innerHTML = '<i class="el-icon-menu"></i>';
    restoreButton.style.cssText = `
        width: 40px;
        height: 40px;
        position: fixed;
        right: 10px;
        top: ${10 + (WindowsWeb.minimizedWindows.length * 50)}px;
        border-radius: 50%;
        background-color: ${randomColor};
        // ... 其他样式
    `;
    
    // 添加点击事件
    restoreButton.addEventListener('click', this.handleRestore.bind(this));
    
    // 添加到页面和管理列表
    document.body.appendChild(restoreButton);
    WindowsWeb.minimizedWindows.push({
        instanceId: this.instanceId,
        button: restoreButton,
        instance: this
    });
}
```

### 3.3 技术栈
| 技术 | 版本 | 用途 |
|------|------|------|
| JavaScript (ES6+) | - | 核心逻辑实现 |
| DOM API | - | 页面元素操作 |
| Axios | - | 网络请求（获取网页标题） |
| Element UI Icons | - | 界面图标 |
| CSS3 | - | 样式设计 |

## 3. 创新性分析

### 3.1 技术创新

#### 3.1.1 多窗口管理机制
- **静态属性管理**：使用 `static minimizedWindows` 数组统一管理所有最小化窗口
- **实例化计数**：通过 `static instanceCount` 为每个窗口分配唯一 ID
- **自动排列算法**：最小化窗口时自动计算并调整图标位置

#### 3.1.2 响应式布局
- **动态尺寸计算**：根据屏幕宽高比例自动调整初始窗口大小
- **像素级精度**：使用 `offsetWidth` 和 `offsetHeight` 保存实际像素尺寸
- **transform 状态管理**：正确保存和恢复窗口的居中状态

#### 3.1.3 用户体验优化
- **随机彩色图标**：最小化窗口时生成随机明亮颜色的图标，提高辨识度
- **平滑过渡**：窗口状态切换时保持视觉一致性
- **错误处理**：iframe 加载失败时自动在新标签页打开

### 3.2 功能创新

#### 3.2.1 窗口状态持久化
- **完整状态保存**：最小化和最大化时保存窗口的完整状态（位置、大小、变换）
- **像素级恢复**：恢复窗口时使用实际像素值，确保精确还原
- **多窗口协同**：关闭或恢复窗口时自动调整其他最小化窗口的位置

#### 3.2.2 智能错误处理
- **iframe 错误捕获**：监听 iframe 的 error 事件并自动处理
- **备用打开方式**：加载失败时在新标签页打开，确保用户体验
- **资源清理**：关闭窗口时完全清理相关资源，避免内存泄漏

#### 3.2.3 开发者友好
- **简洁 API**：通过单个 `winweb(url)` 函数即可创建窗口
- **链式调用**：支持连续创建多个窗口
- **模块化设计**：代码结构清晰，易于扩展和维护

## 4. 架构设计

### 4.1 核心架构

```
┌────────────────────────────────────────────────────────────┐
│                       WindowsWeb                          │
├────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐        │
│  │  窗口创建   │  │  事件监听   │  │  状态管理   │        │
│  ├─────────────┤  ├─────────────┤  ├─────────────┤        │
│  │  createContainer() │ addEventListeners() │  静态属性  │
│  └─────────────┘  └─────────────┘  └─────────────┘        │
│                                                          │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐        │
│  │  窗口操作   │  │  窗口状态   │  │  错误处理   │        │
│  ├─────────────┤  ├─────────────┤  ├─────────────┤        │
│  │  handleMouseDown() │ handleFullscreen() │ handleIframeError() │
│  │  handleMouseMove() │ handleMinimize()  │                  │
│  │  handleResize()    │ handleRestore()   │                  │
│  │  handleClose()     │                  │                  │
│  └─────────────┘  └─────────────┘  └─────────────┘        │
│                                                          │
│  ┌─────────────┐  ┌─────────────┐                        │
│  │  工具方法   │  │  外部接口   │                        │
│  ├─────────────┤  ├─────────────┤                        │
│  │  generateRandomBrightColor() │ winweb(url)        │
│  │  rearrangeRestoreButtons()   │                      │
│  └─────────────┘  └─────────────┘                        │
└────────────────────────────────────────────────────────────┘
```

### 4.2 模块划分

| 模块 | 职责 | 核心方法 |
|------|------|----------|
| 窗口创建 | 创建窗口容器和内部结构 | `createContainer()` |
| 事件管理 | 绑定和处理各种交互事件 | `addEventListeners()` |
| 拖动系统 | 实现窗口拖动功能 | `handleMouseDown()`, `handleMouseMove()`, `handleMouseUp()` |
| 调整系统 | 实现窗口大小调整 | `handleResizeMouseDown()`, `handleResizeMouseMove()`, `handleResizeMouseUp()` |
| 状态管理 | 管理窗口的各种状态 | `handleFullscreen()`, `handleMinimize()`, `handleRestore()` |
| 最小化系统 | 管理最小化窗口和恢复按钮 | `createRestoreButton()`, `rearrangeRestoreButtons()` |
| 错误处理 | 处理 iframe 加载错误 | `handleIframeError()` |
| 标题系统 | 获取和显示网页标题 | `fetchTitle()` |

### 4.3 数据流

1. **初始化流程**
   - 用户调用 `winweb(url)`
   - 创建 `WindowsWeb` 实例
   - 根据屏幕比例计算初始窗口大小
   - 调用 `init()` 方法
   - 创建窗口容器和内部结构
   - 绑定事件监听器
   - 获取并显示网页标题

2. **交互流程**
   - 用户触发交互事件（拖动、点击等）
   - 事件监听器捕获事件并调用相应处理方法
   - 处理方法更新窗口状态和样式
   - 必要时触发状态变更通知

3. **状态变更流程**
   - 窗口状态发生变更（最小化、最大化等）
   - 保存原始状态
   - 更新窗口样式和显示
   - 必要时创建或移除相关元素

## 5. 代码结构

### 5.1 核心文件
- **index.js**：主文件，包含 `WindowsWeb` 类和 `winweb()` 函数

### 5.2 代码组织
```javascript
/**
 * Windows Web - 网页窗口化工具
 * 使用方法: winweb(url)
 * 示例: winweb('https://彪哥.top')
 */

class WindowsWeb {
    // 静态属性
    static minimizedWindows = [];
    static instanceCount = 0;
    
    // 构造函数
    constructor(url) {
        // 初始化属性
    }
    
    // 初始化方法
    init() {
        // 创建容器
        // 添加事件监听
        // 获取标题
    }
    
    // 容器创建
    createContainer() {
        // 创建主容器
        // 创建顶部栏
        // 创建主内容区域
        // 创建 iframe
        // 创建调整大小手柄
    }
    
    // 事件监听
    addEventListeners() {
        // 拖动功能
        // 调整大小功能
        // 按钮功能
        // 全局事件
        // iframe 事件
    }
    
    // 事件处理方法
    handleMouseDown(e) { /* ... */ }
    handleMouseMove(e) { /* ... */ }
    handleMouseUp() { /* ... */ }
    handleResizeMouseDown(e) { /* ... */ }
    handleResizeMouseMove(e) { /* ... */ }
    handleResizeMouseUp() { /* ... */ }
    
    // 按钮功能
    handleNewPage() { /* ... */ }
    handleFullscreen() { /* ... */ }
    handleMinimize() { /* ... */ }
    handleClose() { /* ... */ }
    
    // 最小化系统
    createRestoreButton() { /* ... */ }
    handleRestore() { /* ... */ }
    rearrangeRestoreButtons() { /* ... */ }
    
    // 工具方法
    generateRandomBrightColor() { /* ... */ }
    
    // 标题系统
    fetchTitle() { /* ... */ }
    handleIframeLoad() { /* ... */ }
    handleIframeError() { /* ... */ }
}

// 全局函数
function winweb(url) {
    return new WindowsWeb(url);
}

// 导出
if (typeof module !== 'undefined' && module.exports) {
    module.exports = winweb;
}
```

### 5.3 关键类和方法

#### 5.3.1 WindowsWeb 类
- **构造函数**：初始化窗口属性和状态
- **init()**：初始化窗口创建和事件绑定
- **createContainer()**：创建窗口的 DOM 结构
- **addEventListeners()**：绑定各种交互事件
- **handleFullscreen()**：处理窗口最大化和还原
- **handleMinimize()**：处理窗口最小化
- **handleRestore()**：恢复最小化的窗口
- **fetchTitle()**：获取网页标题

#### 5.3.2 全局函数
- **winweb(url)**：创建并返回新的 WindowsWeb 实例

## 6. 性能优化

### 6.1 性能考量

#### 6.1.1 内存管理
- **资源清理**：关闭窗口时完全移除所有相关元素和事件监听器
- **事件委托**：使用全局事件监听减少事件监听器数量
- **实例管理**：最小化窗口时正确管理实例引用

#### 6.1.2 渲染性能
- **CSS 优化**：使用 CSS 文本直接设置样式，减少 DOM 操作
- **批量更新**：避免频繁的样式计算和重排
- **按需创建**：只在需要时创建 DOM 元素

#### 6.1.3 网络性能
- **API 调用优化**：获取网页标题时使用 encodeURI 正确编码 URL
- **错误处理**：网络错误时优雅降级

### 6.2 优化策略

| 优化点 | 策略 | 效果 |
|--------|------|------|
| 事件监听 | 使用全局事件委托 | 减少事件监听器数量，提高性能 |
| DOM 操作 | 批量创建和添加元素 | 减少重排和重绘 |
| 内存管理 | 及时清理事件监听器和引用 | 避免内存泄漏 |
| 样式设置 | 使用 CSS 文本设置样式 | 减少多次样式属性设置 |
| 状态管理 | 集中管理窗口状态 | 提高代码可维护性 |

## 7. 使用方法

### 7.1 基本用法

#### 7.1.1 引入依赖
```html
<!-- 引入 axios（用于获取网页标题） -->
<script src="https://xn--kwrr8v.top/style/js/element-ui.js"></script>
<!-- 引入 Element UI 图标 -->
<link rel="stylesheet" href="https://xn--kwrr8v.top/style/css/element-ui.css">
<script src="https://xn--kwrr8v.top/style/js/vue.min.js"></script>
<!-- 引入 Windows Web -->
<script src="https://xn--kwrr8v.top/style/winweb/index.js"></script>
```

#### 7.1.2 创建窗口
```javascript
// 创建单个窗口
winweb('https://彪哥.top');

// 创建多个窗口
winweb('https://www.example.com');
winweb('https://www.google.com');
winweb('https://www.github.com');

// 链式调用
winweb('https://彪哥.top')
winweb('https://www.example.com');
```

### 7.2 高级用法

#### 7.2.1 窗口操作
- **拖动窗口**：点击并拖动窗口顶部的拖拽区域
- **调整大小**：拖动窗口右下角的调整手柄
- **最小化**：点击右上角的最小化按钮
- **最大化**：点击右上角的最大化按钮
- **关闭窗口**：点击右上角的关闭按钮
- **在新标签页打开**：点击顶部的新页面按钮

#### 7.2.2 最小化窗口管理
- **恢复窗口**：点击右侧的彩色图标按钮
- **多窗口排列**：多个最小化窗口会自动在右侧垂直排列
- **颜色区分**：每个最小化窗口都有独特的背景颜色

## 8. 兼容性与限制

### 8.1 浏览器兼容性
| 浏览器 | 版本 | 支持状态 |
|--------|------|----------|
| Chrome | 60+ | ✅ 完全支持 |
| Firefox | 55+ | ✅ 完全支持 |
| Safari | 12+ | ✅ 完全支持 |
| Edge | 79+ | ✅ 完全支持 |
| IE | 11- | ❌ 不支持 |

### 8.2 功能限制
- **跨域限制**：iframe 受浏览器跨域策略限制
- **性能影响**：创建大量窗口可能影响浏览器性能
- **内存消耗**：每个窗口都占用一定的内存资源
- **iframe 沙箱**：虽然添加了必要的权限，但仍可能限制某些功能

### 8.3 安全考量
- **iframe 沙箱**：使用 `sandbox` 属性限制 iframe 的权限
- **URL 编码**：使用 `encodeURI` 正确编码 URL 参数
- **网络请求**：使用 HTTPS 进行网络请求

## 9. 结论

Windows Web 是一款创新性的网页窗口化工具，它通过纯 JavaScript 实现了类似桌面操作系统的窗口管理体验，为网页浏览和多任务处理提供了全新的方式。

### 9.1 核心优势
- **创新性**：将桌面应用的窗口管理理念引入网页
- **易用性**：通过简单的 API 即可创建和管理窗口
- **灵活性**：支持丰富的窗口操作和自定义选项
- **扩展性**：模块化设计便于功能扩展和定制
- **兼容性**：基于标准 Web 技术，无需插件支持

### 9.2 应用价值
- **提升效率**：多窗口并行操作提高工作效率
- **改善体验**：桌面化交互体验更加直观友好
- **降低复杂度**：将复杂任务分解为多个独立窗口
- **促进创新**：为网页应用开发提供新的思路

### 9.3 未来展望
Windows Web 展示了网页应用的潜力，通过不断的技术创新和功能扩展，它有望成为网页多任务管理的标准解决方案，为用户提供更加高效、直观的网页使用体验。同时，它也为 Web 应用开发提供了新的思路和方法，推动 Web 技术向更加成熟和强大的方向发展。

## 10. 附录

### 10.1 API 参考

#### 10.1.1 全局函数
- **winweb(url)**：创建新的网页窗口
  - **参数**：`url` (string) - 要加载的网页 URL
  - **返回值**：WindowsWeb 实例

#### 10.1.2 实例方法
- **handleNewPage()**：在新标签页打开当前 URL
- **handleFullscreen()**：切换窗口全屏状态
- **handleMinimize()**：切换窗口最小化状态
- **handleClose()**：关闭窗口

### 10.2 常见问题

#### 10.2.1 窗口无法打开
- **问题**：调用 `winweb(url)` 后无反应
- **解决**：检查 URL 格式是否正确，确保网络连接正常

#### 10.2.2 窗口大小异常
- **问题**：窗口大小不符合预期
- **解决**：检查屏幕分辨率和浏览器窗口大小

#### 10.2.3 标题获取失败
- **问题**：窗口标题显示为默认值
- **解决**：检查网络连接，确保目标网站可访问

#### 10.2.4 多窗口卡顿
- **问题**：创建多个窗口后浏览器卡顿
- **解决**：减少同时打开的窗口数量，关闭不需要的窗口

### 10.3 开发建议

#### 10.3.1 代码风格    
- **命名规范**：使用驼峰命名法
- **注释规范**：为关键方法和复杂逻辑添加注释
- **代码组织**：按功能模块组织代码

#### 10.3.2 调试技巧
- **控制台日志**：使用 `console.log()` 输出关键信息
- **断点调试**：在关键方法中设置断点
- **性能分析**：使用浏览器开发工具分析性能

#### 10.3.3 部署建议
- **压缩代码**：生产环境中压缩 JavaScript 代码
- **缓存策略**：合理设置静态资源缓存
- **CDN 加速**：使用 CDN 加速静态资源加载

---

**Windows Web** - 重新定义网页多任务处理体验