training_data/apps/web/src/app/main/staffpage/page.tsx

import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { api, useStaff } from "@nice/client";
import { Button, Form, Input, Modal, Select, Table } from "antd";
import { StaffDto, trainSituationDetailSelect } from "@nice/common";
import { useCallback, useEffect, useState } from "react";
import _ from "lodash";
import { useMainContext } from "../layout/MainProvider";
import StaffTable from "./stafftable/page";
import StaffModal from "./staffmodal/page";
export default function StaffMessage() {
  const {form, formValue, setFormValue, setVisible, setSearchValue} = useMainContext();
  useEffect(()=>{
    setFormValue(
      {
        username: "",
        deptId: "",
        absent: false,
        position: "",
        trainSituations: "",
    }
    )
  },[])
  const handleNew = () => {
    form.setFieldsValue(formValue);
    setVisible(true);
  }
  // 添加防抖的搜索处理函数
  const handleSearch = useCallback(
    _.debounce((value: string) => {
      setSearchValue(value);
    }, 500),
    []
  );
  return (
    <div className="p-2 min-h-screen bg-gradient-to-br">
      <Form>
        <div className="p-4 h-full flex flex-col"> {/* 修改为flex布局 */}
          <div className="max-w-full mx-auto flex-1 flex flex-col"> {/* 添加flex容器 */}
            {/* 头部区域保持不变... */}
            <div className="flex justify-between mb-4 space-x-4 items-center">
              <div className="text-2xl">人员总览</div>
              <div className="relative w-1/3">
                <Input
                  placeholder="输入姓名搜索"
                  onChange={(e) => handleSearch(e.target.value)}
                  className="pl-10 w-full border"
                />
                <MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 " />
              </div>
              <Button
                type="primary"
                onClick={handleNew}
                className=" font-bold py-2 px-4 rounded"
              >
                新建人员
              </Button>
            </div>
            <StaffTable></StaffTable>
            <StaffModal></StaffModal>       
          </div>
        </div>
      </Form>
    </div>
  );
}