@@ -288,12 +288,12 @@ export class WindowService {
width : '100vw' ,
height : 'calc(100vh - 40px)' , // 减去任务栏高度
display : 'block' ,
transform : 'none' // 确保移除transform
transform : 'none' , // 确保移除transform
} )
}
this . setActiveWindow ( windowId )
// 发送窗体数据更新事件
this . notifyWindowFormDataUpdate ( windowId )
@@ -331,17 +331,17 @@ export class WindowService {
height : originalHeight ? ` ${ originalHeight } px ` : ` ${ window . config . height } px ` ,
left : originalX ? ` ${ originalX } px ` : '0px' ,
top : originalY ? ` ${ originalY } px ` : '0px' ,
transform : 'none' // 确保移除transform
transform : 'none' , // 确保移除transform
} )
// 更新配置中的位置
if ( originalX ) window . config . x = parseFloat ( originalX ) ;
if ( originalY ) window . config . y = parseFloat ( originalY ) ;
if ( originalX ) window . config . x = parseFloat ( originalX )
if ( originalY ) window . config . y = parseFloat ( originalY )
}
}
this . setActiveWindow ( windowId )
// 发送窗体数据更新事件
this . notifyWindowFormDataUpdate ( windowId )
@@ -381,7 +381,11 @@ export class WindowService {
// 检查尺寸限制
const finalWidth = this . clampDimension ( width , window . config . minWidth , window . config . maxWidth )
const finalHeight = this . clampDimension ( height , window . config . minHeight , window . config . maxHeight )
const finalHeight = this . clampDimension (
height ,
window . config . minHeight ,
window . config . maxHeight ,
)
window . config . width = finalWidth
window . config . height = finalHeight
@@ -393,7 +397,7 @@ export class WindowService {
}
this . eventBus . notifyEvent ( 'onResize' , windowId , finalWidth , finalHeight )
// 发送窗体数据更新事件
this . notifyWindowFormDataUpdate ( windowId )
@@ -436,7 +440,7 @@ export class WindowService {
}
this . eventBus . notifyEvent ( 'onFocus' , windowId )
// 发送窗体数据更新事件
this . notifyWindowFormDataUpdate ( windowId )
@@ -465,15 +469,15 @@ export class WindowService {
windowElement . id = ` window- ${ id } `
// 计算初始位置
let left = config . x ;
let top = config . y ;
let left = config . x
let top = config . y
// 如果没有指定位置,则居中显示
if ( left === undefined || top === undefined ) {
const centerX = Math . max ( 0 , ( window . innerWidth - config . width ) / 2 ) ;
const centerY = Math . max ( 0 , ( window . innerHeight - config . height ) / 2 ) ;
left = left !== undefined ? left : centerX ;
top = top !== undefined ? top : centerY ;
const centerX = Math . max ( 0 , ( window . innerWidth - config . width ) / 2 )
const centerY = Math . max ( 0 , ( window . innerHeight - config . height ) / 2 )
left = left !== undefined ? left : centerX
top = top !== undefined ? top : centerY
}
// 设置基本样式
@@ -489,11 +493,11 @@ export class WindowService {
borderRadius : '8px' ,
boxShadow : '0 4px 20px rgba(0,0,0,0.15)' ,
overflow : 'hidden' ,
} ) ;
} )
// 保存初始位置到配置中
windowInstance . config . x = left ;
windowInstance . config . y = top ;
windowInstance . config . x = left
windowInstance . config . y = top
// 创建窗体标题栏
const titleBar = this . createTitleBar ( windowInstance )
@@ -519,7 +523,7 @@ export class WindowService {
background: #fff;
`
contentArea . appendChild ( appContainer )
console . log ( ` [WindowService] 为内置应用 ${ appId } 创建了普通容器 ` )
} else {
// 外部应用:创建 iframe 容器
@@ -532,10 +536,10 @@ export class WindowService {
`
iframe . sandbox = 'allow-scripts allow-forms allow-popups' // 移除allow-same-origin以提高安全性
contentArea . appendChild ( iframe )
// 保存 iframe 引用(仅对外部应用)
windowInstance . iframe = iframe
console . log ( ` [WindowService] 为外部应用 ${ appId } 创建了 iframe 容器 ` )
}
@@ -676,13 +680,13 @@ export class WindowService {
titleBar . addEventListener ( 'mousedown' , ( e ) = > {
// 检查是否正在调整尺寸,如果是则不处理拖拽
if ( windowInstance . resizeState ? . isResizing ) {
return ;
return
}
// 检查是否点击在调整尺寸手柄上,如果是则不处理拖拽
const target = e . target as HTMLElement ;
const target = e . target as HTMLElement
if ( target . classList . contains ( 'resize-handle' ) ) {
return ;
return
}
if ( ! windowInstance . element ) return
@@ -692,17 +696,20 @@ export class WindowService {
startY = e . clientY
const rect = windowInstance . element . getBoundingClientRect ( )
// 如果使用了transform, 需要转换为实际坐标
if ( windowInstance . element . style . transform && windowInstance . element . style . transform . includes ( 'translate' ) ) {
if (
windowInstance . element . style . transform &&
windowInstance . element . style . transform . includes ( 'translate' )
) {
// 移除transform并设置实际的left/top值
windowInstance . element . style . transform = 'none' ;
windowInstance . config . x = rect . left ;
windowInstance . config . y = rect . top ;
windowInstance . element . style . left = ` ${ rect . left } px ` ;
windowInstance . element . style . top = ` ${ rect . top } px ` ;
windowInstance . element . style . transform = 'none'
windowInstance . config . x = rect . left
windowInstance . config . y = rect . top
windowInstance . element . style . left = ` ${ rect . left } px `
windowInstance . element . style . top = ` ${ rect . top } px `
}
startLeft = rect . left
startTop = rect . top
@@ -716,7 +723,7 @@ export class WindowService {
document . addEventListener ( 'mousemove' , ( e ) = > {
// 检查是否正在调整尺寸,如果是则不处理拖拽
if ( windowInstance . resizeState ? . isResizing ) {
return ;
return
}
if ( ! isDragging || ! windowInstance . element ) return
@@ -735,7 +742,7 @@ export class WindowService {
windowInstance . config . y = newTop
this . eventBus . notifyEvent ( 'onMove' , windowInstance . id , newLeft , newTop )
// 发送窗体数据更新事件
this . notifyWindowFormDataUpdate ( windowInstance . id )
} )
@@ -758,14 +765,14 @@ export class WindowService {
startWidth : 0 ,
startHeight : 0 ,
startXPosition : 0 ,
startYPosition : 0
startYPosition : 0 ,
}
// 创建8个调整尺寸的手柄
const resizeHandles = this . createResizeHandles ( windowElement )
// 添加鼠标事件监听器
resizeHandles . forEach ( handle = > {
resizeHandles . forEach ( ( handle ) = > {
this . addResizeHandleEvents ( handle , windowElement , windowInstance )
} )
@@ -787,19 +794,24 @@ export class WindowService {
private createResizeHandles ( windowElement : HTMLElement ) : HTMLElement [ ] {
const handles : HTMLElement [ ] = [ ]
const directions : ResizeDirection [ ] = [
'topLeft' , 'top' , 'topRight' ,
'right' , 'bottomRight' , 'bottom ' ,
'bottomLeft' , 'left'
'topLeft' ,
'top ' ,
'topRight' ,
'right' ,
'bottomRight' ,
'bottom' ,
'bottomLeft' ,
'left' ,
]
directions . forEach ( direction = > {
directions . forEach ( ( direction ) = > {
const handle = document . createElement ( 'div' )
handle . className = ` resize-handle resize-handle- ${ direction } `
// 设置手柄样式
handle . style . position = 'absolute'
handle . style . zIndex = '1001'
// 根据方向设置位置和光标
switch ( direction ) {
case 'topLeft' :
@@ -872,9 +884,12 @@ export class WindowService {
private addResizeHandleEvents (
handle : HTMLElement ,
windowElement : HTMLElement ,
windowInstance : WindowInstance
windowInstance : WindowInstance ,
) : void {
const direction = handle . className . split ( ' ' ) . find ( cls = > cls . startsWith ( 'resize-handle-' ) ) ? . split ( '-' ) [ 2 ] as ResizeDirection
const direction = handle . className
. split ( ' ' )
. find ( ( cls ) = > cls . startsWith ( 'resize-handle-' ) )
? . split ( '-' ) [ 2 ] as ResizeDirection
handle . addEventListener ( 'mousedown' , ( e ) = > {
if ( ! windowInstance . resizeState ) return
@@ -884,15 +899,18 @@ export class WindowService {
// 确保窗体位置是最新的
if ( windowInstance . element ) {
const rect = windowInstance . element . getBoundingClientRect ( ) ;
const rect = windowInstance . element . getBoundingClientRect ( )
// 如果使用了transform, 需要转换为实际坐标
if ( windowInstance . element . style . transform && windowInstance . element . style . transform . includes ( 'translate' ) ) {
if (
windowInstance . element . style . transform &&
windowInstance . element . style . transform . includes ( 'translate' )
) {
// 移除transform并设置实际的left/top值
windowInstance . element . style . transform = 'none' ;
windowInstance . config . x = rect . left ;
windowInstance . config . y = rect . top ;
windowInstance . element . style . left = ` ${ rect . left } px ` ;
windowInstance . element . style . top = ` ${ rect . top } px ` ;
windowInstance . element . style . transform = 'none'
windowInstance . config . x = rect . left
windowInstance . config . y = rect . top
windowInstance . element . style . left = ` ${ rect . left } px `
windowInstance . element . style . top = ` ${ rect . top } px `
}
}
@@ -923,7 +941,7 @@ export class WindowService {
private updateCursorForResize (
e : MouseEvent ,
windowElement : HTMLElement ,
windowInstance : WindowInstance
windowInstance : WindowInstance ,
) : void {
if ( ! windowInstance . resizeState ) return
@@ -942,22 +960,40 @@ export class WindowService {
direction = 'topRight'
} else if ( x >= 0 && x < edgeSize && y > rect . height - edgeSize && y <= rect . height ) {
direction = 'bottomLeft'
} else if ( x > rect . width - edgeSize && x <= rect . width && y > rect . height - edgeSize && y <= rect . height ) {
} else if (
x > rect . width - edgeSize &&
x <= rect . width &&
y > rect . height - edgeSize &&
y <= rect . height
) {
direction = 'bottomRight'
}
}
// 然后检查边缘区域
else if ( x >= 0 && x < edgeSize && y >= edgeSize && y <= rect . height - edgeSize ) {
direction = 'left'
} else if ( x > rect . width - edgeSize && x <= rect . width && y >= edgeSize && y <= rect . height - edgeSize ) {
} else if (
x > rect . width - edgeSize &&
x <= rect . width &&
y >= edgeSize &&
y <= rect . height - edgeSize
) {
direction = 'right'
} else if ( y >= 0 && y < edgeSize && x >= edgeSize && x <= rect . width - edgeSize ) {
direction = 'top'
} else if ( y > rect . height - edgeSize && y <= rect . height && x >= edgeSize && x <= rect . width - edgeSize ) {
} else if (
y > rect . height - edgeSize &&
y <= rect . height &&
x >= edgeSize &&
x <= rect . width - edgeSize
) {
direction = 'bottom'
}
// 更新光标样式
windowElement . style . cursor = direction === 'none' ? 'default' : ` ${ direction . replace ( /([A-Z])/g , '-$1' ) . toLowerCase ( ) } -resize `
windowElement . style . cursor =
direction === 'none'
? 'default'
: ` ${ direction . replace ( /([A-Z])/g , '-$1' ) . toLowerCase ( ) } -resize `
}
/**
@@ -981,21 +1017,14 @@ export class WindowService {
private handleResizeMouseMove ( e : MouseEvent ) : void {
// 找到正在调整尺寸的窗体
const resizingWindow = Array . from ( this . windows . values ( ) ) . find (
window = > window . resizeState ? . isResizing
( window ) = > window . resizeState ? . isResizing ,
)
// 如果没有正在调整尺寸的窗体,直接返回
if ( ! resizingWindow || ! resizingWindow . resizeState || ! resizingWindow . element ) return
const {
direction ,
startX ,
startY ,
startWidth ,
startHeight ,
startXPosition ,
startYPosition
} = resizingWindow . resizeState
const { direction , startX , startY , startWidth , startHeight , startXPosition , startYPosition } =
resizingWindow . resizeState
const deltaX = e . clientX - startX
const deltaY = e . clientY - startY
@@ -1044,8 +1073,16 @@ export class WindowService {
}
// 应用尺寸限制
newWidth = this . clampDimension ( newWidth , resizingWindow . config . minWidth , resizingWindow . config . maxWidth )
newHeight = this . clampDimension ( newHeight , resizingWindow . config . minHeight , resizingWindow . config . maxHeight )
newWidth = this . clampDimension (
newWidth ,
resizingWindow . config . minWidth ,
resizingWindow . config . maxWidth ,
)
newHeight = this . clampDimension (
newHeight ,
resizingWindow . config . minHeight ,
resizingWindow . config . maxHeight ,
)
// 应用新尺寸和位置
resizingWindow . config . width = newWidth
@@ -1063,7 +1100,7 @@ export class WindowService {
// 触发调整尺寸事件
this . eventBus . notifyEvent ( 'onResizing' , resizingWindow . id , newWidth , newHeight )
// 发送窗体数据更新事件
this . notifyWindowFormDataUpdate ( resizingWindow . id )
}
@@ -1074,7 +1111,7 @@ export class WindowService {
private handleResizeMouseUp ( ) : void {
// 找到正在调整尺寸的窗体
const resizingWindow = Array . from ( this . windows . values ( ) ) . find (
window = > window . resizeState ? . isResizing
( window ) = > window . resizeState ? . isResizing ,
)
if ( ! resizingWindow || ! resizingWindow . resizeState || ! resizingWindow . element ) return
@@ -1087,7 +1124,7 @@ export class WindowService {
// 触发调整尺寸结束事件
this . eventBus . notifyEvent ( 'onResizeEnd' , resizingWindow . id )
// 发送窗体数据更新事件
this . notifyWindowFormDataUpdate ( resizingWindow . id )
}
@@ -1114,7 +1151,7 @@ export class WindowService {
width : window.config.width ,
height : window.config.height ,
x : window.config.x !== undefined ? window . config.x : rect.left ,
y : window.config.y !== undefined ? window . config.y : rect.top
y : window.config.y !== undefined ? window . config.y : rect.top ,
}
// 发送事件到事件总线
@@ -1129,7 +1166,7 @@ export class WindowService {
try {
const { AppRegistry } = await import ( '../apps/AppRegistry' )
const appRegistry = AppRegistry . getInstance ( )
// 如果是内置应用,直接返回,不需要等待
if ( appRegistry . hasApp ( windowInstance . appId ) ) {
console . log ( ` [WindowService] 内置应用 ${ windowInstance . appId } 无需等待加载 ` )
@@ -1138,7 +1175,7 @@ export class WindowService {
} catch ( error ) {
console . warn ( '无法导入 AppRegistry, 使用传统加载方式' )
}
// 对于外部应用,保持原有的加载逻辑
return new Promise ( ( resolve ) = > {
console . log ( ` [WindowService] 开始加载外部应用 ${ windowInstance . appId } ` )
@@ -1174,18 +1211,18 @@ export class WindowService {
if ( ! window ) return
const oldState = window . state
// 只有状态真正发生变化时才触发事件
if ( oldState === newState ) return
window . state = newState
window . updatedAt = new Date ( )
// 所有状态变化都应该触发事件,这是正常的系统行为
console . log ( ` [WindowService] 窗体状态变化: ${ windowId } ${ oldState } -> ${ newState } ` )
this . eventBus . notifyEvent ( 'onStateChange' , windowId , newState , oldState )
// 发送窗体数据更新事件
this . notifyWindowFormDataUpdate ( windowId )
}
}
}