vite-electron/backup/Home/index.tsx

import electron from "@/plugins/electron"
import { addTodo, removeTodo } from "@/store/action/todo"
import { Button, ButtonGroup, ControlGroup, FormGroup, HotkeysProvider, InputGroup } from "@blueprintjs/core"
import { Cell, Column, Table2 } from "@blueprintjs/table"
import cs from "classnames"
import _ from "lodash"
import React, { useEffect, useRef, useState } from "react"
import { connect } from "react-redux"
import Dialog from "./Dialog"
import style from "./index.module.scss"
import useLocation from "./useLocation"

export interface HomeProps {
  add(text: string): void

  todo: ITodo[]

  remove(id: number): void
}

let keyGen = 0

function Home(props: HomeProps) {
  const [isOpen, setIsOpen] = useState<boolean>(false)
  const keyRef = useRef<HTMLInputElement>(null)

  function delItem() {
    let key = keyRef.current?.value
    if (key) {
      let index = _.findIndex(clockList, { key: +key })
      if (index != -1) {
        var list = [...clockList]
        list.splice(index, 1)
        setClockList(list)
        keyRef.current!.value = ""
      }
    }
  }

  const { save, get } = useLocation()
  const [clockList, setClockList] = useState<Record<string, any>[]>([])
  const keyList = _.map(clockList, "key")
  const titleList = _.map(clockList, "title")
  const timeList = _.map(clockList, "time")
  const descList = _.map(clockList, "desc")

  function onConfrim(title: string, time: string, desc: string) {
    if (title && time) {
      const value = {
        key: ++keyGen,
        title: title,
        time: time,
        desc: desc,
      }
      setClockList([...clockList, value])
      setIsOpen(false)
    }
  }

  useEffect(() => {
    ;(async () => {
      let list = await electron.ipcRenderer.invoke("@func:clock:getData")
      if (list) {
        setClockList(list)
        const keyList = _.map(list, "key")
        if (keyList.length) {
          keyGen = Math.max(...keyList)
        }
      }
    })()
  }, [])
  useEffect(() => {
    electron.ipcRenderer.send("@func:clock:saveData", clockList)
  }, [clockList])

  return (
    <div className={cs(style.container, "container")}>
      <div className={style.title}>闹钟列表</div>
      <div className={style.opeation}>
        <ButtonGroup>
          <Button
            icon="insert"
            onClick={() => {
              setIsOpen(true)
            }}
          >
            添加闹钟
          </Button>
          <Button icon="refresh">同步闹钟</Button>
        </ButtonGroup>
      </div>
      <table>
        <thead>
          <tr>
            <th>Month</th>
            <th>Savings</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <td>Sum</td>
            <td>$180</td>
          </tr>
        </tfoot>

        <tbody>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
        </tbody>
      </table>
      {/* <HotkeysProvider>
        <Table2 numRows={titleList.length}>
          <Column name="KEY" cellRenderer={index => <Cell>{keyList[index]}</Cell>}></Column>
          <Column name="标题" cellRenderer={index => <Cell>{titleList[index]}</Cell>}></Column>
          <Column name="时间" cellRenderer={index => <Cell>{timeList[index]}</Cell>}></Column>
          <Column name="描述" cellRenderer={index => <Cell>{descList[index]}</Cell>}></Column>
        </Table2>
      </HotkeysProvider> */}  
      <div style={{ margin: "10px 0" }}>
        <FormGroup helperText="需要填入指定的闹钟进行删除" label="Key" labelFor="text-input" labelInfo="(required)">
          <ControlGroup fill={false} vertical={false}>
            <InputGroup inputRef={keyRef} id="text-input" placeholder="请输入Key值进行删除" />
            <Button onClick={() => delItem()} icon="trash" intent="danger" type="submit">
              删除
            </Button>
          </ControlGroup>
        </FormGroup>
      </div>
      <Dialog isOpen={isOpen} setIsOpen={setIsOpen} onConfrim={onConfrim}></Dialog>
    </div>
  )
}

const mapStateToProps = (state: any) => {
  return {
    todo: state.todo,
  }
}

const mapDispatchToProps = (dispatch: any) => ({
  add: (text: string) => dispatch(addTodo(text)),
  remove: (id: string | number) => dispatch(removeTodo(id)),
})

export default connect(mapStateToProps, mapDispatchToProps)(Home)