Merge pull request '提示框优化' (#15) from wpd_alert3 into master

Reviewed-on: #15

view/templates/admin/formula_list.html

@@ -96,7 +96,7 @@
                             <td>
                                 <div class="formula-item" style="display: flex;flex-wrap: wrap;border-bottom: 1px dashed #ccc;padding-bottom: 10px">
                                     {foreach from=$item.formula item=value}
-                                    <span class="item" style="flex-basis: auto;white-space: nowrap;padding-left:20px">{$value.name}{if $value.desc}（{$value.desc}）{/if}  {$value.num_str}</span>
+                                    <span class="item" style="flex-basis: auto;white-space: nowrap;padding-left:20px;min-width: 100px">{$value.name}{if $value.desc}（{$value.desc}）{/if}  {$value.num_str}</span>
                                     {/foreach}
                                 </div>
                                 <p style="padding:15px 20px 0">{$item.method}</p>
@@ -236,13 +236,11 @@
         });
     }
 
-    window.onload = function() {
+    function adjustFlexWidth(container) {
-        const formulaitems = document.querySelectorAll('.formula-item');
-        formulaitems.forEach(container => {
         const items = container.querySelectorAll('.item');
         let maxWidth = 0;
 
-            // 获取每个 container 内部子项的最大宽度
+        // 获取每个容器内子项的最大宽度
         items.forEach(item => {
             const itemWidth = item.offsetWidth;
             if (itemWidth > maxWidth) {
@@ -254,6 +252,29 @@
         items.forEach(item => {
             item.style.flexBasis = maxWidth + 'px';
         });
+    }
+
+    window.onload = function() {
+        const containers = document.querySelectorAll('.formula-item');
+
+        containers.forEach(container => {
+            const initialWidth = container.offsetWidth;
+
+            // 初始判断是否已换行
+            const items = container.querySelectorAll('.item');
+            const totalItemsWidth = Array.from(items).reduce((acc, item) => acc + item.offsetWidth, 0);
+
+            if (totalItemsWidth > initialWidth) {
+                adjustFlexWidth(container); // 换行时计算最大宽度
+            }
+
+            // 监听窗口大小变化，动态调整
+            window.addEventListener('resize', () => {
+                const newWidth = container.offsetWidth;
+                if (totalItemsWidth > newWidth) {
+                    adjustFlexWidth(container); // 换行时更新
+                }
+            });
         });
     };
 </script>