116 lines
3.0 KiB
TypeScript
116 lines
3.0 KiB
TypeScript
import { sendToBackground } from "@plasmohq/messaging";
|
|
import { useEffect, useState } from "react";
|
|
import Form from "~components/ui/form";
|
|
import { IconBack } from "~assets/icons";
|
|
import styles from "./popup.module.less";
|
|
import useForm from "~hooks/useForm";
|
|
import { add } from "~components/ui/message/utils";
|
|
|
|
interface ReadProps {
|
|
onBack: () => void;
|
|
}
|
|
|
|
interface FormValue {
|
|
title: string;
|
|
link: string;
|
|
desc: string;
|
|
tips: 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 [count, setCount] = useState(0);
|
|
const { bindInput, setValues, onSubmit } = useForm<FormValue>({
|
|
initialValues: {
|
|
test: 'test',
|
|
},
|
|
onSubmit: (values) => {
|
|
submitForm(values);
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
getInfo().then((res) => {
|
|
if (!res) {
|
|
return;
|
|
}
|
|
|
|
setValues(res);
|
|
})
|
|
}, []);
|
|
|
|
return (
|
|
<div className={styles.tab}>
|
|
<header className={styles.header}>
|
|
<button className={styles.back} onClick={onBack}>
|
|
<IconBack />
|
|
</button>
|
|
<h2>在看</h2>
|
|
</header>
|
|
<main className={styles.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>
|
|
{count}
|
|
<button onClick={() => setCount(prevCount => prevCount + 1)}>add</button>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Read;
|