修改组件逻辑+优化代码

src/css/basic.css

@@ -45,7 +45,7 @@ body {
   background-color: var(--color-light);
   -webkit-font-smoothing: antialiased; /* 字体抗锯齿 */
   text-rendering: optimizeLegibility;
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
 /* ===== 排版元素 ===== */

src/services/windowForm/WindowFormRenderer.ts

@@ -1,6 +1,7 @@
 import type { IEventBuilder } from '@/events/IEventBuilder'
 import type { IWindowFormEvents, IWindowFormInstance } from './WindowFormDataManager.ts'
 import { safeSubscribe } from '@/services/windowForm/utils.ts'
+import '@/ui/webComponents/WindowFormElement.ts'
 
 /**
  * WindowFormRenderer
@@ -8,54 +9,32 @@ import { safeSubscribe } from '@/services/windowForm/utils.ts'
  * 负责窗口的DOM创建、销毁与视觉状态更新。
  */
 export class WindowFormRenderer {
-  private eventBus: IEventBuilder<IWindowFormEvents>
+  private wfEventBus: IEventBuilder<IWindowFormEvents>
 
-  constructor(eventBus: IEventBuilder<IWindowFormEvents>) {
+  constructor(wfEventBus: IEventBuilder<IWindowFormEvents>) {
-    this.eventBus = eventBus
+    this.wfEventBus = wfEventBus
   }
 
   /** 创建窗口DOM结构 */
   async createWindowElement(win: IWindowFormInstance) {
-    const el = document.createElement('div')
+    const el = document.createElement('window-form-element')
-    el.className = 'system-window'
+    el.wfData = win
-    el.dataset.id = win.id
-    el.style.cssText = `
-      position:absolute;
-      width:${win.config.width}px;
-      height:${win.config.height}px;
-      left:${win.config.x ?? 200}px;
-      top:${win.config.y ?? 150}px;
-      background:#fff;
-      border-radius:8px;
-      border:1px solid #ccc;
-      box-shadow:0 4px 20px rgba(0,0,0,.15);
-      overflow:hidden;
-      transition:all .15s ease;
-    `
-    // 标题栏
-    const titleBar = this.createTitleBar(win)
-    const content = document.createElement('div')
-    content.className = 'window-content'
-    content.style.cssText = `width:100%;height:calc(100% - 40px);overflow:hidden;`
-    content.innerHTML = `<div class="loading-state">加载中...</div>`
-
-    el.append(titleBar, content)
-    document.body.appendChild(el)
     win.element = el
+    document.body.appendChild(el)
 
-    // 生命周期UI响应
+    // // 生命周期UI响应
-    safeSubscribe(win, this.eventBus, 'onLoadStart', id => {
+    // safeSubscribe(win, this.eventBus, 'onLoadStart', id => {
-      if (id === win.id) this.showLoading(win)
+    //   if (id === win.id) this.showLoading(win)
-    })
+    // })
-    safeSubscribe(win, this.eventBus, 'onLoaded', id => {
+    // safeSubscribe(win, this.eventBus, 'onLoaded', id => {
-      if (id === win.id) this.hideLoading(win)
+    //   if (id === win.id) this.hideLoading(win)
-    })
+    // })
-    safeSubscribe(win, this.eventBus, 'onError', (id, err) => {
+    // safeSubscribe(win, this.eventBus, 'onError', (id, err) => {
-      if (id === win.id) this.showError(win, err)
+    //   if (id === win.id) this.showError(win, err)
-    })
+    // })
-    safeSubscribe(win, this.eventBus, 'onDestroy', id => {
+    // safeSubscribe(win, this.eventBus, 'onDestroy', id => {
-      if (id === win.id) this.destroy(win)
+    //   if (id === win.id) this.destroy(win)
-    })
+    // })
   }
 
   /** 创建标题栏 */

src/ui/webComponents/css/wf.scss

@@ -0,0 +1,101 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box; /* 使用更直观的盒模型 */
+  margin: 0;
+  padding: 0;
+}
+
+:host {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  z-index: 10;
+  user-select: none;
+  --titlebar-height: 32px;
+  --shadow: 0 10px 30px rgba(0,0,0,0.25);
+  font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+}
+
+:host([focused]) {
+  z-index: 11;
+  .window {
+    border-color: #8338ec;
+  }
+}
+
+:host([windowFormState='maximized']) {
+  .window {
+    border-radius: 0;
+    box-shadow: none;
+  }
+}
+
+.window {
+  position: absolute;
+  box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,0.25));
+  background: linear-gradient(#ffffff, #f6f6f6);
+  border: 1px solid rgba(0,0,0,0.08);
+  border-radius: 6px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+
+  &.focus {
+    border-color: #3a86ff;
+  }
+}
+
+.titlebar {
+  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);
+      }
+    }
+  }
+}
+
+.content { flex: 1; overflow: auto; padding: 12px; background: transparent; }
+
+.resizer { position: absolute; z-index: 20; }
+.resizer.t { height: 6px; left: 0; right: 0; top: -3px; cursor: ns-resize; }
+.resizer.b { height: 6px; left: 0; right: 0; bottom: -3px; cursor: ns-resize; }
+.resizer.r { width: 6px; top: 0; bottom: 0; right: -3px; cursor: ew-resize; }
+.resizer.l { width: 6px; top: 0; bottom: 0; left: -3px; cursor: ew-resize; }
+.resizer.tr { width: 12px; height: 12px; right: -6px; top: -6px; cursor: nesw-resize; }
+.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; }