Compare commits
2 Commits
38c01b93d3
...
raliz
| Author | SHA1 | Date | |
|---|---|---|---|
|
0b93ccd0a5 | ||
|
|
cd62ab6c9d |
@@ -13,303 +13,442 @@ import txt2Voice from "@/hooks/txt2VoiceAPI";
|
|||||||
|
|
||||||
// fake list
|
// fake list
|
||||||
const opList = [
|
const opList = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
title: "幸运转盘",
|
title: "幸运转盘",
|
||||||
src: "http://picdown.jchysoft.com/uiIcon/xingyunzhuanpan.png",
|
src: "http://picdown.jchysoft.com/uiIcon/xingyunzhuanpan.png",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
title: "领券中心",
|
title: "领券中心",
|
||||||
src: "http://picdown.jchysoft.com/uiIcon/lingjuanzhongxin.png",
|
src: "http://picdown.jchysoft.com/uiIcon/lingjuanzhongxin.png",
|
||||||
}, // bjt错别字将错就错版
|
}, // bjt错别字将错就错版
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
title: "0元抽",
|
title: "0元抽",
|
||||||
src: "http://picdown.jchysoft.com/uiIcon/0yuanchou.png",
|
src: "http://picdown.jchysoft.com/uiIcon/0yuanchou.png",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
title: "欧宝赏",
|
title: "欧宝赏",
|
||||||
src: "http://picdown.jchysoft.com/uiIcon/oubanshang.png",
|
src: "http://picdown.jchysoft.com/uiIcon/oubanshang.png",
|
||||||
}, // bjt错别字
|
}, // bjt错别字
|
||||||
];
|
];
|
||||||
|
|
||||||
//import "@/deps/live2dcubismcore.min.js"
|
//import "@/deps/live2dcubismcore.min.js"
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const [useVoice, setUseVoice] = useState(false);
|
const [useVoice, setUseVoice] = useState(false);
|
||||||
const query = useSearchParams();
|
const query = useSearchParams();
|
||||||
const characterId = query.get("id");
|
const characterId = query.get("id");
|
||||||
const token = query.get("token");
|
const token = query.get("token");
|
||||||
localStorage.setItem("token", token || "");
|
localStorage.setItem("token", token || "");
|
||||||
const { complete, completion: data, isLoading, abort } = useRequest();
|
const { complete, completion: data, isLoading, abort } = useRequest();
|
||||||
const voice2txt = (txt: string) => {
|
const voice2txt = (txt: string) => {
|
||||||
fetch("sharkapiBaseUrl/voice/txt2voice", {
|
fetch("sharkapiBaseUrl/voice/txt2voice", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: {
|
headers: {
|
||||||
"Content-Type": "application/json",
|
"Content-Type": "application/json",
|
||||||
"Authorization": `${token}`,
|
Authorization: `${token}`,
|
||||||
},
|
},
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
txt: txt,
|
txt: txt,
|
||||||
}),
|
}),
|
||||||
})
|
|
||||||
}
|
|
||||||
function draggable(model: any) {
|
|
||||||
model.buttonMode = true;
|
|
||||||
model.on("pointerdown", (e: any) => {
|
|
||||||
model.dragging = true;
|
|
||||||
model._pointerX = e.data.global.x - model.x;
|
|
||||||
model._pointerY = e.data.global.y - model.y;
|
|
||||||
});
|
|
||||||
model.on("pointermove", (e: any) => {
|
|
||||||
if (model.dragging) {
|
|
||||||
model.position.x = e.data.global.x - model._pointerX;
|
|
||||||
model.position.y = e.data.global.y - model._pointerY;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
model.on("pointerupoutside", () => (model.dragging = false));
|
|
||||||
model.on("pointerup", () => (model.dragging = false));
|
|
||||||
}
|
|
||||||
|
|
||||||
function addFrame(model: any) {
|
|
||||||
const foreground = PIXI.Sprite.from(PIXI.Texture.WHITE);
|
|
||||||
foreground.width = model.internalModel.width;
|
|
||||||
foreground.height = model.internalModel.height;
|
|
||||||
foreground.alpha = 0.2;
|
|
||||||
|
|
||||||
model.addChild(foreground);
|
|
||||||
}
|
|
||||||
|
|
||||||
function addHitAreaFrames(model: any) {
|
|
||||||
try {
|
|
||||||
//@ts-ignore
|
|
||||||
const hitAreaFrames = new PIXI.live2d.HitAreaFrames();
|
|
||||||
|
|
||||||
model.addChild(hitAreaFrames);
|
|
||||||
|
|
||||||
checkbox(
|
|
||||||
"Hit Area Frames",
|
|
||||||
(checked: any) => (hitAreaFrames.visible = checked)
|
|
||||||
);
|
|
||||||
} catch (err) { }
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkbox(name: any, onChange: any) {
|
|
||||||
const id = name.replace(/\W/g, "").toLowerCase();
|
|
||||||
|
|
||||||
let checkbox = document.getElementById(id);
|
|
||||||
|
|
||||||
if (!checkbox) {
|
|
||||||
const p = document.createElement("p")!;
|
|
||||||
p.innerHTML = `<input type="checkbox" id="${id}"> <label for="${id}">${name}</label>`;
|
|
||||||
|
|
||||||
document!.getElementById("control")!.appendChild(p);
|
|
||||||
checkbox = p.firstChild as HTMLElement;
|
|
||||||
}
|
|
||||||
|
|
||||||
checkbox.addEventListener("change", () => {
|
|
||||||
//@ts-ignore
|
|
||||||
onChange(checkbox.checked);
|
|
||||||
});
|
|
||||||
//@ts-ignore
|
|
||||||
onChange(checkbox.checked);
|
|
||||||
}
|
|
||||||
const send = (inputText: string) => {
|
|
||||||
setResponse(inputText);
|
|
||||||
if (!inputText) return;
|
|
||||||
complete(1, [], [{
|
|
||||||
content: inputText,
|
|
||||||
role: "user",
|
|
||||||
}]);
|
|
||||||
};
|
|
||||||
useEffect(() => {
|
|
||||||
(async () => {
|
|
||||||
if (data) {
|
|
||||||
setResponse(data);
|
|
||||||
if (typeof speak !== "undefined" && isLoading === false) {
|
|
||||||
const base64Voice = "data:audio/mp3;base64," + await txt2Voice(data, 4);
|
|
||||||
const audio = document.createElement("audio");
|
|
||||||
audio.src = base64Voice;
|
|
||||||
audio.play();
|
|
||||||
} else {
|
|
||||||
model!.motion("tap_body");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
|
|
||||||
}, [data, isLoading]);
|
|
||||||
|
|
||||||
const { start, end, text, isListening, error } = useVoice2Txt({
|
|
||||||
lang: "cmn-Hans-CN",
|
|
||||||
continuous: false,
|
|
||||||
});
|
});
|
||||||
|
};
|
||||||
|
function draggable(model: any) {
|
||||||
|
model.buttonMode = true;
|
||||||
|
model.on("pointerdown", (e: any) => {
|
||||||
|
model.dragging = true;
|
||||||
|
model._pointerX = e.data.global.x - model.x;
|
||||||
|
model._pointerY = e.data.global.y - model.y;
|
||||||
|
});
|
||||||
|
model.on("pointermove", (e: any) => {
|
||||||
|
if (model.dragging) {
|
||||||
|
model.position.x = e.data.global.x - model._pointerX;
|
||||||
|
model.position.y = e.data.global.y - model._pointerY;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
model.on("pointerupoutside", () => (model.dragging = false));
|
||||||
|
model.on("pointerup", () => (model.dragging = false));
|
||||||
|
}
|
||||||
|
|
||||||
const { isSpeaking, speak, stop } = useTxt2Voice();
|
function addFrame(model: any) {
|
||||||
const [inputText, setInputText] = useState("");
|
const foreground = PIXI.Sprite.from(PIXI.Texture.WHITE);
|
||||||
const isMouthOpen = useRef(false);
|
foreground.width = model.internalModel.width;
|
||||||
const [response, setResponse] = useState("来和我聊天吧~");
|
foreground.height = model.internalModel.height;
|
||||||
useEffect(() => {
|
foreground.alpha = 0.2;
|
||||||
console.log(text, error);
|
|
||||||
if (!text) return;
|
|
||||||
send(text);
|
|
||||||
// 先叉了这里防止消息展示error
|
|
||||||
// if (error) {
|
|
||||||
// setResponse(error);
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
}, [text, error]);
|
|
||||||
const [model, setModel] = useState<Live2DModel>();
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isSpeaking) {
|
|
||||||
isMouthOpen.current = false;
|
|
||||||
}
|
|
||||||
}, [isSpeaking]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
model.addChild(foreground);
|
||||||
if (!isListening && !isSpeaking) {
|
}
|
||||||
}
|
|
||||||
}, [isListening]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
function addHitAreaFrames(model: any) {
|
||||||
// expose PIXI to window so that this plugin is able to
|
try {
|
||||||
// reference window.PIXI.Ticker to automatically update Live2D models
|
//@ts-ignore
|
||||||
//@ts-ignore
|
const hitAreaFrames = new PIXI.live2d.HitAreaFrames();
|
||||||
typeof window !== "undefined" && (window.PIXI = PIXI);
|
|
||||||
(async function () {
|
|
||||||
const app = new PIXI.Application({
|
|
||||||
view: document.getElementById("canvas") as HTMLCanvasElement,
|
|
||||||
backgroundAlpha: 0,
|
|
||||||
});
|
|
||||||
|
|
||||||
const model = await Live2DModel.from(
|
model.addChild(hitAreaFrames);
|
||||||
"https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/haru/haru_greeter_t03.model3.json"
|
|
||||||
);
|
|
||||||
|
|
||||||
app.stage.addChild(model);
|
checkbox(
|
||||||
const scaleX = (innerWidth * 0.4) / model.width;
|
"Hit Area Frames",
|
||||||
const scaleY = (innerHeight * 0.8) / model.height;
|
(checked: any) => (hitAreaFrames.visible = checked)
|
||||||
|
);
|
||||||
|
} catch (err) {}
|
||||||
|
}
|
||||||
|
|
||||||
// fit the window
|
function checkbox(name: any, onChange: any) {
|
||||||
model.scale.set(0.3);
|
const id = name.replace(/\W/g, "").toLowerCase();
|
||||||
|
|
||||||
model.y = innerHeight * 0.1;
|
let checkbox = document.getElementById(id);
|
||||||
|
|
||||||
draggable(model);
|
if (!checkbox) {
|
||||||
addFrame(model);
|
const p = document.createElement("p")!;
|
||||||
addHitAreaFrames(model);
|
p.innerHTML = `<input type="checkbox" id="${id}"> <label for="${id}">${name}</label>`;
|
||||||
setModel(model);
|
|
||||||
model.on("hit", (hitAreas) => {
|
|
||||||
if (hitAreas.includes("body")) {
|
|
||||||
model.motion("tap_body");
|
|
||||||
model.motion("speak");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
console.log("ok")
|
|
||||||
})();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
document!.getElementById("control")!.appendChild(p);
|
||||||
<main className="w-full h-full bg-blue-200">
|
checkbox = p.firstChild as HTMLElement;
|
||||||
{typeof window !== "undefined" &&
|
}
|
||||||
typeof window.Live2DCubismCore !== "undefined" && (
|
|
||||||
<div className="flex w-full flex-col h-full items-center justify-center relative text-white">
|
|
||||||
{/* live2d */}
|
|
||||||
<canvas className="w-full " id="canvas"></canvas>
|
|
||||||
|
|
||||||
{/* 旧叉 */}
|
checkbox.addEventListener("change", () => {
|
||||||
{/* <div className="absolute right-[20vw] top-4 bg-orange-300 rounded w-[20vw] h-auto text-sm">
|
//@ts-ignore
|
||||||
{response ? response : "请输入文字和我聊天吧"}
|
onChange(checkbox.checked);
|
||||||
</div> */}
|
});
|
||||||
|
//@ts-ignore
|
||||||
{/* 角色信息 */}
|
onChange(checkbox.checked);
|
||||||
<div className="absolute left-[4vw] top-4 bg-orange-300 rounded-full w-[36vw] h-auto text-sm flex flex-nowrap px-2 py-1 gap-2">
|
}
|
||||||
<div className="w-10 h-10 rounded-full bg-white"></div>
|
const send = (inputText: string) => {
|
||||||
<div className="text-xl">昵称</div>
|
setResponse(inputText);
|
||||||
</div>
|
if (!inputText) return;
|
||||||
|
complete(
|
||||||
{/* 消息泡泡 */}
|
1,
|
||||||
<div className="absolute left-1/2 -translate-x-1/2 top-[10vh] bg-black bg-opacity-30 rounded-2xl w-[60vw] h-auto p-2 whitespace-normal break-words">
|
[],
|
||||||
{response ? response : "请输入文字和我聊天吧"}
|
[
|
||||||
</div>
|
{
|
||||||
|
content: inputText,
|
||||||
{/* 选项 */}
|
role: "user",
|
||||||
<div className="absolute right-0 top-[20vh] w-[16vw] flex flex-col flex-nowrap items-center gap-10">
|
},
|
||||||
{opList.map((item) => (
|
]
|
||||||
<div
|
|
||||||
key={item.id}
|
|
||||||
className="bg-orange-300 rounded-l-full w-full h-auto text-sm flex flex-col flex-nowrap items-center pl-1 py-1"
|
|
||||||
>
|
|
||||||
<div className="w-6 h-6 overflow-hidden">
|
|
||||||
<img
|
|
||||||
// 这图片中图标和空白的比例太邪门了
|
|
||||||
className="w-full h-full scale-[2.5]"
|
|
||||||
src={item.src}
|
|
||||||
alt={item.title}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="text-xs">{item.title}</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 旧叉 */}
|
|
||||||
{/* <div id="control"></div> */}
|
|
||||||
{/* <button onClick={start}>语音输入</button>
|
|
||||||
<button onClick={end}>结束语音输入</button> */}
|
|
||||||
|
|
||||||
{/* 输入框 */}
|
|
||||||
<div className="absolute w-[90vw] h-10 bottom-2 left-1/2 -translate-x-1/2 bg-white rounded-xl flex flex-nowrap items-center justify-evenly gap-2 px-2 py-1">
|
|
||||||
<button
|
|
||||||
className="w-6 h-6 overflow-hidden"
|
|
||||||
onClick={() => {
|
|
||||||
// 切换语音/键盘
|
|
||||||
useVoice ? setUseVoice(false) : setUseVoice(true);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
className="w-full h-full scale-[2.5]"
|
|
||||||
src={`http://picdown.jchysoft.com/uiIcon/${useVoice ? "jianpan" : "yuyin"
|
|
||||||
}.png`}
|
|
||||||
alt="输入方式"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
{useVoice ? (
|
|
||||||
<button
|
|
||||||
onMouseDown={start}
|
|
||||||
onMouseUp={end}
|
|
||||||
onTouchStart={start}
|
|
||||||
onTouchEnd={end}
|
|
||||||
className="h-full bg-gray-300 flex-1 text-center rounded active:bg-gray-500 focus:outline-none select-none"
|
|
||||||
>
|
|
||||||
按住说话
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<input
|
|
||||||
className="h-full text-black rounded flex-1 bg-gray-200 pl-2"
|
|
||||||
value={inputText}
|
|
||||||
onChange={(e) => {
|
|
||||||
setInputText(e.target.value);
|
|
||||||
console.log(e.target.value);
|
|
||||||
}}
|
|
||||||
></input>
|
|
||||||
)}
|
|
||||||
<button
|
|
||||||
className="w-6 h-6 overflow-hidden"
|
|
||||||
onClick={() => {
|
|
||||||
send(inputText);
|
|
||||||
setInputText("");
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
className="w-full h-full scale-[2.5]"
|
|
||||||
src="http://picdown.jchysoft.com/uiIcon/fasong.png"
|
|
||||||
alt="发送按钮"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</main>
|
|
||||||
);
|
);
|
||||||
|
};
|
||||||
|
useEffect(() => {
|
||||||
|
(async () => {
|
||||||
|
if (data) {
|
||||||
|
setResponse(data);
|
||||||
|
if (typeof speak !== "undefined" && isLoading === false) {
|
||||||
|
const base64Voice =
|
||||||
|
"data:audio/mp3;base64," + (await txt2Voice(data, 4));
|
||||||
|
const audio = document.createElement("audio");
|
||||||
|
audio.src = base64Voice;
|
||||||
|
audio.play();
|
||||||
|
} else {
|
||||||
|
model!.motion("tap_body");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
}, [data, isLoading]);
|
||||||
|
|
||||||
|
const { start, end, text, isListening, error } = useVoice2Txt({
|
||||||
|
lang: "cmn-Hans-CN",
|
||||||
|
continuous: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { isSpeaking, speak, stop } = useTxt2Voice();
|
||||||
|
const [inputText, setInputText] = useState("");
|
||||||
|
const isMouthOpen = useRef(false);
|
||||||
|
const [response, setResponse] = useState("来和我聊天吧~");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
console.log(text, error);
|
||||||
|
if (!text) return;
|
||||||
|
send(text);
|
||||||
|
// 先叉了这里防止消息展示error
|
||||||
|
// if (error) {
|
||||||
|
// setResponse(error);
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
}, [text, error]);
|
||||||
|
const [model, setModel] = useState<Live2DModel>();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isSpeaking) {
|
||||||
|
isMouthOpen.current = false;
|
||||||
|
}
|
||||||
|
}, [isSpeaking]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isListening && !isSpeaking) {
|
||||||
|
}
|
||||||
|
}, [isListening]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// expose PIXI to window so that this plugin is able to
|
||||||
|
// reference window.PIXI.Ticker to automatically update Live2D models
|
||||||
|
//@ts-ignore
|
||||||
|
typeof window !== "undefined" && (window.PIXI = PIXI);
|
||||||
|
(async function () {
|
||||||
|
const app = new PIXI.Application({
|
||||||
|
view: document.getElementById("canvas") as HTMLCanvasElement,
|
||||||
|
backgroundAlpha: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const model = await Live2DModel.from(
|
||||||
|
"https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/haru/haru_greeter_t03.model3.json"
|
||||||
|
);
|
||||||
|
|
||||||
|
app.stage.addChild(model);
|
||||||
|
const scaleX = (innerWidth * 0.4) / model.width;
|
||||||
|
const scaleY = (innerHeight * 0.8) / model.height;
|
||||||
|
|
||||||
|
// fit the window
|
||||||
|
model.scale.set(0.3);
|
||||||
|
|
||||||
|
model.y = innerHeight * 0.1;
|
||||||
|
|
||||||
|
draggable(model);
|
||||||
|
addFrame(model);
|
||||||
|
addHitAreaFrames(model);
|
||||||
|
setModel(model);
|
||||||
|
model.on("hit", (hitAreas) => {
|
||||||
|
if (hitAreas.includes("body")) {
|
||||||
|
model.motion("tap_body");
|
||||||
|
model.motion("speak");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log("ok");
|
||||||
|
})();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// 换肤/换背景相关
|
||||||
|
const [skinOpen, setSkinOpen] = useState(false);
|
||||||
|
const [bgOpen, setBgOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
// TODO: 背景状态
|
||||||
|
<main className="w-full h-full bg-[url('http://picdown.jchysoft.com/live2d/beijing/bj1%20%281%29.webp')] bg-center bg-cover">
|
||||||
|
{typeof window !== "undefined" &&
|
||||||
|
typeof window.Live2DCubismCore !== "undefined" && (
|
||||||
|
<div className="flex w-full flex-col h-full items-center justify-center relative text-white">
|
||||||
|
{/* live2d */}
|
||||||
|
{/* TODO: live2d模型状态 */}
|
||||||
|
<canvas className="w-full " id="canvas"></canvas>
|
||||||
|
|
||||||
|
{/* 角色信息 */}
|
||||||
|
<div className="absolute left-[4vw] top-8 bg-gradient-to-r from-start-color to-end-color rounded-full w-[36vw] h-auto text-sm flex flex-nowrap px-2 py-1 gap-2">
|
||||||
|
<div className="w-10 h-10 rounded-full bg-white"></div>
|
||||||
|
<div className="text-xl">昵称</div>
|
||||||
|
{/* <div className="flex flex-col justify-evenly">
|
||||||
|
<div className="text-xs">亲密度</div>
|
||||||
|
</div> */}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 消息泡泡 */}
|
||||||
|
<div className="absolute left-1/2 -translate-x-1/2 top-[12vh] bg-black bg-opacity-30 rounded-2xl border-2 border-[#FCD161] w-[60vw] h-auto p-2 whitespace-normal break-words">
|
||||||
|
{response ? response : "请输入文字和我聊天吧"}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 右侧选项 */}
|
||||||
|
<div className="absolute right-0 top-[30vh] w-[16vw] flex flex-col flex-nowrap items-center gap-10">
|
||||||
|
{opList.map((item) => (
|
||||||
|
<div
|
||||||
|
key={item.id}
|
||||||
|
className="bg-gradient-to-r from-end-color to-start-color rounded-l-full w-full h-auto text-sm flex flex-col flex-nowrap items-center p-1"
|
||||||
|
>
|
||||||
|
<div className="w-6 h-6 overflow-hidden">
|
||||||
|
<img
|
||||||
|
// 这图片中图标和空白的比例太邪门了
|
||||||
|
className="w-full h-full scale-[2.5]"
|
||||||
|
src={item.src}
|
||||||
|
alt={item.title}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs">{item.title}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 皮肤列表 */}
|
||||||
|
{skinOpen && (
|
||||||
|
<SkinOrBgList
|
||||||
|
type="skin"
|
||||||
|
list={fakeList}
|
||||||
|
onSelect={(type, selectedItem) => {
|
||||||
|
console.log("选中的新的皮肤", type, selectedItem);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{/* 背景列表 */}
|
||||||
|
{bgOpen && (
|
||||||
|
<SkinOrBgList
|
||||||
|
type="bg"
|
||||||
|
list={fakeList2}
|
||||||
|
onSelect={(type, selectedItem) => {
|
||||||
|
console.log("选中的新的背景", type, selectedItem);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 底部换肤 & 换背景 */}
|
||||||
|
<div className="absolute w-[90vw] bottom-14 left-1/2 -translate-x-1/2 flex flex-nowrap items-center justify-between">
|
||||||
|
<button
|
||||||
|
className="w-12 h-12 overflow-hidden"
|
||||||
|
onClick={() => {
|
||||||
|
console.log("换肤");
|
||||||
|
if (bgOpen && !skinOpen) {
|
||||||
|
setBgOpen(false);
|
||||||
|
}
|
||||||
|
setSkinOpen(!skinOpen);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
className="w-full h-full scale-[1.5]"
|
||||||
|
src={`http://picdown.jchysoft.com/uiIcon/huanfu.png`}
|
||||||
|
alt="换肤"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="w-12 h-12 overflow-hidden"
|
||||||
|
onClick={() => {
|
||||||
|
console.log("换背景");
|
||||||
|
if (skinOpen && !bgOpen) {
|
||||||
|
setSkinOpen(false);
|
||||||
|
}
|
||||||
|
setBgOpen(!bgOpen);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
className="w-full h-full scale-[1.5]"
|
||||||
|
src={`http://picdown.jchysoft.com/uiIcon/huanbeijing.png`}
|
||||||
|
alt="换背景"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 底部消息输入发送框 */}
|
||||||
|
<div className="absolute w-[90vw] h-10 bottom-2 left-1/2 -translate-x-1/2 bg-white rounded-xl flex flex-nowrap items-center justify-evenly gap-2 px-2 py-1">
|
||||||
|
<button
|
||||||
|
className="w-6 h-6 overflow-hidden"
|
||||||
|
onClick={() => {
|
||||||
|
// 切换语音/键盘
|
||||||
|
useVoice ? setUseVoice(false) : setUseVoice(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
className="w-full h-full scale-[2.8]"
|
||||||
|
src={`http://picdown.jchysoft.com/uiIcon/${
|
||||||
|
useVoice ? "jianpan" : "yuyin"
|
||||||
|
}.png`}
|
||||||
|
alt="输入方式"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
{useVoice ? (
|
||||||
|
<button
|
||||||
|
onMouseDown={start}
|
||||||
|
onMouseUp={end}
|
||||||
|
onTouchStart={start}
|
||||||
|
onTouchEnd={end}
|
||||||
|
className="h-full bg-gray-300 flex-1 text-center rounded active:bg-gray-500 focus:outline-none select-none"
|
||||||
|
>
|
||||||
|
按住说话
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<input
|
||||||
|
className="h-full text-black rounded flex-1 bg-gray-200 pl-2"
|
||||||
|
value={inputText}
|
||||||
|
onChange={(e) => {
|
||||||
|
setInputText(e.target.value);
|
||||||
|
console.log(e.target.value);
|
||||||
|
}}
|
||||||
|
></input>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
className="w-6 h-6 overflow-hidden"
|
||||||
|
onClick={() => {
|
||||||
|
send(inputText);
|
||||||
|
setInputText("");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
className="w-full h-full scale-[2.5]"
|
||||||
|
src="http://picdown.jchysoft.com/uiIcon/fasong.png"
|
||||||
|
alt="发送按钮"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</main>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const fakeList = [
|
||||||
|
{ id: 1, src: "", name: "皮肤1", state: 1 },
|
||||||
|
{ id: 2, src: "", name: "皮肤2", state: 1 },
|
||||||
|
{ id: 3, src: "", name: "皮肤3", state: 0 },
|
||||||
|
{ id: 4, src: "", name: "皮肤4", state: 0 },
|
||||||
|
{ id: 5, src: "", name: "皮肤5", state: 0 },
|
||||||
|
{ id: 6, src: "", name: "皮肤6", state: 0 },
|
||||||
|
{ id: 7, src: "", name: "皮肤7", state: 0 },
|
||||||
|
{ id: 8, src: "", name: "皮肤8", state: 0 },
|
||||||
|
{ id: 9, src: "", name: "皮肤9", state: 0 },
|
||||||
|
{ id: 10, src: "", name: "皮肤10", state: 0 },
|
||||||
|
];
|
||||||
|
const fakeList2 = [
|
||||||
|
{ id: 1, src: "", name: "背景1", state: 1 },
|
||||||
|
{ id: 2, src: "", name: "背景2", state: 1 },
|
||||||
|
{ id: 3, src: "", name: "背景3", state: 0 },
|
||||||
|
{ id: 4, src: "", name: "背景4", state: 0 },
|
||||||
|
{ id: 5, src: "", name: "背景5", state: 0 },
|
||||||
|
{ id: 6, src: "", name: "背景6", state: 0 },
|
||||||
|
{ id: 7, src: "", name: "背景7", state: 0 },
|
||||||
|
{ id: 8, src: "", name: "背景8", state: 0 },
|
||||||
|
{ id: 9, src: "", name: "背景9", state: 0 },
|
||||||
|
{ id: 10, src: "", name: "背景10", state: 0 },
|
||||||
|
];
|
||||||
|
|
||||||
|
type listItem = { id: number; src: string; name: string; state: number };
|
||||||
|
export const SkinOrBgList = ({
|
||||||
|
type,
|
||||||
|
list,
|
||||||
|
onSelect,
|
||||||
|
}: {
|
||||||
|
type: "skin" | "bg";
|
||||||
|
list: listItem[];
|
||||||
|
onSelect: (type: "skin" | "bg", item: listItem) => void;
|
||||||
|
}) => {
|
||||||
|
function handleSelect(selectedItem: listItem) {
|
||||||
|
if (selectedItem.state == 0) {
|
||||||
|
console.log("未解锁，不可用");
|
||||||
|
// TODO: 解锁操作
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
onSelect(type, selectedItem);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="absolute left-1/2 -translate-x-1/2 bottom-24 mb-4 w-[90vw] h-32 bg-white bg-opacity-30 rounded-2xl py-4 px-6 flex flex-nowrap gap-2 overflow-x-auto">
|
||||||
|
{list.map((item) => (
|
||||||
|
<div
|
||||||
|
onClick={() => handleSelect(item)}
|
||||||
|
key={item.id}
|
||||||
|
className="h-full w-24 rounded-2xl border-4 border-dashed border-[#FCD161] bg-orange-100 bg-opacity-10 flex-shrink-0 relative overflow-hidden"
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
<img
|
||||||
|
className="absolute top-0 left-0 w-full h-full object-cover"
|
||||||
|
src="https://iconfont.alicdn.com/p/illus/preview_image/eZQFvSX6g8f1/70d91c51-e6b0-408c-84c5-50174d24a059.png"
|
||||||
|
alt={`${item.name}图片`}
|
||||||
|
/>
|
||||||
|
{item.state == 0 && (
|
||||||
|
<>
|
||||||
|
<div className="absolute top-0 left-0 w-full h-full bg-white bg-opacity-30"></div>
|
||||||
|
<img
|
||||||
|
className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 z-10 w-1/2 h-auto"
|
||||||
|
src="http://picdown.jchysoft.com/uiIcon/weijiesuo.png"
|
||||||
|
alt="未解锁"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|||||||
@@ -12,6 +12,11 @@ const config: Config = {
|
|||||||
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
|
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
|
||||||
"gradient-conic":
|
"gradient-conic":
|
||||||
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
|
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
|
||||||
|
"gradient-to-r": "linear-gradient(to right, var(--tw-gradient-stops))",
|
||||||
|
},
|
||||||
|
colors: {
|
||||||
|
"start-color": "#FD7A61",
|
||||||
|
"end-color": "#FF934D",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user