用Ant Design优雅摸鱼，不留痕迹

用Ant Design 全家桶优雅地摸鱼

茫茫人海，摸鱼者众。在摸鱼这项事业上，有的人选择与世隔绝，沉迷于游戏、小说；有的人选择广撒网，多管齐下，力求不被发现；而我，作为一名饱经沧桑的摸鱼达人，有幸掌握了一套用Ant Design 全家桶优雅摸鱼的方法论。

前言

何为Ant Design？

Ant Design，又称蚂蚁金服设计语言，是一套由蚂蚁金服前端团队开源的前端UI框架。其特点是简洁、美观、组件丰富，深受广大开发者的喜爱。

如何利用Ant Design 摸鱼？

Ant Design 提供了丰富的组件和API，可以帮助我们快速构建出各种各样的界面。利用这些组件和API，我们可以打造出一套专属于自己的摸鱼神器，从而优雅地混迹于工作之中，不被发现。

实践

使用useWatch API监控状态变化

useWatch API可以监听React组件状态的变化，并执行相应的回调函数。我们可以利用这个API，当老板或同事靠近时，自动隐藏我们的摸鱼窗口。

const useWatchDemo = () => {
  const [isShow, setIsShow] = useState(true);
  const toggleShow = () => {
    setIsShow(!isShow);
  };
  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (!entries[0].isIntersecting) {
        toggleShow();
      }
    });
    observer.observe(document.querySelector('.boss-detector'));
    return () => observer.disconnect();
  }, []);
  return (
    <>
      <div className="boss-detector"></div>
      {isShow && <div>正在摸鱼...</div>}
    </>
  );
};

使用useFormInstance API自定义表单

useFormInstance API可以获取表单实例，并对其进行各种操作。我们可以利用这个API，自动填充表单，快速生成数据，从而应对老板的突击检查。

const useFormInstanceDemo = () => {
  const [form] = useForm();
  const submitForm = () => {
    form.submit();
  };
  return (
    <>
      <Form form={form}>
        <Form.Item name="name" label="姓名">
          <Input />
        </Form.Item>
        <Form.Item name="age" label="年龄">
          <InputNumber />
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={submitForm}>
            提交
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};

构建摸鱼界面

const App = () => {
  return (
    <>
      <useWatchDemo />
      <useFormInstanceDemo />
    </>
  );
};

export default App;

总结

利用Ant Design全家桶的强大功能，我们可以打造出各种各样的摸鱼神器，优雅地摸鱼，不被发现。当然，摸鱼有风险，入坑需谨慎，切不可沉迷其中，影响工作。