58 lines
2.2 KiB
JavaScript
58 lines
2.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
const resizeHandle = document.querySelector('.resize-handle');
|
|
const visualizationContainer = document.querySelector('.visualization-container');
|
|
const measureDetails = document.querySelector('.measure-details');
|
|
const mainContent = document.querySelector('.main-content');
|
|
|
|
let isResizing = false;
|
|
let startX;
|
|
let startWidth;
|
|
let startFlex;
|
|
|
|
resizeHandle.addEventListener('mousedown', function(e) {
|
|
isResizing = true;
|
|
startX = e.pageX;
|
|
startWidth = visualizationContainer.offsetWidth;
|
|
startFlex = parseFloat(getComputedStyle(visualizationContainer).flex);
|
|
|
|
document.body.style.cursor = 'ew-resize';
|
|
document.body.style.userSelect = 'none';
|
|
});
|
|
|
|
document.addEventListener('mousemove', function(e) {
|
|
if (!isResizing) return;
|
|
|
|
const deltaX = e.pageX - startX;
|
|
const containerWidth = mainContent.offsetWidth;
|
|
const newWidth = startWidth + deltaX;
|
|
const widthPercent = (newWidth / containerWidth) * 100;
|
|
|
|
// 确保宽度在限制范围内
|
|
if (widthPercent >= 60 && widthPercent <= 80) {
|
|
visualizationContainer.style.flex = 'none';
|
|
visualizationContainer.style.width = `${widthPercent}%`;
|
|
measureDetails.style.width = `${100 - widthPercent}%`;
|
|
}
|
|
});
|
|
|
|
document.addEventListener('mouseup', function() {
|
|
isResizing = false;
|
|
document.body.style.cursor = '';
|
|
document.body.style.userSelect = '';
|
|
|
|
// 保存当前宽度比例到 localStorage
|
|
const widthPercent = (visualizationContainer.offsetWidth / mainContent.offsetWidth) * 100;
|
|
localStorage.setItem('visualizationWidth', widthPercent);
|
|
});
|
|
|
|
// 恢复保存的宽度比例
|
|
const savedWidth = localStorage.getItem('visualizationWidth');
|
|
if (savedWidth) {
|
|
const widthPercent = parseFloat(savedWidth);
|
|
if (widthPercent >= 60 && widthPercent <= 80) {
|
|
visualizationContainer.style.flex = 'none';
|
|
visualizationContainer.style.width = `${widthPercent}%`;
|
|
measureDetails.style.width = `${100 - widthPercent}%`;
|
|
}
|
|
}
|
|
});
|