# windows-ui

**Repository Path**: yuumigift/windows-ui

## Basic Information

- **Project Name**: windows-ui
- **Description**: windows-ui
本项目基于 Vue3+ts 开发，模仿 Windows 界面，将原本的路由模式，改为桌面的应用程序模式，每个应用程序都可以最大化、最小化、关闭，窗口拖动等。

在 apps 文件夹下的.vue 文件，可自动识别为应用程序，在桌面配置好应用程序信息，即可通过点击桌面图标打开
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 26
- **Forks**: 3
- **Created**: 2023-09-25
- **Last Updated**: 2026-05-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

# windows-ui 🍒

![介绍](https://raw.githubusercontent.com/yuumigift/windows-ui/master/public/img/intro.png)

🍇🍇🍇 这是一个基于 Vue 3 + TypeScript + Vite 制作的 Windows 桌面风格前端项目。和普通网页不太一样，它把原本的页面切换，变成了更像桌面系统的打开方式，可以激活、最小化、关闭、拖拽，玩起来会更有“桌面”的感觉。

🍊🍊🍊 可以把它理解成一个“windows桌面壳 + 一堆有趣小应用”的组合仓库，而不是传统的多页面站点。现在里面已经放了不少小游戏和小实验，比如贪吃蛇、拼图、打雪仗、我的世界、坦克大战、百战天虫等等，后面会往里面塞更多好玩的东西。

## ✨ 特性

- 🖥️ 模拟 Windows 桌面交互体验，打开方式更像真的桌面
- 🥕 应用以窗口形式打开，支持激活、最小化、关闭
- 🧩 桌面图标和任务栏都由统一配置驱动，整理起来更省心
- ⚙️ 使用 `import.meta.glob` 动态加载 `src/apps/` 下的应用组件
- 🎮 很适合拿来放小游戏、小工具、前端实验和各种奇思妙想

## 🛠️ 技术栈

- Vue 3
- TypeScript
- Vite
- Vue Router
- VueUse
- Less
- Ant Design Vue / Element Plus（项目内按需使用）
- Three.js（部分 3D 应用）

## 🚀 快速开始

### 📦 安装依赖

```sh
pnpm install
```

> 项目使用 `pnpm@11.1.2`。如果安装时遇到 `ERR_PNPM_IGNORED_BUILDS`，需要检查本地的 pnpm build script 审批设置。

### ▶️ 启动开发环境

```sh
pnpm dev
```

默认开发地址：`http://localhost:1999`

### 🏗️ 生产构建

```sh
pnpm build
```

该命令会先执行 TypeScript 类型检查，再执行 Vite 构建。

### 👀 预览构建结果

```sh
pnpm preview
```

## 🗂️ 项目结构

```text
src/
  apps/                 内置应用目录
  components/system/    系统层组件（窗口、任务栏、右键菜单等）
  views/HomeView.vue    桌面主视图
  system.ts             全局应用/窗口状态管理
  router/               顶层路由
public/
  icon/                 桌面图标和任务栏图标资源
  img/                  说明图片等公共资源
```

## 🧠 核心机制

### 1. 🧷 桌面应用配置

桌面图标、窗口标题、图标资源这些信息，统一放在 `src/apps/config.ts` 里管理。想往桌面上加新应用，通常先来这里登记一下就对啦。

```ts
{
  title: "测试程序",
  vuePath: "MyTest/Index.vue",
  icon: "garden.png",
},
{
  title: "星空闪耀",
  vuePath: "Star/Index.vue",
  icon: "star.png",
},
```

### 2. 🔍 应用加载方式

系统会通过 `src/system.ts` 里的 `import.meta.glob("@/apps/**/*.vue")` 去动态匹配并加载应用组件。点击桌面图标后，会根据 `vuePath` 找到对应的组件，然后生成一个新的窗口实例。

这里有几个小地方要特别注意：

- `vuePath` 必须和实际文件路径完全一致
- 文件名大小写必须匹配
- 图标资源应放在 `public/icon/` 下

### 3. 🏛️ 系统层与应用层分离

- 系统壳层负责桌面、窗口、任务栏、右键菜单这些通用能力
- 每个应用独立放在 `src/apps/<AppName>/` 下，方便各自整理逻辑、资源和类型

## ➕ 如何新增一个桌面应用

想加一个新的桌面应用，通常走下面这几步就可以：

1. 在 `src/apps/` 下创建新的应用组件，例如 `src/apps/MyApp/Index.vue`
2. 如果有额外资源或类文件，放在该应用自己的目录下
3. 在 `src/apps/config.ts` 中注册应用信息
4. 将图标放到 `public/icon/` 中

示例：

```ts
{
  title: "我的应用",
  vuePath: "MyApp/Index.vue",
  icon: "my-app.png",
  width: 900,
  height: 600,
}
```

## 🧪 特殊脚本

有些应用自带本地服务端，用来支持联机或者实时功能。

### ❄️ 启动打雪仗服务端

```sh
pnpm snowball-server
```

### 🧨 启动百战天虫服务端

```sh
pnpm worms-server
```

## 🌐 部署说明

- 生产构建默认 `base` 为 `/windows_ui/`
- 可通过环境变量 `VITE_BASE_PATH` 覆盖部署基础路径

如果要部署到非根路径站点，记得先确认资源路径和访问基路径是不是和部署环境对得上，不然有些资源可能会找不到。

## 🎯 适合做什么

这个项目很适合用来装这些东西：

- 💼 带有桌面感交互的前端作品集
- 🕹️ 多个小游戏的集中展示壳层
- 🧫 前端实验项目集合
- 💡 模拟操作系统界面的创意作品

## 🤝 贡献

欢迎继续往这个仓库里塞新的应用、小游戏和系统交互功能。如果你准备提交修改，建议顺手说明一下这次改动主要影响的是哪一块：

- ⚙️ 系统壳层
- 🎮 某个具体应用
- 🚚 部署或构建配置

🍒🍒🍒 如果你也喜欢这种有一点点创意、又有一点点桌面味道的小项目，欢迎一起来玩。