first commit

AIEC-server/js/force-text-wrap.js

@@ -0,0 +1,155 @@
+/**
+ * 强制文本换行处理
+ * 解决列表项中文本不换行的问题
+ */
+
+(function() {
+    'use strict';
+    
+    /**
+     * 处理列表项的换行
+     */
+    function processListItems() {
+        // 获取所有消息中的列表项
+        const listItems = document.querySelectorAll(
+            '.ai-message li, .user-message li, .message li, #chatMessages li'
+        );
+        
+        listItems.forEach(li => {
+            // 获取列表项的计算样式
+            const computedStyle = window.getComputedStyle(li);
+            const parentWidth = li.parentElement.offsetWidth;
+            
+            // 如果列表项内容超出父容器宽度，强制设置样式
+            if (li.scrollWidth > parentWidth) {
+                li.style.wordBreak = 'break-all';
+                li.style.overflowWrap = 'anywhere';
+                li.style.whiteSpace = 'normal';
+                li.style.maxWidth = '100%';
+            }
+            
+            // 处理列表项中的所有文本节点
+            const walker = document.createTreeWalker(
+                li,
+                NodeFilter.SHOW_TEXT,
+                null,
+                false
+            );
+            
+            let textNode;
+            while (textNode = walker.nextNode()) {
+                const text = textNode.textContent;
+                // 检查是否包含长连续字符串（超过30个字符没有空格）
+                if (text && /\S{30,}/.test(text)) {
+                    // 在长字符串中插入零宽空格以允许换行
+                    const newText = text.replace(/(\S{20})/g, '$1\u200B');
+                    if (newText !== text) {
+                        textNode.textContent = newText;
+                    }
+                }
+            }
+        });
+    }
+    
+    /**
+     * 设置全局样式
+     */
+    function setGlobalStyles() {
+        // 检查是否已经添加了样式
+        if (document.getElementById('force-wrap-styles')) {
+            return;
+        }
+        
+        // 创建style元素
+        const style = document.createElement('style');
+        style.id = 'force-wrap-styles';
+        style.textContent = `
+            /* 强制列表项换行 */
+            .ai-message li,
+            .user-message li,
+            .message li,
+            #chatMessages li {
+                word-break: break-all !important;
+                overflow-wrap: anywhere !important;
+                white-space: normal !important;
+                max-width: 100% !important;
+                line-break: anywhere !important;
+            }
+            
+            /* 列表容器设置 */
+            .ai-message ul,
+            .ai-message ol,
+            .user-message ul,
+            .user-message ol,
+            .message ul,
+            .message ol,
+            #chatMessages ul,
+            #chatMessages ol {
+                max-width: 100% !important;
+                width: 100% !important;
+            }
+        `;
+        
+        // 添加到head
+        document.head.appendChild(style);
+    }
+    
+    /**
+     * 监听DOM变化
+     */
+    function setupObserver() {
+        const chatContainer = document.getElementById('chatMessages');
+        if (!chatContainer) {
+            setTimeout(setupObserver, 500);
+            return;
+        }
+        
+        // 创建观察器
+        const observer = new MutationObserver((mutations) => {
+            // 当有新消息添加时处理
+            let hasNewMessages = false;
+            mutations.forEach((mutation) => {
+                if (mutation.addedNodes.length > 0) {
+                    hasNewMessages = true;
+                }
+            });
+            
+            if (hasNewMessages) {
+                // 延迟处理，等待渲染完成
+                setTimeout(processListItems, 100);
+            }
+        });
+        
+        // 开始观察
+        observer.observe(chatContainer, {
+            childList: true,
+            subtree: true
+        });
+    }
+    
+    /**
+     * 初始化
+     */
+    function init() {
+        // 设置全局样式
+        setGlobalStyles();
+        
+        // DOM加载完成后执行
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => {
+                processListItems();
+                setupObserver();
+            });
+        } else {
+            processListItems();
+            setupObserver();
+        }
+        
+        // 定期检查（后备方案）
+        setInterval(processListItems, 3000);
+    }
+    
+    // 启动
+    init();
+    
+})();