Forráskód Böngészése

style: 报表改为固定布局填满宽度,去掉右侧空白

- 改为 table-layout: fixed:店铺 220 / 日期 72 定宽,指标列均分剩余宽度,表格铺满卡片,不再留一大片空白
- 字段较多时按 104px/列 计算最小宽度,超出则横向滚动(店铺列仍吸左)
- 移除上一版的末尾填充列方案
liangzhao 2 hete
szülő
commit
4a333e6b39
2 módosított fájl, 11 hozzáadás és 16 törlés
  1. 2 5
      public/ops.js
  2. 9 11
      public/style.css

+ 2 - 5
public/ops.js

@@ -457,13 +457,12 @@
     const fields = activeFields(data);
     if (!fields.length) return '<div class="empty-hint"><p>请至少选择一个字段</p></div>';
     const dates = data.dates || [];
-    const colCount = fields.length + 3;
+    const colCount = fields.length + 2;
 
     const head = `<tr>
       <th class="ops-shop-col">店铺</th>
       <th class="ops-date-col">日期</th>
       ${fields.map((f) => `<th class="ops-metric-col ${f.type === 'text' ? 'ops-col-text' : 'ops-col-num'}" title="${esc(f.label)}">${esc(f.label)}</th>`).join('')}
-      <th class="ops-filler-col"></th>
     </tr>`;
 
     const body = data.groups.map((group, groupIdx) => {
@@ -480,7 +479,6 @@
           }</td>` : ''}
           <td class="ops-date-cell">${shortDate(date)}</td>
           ${fields.map((f) => metricCell(shop, f, date)).join('')}
-          <td class="ops-filler"></td>
         </tr>`).join('');
       }).join('');
 
@@ -491,7 +489,6 @@
           const v = subtotalValue(group, f, date);
           return `<td class="${f.type === 'text' ? 'ops-text-cell' : 'ops-num'} ops-subtotal">${v == null ? '–' : fmtValue(v, f.type)}</td>`;
         }).join('')}
-        <td class="ops-filler ops-subtotal"></td>
       </tr>`).join('');
 
       return schoolRow + shopRows + subtotalRows;
@@ -501,7 +498,7 @@
     return `<section class="ops-block">
       <div class="ops-block-head"><h2>运营明细</h2><span>${shopCount} 家门店 · ${dates.length} 天 · ${fields.length} 个字段</span></div>
       <div class="ops-table-wrap">
-        <table class="ops-table ops-table-wide">
+        <table class="ops-table ops-table-wide" style="min-width: ${240 + 72 + fields.length * 104}px">
           <thead>${head}</thead>
           <tbody>${body}</tbody>
         </table>

+ 9 - 11
public/style.css

@@ -1324,19 +1324,17 @@ main.content { padding: var(--page-padding-y) var(--page-padding-x) var(--page-p
 .ops-table thead th.ops-col-text { text-align: left; }
 .ops-text-cell { text-align: left; color: var(--text); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
 
-/* 列宽按内容自适应:日期与指标收缩到内容宽,店铺列固定 220px,剩余空间交给填充列 */
-.ops-table-wide { width: 100%; margin: 0; table-layout: auto; }
+/* 报表列宽:固定布局,店铺 240 / 日期 72 定宽,指标列均分剩余宽度 */
+.ops-table-wide { width: 100%; table-layout: fixed; }
+.ops-table-wide th.ops-shop-col,
+.ops-table-wide td.ops-shop-cell { width: 240px; border-right: 1px solid var(--border-light); }
 .ops-table-wide th.ops-date-col,
-.ops-table-wide td.ops-date-cell { width: 64px; min-width: 64px; }
+.ops-table-wide td.ops-date-cell { width: 72px; }
 .ops-table-wide th.ops-metric-col,
 .ops-table-wide td.ops-num,
-.ops-table-wide td.ops-text-cell { width: 1%; white-space: nowrap; }
-.ops-table-wide th.ops-metric-col { min-width: 96px; padding-left: 22px; padding-right: 22px; }
+.ops-table-wide td.ops-text-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ops-table-wide th.ops-metric-col { padding-left: 18px; padding-right: 18px; }
 .ops-table-wide td.ops-num,
-.ops-table-wide td.ops-text-cell { padding-left: 22px; padding-right: 22px; }
-.ops-table-wide th.ops-shop-col,
-.ops-table-wide td.ops-shop-cell { width: 220px; min-width: 220px; max-width: 220px; border-right: 1px solid var(--border-light); }
+.ops-table-wide td.ops-text-cell { padding-left: 18px; padding-right: 18px; }
 .ops-table-wide tbody td { border-bottom-color: #f0ece7; }
-.ops-table-wide .ops-filler-col,
-.ops-table-wide .ops-filler { width: auto; padding: 0; border-bottom-color: transparent; border-right: 0; }
-.ops-shop-name { display: inline-block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
+.ops-shop-name { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }