重写ssh前端组件,通用化
This commit is contained in:
parent
6d2f0cb95c
commit
7025eebd51
42
frontend/src/components/Terminal/splitUtils.ts
Normal file
42
frontend/src/components/Terminal/splitUtils.ts
Normal file
@ -0,0 +1,42 @@
|
||||
/**
|
||||
* Terminal 分屏相关工具函数
|
||||
*/
|
||||
import type { LayoutOrientation } from './types';
|
||||
import { getHeightFromWidth } from '@/lib/screenUtils';
|
||||
|
||||
/**
|
||||
* 根据容器尺寸和方向计算最小尺寸(像素)
|
||||
* @param containerSize 容器尺寸(px)
|
||||
* @param orientation 分割方向
|
||||
* @returns 最小尺寸(px)
|
||||
*/
|
||||
export const getMinSplitSize = (containerSize: number, orientation: LayoutOrientation): number => {
|
||||
if (orientation === 'horizontal') {
|
||||
// 左右分屏:最小宽度520px
|
||||
return 520;
|
||||
} else {
|
||||
// 上下分屏:根据520px宽度和屏幕比例计算对应的高度
|
||||
return getHeightFromWidth(520);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 将像素最小值转换为百分比最小值
|
||||
* @param minPixels 最小像素值
|
||||
* @param containerSize 容器尺寸(px)
|
||||
* @param totalPercent 两个分屏的总百分比
|
||||
* @returns 最小百分比
|
||||
*/
|
||||
export const getMinSplitPercent = (
|
||||
minPixels: number,
|
||||
containerSize: number,
|
||||
totalPercent: number
|
||||
): number => {
|
||||
if (!containerSize) return totalPercent * 0.2;
|
||||
|
||||
// 将像素转换为百分比
|
||||
const minPercent = (minPixels / containerSize) * totalPercent;
|
||||
|
||||
// 确保不超过总量的50%
|
||||
return Math.min(totalPercent * 0.5, minPercent);
|
||||
};
|
||||
23
frontend/src/lib/screenUtils.ts
Normal file
23
frontend/src/lib/screenUtils.ts
Normal file
@ -0,0 +1,23 @@
|
||||
/**
|
||||
* 屏幕分辨率相关工具函数
|
||||
*/
|
||||
|
||||
/**
|
||||
* 获取屏幕分辨率比例(宽:高)
|
||||
* @returns 高度与宽度的比例 (height / width)
|
||||
*/
|
||||
export const getScreenAspectRatio = (): number => {
|
||||
const width = window.screen.width;
|
||||
const height = window.screen.height;
|
||||
return height / width;
|
||||
};
|
||||
|
||||
/**
|
||||
* 根据宽度和屏幕比例计算对应的高度
|
||||
* @param width 宽度(px)
|
||||
* @returns 对应的高度(px)
|
||||
*/
|
||||
export const getHeightFromWidth = (width: number): number => {
|
||||
const ratio = getScreenAspectRatio();
|
||||
return Math.round(width * ratio);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user