feat: 多页面拖拽上传、滚动条精简、UI优化
- 剧本评测/分辨率提升/数字人/角色迁移/图片工作台/去水印/电商：新增外部拖拽文件上传 - 电商：爆款图复刻上传框支持拖拽+大滚动条，短视频/模特图/详情图滚动条精简回退 - 图片工作台：右侧输出面板移至左侧提示词上方，删除局部重绘遮罩/结果框 - 数字人：生成按钮改为「开始生成」 - 局部重绘：编辑遮罩→编辑页面 - 对话框生成器：新增对话/视频模式、模型/速度/深度选择按钮 - 视频时长默认改为5秒 - 工具箱页面空状态logo统一绿底亮色图标 - 多处CSS滚动条和布局优化
This commit is contained in:
OmniAI Developer
@@ -13,7 +13,7 @@ import {
|
||||
SendOutlined,
|
||||
ThunderboltOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { useRef, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import WorkspacePageShell from "../../components/WorkspacePageShell";
|
||||
import type { WebGenerationPreviewTask } from "../../types";
|
||||
|
||||
@@ -72,6 +72,24 @@ const agentModes = [
|
||||
},
|
||||
];
|
||||
|
||||
const agentModelOptions = [
|
||||
{ id: "gemini-3.1-pro", label: "Gemini 3.1 Pro" },
|
||||
{ id: "gemini-2.5-pro", label: "Gemini 2.5 Pro" },
|
||||
{ id: "gpt-4o", label: "GPT-4o" },
|
||||
];
|
||||
|
||||
const thinkingSpeedOptions = [
|
||||
{ id: "fast", label: "快速" },
|
||||
{ id: "balanced", label: "均衡" },
|
||||
{ id: "precise", label: "精细" },
|
||||
];
|
||||
|
||||
const thinkingDepthOptions = [
|
||||
{ id: "concise", label: "简洁" },
|
||||
{ id: "standard", label: "标准" },
|
||||
{ id: "deep", label: "深度" },
|
||||
];
|
||||
|
||||
const quickStarts = ["「新品发布」全链路运营", "「销售日报」自动分析", "「竞品监控」每周报告"];
|
||||
|
||||
function getTaskSourceLabel(task: WebGenerationPreviewTask): string | null {
|
||||
@@ -93,6 +111,21 @@ function AgentPage({
|
||||
const [prompt, setPrompt] = useState("让 Omni Agent 帮我规划「新品发布会全流程」");
|
||||
const [isRunning, setIsRunning] = useState(false);
|
||||
const [notice, setNotice] = useState("选择一个 Agent 模式，输入目标后即可开始。");
|
||||
const [agentModel, setAgentModel] = useState(agentModelOptions[0].id);
|
||||
const [thinkingSpeed, setThinkingSpeed] = useState(thinkingSpeedOptions[1].id);
|
||||
const [thinkingDepth, setThinkingDepth] = useState(thinkingDepthOptions[1].id);
|
||||
const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
|
||||
const controlsRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (controlsRef.current && !controlsRef.current.contains(event.target as Node)) {
|
||||
setActiveDropdown(null);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, []);
|
||||
|
||||
const selectedMode = agentModes.find((item) => item.id === activeMode) ?? agentModes[0];
|
||||
const recentTasks = tasks.slice(0, 3);
|
||||
@@ -203,15 +236,85 @@ function AgentPage({
|
||||
/>
|
||||
|
||||
<div className="agent-composer__footer">
|
||||
<div className="agent-composer__controls" aria-label="输入设置">
|
||||
<div className="agent-composer__controls" aria-label="输入设置" ref={controlsRef}>
|
||||
<button type="button" className="agent-tool-icon" aria-label="上传附件">
|
||||
<PaperClipOutlined />
|
||||
</button>
|
||||
<button type="button" className="agent-tool-pill">
|
||||
<ThunderboltOutlined />
|
||||
自动模式
|
||||
<DownOutlined />
|
||||
</button>
|
||||
<div className="agent-tool-pills">
|
||||
<button
|
||||
type="button"
|
||||
className={`agent-tool-pill${activeDropdown === "model" ? " is-open" : ""}`}
|
||||
onClick={() => setActiveDropdown(activeDropdown === "model" ? null : "model")}
|
||||
>
|
||||
<RobotOutlined />
|
||||
{agentModelOptions.find((m) => m.id === agentModel)?.label ?? "模型选择"}
|
||||
<DownOutlined />
|
||||
</button>
|
||||
{activeDropdown === "model" && (
|
||||
<div className="agent-dropdown">
|
||||
{agentModelOptions.map((m) => (
|
||||
<button
|
||||
key={m.id}
|
||||
type="button"
|
||||
className={`agent-dropdown__item${agentModel === m.id ? " is-active" : ""}`}
|
||||
onClick={() => { setAgentModel(m.id); setActiveDropdown(null); }}
|
||||
>
|
||||
{m.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="agent-tool-pills">
|
||||
<button
|
||||
type="button"
|
||||
className={`agent-tool-pill${activeDropdown === "speed" ? " is-open" : ""}`}
|
||||
onClick={() => setActiveDropdown(activeDropdown === "speed" ? null : "speed")}
|
||||
>
|
||||
<ThunderboltOutlined />
|
||||
{thinkingSpeedOptions.find((s) => s.id === thinkingSpeed)?.label ?? "思考速度"}
|
||||
<DownOutlined />
|
||||
</button>
|
||||
{activeDropdown === "speed" && (
|
||||
<div className="agent-dropdown">
|
||||
{thinkingSpeedOptions.map((s) => (
|
||||
<button
|
||||
key={s.id}
|
||||
type="button"
|
||||
className={`agent-dropdown__item${thinkingSpeed === s.id ? " is-active" : ""}`}
|
||||
onClick={() => { setThinkingSpeed(s.id); setActiveDropdown(null); }}
|
||||
>
|
||||
{s.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="agent-tool-pills">
|
||||
<button
|
||||
type="button"
|
||||
className={`agent-tool-pill${activeDropdown === "depth" ? " is-open" : ""}`}
|
||||
onClick={() => setActiveDropdown(activeDropdown === "depth" ? null : "depth")}
|
||||
>
|
||||
<ApartmentOutlined />
|
||||
{thinkingDepthOptions.find((d) => d.id === thinkingDepth)?.label ?? "思考深度"}
|
||||
<DownOutlined />
|
||||
</button>
|
||||
{activeDropdown === "depth" && (
|
||||
<div className="agent-dropdown">
|
||||
{thinkingDepthOptions.map((d) => (
|
||||
<button
|
||||
key={d.id}
|
||||
type="button"
|
||||
className={`agent-dropdown__item${thinkingDepth === d.id ? " is-active" : ""}`}
|
||||
onClick={() => { setThinkingDepth(d.id); setActiveDropdown(null); }}
|
||||
>
|
||||
{d.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button type="button" className="agent-tool-icon" aria-label="工具集">
|
||||
<AppstoreOutlined />
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user