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,143 @@
+<!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 · Table (H5)</title>
+<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css">
+<style>
+  /* 对齐 components.css 与 table.json 契约 */
+  .demo { padding: 24px; background: var(--au-color-page-bg); color: var(--au-color-text-body); font-family: var(--font-family); }
+  h1 { font-size: 20px; margin: 0 0 4px; }
+  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }
+
+  .aa-table { width: 100%; border: 1px solid var(--au-color-border); border-radius: 8px; overflow: hidden; background: var(--au-color-card-bg); position: relative; }
+  .aa-table table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--au-color-text-body); }
+  .aa-table thead th {
+    background: var(--au-color-table-header-bg); color: var(--au-color-text-body); font-weight: 600; height: 48px; text-align: left;
+    padding: 0 16px; border-bottom: 1px solid var(--au-color-border); white-space: nowrap;
+  }
+  .aa-table tbody td { height: 48px; padding: 0 16px; border-bottom: 1px solid var(--au-color-border); text-align: left; }
+  .aa-table tbody tr:last-child td { border-bottom: none; }
+  .aa-table tbody tr:hover { background: var(--au-color-page-bg); }
+  .aa-table tbody tr.is-selected { background: var(--au-color-brand-bg); }
+  .aa-table th.align-right, .aa-table td.align-right { text-align: right; }
+  .aa-table .sortable { cursor: pointer; user-select: none; }
+  .aa-table .sort-ind { color: var(--au-color-text-placeholder); margin-left: 4px; }
+  .aa-table .sort-ind.active { color: var(--au-color-brand); }
+  .aa-table .col-action { text-align: right; }
+  .aa-table .link-btn { color: var(--au-color-brand); background: none; border: none; cursor: pointer; font-size: 14px; padding: 0; }
+  .aa-table .link-btn + .link-btn { margin-left: 8px; }
+  .aa-table .link-btn.danger { color: var(--au-color-error); }
+  .aa-table .checkbox { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }
+  .aa-table .empty { padding: 48px 16px; text-align: center; color: var(--au-color-text-placeholder); 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 var(--au-color-brand); border-top-color: transparent;
+    border-radius: 50%; animation: aa-tbl-spin .6s linear infinite;
+  }
+  @keyframes aa-tbl-spin { to { transform: rotate(360deg); } }
+</style>
+</head>
+<body>
+<div class="demo">
+  <h1>Aurora Admin · Table 组件（纯 H5）</h1>
+  <p class="sub">对齐 table.json 契约：表头/行高48px、分割线 #E8ECF1、悬停 #F5F7FA、选中 #F0F5FF、单元格左右16px、数字右对齐、操作列右对齐、加载/空态</p>
+
+  <label style="font-size:13px;color:var(--color-text-secondary);">
+    <input type="checkbox" id="toggleLoading"> 模拟加载态
+  </label>
+
+  <div class="aa-table" role="table" style="margin-top:12px">
+    <table>
+      <thead>
+        <tr>
+          <th style="width:48px"><input type="checkbox" class="checkbox" id="selectAll"></th>
+          <th>客户名称</th>
+          <th>负责人</th>
+          <th class="align-right sortable" id="sortAmount">合同金额<span class="sort-ind" id="sortInd">↕</span></th>
+          <th>状态</th>
+          <th class="col-action">操作</th>
+        </tr>
+      </thead>
+      <tbody id="tbody"></tbody>
+    </table>
+    <div class="loading-mask" id="loading" hidden><span class="spinner"></span></div>
+  </div>
+</div>
+
+<script>
+const data = [
+  { id: 1, name: '北京云图科技', owner: '张伟', amount: 128000, status: '已签约' },
+  { id: 2, name: '上海恒创', owner: '李娜', amount: 86000, status: '跟进中' },
+  { id: 3, name: '广州锐捷', owner: '王芳', amount: 254000, status: '已签约' },
+  { id: 4, name: '深圳智联', owner: '刘强', amount: 43000, status: '待回款' }
+];
+let selected = new Set();
+let sortOrder = null; // 'asc' | 'desc' | null
+
+function rows() {
+  if (!sortOrder) return data;
+  return [...data].sort((a, b) => sortOrder === 'asc' ? a.amount - b.amount : b.amount - a.amount);
+}
+
+function render() {
+  const tbody = document.getElementById('tbody');
+  if (!rows().length) {
+    tbody.innerHTML = `<tr><td class="empty" colspan="6">暂无数据</td></tr>`;
+    return;
+  }
+  tbody.innerHTML = rows().map(r => {
+    const sel = selected.has(r.id) ? 'checked' : '';
+    const cls = selected.has(r.id) ? ' class="is-selected"' : '';
+    return `<tr${cls} data-id="${r.id}">
+      <td><input type="checkbox" class="checkbox row-cb" data-id="${r.id}" ${sel}></td>
+      <td>${r.name}</td>
+      <td>${r.owner}</td>
+      <td class="align-right">¥${r.amount.toLocaleString()}</td>
+      <td>${r.status}</td>
+      <td class="col-action">
+        <button class="link-btn" data-act="edit" data-id="${r.id}">编辑</button>
+        <button class="link-btn danger" data-act="del" data-id="${r.id}">删除</button>
+      </td>
+    </tr>`;
+  }).join('');
+}
+
+document.getElementById('tbody').addEventListener('change', (e) => {
+  if (e.target.classList.contains('row-cb')) {
+    const id = +e.target.dataset.id;
+    e.target.checked ? selected.add(id) : selected.delete(id);
+    render(); syncSelectAll();
+  }
+});
+document.getElementById('tbody').addEventListener('click', (e) => {
+  const b = e.target.closest('[data-act]');
+  if (b) alert(`${b.dataset.act} 行 id=${b.dataset.id}`);
+});
+document.getElementById('selectAll').addEventListener('change', (e) => {
+  selected = e.target.checked ? new Set(data.map(d => d.id)) : new Set();
+  render(); syncSelectAll();
+});
+function syncSelectAll() {
+  const sa = document.getElementById('selectAll');
+  sa.checked = selected.size === data.length && data.length > 0;
+  sa.indeterminate = selected.size > 0 && selected.size < data.length;
+}
+document.getElementById('sortAmount').addEventListener('click', () => {
+  sortOrder = sortOrder === null ? 'asc' : sortOrder === 'asc' ? 'desc' : null;
+  const ind = document.getElementById('sortInd');
+  ind.textContent = sortOrder === 'asc' ? '↑' : sortOrder === 'desc' ? '↓' : '↕';
+  ind.classList.toggle('active', sortOrder !== null);
+  render();
+});
+document.getElementById('toggleLoading').addEventListener('change', (e) => {
+  document.getElementById('loading').hidden = !e.target.checked;
+});
+render(); syncSelectAll();
+</script>
+</body>
+</html>
@@ -0,0 +1,163 @@
+import React, { useState, useMemo } from 'react';
+import './Table.css';
+
+/**
+ * Aurora Admin Table（React）
+ * 对齐 table.json 契约：
+ *  - feature: sortable / selectable / batch-actions（含全选）
+ *  - state:   hover / selected / loading / empty
+ *  - 表头/行高48px、分割线 #E8ECF1、悬停 #F5F7FA、选中 #F0F5FF、单元格左右16px、数字右对齐、操作列右对齐
+ *
+ * columns: [{ key, title, align?:'left'|'right', sortable?, width?, fixed?, type?:'action' }]
+ * 受控选择：selectedKeys={keys} onSelectionChange={setKeys}
+ * 操作列：renderAction={(row, index) => <Buttons/>}
+ */
+function sortData(data, key, order) {
+  if (!key) return data;
+  const dir = order === 'asc' ? 1 : -1;
+  return [...data].sort((a, b) => {
+    const av = a[key], bv = b[key];
+    if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * dir;
+    return String(av).localeCompare(String(bv), 'zh') * dir;
+  });
+}
+
+export default function Table({
+  columns = [],
+  data = [],
+  rowKey = 'id',
+  selectable = false,
+  selectedKeys = [],
+  loading = false,
+  emptyText = '暂无数据',
+  onSelectionChange,
+  onSortChange,
+  renderAction
+}) {
+  const [sortKey, setSortKey] = useState(null);
+  const [sortOrder, setSortOrder] = useState(null);   // asc | desc | null
+
+  const sortedData = useMemo(
+    () => sortData(data, sortKey, sortOrder),
+    [data, sortKey, sortOrder]
+  );
+
+  const allSelected = data.length > 0 && selectedKeys.length === data.length;
+  const someSelected = selectedKeys.length > 0 && selectedKeys.length < data.length;
+
+  const isSelected = (id) => selectedKeys.includes(id);
+  const emitSelection = (next) => onSelectionChange && onSelectionChange(next);
+
+  const toggleRow = (id) => {
+    const next = isSelected(id) ? selectedKeys.filter((x) => x !== id) : [...selectedKeys, id];
+    emitSelection(next);
+  };
+  const toggleAll = () => {
+    const next = allSelected ? [] : data.map((r) => r[rowKey]);
+    emitSelection(next);
+  };
+  const onSort = (col) => {
+    if (!col.sortable) return;
+    let k = sortKey, o = sortOrder;
+    if (k !== col.key) { k = col.key; o = 'asc'; }
+    else { o = o === 'asc' ? 'desc' : o === 'desc' ? null : 'asc'; if (o === null) k = null; }
+    setSortKey(k); setSortOrder(o);
+    onSortChange && onSortChange({ key: k, order: o });
+  };
+
+  const colCount = columns.length + (selectable ? 1 : 0);
+
+  return (
+    <div className="aa-table">
+      <table>
+        <thead>
+          <tr>
+            {selectable && (
+              <th className="col-selection" style={{ width: 48 }}>
+                <input
+                  type="checkbox" className="checkbox"
+                  checked={allSelected} ref={(el) => el && (el.indeterminate = someSelected)}
+                  onChange={toggleAll}
+                />
+              </th>
+            )}
+            {columns.map((col) => (
+              <th
+                key={col.key || col.title}
+                className={[
+                  col.align === 'right' ? 'align-right' : '',
+                  col.sortable ? 'sortable' : '',
+                  col.fixed ? 'col-fixed' : ''
+                ].filter(Boolean).join(' ')}
+                style={col.width ? { width: col.width } : null}
+                onClick={() => onSort(col)}
+              >
+                {col.title}
+                {col.sortable && (
+                  <span className={`sort-ind${sortKey === col.key ? ' active' : ''}`}>
+                    {sortKey === col.key ? (sortOrder === 'asc' ? '↑' : sortOrder === 'desc' ? '↓' : '↕') : '↕'}
+                  </span>
+                )}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {sortedData.length === 0 ? (
+            <tr><td className="empty" colSpan={colCount}>{emptyText}</td></tr>
+          ) : (
+            sortedData.map((row, index) => (
+              <tr key={row[rowKey]} className={isSelected(row[rowKey]) ? 'is-selected' : ''}>
+                {selectable && (
+                  <td className="col-selection">
+                    <input
+                      type="checkbox" className="checkbox"
+                      checked={isSelected(row[rowKey])} onChange={() => toggleRow(row[rowKey])}
+                    />
+                  </td>
+                )}
+                {columns.map((col) => (
+                  <td
+                    key={col.key || col.title}
+                    className={[
+                      col.align === 'right' ? 'align-right' : '',
+                      col.fixed ? 'col-fixed' : '',
+                      col.type === 'action' ? 'col-action' : ''
+                    ].filter(Boolean).join(' ')}
+                  >
+                    {col.type === 'action' && renderAction ? renderAction(row, index) : row[col.key]}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+      {loading && (
+        <div className="loading-mask"><span className="spinner" /></div>
+      )}
+    </div>
+  );
+}
+
+/*
+用法示例：
+import Table from './Table';
+
+const columns = [
+  { key: 'name', title: '客户名称' },
+  { key: 'amount', title: '合同金额', align: 'right', sortable: true },
+  { type: 'action', title: '操作' }
+];
+<Table
+  columns={columns}
+  data={rows}
+  selectable
+  selectedKeys={keys}
+  onSelectionChange={setKeys}
+  renderAction={(row) => (<>
+    <button className="link-btn" onClick={() => edit(row)}>编辑</button>
+    <button className="link-btn danger" onClick={() => del(row)}>删除</button>
+  </>)}
+/>
+*/
@@ -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>
@@ -0,0 +1,139 @@
+<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"
+              :indeterminate.prop="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 setup>
+import { computed, ref } from 'vue';
+
+const props = defineProps({
+  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: () => [] },   // v-model:selectedKeys
+  loading: { type: Boolean, default: false },
+  emptyText: { type: String, default: '暂无数据' }
+});
+
+const emit = defineEmits(['update:selectedKeys', 'selection-change', 'sort-change']);
+
+const sortKey = ref(null);
+const sortOrder = ref(null);   // asc | desc | null
+
+const colCount = computed(() => props.columns.length + (props.selectable ? 1 : 0));
+const allSelected = computed(() => props.data.length > 0 && props.selectedKeys.length === props.data.length);
+const someSelected = computed(() => props.selectedKeys.length > 0 && props.selectedKeys.length < props.data.length);
+
+const sortedData = computed(() => {
+  if (!sortKey.value) return props.data;
+  const k = sortKey.value;
+  const dir = sortOrder.value === 'asc' ? 1 : -1;
+  return [...props.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;
+  });
+});
+
+function isSelected(id) { return props.selectedKeys.includes(id); }
+function toggleRow(id) {
+  const next = isSelected(id)
+    ? props.selectedKeys.filter(x => x !== id)
+    : [...props.selectedKeys, id];
+  emit('update:selectedKeys', next);
+  emit('selection-change', next);
+}
+function toggleAll() {
+  const next = allSelected.value ? [] : props.data.map(r => r[props.rowKey]);
+  emit('update:selectedKeys', next);
+  emit('selection-change', next);
+}
+function onSort(col) {
+  if (!col.sortable) return;
+  if (sortKey.value !== col.key) {
+    sortKey.value = col.key; sortOrder.value = 'asc';
+  } else {
+    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : sortOrder.value === 'desc' ? null : 'asc';
+    if (sortOrder.value === null) sortKey.value = null;
+  }
+  emit('sort-change', { key: sortKey.value, order: sortOrder.value });
+}
+</script>
+
+<!-- 样式对齐 components.css 与 table.json 契约 -->
+<style scoped>
+.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>