|
@@ -1,237 +0,0 @@
|
|
|
-import IconArrow from "@/components/icon/icon-arrow/index";
|
|
|
-import Popup from "@/components/popup/popup/index";
|
|
|
-import WemetaRadioBlock from "@/components/wemeta-radio-block/index";
|
|
|
-import WemetaTextarea from "@/components/wemeta-textarea/index";
|
|
|
-import IconVoice from "@/images/svgs/icon_voice.svg";
|
|
|
-import { useCharacterStore } from "@/store/characterStore";
|
|
|
-import { ICharacter } from "@/types";
|
|
|
-import { Image, Text, View } from "@tarojs/components";
|
|
|
-import Taro, { useDidShow } from "@tarojs/taro";
|
|
|
-import { forwardRef, useImperativeHandle, useState } from "react";
|
|
|
-import editorStyle from "../../../editor.module.less";
|
|
|
-
|
|
|
-export interface IChatBasicComponent {
|
|
|
- save: () => void;
|
|
|
-}
|
|
|
-
|
|
|
-interface Props {
|
|
|
- value: ICharacter;
|
|
|
- setValue: (value: ICharacter) => void;
|
|
|
-}
|
|
|
-export default forwardRef<IChatBasicComponent, Props>(({value, setValue}: Props, ref) => {
|
|
|
- const { saveCharacter } = useCharacterStore();
|
|
|
- const currentCharacter = useCharacterStore((state) => state.character);
|
|
|
- const [greetingShow, setGreetingShow] = useState(false);
|
|
|
- const [personalityShow, setPersonalityShow] = useState(false);
|
|
|
- const [greeting, setGreeting] = useState(currentCharacter?.greeting ?? "");
|
|
|
- const [personality, setPersonality] = useState(
|
|
|
- currentCharacter?.personality ?? "",
|
|
|
- );
|
|
|
-
|
|
|
- // const [value, setValue] = useState(currentCharacter);
|
|
|
-
|
|
|
- let [radioValue, setRadioValue] = useState(
|
|
|
- currentCharacter?.style ?? "热情服务",
|
|
|
- );
|
|
|
-
|
|
|
- const radioList = [
|
|
|
- {
|
|
|
- text: "简洁明了",
|
|
|
- value: "简洁明了",
|
|
|
- checked: false,
|
|
|
- },
|
|
|
- {
|
|
|
- text: "热情服务",
|
|
|
- value: "热情服务",
|
|
|
- checked: false,
|
|
|
- },
|
|
|
- {
|
|
|
- text: "社交高手",
|
|
|
- value: "社交高手",
|
|
|
- checked: false,
|
|
|
- },
|
|
|
- {
|
|
|
- text: "严谨专业",
|
|
|
- value: "严谨专业",
|
|
|
- checked: false,
|
|
|
- },
|
|
|
- ];
|
|
|
-
|
|
|
- const setValueByKey = (key: string, v: string) => {
|
|
|
- if (!value) {
|
|
|
- return;
|
|
|
- }
|
|
|
- let newValue = { ...value };
|
|
|
- newValue[key] = v;
|
|
|
- // setValue(newValue);
|
|
|
- };
|
|
|
-
|
|
|
- const saveTextByKey = (key: string, v: string) => {
|
|
|
- if (!value) {
|
|
|
- return;
|
|
|
- }
|
|
|
- let newValue = { ...value };
|
|
|
- newValue[key] = v;
|
|
|
- setValue(newValue);
|
|
|
- saveCharacter({ ...newValue });
|
|
|
- };
|
|
|
-
|
|
|
- const onRadioChange = (val: string) => {
|
|
|
- setRadioValue(val);
|
|
|
- setValueByKey("style", val);
|
|
|
- currentCharacter?.profileId &&
|
|
|
- saveCharacter({ profileId: currentCharacter.profileId, style: val });
|
|
|
- return false;
|
|
|
- };
|
|
|
-
|
|
|
- const handleSave = () => {
|
|
|
- console.log(value, "save");
|
|
|
- value && saveCharacter({ ...value });
|
|
|
- };
|
|
|
- const handleNavToVoiceTabsPage = () => {
|
|
|
- Taro.navigateTo({
|
|
|
- url: "/pages/voice-tabs/index?profileId=" + currentCharacter?.profileId,
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- useImperativeHandle(ref, () => {
|
|
|
- return {
|
|
|
- save: handleSave,
|
|
|
- };
|
|
|
- });
|
|
|
-
|
|
|
- const renderBasic = () => {
|
|
|
- if (!currentCharacter || !value) {
|
|
|
- return <></>;
|
|
|
- }
|
|
|
- return (
|
|
|
- <>
|
|
|
- <View
|
|
|
- className={editorStyle.formItem}
|
|
|
- onClick={() => {
|
|
|
- currentCharacter?.greeting &&
|
|
|
- setGreeting(currentCharacter.greeting);
|
|
|
- setGreetingShow(true);
|
|
|
- }}
|
|
|
- >
|
|
|
- <View className={editorStyle.formItemLabel}>开场白</View>
|
|
|
- <View className='flex items-center bg-white rounded-20 px-16 py-28'>
|
|
|
- <View className='flex-1 text-justify'>
|
|
|
- {value.greeting ? (
|
|
|
- value.greeting
|
|
|
- ) : (
|
|
|
- <Text className='text-gray-45'>添加开场白</Text>
|
|
|
- )}
|
|
|
- </View>
|
|
|
- <IconArrow></IconArrow>
|
|
|
- </View>
|
|
|
- </View>
|
|
|
-
|
|
|
- <View
|
|
|
- className={editorStyle.formItem}
|
|
|
- onClick={() => {
|
|
|
- currentCharacter?.personality &&
|
|
|
- setPersonality(currentCharacter.personality);
|
|
|
- setPersonalityShow(true);
|
|
|
- }}
|
|
|
- >
|
|
|
- <View className={editorStyle.formItemLabel}>我的人设</View>
|
|
|
- <View className='flex items-center bg-white rounded-20 px-16 py-28'>
|
|
|
- <View className='flex-1 text-justify '>
|
|
|
- {value.personality ? (
|
|
|
- value.personality
|
|
|
- ) : (
|
|
|
- <Text className='text-gray-45'>添加我的人设</Text>
|
|
|
- )}
|
|
|
- </View>
|
|
|
- <IconArrow></IconArrow>
|
|
|
- </View>
|
|
|
- </View>
|
|
|
-
|
|
|
- <View
|
|
|
- className={editorStyle.formItem}
|
|
|
- onClick={handleNavToVoiceTabsPage}
|
|
|
- >
|
|
|
- <View className={editorStyle.formItemLabel}>对话声音</View>
|
|
|
- <View className='flex items-center bg-white rounded-20 px-16 py-28'>
|
|
|
- <View
|
|
|
- className='flex items-center justify-center w-36 h-36 rounded-8'
|
|
|
- style={{
|
|
|
- background: "#CBF706",
|
|
|
- }}
|
|
|
- >
|
|
|
- <Image src={IconVoice} className='w-16 h-16'></Image>
|
|
|
- </View>
|
|
|
- <View className='flex-1 text-justify ml-10 '>
|
|
|
- {currentCharacter.voiceAlias ?? "系统声音"}
|
|
|
- </View>
|
|
|
- <IconArrow></IconArrow>
|
|
|
- </View>
|
|
|
- </View>
|
|
|
- <View className={editorStyle.formItem}>
|
|
|
- <View className={editorStyle.formItemLabel}>对话风格</View>
|
|
|
- <WemetaRadioBlock
|
|
|
- radioList={radioList}
|
|
|
- onChange={onRadioChange}
|
|
|
- value={radioValue}
|
|
|
- ></WemetaRadioBlock>
|
|
|
- </View>
|
|
|
- </>
|
|
|
- );
|
|
|
- };
|
|
|
-
|
|
|
- return (
|
|
|
- <View className={`relative pb-56 ${editorStyle.transitionBottom}`}>
|
|
|
- <View className={editorStyle.formContainer}>{renderBasic()}</View>
|
|
|
-
|
|
|
- <Popup title='填写开场白' show={greetingShow} setShow={setGreetingShow}>
|
|
|
- <View className='flex flex-col gap-16 pb-38'>
|
|
|
- <WemetaTextarea
|
|
|
- value={greeting}
|
|
|
- onInput={(val: string) => setGreeting(val)}
|
|
|
- placeholder='将作为开启聊天的第一句话,示例:你好,很高兴遇见你...建议不超过100字'
|
|
|
- cursorSpacing={500}
|
|
|
- maxlength={100}
|
|
|
- bgColor='#F5F6F7'
|
|
|
- extraClass='leading-30'
|
|
|
- />
|
|
|
- <View
|
|
|
- className='button-rounded-big'
|
|
|
- onClick={() => {
|
|
|
- saveTextByKey("greeting", greeting);
|
|
|
- setGreetingShow(false);
|
|
|
- }}
|
|
|
- >
|
|
|
- 添加
|
|
|
- </View>
|
|
|
- </View>
|
|
|
- </Popup>
|
|
|
-
|
|
|
- <Popup
|
|
|
- title='填写我的人设'
|
|
|
- show={personalityShow}
|
|
|
- setShow={setPersonalityShow}
|
|
|
- >
|
|
|
- <View className='flex flex-col gap-16 pb-38'>
|
|
|
- <WemetaTextarea
|
|
|
- value={personality}
|
|
|
- onInput={(val: any) => setPersonality(val)}
|
|
|
- placeholder='示例:你是一位幽默风趣的科技区UP 主,了解前沿科技,善于运用生动且有趣的语言,表达对科技的独家理解。...'
|
|
|
- cursorSpacing={500}
|
|
|
- maxlength={500}
|
|
|
- bgColor='#F5F6F7'
|
|
|
- />
|
|
|
- <View
|
|
|
- className='button-rounded-big'
|
|
|
- onClick={() => {
|
|
|
- saveTextByKey("personality", personality);
|
|
|
- setPersonalityShow(false);
|
|
|
- }}
|
|
|
- >
|
|
|
- 添加
|
|
|
- </View>
|
|
|
- </View>
|
|
|
- </Popup>
|
|
|
- </View>
|
|
|
- );
|
|
|
-});
|