zzy-dashboard-fullscreen

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

特性

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

安装

npm install zzy-dashboard-fullscreen

使用方法

React

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

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

Vue2

<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

<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 演示

API 文档

Props

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

示例

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

运行所有示例

npm run dev:all

这将启动三个开发服务器：

• React 示例: http://localhost:3000
• Vue2 示例: http://localhost:3002
• Vue3 示例: http://localhost:3004

单独运行示例

# 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

开发

安装依赖

npm install

构建项目

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

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

开发模式

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

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

代码检查

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 类型支持