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,59 @@
+<!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 · FixedColumnTable</title>
+  <link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
+  <link rel="stylesheet" href="./FixedColumnTable.css" />
+</head>
+<body>
+  <div class="aa-page">
+    <h2 class="aa-h2">FixedColumnTable 固定列表格</h2>
+    <p class="aa-desc">列过多时左右列固定，横向滚动查看其余列，固定列带阴影分隔，支持固定表头。</p>
+
+    <div class="aa-demo">
+      <div class="aa-demo__title">宽表（左固定「姓名」，右固定「操作」）</div>
+      <div class="aa-fixtable-wrap">
+        <table class="aa-fixtable" id="fixtable">
+          <thead><tr id="fixhead"></tr></thead>
+          <tbody id="fixbody"></tbody>
+        </table>
+      </div>
+      <div class="aa-hint">← 向左滚动可查看被固定的左列 / 右列 →</div>
+    </div>
+  </div>
+
+  <script>
+    var cols = [
+      { key: 'name', title: '姓名', fixed: 'left', w: 100 },
+      { key: 'dept', title: '部门', w: 120 },
+      { key: 'role', title: '角色', w: 120 },
+      { key: 'email', title: '邮箱', w: 200 },
+      { key: 'phone', title: '电话', w: 140 },
+      { key: 'city', title: '城市', w: 120 },
+      { key: 'join', title: '入职', w: 120 },
+      { key: 'status', title: '状态', w: 100 },
+      { key: 'op', title: '操作', fixed: 'right', w: 120 }
+    ];
+    var data = [
+      { name: '王伟', dept: '华东大区', role: '销售经理', email: 'wangwei@demo.com', phone: '13800000001', city: '上海', join: '2021-03', status: '在职', op: '编辑' },
+      { name: '李娜', dept: '华南大区', role: '销售', email: 'lina@demo.com', phone: '13800000002', city: '广州', join: '2022-07', status: '在职', op: '编辑' },
+      { name: '张强', dept: '华北大区', role: '售前', email: 'zhangq@demo.com', phone: '13800000003', city: '北京', join: '2020-11', status: '休假', op: '编辑' },
+      { name: '陈静', dept: '研发中心', role: '工程师', email: 'chenj@demo.com', phone: '13800000004', city: '深圳', join: '2023-01', status: '在职', op: '编辑' }
+    ];
+
+    document.getElementById('fixhead').innerHTML = cols.map(function (c) {
+      var cls = c.fixed ? 'aa-fixed aa-fixed-' + c.fixed : '';
+      return '<th class="' + cls + '" style="min-width:' + c.w + 'px">' + c.title + '</th>';
+    }).join('');
+
+    document.getElementById('fixbody').innerHTML = data.map(function (d) {
+      return '<tr>' + cols.map(function (c) {
+        var cls = c.fixed ? 'aa-fixed aa-fixed-' + c.fixed : '';
+        return '<td class="' + cls + (c.key === 'status' && d.status !== '在职' ? ' is-muted' : '') + '">' + d[c.key] + '</td>';
+      }).join('') + '</tr>';
+    }).join('');
+  </script>
+</body>
+</html>
@@ -0,0 +1,35 @@
+import React from 'react';
+import './FixedColumnTable.css';
+
+function fixCls(c) {
+  return c.fixed ? 'aa-fixed aa-fixed-' + c.fixed : '';
+}
+
+export default function FixedColumnTable({ data = [], columns = [] }) {
+  return (
+    <div className="aa-fixtable-wrap">
+      <table className="aa-fixtable">
+        <thead>
+          <tr>
+            {columns.map((c) => (
+              <th key={c.key} className={fixCls(c)} style={{ minWidth: c.w + 'px' }}>
+                {c.title}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, i) => (
+            <tr key={i}>
+              {columns.map((c) => (
+                <td key={c.key} className={fixCls(c)} style={{ minWidth: c.w + 'px' }}>
+                  {row[c.key]}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
@@ -0,0 +1,43 @@
+<template>
+  <div class="aa-fixtable-wrap">
+    <table class="aa-fixtable">
+      <thead>
+        <tr>
+          <th
+            v-for="c in columns"
+            :key="c.key"
+            :class="fixCls(c)"
+            :style="{ minWidth: c.w + 'px' }"
+          >{{ 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="fixCls(c)"
+            :style="{ minWidth: c.w + 'px' }"
+          >{{ row[c.key] }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AaFixedColumnTable',
+  props: {
+    data: { type: Array, default: () => [] },
+    columns: { type: Array, default: () => [] }
+  },
+  methods: {
+    fixCls(c) {
+      return c.fixed ? 'aa-fixed aa-fixed-' + c.fixed : '';
+    }
+  }
+};
+</script>
+
+<style src="./FixedColumnTable.css"></style>
@@ -0,0 +1,38 @@
+<template>
+  <div class="aa-fixtable-wrap">
+    <table class="aa-fixtable">
+      <thead>
+        <tr>
+          <th
+            v-for="c in columns"
+            :key="c.key"
+            :class="fixCls(c)"
+            :style="{ minWidth: c.w + 'px' }"
+          >{{ 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="fixCls(c)"
+            :style="{ minWidth: c.w + 'px' }"
+          >{{ row[c.key] }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  data: { type: Array, default: () => [] },
+  columns: { type: Array, default: () => [] }
+});
+function fixCls(c) {
+  return c.fixed ? 'aa-fixed aa-fixed-' + c.fixed : '';
+}
+</script>
+
+<style src="./FixedColumnTable.css"></style>