feat(P4): precompute移植+app.js sources双向回填+回归1003/1003+验收体积/文件/data.json

2026-09-12 14:18:41 +08:00
parent 16f365a045
commit c65a69c34e
401 changed files with 22932 additions and 140 deletions
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Aurora Admin · SummaryRowTable</title>
+  <link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
+  <link rel="stylesheet" href="./SummaryRowTable.css" />
+</head>
+<body>
+  <div class="aa-page">
+    <h2 class="aa-h2">SummaryRowTable 统计汇总表格</h2>
+    <p class="aa-desc">表格底部显示汇总行（合计 / 平均值 / 最大值 / 最小值 / 计数），可配置汇总字段。</p>
+
+    <div class="aa-demo">
+      <div class="aa-demo__title">销售明细与汇总</div>
+      <table class="aa-sumtable" id="sumtable">
+        <thead><tr><th>产品</th><th>数量</th><th>单价</th><th>金额</th></tr></thead>
+        <tbody></tbody>
+        <tfoot></tfoot>
+      </table>
+    </div>
+  </div>
+
+  <script>
+    var data = [
+      { name: '基础版', qty: 10, price: 99, amount: 990 },
+      { name: '标准版', qty: 6, price: 199, amount: 1194 },
+      { name: '旗舰版', qty: 3, price: 499, amount: 1497 }
+    ];
+    // 汇总配置：字段 -> 类型
+    var summary = { qty: 'sum', amount: 'sum', price: 'avg' };
+    var cols = ['name', 'qty', 'price', 'amount'];
+
+    function compute(key, type) {
+      var arr = data.map(function (d) { return d[key]; });
+      if (type === 'sum') return arr.reduce(function (a, b) { return a + b; }, 0);
+      if (type === 'avg') return (arr.reduce(function (a, b) { return a + b; }, 0) / arr.length).toFixed(1);
+      if (type === 'max') return Math.max.apply(null, arr);
+      if (type === 'min') return Math.min.apply(null, arr);
+      if (type === 'count') return arr.length;
+      return '';
+    }
+
+    var tbody = document.querySelector('#sumtable tbody');
+    tbody.innerHTML = data.map(function (d) {
+      return '<tr><td>' + d.name + '</td><td>' + d.qty + '</td><td>' + d.price + '</td><td class="' +
+        (d.amount >= 1200 ? 'is-pos' : '') + '">¥' + d.amount + '</td></tr>';
+    }).join('');
+
+    var tfoot = document.querySelector('#sumtable tfoot');
+    var cells = cols.map(function (c) {
+      if (c === 'name') return '<td class="aa-sum-label">合计 / 平均</td>';
+      if (summary[c]) return '<td>' + compute(c, summary[c]) + '</td>';
+      return '<td></td>';
+    });
+    tfoot.innerHTML = '<tr class="aa-sumrow">' + cells.join('') + '</tr>';
+  </script>
+</body>
+</html>
@@ -0,0 +1,57 @@
+import React from 'react';
+import './SummaryRowTable.css';
+
+function compute(data, key, type) {
+  const arr = data.map((d) => Number(d[key]) || 0);
+  if (!arr.length) return '';
+  if (type === 'sum') return arr.reduce((a, b) => a + b, 0);
+  if (type === 'avg') return +(arr.reduce((a, b) => a + b, 0) / arr.length).toFixed(1);
+  if (type === 'max') return Math.max(...arr);
+  if (type === 'min') return Math.min(...arr);
+  if (type === 'count') return arr.length;
+  return '';
+}
+
+export default function SummaryRowTable({
+  data = [],
+  columns = [],
+  summary = {},
+  labelKey = 'name',
+  labelText = '合计 / 平均'
+}) {
+  return (
+    <table className="aa-sumtable">
+      <thead>
+        <tr>
+          {columns.map((c) => (
+            <th key={c.key}>{c.title}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((row, i) => (
+          <tr key={i}>
+            {columns.map((c) => (
+              <td key={c.key} className={c.pos && row[c.key] >= c.pos ? 'is-pos' : ''}>
+                {row[c.key]}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+      <tfoot>
+        <tr className="aa-sumrow">
+          {columns.map((c) => (
+            <td key={c.key} className={c.key === labelKey ? 'aa-sum-label' : ''}>
+              {c.key === labelKey
+                ? labelText
+                : summary[c.key]
+                ? compute(data, c.key, summary[c.key])
+                : ''}
+            </td>
+          ))}
+        </tr>
+      </tfoot>
+    </table>
+  );
+}
@@ -0,0 +1,48 @@
+<template>
+  <table class="aa-sumtable">
+    <thead><tr><th v-for="c in columns" :key="c.key">{{ c.title }}</th></tr></thead>
+    <tbody>
+      <tr v-for="(row, i) in data" :key="i">
+        <td v-for="c in columns" :key="c.key" :class="cellClass(row, c)">{{ fmt(row[c.key]) }}</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr class="aa-sumrow">
+        <td v-for="c in columns" :key="c.key" :class="{ 'aa-sum-label': c.key === labelKey }">
+          {{ c.key === labelKey ? labelText : (summary[c.key] ? fmt(compute(c.key, summary[c.key])) : '') }}
+        </td>
+      </tr>
+    </tfoot>
+  </table>
+</template>
+
+<script>
+export default {
+  name: 'AaSummaryRowTable',
+  props: {
+    data: { type: Array, default: () => [] },
+    columns: { type: Array, default: () => [] },
+    summary: { type: Object, default: () => ({}) },
+    labelKey: { type: String, default: 'name' },
+    labelText: { type: String, default: '合计 / 平均' }
+  },
+  methods: {
+    fmt(v) { return v; },
+    cellClass(row, c) {
+      return c.pos && row[c.key] >= c.pos ? 'is-pos' : '';
+    },
+    compute(key, type) {
+      var arr = this.data.map(function (d) { return Number(d[key]) || 0; });
+      if (!arr.length) return '';
+      if (type === 'sum') return arr.reduce(function (a, b) { return a + b; }, 0);
+      if (type === 'avg') return +(arr.reduce(function (a, b) { return a + b; }, 0) / arr.length).toFixed(1);
+      if (type === 'max') return Math.max.apply(null, arr);
+      if (type === 'min') return Math.min.apply(null, arr);
+      if (type === 'count') return arr.length;
+      return '';
+    }
+  }
+};
+</script>
+
+<style src="./SummaryRowTable.css"></style>
@@ -0,0 +1,43 @@
+<template>
+  <table class="aa-sumtable">
+    <thead><tr><th v-for="c in columns" :key="c.key">{{ c.title }}</th></tr></thead>
+    <tbody>
+      <tr v-for="(row, i) in data" :key="i">
+        <td v-for="c in columns" :key="c.key" :class="cellClass(row, c)">{{ row[c.key] }}</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr class="aa-sumrow">
+        <td v-for="c in columns" :key="c.key" :class="{ 'aa-sum-label': c.key === labelKey }">
+          {{ c.key === labelKey ? labelText : (summary[c.key] ? compute(c.key, summary[c.key]) : '') }}
+        </td>
+      </tr>
+    </tfoot>
+  </table>
+</template>
+
+<script setup>
+const props = defineProps({
+  data: { type: Array, default: () => [] },
+  columns: { type: Array, default: () => [] },
+  summary: { type: Object, default: () => ({}) },
+  labelKey: { type: String, default: 'name' },
+  labelText: { type: String, default: '合计 / 平均' }
+});
+
+function cellClass(row, c) {
+  return c.pos && row[c.key] >= c.pos ? 'is-pos' : '';
+}
+function compute(key, type) {
+  const arr = props.data.map((d) => Number(d[key]) || 0);
+  if (!arr.length) return '';
+  if (type === 'sum') return arr.reduce((a, b) => a + b, 0);
+  if (type === 'avg') return +(arr.reduce((a, b) => a + b, 0) / arr.length).toFixed(1);
+  if (type === 'max') return Math.max(...arr);
+  if (type === 'min') return Math.min(...arr);
+  if (type === 'count') return arr.length;
+  return '';
+}
+</script>
+
+<style src="./SummaryRowTable.css"></style>