瀏覽代碼

style: 表头与单元格按字段类型对齐

- 数值/金额/比率列:表头右对齐,与右对齐的数字同一视线
- 文本列:表头与单元格左对齐(营业时长、地址等)
- 小计行同样按类型对齐
liangzhao 2 周之前
父節點
當前提交
33c9d781ab
共有 2 個文件被更改,包括 8 次插入 和 2 次删除
  1. 5 2
      public/ops.js
  2. 3 0
      public/style.css

+ 5 - 2
public/ops.js

@@ -411,6 +411,9 @@
     const warn = quality && quality.length
       ? `<span class="ops-warn" title="${esc('解析标记:' + quality.join('、'))}">⚠</span>`
       : '';
+    if (field.type === 'text') {
+      return `<td class="ops-text-cell${value == null ? ' ops-null' : ''}">${fmtValue(value, field.type)}${warn}</td>`;
+    }
     return `<td class="ops-num${value == null ? ' ops-null' : ''}">${fmtValue(value, field.type)}${warn}</td>`;
   }
 
@@ -459,7 +462,7 @@
     const head = `<tr>
       <th class="ops-shop-col">店铺</th>
       <th class="ops-date-col">日期</th>
-      ${fields.map((f) => `<th class="ops-metric-col" title="${esc(f.label)}">${esc(f.label)}</th>`).join('')}
+      ${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('')}
     </tr>`;
 
     const body = data.groups.map((group, groupIdx) => {
@@ -484,7 +487,7 @@
         <td class="ops-subtotal-label" colspan="2">${esc(group.school)} · 小计 · ${shortDate(date)}</td>
         ${fields.map((f) => {
           const v = subtotalValue(group, f, date);
-          return `<td class="ops-num ops-subtotal">${v == null ? '–' : fmtValue(v, f.type)}</td>`;
+          return `<td class="${f.type === 'text' ? 'ops-text-cell' : 'ops-num'} ops-subtotal">${v == null ? '–' : fmtValue(v, f.type)}</td>`;
         }).join('')}
       </tr>`).join('');
 

+ 3 - 0
public/style.css

@@ -1320,3 +1320,6 @@ main.content { padding: var(--page-padding-y) var(--page-padding-x) var(--page-p
 .ops-multi-foot button { flex: 1; padding: 5px 0; font-size: 12px; color: var(--text-2); background: var(--bg); border: 1px solid var(--border); border-radius: 7px; cursor: pointer; }
 .ops-multi-foot button:hover { color: var(--text); background: #fff; }
 .ops-multi-empty { padding: 14px; text-align: center; color: var(--text-3); font-size: 12px; }
+.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; }