shalu-system-designer/apps/er-designer/src/pages/er/components/RemarkPanel.tsx

import { DeleteOutlined, SearchOutlined } from "@ant-design/icons";
import { Button, Input, Form, Popconfirm } from "antd";
import React, { useEffect, useState } from "react";
import CustomColorPicker from "@/components/CustomColorPicker";
import { useModel } from "umi";
import noData from "@/assets/no-data.png";
import { RemarkInfo } from "@/type";
import { useSessionStorageState } from "ahooks";
export default function RemarkPanel() {
  const { project, addRemark, deleteRemark, updateRemark } =
    useModel("erModel");
  const { remarks = [] } = project;
  const [search, setSearch] = React.useState("");
  const [activeKey, setActiveKey] = useSessionStorageState("remark-active", {
    defaultValue: "",
    listenStorageChange: true
  });
  const [remarkList, setRemarkList] = useState(remarks);

  useEffect(() => {
    setRemarkList(remarks.filter(item => item.name.includes(search)));
  }, [remarks, search]);

  const handleChange = (index: number, key: keyof RemarkInfo, value: any) => {
    const data = remarkList[index];
    const newData = { ...data, [key]: value };
    updateRemark(newData);
    const arr = [...remarkList];
    arr[index] = newData;
    setRemarkList(arr);
  };

  return (
    <div className="px-12px">
      <div className="flex gap-12px">
        <Input
          placeholder="输入关键字搜索"
          className="m-b-10px"
          suffix={<SearchOutlined />}
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
        <Button type="primary" onClick={addRemark}>
          添加注释
        </Button>
      </div>
      {remarkList.map((item, index) => {
        return (
          <div
            key={item.id}
            className="
            border-b-solid 
            border-b-[#e4e4e4] 
            border-b-[1px]"
          >
            <div
              className="
              header 
              flex 
              items-center 
              justify-between 
              leading-[40px] 
              hover:bg-[#fafafa] 
              cursor-pointer 
              m-b-[10px]"
              onClick={() => setActiveKey(activeKey === item.id ? "" : item.id)}
            >
              <div className="font-bold truncate">{item.name}</div>
              <div>
                <i
                  className="iconfont icon-open m-r-10px inline-block"
                  style={{
                    transform:
                      activeKey === item.id ? "rotate(180deg)" : "rotate(0deg)",
                    transition: "all 0.3s",
                  }}
                />
              </div>
            </div>
            <div
              className="content overflow-hidden grid"
              style={{
                gridTemplateRows: activeKey === item.id ? "1fr" : "0fr",
                transition: "all 0.3s",
              }}
            >
              <Form layout="vertical" className="overflow-hidden">
                <Form.Item label="标题" layout="vertical">
                  <Input
                    placeholder="请输入"
                    defaultValue={item.name}
                    onChange={(e) =>
                      handleChange(index, "name", e.target.value)
                    }
                  />
                </Form.Item>
                <Form.Item label="" layout="vertical" wrapperCol={{ span: 24 }}>
                  <div className="flex gap-12px">
                    <Input.TextArea
                      placeholder="内容"
                      autoSize={false}
                      style={{ resize: "none" }}
                      value={item.text}
                      onChange={(e) =>
                        handleChange(index, "text", e.target.value)
                      }
                    />
                    <div>
                      <CustomColorPicker
                        color={item.style.background}
                        onChange={(color) => {
                          handleChange(index, "style", {
                            ...item.style,
                            background: color,
                          });
                        }}
                      >
                        <div
                          className="rounded-4px cus-btn w-32px h-32px bg-#eee flex-none cursor-pointer shadow-inner"
                          style={{ background: item.style.background }}
                        ></div>
                      </CustomColorPicker>
                      <Popconfirm
                        okType="primary"
                        title="确定删除该注释？"
                        okText="确定"
                        cancelText="取消"
                        onConfirm={() => deleteRemark(item.id)}
                      >
                        <div className="rounded-4px cus-btn w-32px h-32px bg-#eee flex-none cursor-pointer text-center leading-32px color-red">
                          <DeleteOutlined />
                        </div>
                      </Popconfirm>
                    </div>
                  </div>
                </Form.Item>
              </Form>
            </div>
          </div>
        );
      })}
      {remarkList.length === 0 && (
        <div className="flex flex-col items-center justify-center h-[300px]">
          <img src={noData} alt="暂无数据" className="w-[200px] h-[200px]" />
          <div className="text-gray-400">添加额外注释内容！</div>
        </div>
      )}
    </div>
  );
}