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,148 @@
+<template>
+  <div class="aa-table">
+    <table>
+      <thead>
+        <tr>
+          <th v-if="selectable" class="col-selection" style="width:48px">
+            <input
+              type="checkbox" class="checkbox"
+              :checked="allSelected"
+              v-indeterminate="someSelected"
+              @change="toggleAll"
+            >
+          </th>
+          <th
+            v-for="col in columns" :key="col.key || col.title"
+            :class="[{ 'align-right': col.align === 'right' }, { 'sortable': col.sortable }, col.fixed ? 'col-fixed' : '']"
+            :style="col.width ? { width: col.width + 'px' } : null"
+            @click="onSort(col)"
+          >
+            {{ col.title }}
+            <span v-if="col.sortable" class="sort-ind" :class="{ active: sortKey === col.key }">
+              {{ sortKey === col.key ? (sortOrder === 'asc' ? '↑' : sortOrder === 'desc' ? '↓' : '↕') : '↕' }}
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="!sortedData.length">
+          <td class="empty" :colspan="colCount">{{ emptyText }}</td>
+        </tr>
+        <tr
+          v-for="(row, index) in sortedData" :key="row[rowKey]"
+          :class="{ 'is-selected': isSelected(row[rowKey]) }"
+        >
+          <td v-if="selectable" class="col-selection">
+            <input type="checkbox" class="checkbox" :checked="isSelected(row[rowKey])" @change="toggleRow(row[rowKey])">
+          </td>
+          <td
+            v-for="col in columns" :key="col.key || col.title"
+            :class="[{ 'align-right': col.align === 'right' }, col.fixed ? 'col-fixed' : '', col.type === 'action' ? 'col-action' : '']"
+          >
+            <slot v-if="col.type === 'action'" name="action" :row="row" :index="index"></slot>
+            <template v-else>{{ row[col.key] }}</template>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div v-if="loading" class="loading-mask"><span class="spinner"></span></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AaTable',
+  directives: {
+    indeterminate(el, binding) { el.indeterminate = !!binding.value; }
+  },
+  props: {
+    columns: { type: Array, required: true },   // [{ key, title, align, sortable, width, fixed, type }]
+    data: { type: Array, default: () => [] },
+    rowKey: { type: String, default: 'id' },
+    selectable: { type: Boolean, default: false },
+    selectedKeys: { type: Array, default: () => [] },
+    loading: { type: Boolean, default: false },
+    emptyText: { type: String, default: '暂无数据' }
+  },
+  data() {
+    return { sortKey: null, sortOrder: null };   // order: asc | desc | null
+  },
+  computed: {
+    colCount() {
+      return this.columns.length + (this.selectable ? 1 : 0);
+    },
+    allSelected() {
+      return this.data.length > 0 && this.selectedKeys.length === this.data.length;
+    },
+    someSelected() {
+      return this.selectedKeys.length > 0 && this.selectedKeys.length < this.data.length;
+    },
+    sortedData() {
+      if (!this.sortKey) return this.data;
+      const k = this.sortKey;
+      const dir = this.sortOrder === 'asc' ? 1 : -1;
+      return [...this.data].sort((a, b) => {
+        const av = a[k], bv = b[k];
+        if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * dir;
+        return String(av).localeCompare(String(bv), 'zh') * dir;
+      });
+    }
+  },
+  methods: {
+    isSelected(id) { return this.selectedKeys.includes(id); },
+    toggleRow(id) {
+      const next = this.isSelected(id)
+        ? this.selectedKeys.filter(x => x !== id)
+        : [...this.selectedKeys, id];
+      this.$emit('update:selectedKeys', next);
+      this.$emit('selection-change', next);
+    },
+    toggleAll() {
+      const next = this.allSelected ? [] : this.data.map(r => r[this.rowKey]);
+      this.$emit('update:selectedKeys', next);
+      this.$emit('selection-change', next);
+    },
+    onSort(col) {
+      if (!col.sortable) return;
+      if (this.sortKey !== col.key) {
+        this.sortKey = col.key; this.sortOrder = 'asc';
+      } else {
+        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : this.sortOrder === 'desc' ? null : 'asc';
+        if (this.sortOrder === null) this.sortKey = null;
+      }
+      this.$emit('sort-change', { key: this.sortKey, order: this.sortOrder });
+    }
+  }
+};
+</script>
+
+<!-- 样式对齐 components.css 与 table.json 契约 -->
+<style>
+.aa-table { width: 100%; border: 1px solid #E8ECF1; border-radius: 8px; overflow: hidden; background: #fff; position: relative; }
+.aa-table table { width: 100%; border-collapse: collapse; font-size: 14px; color: #262626; }
+.aa-table thead th {
+  background: #FAFAFA; color: #262626; font-weight: 600; height: 48px; text-align: left;
+  padding: 0 16px; border-bottom: 1px solid #E8ECF1; white-space: nowrap;
+}
+.aa-table tbody td { height: 48px; padding: 0 16px; border-bottom: 1px solid #E8ECF1; text-align: left; }
+.aa-table tbody tr:last-child td { border-bottom: none; }
+.aa-table tbody tr:hover { background: #F5F7FA; }
+.aa-table tbody tr.is-selected { background: #F0F5FF; }
+.aa-table .align-right { text-align: right; }
+.aa-table .sortable { cursor: pointer; user-select: none; }
+.aa-table .sort-ind { color: #767676; margin-left: 4px; }
+.aa-table .sort-ind.active { color: #2F54EB; }
+.aa-table .col-action { text-align: right; }
+.aa-table .col-selection { text-align: center; }
+.aa-table .checkbox { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }
+.aa-table .empty { padding: 48px 16px; text-align: center; color: #767676; font-size: 14px; }
+.aa-table .loading-mask {
+  position: absolute; inset: 0; background: rgba(255,255,255,0.7); display: flex;
+  align-items: center; justify-content: center; z-index: 2;
+}
+.aa-table .spinner {
+  width: 20px; height: 20px; border: 2px solid #2F54EB; border-top-color: transparent;
+  border-radius: 50%; animation: aa-tbl-spin .6s linear infinite;
+}
+@keyframes aa-tbl-spin { to { transform: rotate(360deg); } }
+</style>