WindowFormElement

src/core/window/css/window-form.scss

@@ -1,63 +0,0 @@
-$titleBarHeight: 40px;
-
-/* 窗体容器 */
-.window {
-  width: 100%;
-  height: 100%;
-  border: 1px solid #666;
-  box-shadow: 0 0 10px rgba(0,0,0,0.5);
-  background-color: #ffffff;
-  overflow: hidden;
-  border-radius: 5px;
-}
-
-/* 标题栏 */
-.title-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  user-select: none;
-  width: 100%;
-  height: $titleBarHeight;
-
-  .title {
-    display: block;
-    padding: 0 5px;
-    flex-grow: 1;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: 18px;
-    line-height: $titleBarHeight;
-  }
-
-  .window-controls {
-    display: flex;
-    gap: 2px;
-    flex-shrink: 0;
-
-    .btn {
-      width: 40px;
-      height: 40px;
-      padding: 0;
-      cursor: pointer;
-      font-size: 24px;
-      color: black;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: background-color 0.3s ease;
-
-      &:hover {
-        @apply bg-gray-200;
-      }
-    }
-  }
-}
-
-/* 窗体内容 */
-.window-content {
-  width: 100%;
-  height: calc(100% - #{$titleBarHeight});
-  background-color: #e0e0e0;
-}

src/core/window/impl/WindowFormImpl.ts

@@ -5,7 +5,6 @@ import type { IWindowForm } from '@/core/window/IWindowForm.ts'
 import type { IWindowFormConfig } from '@/core/window/types/IWindowFormConfig.ts'
 import type { TWindowFormState, WindowFormPos } from '@/core/window/types/WindowFormTypes.ts'
 import { DraggableResizableWindow } from '@/core/utils/DraggableResizableWindow.ts'
-import '../css/window-form.scss'
 import '../ui/WindowFormElement.ts'
 import { wfem } from '@/core/events/WindowFormEventManager.ts'
 import type { IObservable } from '@/core/state/IObservable.ts'

src/core/window/ui/WindowFormElement.ts

@@ -1,6 +1,6 @@
 import { LitElement, html, css, unsafeCSS } from 'lit'
 import { customElement, property } from 'lit/decorators.js';
-import wfStyle from './wf.scss?inline'
+import wfStyle from './css/wf.scss?inline'
 import type { TWindowFormState } from '@/core/window/types/WindowFormTypes.ts'
 import { wfem } from '@/core/events/WindowFormEventManager.ts'
 import type { IObservable } from '@/core/state/IObservable.ts'
@@ -80,10 +80,10 @@ export class WindowFormElement extends LitElement {
   @property({ type: Number }) snapDistance = 0 // 吸附距离
   @property({ type: Boolean }) snapAnimation = true // 吸附动画
   @property({ type: Number }) snapAnimationDuration = 300 // 吸附动画时长 ms
-  @property({ type: Number }) maxWidth?: number
+  @property({ type: Number }) maxWidth?: number = Infinity
-  @property({ type: Number }) minWidth?: number
+  @property({ type: Number }) minWidth?: number = 0
-  @property({ type: Number }) maxHeight?: number
+  @property({ type: Number }) maxHeight?: number = Infinity
-  @property({ type: Number }) minHeight?: number
+  @property({ type: Number }) minHeight?: number = 0
   @property({ type: String }) taskbarElementId?: string
   @property({ type: Object }) wfData: IObservable<IWindowFormDataState>;
 

src/core/window/ui/css/wf.scss

@@ -42,40 +42,44 @@
 }
 
 .titlebar {
-  height: var(--titlebar-height, 32px);
+  height: var(--titlebar-height);
   display: flex;
   align-items: center;
   padding: 0 8px;
   gap: 8px;
   background: linear-gradient(#f2f2f2, #e9e9e9);
   border-bottom: 1px solid rgba(0,0,0,0.06);
+
+  .title {
+    font-size: 13px;
+    font-weight: 600;
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #111;
+  }
+
+  .controls {
+    display: flex; gap: 6px;
+
+    button.ctrl {
+      width: 34px;
+      height: 24px;
+      border: none;
+      background: transparent;
+      border-radius: 4px;
+      cursor: pointer;
+      font-weight: 600;
+      font-size: 12px;
+
+      &:hover {
+        background: rgba(0,0,0,0.06);
+      }
+    }
+  }
 }
 
-.title {
-  font-size: 13px;
-  font-weight: 600;
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: #111;
-}
-
-.controls { display: flex; gap: 6px; }
-
-button.ctrl {
-  width: 34px;
-  height: 24px;
-  border: none;
-  background: transparent;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 600;
-  font-size: 12px;
-}
-
-button.ctrl:hover { background: rgba(0,0,0,0.06); }
-
 .content { flex: 1; overflow: auto; padding: 12px; background: transparent; }
 
 .resizer { position: absolute; z-index: 20; }
@@ -87,16 +91,3 @@ button.ctrl:hover { background: rgba(0,0,0,0.06); }
 .resizer.tl { width: 12px; height: 12px; left: -6px; top: -6px; cursor: nwse-resize; }
 .resizer.br { width: 12px; height: 12px; right: -6px; bottom: -6px; cursor: nwse-resize; }
 .resizer.bl { width: 12px; height: 12px; left: -6px; bottom: -6px; cursor: nesw-resize; }
-
-.minimized {
-  height: var(--titlebar-height, 32px);
-  width: 200px;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0 8px;
-  border-radius: 4px;
-  background: linear-gradient(#f6f6f6,#efefef);
-  border: 1px solid rgba(0,0,0,0.06);
-  cursor: pointer;
-}