瀏覽代碼

style: 报表列宽按字段内容自适应

- 日期列固定 64px,指标列收缩到内容宽(表头与数字同宽),店铺列固定 220px,剩余空间由末尾填充列吸收
- 店铺名超过 300px 省略,避免长店名撑开整列
- 店铺列与数据列之间加细分隔线;行分隔线改为更浅的色
- 撤掉手机端样式(按要求暂不做)
liangzhao 2 周之前
父節點
當前提交
fcc3cce228
共有 2 個文件被更改,包括 22 次插入 和 2 次删除
  1. 5 2
      public/ops.js
  2. 17 0
      public/style.css

+ 5 - 2
public/ops.js

@@ -457,12 +457,13 @@
     const fields = activeFields(data);
     if (!fields.length) return '<div class="empty-hint"><p>请至少选择一个字段</p></div>';
     const dates = data.dates || [];
-    const colCount = fields.length + 2;
+    const colCount = fields.length + 3;
 
     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) => {
@@ -474,11 +475,12 @@
         const blockKey = `b${groupIdx}-${shopIdx}`;
         const alt = shopIdx % 2 === 1 ? ' ops-block-alt' : '';
         return useDates.map((date, i) => `<tr data-block="${blockKey}" class="ops-shop-row${i === 0 ? ' ops-block-start' : ''}${alt}">
-          ${i === 0 ? `<td class="ops-shop-cell" rowspan="${useDates.length}" title="${esc(shop.shopName)}">${esc(shop.shopName)}${
+          ${i === 0 ? `<td class="ops-shop-cell" rowspan="${useDates.length}" title="${esc(shop.shopName)}"><span class="ops-shop-name">${esc(shop.shopName)}</span>${
             shop.status && shop.status !== '已上线' ? `<span class="badge badge-muted ops-status">${esc(shop.status)}</span>` : ''
           }</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('');
 
@@ -489,6 +491,7 @@
           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;

+ 17 - 0
public/style.css

@@ -1323,3 +1323,20 @@ main.content { padding: var(--page-padding-y) var(--page-padding-x) var(--page-p
 .ops-table thead th.ops-col-num { text-align: right; }
 .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; }
+.ops-table-wide th.ops-date-col,
+.ops-table-wide td.ops-date-cell { width: 64px; min-width: 64px; }
+.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-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 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; }