diff --git a/src/core/window/css/window-form.scss b/src/core/window/css/window-form.scss deleted file mode 100644 index da91e17..0000000 --- a/src/core/window/css/window-form.scss +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/core/window/impl/WindowFormImpl.ts b/src/core/window/impl/WindowFormImpl.ts index 92b6590..b9f0f5e 100644 --- a/src/core/window/impl/WindowFormImpl.ts +++ b/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' diff --git a/src/core/window/ui/WindowFormElement.ts b/src/core/window/ui/WindowFormElement.ts index b1015ac..0721d66 100644 --- a/src/core/window/ui/WindowFormElement.ts +++ b/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 }) minWidth?: number - @property({ type: Number }) maxHeight?: number - @property({ type: Number }) minHeight?: number + @property({ type: Number }) maxWidth?: number = Infinity + @property({ type: Number }) minWidth?: number = 0 + @property({ type: Number }) maxHeight?: number = Infinity + @property({ type: Number }) minHeight?: number = 0 @property({ type: String }) taskbarElementId?: string @property({ type: Object }) wfData: IObservable; diff --git a/src/core/window/ui/wf.scss b/src/core/window/ui/css/wf.scss similarity index 70% rename from src/core/window/ui/wf.scss rename to src/core/window/ui/css/wf.scss index 562a23a..602a32b 100644 --- a/src/core/window/ui/wf.scss +++ b/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; -} \ No newline at end of file