|
...
|
...
|
@@ -3,7 +3,7 @@ import { ControlParamItem } from "../sd"; |
|
|
|
import { SideBarTail } from "@/app/components/sidebar";
|
|
|
|
import { useState } from "react";
|
|
|
|
import { IconButton } from "../button";
|
|
|
|
import { message } from "antd";
|
|
|
|
import { message as msgModal } from "antd";
|
|
|
|
import { useChatStore } from "@/app/store";
|
|
|
|
import { getWrtingPrompt } from "@/app/utils/prompt";
|
|
|
|
import type { writePromptParam } from "@/app/types/prompt";
|
|
...
|
...
|
@@ -11,119 +11,15 @@ import { processChatFile } from "@/app/utils/fileUtil"; |
|
|
|
import Locale from "@/app/locales";
|
|
|
|
import styles from "./wrtie-panel.module.scss";
|
|
|
|
import DeleteIcon from "@/app/icons/delete.svg";
|
|
|
|
import {
|
|
|
|
getWritingStyleOptions,
|
|
|
|
maxWord,
|
|
|
|
mergedData,
|
|
|
|
minWord,
|
|
|
|
writeMessage,
|
|
|
|
WritePanelProps,
|
|
|
|
} from "./menuData";
|
|
|
|
|
|
|
|
export const mergedData = [
|
|
|
|
{
|
|
|
|
title: "写作用途",
|
|
|
|
required: true,
|
|
|
|
type: "select",
|
|
|
|
default: "公司官网",
|
|
|
|
options: [
|
|
|
|
{ name: "公司官网", value: "100%" },
|
|
|
|
{ name: "小红书", value: "400px" },
|
|
|
|
{ name: "微信公众号", value: "300px" },
|
|
|
|
{ name: "今日头条", value: "500px" },
|
|
|
|
],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: "图片模式",
|
|
|
|
type: "select",
|
|
|
|
required: false,
|
|
|
|
default: "免费配图",
|
|
|
|
options: [
|
|
|
|
{ name: "免费配图", value: "free" },
|
|
|
|
{ name: "收费配图", value: "paid" },
|
|
|
|
],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: "写作风格",
|
|
|
|
type: "select",
|
|
|
|
required: false,
|
|
|
|
default: "专业",
|
|
|
|
options: [
|
|
|
|
{ name: "专业", value: "professional" },
|
|
|
|
{ name: "活泼", value: "lively" },
|
|
|
|
{ name: "严谨", value: "strict" },
|
|
|
|
],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: "写作语言",
|
|
|
|
type: "select",
|
|
|
|
required: false,
|
|
|
|
default: "中文",
|
|
|
|
options: [
|
|
|
|
{ name: "中文", value: "Chinese" },
|
|
|
|
{ name: "英文", value: "English" },
|
|
|
|
{ name: "法文", value: "French" },
|
|
|
|
{ name: "德文", value: "German" },
|
|
|
|
],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: "写作类型",
|
|
|
|
type: "select",
|
|
|
|
required: false,
|
|
|
|
default: "产品推广文案",
|
|
|
|
options: [
|
|
|
|
{ name: "产品推广文案", value: "promotion" },
|
|
|
|
{ name: "品牌宣传文案", value: "propagandize" },
|
|
|
|
{ name: "产品说明书", value: "instructionBook" },
|
|
|
|
{ name: "产品介绍", value: "introduce" },
|
|
|
|
],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: "是否图文",
|
|
|
|
type: "select",
|
|
|
|
required: false,
|
|
|
|
default: "是",
|
|
|
|
options: [
|
|
|
|
{ name: "是", value: "true" },
|
|
|
|
{ name: "否", value: "false" },
|
|
|
|
],
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
// 20250408新增写作风格选项映射
|
|
|
|
const getWritingStyleOptions = (purpose: string) => {
|
|
|
|
switch (purpose) {
|
|
|
|
case "公司官网":
|
|
|
|
return [
|
|
|
|
{ name: "专业", value: "professional" },
|
|
|
|
{ name: "活泼", value: "lively" },
|
|
|
|
{ name: "严谨", value: "strict" },
|
|
|
|
];
|
|
|
|
case "小红书":
|
|
|
|
return [
|
|
|
|
{ name: "俏皮", value: "playful" },
|
|
|
|
{ name: "幽默", value: "humorous" },
|
|
|
|
];
|
|
|
|
case "微信公众号":
|
|
|
|
return [
|
|
|
|
{ name: "夸张", value: "exaggerated" },
|
|
|
|
{ name: "可爱", value: "cute" },
|
|
|
|
];
|
|
|
|
case "今日头条":
|
|
|
|
return [
|
|
|
|
{ name: "丰满", value: "full" },
|
|
|
|
{ name: "可爱", value: "cute" },
|
|
|
|
{ name: "健康", value: "healthy" },
|
|
|
|
];
|
|
|
|
default:
|
|
|
|
return [
|
|
|
|
{ name: "专业", value: "professional" },
|
|
|
|
{ name: "活泼", value: "lively" },
|
|
|
|
{ name: "严谨", value: "strict" },
|
|
|
|
];
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
export interface WritePanelProps {
|
|
|
|
htmlCode: string;
|
|
|
|
setHtmlCode: React.Dispatch<React.SetStateAction<string>>;
|
|
|
|
loading: boolean;
|
|
|
|
setLoading: React.Dispatch<React.SetStateAction<boolean>>;
|
|
|
|
setWidth: React.Dispatch<React.SetStateAction<string>>;
|
|
|
|
setHtmlheader: React.Dispatch<React.SetStateAction<string>>;
|
|
|
|
}
|
|
|
|
export function WritingPanel(props: WritePanelProps) {
|
|
|
|
const {
|
|
|
|
htmlCode,
|
|
...
|
...
|
@@ -147,6 +43,7 @@ export function WritingPanel(props: WritePanelProps) { |
|
|
|
|
|
|
|
const [fileData, setFileData] = useState("");
|
|
|
|
const [fileName, setFileName] = useState("");
|
|
|
|
const messages: writeMessage[] = [];
|
|
|
|
|
|
|
|
// 生成动态数据
|
|
|
|
const dynamicMergedData = mergedData.map((item) => {
|
|
...
|
...
|
@@ -214,14 +111,14 @@ export function WritingPanel(props: WritePanelProps) { |
|
|
|
|
|
|
|
setFileName(name);
|
|
|
|
} catch {
|
|
|
|
message.error(Locale.ComError.UploadErr);
|
|
|
|
msgModal.error(Locale.ComError.UploadErr);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
// 提交表单时的处理函数
|
|
|
|
const handleSubmit = async () => {
|
|
|
|
if (!prompt.trim()) {
|
|
|
|
return message.error("请输入提示词");
|
|
|
|
return msgModal.error("请输入提示词");
|
|
|
|
}
|
|
|
|
try {
|
|
|
|
const param: writePromptParam = {
|
|
...
|
...
|
@@ -237,7 +134,13 @@ export function WritingPanel(props: WritePanelProps) { |
|
|
|
const input = getWrtingPrompt(param);
|
|
|
|
setLoading(true);
|
|
|
|
console.log("------------------------" + input);
|
|
|
|
const response = await chatStore.directLlmInvoke(input, "gpt-4o-mini");
|
|
|
|
|
|
|
|
messages.push({ role: "user", content: input });
|
|
|
|
|
|
|
|
const response = await chatStore.sendContext(messages, "gpt-4o-mini");
|
|
|
|
|
|
|
|
messages.push({ role: "assistant", content: response });
|
|
|
|
|
|
|
|
let cleanedContent = response.startsWith("```html")
|
|
|
|
? response.substring(8)
|
|
|
|
: response;
|
|
...
|
...
|
@@ -256,9 +159,11 @@ export function WritingPanel(props: WritePanelProps) { |
|
|
|
setHtmlheader(contentUpToBody); //保存html头部
|
|
|
|
}
|
|
|
|
localStorage.setItem("htmlCode", cleanedContent);
|
|
|
|
|
|
|
|
localStorage.setItem("aiWrite", JSON.stringify(messages));
|
|
|
|
setHtmlCode(cleanedContent);
|
|
|
|
} catch (error) {
|
|
|
|
message.error("生成失败，请重试");
|
|
|
|
msgModal.error("生成失败，请重试");
|
|
|
|
} finally {
|
|
|
|
setLoading(false);
|
|
|
|
}
|
|
...
|
...
|
@@ -319,9 +224,9 @@ export function WritingPanel(props: WritePanelProps) { |
|
|
|
<input
|
|
|
|
aria-label="写作字数"
|
|
|
|
type="number"
|
|
|
|
placeholder="200"
|
|
|
|
min="200"
|
|
|
|
max="5000"
|
|
|
|
placeholder={String(minWord)}
|
|
|
|
min={minWord}
|
|
|
|
max={maxWord}
|
|
|
|
value={writingCount}
|
|
|
|
onChange={handleInputChange}
|
|
|
|
/>
|
...
|
...
|
|
