106 lines
2.6 KiB
TypeScript
106 lines
2.6 KiB
TypeScript
import { useEffect, useRef } from "react";
|
|
import { sendToBackground } from "@plasmohq/messaging";
|
|
import useForm from "~hooks/useForm";
|
|
import Tab from "~components/ui/tab";
|
|
import Form from "~components/ui/form";
|
|
import { add } from "~components/ui/message/utils";
|
|
|
|
interface FormValue {
|
|
title: string;
|
|
link: string;
|
|
desc: string;
|
|
tips: string;
|
|
author: string;
|
|
image: string;
|
|
sitename: string;
|
|
tags: string;
|
|
}
|
|
|
|
const getInfo = async () => {
|
|
const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
|
|
|
|
if (tab) {
|
|
return await chrome.tabs.sendMessage(tab.id, { type: 'toolbox:getInfo' });
|
|
}
|
|
}
|
|
|
|
const submitForm = (body: FormValue) => {
|
|
sendToBackground({
|
|
name: "read",
|
|
body: {
|
|
action: "addRead",
|
|
values: body,
|
|
},
|
|
}).then((res) => {
|
|
add({
|
|
content: res.msg,
|
|
});
|
|
}).catch((e) => {
|
|
if (e instanceof Error) {
|
|
add({
|
|
content: e.message,
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function Read() {
|
|
const formRef = useRef<HTMLFormElement>();
|
|
|
|
const { bindInput, setValues, onSubmit } = useForm<FormValue>({
|
|
initialValues: {
|
|
tags: "",
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
getInfo().then((res) => {
|
|
if (!res) {
|
|
return;
|
|
}
|
|
|
|
setValues(res);
|
|
})
|
|
}, []);
|
|
|
|
return (
|
|
<Tab>
|
|
<Tab.Body>
|
|
<Form ref={formRef} onSubmit={onSubmit(submitForm)}>
|
|
<input {...bindInput("title")} required placeholder="标题" />
|
|
<input {...bindInput("link")} required placeholder="链接" />
|
|
<div>
|
|
<label htmlFor="desc">概括</label>
|
|
<textarea {...bindInput("desc")} rows={5} required placeholder="概括"></textarea>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="tips">评论 / 推荐理由</label>
|
|
<textarea {...bindInput("tips")} rows={5} placeholder="推荐理由"></textarea>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="author">作者</label>
|
|
<input {...bindInput("author")} placeholder="作者" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="image">插图</label>
|
|
<input {...bindInput("image")} placeholder="插图" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="sitename">站点名称</label>
|
|
<input {...bindInput("sitename")} placeholder="站点名称" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="tags">标签</label>
|
|
<input {...bindInput("tags")} placeholder="标签" />
|
|
</div>
|
|
</Form>
|
|
</Tab.Body>
|
|
<Tab.Footer>
|
|
<button onClick={() => formRef.current?.requestSubmit()}>提交</button>
|
|
</Tab.Footer>
|
|
</Tab>
|
|
);
|
|
}
|
|
|
|
export default Read;
|