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,23 +236,44 @@
         });
     }
 
+    function adjustFlexWidth(container) {
+        const items = container.querySelectorAll('.item');
+        let maxWidth = 0;
+
+        // 获取每个容器内子项的最大宽度
+        items.forEach(item => {
+            const itemWidth = item.offsetWidth;
+            if (itemWidth > maxWidth) {
+                maxWidth = itemWidth;
+            }
+        });
+
+        // 设置所有子项宽度为最大内容宽度
+        items.forEach(item => {
+            item.style.flexBasis = maxWidth + 'px';
+        });
+    }
+
     window.onload = function() {
-        const formulaitems = document.querySelectorAll('.formula-item');
-        formulaitems.forEach(container => {
+        const containers = document.querySelectorAll('.formula-item');
+
+        containers.forEach(container => {
+            const initialWidth = container.offsetWidth;
+
+            // 初始判断是否已换行
             const items = container.querySelectorAll('.item');
-            let maxWidth = 0;
+            const totalItemsWidth = Array.from(items).reduce((acc, item) => acc + item.offsetWidth, 0);
 
-            // 获取每个 container 内部子项的最大宽度
-            items.forEach(item => {
-                const itemWidth = item.offsetWidth;
-                if (itemWidth > maxWidth) {
-                    maxWidth = itemWidth;
-                }
-            });
+            if (totalItemsWidth > initialWidth) {
+                adjustFlexWidth(container); // 换行时计算最大宽度
+            }
 
-            // 设置所有子项宽度为最大内容宽度
-            items.forEach(item => {
-                item.style.flexBasis = maxWidth + 'px';
+            // 监听窗口大小变化，动态调整
+            window.addEventListener('resize', () => {
+                const newWidth = container.offsetWidth;
+                if (totalItemsWidth > newWidth) {
+                    adjustFlexWidth(container); // 换行时更新
+                }
             });
         });
     };