修复标签弹窗无滚动条问题，优化小助手ui，实现自动避开滚动条

Author: yawiii

js/css/assistant.css

@@ -22,7 +22,7 @@
     backdrop-filter: blur(4px);
     transform-origin: bottom right;
     user-select: none;
-    will-change: width, opacity, background-color, border-color, backdrop-filter, box-shadow;
+    will-change: width, opacity, background-color, border-color, backdrop-filter, box-shadow, right, left;
     width: auto;
     height: 26px !important;
     max-width: fit-content;
@@ -97,10 +97,10 @@
 /* 悬停区域 - 用于检测鼠标悬停 */
 .prompt-assistant-hover-area {
     position: absolute;
-    top: 0;
-    right: 6px;
-    width: 16px;
-    height: 100%;
+    top: 2px;
+    right: 2px;
+    width: 80%;
+    height: 90%;
     z-index: 1;
     /* 降低z-index，确保在按钮下方 */
     cursor: pointer;
@@ -278,6 +278,18 @@
     border-radius: 0.5px;
 }
 
+/* 过渡效果类 */
+.prompt-assistant-transition {
+    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1),
+        opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),
+        border-color 0.5s ease-out,
+        backdrop-filter 0.5s ease-out,
+        box-shadow 0.2s ease-out,
+        background-color 0.5s ease-out,
+        right 0.2s ease-out,
+        left 0.2s ease-out;
+}
+
 /* 显示动画类 */
 .assistant-show {
     display: flex !important;

js/css/popup.css

@@ -15,7 +15,8 @@
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
     min-width: 600px;
     max-width: 600px;
-    max-height: 400px;
+    min-height: 200px;
+    max-height: 80vh; /* 使用视窗高度的80%作为最大高度 */
     overflow: hidden;
     display: flex;
     flex-direction: column;
@@ -236,12 +237,12 @@
 
 /* 弹窗内容区域 */
 .popup_content {
-    max-height: 300px;
+    flex: 1;
     overflow-y: auto;
+    overflow-x: hidden;
     scrollbar-width: thin;
     scrollbar-color: color-mix(in srgb, var(--p-button-text-secondary-color), transparent 50%) transparent;
-    flex: 1;
-
+    min-height: 0; /* 允许flex收缩 */
 }
 
 .popup_content::-webkit-scrollbar {
@@ -419,13 +420,12 @@
 }
 
 .tag_accordion_header:hover {
-    background-color: color-mix(in srgb, var(--p-primary-500), transparent 84%);
+    background-color: color-mix(in srgb, var(--p-surface-400), transparent 80%);
 
 }
 
 .tag_accordion_header.active {
-    background-color: color-mix(in srgb, var(--comfy-menu-secondary-bg), transparent 50%);
-    ;
+    background-color: color-mix(in srgb, var(--p-primary-400), transparent 85%);
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 }
@@ -452,14 +452,15 @@
 /* 添加手风琴图标尺寸控制 */
 .tag_accordion_icon .pi {
     font-size: 12px;
+    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 .tag_accordion_icon img,
 .tag_accordion_icon .svg-icon,
 .accordion_arrow_icon {
     width: 10px;
     height: 10px;
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 .tag_accordion_icon img,
@@ -475,25 +476,42 @@
     overflow: hidden;
     cursor: default;
     /* 确保内容区域使用默认指针 */
-    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    /* 移除CSS过渡，改为JavaScript控制动画 */
 }
 
 .tag_accordion_content.active {
     display: block;
-    max-height: 200px;
+    max-height: none; /* 移除高度限制，让内容自适应 */
     padding: 2px 0;
-    overflow-y: auto;
+    overflow: visible; /* 移除滚动条，让父容器处理滚动 */
     cursor: default;
     /* 确保激活状态下内容区域也使用默认指针 */
 }
 
+/* 优化手风琴动画性能 */
+.tag_accordion_content {
+    will-change: max-height, padding; /* 提示浏览器优化这些属性的动画 */
+    transform: translateZ(0); /* 启用硬件加速 */
+    backface-visibility: hidden; /* 避免背面可见性问题 */
+}
+
+/* 旋转图标优化 */
+.rotate-180 {
+    transform: rotate(180deg);
+}
+
+.pi.rotate-180,
+.accordion_arrow_icon.rotate-180 {
+    transform: rotate(180deg);
+}
+
 /* 标签容器样式 */
 .tag_category_container {
-    max-height: 300px;
-    overflow-y: auto;
+    flex: 1;
+    overflow: visible; /* 移除滚动条，让父容器处理滚动 */
     padding: 4px;
     position: relative;
-    flex: 1;
+    min-height: 0; /* 允许flex收缩 */
 }
 
 /* 标签项样式 */
@@ -724,11 +742,13 @@
 /* Tab内容容器 */
 .popup_container .popup_tab_content {
     display: none;
-    max-height: 290px;
+    flex: 1;
     overflow-y: auto;
+    overflow-x: hidden;
     scrollbar-width: thin;
     scrollbar-color: color-mix(in srgb, var(--p-button-text-secondary-color), transparent 50%) transparent;
     padding-bottom: 8px;
+    min-height: 0; /* 允许flex收缩 */
 }
 
 .popup_container .popup_tab_content::-webkit-scrollbar {
@@ -745,7 +765,8 @@
 }
 
 .popup_container .popup_tab_content.active {
-    display: block;
+    display: flex;
+    flex-direction: column;
 }
 
 /* 滚动指示器 - PrimeVue 风格 */
@@ -893,17 +914,25 @@
 
 /* 标签弹窗的内容区域适应动态高度 */
 .popup_container.tag_popup .popup_tab_content {
-    max-height: none;
-    /* 移除固定高度限制 */
-    height: calc(100% - 50px);
-    /* 动态计算高度，减去标题栏和标签栏的高度 */
+    flex: 1;
+    min-height: 0; /* 允许flex收缩 */
+    overflow-y: auto; /* 只有标签页内容容器有滚动条 */
+    overflow-x: hidden;
 }
 
 .popup_container.tag_popup .tag_category_container {
-    max-height: none;
-    /* 移除固定高度限制 */
-    height: 100%;
-    /* 占满可用高度 */
+    flex: 1;
+    min-height: 0; /* 允许flex收缩 */
+    overflow: visible; /* 移除滚动条，让父容器处理 */
+}
+
+/* 确保手风琴内容不产生滚动条 */
+.popup_container.tag_popup .tag_accordion_content {
+    overflow: visible !important;
+}
+
+.popup_container.tag_popup .tag_accordion_content.active {
+    overflow: visible !important;
 }
 
 .popup_container.tag_popup .tag_search_result_list {

js/modules/PromptAssistant.js

@@ -635,11 +635,38 @@ class PromptAssistant {
             widget._eventCleanupFunctions = widget._eventCleanupFunctions || [];
             widget._eventCleanupFunctions.push(removeBlurListener);
 
-            // 添加输入事件监听，实时更新撤销/重做按钮状态
+            // 添加输入事件监听，实时更新撤销/重做按钮状态和位置调整
             const removeInputListener = EventManager.addDOMListener(inputWidget.inputEl, 'input', () => {
                 UIToolkit.updateUndoRedoButtonState(widget, HistoryCacheService);
+                // 检测滚动条状态并调整位置
+                this._adjustPositionForScrollbar(widget, inputWidget.inputEl);
             });
             widget._eventCleanupFunctions.push(removeInputListener);
+
+            // 添加ResizeObserver监听输入框尺寸变化
+            if (window.ResizeObserver) {
+                const resizeObserver = new ResizeObserver(() => {
+                    // 延迟执行，确保浏览器完成布局更新
+                    setTimeout(() => {
+                        this._adjustPositionForScrollbar(widget, inputWidget.inputEl);
+                    }, 10);
+                });
+
+                resizeObserver.observe(inputWidget.inputEl);
+
+                // 添加清理函数
+                widget._eventCleanupFunctions.push(() => {
+                    resizeObserver.disconnect();
+                });
+            } else {
+                // 降级方案：监听window resize事件
+                const removeResizeListener = EventManager.addDOMListener(window, 'resize',
+                    EventManager.debounce(() => {
+                        this._adjustPositionForScrollbar(widget, inputWidget.inputEl);
+                    }, 100)
+                );
+                widget._eventCleanupFunctions.push(removeResizeListener);
+            }
         }
 
         return widget;
@@ -705,6 +732,11 @@ class PromptAssistant {
             this._setupUIEventHandling(widget, inputEl, containerDiv);
             this._setupUIPosition(widget, inputEl, containerDiv, canvasContainerRect);
 
+            // 初始滚动条检测和位置调整
+            setTimeout(() => {
+                this._adjustPositionForScrollbar(widget, inputEl);
+            }, 100); // 延迟执行，确保DOM完全渲染
+
             // 默认隐藏状态
             containerDiv.style.display = 'none';
 
@@ -1967,6 +1999,65 @@ class PromptAssistant {
         return button;
     }
 
+    /**
+     * 检测输入框是否有滚动条
+     * @param {HTMLElement} inputEl - 输入框元素
+     * @returns {boolean} 是否有垂直滚动条
+     */
+    _detectScrollbar(inputEl) {
+        if (!inputEl || inputEl.tagName !== 'TEXTAREA') {
+            return false;
+        }
+
+        try {
+            // 检查垂直滚动条：scrollHeight > clientHeight
+            const hasVerticalScrollbar = inputEl.scrollHeight > inputEl.clientHeight;
+            logger.debug(`[滚动条检测] 输入框滚动状态 | scrollHeight: ${inputEl.scrollHeight} | clientHeight: ${inputEl.clientHeight} | 有滚动条: ${hasVerticalScrollbar}`);
+            return hasVerticalScrollbar;
+        } catch (error) {
+            logger.error(`[滚动条检测] 检测失败 | 错误: ${error.message}`);
+            return false;
+        }
+    }
+
+    /**
+     * 根据滚动条状态调整小助手位置
+     * @param {Object} widget - 小助手实例
+     * @param {HTMLElement} inputEl - 输入框元素
+     */
+    _adjustPositionForScrollbar(widget, inputEl) {
+        if (!widget?.element || !inputEl) return;
+
+        const hasScrollbar = this._detectScrollbar(inputEl);
+        const containerDiv = widget.element;
+
+        // 检查当前定位模式
+        const isStandardMode = containerDiv.style.position !== 'fixed';
+
+        if (isStandardMode) {
+            // ---标准定位模式调整---
+            const rightOffset = hasScrollbar ? '16px' : '4px'; // 有滚动条时向左偏移10px
+            containerDiv.style.right = rightOffset;
+            logger.debug(`[位置调整] 标准方案 | 有滚动条: ${hasScrollbar} | 右偏移: ${rightOffset}`);
+        } else {
+            // ---兼容定位模式调整---
+            // 需要重新计算位置，因为固定定位使用的是left属性
+            const inputRect = inputEl.getBoundingClientRect();
+            const offsetRight = hasScrollbar ? 18 : 6; // 有滚动条时增加10px偏移
+
+            // 临时隐藏以获取正确尺寸
+            containerDiv.style.visibility = 'hidden';
+            void containerDiv.offsetWidth;
+
+            // 计算新位置
+            const newLeft = inputRect.right - containerDiv.offsetWidth - offsetRight;
+            containerDiv.style.left = `${newLeft}px`;
+            containerDiv.style.visibility = 'visible';
+
+            logger.debug(`[位置调整] 兼容方案 | 有滚动条: ${hasScrollbar} | 左偏移: ${newLeft}px`);
+        }
+    }
+
     /**
      * 设置UI位置
      * 使用绝对定位方式
@@ -2116,8 +2207,9 @@ class PromptAssistant {
                         // 强制回流以获取正确尺寸
                         void containerDiv.offsetWidth;
 
-                        // 现在设置位置 - 放置在输入框右下角
-                        const offsetRight = 6; // 右侧偏移
+                        // 现在设置位置 - 放置在输入框右下角，考虑滚动条状态
+                        const hasScrollbar = inputEl.tagName === 'TEXTAREA' && inputEl.scrollHeight > inputEl.clientHeight;
+                        const offsetRight = hasScrollbar ? 16 : 6; // 有滚动条时增加10px偏移
                         const offsetBottom = 4;
 
                         containerDiv.style.left = `${inputRect.right - containerDiv.offsetWidth - offsetRight}px`;