shalu-system-designer/apps/er-designer/src/components/HistoryPanel.tsx

import { Button } from "antd";
import React, { useState, forwardRef, useImperativeHandle } from "react";
import { useModel } from "umi";

export default forwardRef(function HistoryPanel(props, ref) {
  const {
    showHistory,
    setShowHistory
  } = useModel("appModel");


  const ItemComponent = () => {
    const [showBtn, setShowBtn] = useState(false);

    return (
      <div
        className="flex items-center p-12px hover:bg-#f9f9f9"
        onMouseOver={() => setShowBtn(true)}
        onMouseOut={() => setShowBtn(false)}
      >
        <div className="flex-1">
          <div className="text-sm text-#333">标题xxxxxxxxxxxxxx</div>
          <div className="text-xs text-#999">2024-12-12 20:08:30</div>
        </div>
        {showBtn && (
          <div>
            <Button
              type="text"
              size="small"
              icon={<i className="iconfont icon-lishijilu" />}
            />
            <Button
              type="text"
              size="small"
              icon={<i className="iconfont icon-shanchu" />}
            />
          </div>
        )}
      </div>
    );
  };

  return (
    <div
      className="absolute left-0 top-0 w-full h-full bg-white flex flex-col"
      style={{ display: showHistory ? "flex" : "none" }}
    >
      <div className="flex py-8px px-12px items-center border-b-1px border-b-solid border-b-#eee">
        <div className="flex-1">历史记录</div>
        <div
          className="w-16px h-16px cursor-pointer"
          onClick={() => setShowHistory(false)}
        >
          <i className="iconfont icon-cuowu-1 color-#666 hover:color-#333" />
        </div>
      </div>
      <div className="flex-1 overflow-y-auto">
        {new Array(100).fill(0).map((_, i) => (
          <ItemComponent key={i} />
        ))}
      </div>
    </div>
  );
});