|
|
|
import styles from "./powerpoint.module.scss";
|
|
|
|
import chatStyles from "@/app/components/chat.module.scss";
|
|
|
|
import clsx from "clsx";
|
|
|
|
|
|
|
|
import { IconButton } from "../button";
|
|
|
|
import Locale from "@/app/locales";
|
|
|
|
import { useNavigate, useLocation } from "react-router-dom";
|
|
|
|
import { useMobileScreen } from "@/app/utils";
|
|
|
|
import { Path } from "@/app/constant";
|
|
|
|
import { useRef, useEffect, useMemo } from "react";
|
|
|
|
import { CreatorType, DocmeeUI } from "@docmee/sdk-ui";
|
|
|
|
import { getClientConfig } from "@/app/config/client";
|
|
|
|
import { useAppConfig, useAccessStore } from "@/app/store";
|
|
|
|
import type { generateError, generateOutline } from "@/app/types/docmee";
|
|
|
|
import axios from "axios";
|
|
|
|
import ReturnIcon from "@/app/icons/return.svg";
|
|
|
|
import MinIcon from "@/app/icons/min.svg";
|
|
|
|
import MaxIcon from "@/app/icons/max.svg";
|
|
|
|
import { message } from "antd";
|
|
|
|
|
|
|
|
// 错误消息映射
|
|
|
|
const errorMap: { [key: number]: string } = {
|
|
|
|
[-1]: "操作失败",
|
|
|
|
[88]: "功能受限（积分已用完 或 非VIP）",
|
|
|
|
[98]: "认证失败（检查token是否过期）",
|
|
|
|
[99]: "登录过期",
|
|
|
|
[1001]: "数据不存在",
|
|
|
|
[1002]: "数据访问异常",
|
|
|
|
[1003]: "无权限访问",
|
|
|
|
[1006]: "内容涉及敏感信息",
|
|
|
|
[1009]: "AI服务异常",
|
|
|
|
[1010]: "你的次数已用完",
|
|
|
|
[1012]: "请求太频繁，限流",
|
|
|
|
};
|
|
|
|
|
|
|
|
// 获取错误消息的函数
|
|
|
|
const getErrorMessage = (errorCode: number): string => {
|
|
|
|
return errorMap[errorCode] || `未知错误（错误码：${errorCode}）`;
|
|
|
|
};
|
|
|
|
|
|
|
|
export function PowerPoint() {
|
|
|
|
const accessStore = useAccessStore();
|
|
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
const isPowerpoint = location.pathname === Path.Powerpoint;
|
|
|
|
const isMobileScreen = useMobileScreen();
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const clientConfig = useMemo(() => getClientConfig(), []);
|
|
|
|
const showMaxIcon = !isMobileScreen && !clientConfig?.isApp;
|
|
|
|
const config = useAppConfig();
|
|
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
|
|
|
|
|
|
const query = useLocation();
|
|
|
|
const { msg, pptMessage } = query.state || {};
|
|
|
|
|
|
|
|
const getToken = async () => {
|
|
|
|
if (!accessStore.accessCode) {
|
|
|
|
return message.error("请先输入登录秘钥");
|
|
|
|
}
|
|
|
|
const res = await fetch("/api/ppt/createApiToken", {
|
|
|
|
method: "POST",
|
|
|
|
body: JSON.stringify(accessStore.accessCode),
|
|
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
console.log(data);
|
|
|
|
if (data.status == 200) {
|
|
|
|
return data.data.data.token;
|
|
|
|
} else {
|
|
|
|
message.error(data.error || "获取 token 失败");
|
|
|
|
}
|
|
|
|
return "";
|
|
|
|
};
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const initializeDocmee = async () => {
|
|
|
|
let token = localStorage.getItem("token");
|
|
|
|
// 如果本地没有token，则获取新token
|
|
|
|
if (!token) {
|
|
|
|
token = await getToken();
|
|
|
|
if (!token) {
|
|
|
|
message.error("无效token请检查登录密码！");
|
|
|
|
return navigate(Path.Settings); // 跳转回聊天页
|
|
|
|
}
|
|
|
|
localStorage.setItem("token", token);
|
|
|
|
}
|
|
|
|
if (!containerRef.current) {
|
|
|
|
throw new Error("Container element not found");
|
|
|
|
}
|
|
|
|
const docmee = new DocmeeUI({
|
|
|
|
container: containerRef.current,
|
|
|
|
page: "creator-v2",
|
|
|
|
token: token,
|
|
|
|
mode: "light",
|
|
|
|
lang: "zh",
|
|
|
|
isMobile: isMobileScreen,
|
|
|
|
creatorData: {
|
|
|
|
type: CreatorType.AI_GEN,
|
|
|
|
subject: "Ai行业未来10年的发展预测",
|
|
|
|
},
|
|
|
|
});
|
|
|
|
if (msg) {
|
|
|
|
docmee.on("mounted", (msg: generateOutline) => {
|
|
|
|
docmee.changeCreatorData({ text: pptMessage }, true);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
docmee.on("beforeGenerate", (msg: generateOutline) => {
|
|
|
|
axios.post("https://docmee.cn/api/ppt/v2/generateContent", msg, {
|
|
|
|
headers: { token: token },
|
|
|
|
});
|
|
|
|
});
|
|
|
|
docmee.on("error", (msg: generateError) => {
|
|
|
|
if (msg.data.code == 98) {
|
|
|
|
docmee.updateToken(token);
|
|
|
|
}
|
|
|
|
message.error(msg.data.message);
|
|
|
|
});
|
|
|
|
return () => docmee.destroy();
|
|
|
|
};
|
|
|
|
initializeDocmee().catch(console.error);
|
|
|
|
}, [navigate, isMobileScreen, msg, pptMessage]);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div style={{ width: "100%", height: "100%" }}>
|
|
|
|
<div className={chatStyles.chat} key={"1"}>
|
|
|
|
<div className="window-header" data-tauri-drag-region>
|
|
|
|
<div
|
|
|
|
className={clsx(
|
|
|
|
"window-header-title",
|
|
|
|
chatStyles["chat-body-title"],
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
<div className={`window-header-main-title`}>PPT制作</div>
|
|
|
|
</div>
|
|
|
|
<div className={chatStyles["chat-message-actions"]}>
|
|
|
|
<div className={chatStyles["chat-input-actions"]}></div>
|
|
|
|
</div>
|
|
|
|
<div className="window-actions">
|
|
|
|
<IconButton
|
|
|
|
aria="返回首页"
|
|
|
|
icon={<ReturnIcon />}
|
|
|
|
bordered
|
|
|
|
title={Locale.Chat.Actions.ChatList}
|
|
|
|
onClick={() => navigate(Path.Chat)}
|
|
|
|
/>
|
|
|
|
{showMaxIcon && (
|
|
|
|
<div className="window-action-button">
|
|
|
|
<IconButton
|
|
|
|
aria={Locale.Chat.Actions.FullScreen}
|
|
|
|
icon={config.tightBorder ? <MinIcon /> : <MaxIcon />}
|
|
|
|
bordered
|
|
|
|
onClick={() => {
|
|
|
|
config.update(
|
|
|
|
(config) => (config.tightBorder = !config.tightBorder),
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className={chatStyles["chat-body"]} ref={scrollRef}>
|
|
|
|
<div ref={containerRef} className={styles["container"]}></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
} |
...
|
...
|
|
