refactor(system): 实现表格自适应高度布局，抽离通用滚动工具hooks

1. 新增useTableScroll组合式函数，动态计算表格滚动高度
2. 改造多个系统页面布局为弹性伸缩容器，解决页面滚动问题
3. 统一表格滚动配置，优化页面视觉体验

client/src/views/system/menu/index.vue

@@ -8,12 +8,14 @@
 				</a-button>
 			</template>
 
+			<div class="table-wrapper" ref="wrapperRef">
 			<a-table
 				:columns="columns"
 				:data-source="menuList"
 				:loading="loading"
 				:pagination="false"
 				row-key="id"
+				:scroll="{ x: 'max-content', y: tableHeight }"
 				:expandable="{
 					defaultExpandAllRows: false,
 					showExpandColumn: true,
@@ -54,6 +56,7 @@
 					</template>
 				</template>
 			</a-table>
+			</div>
 		</a-card>
 
 		<a-modal
@@ -131,6 +134,9 @@ import { ref, reactive, onMounted, computed } from 'vue';
 import { message } from 'ant-design-vue';
 import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
 import { menuApi } from '@/api/menu';
+import { useTableScroll } from '@/composables/useTableScroll';
+
+const { wrapperRef, tableHeight } = useTableScroll({ paginationHeight: 0 });
 
 interface MenuItem {
 	id: number;
@@ -329,12 +335,43 @@ async function handleDelete(record: MenuItem) {
 
 <style scoped lang="less">
 .menu-management {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
 	padding: 20px;
+	box-sizing: border-box;
+
+	:deep(.ant-card) {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		min-height: 0;
+	}
+
+	:deep(.ant-card-body) {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		min-height: 0;
+	}
+
+	.table-wrapper {
+		flex: 1;
+		min-height: 0;
+		overflow: hidden;
+	}
 
 	:deep(.ant-btn-link) {
 		padding: 0 4px;
 	}
 
+	:deep(.ant-table) {
+		height: 100%;
+	}
+
 	:deep(.ant-table-row-expand-icon) {
 		display: inline-flex;
 		align-items: center;