当前位置：首页 > news >正文

响应式系统模板

news 2026/5/4 17:45:59

响应式系统实现总结

我已经成功将old项目的响应式技术和自适应方法应用到您的safety-supervision-master项目中，实现了与old项目一致的响应式效果。

🎯 实现的核心技术

1. 响应式函数系统 ✅

基于old项目的vw/vh函数实现：

// src/assets/styles/global.scss
@function vw($px) {@return math.div($px , $designWidth) * 100vw;
}@function vh($px) {@return math.div($px , $designHeight) * 100vh;
}

设计稿基准：

设计稿宽度：1920px
设计稿高度：1080px
自动计算vw/vh比例

2. 自动字体大小调整 ✅

基于old项目的autoFontSize实现：

// src/utils/autoFontSize.ts
export function autoFontSize(size: number) {const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidthif (!clientWidth) returnconst fontSize = clientWidth / 1920 //尺寸大小return size * fontSize
}

响应式尺寸计算：

支持vw、vh、auto三种模式
基于1920px基准宽度计算
自动适配不同屏幕尺寸

3. 响应式布局组件 ✅

BaseModel组件 - 基于old项目布局：

<!-- src/components/BaseModel/index.vue -->
<div class="base-turbine"><div class="base-turbine-top"><slot name="top"></slot></div><div class="base-turbine-left"><slot name="left"></slot></div><div class="base-turbine-right"><slot name="right"></slot></div><div class="base-turbine-bottom"><slot name="bottom"></slot></div>
</div>

布局特点：

顶部：53%宽度，8%高度
左侧：10px边距，3列网格布局
右侧：10px边距，3列网格布局
底部：55%宽度，39%高度，2列网格布局

WidgetPanel组件增强：

.widget-panel {width: vw(410);height: 100%;.widget-panel-title {height: vh(40);font-size: vw(18);padding-left: vw(40);}.widget-panel-main {height: calc(100% - vh(41));}
}

5. 响应式图表系统 ✅

ResponsiveChart组件：

支持line、bar、pie、area四种图表类型
自动响应式调整
SVG渲染，支持高分辨率
时间周期切换功能

图表特性：

自动计算数据范围
响应式网格线
交互式数据点
自适应标签显示

6. 响应式视频监控页面 ✅

VideoMonitorResponsive组件：

完全响应式的视频监控界面
三栏布局：左侧视频列表、中央播放器、右侧控制面板
自适应导航栏和按钮
响应式字体和间距

🚀 新增的页面和功能

1. 测试页面 - `http://localhost:8080/#/test`

Widget系统测试
Hooks系统测试
状态管理测试
基础组件测试
响应式图表测试

2. 响应式视频监控 - `http://localhost:8080/#/videoMonitorResponsive`

完全响应式的视频监控界面
基于old项目的布局技术
自适应字体和间距
响应式图表集成

📱 响应式断点

桌面端 (>1600px)

完整三栏布局
所有功能正常显示

平板端 (1200px - 1600px)

导航按钮换行
字体大小调整

移动端 (<1200px)

单列布局
图表网格自适应
控制按钮优化

🎨 样式系统增强

1. 全局响应式变量

$designWidth: 1920;
$designHeight: 1080;

2. 响应式字体

基于vw单位的字体大小
自动缩放机制
最小字体限制

3. 响应式间距

vw/vh单位间距
自适应边距和内边距
网格间距响应式调整

🔧 技术实现细节

1. SCSS函数系统

数学计算支持
精确的vw/vh转换
自动比例计算

2. JavaScript响应式工具

ResizeObserver监听
自动字体大小调整
响应式尺寸计算

3. Vue组件响应式

组合式API
响应式数据绑定
自动重新渲染

📊 性能优化

1. 图表渲染优化

SVG轻量级渲染
按需重绘
内存管理优化

2. 响应式性能

ResizeObserver高效监听
防抖处理
按需更新

🎯 使用指南

1. 使用响应式函数

.my-component {width: vw(400);height: vh(300);font-size: vw(16);padding: vh(20) vw(30);
}

2. 使用响应式工具

import { autoFontSize, getResponsiveSize } from '@/utils/autoFontSize'// 自动字体大小
const fontSize = autoFontSize(16)// 响应式尺寸
const width = getResponsiveSize(400, 'vw')

3. 使用响应式组件

<template><BaseModel><template #left><WidgetPanel title="左侧面板">内容</WidgetPanel></template><template #right><ResponsiveChart title="数据图表" type="line" /></template></BaseModel>
</template>