WebOS Vue 组件库

基于 Vue 3 的桌面系统组件库，提供完整的桌面环境、窗口管理、应用程序管理等功能。

安装

yarn add @stread/web-os
# 或
npm install @stread/web-os

快速开始

作为 Vue 插件使用

import { createApp } from 'vue'
import WebOSPlugin from '@stread/web-os'
import '@stread/web-os/dist/web-os.css'
import App from './App.vue'

const app = createApp(App)

app.use(WebOSPlugin, {
  wallpaper: 'https://your-wallpaper-url.jpg'
})

app.mount('#app')

在组件中使用

<template>
  <web-os></web-os>
</template>

<script setup lang="ts">
import { AppHelper } from '@stread/web-os'

// 注册应用
AppHelper.registerApp({
  packageId: "com.example.app",
  name: '我的应用',
  icon: 'https://your-icon-url.svg'
})

AppHelper.registerApp({
  packageId: "com.example.editor",
  name: '编辑器',
  icon: 'https://editor-icon.svg',
  defaultMax: true  // 默认最大化
})
</script>

功能特性

• 🖥️ 完整桌面环境 - 仿 Windows 桌面体验
• 🪟 窗口管理 - 支持拖拽、缩放、最小化等
• 📱 应用管理 - 动态注册和管理应用
• 🎨 自定义壁纸 - 支持自定义背景
• 💻 Dock 栏 - 类似 macOS 的应用栏
• 🎯 TypeScript 支持 - 完整的类型定义

开发

项目使用 yarn 作为包管理器：

# 安装依赖
yarn install

# 开发模式（启动 playground）
yarn dev

# 构建库
yarn build

# 预览构建结果
yarn preview

技术栈

• Vue 3 - 主要框架
• TypeScript - 类型系统
• Pinia - 状态管理
• Vite - 构建工具

许可证

MIT