fix: table 高度

web/src/apps/muse/base/table/Table.tsx

@@ -23,7 +23,7 @@ export const Table: React.FC<TableProps> = ({
   // 处理排序
   const handleSort = (field: string) => {
     let newOrder: 'asc' | 'desc' | null = 'asc';
-    
+
     if (sortState.field === field) {
       if (sortState.order === 'asc') {
         newOrder = 'desc';
@@ -31,7 +31,7 @@ export const Table: React.FC<TableProps> = ({
         newOrder = null;
       }
     }
-    
+
     const newSortState = { field: newOrder ? field : null, order: newOrder };
     setSortState(newSortState);
     onSort?.(newSortState.field!, newSortState.order!);
@@ -40,11 +40,11 @@ export const Table: React.FC<TableProps> = ({
   // 排序后的数据
   const sortedData = useMemo(() => {
     if (!sortState.field || !sortState.order) return data;
-    
+
     return [...data].sort((a, b) => {
       const aVal = getNestedValue(a, sortState.field!);
       const bVal = getNestedValue(b, sortState.field!);
-      
+
       if (aVal < bVal) return sortState.order === 'asc' ? -1 : 1;
       if (aVal > bVal) return sortState.order === 'asc' ? 1 : -1;
       return 0;
@@ -57,23 +57,23 @@ export const Table: React.FC<TableProps> = ({
   // 全选/取消全选
   const handleSelectAll = (checked: boolean) => {
     if (!rowSelection) return;
-    
+
     const allKeys = displayData.map(item => item.id);
     const selectedKeys = checked ? allKeys : [];
     const selectedRows = checked ? displayData : [];
-    
+
     rowSelection.onChange?.(selectedKeys, selectedRows);
   };
 
   // 单行选择
   const handleRowSelect = (record: Mark, checked: boolean) => {
     if (!rowSelection) return;
-    
+
     const currentKeys = rowSelection.selectedRowKeys || [];
-    const newKeys = checked 
+    const newKeys = checked
       ? [...currentKeys, record.id]
       : currentKeys.filter(key => key !== record.id);
-    
+
     const selectedRows = data.filter(item => newKeys.includes(item.id));
     rowSelection.onChange?.(newKeys, selectedRows);
   };
@@ -86,7 +86,7 @@ export const Table: React.FC<TableProps> = ({
   // 渲染虚拟滚动行
   const rowRenderer = ({ index, key, style }: any) => {
     const record = displayData[index];
-    
+
     return (
       <div key={key} style={style} className="table-row virtual-row">
         {rowSelection && (
@@ -101,7 +101,7 @@ export const Table: React.FC<TableProps> = ({
         )}
         {columns.map(column => (
           <div key={column.key} className="table-cell" style={{ width: column.width }}>
-            {column.render 
+            {column.render
               ? column.render(getNestedValue(record, column.dataIndex), record, index)
               : getNestedValue(record, column.dataIndex)
             }
@@ -143,7 +143,7 @@ export const Table: React.FC<TableProps> = ({
   const isIndeterminate = selectedKeys.length > 0 && !isAllSelected;
 
   return (
-    <div className="table-container ">
+    <div className="table-container">
       {/* 表格工具栏 */}
       {rowSelection && selectedKeys.length > 0 && (
         <div className="table-toolbar">
@@ -179,7 +179,7 @@ export const Table: React.FC<TableProps> = ({
               </div>
             )}
             {columns.map(column => (
-              <div 
+              <div
                 key={column.key}
                 style={{ width: column.width }}
                 className={`table-header-cell ${column.sortable ? 'sortable' : ''}`}
@@ -187,16 +187,14 @@ export const Table: React.FC<TableProps> = ({
                 <div className="table-header">
                   <span>{column.title}</span>
                   {column.sortable && (
-                    <div 
+                    <div
                       className="sort-indicators"
                       onClick={() => handleSort(column.dataIndex)}
                     >
-                      <span className={`sort-arrow sort-up ${
+                      <span className={`sort-arrow sort-up ${sortState.field === column.dataIndex && sortState.order === 'asc' ? 'active' : ''
-                        sortState.field === column.dataIndex && sortState.order === 'asc' ? 'active' : ''
+                        }`}>▲</span>
-                      }`}>▲</span>
+                      <span className={`sort-arrow sort-down ${sortState.field === column.dataIndex && sortState.order === 'desc' ? 'active' : ''
-                      <span className={`sort-arrow sort-down ${
+                        }`}>▼</span>
-                        sortState.field === column.dataIndex && sortState.order === 'desc' ? 'active' : ''
-                      }`}>▼</span>
                     </div>
                   )}
                 </div>

web/src/apps/muse/base/table/table.css

@@ -8,6 +8,7 @@
   margin-bottom: 24px; /* 底部间距 */
   display: flex;
   flex-direction: column;
+  max-height: calc(100% - 24px); /* 添加最大高度限制 */
 }
 
 /* 工具栏 */
@@ -19,6 +20,8 @@
   background: #f5f5f5;
   border-bottom: 1px solid #e8e8e8;
   flex-shrink: 0; /* 工具栏不压缩，保持固定高度 */
+  min-height: 56px; /* 确保工具栏有固定的最小高度 */
+  box-sizing: border-box; /* 包含padding和border在内的尺寸计算 */
 }
 
 .selected-info {
@@ -36,9 +39,9 @@
   display: flex;
   flex-direction: column;
   flex: 1; /* 占满剩余空间 */
-  height: 100%; /* 占满父容器高度 */
   min-height: 200px; /* 最小高度，避免过小 */
   overflow: hidden; /* 防止溢出 */
+  height: 0; /* 重要：配合flex: 1使用，确保正确计算可用空间 */
 }
 
 /* 固定表头容器 */
@@ -79,6 +82,7 @@
   overflow: hidden;
   background: #fff;
   min-height: 0; /* 重要：允许flex子项收缩 */
+  position: relative; /* 为AutoSizer提供相对定位上下文 */
 }
 
 /* 虚拟行样式 */