108 lines
2.6 KiB
TypeScript
108 lines
2.6 KiB
TypeScript
import { useEffect } 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 ReadProps {
|
|
onBack: () => void;
|
|
}
|
|
|
|
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: "submitAddForm",
|
|
values: body,
|
|
},
|
|
}).then((res) => {
|
|
if (res.status === "Success") {
|
|
add({
|
|
content: "提交成功",
|
|
});
|
|
}
|
|
else {
|
|
add({
|
|
content: res.msg,
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function Read({ onBack }: ReadProps) {
|
|
const { bindInput, setValues, onSubmit } = useForm<FormValue>({
|
|
initialValues: {
|
|
tags: "",
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
getInfo().then((res) => {
|
|
if (!res) {
|
|
return;
|
|
}
|
|
|
|
setValues(res);
|
|
})
|
|
}, []);
|
|
|
|
return (
|
|
<Tab>
|
|
<Tab.Header title="在看" onBack={onBack} />
|
|
<Tab.Body>
|
|
<Form 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>
|
|
<button type="submit">提交</button>
|
|
</Form>
|
|
</Tab.Body>
|
|
</Tab>
|
|
);
|
|
}
|
|
|
|
export default Read;
|