feat: 首页增加工具箱功能区、剧本评测可视化展示；重构剧本评分页面UI
- 首页新增工具箱功能区(ToolboxSection)，展示四大AI工具卡片 - 首页剧本功能区替换为六维柱状图可视化(ScriptReviewVisual) - 剧本评分页面(ScriptTokensPage)全面重构为新版UI布局 - 左侧面板：上传区、AI识别信息、历史评测(持久化)、操作按钮 - 右侧：剧本输入区、评测结果Hero、六维柱状图、亮点/扣分点、优化建议表格 - 历史评测支持localStorage持久化，按时间倒序排列
This commit is contained in:
OmniAI Developer
@@ -1218,6 +1218,8 @@ function App() {
|
||||
onOpenEcommerce={() => handleSetView("ecommerce")}
|
||||
onOpenScriptReview={() => handleSetView("scriptTokens")}
|
||||
onOpenTokenMonitor={() => handleSetView("tokenUsage")}
|
||||
onSelectView={handleSetView}
|
||||
onOpenImageTool={handleOpenImageWorkbenchTool}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 MiB |
@@ -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>
|
||||
</>
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
const DIMS = [
|
||||
{ name: "钩子设计", score: 19, max: 20, hue: 145 },
|
||||
{ name: "角色塑造", score: 13, max: 15, hue: 155 },
|
||||
{ name: "剧情结构", score: 18, max: 20, hue: 165 },
|
||||
{ name: "逻辑严密", score: 14, max: 15, hue: 175 },
|
||||
{ name: "场景构建", score: 15, max: 15, hue: 185 },
|
||||
{ name: "内容深度", score: 15, max: 15, hue: 195 },
|
||||
];
|
||||
|
||||
function ScriptReviewVisual() {
|
||||
const [animated, setAnimated] = useState(false);
|
||||
const [activeDim, setActiveDim] = useState<number | null>(null);
|
||||
const [score, setScore] = useState(0);
|
||||
const scoreRef = useRef<number>(0);
|
||||
const frameRef = useRef<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const el = document.getElementById("script-review-visual");
|
||||
if (!el) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry?.isIntersecting) {
|
||||
setAnimated(true);
|
||||
observer.disconnect();
|
||||
}
|
||||
},
|
||||
{ threshold: 0.3 }
|
||||
);
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!animated) return;
|
||||
const start = performance.now();
|
||||
const target = 94;
|
||||
const dur = 1400;
|
||||
function tick(now: number) {
|
||||
const t = Math.min((now - start) / dur, 1);
|
||||
const e = 1 - Math.pow(1 - t, 3);
|
||||
setScore(Math.round(e * target));
|
||||
if (t < 1) frameRef.current = requestAnimationFrame(tick);
|
||||
}
|
||||
frameRef.current = requestAnimationFrame(tick);
|
||||
return () => { if (frameRef.current) cancelAnimationFrame(frameRef.current); };
|
||||
}, [animated]);
|
||||
|
||||
const totalScore = 94;
|
||||
const grade = "S";
|
||||
|
||||
return (
|
||||
<div className="omni-script-review-visual" id="script-review-visual">
|
||||
<div className="omni-script-review-hero">
|
||||
<div className="omni-script-review-score-row">
|
||||
<span className="omni-script-review-num">{score}</span>
|
||||
<span className="omni-script-review-total">/ 100</span>
|
||||
<div className="omni-script-review-grade">
|
||||
<span className="omni-script-review-grade-dot" />
|
||||
<span>{grade}级</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="omni-script-review-bar">
|
||||
<div
|
||||
className="omni-script-review-bar-fill"
|
||||
style={{ width: animated ? `${totalScore}%` : "0%" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="omni-script-review-beat">
|
||||
击败全国 <b>92%</b> 剧本
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="omni-script-review-chart">
|
||||
<div className="omni-script-review-chart-bars">
|
||||
{DIMS.map((dim, i) => {
|
||||
const pct = dim.score / dim.max;
|
||||
const lossPct = (dim.max - dim.score) / dim.max;
|
||||
const isPerfect = dim.score === dim.max;
|
||||
const height = animated ? pct * 76 : 0;
|
||||
const lossHeight = animated ? lossPct * 76 : 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={dim.name}
|
||||
className={`omni-script-review-bcol${activeDim === i ? " is-active" : ""}${activeDim !== null && activeDim !== i ? " is-dimmed" : ""}`}
|
||||
onClick={() => setActiveDim(activeDim === i ? null : i)}
|
||||
>
|
||||
<div className="omni-script-review-bbar-area">
|
||||
{lossPct > 0 && (
|
||||
<div
|
||||
className="omni-script-review-bseg is-loss"
|
||||
style={{ height: `${lossHeight}%`, transitionDelay: `${400 + i * 80}ms` }}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className={`omni-script-review-bseg is-score${isPerfect ? " is-perfect" : ""}`}
|
||||
style={{ height: `${height}%`, transitionDelay: `${400 + i * 80}ms` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="omni-script-review-blabel">
|
||||
<span>{dim.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{activeDim !== null && (() => {
|
||||
const d = DIMS[activeDim]!;
|
||||
return (
|
||||
<div className="omni-script-review-diminfo">
|
||||
<span className="omni-script-review-diminfo-name">{d.name}</span>
|
||||
<span className="omni-script-review-diminfo-score">
|
||||
{d.score}<small>/{d.max}</small>
|
||||
{d.score === d.max && " ★"}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
<div className="omni-script-review-legend">
|
||||
<span><span className="omni-script-review-legend-dot is-score" /> 得分</span>
|
||||
<span><span className="omni-script-review-legend-dot is-loss" /> 扣分</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ScriptReviewVisual;
|
||||
@@ -0,0 +1,233 @@
|
||||
import { ToolOutlined } from "@ant-design/icons";
|
||||
import type { WebViewKey, WebImageWorkbenchTool } from "../../types";
|
||||
import toolImageBefore from "../../assets/toolbox/牛仔.png";
|
||||
import toolImageAfter from "../../assets/toolbox/西装.png";
|
||||
import watermarkBefore from "../../assets/toolbox/去水印前.png";
|
||||
import watermarkAfter from "../../assets/toolbox/去水印后.png";
|
||||
|
||||
interface ToolboxSectionProps {
|
||||
onSelectView: (view: WebViewKey) => void;
|
||||
onOpenImageTool?: (tool: WebImageWorkbenchTool) => void;
|
||||
}
|
||||
|
||||
const TOOLS = [
|
||||
{
|
||||
key: "image-studio",
|
||||
icon: "🎨",
|
||||
name: "图片工作室",
|
||||
desc: "图片二次加工，调色裁剪特效风格迁移",
|
||||
},
|
||||
{
|
||||
key: "lens-lab",
|
||||
icon: "📷",
|
||||
name: "镜头实验室",
|
||||
desc: "多视角镜头生成，不同角度与姿势",
|
||||
},
|
||||
{
|
||||
key: "digital-human",
|
||||
icon: "🧑",
|
||||
name: "一键数字人",
|
||||
desc: "上传图片和音频，生成数字人视频",
|
||||
},
|
||||
{
|
||||
key: "watermark-removal",
|
||||
icon: "✨",
|
||||
name: "去除水印",
|
||||
desc: "AI智能识别去除图片视频水印",
|
||||
},
|
||||
];
|
||||
|
||||
const CARDS = [
|
||||
{
|
||||
key: "image-studio",
|
||||
title: "图片工作室",
|
||||
tag: "图片加工",
|
||||
icon: "🎨",
|
||||
features: ["二次加工", "调色", "裁剪", "风格迁移"],
|
||||
targetView: "imageWorkbench" as WebViewKey,
|
||||
render: () => (
|
||||
<div className="toolbox-card1-content">
|
||||
<div className="toolbox-card1-side toolbox-card1-left">
|
||||
<div className="toolbox-card1-img">
|
||||
<img src={toolImageBefore} alt="图片加工前" />
|
||||
</div>
|
||||
<div className="toolbox-card1-label">原始图片</div>
|
||||
</div>
|
||||
<div className="toolbox-card1-divider" />
|
||||
<div className="toolbox-card1-side toolbox-card1-right">
|
||||
<div className="toolbox-card1-img">
|
||||
<img src={toolImageAfter} alt="图片加工后" />
|
||||
</div>
|
||||
<div className="toolbox-card1-label">处理后</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "lens-lab",
|
||||
title: "镜头实验室",
|
||||
tag: "多视角",
|
||||
icon: "📷",
|
||||
features: ["正面", "45°侧", "俯拍", "仰拍", "背面"],
|
||||
targetView: "imageWorkbench" as WebViewKey,
|
||||
render: () => (
|
||||
<div className="toolbox-card2-content">
|
||||
{["正面", "45°侧", "俯拍", "仰拍", "背面"].map((angle) => (
|
||||
<div key={angle} className="toolbox-card2-frame">
|
||||
<div className="toolbox-card2-product" />
|
||||
<div className="toolbox-card2-shadow" />
|
||||
<div className="toolbox-card2-angle-label">{angle}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "digital-human",
|
||||
title: "一键数字人",
|
||||
tag: "视频生成",
|
||||
icon: "🧑",
|
||||
features: ["上传人像", "匹配音频", "唇形同步", "生成视频"],
|
||||
targetView: "digitalHuman" as WebViewKey,
|
||||
render: () => (
|
||||
<div className="toolbox-card3-content">
|
||||
<div className="toolbox-card3-side toolbox-card3-left">
|
||||
<div className="toolbox-card3-portrait">
|
||||
<div className="toolbox-card3-portrait-mark">STATIC</div>
|
||||
</div>
|
||||
<div className="toolbox-card3-label">静态人像</div>
|
||||
</div>
|
||||
<div className="toolbox-card3-divider" />
|
||||
<div className="toolbox-card3-transform">⚡</div>
|
||||
<div className="toolbox-card3-side toolbox-card3-right">
|
||||
<div className="toolbox-card3-portrait">
|
||||
<div className="toolbox-card3-glow-ring" />
|
||||
<div className="toolbox-card3-lipsync">
|
||||
<span /><span /><span /><span /><span />
|
||||
</div>
|
||||
<div className="toolbox-card3-gesture" />
|
||||
<div className="toolbox-card3-live">LIVE</div>
|
||||
</div>
|
||||
<div className="toolbox-card3-label">数字人视频</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "watermark-removal",
|
||||
title: "去除水印",
|
||||
tag: "AI清除",
|
||||
icon: "✨",
|
||||
features: ["智能识别", "精准去除", "无损画质"],
|
||||
targetView: "watermarkRemoval" as WebViewKey,
|
||||
render: () => (
|
||||
<div className="toolbox-card4-content">
|
||||
<div className="toolbox-card4-side toolbox-card4-left">
|
||||
<div className="toolbox-card4-img">
|
||||
<img src={watermarkBefore} alt="去水印前" />
|
||||
</div>
|
||||
<div className="toolbox-card4-label">含水印</div>
|
||||
</div>
|
||||
<div className="toolbox-card4-divider" />
|
||||
<div className="toolbox-card4-side toolbox-card4-right">
|
||||
<div className="toolbox-card4-img">
|
||||
<img src={watermarkAfter} alt="去水印后" />
|
||||
</div>
|
||||
<div className="toolbox-card4-label">已清除</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
function ToolboxSection({ onSelectView, onOpenImageTool }: ToolboxSectionProps) {
|
||||
const handleCardClick = (targetView: WebViewKey) => {
|
||||
onSelectView(targetView);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="omni-home__toolbox-page" aria-label="OmniAI 工具箱">
|
||||
<div className="omni-home__toolbox-shell">
|
||||
{/* Left Panel */}
|
||||
<aside className="omni-home__toolbox-left">
|
||||
<div className="omni-home__toolbox-brand">
|
||||
<div className="omni-home__toolbox-brand-icon">
|
||||
<ToolOutlined />
|
||||
</div>
|
||||
<div className="omni-home__toolbox-brand-text">工具箱</div>
|
||||
</div>
|
||||
<div className="omni-home__toolbox-title">
|
||||
专业工具
|
||||
<br />
|
||||
精准创作
|
||||
</div>
|
||||
<div className="omni-home__toolbox-subtitle">
|
||||
四大AI工具覆盖图片加工、镜头变换、数字人制作、水印处理全流程
|
||||
</div>
|
||||
<div className="omni-home__toolbox-list">
|
||||
{TOOLS.map((tool) => (
|
||||
<div
|
||||
key={tool.key}
|
||||
className="omni-home__toolbox-item"
|
||||
onClick={() => {
|
||||
const card = CARDS.find((c) => c.key === tool.key);
|
||||
if (card) handleCardClick(card.targetView);
|
||||
}}
|
||||
>
|
||||
<div className="omni-home__toolbox-item-icon">{tool.icon}</div>
|
||||
<div className="omni-home__toolbox-item-info">
|
||||
<div className="omni-home__toolbox-item-name">{tool.name}</div>
|
||||
<div className="omni-home__toolbox-item-desc">{tool.desc}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="omni-home__toolbox-workflow">
|
||||
<div className="omni-home__toolbox-workflow-label">通用工作流</div>
|
||||
<div className="omni-home__toolbox-workflow-steps">
|
||||
<span className="omni-home__toolbox-workflow-step">上传素材</span>
|
||||
<span className="omni-home__toolbox-workflow-arrow">→</span>
|
||||
<span className="omni-home__toolbox-workflow-step">选择工具</span>
|
||||
<span className="omni-home__toolbox-workflow-arrow">→</span>
|
||||
<span className="omni-home__toolbox-workflow-step">AI处理</span>
|
||||
<span className="omni-home__toolbox-workflow-arrow">→</span>
|
||||
<span className="omni-home__toolbox-workflow-step">导出成果</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Grid Area */}
|
||||
<div className="omni-home__toolbox-grid">
|
||||
{CARDS.map((card) => (
|
||||
<div
|
||||
key={card.key}
|
||||
className="omni-home__toolbox-card"
|
||||
onClick={() => handleCardClick(card.targetView)}
|
||||
>
|
||||
<div className="omni-home__toolbox-card-header">
|
||||
<div className="omni-home__toolbox-card-header-left">
|
||||
<div className="omni-home__toolbox-card-icon">{card.icon}</div>
|
||||
<div className="omni-home__toolbox-card-title">{card.title}</div>
|
||||
</div>
|
||||
<div className="omni-home__toolbox-card-tag">{card.tag}</div>
|
||||
</div>
|
||||
<div className="omni-home__toolbox-card-content">
|
||||
{card.render()}
|
||||
</div>
|
||||
<div className="omni-home__toolbox-card-footer">
|
||||
{card.features.map((feat, i) => (
|
||||
<span key={feat}>
|
||||
{i > 0 && <span className="omni-home__toolbox-card-feat-sep">|</span>}
|
||||
<span className="omni-home__toolbox-card-feat">{feat}</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default ToolboxSection;
|
||||
@@ -1,13 +1,20 @@
|
||||
import { CopyOutlined, DownOutlined, DownloadOutlined, FileTextOutlined, ReloadOutlined, TrophyOutlined, UploadOutlined } from "@ant-design/icons";
|
||||
import { useMemo, useRef, useState, type ChangeEvent, type KeyboardEvent } from "react";
|
||||
import {
|
||||
CheckCircleFilled,
|
||||
CopyOutlined,
|
||||
DownloadOutlined,
|
||||
FileTextOutlined,
|
||||
UploadOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent } from "react";
|
||||
import { evaluateScript } from "../../api/scriptEvalClient";
|
||||
import { useSessionStore } from "../../stores";
|
||||
|
||||
interface ScoreDimension {
|
||||
key: string;
|
||||
label: string;
|
||||
maxScore: number;
|
||||
weight: number;
|
||||
description: string;
|
||||
hint: string;
|
||||
detail: string;
|
||||
}
|
||||
|
||||
interface EvalResult {
|
||||
@@ -20,103 +27,46 @@ interface EvalResult {
|
||||
suggestions: string[];
|
||||
}
|
||||
|
||||
const RADAR_CENTER = 100;
|
||||
const RADAR_RADIUS = 82;
|
||||
const RADAR_ANGLES = [-90, -30, 30, 90, 150, 210];
|
||||
interface HistoryEntry {
|
||||
name: string;
|
||||
date: string;
|
||||
timestamp: number;
|
||||
score: number;
|
||||
grade: string;
|
||||
}
|
||||
|
||||
const scoreDimensions: ScoreDimension[] = [
|
||||
{
|
||||
key: "hook",
|
||||
label: "钩子设计",
|
||||
maxScore: 20,
|
||||
weight: 0.2,
|
||||
description: "开篇吸引力、悬念设置、黄金三秒法则",
|
||||
},
|
||||
{
|
||||
key: "character",
|
||||
label: "角色塑造",
|
||||
maxScore: 15,
|
||||
weight: 0.15,
|
||||
description: "人物立体度、动机合理性、弧光设计",
|
||||
},
|
||||
{
|
||||
key: "plot",
|
||||
label: "剧情结构",
|
||||
maxScore: 20,
|
||||
weight: 0.2,
|
||||
description: "起承转合、节奏把控、冲突设计",
|
||||
},
|
||||
{
|
||||
key: "dialogue",
|
||||
label: "台词对白",
|
||||
maxScore: 15,
|
||||
weight: 0.15,
|
||||
description: "语言质感、角色差异化、潜台词",
|
||||
},
|
||||
{
|
||||
key: "visual",
|
||||
label: "画面表现",
|
||||
maxScore: 15,
|
||||
weight: 0.15,
|
||||
description: "镜头感、空间层次、视觉冲击力",
|
||||
},
|
||||
{
|
||||
key: "content",
|
||||
label: "内容深度",
|
||||
maxScore: 15,
|
||||
weight: 0.15,
|
||||
description: "主题表达、情感共鸣、思想内核",
|
||||
},
|
||||
function getGrade(score: number): string {
|
||||
if (score >= 97) return "S+";
|
||||
if (score >= 93) return "S";
|
||||
if (score >= 88) return "A+";
|
||||
if (score >= 83) return "A";
|
||||
if (score >= 78) return "B+";
|
||||
if (score >= 70) return "B";
|
||||
return "C";
|
||||
}
|
||||
|
||||
const HISTORY_KEY = "omniai:script-eval-history";
|
||||
|
||||
function loadHistory(): HistoryEntry[] {
|
||||
try {
|
||||
const raw = localStorage.getItem(HISTORY_KEY);
|
||||
return raw ? (JSON.parse(raw) as HistoryEntry[]) : [];
|
||||
} catch { return []; }
|
||||
}
|
||||
|
||||
function saveHistory(entries: HistoryEntry[]) {
|
||||
try { localStorage.setItem(HISTORY_KEY, JSON.stringify(entries.slice(0, 20))); } catch { /* quota exceeded */ }
|
||||
}
|
||||
|
||||
const SCORE_DIMENSIONS: ScoreDimension[] = [
|
||||
{ key: "hook", label: "钩子设计", maxScore: 20, hint: "开篇吸引力·悬念设置·黄金三秒", detail: "开篇即抛出高概念钩子，悬念设置紧凑有力。" },
|
||||
{ key: "character", label: "角色塑造", maxScore: 15, hint: "人物立体度·动机合理性·弧光设计", detail: "主角动机有铺垫，配角功能性较强，人物弧光尚可进一步深化。" },
|
||||
{ key: "plot", label: "剧情结构", maxScore: 20, hint: "起承转合·节奏把控·冲突设计", detail: "起承转合完整，节奏把控稳健，冲突设计有张力。" },
|
||||
{ key: "logic", label: "逻辑严密", maxScore: 15, hint: "世界观自洽·伏笔回收·因果链", detail: "世界观整体自洽，伏笔设置到位。" },
|
||||
{ key: "visual", label: "场景构建", maxScore: 15, hint: "空间描写·视听语言·画面想象力", detail: "视觉意象统一而强烈，场景描写极具画面感。" },
|
||||
{ key: "content", label: "内容深度", maxScore: 15, hint: "主题表达·情感共鸣·思想内核", detail: "核心设定将科技伦理与人性困境紧密结合，主题表达深刻有力。" },
|
||||
];
|
||||
|
||||
function radarPoint(angle: number, radius: number) {
|
||||
const radians = (angle * Math.PI) / 180;
|
||||
return {
|
||||
x: RADAR_CENTER + radius * Math.cos(radians),
|
||||
y: RADAR_CENTER + radius * Math.sin(radians),
|
||||
};
|
||||
}
|
||||
|
||||
function makeRadarPoints(scores: Record<string, number> | null) {
|
||||
if (!scores) return "100,100 100,100 100,100 100,100 100,100 100,100";
|
||||
|
||||
return scoreDimensions
|
||||
.map((dimension, index) => {
|
||||
const ratio = Math.max(0, Math.min(1, (scores[dimension.key] ?? 0) / dimension.maxScore));
|
||||
const point = radarPoint(RADAR_ANGLES[index] ?? 0, RADAR_RADIUS * ratio);
|
||||
return `${point.x.toFixed(1)},${point.y.toFixed(1)}`;
|
||||
})
|
||||
.join(" ");
|
||||
}
|
||||
|
||||
function RadarPreview({ result }: { result: EvalResult | null }) {
|
||||
return (
|
||||
<div className={`script-eval-v4-radar-container${result ? " has-glow" : ""}`}>
|
||||
<svg className="script-eval-v4-radar-svg" viewBox="0 0 200 200" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="scriptEvalV4RadarGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="rgba(0, 255, 136, 0.34)" />
|
||||
<stop offset="100%" stopColor="rgba(123, 231, 255, 0.1)" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g className="script-eval-v4-radar-grid">
|
||||
<polygon points="100,15 173,55 173,145 100,185 27,145 27,55" />
|
||||
<polygon points="100,35 158,68 158,132 100,165 42,132 42,68" />
|
||||
<polygon points="100,55 143,81 143,119 100,145 57,119 57,81" />
|
||||
<polygon points="100,75 128,94 128,106 100,125 72,106 72,94" />
|
||||
<line x1="100" y1="15" x2="100" y2="185" />
|
||||
<line x1="27" y1="55" x2="173" y2="145" />
|
||||
<line x1="173" y1="55" x2="27" y2="145" />
|
||||
</g>
|
||||
<polygon
|
||||
className={`script-eval-v4-radar-outline${result ? " has-data" : ""}`}
|
||||
points={makeRadarPoints(result?.dimensionScores ?? null)}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatReportMarkdown(result: EvalResult, script: string): string {
|
||||
const lines: string[] = [];
|
||||
lines.push(`# 剧本评测报告`);
|
||||
@@ -127,10 +77,10 @@ function formatReportMarkdown(result: EvalResult, script: string): string {
|
||||
lines.push(result.summary);
|
||||
lines.push("");
|
||||
lines.push(`## 六维评分`);
|
||||
for (const dim of scoreDimensions) {
|
||||
for (const dim of SCORE_DIMENSIONS) {
|
||||
const score = result.dimensionScores[dim.key] ?? 0;
|
||||
const pct = Math.round((score / dim.maxScore) * 100);
|
||||
lines.push(`- **${dim.label}**: ${score}/${dim.maxScore} (${pct}%) — ${dim.description}`);
|
||||
lines.push(`- **${dim.label}**: ${score}/${dim.maxScore} (${pct}%) — ${dim.hint}`);
|
||||
}
|
||||
if (result.highlights.length > 0) {
|
||||
lines.push("");
|
||||
@@ -150,13 +100,6 @@ function formatReportMarkdown(result: EvalResult, script: string): string {
|
||||
lines.push("");
|
||||
lines.push(`---`);
|
||||
lines.push(`*评测时间: ${new Date().toLocaleString("zh-CN")}*`);
|
||||
lines.push("");
|
||||
lines.push(`<details><summary>原始剧本 (${script.length} 字)</summary>`);
|
||||
lines.push("");
|
||||
lines.push("```");
|
||||
lines.push(script.slice(0, 2000) + (script.length > 2000 ? "\n...(已截断)" : ""));
|
||||
lines.push("```");
|
||||
lines.push("</details>");
|
||||
return lines.join("\n");
|
||||
}
|
||||
|
||||
@@ -165,39 +108,44 @@ function ScriptTokensPage() {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [result, setResult] = useState<EvalResult | null>(null);
|
||||
const [evalError, setEvalError] = useState<string | null>(null);
|
||||
const [detailsExpanded, setDetailsExpanded] = useState(true);
|
||||
const [uploadedFile, setUploadedFile] = useState<{ name: string; size: number } | null>(null);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [activeDim, setActiveDim] = useState<number | null>(null);
|
||||
const [animatedScore, setAnimatedScore] = useState(0);
|
||||
const [history, setHistory] = useState<HistoryEntry[]>(loadHistory);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const scoreFrameRef = useRef<number | null>(null);
|
||||
|
||||
const session = useSessionStore((s) => s.session);
|
||||
const hasContent = Boolean(script.trim());
|
||||
const lineNumbers = useMemo(() => {
|
||||
const count = Math.min(160, Math.max(10, script.split(/\r\n|\r|\n/).length));
|
||||
return Array.from({ length: count }, (_, index) => index + 1);
|
||||
}, [script]);
|
||||
|
||||
const handleUploadKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
|
||||
if (event.key !== "Enter" && event.key !== " ") return;
|
||||
event.preventDefault();
|
||||
fileInputRef.current?.click();
|
||||
};
|
||||
// Score animation
|
||||
useEffect(() => {
|
||||
if (!result) return;
|
||||
const start = performance.now();
|
||||
const target = result.totalScore;
|
||||
const dur = 1400;
|
||||
function tick(now: number) {
|
||||
const t = Math.min((now - start) / dur, 1);
|
||||
const e = 1 - Math.pow(1 - t, 3);
|
||||
setAnimatedScore(Math.round(e * target));
|
||||
if (t < 1) scoreFrameRef.current = requestAnimationFrame(tick);
|
||||
}
|
||||
scoreFrameRef.current = requestAnimationFrame(tick);
|
||||
return () => { if (scoreFrameRef.current) cancelAnimationFrame(scoreFrameRef.current); };
|
||||
}, [result]);
|
||||
|
||||
const handleFileUpload = async (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const ext = file.name.slice(file.name.lastIndexOf(".")).toLowerCase();
|
||||
const readable = [".txt", ".md"].includes(ext) || file.type === "text/plain" || file.type === "text/markdown";
|
||||
setUploadedFile({ name: file.name, size: file.size });
|
||||
|
||||
if (readable) {
|
||||
setScript(await file.text());
|
||||
} else {
|
||||
setScript(
|
||||
`[已上传文件：${file.name}]\n\n暂不支持解析 ${ext.toUpperCase()} 格式，请上传 TXT 或 MD 文件，或直接粘贴剧本文本后开始评测。`,
|
||||
);
|
||||
setScript(`[已上传文件：${file.name}]\n\n暂不支持解析 ${ext.toUpperCase()} 格式，请上传 TXT 或 MD 文件。`);
|
||||
}
|
||||
|
||||
event.target.value = "";
|
||||
};
|
||||
|
||||
@@ -206,22 +154,36 @@ function ScriptTokensPage() {
|
||||
setLoading(true);
|
||||
setResult(null);
|
||||
setEvalError(null);
|
||||
setAnimatedScore(0);
|
||||
setActiveDim(null);
|
||||
try {
|
||||
const aiResult = await evaluateScript(script);
|
||||
setResult(aiResult);
|
||||
const g = getGrade(aiResult.totalScore);
|
||||
const entry: HistoryEntry = {
|
||||
name: uploadedFile?.name?.replace(/\.[^.]+$/, "") ?? `剧本 ${new Date().toLocaleDateString("zh-CN")}`,
|
||||
date: new Date().toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" }),
|
||||
timestamp: Date.now(),
|
||||
score: aiResult.totalScore,
|
||||
grade: g,
|
||||
};
|
||||
const updated = [entry, ...loadHistory().filter((h) => h.name !== entry.name || h.score !== entry.score)];
|
||||
saveHistory(updated);
|
||||
setHistory(updated);
|
||||
} catch (err) {
|
||||
setEvalError(err instanceof Error ? err.message : "评测服务暂时不可用，请稍后重试");
|
||||
}
|
||||
setDetailsExpanded(true);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setScript("");
|
||||
setResult(null);
|
||||
setDetailsExpanded(true);
|
||||
setEvalError(null);
|
||||
setUploadedFile(null);
|
||||
setCopied(false);
|
||||
setAnimatedScore(0);
|
||||
setActiveDim(null);
|
||||
if (fileInputRef.current) fileInputRef.current.value = "";
|
||||
};
|
||||
|
||||
@@ -260,226 +222,348 @@ function ScriptTokensPage() {
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const scoreStatus = loading ? "评测中" : result ? "评测完成" : "待生成评分";
|
||||
const scoreHint =
|
||||
result?.summary ??
|
||||
(hasContent ? "点击「开始评测」生成六维雷达评分和优化路径。" : "粘贴完整剧本后，点击「开始评测」生成六维雷达评分和优化路径。");
|
||||
const uploadKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
|
||||
if (event.key !== "Enter" && event.key !== " ") return;
|
||||
event.preventDefault();
|
||||
fileInputRef.current?.click();
|
||||
};
|
||||
|
||||
const grade = result ? getGrade(result.totalScore) : null;
|
||||
const beatPct = result ? (result.totalScore >= 95 ? 97 : result.totalScore >= 88 ? 92 : result.totalScore >= 80 ? 85 : 72) : 0;
|
||||
const compactTitle = uploadedFile?.name?.replace(/\.[^.]+$/, "") ?? "剧本评测";
|
||||
|
||||
return (
|
||||
<section className="script-token-page script-eval-v4 page-motion">
|
||||
<main className="script-token-page__scroll script-eval-v4-stage">
|
||||
<section className="script-eval-v4-app" aria-label="剧本评测工具">
|
||||
<div className="script-eval-v4-panel-left">
|
||||
<section className="script-eval-v4-glass script-eval-v4-input-card">
|
||||
<div
|
||||
className="script-eval-v4-upload-area"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
onKeyDown={handleUploadKeyDown}
|
||||
>
|
||||
<UploadOutlined />
|
||||
<div className="upload-text">
|
||||
{uploadedFile ? uploadedFile.name : "粘贴文本或上传文档"}
|
||||
<div className="hint">
|
||||
{uploadedFile ? `${(uploadedFile.size / 1024).toFixed(1)}KB，已载入文件信息` : "建议包含场景、角色、动作和台词"}
|
||||
</div>
|
||||
<section className="script-eval-v5 page-motion">
|
||||
<div className="script-eval-v5-page">
|
||||
{/* Left Panel */}
|
||||
<aside className="script-eval-v5-left">
|
||||
<div className="script-eval-v5-lp-section">
|
||||
<div className="script-eval-v5-lp-label">上传剧本</div>
|
||||
<div
|
||||
className="script-eval-v5-upload-zone"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
onKeyDown={uploadKeyDown}
|
||||
>
|
||||
{uploadedFile ? (
|
||||
<div className="script-eval-v5-upload-done is-show">
|
||||
<CheckCircleFilled />
|
||||
<span className="script-eval-v5-uf-name">{uploadedFile.name}</span>
|
||||
<span className="script-eval-v5-uf-re" onClick={(e) => { e.stopPropagation(); handleReset(); }}>
|
||||
重新上传
|
||||
</span>
|
||||
</div>
|
||||
<input ref={fileInputRef} type="file" accept=".txt,.md,.pdf,.doc,.docx" onChange={handleFileUpload} />
|
||||
<button
|
||||
type="button"
|
||||
className="script-eval-v4-upload-btn"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
fileInputRef.current?.click();
|
||||
}}
|
||||
>
|
||||
上传
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="script-eval-v4-text-shell">
|
||||
<div className="script-eval-v4-line-numbers" aria-hidden="true">
|
||||
{lineNumbers.map((line) => (
|
||||
<span key={line}>{line}</span>
|
||||
))}
|
||||
</div>
|
||||
<textarea
|
||||
className="script-eval-v4-text-input"
|
||||
value={script}
|
||||
onChange={(event) => setScript(event.target.value)}
|
||||
placeholder={
|
||||
"在此粘贴你的剧本内容...\n\n【第一幕】夜晚，城市天台。霓虹灯映照着雨后的地面。\n小凯独自站在天台边缘，手中握着一张皱巴巴的纸条..."
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="script-eval-v4-button-group">
|
||||
<button
|
||||
type="button"
|
||||
className="script-eval-v4-btn-primary"
|
||||
disabled={loading || !hasContent}
|
||||
onClick={() => void handleEvaluate()}
|
||||
>
|
||||
<span>{loading ? "评测中..." : "开始评测"}</span>
|
||||
</button>
|
||||
<button type="button" className="script-eval-v4-btn-secondary" onClick={handleReset}>
|
||||
<ReloadOutlined />
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
) : (
|
||||
<>
|
||||
<div className="script-eval-v5-upload-icon"><UploadOutlined /></div>
|
||||
<div className="script-eval-v5-upload-text">拖拽或点击上传</div>
|
||||
<button type="button" className="script-eval-v5-upload-btn" onClick={(e) => { e.stopPropagation(); fileInputRef.current?.click(); }}>
|
||||
+ 上传剧本
|
||||
</button>
|
||||
<div className="script-eval-v5-upload-hint">支持 .txt .md</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<input ref={fileInputRef} type="file" accept=".txt,.md" style={{ display: "none" }} onChange={handleFileUpload} />
|
||||
</div>
|
||||
|
||||
<aside className="script-eval-v4-panel-right" aria-label="评分结果">
|
||||
{evalError ? (
|
||||
<div className="script-eval-v4-error" role="alert">
|
||||
<span className="script-eval-v4-error__icon">⚠</span>
|
||||
<span>{evalError}</span>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<section className={`script-eval-v4-glass script-eval-v4-score-card${loading ? " loading" : ""}${result ? " ready" : ""}`}>
|
||||
<div className="script-eval-v4-score-header">
|
||||
<div className="score-title">SCORE BOARD</div>
|
||||
<span className={`score-status${result ? " ready" : ""}`}>{scoreStatus}</span>
|
||||
</div>
|
||||
|
||||
<div className="script-eval-v4-score-main">
|
||||
<RadarPreview result={result} />
|
||||
|
||||
<div className="script-eval-v4-score-display">
|
||||
<div className={`score-number${result ? " has-data" : ""}`}>
|
||||
{result ? (
|
||||
<>
|
||||
{result.totalScore} <span>/ 100</span>
|
||||
</>
|
||||
) : (
|
||||
"— / 100"
|
||||
)}
|
||||
<div className="script-eval-v5-lp-section">
|
||||
<div className="script-eval-v5-lp-label">AI 识别信息</div>
|
||||
<div className="script-eval-v5-info-grid">
|
||||
{!result ? (
|
||||
<div className="script-eval-v5-info-empty">上传剧本并点击评测后识别</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="script-eval-v5-info-item">
|
||||
<span className="script-eval-v5-info-key">综合评分</span>
|
||||
<span className="script-eval-v5-info-val"><span className="script-eval-v5-info-tag">{result.totalScore}分 · {grade}级</span></span>
|
||||
</div>
|
||||
<div className="score-label">综合评分 {result ? `· ${result.grade} 级` : ""}</div>
|
||||
<div className="score-hint">{scoreHint}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="script-eval-v5-info-item">
|
||||
<span className="script-eval-v5-info-key">文本长度</span>
|
||||
<span className="script-eval-v5-info-val">{script.length} 字</span>
|
||||
</div>
|
||||
<div className="script-eval-v5-info-item">
|
||||
<span className="script-eval-v5-info-key">评测时间</span>
|
||||
<span className="script-eval-v5-info-val">{new Date().toLocaleDateString("zh-CN")}</span>
|
||||
</div>
|
||||
<div className="script-eval-v5-info-item">
|
||||
<span className="script-eval-v5-info-key">击败比例</span>
|
||||
<span className="script-eval-v5-info-val">{beatPct}%</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="script-eval-v4-dimensions-tags">
|
||||
{scoreDimensions.map((dimension) => (
|
||||
<span className="tag" key={dimension.key}>
|
||||
{dimension.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<div className="script-eval-v5-lp-section is-fill">
|
||||
<div className="script-eval-v5-lp-label">历史评测</div>
|
||||
<div className="script-eval-v5-history-list">
|
||||
{!session ? (
|
||||
<div className="script-eval-v5-history-empty">登录后查看云端评测记录</div>
|
||||
) : history.length === 0 ? (
|
||||
<div className="script-eval-v5-history-empty">暂无评测记录</div>
|
||||
) : (
|
||||
history.map((item, i) => (
|
||||
<div key={i} className={`script-eval-v5-history-item${i === 0 ? " is-active" : ""}`}>
|
||||
<div className="script-eval-v5-hi-left">
|
||||
<div className="script-eval-v5-hi-name">{item.name}</div>
|
||||
<div className="script-eval-v5-hi-date">{item.date}</div>
|
||||
<div className="script-eval-v5-hi-bar">
|
||||
<div className="script-eval-v5-hi-bar-fill" style={{ width: `${Math.min(92, (item.score / 100) * 100)}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="script-eval-v5-hi-right">
|
||||
<div className={`script-eval-v5-hi-score${item.score >= 90 ? " is-green" : ""}`}>{item.score}</div>
|
||||
<div className="script-eval-v5-hi-grade">{item.grade}</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="script-eval-v4-glass script-eval-v4-details-card">
|
||||
<button
|
||||
type="button"
|
||||
className="script-eval-v4-details-header"
|
||||
onClick={() => setDetailsExpanded((expanded) => !expanded)}
|
||||
aria-expanded={detailsExpanded}
|
||||
>
|
||||
<span className="details-title">
|
||||
<TrophyOutlined />
|
||||
DIMENSIONS 六维详情
|
||||
</span>
|
||||
<DownOutlined className={`expand-icon${detailsExpanded ? " expanded" : ""}`} />
|
||||
</button>
|
||||
<div className="script-eval-v5-lp-bottom">
|
||||
<button
|
||||
type="button"
|
||||
className="script-eval-v5-eval-btn"
|
||||
disabled={loading || !hasContent}
|
||||
onClick={() => void handleEvaluate()}
|
||||
>
|
||||
{loading ? "◆ 评测中..." : "◆ 开始评测"}
|
||||
</button>
|
||||
<button type="button" className="script-eval-v5-export-btn" disabled={!result} onClick={handleExportMarkdown}>
|
||||
导出评测报告
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div className={`script-eval-v4-details-content${detailsExpanded ? " expanded" : ""}`}>
|
||||
<div className="script-eval-v4-details-list">
|
||||
{scoreDimensions.map((dimension) => {
|
||||
const score = result?.dimensionScores[dimension.key] ?? 0;
|
||||
const pct = result ? Math.round((score / dimension.maxScore) * 100) : 0;
|
||||
return (
|
||||
<article className="script-eval-v4-detail-row" key={dimension.key}>
|
||||
<div className="detail-row-main">
|
||||
<span className="dimension-name">{dimension.label}</span>
|
||||
<div className="dimension-bar" aria-hidden="true">
|
||||
<span className="dimension-bar-fill" style={{ width: `${pct}%` }} />
|
||||
</div>
|
||||
<span className="dimension-score">{result ? `${score}/${dimension.maxScore}` : `${dimension.maxScore}分`}</span>
|
||||
{/* Right Area */}
|
||||
<div className="script-eval-v5-right">
|
||||
<div className="script-eval-v5-right-topbar">
|
||||
<div className="script-eval-v5-right-title">
|
||||
<span className="script-eval-v5-rt-green">剧本评测</span>
|
||||
{uploadedFile && <> · {compactTitle}</>}
|
||||
</div>
|
||||
<div className="script-eval-v5-right-actions">
|
||||
{result && (
|
||||
<>
|
||||
<button type="button" className="script-eval-v5-action-btn" onClick={() => void handleCopyReport()}>
|
||||
<CopyOutlined />{copied ? "已复制" : "复制"}
|
||||
</button>
|
||||
<button type="button" className="script-eval-v5-action-btn" onClick={handleExportMarkdown}>
|
||||
<DownloadOutlined />导出
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="script-eval-v5-right-content">
|
||||
{!result && (
|
||||
<div className="script-eval-v5-input-section">
|
||||
{/* Script-themed upload illustration */}
|
||||
<div
|
||||
className="script-eval-v5-illustration"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
onKeyDown={uploadKeyDown}
|
||||
>
|
||||
<div className="script-eval-v5-illust-grid">
|
||||
{[0, 1, 2, 3, 4, 5].map((idx) => (
|
||||
<div key={idx} className={`script-eval-v5-illust-page${idx === 1 ? " is-active" : ""}`}>
|
||||
<div className="script-eval-v5-illust-page-lines">
|
||||
<div className="script-eval-v5-illust-line" style={{ width: `${60 + Math.sin(idx * 1.2) * 20}%` }} />
|
||||
<div className="script-eval-v5-illust-line" style={{ width: `${75 + Math.cos(idx * 1.7) * 15}%` }} />
|
||||
<div className="script-eval-v5-illust-line" style={{ width: `${45 + Math.sin(idx * 2.1) * 25}%` }} />
|
||||
<div className="script-eval-v5-illust-line" style={{ width: `${65 + Math.cos(idx * 1.3) * 20}%` }} />
|
||||
<div className="script-eval-v5-illust-line is-short" style={{ width: `${35 + Math.sin(idx * 0.8) * 15}%` }} />
|
||||
</div>
|
||||
<div className="dimension-desc">{dimension.description}</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="script-eval-v5-illust-label">
|
||||
<FileTextOutlined />
|
||||
<span>上传或粘贴剧本开始评测</span>
|
||||
</div>
|
||||
<div className="script-eval-v5-illust-hint">支持 TXT / MD 格式，点击此处或左侧上传区导入剧本文件</div>
|
||||
</div>
|
||||
|
||||
<div className="script-eval-v5-textarea-shell">
|
||||
<textarea
|
||||
className="script-eval-v5-textarea"
|
||||
value={script}
|
||||
onChange={(e) => setScript(e.target.value)}
|
||||
placeholder={"或直接在此粘贴剧本内容...\n\n【第一幕】夜晚，城市天台。霓虹灯映照着雨后的地面。\n小凯独自站在天台边缘，手中握着一张皱巴巴的纸条..."}
|
||||
/>
|
||||
</div>
|
||||
{evalError && (
|
||||
<div className="script-eval-v5-error" role="alert">
|
||||
<span>⚠</span><span>{evalError}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{result && (result.highlights.length > 0 || result.issues.length > 0) && (
|
||||
<section className="script-eval-v4-glass script-eval-v4-insights-card">
|
||||
{result.highlights.length > 0 && (
|
||||
<div className="script-eval-v4-insight-group highlights">
|
||||
<div className="insight-group-title">
|
||||
<span className="insight-icon">✦</span>
|
||||
HIGHLIGHTS 亮点
|
||||
</div>
|
||||
<ul className="insight-list">
|
||||
{result.highlights.map((h, i) => (
|
||||
<li key={i} className="insight-item highlight-item">{h}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
{result.issues.length > 0 && (
|
||||
<div className="script-eval-v4-insight-group issues">
|
||||
<div className="insight-group-title">
|
||||
<span className="insight-icon">△</span>
|
||||
ISSUES 扣分点
|
||||
</div>
|
||||
<ul className="insight-list">
|
||||
{result.issues.map((issue, i) => (
|
||||
<li key={i} className="insight-item issue-item">{issue}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
{result && result.suggestions.length > 0 && (
|
||||
<section className="script-eval-v4-glass script-eval-v4-suggestions-card">
|
||||
<div className="suggestions-header">
|
||||
<span className="suggestions-title">
|
||||
<span className="insight-icon">→</span>
|
||||
SUGGESTIONS 优化路径
|
||||
</span>
|
||||
</div>
|
||||
<ul className="suggestion-list">
|
||||
{result.suggestions.map((s, i) => (
|
||||
<li key={i} className="suggestion-item">
|
||||
<span className="suggestion-index">{i + 1}</span>
|
||||
<span className="suggestion-text">{s}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{result && (
|
||||
<div className="script-eval-v4-report-actions">
|
||||
<button type="button" className="script-eval-v4-report-btn" onClick={() => void handleCopyReport()}>
|
||||
<CopyOutlined />
|
||||
<span>{copied ? "已复制" : "复制报告"}</span>
|
||||
</button>
|
||||
<button type="button" className="script-eval-v4-report-btn" onClick={handleExportMarkdown}>
|
||||
<DownloadOutlined />
|
||||
<span>导出 Markdown</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<>
|
||||
<div className="script-eval-v5-hero">
|
||||
<div className="script-eval-v5-hero-top">
|
||||
<span className="script-eval-v5-hero-num">{animatedScore}</span>
|
||||
<span className="script-eval-v5-hero-total">/ 100</span>
|
||||
<div className="script-eval-v5-hero-grade">
|
||||
<span className="script-eval-v5-hero-grade-dot" />
|
||||
<span>{grade}级</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="script-eval-v5-hero-bar">
|
||||
<div className="script-eval-v5-hero-bar-fill" style={{ width: `${animatedScore}%` }} />
|
||||
</div>
|
||||
<div className="script-eval-v5-hero-beat">击败全国 <b>{beatPct}%</b> 剧本</div>
|
||||
<div className="script-eval-v5-hero-title">{compactTitle}</div>
|
||||
<div className="script-eval-v5-hero-desc">{result.summary}</div>
|
||||
</div>
|
||||
|
||||
{!result && (
|
||||
<section className="script-eval-v4-note">
|
||||
<FileTextOutlined />
|
||||
<span>评分后会展示当前短板、改写方向和可执行优化路径。</span>
|
||||
</section>
|
||||
<div className="script-eval-v5-card">
|
||||
<div className="script-eval-v5-card-head">
|
||||
<div className="script-eval-v5-card-head-left">
|
||||
<div className="script-eval-v5-ch-dot" />
|
||||
<div className="script-eval-v5-ch-title">六维评分</div>
|
||||
</div>
|
||||
<div className="script-eval-v5-ch-legend">
|
||||
<div className="script-eval-v5-leg"><div className="script-eval-v5-ldot is-score" />得分</div>
|
||||
<div className="script-eval-v5-leg"><div className="script-eval-v5-ldot is-loss" />扣分</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="script-eval-v5-card-body">
|
||||
<div className="script-eval-v5-chart-container">
|
||||
<div className="script-eval-v5-chart-bars">
|
||||
{SCORE_DIMENSIONS.map((dim, i) => {
|
||||
const score = result.dimensionScores[dim.key] ?? 0;
|
||||
const pct = score / dim.maxScore;
|
||||
const lossPct = (dim.maxScore - score) / dim.maxScore;
|
||||
const isPerfect = score === dim.maxScore;
|
||||
return (
|
||||
<div
|
||||
key={dim.key}
|
||||
className={`script-eval-v5-bcol${activeDim === i ? " is-active" : ""}${activeDim !== null && activeDim !== i ? " is-dimmed" : ""}`}
|
||||
onClick={() => setActiveDim(activeDim === i ? null : i)}
|
||||
>
|
||||
<div className="script-eval-v5-bbar-area">
|
||||
{lossPct > 0 && (
|
||||
<div className="script-eval-v5-bseg is-loss" style={{ height: `${lossPct * 80}%`, transitionDelay: `${i * 80}ms` }} />
|
||||
)}
|
||||
<div className={`script-eval-v5-bseg is-score${isPerfect ? " is-perfect" : ""}`} style={{ height: `${pct * 80}%`, transitionDelay: `${i * 80}ms` }} />
|
||||
</div>
|
||||
<div className="script-eval-v5-bscore-label">
|
||||
{score}<span className="script-eval-v5-bmax">/{dim.maxScore}</span>
|
||||
{isPerfect && <span className="script-eval-v5-bstar"> ★</span>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="script-eval-v5-chart-bottom">
|
||||
<div className="script-eval-v5-chart-dims">
|
||||
{SCORE_DIMENSIONS.map((dim, i) => (
|
||||
<div
|
||||
key={dim.key}
|
||||
className={`script-eval-v5-chart-dim${activeDim === i ? " is-active" : ""}${activeDim !== null && activeDim !== i ? " is-dimmed" : ""}`}
|
||||
onClick={() => setActiveDim(activeDim === i ? null : i)}
|
||||
>
|
||||
<div className="script-eval-v5-chart-dim-name">{dim.label}</div>
|
||||
<div className="script-eval-v5-chart-dim-hint">{dim.hint}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{activeDim !== null && (() => {
|
||||
const d = SCORE_DIMENSIONS[activeDim]!;
|
||||
const s = result.dimensionScores[d.key] ?? 0;
|
||||
return (
|
||||
<div className="script-eval-v5-dim-overlay is-open">
|
||||
<button className="script-eval-v5-dim-overlay-close" onClick={() => setActiveDim(null)}>✕</button>
|
||||
<div className="script-eval-v5-do-inner">
|
||||
<div className="script-eval-v5-do-left">
|
||||
<div className="script-eval-v5-do-name">{d.label}</div>
|
||||
<div className="script-eval-v5-do-score">{s}<span className="script-eval-v5-do-max">/{d.maxScore}</span></div>
|
||||
<div className="script-eval-v5-do-bar"><div className="script-eval-v5-do-bar-fill" style={{ width: `${Math.round(s / d.maxScore * 100)}%` }} /></div>
|
||||
<div className="script-eval-v5-do-hint">{d.hint}</div>
|
||||
</div>
|
||||
<div className="script-eval-v5-do-right"><div className="script-eval-v5-do-detail">{d.detail}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(result.highlights.length > 0 || result.issues.length > 0) && (
|
||||
<div className="script-eval-v5-findings">
|
||||
{result.highlights.length > 0 && (
|
||||
<div className="script-eval-v5-find-group">
|
||||
<div className="script-eval-v5-find-group-label is-green">
|
||||
✦ 亮点 <span className="script-eval-v5-fg-count">{result.highlights.length}</span>
|
||||
</div>
|
||||
<div className="script-eval-v5-fi-list">
|
||||
{result.highlights.map((h, i) => (
|
||||
<div key={i} className="script-eval-v5-fi-item is-highlight"><div className="script-eval-v5-fi-marker" /><div>{h}</div></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{result.issues.length > 0 && (
|
||||
<div className="script-eval-v5-find-group">
|
||||
<div className="script-eval-v5-find-group-label is-orange">
|
||||
⚠ 扣分点 <span className="script-eval-v5-fg-count">{result.issues.length}</span>
|
||||
</div>
|
||||
<div className="script-eval-v5-fi-list">
|
||||
{result.issues.map((issue, i) => (
|
||||
<div key={i} className="script-eval-v5-fi-item is-issue"><div className="script-eval-v5-fi-marker" /><div>{issue}</div></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.suggestions.length > 0 && (
|
||||
<div className="script-eval-v5-card">
|
||||
<div className="script-eval-v5-card-head">
|
||||
<div className="script-eval-v5-card-head-left"><div className="script-eval-v5-ch-dot" /><div className="script-eval-v5-ch-title">优化路径</div></div>
|
||||
</div>
|
||||
<div className="script-eval-v5-card-body">
|
||||
<table className="script-eval-v5-sug-table">
|
||||
<thead><tr><th style={{ width: 60 }}>优先级</th><th style={{ width: 68 }}>类型</th><th>优化建议</th></tr></thead>
|
||||
<tbody>
|
||||
{result.suggestions.map((s, i) => {
|
||||
const isHigh = i < 2;
|
||||
return (
|
||||
<tr key={i} className={isHigh ? "is-high" : "is-mid"}>
|
||||
<td><span className={`script-eval-v5-sug-priority${isHigh ? " is-high" : " is-mid"}`}>{isHigh ? "HIGH" : "MID"}</span></td>
|
||||
<td><div className="script-eval-v5-sug-type">{isHigh ? "核心" : "增强"}</div></td>
|
||||
<td>{s}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div className="script-eval-v5-statusbar">
|
||||
<div className="script-eval-v5-status-dot" />
|
||||
<span>{loading ? "评测中..." : result ? "评测完成" : hasContent ? "待评测" : "等待上传"}</span>
|
||||
<span className="script-eval-v5-sb-right">{result ? `六维标准 · ${result.totalScore}分` : "六维标准"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,6 +5,8 @@
|
||||
@import "./components/legacy-components.css";
|
||||
@import "./pages/home.css";
|
||||
@import "./pages/welcome-splash.css";
|
||||
@import "./pages/toolbox.css";
|
||||
@import "./pages/script-review-visual.css";
|
||||
@import "./pages/workbench.css";
|
||||
@import "./pages/ecommerce.css";
|
||||
@import "./pages/ecommerce-video.css";
|
||||
@@ -17,6 +19,7 @@
|
||||
@import "./pages/image-workbench.css";
|
||||
@import "./pages/subtitle-removal.css";
|
||||
@import "./pages/size-template.css";
|
||||
@import "./pages/script-tokens-v5.css";
|
||||
@import "./pages/script-tokens.css";
|
||||
@import "./pages/profile.css";
|
||||
@import "./pages/canvas.css";
|
||||
|
||||
@@ -572,6 +572,7 @@
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
|
||||
.omni-home__feature-stats {
|
||||
position: absolute;
|
||||
right: clamp(22px, 7vw, 92px);
|
||||
|
||||
@@ -0,0 +1,264 @@
|
||||
/* ===== 剧本评测展示 ===== */
|
||||
.omni-script-review-visual {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: clamp(14px, 2vw, 24px);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
.omni-script-review-hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.omni-script-review-score-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.omni-script-review-num {
|
||||
font-size: clamp(36px, 5vw, 56px);
|
||||
font-weight: 800;
|
||||
color: var(--accent);
|
||||
line-height: 1;
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
|
||||
.omni-script-review-total {
|
||||
font-size: 14px;
|
||||
color: rgb(255 255 255 / 30%);
|
||||
font-weight: 400;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.omni-script-review-grade {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
margin-left: 12px;
|
||||
margin-bottom: 8px;
|
||||
padding: 2px 10px;
|
||||
border-radius: 4px;
|
||||
background: rgba(0, 255, 136, 0.08);
|
||||
border: 1px solid rgba(0, 255, 136, 0.2);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.omni-script-review-grade-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
animation: omni-sr-pulse 2s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes omni-sr-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
.omni-script-review-bar {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.omni-script-review-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
background: var(--accent);
|
||||
transition: width 1.4s ease;
|
||||
}
|
||||
|
||||
.omni-script-review-beat {
|
||||
font-size: 11px;
|
||||
color: rgb(255 255 255 / 30%);
|
||||
}
|
||||
|
||||
.omni-script-review-beat b {
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
.omni-script-review-chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.omni-script-review-chart-bars {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex: 1;
|
||||
align-items: flex-end;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.omni-script-review-bcol {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.omni-script-review-bbar-area {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.omni-script-review-bseg {
|
||||
width: 70%;
|
||||
min-height: 0;
|
||||
transition: height 1s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s, opacity 0.25s;
|
||||
}
|
||||
|
||||
.omni-script-review-bseg.is-score {
|
||||
background: linear-gradient(180deg, #33ffaa, var(--accent) 40%, #00cc6a);
|
||||
border-radius: 5px 5px 2px 2px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.omni-script-review-bseg.is-score::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 50%;
|
||||
bottom: 0;
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent);
|
||||
border-radius: 5px 0 0 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.omni-script-review-bseg.is-perfect {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.omni-script-review-bseg.is-loss {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px dashed rgba(255, 255, 255, 0.1);
|
||||
border-bottom: none;
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
.omni-script-review-bcol:hover .omni-script-review-bseg.is-score {
|
||||
filter: brightness(1.15);
|
||||
box-shadow: 0 0 10px rgba(0, 255, 136, 0.15);
|
||||
}
|
||||
|
||||
.omni-script-review-bcol.is-active .omni-script-review-bseg.is-score {
|
||||
filter: brightness(1.25);
|
||||
box-shadow: 0 0 14px rgba(0, 255, 136, 0.25);
|
||||
}
|
||||
|
||||
.omni-script-review-bcol.is-dimmed .omni-script-review-bseg {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.omni-script-review-blabel {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.omni-script-review-blabel span {
|
||||
font-size: clamp(8px, 0.9vw, 10px);
|
||||
font-weight: 600;
|
||||
color: rgb(255 255 255 / 55%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.omni-script-review-bcol:hover .omni-script-review-blabel span,
|
||||
.omni-script-review-bcol.is-active .omni-script-review-blabel span {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.omni-script-review-diminfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 0;
|
||||
animation: omni-sr-fadeUp 0.25s ease;
|
||||
}
|
||||
|
||||
@keyframes omni-sr-fadeUp {
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.omni-script-review-diminfo-name {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.omni-script-review-diminfo-score {
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: var(--accent);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.omni-script-review-diminfo-score small {
|
||||
font-size: 12px;
|
||||
color: rgb(255 255 255 / 30%);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.omni-script-review-legend {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
justify-content: flex-end;
|
||||
font-size: 9px;
|
||||
color: rgb(255 255 255 / 30%);
|
||||
}
|
||||
|
||||
.omni-script-review-legend-dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 2px;
|
||||
vertical-align: middle;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.omni-script-review-legend-dot.is-score {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.omni-script-review-legend-dot.is-loss {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px dashed rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.omni-script-review-chart-bars {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.omni-script-review-bseg {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,884 @@
|
||||
/* ===== 工具箱功能页 ===== */
|
||||
.omni-home__toolbox-page {
|
||||
--toolbox-green: #00ff88;
|
||||
--toolbox-blue: #4fc3f7;
|
||||
--toolbox-purple: #a855f7;
|
||||
--toolbox-surface: rgba(14, 16, 38, 0.75);
|
||||
--toolbox-elevated: rgba(20, 22, 52, 0.85);
|
||||
--toolbox-highlight: rgba(28, 31, 68, 0.9);
|
||||
--toolbox-border-subtle: rgba(0, 255, 136, 0.08);
|
||||
--toolbox-border-default: rgba(0, 255, 136, 0.14);
|
||||
--toolbox-border-hover: rgba(0, 255, 136, 0.28);
|
||||
--toolbox-text-primary: #f0f0f5;
|
||||
--toolbox-text-secondary: rgba(240, 240, 245, 0.6);
|
||||
--toolbox-text-tertiary: rgba(240, 240, 245, 0.4);
|
||||
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
min-height: var(--home-section-min-height);
|
||||
border-top: 1px solid rgb(255 255 255 / 8%);
|
||||
background:
|
||||
linear-gradient(180deg, #070b10 0%, #05080d 100%),
|
||||
radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0, 255, 136, 0.04) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 60% 50% at 80% 70%, rgba(79, 195, 247, 0.03) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 50% 40% at 20% 80%, rgba(168, 85, 247, 0.03) 0%, transparent 60%);
|
||||
scroll-snap-align: start;
|
||||
scroll-snap-stop: normal;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-shell {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
gap: clamp(20px, 3vw, 40px);
|
||||
padding: clamp(42px, 6vw, 82px) clamp(22px, 7vw, 92px);
|
||||
min-height: var(--home-section-min-height);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ===== Left Panel ===== */
|
||||
.omni-home__toolbox-left {
|
||||
width: clamp(340px, 30vw, 440px);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
justify-content: flex-start;
|
||||
padding-top: clamp(40px, 8vh, 100px);
|
||||
}
|
||||
|
||||
.omni-home__toolbox-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-brand-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
background: var(--toolbox-green);
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #0a0b12;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-brand-icon .anticon {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-brand-text {
|
||||
font-weight: 900;
|
||||
font-size: 30px;
|
||||
color: #fff;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-title {
|
||||
font-weight: 900;
|
||||
font-size: clamp(34px, 3.6vw, 46px);
|
||||
line-height: 1.15;
|
||||
background: linear-gradient(135deg, var(--toolbox-green), var(--toolbox-blue));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-subtitle {
|
||||
font-size: 17px;
|
||||
line-height: 1.6;
|
||||
color: var(--toolbox-text-secondary);
|
||||
}
|
||||
|
||||
.omni-home__toolbox-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
padding: 18px 22px;
|
||||
border-radius: 16px;
|
||||
background: var(--toolbox-surface);
|
||||
border: 1px solid var(--toolbox-border-subtle);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
animation: omni-toolbox-fadeSlideIn 0.6s ease both;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-item:nth-child(1) { animation-delay: 0.1s; }
|
||||
.omni-home__toolbox-item:nth-child(2) { animation-delay: 0.2s; }
|
||||
.omni-home__toolbox-item:nth-child(3) { animation-delay: 0.3s; }
|
||||
.omni-home__toolbox-item:nth-child(4) { animation-delay: 0.4s; }
|
||||
|
||||
.omni-home__toolbox-item:hover {
|
||||
border-color: var(--toolbox-border-hover);
|
||||
transform: translateX(4px);
|
||||
background: var(--toolbox-elevated);
|
||||
}
|
||||
|
||||
.omni-home__toolbox-item-icon {
|
||||
font-size: 28px;
|
||||
flex-shrink: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
background: rgba(0, 255, 136, 0.08);
|
||||
}
|
||||
|
||||
.omni-home__toolbox-item-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-item-name {
|
||||
font-weight: 700;
|
||||
font-size: 17px;
|
||||
color: var(--toolbox-text-primary);
|
||||
}
|
||||
|
||||
.omni-home__toolbox-item-desc {
|
||||
font-size: 14px;
|
||||
color: var(--toolbox-text-tertiary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@keyframes omni-toolbox-fadeSlideIn {
|
||||
from { opacity: 0; transform: translateX(-12px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
.omni-home__toolbox-workflow {
|
||||
margin-top: auto;
|
||||
padding: 20px 24px;
|
||||
border-radius: 16px;
|
||||
background: var(--toolbox-surface);
|
||||
border: 1px solid var(--toolbox-border-subtle);
|
||||
}
|
||||
|
||||
.omni-home__toolbox-workflow-label {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--toolbox-green);
|
||||
margin-bottom: 12px;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-workflow-steps {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 14px;
|
||||
color: var(--toolbox-text-tertiary);
|
||||
}
|
||||
|
||||
.omni-home__toolbox-workflow-step {
|
||||
color: var(--toolbox-text-secondary);
|
||||
}
|
||||
|
||||
.omni-home__toolbox-workflow-arrow {
|
||||
color: var(--toolbox-green);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ===== Grid Area ===== */
|
||||
.omni-home__toolbox-grid {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 16px;
|
||||
min-height: clamp(360px, 40vw, 520px);
|
||||
}
|
||||
|
||||
/* ===== Tool Cards ===== */
|
||||
.omni-home__toolbox-card {
|
||||
position: relative;
|
||||
border-radius: 18px;
|
||||
background: var(--toolbox-elevated);
|
||||
border: 1px solid var(--toolbox-border-default);
|
||||
backdrop-filter: blur(20px);
|
||||
overflow: hidden;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
animation: omni-toolbox-cardIn 0.7s ease both;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-card:nth-child(1) { animation-delay: 0.15s; }
|
||||
.omni-home__toolbox-card:nth-child(2) { animation-delay: 0.25s; }
|
||||
.omni-home__toolbox-card:nth-child(3) { animation-delay: 0.35s; }
|
||||
.omni-home__toolbox-card:nth-child(4) { animation-delay: 0.45s; }
|
||||
|
||||
.omni-home__toolbox-card:hover {
|
||||
transform: translateY(-6px) scale(1.01);
|
||||
border-color: var(--toolbox-border-hover);
|
||||
box-shadow:
|
||||
0 12px 40px rgba(0, 255, 136, 0.08),
|
||||
0 0 60px rgba(0, 255, 136, 0.04);
|
||||
}
|
||||
|
||||
@keyframes omni-toolbox-cardIn {
|
||||
from { opacity: 0; transform: translateY(20px) scale(0.97); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
|
||||
.omni-home__toolbox-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 18px 0;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-card-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-card-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 9px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
background: rgba(0, 255, 136, 0.1);
|
||||
border: 1px solid rgba(0, 255, 136, 0.12);
|
||||
}
|
||||
|
||||
.omni-home__toolbox-card-title {
|
||||
font-weight: 900;
|
||||
font-size: 14px;
|
||||
color: var(--toolbox-text-primary);
|
||||
}
|
||||
|
||||
.omni-home__toolbox-card-tag {
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--toolbox-green);
|
||||
background: rgba(0, 255, 136, 0.1);
|
||||
border: 1px solid rgba(0, 255, 136, 0.2);
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-card-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 18px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-card-footer {
|
||||
padding: 8px 18px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-card-feat {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
color: var(--toolbox-text-tertiary);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.omni-home__toolbox-card-feat-sep {
|
||||
color: rgba(0, 255, 136, 0.2);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* === Card 1: 图片工作室 === */
|
||||
.toolbox-card1-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
gap: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toolbox-card1-side {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.toolbox-card1-left {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.toolbox-card1-right {
|
||||
background: rgba(0, 255, 136, 0.02);
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.toolbox-card1-img {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.toolbox-card1-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.toolbox-card1-left .toolbox-card1-img {
|
||||
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.toolbox-card1-right .toolbox-card1-img {
|
||||
box-shadow: 0 0 12px rgba(0, 255, 136, 0.06);
|
||||
}
|
||||
|
||||
.toolbox-card1-label {
|
||||
font-size: 10px;
|
||||
color: var(--toolbox-text-tertiary);
|
||||
margin-top: 6px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.toolbox-card1-left .toolbox-card1-label {
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
.toolbox-card1-right .toolbox-card1-label {
|
||||
color: rgba(0, 255, 136, 0.5);
|
||||
}
|
||||
|
||||
.toolbox-card1-divider {
|
||||
width: 1px;
|
||||
background: linear-gradient(to bottom, transparent, rgba(0, 255, 136, 0.3), transparent);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 8%;
|
||||
height: 84%;
|
||||
}
|
||||
|
||||
/* === Card 2: 镜头实验室 === */
|
||||
.toolbox-card2-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.toolbox-card2-frame {
|
||||
flex: 1;
|
||||
height: 85%;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
background: linear-gradient(180deg, #1a1d42 0%, #141230 100%);
|
||||
border: 1px solid rgba(0, 255, 136, 0.06);
|
||||
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.toolbox-card2-frame:hover {
|
||||
border-color: rgba(0, 255, 136, 0.2);
|
||||
box-shadow: 0 0 16px rgba(0, 255, 136, 0.08);
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.toolbox-card2-product {
|
||||
position: absolute;
|
||||
top: 14%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 55%;
|
||||
height: 50%;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.toolbox-card2-frame:nth-child(1) .toolbox-card2-product {
|
||||
background: repeating-linear-gradient(0deg, #6b9b7a 0px, #6b9b7a 2px, #d4dfc8 2px, #d4dfc8 4px);
|
||||
}
|
||||
|
||||
.toolbox-card2-frame:nth-child(2) .toolbox-card2-product {
|
||||
background: repeating-linear-gradient(0deg, #6b9b7a 0px, #6b9b7a 2px, #d4dfc8 2px, #d4dfc8 4px);
|
||||
transform: translateX(-50%) perspective(200px) rotateY(25deg);
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.toolbox-card2-frame:nth-child(3) .toolbox-card2-product {
|
||||
background: repeating-linear-gradient(90deg, #6b9b7a 0px, #6b9b7a 2px, #d4dfc8 2px, #d4dfc8 4px);
|
||||
width: 50%;
|
||||
height: 40%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.toolbox-card2-frame:nth-child(4) .toolbox-card2-product {
|
||||
background: repeating-linear-gradient(0deg, #6b9b7a 0px, #6b9b7a 2px, #d4dfc8 2px, #d4dfc8 4px);
|
||||
width: 58%;
|
||||
transform: translateX(-50%) perspective(200px) rotateX(-15deg);
|
||||
}
|
||||
|
||||
.toolbox-card2-frame:nth-child(5) .toolbox-card2-product {
|
||||
background: repeating-linear-gradient(0deg, #5a7a4e 0px, #5a7a4e 2px, #b8c8a8 2px, #b8c8a8 4px);
|
||||
width: 50%;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.toolbox-card2-shadow {
|
||||
position: absolute;
|
||||
top: 66%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40%;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 255, 136, 0.06);
|
||||
filter: blur(3px);
|
||||
}
|
||||
|
||||
.toolbox-card2-angle-label {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
color: var(--toolbox-text-tertiary);
|
||||
margin-bottom: 10%;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
background: rgba(0, 255, 136, 0.06);
|
||||
border: 1px solid rgba(0, 255, 136, 0.08);
|
||||
}
|
||||
|
||||
.toolbox-card2-frame:nth-child(1) .toolbox-card2-angle-label {
|
||||
color: var(--toolbox-green);
|
||||
background: rgba(0, 255, 136, 0.1);
|
||||
border-color: rgba(0, 255, 136, 0.2);
|
||||
}
|
||||
|
||||
/* === Card 3: 一键数字人 === */
|
||||
.toolbox-card3-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
gap: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toolbox-card3-side {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.toolbox-card3-left {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.toolbox-card3-right {
|
||||
background: rgba(0, 255, 136, 0.02);
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.toolbox-card3-portrait {
|
||||
width: 70%;
|
||||
aspect-ratio: 3/4;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.toolbox-card3-left .toolbox-card3-portrait {
|
||||
background: linear-gradient(180deg, #2a2d5e, #1e2050);
|
||||
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.toolbox-card3-left .toolbox-card3-portrait::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 14%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 32%;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
background: rgba(200, 190, 220, 0.1);
|
||||
}
|
||||
|
||||
.toolbox-card3-left .toolbox-card3-portrait::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 42%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 50%;
|
||||
height: 40%;
|
||||
border-radius: 20% 20% 5% 5%;
|
||||
background: rgba(200, 190, 220, 0.06);
|
||||
}
|
||||
|
||||
.toolbox-card3-portrait-mark {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 8px;
|
||||
font-size: 8px;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.toolbox-card3-right .toolbox-card3-portrait {
|
||||
background: linear-gradient(180deg, #1a3a2e, #0d2a20);
|
||||
border: 1px solid rgba(0, 255, 136, 0.12);
|
||||
box-shadow:
|
||||
0 0 30px rgba(0, 255, 136, 0.08),
|
||||
inset 0 0 20px rgba(0, 255, 136, 0.04);
|
||||
}
|
||||
|
||||
.toolbox-card3-right .toolbox-card3-portrait::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 14%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 32%;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 255, 136, 0.1);
|
||||
box-shadow: 0 0 20px rgba(0, 255, 136, 0.15);
|
||||
}
|
||||
|
||||
.toolbox-card3-right .toolbox-card3-portrait::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 42%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 50%;
|
||||
height: 40%;
|
||||
border-radius: 20% 20% 5% 5%;
|
||||
background: rgba(0, 255, 136, 0.06);
|
||||
box-shadow: 0 0 15px rgba(0, 255, 136, 0.08);
|
||||
}
|
||||
|
||||
.toolbox-card3-glow-ring {
|
||||
position: absolute;
|
||||
inset: -4px;
|
||||
border-radius: 14px;
|
||||
border: 1.5px solid rgba(0, 255, 136, 0.2);
|
||||
animation: omni-toolbox-glowPulse 2.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes omni-toolbox-glowPulse {
|
||||
0%, 100% { opacity: 0.3; box-shadow: 0 0 10px rgba(0, 255, 136, 0.05); }
|
||||
50% { opacity: 1; box-shadow: 0 0 25px rgba(0, 255, 136, 0.15); }
|
||||
}
|
||||
|
||||
.toolbox-card3-lipsync {
|
||||
position: absolute;
|
||||
top: 32%;
|
||||
left: 62%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5px;
|
||||
}
|
||||
|
||||
.toolbox-card3-lipsync span {
|
||||
width: 2px;
|
||||
border-radius: 1px;
|
||||
background: var(--toolbox-green);
|
||||
animation: omni-toolbox-lipsync 0.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.toolbox-card3-lipsync span:nth-child(1) { height: 4px; animation-delay: 0s; }
|
||||
.toolbox-card3-lipsync span:nth-child(2) { height: 8px; animation-delay: 0.1s; }
|
||||
.toolbox-card3-lipsync span:nth-child(3) { height: 5px; animation-delay: 0.2s; }
|
||||
.toolbox-card3-lipsync span:nth-child(4) { height: 10px; animation-delay: 0.3s; }
|
||||
.toolbox-card3-lipsync span:nth-child(5) { height: 4px; animation-delay: 0.4s; }
|
||||
|
||||
@keyframes omni-toolbox-lipsync {
|
||||
0%, 100% { transform: scaleY(1); opacity: 0.6; }
|
||||
50% { transform: scaleY(0.3); opacity: 1; }
|
||||
}
|
||||
|
||||
.toolbox-card3-gesture {
|
||||
position: absolute;
|
||||
top: 55%;
|
||||
left: 20%;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
border-radius: 1px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.toolbox-card3-gesture::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.5), transparent);
|
||||
animation: omni-toolbox-gestureMove 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.toolbox-card3-gesture::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid rgba(0, 255, 136, 0.3);
|
||||
animation: omni-toolbox-gestureMove 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes omni-toolbox-gestureMove {
|
||||
0%, 100% { opacity: 0.2; transform: translateX(0); }
|
||||
50% { opacity: 0.8; transform: translateX(6px); }
|
||||
}
|
||||
|
||||
.toolbox-card3-live {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
font-size: 8px;
|
||||
font-weight: 900;
|
||||
color: #0a0b12;
|
||||
background: var(--toolbox-green);
|
||||
padding: 2px 7px;
|
||||
border-radius: 4px;
|
||||
letter-spacing: 1px;
|
||||
animation: omni-toolbox-livePulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes omni-toolbox-livePulse {
|
||||
0%, 100% { box-shadow: 0 0 6px rgba(0, 255, 136, 0.3); }
|
||||
50% { box-shadow: 0 0 16px rgba(0, 255, 136, 0.6); }
|
||||
}
|
||||
|
||||
.toolbox-card3-transform {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 2;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--toolbox-green);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: #0a0b12;
|
||||
box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
|
||||
animation: omni-toolbox-transformSpin 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes omni-toolbox-transformSpin {
|
||||
0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 136, 0.3); }
|
||||
50% { box-shadow: 0 0 30px rgba(0, 255, 136, 0.5); }
|
||||
}
|
||||
|
||||
.toolbox-card3-label {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.toolbox-card3-left .toolbox-card3-label {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.toolbox-card3-right .toolbox-card3-label {
|
||||
color: rgba(0, 255, 136, 0.5);
|
||||
}
|
||||
|
||||
.toolbox-card3-divider {
|
||||
width: 1px;
|
||||
background: linear-gradient(to bottom, transparent, rgba(0, 255, 136, 0.25), transparent);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 8%;
|
||||
height: 84%;
|
||||
}
|
||||
|
||||
/* === Card 4: 去除水印 === */
|
||||
.toolbox-card4-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
gap: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toolbox-card4-side {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.toolbox-card4-left {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.toolbox-card4-right {
|
||||
background: rgba(0, 255, 136, 0.02);
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.toolbox-card4-img {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.toolbox-card4-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.toolbox-card4-left .toolbox-card4-img {
|
||||
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.toolbox-card4-right .toolbox-card4-img {
|
||||
box-shadow: 0 0 12px rgba(0, 255, 136, 0.06);
|
||||
}
|
||||
|
||||
.toolbox-card4-label {
|
||||
font-size: 10px;
|
||||
color: var(--toolbox-text-tertiary);
|
||||
margin-top: 8px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.toolbox-card4-left .toolbox-card4-label {
|
||||
color: rgba(255, 200, 200, 0.5);
|
||||
}
|
||||
|
||||
.toolbox-card4-right .toolbox-card4-label {
|
||||
color: rgba(0, 255, 136, 0.5);
|
||||
}
|
||||
|
||||
.toolbox-card4-divider {
|
||||
width: 1px;
|
||||
background: linear-gradient(to bottom, transparent, rgba(0, 255, 136, 0.3), transparent);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 8%;
|
||||
height: 84%;
|
||||
}
|
||||
|
||||
/* ===== Responsive ===== */
|
||||
@media (max-width: 980px) {
|
||||
.omni-home__toolbox-shell {
|
||||
flex-direction: column;
|
||||
padding: 48px 22px 64px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-left {
|
||||
width: 100%;
|
||||
flex-shrink: unset;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-grid {
|
||||
width: 100%;
|
||||
min-height: clamp(480px, 70vw, 700px);
|
||||
}
|
||||
|
||||
.omni-home__toolbox-workflow {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.omni-home__toolbox-shell {
|
||||
padding: 36px 18px 48px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.omni-home__toolbox-card {
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.omni-home__toolbox-item,
|
||||
.omni-home__toolbox-card {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.toolbox-card3-glow-ring,
|
||||
.toolbox-card3-lipsync span,
|
||||
.toolbox-card3-gesture::before,
|
||||
.toolbox-card3-gesture::after,
|
||||
.toolbox-card3-live,
|
||||
.toolbox-card3-transform {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user