# zzy-dashboard-fullscreen

**Repository Path**: qq313258196/zzy-dashboard-fullscreen

## Basic Information

- **Project Name**: zzy-dashboard-fullscreen
- **Description**: 数据、可视化大屏，全屏响应式框架
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-15
- **Last Updated**: 2026-02-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# zzy-dashboard-fullscreen

一个支持 React、Vue2 和 Vue3 的响应式全屏仪表板组件，能够根据窗口大小自动缩放内容。

## 特性

- 🚀 支持多框架：React、Vue2、Vue3
- 📱 响应式设计：根据窗口大小自动缩放
- 🎨 简单易用：开箱即用，配置简单
- 📦 TypeScript 支持：完整的类型定义
- 🎯 精确控制：可自定义设计尺寸和缩放行为

## 安装

```bash
npm install zzy-dashboard-fullscreen
```

## 使用方法

### React

```jsx
import ZDashboardFullscreen from 'zzy-dashboard-fullscreen/react'

function App() {
  return (
    <ZDashboardFullscreen width={1920} height={1080}>
      <div className="content">
        {/* 你的仪表板内容 */}
      </div>
    </ZDashboardFullscreen>
  )
}
```

### Vue2

```vue
<template>
  <ZDashboardFullscreen width="1920" height="1080">
    <div class="content">
      <!-- 你的仪表板内容 -->
    </div>
  </ZDashboardFullscreen>
</template>

<script>
import ZDashboardFullscreen from 'zzy-dashboard-fullscreen/vue2'

export default {
  components: {
    ZDashboardFullscreen
  }
}
</script>
```

### Vue3

```vue
<template>
  <ZDashboardFullscreen width="1920" height="1080">
    <div class="content">
      <!-- 你的仪表板内容 -->
    </div>
  </ZDashboardFullscreen>
</template>

<script setup>
import ZDashboardFullscreen from 'zzy-dashboard-fullscreen/vue3'
</script>
```

## 演示效果

### Vue2、Vue3、React 演示

![演示](https://gtzc-picture-bed.oss-cn-hangzhou.aliyuncs.com/image/2026/02/17/1f10bf43-932e-6ac0-abf2-3dae79d9ddca.gif)

## API 文档

### Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|---------|------|
| width | number | 1920 | 设计稿宽度（像素） |
| height | number | 1080 | 设计稿高度（像素） |
| className | string | '' | 自定义类名（仅 React） |
| children | ReactNode | - | 子组件内容（仅 React） |

## 示例

项目包含三个完整的示例，分别展示在不同框架中的使用方法：

### 运行所有示例

```bash
npm run dev:all
```

这将启动三个开发服务器：
- React 示例: http://localhost:3000
- Vue2 示例: http://localhost:3002
- Vue3 示例: http://localhost:3004

### 单独运行示例

```bash
# React 示例
cd example/react
npm install
npm run dev

# Vue2 示例
cd example/vue2
npm install
npm run dev

# Vue3 示例
cd example/vue3
npm install
npm run dev
```

## 开发

### 安装依赖

```bash
npm install
```

### 构建项目

```bash
# 构建所有框架版本
npm run build

# 单独构建特定框架
npm run build:react  # 构建 React 版本
npm run build:vue2   # 构建 Vue2 版本
npm run build:vue3   # 构建 Vue3 版本
```

### 开发模式

```bash
# 运行所有示例
npm run dev:all

# 单独运行示例
cd example/react && npm run dev
cd example/vue2 && npm run dev
cd example/vue3 && npm run dev
```

### 代码检查

```bash
npm run lint
npm run typecheck
```

## 工作原理

组件通过监听窗口大小变化，计算缩放比例，并使用 CSS transform 属性自动缩放内容：

1. 监听窗口 resize 事件
2. 计算当前窗口与设计稿尺寸的比例
3. 应用 transform: scale(x, y) 进行缩放
4. 确保内容始终按设计稿比例显示

## 浏览器支持

- Chrome (最新版)
- Firefox (最新版)
- Safari (最新版)
- Edge (最新版)

## 许可证

MIT

## 仓库

https://gitee.com/qq313258196/zzy-dashboard-fullscreen.git

## 贡献

欢迎提交 Issue 和 Pull Request！

## 更新日志

### 1.0.0
- 初始版本发布
- 支持 React、Vue2、Vue3
- 响应式缩放功能
- TypeScript 类型支持