|
...
|
...
|
@@ -9,10 +9,16 @@ import { useMobileScreen } from "@/app/utils"; |
|
|
|
import { IconButton } from "../button";
|
|
|
|
import Locale from "@/app/locales";
|
|
|
|
import { Path } from "@/app/constant";
|
|
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import { useLocation, useNavigate } from "react-router-dom";
|
|
|
|
import { getClientConfig } from "@/app/config/client";
|
|
|
|
import React, { useCallback, useMemo, useRef, useState } from "react";
|
|
|
|
import { useAppConfig, useMindMapStore } from "@/app/store";
|
|
|
|
import React, {
|
|
|
|
useCallback,
|
|
|
|
useEffect,
|
|
|
|
useMemo,
|
|
|
|
useRef,
|
|
|
|
useState,
|
|
|
|
} from "react";
|
|
|
|
import { useAppConfig, useChatStore, useMindMapStore } from "@/app/store";
|
|
|
|
import { ChatAction } from "../chat";
|
|
|
|
import { useWindowSize } from "@/app/utils";
|
|
|
|
import { exportHtmlToWord } from "@/app/utils/fileExport/word";
|
|
...
|
...
|
@@ -37,11 +43,14 @@ import HtmlIcon from "@/app/icons/HTML.svg"; |
|
|
|
|
|
|
|
import { message } from "antd";
|
|
|
|
import { HTMLPreview } from "../artifacts";
|
|
|
|
import { getMindPrompt } from "@/app/utils/prompt";
|
|
|
|
import { getMindPrompt, getWrtingPrompt } from "@/app/utils/prompt";
|
|
|
|
import { htmlToPdf2 } from "@/app/utils/fileExport/toPdf";
|
|
|
|
import { htmlToExcel } from "@/app/utils/fileExport/export2Excel";
|
|
|
|
import { hasTable, htmlToExcel } from "@/app/utils/fileExport/export2Excel";
|
|
|
|
import { writePromptParam } from "@/app/types/prompt";
|
|
|
|
import { mergedData } from "./writie-panel";
|
|
|
|
|
|
|
|
export function WritingPage() {
|
|
|
|
const chatStore = useChatStore();
|
|
|
|
const isMobileScreen = useMobileScreen();
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const clientConfig = useMemo(() => getClientConfig(), []);
|
|
...
|
...
|
@@ -58,6 +67,8 @@ export function WritingPage() { |
|
|
|
const [htmlCode, setHtmlCode] = useState(
|
|
|
|
localStorage.getItem("htmlCode") || "",
|
|
|
|
);
|
|
|
|
const query = useLocation(); //获取路由参数
|
|
|
|
let { msg, writeMessage } = query.state || {}; //获取路由参数
|
|
|
|
|
|
|
|
//编辑器
|
|
|
|
const toolbarOptions = [
|
|
...
|
...
|
@@ -69,9 +80,66 @@ export function WritingPage() { |
|
|
|
["link", "image"],
|
|
|
|
];
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (!msg) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (!writeMessage) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const navigateGetData = async () => {
|
|
|
|
try {
|
|
|
|
const param: writePromptParam = {
|
|
|
|
writingPurposeName: mergedData[0].default,
|
|
|
|
writingStyleName: mergedData[2].default,
|
|
|
|
writingLanguageName: mergedData[3].default,
|
|
|
|
prompt: writeMessage,
|
|
|
|
writingTypeName: mergedData[4].default,
|
|
|
|
isImgName: mergedData[5].default,
|
|
|
|
writingCount: "200",
|
|
|
|
};
|
|
|
|
const input = getWrtingPrompt(param);
|
|
|
|
setLoading(true);
|
|
|
|
console.log("------------------------" + input);
|
|
|
|
const response = await chatStore.directLlmInvoke(input, "gpt-4o-mini");
|
|
|
|
let cleanedContent = response.startsWith("```html")
|
|
|
|
? response.substring(8)
|
|
|
|
: response;
|
|
|
|
if (cleanedContent.endsWith("```")) {
|
|
|
|
cleanedContent = cleanedContent.substring(
|
|
|
|
0,
|
|
|
|
cleanedContent.length - 4,
|
|
|
|
);
|
|
|
|
}
|
|
|
|
//保存html头部
|
|
|
|
const bodyTagRegex = /<body[^>]*>/i;
|
|
|
|
const bodyTagMatch = cleanedContent.match(bodyTagRegex);
|
|
|
|
if (bodyTagMatch && bodyTagMatch.index !== undefined) {
|
|
|
|
// 截取从文档开头到 <body> 标签的起始位置
|
|
|
|
const contentUpToBody = cleanedContent.slice(
|
|
|
|
0,
|
|
|
|
bodyTagMatch.index + bodyTagMatch[0].length,
|
|
|
|
);
|
|
|
|
setHtmlheader(contentUpToBody); //保存html头部
|
|
|
|
}
|
|
|
|
localStorage.setItem("htmlCode", cleanedContent);
|
|
|
|
setHtmlCode(cleanedContent);
|
|
|
|
} catch (error) {
|
|
|
|
message.error("生成失败，请重试");
|
|
|
|
} finally {
|
|
|
|
setLoading(false);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
navigateGetData();
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
// 生成完整HTML内容
|
|
|
|
const generateFullHtml = useCallback(
|
|
|
|
() => `${htmlHeader}${htmlCode}</body></html>`,
|
|
|
|
() => `${htmlHeader}
|
|
|
|
<div style="width:${width}">
|
|
|
|
${htmlCode}
|
|
|
|
</div>
|
|
|
|
</body></html>`,
|
|
|
|
[htmlHeader, htmlCode],
|
|
|
|
);
|
|
|
|
|
|
...
|
...
|
@@ -87,7 +155,7 @@ export function WritingPage() { |
|
|
|
};
|
|
|
|
//跳转到ppt页面
|
|
|
|
function toPowerpoint(pptMessage: string) {
|
|
|
|
navigate("/powerpoint", { state: { msg: true, pptMessage: pptMessage } });
|
|
|
|
navigate(Path.Powerpoint, { state: { msg: true, pptMessage: pptMessage } });
|
|
|
|
}
|
|
|
|
// 转至思维导图页面
|
|
|
|
const toMind = useCallback(
|
|
...
|
...
|
@@ -102,7 +170,7 @@ export function WritingPage() { |
|
|
|
],
|
|
|
|
content,
|
|
|
|
);
|
|
|
|
navigate("/mind", { state: { msg: true } });
|
|
|
|
navigate(Path.Mind, { state: { msg: true } });
|
|
|
|
},
|
|
|
|
[navigate],
|
|
|
|
);
|
|
...
|
...
|
@@ -124,12 +192,6 @@ export function WritingPage() { |
|
|
|
}
|
|
|
|
}, [generateFullHtml]);
|
|
|
|
|
|
|
|
function hasTable(htmlContent: string): boolean {
|
|
|
|
const parser = new DOMParser();
|
|
|
|
const doc = parser.parseFromString(htmlContent, "text/html");
|
|
|
|
return doc.querySelector("table") !== null;
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<WriteSiderBar
|
|
...
|
...
|
@@ -201,7 +263,8 @@ export function WritingPage() { |
|
|
|
icon={<PdfIcon />}
|
|
|
|
onClick={async () => {
|
|
|
|
setLoading(true);
|
|
|
|
await htmlToPdf2(htmlCode);
|
|
|
|
const html = `<div style="width:${width}">${htmlCode}</div>`;
|
|
|
|
await htmlToPdf2(html);
|
|
|
|
setLoading(false);
|
|
|
|
}}
|
|
|
|
disabled={isEdit}
|
|
...
|
...
|
@@ -210,11 +273,7 @@ export function WritingPage() { |
|
|
|
text={Locale.Export.Word}
|
|
|
|
icon={<WordIcon />}
|
|
|
|
onClick={() => {
|
|
|
|
const html = `${htmlHeader}
|
|
|
|
${htmlCode}
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
`;
|
|
|
|
const html = generateFullHtml();
|
|
|
|
exportHtmlToWord(html);
|
|
|
|
}}
|
|
|
|
disabled={isEdit}
|
...
|
...
|
|
