From 29482e6b65f4fdd476b153e43b8dec31886049fa Mon Sep 17 00:00:00 2001
From: wtz <anby.wtz@qmikeji.cn>
Date: Sat, 4 Apr 2026 14:46:08 +0800
Subject: [PATCH] fix: inline resize handle styles to work without CSS

Add _applyHandleBaseStyle method to apply critical handle styles (width, height, background, border, etc.) directly via JavaScript so handles are visible even without importing editor.css.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 js/lib/webbuilder/webbuilder.js | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/js/lib/webbuilder/webbuilder.js b/js/lib/webbuilder/webbuilder.js
index 7e259da..87003a6 100644
--- a/js/lib/webbuilder/webbuilder.js
+++ b/js/lib/webbuilder/webbuilder.js
@@ -50,6 +50,21 @@ var webbuilder = {
     resizeStartPos: { x: 0, y: 0 },
     resizeStartSize: { colSpan: 0, rowSpan: 0 },
 
+    /**
+     * 应用控制柄的基础样式（不依赖CSS）
+     */
+    _applyHandleBaseStyle: function(handle) {
+        handle.style.position = 'absolute';
+        handle.style.width = '8px';
+        handle.style.height = '8px';
+        handle.style.background = '#1890ff';
+        handle.style.border = '1px solid #fff';
+        handle.style.borderRadius = '2px';
+        handle.style.pointerEvents = 'auto';
+        handle.style.zIndex = '11';
+        handle.style.boxShadow = '0 0 2px rgba(0, 0, 0, 0.3)';
+    },
+
     /**
      * 计算单元格大小和行数
      */
@@ -379,6 +394,7 @@ var webbuilder = {
         handlesContainer.style.width = '100%';
         handlesContainer.style.height = '100%';
         handlesContainer.style.pointerEvents = 'none';
+        handlesContainer.style.zIndex = '10';
         el.appendChild(handlesContainer);
 
         // 创建8个控制柄
@@ -389,7 +405,9 @@ var webbuilder = {
             var handle = document.createElement('div');
             handle.className = `resize-handle resize-handle-${direction}`;
             handle.setAttribute('data-direction', direction);
-            handle.style.pointerEvents = 'auto';
+            
+            // 应用基础样式（不依赖CSS）
+            self._applyHandleBaseStyle(handle);
             
             // 控制柄位置
             switch(direction) {
@@ -914,6 +932,7 @@ var webbuilder = {
                         handlesContainer.style.width = '100%';
                         handlesContainer.style.height = '100%';
                         handlesContainer.style.pointerEvents = 'none';
+                        handlesContainer.style.zIndex = '10';
                         instance.element.appendChild(handlesContainer);
                         instance.handlesContainer = handlesContainer;
                         
@@ -953,7 +972,9 @@ var webbuilder = {
             var handle = document.createElement('div');
             handle.className = `resize-handle resize-handle-${direction}`;
             handle.setAttribute('data-direction', direction);
-            handle.style.pointerEvents = 'auto';
+            
+            // 应用基础样式（不依赖CSS）
+            self._applyHandleBaseStyle(handle);
             
             // 控制柄位置
             switch(direction) {