feat: 首页增加工具箱功能区、剧本评测可视化展示;重构剧本评分页面UI

- 首页新增工具箱功能区(ToolboxSection),展示四大AI工具卡片
- 首页剧本功能区替换为六维柱状图可视化(ScriptReviewVisual)
- 剧本评分页面(ScriptTokensPage)全面重构为新版UI布局
- 左侧面板:上传区、AI识别信息、历史评测(持久化)、操作按钮
- 右侧:剧本输入区、评测结果Hero、六维柱状图、亮点/扣分点、优化建议表格
- 历史评测支持localStorage持久化,按时间倒序排列
This commit is contained in:
OmniAI Developer
2026-06-02 18:58:13 +08:00
parent c13bf800cc
commit 05e4f5b4b3
17 changed files with 3510 additions and 504 deletions
+13 -2
View File
@@ -8,7 +8,10 @@ import {
ThunderboltOutlined,
} from "@ant-design/icons";
import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
import type { WebViewKey, WebImageWorkbenchTool } from "../../types";
import WelcomeSplash from "./WelcomeSplash";
import ToolboxSection from "./ToolboxSection";
import ScriptReviewVisual from "./ScriptReviewVisual";
const OSS_MUBAN = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/muban";
const heroImage1 = `${OSS_MUBAN}/hero-1.png`;
@@ -24,6 +27,8 @@ interface HomePageProps {
onOpenEcommerce: () => void;
onOpenScriptReview?: () => void;
onOpenTokenMonitor?: () => void;
onSelectView: (view: WebViewKey) => void;
onOpenImageTool?: (tool: WebImageWorkbenchTool) => void;
}
const HOME_BACKGROUND_VIDEO = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/%E6%A0%B7%E7%89%87.mp4";
@@ -112,7 +117,7 @@ function getHomeCarouselCardStyle(offset: number): CSSProperties {
} as CSSProperties;
}
function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenTokenMonitor }: HomePageProps) {
function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenTokenMonitor, onSelectView, onOpenImageTool }: HomePageProps) {
const [splashDismissed, setSplashDismissed] = useState(() => sessionStorage.getItem("omniai:splash-seen") === "1");
const [activeSlideIndex, setActiveSlideIndex] = useState(0);
const [carouselMotion, setCarouselMotion] = useState<HomeCarouselMotion | null>(null);
@@ -296,7 +301,11 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
</button>
</div>
<div className="omni-home__feature-visual" aria-hidden="true">
<img src={feature.imageUrl} alt="" />
{feature.key === "script" ? (
<ScriptReviewVisual />
) : (
<img src={feature.imageUrl} alt="" />
)}
</div>
<div className="omni-home__feature-stats" aria-hidden="true">
{feature.stats.map((item) => (
@@ -338,6 +347,8 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
</button>
</div>
</section>
<ToolboxSection onSelectView={onSelectView} onOpenImageTool={onOpenImageTool} />
</main>
</section>
</>