feat(admin): 管理端 UI/UX 深度优化——错误/加载/空状态、表单快捷键、移动端适配与无障碍

apps/admin/src/pages/Deposits/DepositModals.tsx

@@ -17,6 +17,7 @@ import { DollarOutlined, InboxOutlined, PlusOutlined } from '@ant-design/icons';
 import PermissionButton from '../../components/PermissionButton';
 import EditableCell from '../../components/EditableCell';
 import type { DepositStudentLookup } from './deposit-student-option';
+import { useSubmitShortcut } from '../../hooks/useSubmitShortcut';
 
 export interface DepositRecord {
   id: number;
@@ -140,6 +141,10 @@ export const DepositModals: React.FC<DepositModalsProps> = ({
   onOpenInstallment,
   onSelectEligible,
 }) => {
+  useSubmitShortcut(batchModal && !saving, onBatchCreate);
+  useSubmitShortcut(createModal && !saving, onCreate);
+  useSubmitShortcut(!!refundModal && !saving, onRefund);
+  useSubmitShortcut(!!installmentModal && !saving, onAddInstallment);
   return (
     <>
       <Modal
@@ -152,7 +157,7 @@ export const DepositModals: React.FC<DepositModalsProps> = ({
         okButtonProps={{ disabled: effectiveSelectedEligibleIds.length === 0 }}
         width={760}
       >
-        <Form form={batchForm} layout="vertical">
+        <Form form={batchForm} layout="vertical" scrollToFirstError>
           <Space style={{ width: '100%' }} align="start" wrap>
             <Form.Item
               name="roomType"
@@ -193,7 +198,7 @@ export const DepositModals: React.FC<DepositModalsProps> = ({
             </span>
           )}
         </div>
-        <Table
+        <Table scroll={{ x: 'max-content' }}
           size="small"
           columns={eligibleColumns as never}
           dataSource={eligibleStudents}
@@ -216,7 +221,7 @@ export const DepositModals: React.FC<DepositModalsProps> = ({
         okText="确认"
         confirmLoading={saving}
       >
-        <Form form={createForm} layout="vertical">
+        <Form form={createForm} layout="vertical" scrollToFirstError>
           <Form.Item
             name="studentId"
             label="学生"
@@ -249,7 +254,7 @@ export const DepositModals: React.FC<DepositModalsProps> = ({
         okText="确认退还"
         confirmLoading={saving}
       >
-        <Form form={refundForm} layout="vertical">
+        <Form form={refundForm} layout="vertical" scrollToFirstError>
           <div style={{ marginBottom: 16, padding: 12, background: '#f5f5f5', borderRadius: 8 }}>
             当前可用押金: <strong>¥{Number(refundModal?.amount || 0).toFixed(2)}</strong>
           </div>
@@ -311,7 +316,7 @@ export const DepositModals: React.FC<DepositModalsProps> = ({
               </PermissionButton>
             </div>
             {detailModal.installments && detailModal.installments.length > 0 ? (
-              <Table
+              <Table scroll={{ x: 'max-content' }}
                 size="small"
                 pagination={false}
                 rowKey="id"
@@ -410,7 +415,7 @@ export const DepositModals: React.FC<DepositModalsProps> = ({
         okText="确认"
         confirmLoading={saving}
       >
-        <Form form={installmentForm} layout="vertical">
+        <Form form={installmentForm} layout="vertical" scrollToFirstError>
           <Form.Item name="amount" label="分期金额（元）" rules={[{ required: true }]}>
             <InputNumber min={0.01} precision={2} style={{ width: '100%' }} />
           </Form.Item>