127 lines
3.7 KiB
TypeScript
127 lines
3.7 KiB
TypeScript
import { useEffect, useState, type FormEvent } from "react";
|
|
import Placeholder from "~components/ui/placeholder";
|
|
import Form from "~components/ui/form";
|
|
import { IconBack } from "~assets/icons";
|
|
import styles from "./popup.module.less";
|
|
import stylesB from "./bili.module.less";
|
|
import useForm from "~hooks/useForm";
|
|
|
|
interface ReadProps {
|
|
onBack: () => void;
|
|
}
|
|
|
|
interface FormValue {
|
|
name: string;
|
|
ename: string;
|
|
project: string;
|
|
made: string;
|
|
sale: string;
|
|
type: number;
|
|
desc: string;
|
|
}
|
|
|
|
const getInfo = async () => {
|
|
let tab: chrome.tabs.Tab;
|
|
|
|
[tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
|
|
|
|
if (tab && !tab.url.includes("chrome")) {
|
|
const a = await chrome.tabs.sendMessage(tab.id, { type: 'toolbox:getBiliToy' });
|
|
|
|
console.log('get toy:', a);
|
|
|
|
return a;
|
|
}
|
|
}
|
|
|
|
function Toy({ onBack }: ReadProps) {
|
|
const { bindInput, setValues, onSubmit } = useForm<FormValue>({
|
|
initialValues: {
|
|
type: 3,
|
|
},
|
|
onSubmit: (values) => {
|
|
console.log(values);
|
|
},
|
|
});
|
|
|
|
const [imgs, setImgs] = useState([]);
|
|
const [currentImg, setCurrentImg] = useState(0);
|
|
const [failed, setFailed] = useState(false);
|
|
|
|
useEffect(() => {
|
|
getInfo().then((res) => {
|
|
if (!res) {
|
|
setFailed(true);
|
|
return;
|
|
}
|
|
|
|
const { image, ...othors } = res;
|
|
|
|
setValues(othors);
|
|
setImgs(res.images);
|
|
setCurrentImg(0);
|
|
})
|
|
}, []);
|
|
|
|
return (
|
|
<div className={styles.tab} style={{ width: 600 }}>
|
|
<header className={styles.header}>
|
|
<button className={styles.back} onClick={onBack}>
|
|
<IconBack />
|
|
</button>
|
|
<h2>添加手办</h2>
|
|
</header>
|
|
<main className={styles.body}>
|
|
<Placeholder className={stylesB.bili} show={failed} value="非 B 站会员购页面">
|
|
<div className={stylesB.image}>
|
|
<img src={imgs[currentImg]} alt="" />
|
|
<div className={stylesB.selector}>
|
|
{imgs.map((item, index) => (
|
|
<img src={item} alt="" onClick={() => setCurrentImg(index)} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
<Form className={stylesB.form} onSubmit={onSubmit((data) => console.log(data))}>
|
|
<div>
|
|
<label htmlFor="name">中文名</label>
|
|
<input {...bindInput("name")} required placeholder="中文名" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="ename">英文名</label>
|
|
<input {...bindInput("ename")} required placeholder="英文名" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="project">作品</label>
|
|
<input {...bindInput("project")} required placeholder="作品" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="made">制作</label>
|
|
<input {...bindInput("made")} required placeholder="制作" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="sale">发售日期</label>
|
|
<input {...bindInput("sale")} required placeholder="发售日期" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="type">状态</label>
|
|
<select {...bindInput("type")}>
|
|
<option value={1}>已到货</option>
|
|
<option value={2}>已预订</option>
|
|
<option value={3}>想要但没钱</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="desc">描述</label>
|
|
<textarea {...bindInput("desc")} rows={5} required placeholder="描述"></textarea>
|
|
</div>
|
|
|
|
<button type="submit">提交</button>
|
|
</Form>
|
|
</Placeholder>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Toy;
|