zk/bishengWeb
Public Access
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

1

Browse Source
This commit is contained in:
zhangkai
2024-06-22 18:34:39 +08:00
parent fb39b66431
commit 1c07d4b9df
72 changed files with 4283 additions and 2158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/pages/SkillPage/components/editAssistant/EditAssistantDialog.tsx
View File

@@ -1,20 +1,23 @@
import { TitleIconBg } from "@/components/bs-comp/cardComponent";
import { Button } from "@/components/bs-ui/button";
import { DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/bs-ui/dialog";
import { Input, Textarea } from "@/components/bs-ui/input";
import { useToast } from "@/components/bs-ui/toast/use-toast";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import npcIcon from "../../../../assets/npc/npcIcon.png";
import huifumoren from "../../../../assets/npc/huifumoren.png";
import { uploadNpcHeaderLibFileWithProgress } from "@/modals/UploadModal/upload";
export default function EditAssistantDialog({ name, desc, onSave }) {
export default function EditAssistantDialog({ name, desc, avatar_img, avatar_color, onSave }) {
const { t } = useTranslation()
// State for form fields
const [formData, setFormData] = useState({ name: '', desc: '' });
const [formData, setFormData] = useState({ name: '', desc: '', avatar_img: '', avatar_color: '' });
useEffect(() => {
setFormData({ name, desc })
}, [name, desc])
// console.log(formData, name, desc);
setFormData({ name, desc, avatar_img, avatar_color })
}, [name, desc, avatar_img, avatar_color])
console.log(formData, name, desc, avatar_img, avatar_color);
// State for errors
const [errors, setErrors] = useState<any>({});
@@ -76,27 +79,62 @@ export default function EditAssistantDialog({ name, desc, onSave }) {
};
return <DialogContent className="sm:max-w-[625px]">
const handleButtonClick = () => {
// Create a file input element
const input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
input.style.display = "none"; // Hidden from view
input.multiple = false; // Allow only one file selection
input.onchange = (e: Event) => {
// setLoading(true);
// Get the selected file
const file = (e.target as HTMLInputElement).files?.[0];
// Check if the file type is correct
// Upload the file
uploadNpcHeaderLibFileWithProgress(file, (progress) => { }).then(res => {
// setLoading(false);
setFormData({ name, desc, avatar_img: res, avatar_color })
})
};
// Trigger the file selection dialog
input.click();
};
return <DialogContent className="sm:max-w-[625px] bg-[#262626]">
<DialogHeader>
<DialogTitle>{t('build.editAssistant')}</DialogTitle>
<DialogTitle className="text-[#fff]">{t('build.editAssistant')}</DialogTitle>
</DialogHeader>
<div className="flex flex-col gap-8 py-6">
<div className="">
<label htmlFor="name" className="bisheng-label">{t('build.assistantName')}<span className="bisheng-tip">*</span></label>
<Input id="name" name="name" placeholder={t('build.enterName')} className="mt-2" value={formData.name} onChange={handleChange} />
{errors.name && <p className="bisheng-tip mt-1">{errors.name}</p>}
<div>
<label htmlFor="name" className="bisheng-label text-[#999999]"><span className="bisheng-tip text-[#FF6060]">* </span>NPC头像</label>
{/* <TitleIconBg className="w-[40px] h-[40px] min-w-[40px]" img={item.avatar_img} id={item.avatar_color ? item.avatar_color : item.id} ><img src={item.avatar_img ? item.avatar_img : npcIcon} alt="" /></TitleIconBg> */}
<div className="flex items-center ml-[7px] mt-[6px]">
<TitleIconBg className="w-[41px] h-[41px] min-w-[41px]" img={formData.avatar_img} id={formData.avatar_color} ><img onClick={handleButtonClick} src={formData.avatar_img ? formData.avatar_img : npcIcon} alt="" /></TitleIconBg>
<div className="flex items-center justify-center ml-[20px] w-[95px] h-[27px] bg-[#333333] cursor-pointer" style={{borderRadius:"14px"}} onClick={() => setFormData({ name, desc, avatar_img: '', avatar_color })}>
<img src={huifumoren} className="w-[12px] h-[11px]" alt="" />
<span className="ml-[5px] text-[#999999] text-[12px] mt-[1px]">恢复默认</span>
</div>
</div>
</div>
<div className="">
<label htmlFor="desc" className="bisheng-label">{t('build.assistantDesc')}</label>
<Textarea id="desc" name="desc" placeholder={t('build.enterDesc')} maxLength={1200} className="mt-2" value={formData.desc} onChange={handleChange} />
<label htmlFor="name" className="bisheng-label text-[#999999]">{t('build.assistantName')}<span className="bisheng-tip text-[#FF6060]">*</span></label>
<Input id="name" name="name" placeholder={t('build.enterName')} className="mt-2 npcInput" value={formData.name} onChange={handleChange} />
{errors.name && <p className="bisheng-tip mt-1 text-[#999999]">{errors.name}</p>}
</div>
<div className="">
<label htmlFor="desc" className="bisheng-label text-[#999999]">{t('build.assistantDesc')}</label>
<Textarea id="desc" name="desc" placeholder={t('build.enterDesc')} maxLength={1200} className="mt-2 npcInput no-scrollbar" value={formData.desc} onChange={handleChange} />
{errors.desc && <p className="bisheng-tip mt-1">{errors.desc}</p>}
</div>
</div>
<DialogFooter>
<DialogClose>
<Button variant="outline" className="px-11" type="button">{t('build.cancel')}</Button>
<Button variant="outline" className="px-11 baogao-btn baogao-btn2" type="button">{t('build.cancel')}</Button>
</DialogClose>
<Button type="submit" className="px-11" onClick={handleSubmit}>{t('build.confirm')}</Button>
<Button type="submit" className="px-11 baogao-btn baogao-btn2" onClick={handleSubmit}>{t('build.confirm')}</Button>
</DialogFooter>
</DialogContent>
};