# ldesign-device

**Repository Path**: ldesign-v1/ldesign-device

## Basic Information

- **Project Name**: ldesign-device
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-09
- **Last Updated**: 2026-09-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LDesign Device

现代化设备检测与浏览器能力探测家族,为应用提供统一的设备类型识别、屏幕方向、断点、电池、网络、地理定位等能力。核心逻辑全部收敛在框架无关的 core 包,Vue 适配层只做响应式桥接。

## 📦 包结构

| 子包                                       | 名称                   | 职责                                                                    |
| ------------------------------------------ | ---------------------- | ----------------------------------------------------------------------- |
| [`packages/core`](packages/core/README.md) | `@composy/device-core` | 设备检测主实现层:`DeviceDetector`、模块注册表、事件系统、缓存与性能优化 |
| [`packages/vue`](packages/vue/README.md)   | `@composy/device-vue`  | Vue 3 适配层:插件、composables、指令与组件,复用 core 全部能力           |

## ✨ 核心能力

- **设备识别**:设备类型(mobile/tablet/desktop)、屏幕方向、像素比、操作系统与浏览器信息
- **模块化扩展**:媒体能力、方向锁定、Wake Lock 等以模块形式挂载,经统一模块注册表管理生命周期
- **Vue 全家桶**:`useDevice`
  等 15 个 composables、`v-device`/`v-battery`/`v-network`/`v-orientation`
  指令、`DeviceInfo`/`NetworkStatus` 组件
- **Engine 集成**:`createDeviceEnginePlugin` 对接引擎体系,自动安装同一份运行时
- **性能优化**:智能缓存、防抖监听、内存监控与错误安全模式

## 🚀 安装

只使用核心能力(框架无关):

```bash
pnpm add @composy/device-core
```

Vue 3 项目(自动携带 core):

```bash
pnpm add @composy/device-vue
```

## 🔨 快速开始

### 核心包:直接检测设备

```typescript
import { DeviceDetector } from '@composy/device-core'

const detector = new DeviceDetector({
  enableResize: true,
  enableOrientation: true,
  debounceDelay: 100,
  breakpoints: { mobile: 768, tablet: 1024 },
})

const device = detector.getDeviceInfo()
console.log(device.type) // 'mobile' | 'tablet' | 'desktop'

detector.on('deviceChange', info => {
  console.log('设备类型变化:', info.type)
})
```

完整配置项、事件列表与 API 参考见 [core README](packages/core/README.md)。

公共 API 分层和兼容性边界见 [Public API Inventory](PUBLIC-API.md)。

### Vue 包:插件接入

```typescript
import { createDevicePlugin } from '@composy/device-vue'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.use(createDevicePlugin({ enableResize: true }))
app.mount('#app')
```

安装后可在组件中使用 `useDevice()`、`$device` 全局属性、各类指令与组件,详见
[vue README](packages/vue/README.md)。

## 🏗️ 构建产物与验证

core 与 vue 统一由 `@composy/builder`(rolldown)生成 `dist`(UMD,含压缩 CDN 入口)、`es`、`esm`、`lib`
四类产物,构建链内置产物归一化与入口检查。

根包为私有 workspace 编排层,常用命令:

```bash
pnpm run build          # 顺序构建 core → vue
pnpm run type-check     # 两子包类型检查
pnpm run lint:check     # 代码规范检查
pnpm run test:run       # 两子包单元测试
pnpm run quality:check  # lint + format + type-check
pnpm run outputs:check  # 校验发布入口对应真实产物
```

## 📖 文档与 Playground

```bash
pnpm run docs:dev        # Longpress 文档站开发服务
pnpm run docs:build      # 构建文档站
pnpm run playground:dev  # Playground 演示站
```

## 🔗 相关链接

- [@composy/device-core](packages/core/README.md)
- [@composy/device-vue](packages/vue/README.md)

## 📄 许可证

MIT