Compare commits
21 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 87d81d2c86 | |||
| 178c2ec695 | |||
| 324ebf5ce5 | |||
| e5e5af5b54 | |||
| fd71b2b18e | |||
| 6b9953625e | |||
| 9ababfda46 | |||
| 93a538d51d | |||
| 94080f30f7 | |||
| 7d446dfc5f | |||
| d71437b09c | |||
| f1bfbf8608 | |||
| 94c1453c9b | |||
| 9504f8ee87 | |||
| d1b5d64bc8 | |||
| 44c748b0dc | |||
| 160552b45e | |||
| c13bf800cc | |||
| 16bf7bbdad | |||
| 4b6f864aa9 | |||
| 59efc78c0e |
@@ -0,0 +1,8 @@
|
||||
# Dev proxy target — the backend API server
|
||||
VITE_DEV_PROXY=http://47.110.225.76:3600
|
||||
|
||||
# Key server URL for auth/profile endpoints
|
||||
VITE_KEY_SERVER_URL=
|
||||
|
||||
# Main API base URL (used when not served from omniai.net.cn)
|
||||
VITE_API_BASE_URL=
|
||||
+2
-2
@@ -357,7 +357,7 @@ function App() {
|
||||
canvasAutoOpenedRecentRef.current = false;
|
||||
setWorkspaceExpanded(false);
|
||||
if (options?.resetView) {
|
||||
handleSetView("workbench");
|
||||
handleSetView("login");
|
||||
}
|
||||
}, [clearSessionState, setProjects, setProjectsLoaded, setUsage, clearTasks, setRuntimeNotifications, setServerNotifications, setCanvasWorkflow, setCurrentCanvasProjectId, setWorkspaceExpanded, handleSetView]);
|
||||
|
||||
@@ -492,7 +492,7 @@ function App() {
|
||||
if (nextSession) {
|
||||
setSession(nextSession);
|
||||
} else {
|
||||
clearAuthenticatedState();
|
||||
clearAuthenticatedState({ resetView: true });
|
||||
}
|
||||
} finally {
|
||||
checking = false;
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { buildApiUrl, buildAuthHeaders } from "./serverConnection";
|
||||
|
||||
const TEXT_MODEL = "qwen-max";
|
||||
const VISION_MODEL = "qwen3.6-plus";
|
||||
const VISION_MODEL = "qwen3.7-plus";
|
||||
const VISION_FALLBACK_MODEL = "qwen-vl-plus";
|
||||
|
||||
export interface AdVideoUserConfig {
|
||||
platform: string;
|
||||
@@ -107,16 +108,42 @@ interface ChatMessage {
|
||||
content: string;
|
||||
}
|
||||
|
||||
const MAX_RETRIES = 3;
|
||||
const RETRY_BASE_MS = 2000;
|
||||
const CHAT_TIMEOUT_MS = 120_000; // 2 minutes per AI call
|
||||
|
||||
function isTransientError(err: unknown): boolean {
|
||||
if (!(err instanceof Error)) return false;
|
||||
const msg = err.message.toLowerCase();
|
||||
return /\b429\b/.test(msg) || msg.includes("signal timed out") || msg.includes("aborted") || msg.includes("timeout");
|
||||
}
|
||||
|
||||
async function retryOnTransient<T>(fn: () => Promise<T>, signal?: AbortSignal): Promise<T> {
|
||||
for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
|
||||
try {
|
||||
return await fn();
|
||||
} catch (err) {
|
||||
if (signal?.aborted) throw err;
|
||||
if (attempt === MAX_RETRIES) throw err;
|
||||
if (!isTransientError(err)) throw err;
|
||||
const delay = RETRY_BASE_MS * 2 ** attempt + Math.random() * 1000;
|
||||
await new Promise((r) => setTimeout(r, delay));
|
||||
}
|
||||
}
|
||||
throw new Error("unreachable");
|
||||
}
|
||||
|
||||
async function chat(
|
||||
systemPrompt: string,
|
||||
userContent: string,
|
||||
options?: { model?: string; signal?: AbortSignal },
|
||||
): Promise<string> {
|
||||
return retryOnTransient(async () => {
|
||||
const messages: ChatMessage[] = [
|
||||
{ role: "system", content: systemPrompt },
|
||||
{ role: "user", content: userContent },
|
||||
];
|
||||
const timeoutSignal = AbortSignal.timeout(60000);
|
||||
const timeoutSignal = AbortSignal.timeout(CHAT_TIMEOUT_MS);
|
||||
const combinedSignal = options?.signal
|
||||
? AbortSignal.any([options.signal, timeoutSignal])
|
||||
: timeoutSignal;
|
||||
@@ -137,6 +164,7 @@ async function chat(
|
||||
payload?.content ?? payload?.choices?.[0]?.message?.content ?? payload?.text ?? "";
|
||||
if (!content) throw new Error("模型未返回有效内容");
|
||||
return content;
|
||||
}, options?.signal);
|
||||
}
|
||||
|
||||
async function visionChat(
|
||||
@@ -149,30 +177,43 @@ async function visionChat(
|
||||
...imageUrls.map((url) => ({ type: "image_url", image_url: { url } })),
|
||||
{ type: "text", text },
|
||||
];
|
||||
const timeoutSignal = AbortSignal.timeout(60000);
|
||||
const messages = [
|
||||
{ role: "system", content: systemPrompt },
|
||||
{ role: "user", content },
|
||||
];
|
||||
|
||||
for (const model of [VISION_MODEL, VISION_FALLBACK_MODEL]) {
|
||||
const timeoutSignal = AbortSignal.timeout(CHAT_TIMEOUT_MS);
|
||||
const combinedSignal = signal
|
||||
? AbortSignal.any([signal, timeoutSignal])
|
||||
: timeoutSignal;
|
||||
try {
|
||||
const out = await retryOnTransient(async () => {
|
||||
const res = await fetch(buildApiUrl("ai/chat"), {
|
||||
method: "POST",
|
||||
headers: buildAuthHeaders(),
|
||||
body: JSON.stringify({
|
||||
model: VISION_MODEL,
|
||||
messages: [
|
||||
{ role: "system", content: systemPrompt },
|
||||
{ role: "user", content },
|
||||
],
|
||||
stream: false,
|
||||
temperature: 0.3,
|
||||
}),
|
||||
body: JSON.stringify({ model, messages, stream: false, temperature: 0.3 }),
|
||||
signal: combinedSignal,
|
||||
});
|
||||
if (!res.ok) throw new Error(`图片理解调用失败 (${res.status})`);
|
||||
if (!res.ok) {
|
||||
const errBody = await res.text().catch(() => "");
|
||||
if (model === VISION_MODEL && errBody.includes("image format")) throw new Error("IMAGE_FORMAT_FALLBACK");
|
||||
throw new Error(`图片理解调用失败 (${res.status})`);
|
||||
}
|
||||
const payload = await res.json();
|
||||
const out: string =
|
||||
const result: string =
|
||||
payload?.content ?? payload?.choices?.[0]?.message?.content ?? payload?.text ?? "";
|
||||
if (!out) throw new Error("图片理解未返回有效内容");
|
||||
if (!result) throw new Error("图片理解未返回有效内容");
|
||||
return result;
|
||||
}, signal);
|
||||
return out;
|
||||
} catch (err) {
|
||||
if (err instanceof Error && err.message === "IMAGE_FORMAT_FALLBACK") continue;
|
||||
if (model === VISION_MODEL && err instanceof Error && err.message?.includes("图片理解调用失败")) continue;
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
throw new Error("图片理解调用失败,所有模型均不可用");
|
||||
}
|
||||
|
||||
const IMAGE_UNDERSTANDING_PROMPT = `你是电商产品图片分析专家。请分析用户提供的产品图片,识别产品主体、外观、颜色、材质、形状、尺寸感、品牌标识、关键部件、可视化卖点和适合展示的镜头角度。请用简洁的中文段落描述,不要编造图片中看不到的信息。`;
|
||||
|
||||
@@ -403,6 +403,24 @@ export const aiGenerationClient = {
|
||||
return readJsonResponse<{ url: string; ossKey?: string }>(res, "Asset upload response failed");
|
||||
},
|
||||
|
||||
async uploadAssetBinary(blob: Blob, options?: { name?: string; mimeType?: string; scope?: string }): Promise<{ url: string; signedUrl?: string; ossKey?: string }> {
|
||||
const form = new FormData();
|
||||
form.append("file", blob, options?.name || "upload.png");
|
||||
if (options?.scope) form.append("scope", options.scope);
|
||||
if (options?.mimeType) form.append("mimeType", options.mimeType);
|
||||
// Exclude Content-Type so browser auto-sets multipart/form-data with boundary
|
||||
const { "Content-Type": _ct, ...authHeaders } = buildAuthHeaders();
|
||||
const res = await fetch(buildApiUrl("oss/upload-binary"), {
|
||||
method: "POST",
|
||||
headers: authHeaders,
|
||||
body: form,
|
||||
});
|
||||
if (!res.ok) {
|
||||
await throwResponseError(res, "Binary asset upload failed");
|
||||
}
|
||||
return readJsonResponse<{ url: string; ossKey?: string }>(res, "Binary asset upload response failed");
|
||||
},
|
||||
|
||||
async uploadAssetByUrl(input: UploadAssetByUrlInput): Promise<{ url: string; signedUrl?: string; ossKey?: string }> {
|
||||
const res = await fetch(buildApiUrl("oss/upload-by-url"), {
|
||||
method: "POST",
|
||||
|
||||
+44
-23
@@ -10,39 +10,50 @@ export interface ScriptEvalResult {
|
||||
suggestions: string[];
|
||||
}
|
||||
|
||||
const EVAL_SYSTEM_PROMPT = `你是一位专业的剧本评测专家。请对用户提供的剧本进行六维评分分析,并以严格的 JSON 格式返回结果。
|
||||
const EVAL_SYSTEM_PROMPT = `你是一位资深影视剧本评审专家,拥有二十年以上的编剧、制片和剧本医生经验。你精通各类影视叙事理论(三幕式、英雄之旅、起承转合、序列法),同时深度跟踪AIGC短剧/漫剧行业最新趋势。你的任务是对用户提供的剧本进行严谨、系统、多维度的量化评分。
|
||||
|
||||
六个评分维度:
|
||||
1. hook(钩子设计,满分20):开篇吸引力、悬念设置、黄金三秒法则
|
||||
2. character(角色塑造,满分15):人物立体度、动机合理性、弧光设计
|
||||
3. plot(剧情结构,满分20):起承转合、节奏把控、冲突设计
|
||||
4. dialogue(台词对白,满分15):语言质感、角色差异化、潜台词
|
||||
5. visual(画面表现,满分15):镜头感、空间层次、视觉冲击力
|
||||
6. content(内容深度,满分15):主题表达、情感共鸣、思想内核
|
||||
【剧本类型识别】
|
||||
收到剧本后,首先判断类型:AIGC短剧/漫剧(单集5-30分钟,竖屏平台,高密度反转、强节奏)或传统影视剧本(单集40分钟以上,长视频平台,完整起承转合)。类型判定将影响各维度的评价侧重点。
|
||||
|
||||
请严格按以下 JSON 格式返回(不要包含任何其他文字):
|
||||
【评分体系(100分制,六个维度)】
|
||||
1. hook 钩子设计(20分):开篇钩子、集末钩子、场景内钩子、悬念链完整性。短剧前3秒须有即时爆点;长剧第一幕结束前须建立核心悬念。
|
||||
2. plot 剧情结构(20分):结构框架、节奏控制、冲突设计、逻辑自洽。短剧"每分钟有事件",反转密度加分;长剧需处理好B线C线与主线交织。
|
||||
3. character 角色塑造(18分):主角弧光、角色辨识度、角色动机、配角质量。短剧角色须在前2分钟建立;长剧需要内在矛盾和多阶段成长。
|
||||
4. dialogue 台词对白(15分):角色语言区分度、信息传递效率、潜台词与留白、金句与记忆点。
|
||||
5. visual 画面表现(15分):场景描写质量、视觉叙事技巧、镜头感与节奏、制作可行性。AIGC需考虑AI生成技术边界与一致性。
|
||||
6. content 内容深度(12分):主题表达、情感共鸣、社会/人性洞察。
|
||||
|
||||
【评分铁律】
|
||||
- 扣分必须明确指出剧本中的具体段落/场景/台词。
|
||||
- 严禁给出任何维度的满分,必须有扣分理由。
|
||||
- 优缺点都要充分展开,不可只批不夸或只夸不批。
|
||||
- 不因题材类型偏见降低评分,不因某一方面出色而抬高其他维度(避免光环效应)。
|
||||
- 敢于拉开各维度分数差距,避免全部给中等分数。
|
||||
|
||||
【等级标准】按总分百分比:S≥90 | A 80-89 | B 70-79 | C 60-69 | D<60。
|
||||
|
||||
请严格按以下 JSON 格式返回(不要包含任何其他文字,不要用代码块包裹以外的说明):
|
||||
{
|
||||
"dimensionScores": { "hook": 数字, "character": 数字, "plot": 数字, "dialogue": 数字, "visual": 数字, "content": 数字 },
|
||||
"summary": "一句话总结评价",
|
||||
"issues": ["问题1", "问题2", ...],
|
||||
"highlights": ["亮点1", "亮点2", ...],
|
||||
"suggestions": ["建议1", "建议2", ...]
|
||||
"dimensionScores": { "hook": 数字, "plot": 数字, "character": 数字, "dialogue": 数字, "visual": 数字, "content": 数字 },
|
||||
"summary": "200-300字综合评价,概括整体质量、市场潜力与目标受众匹配度",
|
||||
"issues": ["每条指出具体维度的扣分点并引用剧本原文位置", ...],
|
||||
"highlights": ["核心亮点,引用剧本具体场景", ...],
|
||||
"suggestions": ["按优先级排列的改进建议(最优先/次优先/可优化)", ...]
|
||||
}`;
|
||||
|
||||
const DIMENSION_WEIGHTS: Record<string, { maxScore: number; weight: number }> = {
|
||||
hook: { maxScore: 20, weight: 0.2 },
|
||||
character: { maxScore: 15, weight: 0.15 },
|
||||
plot: { maxScore: 20, weight: 0.2 },
|
||||
dialogue: { maxScore: 15, weight: 0.15 },
|
||||
visual: { maxScore: 15, weight: 0.15 },
|
||||
content: { maxScore: 15, weight: 0.15 },
|
||||
const DIMENSION_WEIGHTS: Record<string, { maxScore: number }> = {
|
||||
hook: { maxScore: 20 },
|
||||
plot: { maxScore: 20 },
|
||||
character: { maxScore: 18 },
|
||||
dialogue: { maxScore: 15 },
|
||||
visual: { maxScore: 15 },
|
||||
content: { maxScore: 12 },
|
||||
};
|
||||
|
||||
function computeTotalAndGrade(scores: Record<string, number>): { totalScore: number; grade: string } {
|
||||
const totalScore = Math.round(
|
||||
Object.entries(DIMENSION_WEIGHTS).reduce((sum, [key, dim]) => {
|
||||
const score = Math.max(0, Math.min(dim.maxScore, scores[key] ?? 0));
|
||||
return sum + (score / dim.maxScore) * 100 * dim.weight;
|
||||
return sum + Math.max(0, Math.min(dim.maxScore, scores[key] ?? 0));
|
||||
}, 0),
|
||||
);
|
||||
const grade = totalScore >= 90 ? "S" : totalScore >= 80 ? "A" : totalScore >= 70 ? "B" : totalScore >= 60 ? "C" : "D";
|
||||
@@ -56,6 +67,7 @@ function extractJson(text: string): unknown {
|
||||
}
|
||||
|
||||
export async function evaluateScript(script: string, signal?: AbortSignal): Promise<ScriptEvalResult> {
|
||||
console.log("[API] 发送评测请求,剧本长度:", script.slice(0, 8000).length, "字符");
|
||||
const res = await fetch(buildApiUrl("ai/chat"), {
|
||||
method: "POST",
|
||||
headers: buildAuthHeaders(),
|
||||
@@ -71,11 +83,15 @@ export async function evaluateScript(script: string, signal?: AbortSignal): Prom
|
||||
signal,
|
||||
});
|
||||
|
||||
console.log("[API] 响应状态:", res.status, res.statusText);
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(`评测请求失败 (${res.status})`);
|
||||
}
|
||||
|
||||
const payload = await res.json();
|
||||
console.log("[API] 原始响应体:", payload);
|
||||
|
||||
const content: string = payload?.choices?.[0]?.message?.content
|
||||
?? payload?.result?.content
|
||||
?? payload?.content
|
||||
@@ -84,7 +100,11 @@ export async function evaluateScript(script: string, signal?: AbortSignal): Prom
|
||||
|
||||
if (!content) throw new Error("模型未返回有效内容");
|
||||
|
||||
console.log("[API] 模型返回内容 (前500字符):", content.slice(0, 500));
|
||||
|
||||
const parsed = extractJson(content) as Record<string, unknown>;
|
||||
console.log("[API] 解析后的JSON:", parsed);
|
||||
|
||||
const dimensionScores: Record<string, number> = {};
|
||||
const rawScores = parsed.dimensionScores as Record<string, number> | undefined;
|
||||
if (!rawScores || typeof rawScores !== "object") throw new Error("评分格式异常");
|
||||
@@ -95,6 +115,7 @@ export async function evaluateScript(script: string, signal?: AbortSignal): Prom
|
||||
}
|
||||
|
||||
const { totalScore, grade } = computeTotalAndGrade(dimensionScores);
|
||||
console.log("[API] 计算后总分:", totalScore, "等级:", grade);
|
||||
|
||||
return {
|
||||
totalScore,
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
import { useEffect, useRef, useState, type ReactNode } from "react";
|
||||
|
||||
interface AnimatedPanelProps {
|
||||
open: boolean;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
/** Duration in ms for the exit animation before unmounting. */
|
||||
exitDuration?: number;
|
||||
}
|
||||
|
||||
export function AnimatedPanel({ open, children, className, exitDuration = 140 }: AnimatedPanelProps) {
|
||||
const [mounted, setMounted] = useState(open);
|
||||
const [visible, setVisible] = useState(open);
|
||||
const timerRef = useRef<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
if (timerRef.current) {
|
||||
window.clearTimeout(timerRef.current);
|
||||
timerRef.current = null;
|
||||
}
|
||||
setMounted(true);
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
setVisible(true);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
setVisible(false);
|
||||
timerRef.current = window.setTimeout(() => {
|
||||
setMounted(false);
|
||||
timerRef.current = null;
|
||||
}, exitDuration);
|
||||
}
|
||||
}, [open, exitDuration]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (timerRef.current) {
|
||||
window.clearTimeout(timerRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (!mounted) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${className ?? ""} animated-panel${visible ? " is-visible" : ""}`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -16,6 +16,7 @@ import { canManageCommunityCases, canReviewCommunity } from "../features/communi
|
||||
import type { WebNavItem, WebNotification, WebUsageSummary, WebUserSession, WebViewKey } from "../types";
|
||||
import NotificationCenter from "./NotificationCenter";
|
||||
import { RechargeModal } from "./RechargeModal/RechargeModal";
|
||||
import { AnimatedPanel } from "./AnimatedPanel";
|
||||
|
||||
interface AppShellProps {
|
||||
activeView: WebViewKey;
|
||||
@@ -61,6 +62,8 @@ function AppShell({
|
||||
const [profileOpen, setProfileOpen] = useState(false);
|
||||
const [rechargeOpen, setRechargeOpen] = useState(false);
|
||||
const [openSubmenuKey, setOpenSubmenuKey] = useState<WebViewKey | null>(null);
|
||||
const prevActiveViewRef = useRef<WebViewKey>(activeView);
|
||||
const [navJustActivated, setNavJustActivated] = useState<WebViewKey | null>(null);
|
||||
const isAuthView = activeView === "login";
|
||||
const isImmersiveView = activeView === "agent" || activeView === "avatarConsole";
|
||||
const showFloatingNav = !isAuthView && !isImmersiveView && activeView !== "home";
|
||||
@@ -100,6 +103,15 @@ function AppShell({
|
||||
[navItems],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeView !== prevActiveViewRef.current) {
|
||||
setNavJustActivated(activeView);
|
||||
prevActiveViewRef.current = activeView;
|
||||
const timer = window.setTimeout(() => setNavJustActivated(null), 320);
|
||||
return () => window.clearTimeout(timer);
|
||||
}
|
||||
}, [activeView]);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof document === "undefined") {
|
||||
return;
|
||||
@@ -223,8 +235,8 @@ function AppShell({
|
||||
<button
|
||||
type="button"
|
||||
className={`floating-nav__button${isActive ? " is-active" : ""}${
|
||||
workspaceExpanded && index === 3 ? " has-divider" : ""
|
||||
}`}
|
||||
navJustActivated === item.key ? " nav-just-activated" : ""
|
||||
}${workspaceExpanded && index === 3 ? " has-divider" : ""}`}
|
||||
title={`${item.label} / ${item.hint}`}
|
||||
aria-label={item.label}
|
||||
onClick={() => onSelectView(item.children?.[0]?.key ?? item.key)}
|
||||
@@ -330,8 +342,7 @@ function AppShell({
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
{session && profileOpen ? (
|
||||
<div className="profile-popover panel-surface">
|
||||
<AnimatedPanel open={session ? profileOpen : false} className="profile-popover panel-surface">
|
||||
<div className="profile-popover__head">
|
||||
<span className="profile-popover__avatar">
|
||||
{avatarUrl ? <img src={avatarUrl} alt={displayName} /> : avatarLabel}
|
||||
@@ -410,8 +421,7 @@ function AppShell({
|
||||
</button>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</AnimatedPanel>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
} from "@ant-design/icons";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import type { WebNotification, WebNotificationType, WebViewKey } from "../types";
|
||||
import { AnimatedPanel } from "./AnimatedPanel";
|
||||
|
||||
const NOTIFICATION_ICONS: Record<WebNotificationType, React.ReactNode> = {
|
||||
task_completed: <CheckCircleOutlined style={{ color: "#10b981" }} />,
|
||||
@@ -115,8 +116,7 @@ function NotificationCenter({ items, onNavigate, onMarkRead, onMarkAllRead, onCl
|
||||
<span className="notification-center__badge">{unreadCount > 99 ? "99+" : unreadCount}</span>
|
||||
)}
|
||||
</button>
|
||||
{open && (
|
||||
<div className="notification-center__panel">
|
||||
<AnimatedPanel open={open} className="notification-center__panel" exitDuration={140}>
|
||||
<div className="notification-center__header">
|
||||
<span className="notification-center__title">通知中心</span>
|
||||
<div className="notification-center__header-actions">
|
||||
@@ -158,8 +158,7 @@ function NotificationCenter({ items, onNavigate, onMarkRead, onMarkAllRead, onCl
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatedPanel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,9 +7,40 @@ interface PageTransitionProps {
|
||||
|
||||
const EXIT_DURATION_MS = 180;
|
||||
|
||||
const NAV_ORDER: string[] = [
|
||||
"home",
|
||||
"workbench",
|
||||
"ecommerce",
|
||||
"ecommerceTemplates",
|
||||
"sizeTemplate",
|
||||
"canvas",
|
||||
"scriptTokens",
|
||||
"tokenUsage",
|
||||
"community",
|
||||
"assets",
|
||||
"more",
|
||||
"imageWorkbench",
|
||||
"resolutionUpscale",
|
||||
"watermarkRemoval",
|
||||
"subtitleRemoval",
|
||||
"digitalHuman",
|
||||
"avatarConsole",
|
||||
"characterMix",
|
||||
"agent",
|
||||
"settings",
|
||||
"login",
|
||||
"profile",
|
||||
"report",
|
||||
];
|
||||
|
||||
function getNavIndex(key: string): number {
|
||||
return NAV_ORDER.indexOf(key);
|
||||
}
|
||||
|
||||
export default function PageTransition({ viewKey, children }: PageTransitionProps) {
|
||||
const [displayedChildren, setDisplayedChildren] = useState(children);
|
||||
const [phase, setPhase] = useState<"idle" | "exit">("idle");
|
||||
const [direction, setDirection] = useState<"forward" | "backward" | "neutral">("neutral");
|
||||
const prevKeyRef = useRef(viewKey);
|
||||
const timerRef = useRef<ReturnType<typeof setTimeout>>();
|
||||
|
||||
@@ -18,6 +49,15 @@ export default function PageTransition({ viewKey, children }: PageTransitionProp
|
||||
setDisplayedChildren(children);
|
||||
return;
|
||||
}
|
||||
const prevIndex = getNavIndex(prevKeyRef.current);
|
||||
const nextIndex = getNavIndex(viewKey);
|
||||
if (prevIndex < nextIndex) {
|
||||
setDirection("forward");
|
||||
} else if (prevIndex > nextIndex) {
|
||||
setDirection("backward");
|
||||
} else {
|
||||
setDirection("neutral");
|
||||
}
|
||||
prevKeyRef.current = viewKey;
|
||||
setPhase("exit");
|
||||
timerRef.current = setTimeout(() => {
|
||||
@@ -27,8 +67,10 @@ export default function PageTransition({ viewKey, children }: PageTransitionProp
|
||||
return () => clearTimeout(timerRef.current);
|
||||
}, [viewKey, children]);
|
||||
|
||||
const dirClass = direction === "forward" ? " is-forward" : direction === "backward" ? " is-backward" : "";
|
||||
|
||||
return (
|
||||
<div className={phase === "exit" ? "page-transition-wrap page-motion--exit" : "page-transition-wrap"}>
|
||||
<div className={phase === "exit" ? `page-transition-wrap page-motion--exit${dirClass}` : `page-transition-wrap${phase === "idle" && direction !== "neutral" ? ` page-motion--enter${dirClass}` : ""}`}>
|
||||
{displayedChildren}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -17,12 +17,7 @@ import { cloneWorkflow, createBlankWorkflow } from "../../data/workflows";
|
||||
import type { WebCanvasWorkflow, WebProjectSummary } from "../../types";
|
||||
import { getCommunityCaseCover, getWorkflowFromCase, shouldShowInCanvasCommunity } from "./communityCaseUtils";
|
||||
import { ossThumb } from "../../utils/ossImageOptimize";
|
||||
import wechatCaseImage10 from "../../../tu/微信图片_20260514125332_10_2.png";
|
||||
import wechatCaseImage11 from "../../../tu/微信图片_20260514125332_11_2.png";
|
||||
import wechatCaseImage12 from "../../../tu/微信图片_20260514125332_12_2.png";
|
||||
import wechatCaseImage7 from "../../../tu/微信图片_20260514125332_7_2.png";
|
||||
import wechatCaseImage8 from "../../../tu/微信图片_20260514125332_8_2.png";
|
||||
import wechatCaseImage9 from "../../../tu/微信图片_20260514125332_9_2.png";
|
||||
const OSS_MUBAN = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/muban";
|
||||
|
||||
interface CommunityPageProps {
|
||||
projects: WebProjectSummary[];
|
||||
@@ -35,12 +30,12 @@ interface CommunityPageProps {
|
||||
}
|
||||
|
||||
const communityCardImages = [
|
||||
wechatCaseImage7,
|
||||
wechatCaseImage8,
|
||||
wechatCaseImage9,
|
||||
wechatCaseImage10,
|
||||
wechatCaseImage11,
|
||||
wechatCaseImage12,
|
||||
`${OSS_MUBAN}/dianshang1.png`,
|
||||
`${OSS_MUBAN}/dianshang2.png`,
|
||||
`${OSS_MUBAN}/dianshang3.png`,
|
||||
`${OSS_MUBAN}/wechat-7.png`,
|
||||
`${OSS_MUBAN}/wechat-8.png`,
|
||||
`${OSS_MUBAN}/wechat-9.png`,
|
||||
];
|
||||
|
||||
const SLIDE_INTERVAL = 3000;
|
||||
@@ -482,8 +477,9 @@ function CommunityPage({ projects, isAuthenticated, onStartCreate, onOpenProject
|
||||
<div className="community-card-actions">
|
||||
<button
|
||||
type="button"
|
||||
className={isFavorite ? "is-active" : ""}
|
||||
className={isFavorite ? "is-active heart-animate" : ""}
|
||||
aria-pressed={isFavorite}
|
||||
key={isFavorite ? `fav-${cardId}` : `unfav-${cardId}`}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
void handleToggleFavorite(item, cardId);
|
||||
|
||||
@@ -11,9 +11,12 @@ import {
|
||||
SkinOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { useEffect, useRef, useState, type CSSProperties, type ChangeEvent, type DragEvent, type ReactNode } from "react";
|
||||
import ecommerceGenerated from "../../assets/ecommerce-carousel-generated.png";
|
||||
import ecommerceSlide4 from "../../assets/ecommerce-hero-carousel/slide-4.png";
|
||||
import ecommerceSlide5 from "../../assets/ecommerce-hero-carousel/slide-5.png";
|
||||
import { EcommerceProgressBar } from "./EcommerceProgressBar";
|
||||
|
||||
const OSS_MUBAN = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/muban";
|
||||
const ecommerceGenerated = `${OSS_MUBAN}/ecommerce-carousel-generated.png`;
|
||||
const ecommerceSlide4 = `${OSS_MUBAN}/slide-4.png`;
|
||||
const ecommerceSlide5 = `${OSS_MUBAN}/slide-5.png`;
|
||||
import ImageMentionMenu, { getImageMentionQuery, insertImageMentionValue, type MentionImageOption } from "./ImageMentionMenu";
|
||||
import EcommerceVideoWorkspace from "./EcommerceVideoWorkspace";
|
||||
import { aiGenerationClient } from "../../api/aiGenerationClient";
|
||||
@@ -1319,18 +1322,15 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
});
|
||||
|
||||
const uploadProductImages = async (): Promise<string[]> => {
|
||||
const SUPPORTED_IMAGE_TYPES = new Set(["image/jpeg", "image/png", "image/webp", "image/gif"]);
|
||||
const urls: string[] = [];
|
||||
for (const item of productImages) {
|
||||
try {
|
||||
const resp = await fetch(item.src);
|
||||
const blob = await resp.blob();
|
||||
const dataUrl = await new Promise<string>((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => resolve(String(reader.result));
|
||||
reader.onerror = () => reject(reader.error);
|
||||
reader.readAsDataURL(blob);
|
||||
});
|
||||
const { url } = await aiGenerationClient.uploadAsset({ dataUrl, name: item.name, mimeType: blob.type });
|
||||
const rawBlob = await resp.blob();
|
||||
const mimeType = SUPPORTED_IMAGE_TYPES.has(rawBlob.type) ? rawBlob.type : "image/png";
|
||||
const blob = rawBlob.type === mimeType ? rawBlob : new Blob([rawBlob], { type: mimeType });
|
||||
const { url } = await aiGenerationClient.uploadAssetBinary(blob, { name: item.name, mimeType, scope: "ecommerce-product" });
|
||||
urls.push(url);
|
||||
} catch {
|
||||
// skip images that fail to upload
|
||||
@@ -2403,6 +2403,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
</div>
|
||||
|
||||
<footer className="product-clone-panel__footer">
|
||||
{detailStatus === "generating" ? <EcommerceProgressBar status="generating" label="A+详情页" /> : null}
|
||||
<button type="button" className="product-clone-primary" disabled={!canGenerateDetail} onClick={handleDetailGenerate}>
|
||||
{detailStatus === "generating" ? <LoadingOutlined /> : null}
|
||||
{detailPrimaryLabel}
|
||||
@@ -2548,6 +2549,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
</div>
|
||||
|
||||
<footer className="product-clone-panel__footer">
|
||||
{tryOnStatus === "generating" ? <EcommerceProgressBar status="generating" label="服饰穿戴图" /> : null}
|
||||
<button type="button" className="product-clone-primary" disabled={!canGenerateTryOn} onClick={handleTryOnGenerate}>
|
||||
{tryOnStatus === "generating" ? <LoadingOutlined /> : null}
|
||||
{tryOnPrimaryLabel}
|
||||
@@ -2593,7 +2595,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
<span>{productSetPreviewCards[0].label}</span>
|
||||
</button>
|
||||
<div className="product-set-flow-arrow" aria-hidden="true" />
|
||||
<div className="product-set-card-grid">
|
||||
<div className="product-set-card-grid result-reveal">
|
||||
{productSetPreviewCards.slice(1).map((card) => (
|
||||
<button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
|
||||
<img src={card.src} alt={card.label} />
|
||||
@@ -2606,6 +2608,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
<section className="product-set-empty-preview" aria-live="polite">
|
||||
{productSetStatus === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
|
||||
<strong>{productSetStatus === "generating" ? "正在生成" : "等待生成"}</strong>
|
||||
{productSetStatus === "generating" ? <EcommerceProgressBar status="generating" label="商品套图" /> : null}
|
||||
<span>{productSetStatus === "generating" ? "AI 正在整理主图、场景、细节与卖点图。" : "上传商品原图并填写信息后,AI 将为您生成专业的电商商品图"}</span>
|
||||
</section>
|
||||
)}
|
||||
@@ -2651,7 +2654,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
<span>原图素材</span>
|
||||
</button>
|
||||
<div className="clone-ai-flow-arrow" aria-hidden="true" />
|
||||
<div className="clone-ai-result-grid">
|
||||
<div className="clone-ai-result-grid result-reveal">
|
||||
{clonePreviewCards.map((card) => (
|
||||
<button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
|
||||
<img src={card.src} alt={card.label} />
|
||||
@@ -2664,6 +2667,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
<section className="clone-ai-empty-state" aria-live="polite">
|
||||
{status === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
|
||||
<strong>{status === "generating" ? "正在生成" : "等待生成"}</strong>
|
||||
{status === "generating" ? <EcommerceProgressBar status="generating" label={`${selectedCloneOutput.label}生成`} /> : null}
|
||||
<span>
|
||||
{status === "generating"
|
||||
? `AI 正在为 ${platform} / ${market} 整理${selectedCloneOutput.label}。`
|
||||
@@ -2815,7 +2819,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
|
||||
<aside
|
||||
id={isCloneTool ? "ecommerce-clone-settings-panel" : undefined}
|
||||
className="product-clone-panel"
|
||||
className={`product-clone-panel tool-panel-enter`}
|
||||
key={activeTool}
|
||||
aria-label={`${pageLabel}参数`}
|
||||
aria-hidden={isCloneTool && isCloneSettingsCollapsed ? true : undefined}
|
||||
>
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
import { useSmoothedProgress } from "../../hooks/useSmoothedProgress";
|
||||
|
||||
interface EcommerceProgressBarProps {
|
||||
status: "idle" | "generating" | "done" | "failed" | string;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
function mapStatus(status: string): "running" | "completed" | "failed" {
|
||||
if (status === "done") return "completed";
|
||||
if (status === "failed") return "failed";
|
||||
if (status === "generating" || status === "modeling") return "running";
|
||||
return "running";
|
||||
}
|
||||
|
||||
export function EcommerceProgressBar({ status, label }: EcommerceProgressBarProps) {
|
||||
const progress = mapStatus(status) === "running" ? 50 : 100;
|
||||
const smoothed = useSmoothedProgress(progress, mapStatus(status));
|
||||
|
||||
if (status === "idle") return null;
|
||||
|
||||
return (
|
||||
<div className="ecommerce-progress-bar">
|
||||
<span className="ecommerce-progress-bar__label">{label || "AI 正在生成"}</span>
|
||||
<div className="ecommerce-progress-bar__track">
|
||||
<div className="ecommerce-progress-bar__fill" style={{ width: `${smoothed}%` }} />
|
||||
</div>
|
||||
<span className="ecommerce-progress-bar__value">{smoothed}%</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -9,7 +9,6 @@ import {
|
||||
type AdVideoUserConfig,
|
||||
} from "../../api/adVideoPlanClient";
|
||||
import { aiGenerationClient } from "../../api/aiGenerationClient";
|
||||
import { uploadAssetWithProgress } from "../../api/uploadWithProgress";
|
||||
import { waitForTask } from "../../api/taskSubscription";
|
||||
import { resolveVideoRequestModel } from "../../utils/resolveVideoModel";
|
||||
import type {
|
||||
@@ -34,12 +33,18 @@ export async function runVideoPlan(
|
||||
|
||||
onStepStart("upload");
|
||||
const imageUrls: string[] = [];
|
||||
for (const dataUrl of imageDataUrls) {
|
||||
const result = await uploadAssetWithProgress(
|
||||
{ dataUrl, scope: "ecommerce-product", mimeType: "image/png" },
|
||||
{ signal },
|
||||
);
|
||||
const SUPPORTED_IMAGE_TYPES = new Set(["image/jpeg", "image/png", "image/webp", "image/gif"]);
|
||||
for (const srcUrl of imageDataUrls) {
|
||||
try {
|
||||
const resp = await fetch(srcUrl);
|
||||
const rawBlob = await resp.blob();
|
||||
const mimeType = SUPPORTED_IMAGE_TYPES.has(rawBlob.type) ? rawBlob.type : "image/png";
|
||||
const blob = rawBlob.type === mimeType ? rawBlob : new Blob([rawBlob], { type: mimeType });
|
||||
const result = await aiGenerationClient.uploadAssetBinary(blob, { mimeType, scope: "ecommerce-product" });
|
||||
imageUrls.push(result.url);
|
||||
} catch {
|
||||
// skip images that fail to upload
|
||||
}
|
||||
}
|
||||
onStepDone("upload");
|
||||
|
||||
|
||||
@@ -9,12 +9,24 @@ import {
|
||||
} from "@ant-design/icons";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
|
||||
import WelcomeSplash from "./WelcomeSplash";
|
||||
import featureEcommerceImage from "../../assets/home-features/feature-ecommerce.jpg";
|
||||
import featureScriptImage from "../../assets/home-features/feature-script.jpg";
|
||||
import featureTokenImage from "../../assets/home-features/feature-token.jpg";
|
||||
import heroImage1 from "../../../projects/public/hero-1.png";
|
||||
import heroImage2 from "../../../projects/public/hero-2.png";
|
||||
import heroImage3 from "../../../projects/public/hero-3.png";
|
||||
import { useScrollEntrance } from "../../hooks/useScrollEntrance";
|
||||
|
||||
function ScrollEntrance({ children, className, ...rest }: { children: React.ReactNode; className?: string } & React.HTMLAttributes<HTMLElement>) {
|
||||
const { ref, isVisible } = useScrollEntrance<HTMLElement>();
|
||||
return (
|
||||
<section ref={ref} className={`${className ?? ""} scroll-entrance${isVisible ? " is-visible" : ""}`} {...rest}>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const OSS_MUBAN = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/muban";
|
||||
const heroImage1 = `${OSS_MUBAN}/hero-1.png`;
|
||||
const heroImage2 = `${OSS_MUBAN}/hero-2.png`;
|
||||
const heroImage3 = `${OSS_MUBAN}/hero-3.png`;
|
||||
const featureEcommerceImage = `${OSS_MUBAN}/feature-ecommerce.jpg`;
|
||||
const featureScriptImage = `${OSS_MUBAN}/feature-script.jpg`;
|
||||
const featureTokenImage = `${OSS_MUBAN}/feature-token.jpg`;
|
||||
|
||||
interface HomePageProps {
|
||||
onOpenGenerate: () => void;
|
||||
@@ -254,6 +266,7 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
|
||||
}}
|
||||
>
|
||||
<img src={slide.imageUrl} alt={slide.title} />
|
||||
{isActive ? <span className="omni-home__carousel-card-label slide-up-in-260">{slide.title}</span> : null}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
@@ -280,7 +293,7 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
|
||||
|
||||
<main className="omni-home__feature-pages" aria-label="OmniAI 功能介绍">
|
||||
{HOME_FEATURES.map((feature, index) => (
|
||||
<section key={feature.key} className={`omni-home__feature-page is-${feature.key}${index % 2 ? " is-alt" : ""}`}>
|
||||
<ScrollEntrance key={feature.key} className={`omni-home__feature-page is-${feature.key}${index % 2 ? " is-alt" : ""}`}>
|
||||
<div className="omni-home__feature-copy">
|
||||
<span>
|
||||
{feature.icon}
|
||||
@@ -301,10 +314,10 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
|
||||
<span key={item}>{item}</span>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</ScrollEntrance>
|
||||
))}
|
||||
|
||||
<section className="omni-home__experience" aria-label="点击体验">
|
||||
<ScrollEntrance className="omni-home__experience" aria-label="点击体验">
|
||||
<div className="omni-home__experience-copy">
|
||||
<span>
|
||||
<ThunderboltOutlined />
|
||||
@@ -335,7 +348,7 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
|
||||
体验电商生成
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</ScrollEntrance>
|
||||
</main>
|
||||
</section>
|
||||
</>
|
||||
|
||||
@@ -8,6 +8,10 @@ const MATRIX_CHARS =
|
||||
"01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン" +
|
||||
"ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+[]{};:?/\\|~`";
|
||||
|
||||
const prefersReducedMotion = typeof window !== "undefined"
|
||||
? window.matchMedia("(prefers-reduced-motion: reduce)").matches
|
||||
: false;
|
||||
|
||||
export default function WelcomeSplash({ onEnter }: WelcomeSplashProps) {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const rafRef = useRef(0);
|
||||
@@ -16,15 +20,27 @@ export default function WelcomeSplash({ onEnter }: WelcomeSplashProps) {
|
||||
|
||||
const handleEnter = useCallback(() => {
|
||||
setExiting(true);
|
||||
setTimeout(onEnter, 700);
|
||||
setTimeout(onEnter, prefersReducedMotion ? 0 : 700);
|
||||
}, [onEnter]);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setShowWelcome(true), 6000);
|
||||
const timer = setTimeout(() => setShowWelcome(true), prefersReducedMotion ? 0 : 6000);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (prefersReducedMotion) {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
ctx.fillStyle = "rgba(0, 0, 0, 0.85)";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
return;
|
||||
}
|
||||
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import {
|
||||
CameraOutlined,
|
||||
CheckOutlined,
|
||||
CheckCircleFilled,
|
||||
CloseOutlined,
|
||||
DeleteOutlined,
|
||||
EditOutlined,
|
||||
LockOutlined,
|
||||
MailOutlined,
|
||||
MobileOutlined,
|
||||
@@ -135,6 +138,48 @@ function mapAssetToSavedItem(asset: Awaited<ReturnType<typeof assetClient.list>>
|
||||
};
|
||||
}
|
||||
|
||||
function formatProfileDate(value: string | null | undefined): string {
|
||||
if (!value) return "刚刚";
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return value;
|
||||
|
||||
return new Intl.DateTimeFormat("zh-CN", {
|
||||
month: "numeric",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}).format(date);
|
||||
}
|
||||
|
||||
function formatTaskType(type: WebGenerationPreviewTask["type"]): string {
|
||||
const labels: Record<WebGenerationPreviewTask["type"], string> = {
|
||||
image: "图像",
|
||||
video: "视频",
|
||||
agent: "智能体",
|
||||
"digital-human": "数字人",
|
||||
"character-mix": "角色融合",
|
||||
};
|
||||
return labels[type] || type;
|
||||
}
|
||||
|
||||
function formatTaskStatus(status: WebGenerationPreviewTask["status"]): string {
|
||||
const labels: Record<WebGenerationPreviewTask["status"], string> = {
|
||||
queued: "排队中",
|
||||
running: "生成中",
|
||||
completed: "已完成",
|
||||
failed: "失败",
|
||||
};
|
||||
return labels[status] || status;
|
||||
}
|
||||
|
||||
function formatAssetStatus(status: string | undefined): string {
|
||||
const normalized = String(status || "").toLowerCase();
|
||||
if (normalized === "completed" || normalized === "ready" || normalized === "success") return "可用";
|
||||
if (normalized === "running" || normalized === "processing") return "处理中";
|
||||
if (normalized === "failed" || normalized === "error") return "失败";
|
||||
return status || "资产";
|
||||
}
|
||||
|
||||
function ProfilePage({
|
||||
session,
|
||||
usage,
|
||||
@@ -182,6 +227,9 @@ function ProfilePage({
|
||||
const [profileNotice, setProfileNotice] = useState<string | null>(null);
|
||||
const [localAvatarUrl, setLocalAvatarUrl] = useState(() => session?.user.avatarUrl || readLocalProfileValue(userId, "avatar"));
|
||||
const [profileBio, setProfileBio] = useState(() => session?.user.bio || readLocalProfileValue(userId, "bio"));
|
||||
const [isBioEditing, setIsBioEditing] = useState(false);
|
||||
const [bioEditBackup, setBioEditBackup] = useState("");
|
||||
const [bioStatusNotice, setBioStatusNotice] = useState<string | null>(null);
|
||||
const [bannerUrl, setBannerUrl] = useState(() => session?.user.backgroundUrl || readLocalProfileValue(userId, "background"));
|
||||
|
||||
const completedTasks = tasks.filter((task) => task.status === "completed");
|
||||
@@ -497,8 +545,29 @@ function ProfilePage({
|
||||
void syncProfilePatch({ bio: nextBio || null });
|
||||
};
|
||||
|
||||
const startBioEdit = () => {
|
||||
setBioEditBackup(profileBio);
|
||||
setBioStatusNotice(null);
|
||||
setIsBioEditing(true);
|
||||
};
|
||||
|
||||
const confirmBioEdit = () => {
|
||||
handleBioBlur();
|
||||
setIsBioEditing(false);
|
||||
setBioStatusNotice("个性签名已保存");
|
||||
};
|
||||
|
||||
const cancelBioEdit = () => {
|
||||
setProfileBio(bioEditBackup);
|
||||
setIsBioEditing(false);
|
||||
setBioStatusNotice(null);
|
||||
};
|
||||
|
||||
const renderEmptyState = (text: string, actionLabel: string, action: () => void) => (
|
||||
<div className="profile-page__empty-state">
|
||||
<span className="profile-page__empty-mark" aria-hidden="true">
|
||||
<PlusOutlined />
|
||||
</span>
|
||||
<p className="profile-page__empty-text">{text}</p>
|
||||
<button type="button" className="profile-page__empty-btn" onClick={action}>
|
||||
<PlusOutlined />
|
||||
@@ -515,12 +584,12 @@ function ProfilePage({
|
||||
<article key={task.id} className="profile-page__list-card">
|
||||
<div className="profile-page__list-card-head">
|
||||
<strong>{task.title}</strong>
|
||||
<span>{task.type}</span>
|
||||
<span>{formatTaskType(task.type)}</span>
|
||||
</div>
|
||||
<p>{task.prompt}</p>
|
||||
<div className="profile-page__list-card-meta">
|
||||
<span>{task.status}</span>
|
||||
<span>{task.createdAt}</span>
|
||||
<span>{formatTaskStatus(task.status)}</span>
|
||||
<span>{formatProfileDate(task.createdAt)}</span>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
@@ -537,7 +606,7 @@ function ProfilePage({
|
||||
<article key={project.id} className="profile-page__list-card">
|
||||
<div className="profile-page__list-card-head">
|
||||
<strong>{project.name}</strong>
|
||||
<span>{project.updatedAt}</span>
|
||||
<span>{formatProfileDate(project.updatedAt)}</span>
|
||||
{onDeleteProject ? (
|
||||
<button
|
||||
type="button"
|
||||
@@ -569,12 +638,12 @@ function ProfilePage({
|
||||
<article key={asset.id} className="profile-page__list-card">
|
||||
<div className="profile-page__list-card-head">
|
||||
<strong>{asset.name}</strong>
|
||||
<span>{asset.status}</span>
|
||||
<span>{formatAssetStatus(asset.status)}</span>
|
||||
</div>
|
||||
<p>{asset.description}</p>
|
||||
<div className="profile-page__list-card-meta">
|
||||
<span>{asset.type}</span>
|
||||
<span>{asset.updatedAt}</span>
|
||||
<span>{formatProfileDate(asset.updatedAt)}</span>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
@@ -637,15 +706,39 @@ function ProfilePage({
|
||||
</span>
|
||||
</div>
|
||||
<strong className="profile-page__username">{displayName}</strong>
|
||||
{isBioEditing ? (
|
||||
<div className="profile-page__bio-editor">
|
||||
<textarea
|
||||
className="profile-page__bio"
|
||||
value={profileBio}
|
||||
onChange={(event) => setProfileBio(event.target.value)}
|
||||
onBlur={handleBioBlur}
|
||||
placeholder={displayedBio}
|
||||
placeholder="填写一句个人签名"
|
||||
rows={2}
|
||||
maxLength={80}
|
||||
autoFocus
|
||||
/>
|
||||
<div className="profile-page__bio-actions">
|
||||
<button type="button" className="profile-page__bio-action profile-page__bio-action--save" onClick={confirmBioEdit}>
|
||||
<CheckOutlined />
|
||||
保存
|
||||
</button>
|
||||
<button type="button" className="profile-page__bio-action" onClick={cancelBioEdit}>
|
||||
<CloseOutlined />
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className={`profile-page__bio-display${profileBio.trim() ? "" : " is-empty"}`}
|
||||
onClick={startBioEdit}
|
||||
>
|
||||
<span>{displayedBio}</span>
|
||||
<EditOutlined className="profile-page__bio-edit-icon" />
|
||||
</button>
|
||||
)}
|
||||
{bioStatusNotice ? <span className="profile-page__bio-status">{bioStatusNotice}</span> : null}
|
||||
{profileNotice ? <span className="profile-page__sync-notice">{profileNotice}</span> : null}
|
||||
</div>
|
||||
|
||||
@@ -664,18 +757,21 @@ function ProfilePage({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" className="profile-page__share-btn">
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--plan">
|
||||
<ShareAltOutlined />
|
||||
{packageLabel}
|
||||
</button>
|
||||
|
||||
<button type="button" className="profile-page__share-btn" onClick={onOpenWorkbench}>
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--primary" onClick={onOpenWorkbench}>
|
||||
<PlusOutlined />
|
||||
进入工作台
|
||||
</button>
|
||||
<button type="button" className="profile-page__share-btn" onClick={onOpenCommunity}>
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--secondary" onClick={onOpenCommunity}>
|
||||
<ShareAltOutlined />
|
||||
打开社区
|
||||
</button>
|
||||
<button type="button" className="profile-page__share-btn" onClick={onLogout}>
|
||||
<button type="button" className="profile-page__share-btn profile-page__share-btn--danger" onClick={onLogout}>
|
||||
<LockOutlined />
|
||||
退出登录
|
||||
</button>
|
||||
</aside>
|
||||
@@ -731,13 +827,25 @@ function ProfilePage({
|
||||
<div className="profile-page__upload-card profile-page__upload-card--meta">
|
||||
{accountPanel === "credits" ? (
|
||||
<>
|
||||
<span>当前账号:{displayName}</span>
|
||||
<span>积分剩余:{(usage.balanceCents / 100).toFixed(2)}</span>
|
||||
<span className="profile-page__meta-item">
|
||||
<small>当前账号</small>
|
||||
<strong>{displayName}</strong>
|
||||
</span>
|
||||
<span className="profile-page__meta-item">
|
||||
<small>积分剩余</small>
|
||||
<strong>{(usage.balanceCents / 100).toFixed(2)}</strong>
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>任务总数:{tasks.length}</span>
|
||||
<span>已完成:{completedTasks.length}</span>
|
||||
<span className="profile-page__meta-item">
|
||||
<small>任务总数</small>
|
||||
<strong>{tasks.length}</strong>
|
||||
</span>
|
||||
<span className="profile-page__meta-item">
|
||||
<small>已完成</small>
|
||||
<strong>{completedTasks.length}</strong>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { CopyOutlined, DownOutlined, DownloadOutlined, FileTextOutlined, ReloadOutlined, TrophyOutlined, UploadOutlined } from "@ant-design/icons";
|
||||
import { useMemo, useRef, useState, type ChangeEvent, type KeyboardEvent } from "react";
|
||||
import { useEffect, useMemo, useRef, useState, type ChangeEvent, type KeyboardEvent } from "react";
|
||||
import { evaluateScript } from "../../api/scriptEvalClient";
|
||||
|
||||
interface ScoreDimension {
|
||||
@@ -35,9 +35,9 @@ const scoreDimensions: ScoreDimension[] = [
|
||||
{
|
||||
key: "character",
|
||||
label: "角色塑造",
|
||||
maxScore: 15,
|
||||
weight: 0.15,
|
||||
description: "人物立体度、动机合理性、弧光设计",
|
||||
maxScore: 18,
|
||||
weight: 0.18,
|
||||
description: "主角弧光、角色辨识度、动机、配角质量",
|
||||
},
|
||||
{
|
||||
key: "plot",
|
||||
@@ -63,9 +63,9 @@ const scoreDimensions: ScoreDimension[] = [
|
||||
{
|
||||
key: "content",
|
||||
label: "内容深度",
|
||||
maxScore: 15,
|
||||
weight: 0.15,
|
||||
description: "主题表达、情感共鸣、思想内核",
|
||||
maxScore: 12,
|
||||
weight: 0.12,
|
||||
description: "主题表达、情感共鸣、社会/人性洞察",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -170,6 +170,10 @@ function ScriptTokensPage() {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
console.log("[剧本评分] 页面已加载,ScriptTokensPage mounted");
|
||||
}, []);
|
||||
|
||||
const hasContent = Boolean(script.trim());
|
||||
const lineNumbers = useMemo(() => {
|
||||
const count = Math.min(160, Math.max(10, script.split(/\r\n|\r|\n/).length));
|
||||
@@ -202,14 +206,26 @@ function ScriptTokensPage() {
|
||||
};
|
||||
|
||||
const handleEvaluate = async () => {
|
||||
console.log("[剧本评测] 点击开始评测,hasContent:", hasContent, "script长度:", script.length);
|
||||
if (!hasContent) return;
|
||||
setLoading(true);
|
||||
setResult(null);
|
||||
setEvalError(null);
|
||||
try {
|
||||
console.log("[剧本评测] 开始评测,剧本长度:", script.length, "字符");
|
||||
const aiResult = await evaluateScript(script);
|
||||
console.log("[剧本评测] 评测完成,结果:", {
|
||||
总分: aiResult.totalScore,
|
||||
等级: aiResult.grade,
|
||||
维度得分: aiResult.dimensionScores,
|
||||
摘要: aiResult.summary,
|
||||
亮点: aiResult.highlights,
|
||||
问题: aiResult.issues,
|
||||
建议: aiResult.suggestions,
|
||||
});
|
||||
setResult(aiResult);
|
||||
} catch (err) {
|
||||
console.error("[剧本评测] 评测失败:", err);
|
||||
setEvalError(err instanceof Error ? err.message : "评测服务暂时不可用,请稍后重试");
|
||||
}
|
||||
setDetailsExpanded(true);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,88 @@
|
||||
import { FileTextOutlined, SoundOutlined } from "@ant-design/icons";
|
||||
import type { PromptMentionItem, PromptMentionTokenRange, ReferenceItem } from "./workbenchConstants";
|
||||
import { renderPromptPreviewNodes, getPromptMentionTokenRanges } from "./workbenchMentionUtils";
|
||||
|
||||
export { getPromptMentionTokenRanges };
|
||||
|
||||
export function findPromptMentionRangeInside(index: number, ranges: PromptMentionTokenRange[]) {
|
||||
return ranges.find((range) => index > range.start && index < range.end);
|
||||
}
|
||||
|
||||
export function findPromptMentionRangeOverlap(start: number, end: number, ranges: PromptMentionTokenRange[]) {
|
||||
return ranges.find((range) => start < range.end && end > range.start);
|
||||
}
|
||||
|
||||
export function ReferenceInlinePreview({
|
||||
item,
|
||||
}: {
|
||||
item: Pick<ReferenceItem, "kind" | "name" | "previewUrl">;
|
||||
}) {
|
||||
if ((item.kind === "image" || item.kind === "video") && item.previewUrl) {
|
||||
return item.kind === "video" ? (
|
||||
<video src={item.previewUrl} muted playsInline />
|
||||
) : (
|
||||
<img src={item.previewUrl} alt={item.name} loading="lazy" />
|
||||
);
|
||||
}
|
||||
|
||||
return item.kind === "audio" ? <SoundOutlined /> : <FileTextOutlined />;
|
||||
}
|
||||
|
||||
export function ReferencePreview({
|
||||
item,
|
||||
label,
|
||||
}: {
|
||||
item: Pick<ReferenceItem, "kind" | "name" | "previewUrl">;
|
||||
label?: string;
|
||||
}) {
|
||||
if ((item.kind === "image" || item.kind === "video") && item.previewUrl) {
|
||||
return item.kind === "video" ? (
|
||||
<video src={item.previewUrl} muted playsInline />
|
||||
) : (
|
||||
<img src={item.previewUrl} alt={item.name} loading="lazy" />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<span className="wb-composer__ref-icon">
|
||||
{item.kind === "audio" ? <SoundOutlined /> : <FileTextOutlined />}
|
||||
{label ? <span>{label}</span> : null}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function PromptPreviewLayer({
|
||||
text,
|
||||
items,
|
||||
onTokenPointerDown,
|
||||
}: {
|
||||
text: string;
|
||||
items: PromptMentionItem[];
|
||||
onTokenPointerDown?: (index: number) => void;
|
||||
}) {
|
||||
const nodes = renderPromptPreviewNodes(text, items);
|
||||
if (nodes.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="wb-composer__highlight"
|
||||
aria-hidden="true"
|
||||
onPointerDown={(event) => {
|
||||
const target =
|
||||
event.target instanceof Element
|
||||
? event.target.closest<HTMLElement>(".wb-composer__mention-inline-chip")
|
||||
: null;
|
||||
if (!target) return;
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const tokenEnd = Number(target.dataset.tokenEnd);
|
||||
if (Number.isFinite(tokenEnd)) {
|
||||
onTokenPointerDown?.(tokenEnd);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{nodes}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,264 @@
|
||||
import { DownOutlined } from "@ant-design/icons";
|
||||
import type { ReactNode } from "react";
|
||||
import type { WorkbenchOption, WorkbenchFieldGroup } from "./workbenchConstants";
|
||||
import { getRatioOptionClassName, getSettingsGridColumnsClassName } from "./workbenchReferenceUtils";
|
||||
|
||||
export function SelectChip({
|
||||
chipId,
|
||||
value,
|
||||
options,
|
||||
disabled,
|
||||
isOpen,
|
||||
onToggle,
|
||||
onClose,
|
||||
onChange,
|
||||
ariaLabel,
|
||||
direction = "up",
|
||||
}: {
|
||||
chipId: string;
|
||||
value: string;
|
||||
options: WorkbenchOption[];
|
||||
disabled?: boolean;
|
||||
isOpen: boolean;
|
||||
onToggle: () => void;
|
||||
onClose: () => void;
|
||||
onChange: (value: string) => void;
|
||||
ariaLabel?: string;
|
||||
direction?: "up" | "down";
|
||||
}) {
|
||||
const activeOption = options.find((option) => option.value === value);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`ai-workbench-select-chip${chipId.endsWith("-model") ? " ai-workbench-select-chip--model" : ""}${disabled ? " is-disabled" : ""}${isOpen ? " is-open" : ""}`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="ai-workbench-select-chip__trigger"
|
||||
onClick={onToggle}
|
||||
disabled={disabled}
|
||||
aria-label={ariaLabel}
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={isOpen}
|
||||
aria-controls={`${chipId}-listbox`}
|
||||
>
|
||||
<span className="ai-workbench-select-chip__copy">
|
||||
<span className="ai-workbench-select-chip__value">{activeOption?.label || value}</span>
|
||||
</span>
|
||||
<DownOutlined className="ai-workbench-select-chip__arrow" />
|
||||
</button>
|
||||
|
||||
{isOpen ? (
|
||||
<div
|
||||
id={`${chipId}-listbox`}
|
||||
className={`ai-workbench-select-chip__dropdown ai-workbench-select-chip__dropdown--${direction} is-open`}
|
||||
role="listbox"
|
||||
>
|
||||
{options.map((option, index) => {
|
||||
const active = option.value === value;
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
role="option"
|
||||
aria-selected={active}
|
||||
className={`ai-workbench-select-chip__option${active ? " is-active" : ""}`}
|
||||
style={{ transitionDelay: `${index * 18}ms` }}
|
||||
onClick={() => {
|
||||
onChange(option.value);
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
<span className="ai-workbench-select-chip__option-label">
|
||||
<span className="ai-workbench-select-chip__option-dot" aria-hidden="true" />
|
||||
<span className="ai-workbench-select-chip__option-copy">
|
||||
<span className="ai-workbench-select-chip__option-title">
|
||||
<span>{option.label}</span>
|
||||
{option.badge ? (
|
||||
<span className="ai-workbench-select-chip__option-badge">{option.badge}</span>
|
||||
) : null}
|
||||
</span>
|
||||
{option.description ? (
|
||||
<span className="ai-workbench-select-chip__option-desc">{option.description}</span>
|
||||
) : null}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function CompoundSelectChip({
|
||||
chipId,
|
||||
summary,
|
||||
groups,
|
||||
disabled,
|
||||
isOpen,
|
||||
onToggle,
|
||||
direction = "up",
|
||||
}: {
|
||||
chipId: string;
|
||||
summary: string;
|
||||
groups: WorkbenchFieldGroup[];
|
||||
disabled?: boolean;
|
||||
isOpen: boolean;
|
||||
onToggle: () => void;
|
||||
direction?: "up" | "down";
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={`ai-workbench-select-chip ai-workbench-select-chip--compound${disabled ? " is-disabled" : ""}${isOpen ? " is-open" : ""}`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="ai-workbench-select-chip__trigger"
|
||||
onClick={onToggle}
|
||||
disabled={disabled}
|
||||
aria-haspopup="dialog"
|
||||
aria-expanded={isOpen}
|
||||
aria-controls={`${chipId}-panel`}
|
||||
>
|
||||
<span className="ai-workbench-select-chip__copy">
|
||||
<span className="ai-workbench-select-chip__value">{summary}</span>
|
||||
</span>
|
||||
<DownOutlined className="ai-workbench-select-chip__arrow" />
|
||||
</button>
|
||||
|
||||
{isOpen ? (
|
||||
<div
|
||||
id={`${chipId}-panel`}
|
||||
className={`ai-workbench-select-chip__dropdown ai-workbench-select-chip__dropdown--compound ai-workbench-select-chip__dropdown--${direction} is-open`}
|
||||
role="dialog"
|
||||
>
|
||||
<div className="ai-workbench-settings-panel">
|
||||
{groups.map((group) => {
|
||||
const currentLabel =
|
||||
group.options.find((option) => option.value === group.value)?.label || group.value;
|
||||
const fieldKey = `${group.kind || "pill"}-${group.label}`;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={fieldKey}
|
||||
className={`ai-workbench-settings-panel__field ai-workbench-settings-panel__field--${group.kind || "pill"}`}
|
||||
>
|
||||
<div className="ai-workbench-settings-panel__head">
|
||||
<div className="ai-workbench-settings-panel__title-wrap">
|
||||
{group.icon ? (
|
||||
<span className="ai-workbench-settings-panel__title-icon">{group.icon}</span>
|
||||
) : null}
|
||||
<div className="ai-workbench-settings-panel__title-copy">
|
||||
<div className="ai-workbench-settings-panel__title">{group.label}</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="ai-workbench-settings-panel__current">{currentLabel}</span>
|
||||
</div>
|
||||
|
||||
<fieldset
|
||||
className={`ai-workbench-settings-panel__grid ai-workbench-settings-panel__grid--${group.kind || "pill"} ${getSettingsGridColumnsClassName(group.columns || 3)}`}
|
||||
>
|
||||
<legend className="ai-workbench-visually-hidden">{group.label}</legend>
|
||||
{group.options.map((option) => {
|
||||
const active = option.value === group.value;
|
||||
return (
|
||||
<button
|
||||
key={`${fieldKey}-${option.value}`}
|
||||
type="button"
|
||||
aria-pressed={active}
|
||||
className={`ai-workbench-settings-panel__option ai-workbench-settings-panel__option--${group.kind || "pill"}${active ? " is-active" : ""}`}
|
||||
onClick={() => group.onChange(option.value)}
|
||||
>
|
||||
{group.kind === "ratio" ? (
|
||||
<span className="ai-workbench-ratio-option">
|
||||
<span
|
||||
className={`ai-workbench-ratio-option__preview ${getRatioOptionClassName(option.value)}`}
|
||||
>
|
||||
<span className="ai-workbench-ratio-option__frame" />
|
||||
</span>
|
||||
<span className="ai-workbench-ratio-option__label">{option.label}</span>
|
||||
</span>
|
||||
) : (
|
||||
<span>{option.label}</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</fieldset>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function InlineOptionChip({
|
||||
chipId,
|
||||
value,
|
||||
options,
|
||||
icon,
|
||||
disabled,
|
||||
isOpen,
|
||||
onToggle,
|
||||
onClose,
|
||||
onChange,
|
||||
direction = "up",
|
||||
}: {
|
||||
chipId: string;
|
||||
value: string;
|
||||
options: WorkbenchOption[];
|
||||
icon?: ReactNode;
|
||||
disabled?: boolean;
|
||||
isOpen: boolean;
|
||||
onToggle: () => void;
|
||||
onClose: () => void;
|
||||
onChange: (value: string) => void;
|
||||
direction?: "up" | "down";
|
||||
}) {
|
||||
const activeOption = options.find((option) => option.value === value);
|
||||
|
||||
return (
|
||||
<div className={`wb-inline-chip${isOpen ? " is-open" : ""}${disabled ? " is-disabled" : ""}`}>
|
||||
<button
|
||||
type="button"
|
||||
className="wb-inline-chip__trigger"
|
||||
onClick={onToggle}
|
||||
disabled={disabled}
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={isOpen}
|
||||
aria-controls={`${chipId}-listbox`}
|
||||
>
|
||||
{icon ? <span className="wb-inline-chip__icon">{icon}</span> : null}
|
||||
<span>{activeOption?.label || value}</span>
|
||||
</button>
|
||||
{isOpen ? (
|
||||
<div id={`${chipId}-listbox`} className={`wb-inline-chip__menu wb-inline-chip__menu--${direction}`} role="listbox">
|
||||
{options.map((option) => {
|
||||
const active = option.value === value;
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
role="option"
|
||||
aria-selected={active}
|
||||
className={`wb-inline-chip__option${active ? " is-active" : ""}`}
|
||||
onClick={() => {
|
||||
onChange(option.value);
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
<span>{option.label}</span>
|
||||
{active ? <span className="wb-inline-chip__check">✓</span> : null}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,404 @@
|
||||
import { isServerRequestError } from "../../api/serverConnection";
|
||||
import { ENTERPRISE_VIDEO_MODEL_OPTIONS } from "../../utils/enterpriseVideoPolicy";
|
||||
import type { WebGenerationPreviewTask } from "../../types";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
export type WorkbenchMode = "chat" | "image" | "video";
|
||||
export type ToolbarMenuId =
|
||||
| "studio-mode"
|
||||
| "image-model"
|
||||
| "image-settings"
|
||||
| "image-grid-mode"
|
||||
| "video-model"
|
||||
| "video-mode"
|
||||
| "video-ratio"
|
||||
| "video-duration"
|
||||
| "video-quality"
|
||||
| null;
|
||||
export type ReferenceKind = "image" | "video" | "audio" | "file";
|
||||
|
||||
export interface WorkbenchOption {
|
||||
value: string;
|
||||
label: string;
|
||||
description?: string;
|
||||
badge?: string;
|
||||
}
|
||||
|
||||
export interface WorkbenchFieldGroup {
|
||||
label: string;
|
||||
value: string;
|
||||
options: WorkbenchOption[];
|
||||
onChange: (value: string) => void;
|
||||
kind?: "ratio" | "pill";
|
||||
columns?: 2 | 3 | 4;
|
||||
icon?: ReactNode;
|
||||
}
|
||||
|
||||
export interface ReferenceItem {
|
||||
id: string;
|
||||
kind: ReferenceKind;
|
||||
name: string;
|
||||
previewUrl?: string;
|
||||
file?: File;
|
||||
remoteUrl?: string;
|
||||
token: string;
|
||||
fingerprint?: string;
|
||||
originalSize?: number;
|
||||
compressed?: boolean;
|
||||
}
|
||||
|
||||
export type PromptMentionItem = Pick<ReferenceItem, "token" | "id" | "name" | "kind" | "previewUrl" | "remoteUrl">;
|
||||
|
||||
export interface PromptMentionTokenRange {
|
||||
start: number;
|
||||
end: number;
|
||||
item: PromptMentionItem;
|
||||
}
|
||||
|
||||
export interface ChatAttachment {
|
||||
kind: ReferenceKind;
|
||||
name: string;
|
||||
token: string;
|
||||
previewUrl?: string;
|
||||
remoteUrl?: string;
|
||||
}
|
||||
|
||||
export interface ChatMessage {
|
||||
id: string;
|
||||
role: "user" | "assistant";
|
||||
author: string;
|
||||
mode: WorkbenchMode;
|
||||
body: string;
|
||||
prompt?: string;
|
||||
createdAt: string;
|
||||
status?: "thinking" | "queued" | "completed" | "failed";
|
||||
taskId?: string;
|
||||
conversationId?: number;
|
||||
taskProgress?: number;
|
||||
taskStatusLabel?: string;
|
||||
attachments?: ChatAttachment[];
|
||||
resultUrl?: string;
|
||||
resultType?: "image" | "video";
|
||||
resultOriginalUrl?: string;
|
||||
resultOssKey?: string;
|
||||
resultMimeType?: string;
|
||||
result?: {
|
||||
title: string;
|
||||
summary: string;
|
||||
specs: string[];
|
||||
};
|
||||
}
|
||||
|
||||
export interface DeleteDialogState {
|
||||
projectId: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export interface WorkbenchKeepaliveTask {
|
||||
taskId: string;
|
||||
conversationId: number;
|
||||
assistantMessageId: string;
|
||||
concurrencySlotId?: string;
|
||||
operation?: "generation" | "video-super-resolution";
|
||||
mode: "image" | "video";
|
||||
modelLabel: string;
|
||||
specs: string[];
|
||||
referenceCount: number;
|
||||
progress: number;
|
||||
statusLabel: string;
|
||||
startedAt: number;
|
||||
}
|
||||
|
||||
export interface WorkbenchResultActionPayload {
|
||||
title: string;
|
||||
prompt: string;
|
||||
resultUrl: string;
|
||||
resultType: "image" | "video";
|
||||
taskId?: string;
|
||||
resultOriginalUrl?: string;
|
||||
resultOssKey?: string;
|
||||
resultMimeType?: string;
|
||||
}
|
||||
|
||||
// ─── Constants ───────────────────────────────────────────────────────
|
||||
|
||||
export const MESSAGE_STORAGE_KEY = "omniai-web-workbench-messages";
|
||||
export const ACTIVE_CONVERSATION_STORAGE_KEY = "omniai-web-workbench-active-conversation-id";
|
||||
export const PROMPT_HISTORY_STORAGE_KEY = "omniai-web-workbench-prompt-history";
|
||||
export const TASK_KEEPALIVE_STORAGE_KEY = "omniai-web-workbench-active-tasks";
|
||||
export const WORKBENCH_TASK_STALE_MS = 6 * 60 * 60 * 1000;
|
||||
export const WORKBENCH_TASK_MAX_POLL_FAILURES = 10;
|
||||
export const REFERENCE_IMAGE_COMPRESS_THRESHOLD = 10 * 1024 * 1024;
|
||||
export const REFERENCE_IMAGE_MAX_DIMENSION = 1920;
|
||||
export const REFERENCE_IMAGE_INITIAL_QUALITY = 0.84;
|
||||
export const REFERENCE_IMAGE_MIN_QUALITY = 0.62;
|
||||
export const CHAT_MODEL = "gemini-3.1-pro";
|
||||
|
||||
export const CHAT_NATURAL_SYSTEM_PROMPT = [
|
||||
"你是 OmniAI 的创作协作助手,像一个正在一起工作的同伴一样说话。",
|
||||
`默认使用自然、简洁的中文,不要官腔,不要机械套话,不要频繁使用“首先、其次、最后”这种模板。`,
|
||||
"先直接回应用户当前关心的点;需要拆解时,用短段落或少量要点,把下一步说清楚。",
|
||||
`不说“作为一个 AI”,不做空泛总结,不编造不确定的信息。`,
|
||||
"当用户在排查问题或调整页面时,优先给判断、原因和可执行的下一步。",
|
||||
].join("\n");
|
||||
|
||||
export const CHAT_TURN_STYLE_REMINDER = [
|
||||
"本轮回答继续保持像正常人协作的口吻:",
|
||||
`不要以"好的,以下是""当然可以""根据你的需求"这类模板开头。`,
|
||||
"能一句话说清就先一句话说清;需要展开时再分点。",
|
||||
"少用宏大标题,多用具体判断和下一步动作。",
|
||||
].join("\n");
|
||||
|
||||
export const NON_CONVERSATIONAL_ASSISTANT_TEXT = new Set([
|
||||
"我先看一下上下文,马上接上。",
|
||||
"我在整理,马上说清楚。",
|
||||
"正在读取当前模式、模型、规格和参考素材,准备创建生成任务。",
|
||||
"Task submitted, generating...",
|
||||
"任务已提交,正在生成中...",
|
||||
"AI 正在整理回答...",
|
||||
]);
|
||||
|
||||
export const MODE_META: Record<
|
||||
WorkbenchMode,
|
||||
{
|
||||
label: string;
|
||||
menuLabel: string;
|
||||
accent: string;
|
||||
placeholder: string;
|
||||
description: string;
|
||||
subline: string;
|
||||
taskType: WebGenerationPreviewTask["type"];
|
||||
}
|
||||
> = {
|
||||
chat: {
|
||||
label: "OmniChat",
|
||||
menuLabel: "对话模式",
|
||||
accent: "#6be7ff",
|
||||
placeholder: "把创意、脚本、素材要求或工作流目标发给我",
|
||||
description: "直接对话、拆解需求、整理上下文,并把想法推进到可执行结果。",
|
||||
subline: "适合连续协作、问答推演、脚本整理和工作流规划。",
|
||||
taskType: "agent",
|
||||
},
|
||||
image: {
|
||||
label: "图像生成",
|
||||
menuLabel: "图像生成",
|
||||
accent: "#00b1cc",
|
||||
placeholder: "描述角色、场景、商品图、首帧或尾帧画面",
|
||||
description: "在同一界面完成文生图、图生图、参考图管理和候选筛选。",
|
||||
subline: "模型、比例、清晰度和多宫格保持在同一条工作链里。",
|
||||
taskType: "image",
|
||||
},
|
||||
video: {
|
||||
label: "视频生成",
|
||||
menuLabel: "视频生成",
|
||||
accent: "#2197ff",
|
||||
placeholder: "描述成片目标、人物、场景、镜头运动、节奏、比例和时长",
|
||||
description: "用统一工作台管理起始帧、动作描述、镜头节奏和视频输出。",
|
||||
subline: "支持首尾帧、参考素材、比例、时长和画质等关键设置。",
|
||||
taskType: "video",
|
||||
},
|
||||
};
|
||||
|
||||
export const MODE_OPTIONS: WorkbenchOption[] = (Object.keys(MODE_META) as WorkbenchMode[]).map((mode) => ({
|
||||
value: mode,
|
||||
label: MODE_META[mode].menuLabel,
|
||||
description: MODE_META[mode].subline,
|
||||
}));
|
||||
|
||||
export const IMAGE_MODEL_OPTIONS: WorkbenchOption[] = [
|
||||
{ value: "wan2.7-image-pro", label: "wan 2.7 Pro 4K · 0.20 积分" },
|
||||
{ value: "wan2.7-image", label: "wan 2.7 · 0.20 积分" },
|
||||
{ value: "gpt-image-2", label: "GPT-Image-2 · 0.20 积分" },
|
||||
{ value: "gpt-image-2-vip", label: "GPT-Image-2 VIP · 0.20 积分" },
|
||||
{ value: "nano-banana-pro", label: "Nano Banana Pro · 0.20 积分" },
|
||||
{ value: "nano-banana-2", label: "Nano Banana 2 · 0.20 积分" },
|
||||
{ value: "nano-banana-fast", label: "Nano Banana · 0.20 积分" },
|
||||
];
|
||||
|
||||
export const VIDEO_MODEL_OPTIONS: WorkbenchOption[] = ENTERPRISE_VIDEO_MODEL_OPTIONS.map((option) => ({ ...option }));
|
||||
export const RATIO_OPTIONS: WorkbenchOption[] = [
|
||||
{ value: "21:9", label: "21:9" },
|
||||
{ value: "16:9", label: "16:9" },
|
||||
{ value: "4:3", label: "4:3" },
|
||||
{ value: "1:1", label: "1:1" },
|
||||
{ value: "3:4", label: "3:4" },
|
||||
{ value: "9:16", label: "9:16" },
|
||||
];
|
||||
|
||||
export const GRID_MODE_OPTIONS: WorkbenchOption[] = [
|
||||
{ value: "single", label: "单图" },
|
||||
{ value: "grid-4", label: "4 宫格" },
|
||||
{ value: "grid-9", label: "9 宫格" },
|
||||
{ value: "grid-25", label: "25 宫格" },
|
||||
];
|
||||
|
||||
export const VIDEO_FRAME_OPTIONS: WorkbenchOption[] = [
|
||||
{ value: "omni", label: "全能参考" },
|
||||
{ value: "start-end", label: "首尾帧" },
|
||||
];
|
||||
|
||||
export const VIDEO_DURATION_OPTIONS: WorkbenchOption[] = [
|
||||
{ value: "4", label: "4s" },
|
||||
{ value: "5", label: "5s" },
|
||||
{ value: "6", label: "6s" },
|
||||
{ value: "7", label: "7s" },
|
||||
{ value: "8", label: "8s" },
|
||||
{ value: "9", label: "9s" },
|
||||
{ value: "10", label: "10s" },
|
||||
{ value: "11", label: "11s" },
|
||||
{ value: "12", label: "12s" },
|
||||
{ value: "13", label: "13s" },
|
||||
{ value: "14", label: "14s" },
|
||||
{ value: "15", label: "15s" },
|
||||
];
|
||||
|
||||
// ─── Shared helpers ──────────────────────────────────────────────────
|
||||
|
||||
export function getCachedRole(): string {
|
||||
try {
|
||||
const raw = window.localStorage.getItem("omniai-web-session");
|
||||
if (!raw) return "";
|
||||
return String(JSON.parse(raw)?.user?.role || "").trim().toLowerCase();
|
||||
} catch { return ""; }
|
||||
}
|
||||
|
||||
export function getSessionUserId(): string {
|
||||
try {
|
||||
const raw = window.localStorage.getItem("omniai-web-session");
|
||||
if (!raw) return "anon";
|
||||
const id = JSON.parse(raw)?.user?.id;
|
||||
return id ? String(id) : "anon";
|
||||
} catch { return "anon"; }
|
||||
}
|
||||
|
||||
export function userKey(base: string): string {
|
||||
return `${base}:${getSessionUserId()}`;
|
||||
}
|
||||
|
||||
export function createId(prefix: string) {
|
||||
return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
|
||||
}
|
||||
|
||||
export function formatWorkbenchTimestamp(date = new Date()): string {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
const hours = String(date.getHours()).padStart(2, "0");
|
||||
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
||||
}
|
||||
|
||||
export function parseWorkbenchTimestampValue(value: string): number {
|
||||
const matched = value.match(/^(\d{4})-(\d{2})-(\d{2})\s+(\d{2}):(\d{2})/);
|
||||
if (matched) {
|
||||
const [, year, month, day, hours, minutes] = matched;
|
||||
return new Date(Number(year), Number(month) - 1, Number(day), Number(hours), Number(minutes)).getTime();
|
||||
}
|
||||
const parsed = Date.parse(value);
|
||||
return Number.isFinite(parsed) ? parsed : NaN;
|
||||
}
|
||||
|
||||
export function buildChatAttachments(items: ReferenceItem[]): ChatAttachment[] {
|
||||
return items.map((item) => ({
|
||||
kind: item.kind,
|
||||
name: item.name,
|
||||
token: item.token,
|
||||
previewUrl: item.remoteUrl || item.previewUrl,
|
||||
remoteUrl: item.remoteUrl,
|
||||
}));
|
||||
}
|
||||
|
||||
export function buildNaturalChatHistoryMessages(messages: ChatMessage[]): Array<{ role: "user" | "assistant"; content: string }> {
|
||||
return messages
|
||||
.filter((message) => {
|
||||
const body = message.body.trim();
|
||||
if (!body) return false;
|
||||
if (message.role === "user") return true;
|
||||
if (message.mode !== "chat") return false;
|
||||
if (message.status === "thinking" || message.status === "queued") return false;
|
||||
if (NON_CONVERSATIONAL_ASSISTANT_TEXT.has(body)) return false;
|
||||
return true;
|
||||
})
|
||||
.slice(-10)
|
||||
.map((message) => ({
|
||||
role: message.role,
|
||||
content: message.body.trim(),
|
||||
}));
|
||||
}
|
||||
|
||||
export function getErrorText(error: unknown): string {
|
||||
return error instanceof Error ? error.message : String(error || "Unknown error");
|
||||
}
|
||||
|
||||
export function isAuthFailure(error: unknown): boolean {
|
||||
return isServerRequestError(error) && (error.status === 401 || error.status === 403);
|
||||
}
|
||||
|
||||
export function isInsufficientBalance(error: unknown): boolean {
|
||||
if (isServerRequestError(error) && error.status === 402) return true;
|
||||
const msg = error instanceof Error ? error.message : String(error || "");
|
||||
return /余额不足|积分不足|insufficient.?balance/i.test(msg);
|
||||
}
|
||||
|
||||
export function isInsufficientBalanceMessage(msg: string | undefined | null): boolean {
|
||||
if (!msg) return false;
|
||||
return /余额不足|积分不足|insufficient.?balance/i.test(msg);
|
||||
}
|
||||
|
||||
export function isTransientMessage(message: ChatMessage): boolean {
|
||||
return (message.status === "thinking" || message.status === "queued") && !message.taskId;
|
||||
}
|
||||
|
||||
export function getPersistableMessages(messages: ChatMessage[]): ChatMessage[] {
|
||||
return messages.filter((message, index) => {
|
||||
if (isTransientMessage(message)) return false;
|
||||
if (message.role === "assistant") return true;
|
||||
const nextMessage = messages[index + 1];
|
||||
return (
|
||||
nextMessage?.role === "assistant" &&
|
||||
nextMessage.conversationId === message.conversationId &&
|
||||
!isTransientMessage(nextMessage)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function shouldPersistPatch(patch: Partial<ChatMessage>): boolean {
|
||||
return (
|
||||
patch.status === "completed" ||
|
||||
patch.status === "failed" ||
|
||||
typeof patch.taskId === "string" ||
|
||||
typeof patch.resultUrl === "string" ||
|
||||
typeof patch.resultOssKey === "string" ||
|
||||
typeof patch.resultOriginalUrl === "string" ||
|
||||
typeof patch.resultMimeType === "string"
|
||||
);
|
||||
}
|
||||
|
||||
export function buildAssistantResult(
|
||||
mode: WorkbenchMode,
|
||||
model: string,
|
||||
specs: string[],
|
||||
referenceCount: number,
|
||||
): ChatMessage["result"] {
|
||||
if (mode === "image") {
|
||||
return {
|
||||
title: "图像任务已创建",
|
||||
summary: referenceCount > 0 ? "已携带参考图,后续结果会进入资产库和画布。" : "已按当前模型和规格进入图像生成流程。",
|
||||
specs,
|
||||
};
|
||||
}
|
||||
|
||||
if (mode === "video") {
|
||||
return {
|
||||
title: "视频任务已创建",
|
||||
summary: referenceCount > 0 ? "已携带参考素材,生成后可继续拆分镜头并发布案例。" : "已按当前镜头设置进入视频生成流程。",
|
||||
specs,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: "Agent 已接管",
|
||||
summary: "我会把当前输入整理成脚本、分镜、素材需求和可复制的工作流节点。",
|
||||
specs: [model, ...specs],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import type { ReactNode } from "react";
|
||||
import type { PromptMentionItem, PromptMentionTokenRange } from "./workbenchConstants";
|
||||
|
||||
export function escapeRegExp(value: string) {
|
||||
return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
||||
}
|
||||
|
||||
export function normalizePromptWhitespace(value: string) {
|
||||
return value.replace(/[ \t]{2,}/g, " ").trim();
|
||||
}
|
||||
|
||||
export function removePromptMentionTokenFromText(text: string, token: string) {
|
||||
if (!token) return text;
|
||||
const escapedToken = escapeRegExp(token);
|
||||
return normalizePromptWhitespace(
|
||||
text.replace(new RegExp(`(^|\\s)${escapedToken}(?=\\s|$)`, "g"), " "),
|
||||
);
|
||||
}
|
||||
|
||||
export function removePromptTextRange(text: string, start: number, end: number) {
|
||||
return normalizePromptWhitespace(`${text.slice(0, start)}${text.slice(end)}`);
|
||||
}
|
||||
|
||||
export function getPromptMentionTokenRanges(text: string, items: PromptMentionItem[]): PromptMentionTokenRange[] {
|
||||
if (!text || !items.length) return [];
|
||||
const ranges: PromptMentionTokenRange[] = [];
|
||||
for (const item of items) {
|
||||
const idx = text.indexOf(item.token);
|
||||
if (idx >= 0) {
|
||||
ranges.push({ start: idx, end: idx + item.token.length, item });
|
||||
}
|
||||
}
|
||||
return ranges.sort((a, b) => a.start - b.start);
|
||||
}
|
||||
|
||||
export function renderPromptPreviewNodes(
|
||||
text: string,
|
||||
items: PromptMentionItem[],
|
||||
): ReactNode[] {
|
||||
if (!text) return [];
|
||||
|
||||
const tokens = Array.from(new Set(items.map((item) => item.token))).sort((a, b) => b.length - a.length);
|
||||
const tokenMap = new Map(items.map((item) => [item.token, item]));
|
||||
const nodes: ReactNode[] = [];
|
||||
let cursor = 0;
|
||||
let index = 0;
|
||||
|
||||
while (cursor < text.length) {
|
||||
const matchedToken = tokens.find((token) => text.startsWith(token, cursor));
|
||||
|
||||
if (matchedToken) {
|
||||
const matchedItem = tokenMap.get(matchedToken);
|
||||
if (matchedItem) {
|
||||
nodes.push(
|
||||
<span key={`mention-${index}`} className="wb-prompt-mention-chip" data-token={matchedItem.token}>
|
||||
{matchedItem.token}
|
||||
</span>,
|
||||
);
|
||||
cursor += matchedToken.length;
|
||||
index += 1;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
const nextTokenStart = tokens.reduce((closest, token) => {
|
||||
const pos = text.indexOf(token, cursor + 1);
|
||||
return pos >= 0 && (closest < 0 || pos < closest) ? pos : closest;
|
||||
}, -1);
|
||||
|
||||
const end = nextTokenStart >= 0 ? nextTokenStart : text.length;
|
||||
const segment = text.slice(cursor, end);
|
||||
if (segment) {
|
||||
nodes.push(<span key={`text-${index}`}>{segment}</span>);
|
||||
index += 1;
|
||||
}
|
||||
cursor = end;
|
||||
}
|
||||
|
||||
return nodes;
|
||||
}
|
||||
@@ -0,0 +1,211 @@
|
||||
import {
|
||||
REFERENCE_IMAGE_COMPRESS_THRESHOLD,
|
||||
REFERENCE_IMAGE_MAX_DIMENSION,
|
||||
REFERENCE_IMAGE_INITIAL_QUALITY,
|
||||
REFERENCE_IMAGE_MIN_QUALITY,
|
||||
type WorkbenchMode,
|
||||
type ReferenceKind,
|
||||
type ReferenceItem,
|
||||
type WorkbenchOption,
|
||||
} from "./workbenchConstants";
|
||||
import { resolvePreUploadedUrl } from "../../api/referenceUploadService";
|
||||
|
||||
export function getRatioOptionClassName(value: string) {
|
||||
return `ai-workbench-ratio-option__preview--${value.replace(":", "-")}`;
|
||||
}
|
||||
|
||||
export function getSettingsGridColumnsClassName(columns: 2 | 3 | 4 = 3) {
|
||||
return `ai-workbench-settings-panel__grid--cols-${columns}`;
|
||||
}
|
||||
|
||||
export function getReferenceAccept(mode: WorkbenchMode, videoFrameMode?: string) {
|
||||
if (mode === "chat") return ".docx,.txt,.md,.xlsx,.xls,.png,.jpg,.jpeg,.gif,.webp";
|
||||
if (mode === "image") return "image/*";
|
||||
if (videoFrameMode === "start-end") return "image/*";
|
||||
return "image/*,video/mp4,video/quicktime,video/webm,video/x-msvideo,.mp4,.mov,.webm,.avi,audio/mpeg,audio/mp3,audio/wav,audio/x-wav,.mp3,.wav";
|
||||
}
|
||||
|
||||
export function getReferenceUploadLabel(mode: WorkbenchMode) {
|
||||
if (mode === "video") return "参考内容";
|
||||
if (mode === "image") return "参考图";
|
||||
return "附件";
|
||||
}
|
||||
|
||||
export function getReferenceLimit(mode: WorkbenchMode, videoFrameMode?: string) {
|
||||
if (mode === "video" && videoFrameMode === "start-end") return 2;
|
||||
if (mode === "video") return 12;
|
||||
if (mode === "image") return 9;
|
||||
return 4;
|
||||
}
|
||||
|
||||
export function getReferenceKindLabel(kind: ReferenceKind) {
|
||||
if (kind === "image") return "图片";
|
||||
if (kind === "video") return "视频";
|
||||
if (kind === "audio") return "音频";
|
||||
return "附件";
|
||||
}
|
||||
|
||||
export function getReferenceEmptyCopy(mode: WorkbenchMode) {
|
||||
if (mode === "video") return "上传最多12个参考素材,首尾帧模式仅保留2张图片,输入文字或 @ 引用内容,自由组合图、文、音、视频多元素";
|
||||
if (mode === "image") return "最多上传9张参考图,输入文字或 @ 引用内容,控制角色、风格和构图";
|
||||
return "上传附件后可用 @ 引用,帮助 Agent 读取上下文";
|
||||
}
|
||||
|
||||
export function hexToRgbTriplet(hex: string) {
|
||||
const normalized = hex.replace("#", "");
|
||||
const full = normalized.length === 3
|
||||
? normalized
|
||||
.split("")
|
||||
.map((char) => `${char}${char}`)
|
||||
.join("")
|
||||
: normalized;
|
||||
|
||||
const value = Number.parseInt(full, 16);
|
||||
const r = (value >> 16) & 255;
|
||||
const g = (value >> 8) & 255;
|
||||
const b = value & 255;
|
||||
return `${r}, ${g}, ${b}`;
|
||||
}
|
||||
|
||||
export function inferReferenceKind(file: File, mode: WorkbenchMode): ReferenceKind {
|
||||
if (file.type.startsWith("image/")) return "image";
|
||||
if (file.type.startsWith("video/")) return "video";
|
||||
if (file.type.startsWith("audio/")) return "audio";
|
||||
return mode === "chat" ? "file" : "image";
|
||||
}
|
||||
|
||||
export function disposeReferencePreview(item: Pick<ReferenceItem, "previewUrl">) {
|
||||
if (item.previewUrl) URL.revokeObjectURL(item.previewUrl);
|
||||
}
|
||||
|
||||
export function fileToDataUrl(file: File) {
|
||||
return new Promise<string>((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
typeof reader.result === "string" ? resolve(reader.result) : reject(new Error("Unable to read reference file"));
|
||||
};
|
||||
reader.onerror = () => reject(reader.error || new Error("Unable to read reference file"));
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
export function bytesToHex(buffer: ArrayBuffer) {
|
||||
return Array.from(new Uint8Array(buffer))
|
||||
.map((byte) => byte.toString(16).padStart(2, "0"))
|
||||
.join("");
|
||||
}
|
||||
|
||||
export async function buildReferenceFingerprint(file: File, kind: ReferenceKind) {
|
||||
if (kind === "image" && window.crypto?.subtle) {
|
||||
const digest = await window.crypto.subtle.digest("SHA-256", await file.arrayBuffer());
|
||||
return `image:${bytesToHex(digest)}`;
|
||||
}
|
||||
return `${kind}:${file.name}:${file.size}:${file.lastModified}:${file.type}`;
|
||||
}
|
||||
|
||||
export function canCompressReferenceImage(file: File) {
|
||||
return (
|
||||
file.size > REFERENCE_IMAGE_COMPRESS_THRESHOLD &&
|
||||
file.type.startsWith("image/") &&
|
||||
!/svg|gif/i.test(file.type)
|
||||
);
|
||||
}
|
||||
|
||||
function canvasToBlob(canvas: HTMLCanvasElement, type: string, quality: number) {
|
||||
return new Promise<Blob | null>((resolve) => {
|
||||
canvas.toBlob(resolve, type, quality);
|
||||
});
|
||||
}
|
||||
|
||||
function getCompressedImageName(fileName: string) {
|
||||
const baseName = fileName.replace(/\.[^.]+$/, "");
|
||||
return `${baseName || "reference"}.jpg`;
|
||||
}
|
||||
|
||||
export async function compressReferenceImageIfNeeded(file: File) {
|
||||
if (!canCompressReferenceImage(file)) {
|
||||
return { file, compressed: false };
|
||||
}
|
||||
|
||||
try {
|
||||
const bitmap = await createImageBitmap(file);
|
||||
const scale = Math.min(1, REFERENCE_IMAGE_MAX_DIMENSION / Math.max(bitmap.width, bitmap.height));
|
||||
let width = Math.max(1, Math.round(bitmap.width * scale));
|
||||
let height = Math.max(1, Math.round(bitmap.height * scale));
|
||||
const canvas = document.createElement("canvas");
|
||||
const context = canvas.getContext("2d");
|
||||
if (!context) {
|
||||
bitmap.close();
|
||||
return { file, compressed: false };
|
||||
}
|
||||
|
||||
const render = () => {
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
context.fillStyle = "#ffffff";
|
||||
context.fillRect(0, 0, width, height);
|
||||
context.drawImage(bitmap, 0, 0, width, height);
|
||||
};
|
||||
|
||||
const encode = async () => {
|
||||
let quality = REFERENCE_IMAGE_INITIAL_QUALITY;
|
||||
let nextBlob = await canvasToBlob(canvas, "image/jpeg", quality);
|
||||
while (nextBlob && nextBlob.size > REFERENCE_IMAGE_COMPRESS_THRESHOLD && quality > REFERENCE_IMAGE_MIN_QUALITY) {
|
||||
quality = Math.max(REFERENCE_IMAGE_MIN_QUALITY, quality - 0.08);
|
||||
nextBlob = await canvasToBlob(canvas, "image/jpeg", quality);
|
||||
}
|
||||
return nextBlob;
|
||||
};
|
||||
|
||||
render();
|
||||
let blob = await encode();
|
||||
while (blob && blob.size > REFERENCE_IMAGE_COMPRESS_THRESHOLD && Math.max(width, height) > 960) {
|
||||
width = Math.max(1, Math.round(width * 0.82));
|
||||
height = Math.max(1, Math.round(height * 0.82));
|
||||
render();
|
||||
blob = await encode();
|
||||
}
|
||||
bitmap.close();
|
||||
|
||||
if (!blob || blob.size >= file.size) {
|
||||
return { file, compressed: false };
|
||||
}
|
||||
|
||||
return {
|
||||
file: new File([blob], getCompressedImageName(file.name), {
|
||||
type: "image/jpeg",
|
||||
lastModified: file.lastModified,
|
||||
}),
|
||||
compressed: true,
|
||||
};
|
||||
} catch {
|
||||
return { file, compressed: false };
|
||||
}
|
||||
}
|
||||
|
||||
export function buildReferenceToken(kind: ReferenceKind, index: number) {
|
||||
if (kind === "image") return `@图片${index}`;
|
||||
if (kind === "video") return `@视频${index}`;
|
||||
if (kind === "audio") return `@音频${index}`;
|
||||
return `@附件${index}`;
|
||||
}
|
||||
|
||||
export async function resolveReferenceUrls(items: ReferenceItem[]): Promise<string[]> {
|
||||
const tasks = items.map(async (item) => {
|
||||
if (item.remoteUrl) return item.remoteUrl;
|
||||
if (!item.file) {
|
||||
if (item.previewUrl && /^https?:\/\//i.test(item.previewUrl)) {
|
||||
return item.previewUrl;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
const url = await resolvePreUploadedUrl(item.file, item.name, item.fingerprint);
|
||||
if (url) {
|
||||
item.remoteUrl = url;
|
||||
return url;
|
||||
}
|
||||
return null;
|
||||
});
|
||||
const results = await Promise.all(tasks);
|
||||
return results.filter((url): url is string => url !== null);
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
import {
|
||||
userKey,
|
||||
MESSAGE_STORAGE_KEY,
|
||||
ACTIVE_CONVERSATION_STORAGE_KEY,
|
||||
PROMPT_HISTORY_STORAGE_KEY,
|
||||
TASK_KEEPALIVE_STORAGE_KEY,
|
||||
WORKBENCH_TASK_STALE_MS,
|
||||
type ChatMessage,
|
||||
type WorkbenchKeepaliveTask,
|
||||
} from "./workbenchConstants";
|
||||
import { parseWorkbenchTimestampValue } from "./workbenchConstants";
|
||||
|
||||
export function readStoredMessages(): ChatMessage[] {
|
||||
if (typeof window === "undefined") return [];
|
||||
try {
|
||||
const raw = window.localStorage.getItem(userKey(MESSAGE_STORAGE_KEY));
|
||||
if (!raw) return [];
|
||||
const parsed = JSON.parse(raw) as unknown;
|
||||
if (!Array.isArray(parsed)) return [];
|
||||
return parsed.filter((item): item is ChatMessage => {
|
||||
if (!item || typeof item !== "object") return false;
|
||||
const candidate = item as Partial<ChatMessage>;
|
||||
return (
|
||||
typeof candidate.id === "string" &&
|
||||
(candidate.role === "user" || candidate.role === "assistant") &&
|
||||
typeof candidate.body === "string"
|
||||
);
|
||||
});
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export function readStoredPromptHistory(): string[] {
|
||||
if (typeof window === "undefined") return [];
|
||||
try {
|
||||
const raw = window.localStorage.getItem(userKey(PROMPT_HISTORY_STORAGE_KEY));
|
||||
if (!raw) return [];
|
||||
const parsed = JSON.parse(raw) as unknown;
|
||||
return Array.isArray(parsed) ? parsed.filter((item): item is string => typeof item === "string") : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export function readStoredActiveConversationId(messages: ChatMessage[] = []): number | null {
|
||||
if (typeof window === "undefined") return null;
|
||||
try {
|
||||
const raw = window.localStorage.getItem(userKey(ACTIVE_CONVERSATION_STORAGE_KEY));
|
||||
const value = raw ? Number(raw) : NaN;
|
||||
if (Number.isFinite(value) && value > 0) return value;
|
||||
} catch {
|
||||
// Active conversation recovery is optional.
|
||||
}
|
||||
for (let index = messages.length - 1; index >= 0; index -= 1) {
|
||||
const candidate = messages[index]?.conversationId;
|
||||
if (typeof candidate === "number" && Number.isFinite(candidate) && candidate > 0) {
|
||||
return candidate;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function persistActiveConversationId(conversationId: number | null) {
|
||||
if (typeof window === "undefined") return;
|
||||
try {
|
||||
if (conversationId && Number.isFinite(conversationId)) {
|
||||
window.localStorage.setItem(userKey(ACTIVE_CONVERSATION_STORAGE_KEY), String(conversationId));
|
||||
} else {
|
||||
window.localStorage.removeItem(userKey(ACTIVE_CONVERSATION_STORAGE_KEY));
|
||||
}
|
||||
} catch {
|
||||
// Local history is a convenience; generation still works without it.
|
||||
}
|
||||
}
|
||||
|
||||
export function persistMessages(messages: ChatMessage[]) {
|
||||
try {
|
||||
window.localStorage.setItem(userKey(MESSAGE_STORAGE_KEY), JSON.stringify(messages.slice(-60)));
|
||||
} catch {
|
||||
// Local history is a convenience; generation still works without it.
|
||||
}
|
||||
}
|
||||
|
||||
export function clearWorkbenchLocalState() {
|
||||
if (typeof window === "undefined") return;
|
||||
try {
|
||||
window.localStorage.removeItem(userKey(MESSAGE_STORAGE_KEY));
|
||||
window.localStorage.removeItem(userKey(ACTIVE_CONVERSATION_STORAGE_KEY));
|
||||
window.localStorage.removeItem(userKey(TASK_KEEPALIVE_STORAGE_KEY));
|
||||
} catch {
|
||||
// Logout cleanup should never block the UI.
|
||||
}
|
||||
}
|
||||
|
||||
export function persistPromptHistory(history: string[]) {
|
||||
try {
|
||||
window.localStorage.setItem(userKey(PROMPT_HISTORY_STORAGE_KEY), JSON.stringify(history.slice(0, 20)));
|
||||
} catch {
|
||||
// Local history is optional.
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Keepalive task persistence ──────────────────────────────────────
|
||||
|
||||
export function buildRecoverableTaskFromMessage(conversationId: number, message: ChatMessage): WorkbenchKeepaliveTask | null {
|
||||
if (message.role !== "assistant") return null;
|
||||
if (!(message.status === "thinking" && message.taskId && message.mode !== "chat")) return null;
|
||||
if (message.mode !== "image" && message.mode !== "video") return null;
|
||||
if (Date.now() - parseWorkbenchTimestampValue(message.createdAt) > WORKBENCH_TASK_STALE_MS) return null;
|
||||
|
||||
const specs = message.result?.specs || [];
|
||||
return {
|
||||
taskId: message.taskId,
|
||||
conversationId,
|
||||
assistantMessageId: message.id,
|
||||
operation: message.taskStatusLabel?.includes("超分") ? "video-super-resolution" : "generation",
|
||||
mode: message.mode,
|
||||
modelLabel: specs[0] || message.author || message.mode,
|
||||
specs,
|
||||
referenceCount: message.attachments?.length || 0,
|
||||
progress: Math.max(10, Math.min(99, Number(message.taskProgress || 30))),
|
||||
statusLabel: message.taskStatusLabel || "任务恢复中...",
|
||||
startedAt: parseWorkbenchTimestampValue(message.createdAt) || Date.now(),
|
||||
};
|
||||
}
|
||||
|
||||
export function readStoredKeepaliveTasks(): Record<string, WorkbenchKeepaliveTask> {
|
||||
if (typeof window === "undefined") return {};
|
||||
try {
|
||||
const raw = window.localStorage.getItem(userKey(TASK_KEEPALIVE_STORAGE_KEY));
|
||||
if (!raw) return {};
|
||||
const parsed = JSON.parse(raw) as unknown;
|
||||
if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {};
|
||||
|
||||
const tasks: Record<string, WorkbenchKeepaliveTask> = {};
|
||||
Object.values(parsed as Record<string, Partial<WorkbenchKeepaliveTask>>).forEach((task) => {
|
||||
if (
|
||||
task &&
|
||||
typeof task.taskId === "string" &&
|
||||
typeof task.conversationId === "number" &&
|
||||
typeof task.assistantMessageId === "string" &&
|
||||
(task.mode === "image" || task.mode === "video")
|
||||
) {
|
||||
tasks[task.taskId] = {
|
||||
taskId: task.taskId,
|
||||
conversationId: task.conversationId,
|
||||
assistantMessageId: task.assistantMessageId,
|
||||
concurrencySlotId: typeof task.concurrencySlotId === "string" ? task.concurrencySlotId : undefined,
|
||||
operation: task.operation === "video-super-resolution" ? "video-super-resolution" : "generation",
|
||||
mode: task.mode,
|
||||
modelLabel: task.modelLabel || task.mode,
|
||||
specs: Array.isArray(task.specs) ? task.specs.filter((item): item is string => typeof item === "string") : [],
|
||||
referenceCount: Number(task.referenceCount || 0),
|
||||
progress: Number(task.progress || 0),
|
||||
statusLabel: task.statusLabel || "Generating...",
|
||||
startedAt: Number(task.startedAt || Date.now()),
|
||||
};
|
||||
}
|
||||
});
|
||||
return tasks;
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
export function persistKeepaliveTasks(tasks: Record<string, WorkbenchKeepaliveTask>) {
|
||||
try {
|
||||
window.localStorage.setItem(userKey(TASK_KEEPALIVE_STORAGE_KEY), JSON.stringify(tasks));
|
||||
} catch {
|
||||
// Task restore is best-effort.
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
export function useScrollEntrance<T extends HTMLElement>(threshold = 0.15) {
|
||||
const ref = useRef<T>(null);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
|
||||
if (typeof IntersectionObserver === "undefined") {
|
||||
setIsVisible(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
setIsVisible(true);
|
||||
observer.unobserve(el);
|
||||
}
|
||||
},
|
||||
{ threshold },
|
||||
);
|
||||
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, [threshold]);
|
||||
|
||||
return { ref, isVisible };
|
||||
}
|
||||
@@ -48,6 +48,7 @@
|
||||
background: var(--surface-elevated);
|
||||
box-shadow: var(--shadow-elevated);
|
||||
backdrop-filter: none;
|
||||
transform-origin: top right;
|
||||
}
|
||||
|
||||
.profile-popover__head {
|
||||
|
||||
@@ -34,11 +34,118 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 260ms variant for carousel labels */
|
||||
.slide-up-in-260 {
|
||||
animation: slide-up-in 260ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
|
||||
}
|
||||
|
||||
@keyframes backdrop-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Popover / panel entrance utilities */
|
||||
.panel-enter {
|
||||
animation: scale-in 150ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both,
|
||||
slide-up-in 150ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
|
||||
}
|
||||
|
||||
.backdrop-enter {
|
||||
animation: backdrop-in 140ms ease both;
|
||||
}
|
||||
|
||||
/* Heart toggle spring animation */
|
||||
@keyframes heart-pop {
|
||||
0% { transform: scale(1); }
|
||||
40% { transform: scale(1.3); }
|
||||
70% { transform: scale(0.9); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.heart-animate {
|
||||
animation: heart-pop 420ms var(--ease-spring, cubic-bezier(0.34, 1.2, 0.64, 1)) both;
|
||||
}
|
||||
|
||||
/* Result reveal stagger for generation output grids */
|
||||
.result-reveal > * {
|
||||
opacity: 0;
|
||||
animation: slide-up-in 320ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
|
||||
}
|
||||
|
||||
.result-reveal > *:nth-child(1) { animation-delay: 0ms; }
|
||||
.result-reveal > *:nth-child(2) { animation-delay: 80ms; }
|
||||
.result-reveal > *:nth-child(3) { animation-delay: 160ms; }
|
||||
.result-reveal > *:nth-child(4) { animation-delay: 240ms; }
|
||||
.result-reveal > *:nth-child(5) { animation-delay: 320ms; }
|
||||
.result-reveal > *:nth-child(n+6) { animation-delay: 400ms; }
|
||||
|
||||
/* Scroll-triggered entrance: hidden until revealed by IntersectionObserver */
|
||||
.scroll-entrance {
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
transition: opacity 480ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
|
||||
transform 480ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
|
||||
}
|
||||
|
||||
.scroll-entrance.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.scroll-entrance.is-visible > * {
|
||||
animation: slide-up-in 380ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
|
||||
}
|
||||
|
||||
.scroll-entrance.is-visible > *:nth-child(1) { animation-delay: 60ms; }
|
||||
.scroll-entrance.is-visible > *:nth-child(2) { animation-delay: 140ms; }
|
||||
.scroll-entrance.is-visible > *:nth-child(3) { animation-delay: 220ms; }
|
||||
|
||||
/* Chat message entrance animation */
|
||||
@keyframes chat-message-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-message-enter {
|
||||
animation: chat-message-in 220ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
|
||||
}
|
||||
|
||||
/* AnimatedPanel: CSS transition-based enter/exit for popovers */
|
||||
.animated-panel {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(8px);
|
||||
transition:
|
||||
opacity 140ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
|
||||
transform 140ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.animated-panel.is-visible {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Ecommerce tool panel crossfade on tool switch */
|
||||
@keyframes tool-panel-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-panel-enter {
|
||||
animation: tool-panel-fade-in 180ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
|
||||
}
|
||||
|
||||
/* Stagger utility: apply to parent, children get delayed entrance */
|
||||
.motion-stagger > * {
|
||||
animation: list-item-in 280ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
|
||||
|
||||
@@ -15,3 +15,56 @@
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Directional page transitions */
|
||||
.page-motion--enter.is-forward {
|
||||
animation: page-slide-in-forward 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
|
||||
}
|
||||
|
||||
.page-motion--enter.is-backward {
|
||||
animation: page-slide-in-backward 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
|
||||
}
|
||||
|
||||
.page-motion--exit.is-forward {
|
||||
animation: page-slide-out-forward 180ms ease both;
|
||||
}
|
||||
|
||||
.page-motion--exit.is-backward {
|
||||
animation: page-slide-out-backward 180ms ease both;
|
||||
}
|
||||
|
||||
@keyframes page-slide-in-forward {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes page-slide-in-backward {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes page-slide-out-forward {
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(-16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes page-slide-out-backward {
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(16px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,7 +29,8 @@
|
||||
width: 40%;
|
||||
height: 24px;
|
||||
border-radius: 8px;
|
||||
background: var(--surface-elevated, #222);
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
|
||||
background-size: 220% 100%;
|
||||
animation: skeleton-shimmer 1.4s ease infinite;
|
||||
}
|
||||
|
||||
@@ -42,7 +43,8 @@
|
||||
flex: 1;
|
||||
height: 140px;
|
||||
border-radius: 14px;
|
||||
background: var(--surface-elevated, #222);
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
|
||||
background-size: 220% 100%;
|
||||
animation: skeleton-shimmer 1.4s ease infinite;
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
@@ -51,16 +53,12 @@
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
border-radius: 14px;
|
||||
background: var(--surface-elevated, #222);
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
|
||||
background-size: 220% 100%;
|
||||
animation: skeleton-shimmer 1.4s ease infinite;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
@keyframes skeleton-shimmer {
|
||||
0%, 100% { opacity: 0.4; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.page-transition-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@@ -9,6 +9,48 @@
|
||||
font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* Ecommerce generation progress bar */
|
||||
.ecommerce-progress-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 16px;
|
||||
border-radius: var(--radius-sm, 10px);
|
||||
background: rgba(var(--accent-rgb, 0, 255, 136), 0.08);
|
||||
border: 1px solid rgba(var(--accent-rgb, 0, 255, 136), 0.18);
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.ecommerce-progress-bar__label {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--fg-muted, #aeb8b1);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ecommerce-progress-bar__track {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background: rgba(var(--accent-rgb, 0, 255, 136), 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ecommerce-progress-bar__fill {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: var(--accent, #00ff88);
|
||||
transition: width 80ms linear;
|
||||
}
|
||||
|
||||
.ecommerce-progress-bar__value {
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
color: var(--accent, #00ff88);
|
||||
min-width: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Product set page: target dark two-column workspace with floating detail input. */
|
||||
.product-clone-page[data-tool="set"] {
|
||||
display: block;
|
||||
|
||||
+92
-16
@@ -148,37 +148,83 @@
|
||||
min-width: 0;
|
||||
min-height: 72px;
|
||||
padding: 0 28px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-inset);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(180deg, rgba(20, 23, 26, 0.72) 0%, rgba(15, 17, 19, 0.84) 100%);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.04) inset,
|
||||
0 2px 8px rgba(0, 0, 0, 0.28);
|
||||
color: var(--fg-body);
|
||||
cursor: pointer;
|
||||
font-size: 17px;
|
||||
font-weight: 850;
|
||||
transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
transition:
|
||||
border-color 240ms ease,
|
||||
background 240ms ease,
|
||||
color 240ms ease,
|
||||
transform 240ms cubic-bezier(0.34, 1.2, 0.64, 1),
|
||||
box-shadow 240ms ease;
|
||||
}
|
||||
|
||||
.omni-home__entry .anticon {
|
||||
font-size: 18px;
|
||||
font-size: 19px;
|
||||
transition: color 240ms ease, transform 240ms ease;
|
||||
}
|
||||
|
||||
.omni-home__entry:hover {
|
||||
border-color: var(--border-default);
|
||||
background: var(--bg-hover);
|
||||
border-color: rgba(255, 255, 255, 0.16);
|
||||
background: linear-gradient(180deg, rgba(28, 32, 36, 0.78) 0%, rgba(18, 22, 25, 0.88) 100%);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.06) inset,
|
||||
0 0 24px rgba(var(--accent-rgb), 0.06),
|
||||
0 4px 16px rgba(0, 0, 0, 0.36);
|
||||
color: #ffffff;
|
||||
transform: translateY(-1px);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.omni-home__entry:hover .anticon {
|
||||
color: var(--accent);
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.omni-home__entry:active {
|
||||
transform: translateY(0) scale(0.97);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.02) inset,
|
||||
0 1px 4px rgba(0, 0, 0, 0.32);
|
||||
transition-duration: 80ms;
|
||||
}
|
||||
|
||||
.omni-home__entry--primary {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent);
|
||||
color: var(--dg-button-text, #061014);
|
||||
border-color: rgba(var(--accent-rgb), 0.48);
|
||||
background: linear-gradient(180deg, rgba(0, 255, 136, 0.22) 0%, rgba(0, 220, 118, 0.14) 100%), var(--accent);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.12) inset,
|
||||
0 0 28px rgba(var(--accent-rgb), 0.18),
|
||||
0 2px 12px rgba(0, 0, 0, 0.28);
|
||||
color: #061014;
|
||||
}
|
||||
|
||||
.omni-home__entry--primary:hover {
|
||||
border-color: var(--accent-hover, var(--accent));
|
||||
background: var(--accent-hover, var(--accent));
|
||||
color: var(--dg-button-text, #061014);
|
||||
border-color: rgba(var(--accent-rgb), 0.64);
|
||||
background: linear-gradient(180deg, rgba(0, 255, 136, 0.28) 0%, rgba(0, 230, 124, 0.18) 100%), var(--accent-hover);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.16) inset,
|
||||
0 0 40px rgba(var(--accent-rgb), 0.28),
|
||||
0 6px 24px rgba(0, 0, 0, 0.36);
|
||||
color: #061014;
|
||||
}
|
||||
|
||||
.omni-home__entry--primary .anticon {
|
||||
color: #061014;
|
||||
}
|
||||
|
||||
.omni-home__entry--primary:hover .anticon {
|
||||
color: #061014;
|
||||
transform: scale(1.12);
|
||||
}
|
||||
|
||||
.omni-home__carousel {
|
||||
@@ -405,6 +451,21 @@
|
||||
transform: translateZ(20px) scale(1.02);
|
||||
}
|
||||
|
||||
.omni-home__carousel-card-label {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 14px;
|
||||
z-index: 2;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(var(--accent-rgb, 0, 255, 136), 0.16);
|
||||
border: 1px solid rgba(var(--accent-rgb, 0, 255, 136), 0.24);
|
||||
color: var(--fg-body, #f3f5f2);
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.omni-home__carousel-card:hover {
|
||||
box-shadow:
|
||||
0 28px 58px rgb(0 0 0 / 34%),
|
||||
@@ -570,6 +631,13 @@
|
||||
object-position: center;
|
||||
transform: none;
|
||||
transform-origin: center;
|
||||
transition: transform 280ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
|
||||
filter 280ms ease;
|
||||
}
|
||||
|
||||
.omni-home__feature-visual:hover img {
|
||||
transform: scale(1.03);
|
||||
filter: saturate(1.1) contrast(1.06) brightness(1.04);
|
||||
}
|
||||
|
||||
.omni-home__feature-stats {
|
||||
@@ -721,6 +789,14 @@
|
||||
padding: 16px 18px;
|
||||
box-shadow: 0 20px 46px rgb(0 0 0 / 26%);
|
||||
backdrop-filter: blur(12px);
|
||||
cursor: pointer;
|
||||
transition: transform 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
|
||||
box-shadow 200ms ease;
|
||||
}
|
||||
|
||||
.omni-home__experience-route:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 24px 52px rgb(0 0 0 / 32%);
|
||||
}
|
||||
|
||||
.omni-home__experience-route b {
|
||||
|
||||
@@ -14271,19 +14271,6 @@
|
||||
}
|
||||
|
||||
/* ─── Page Motion Animation ─── */
|
||||
.page-motion {
|
||||
animation: pixel-page-enter 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes pixel-page-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Workbench Page Layout Overrides ─── */
|
||||
.ai-workbench-page.is-active .ai-workbench-shell {
|
||||
grid-template-columns: 1fr auto;
|
||||
|
||||
@@ -3400,6 +3400,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 520px;
|
||||
max-height: 520px;
|
||||
padding: 18px 22px;
|
||||
border: none;
|
||||
outline: none;
|
||||
@@ -3409,6 +3410,7 @@
|
||||
font-size: 14px;
|
||||
line-height: 1.9;
|
||||
resize: none;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.script-eval-v4-text-input::placeholder {
|
||||
@@ -4268,6 +4270,11 @@
|
||||
.script-eval-v4-text-shell,
|
||||
.script-eval-v4-text-input {
|
||||
min-height: calc(100vh - 422px);
|
||||
max-height: calc(100vh - 422px);
|
||||
}
|
||||
|
||||
.script-eval-v4-text-input {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.script-eval-v4-score-card {
|
||||
|
||||
@@ -135,6 +135,11 @@
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
transition: opacity 160ms ease;
|
||||
}
|
||||
|
||||
.brand-lockup:active {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.brand-lockup__mark {
|
||||
@@ -303,6 +308,15 @@
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.creator-button:active,
|
||||
.member-button:active,
|
||||
.profile-button:active,
|
||||
.icon-button:active,
|
||||
.theme-toggle:active {
|
||||
transform: scale(0.97);
|
||||
transition-duration: 80ms;
|
||||
}
|
||||
|
||||
.profile-button--guest:hover {
|
||||
background: rgba(var(--accent-rgb), 0.88);
|
||||
color: #07100b;
|
||||
@@ -481,6 +495,15 @@
|
||||
box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.34);
|
||||
}
|
||||
|
||||
@keyframes nav-activate-pulse {
|
||||
0% { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.34), 0 0 8px rgba(var(--accent-rgb), 0.25); }
|
||||
100% { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.34); }
|
||||
}
|
||||
|
||||
.floating-nav__button.nav-just-activated {
|
||||
animation: nav-activate-pulse 320ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
|
||||
}
|
||||
|
||||
.floating-nav__button:hover .floating-nav__label,
|
||||
.floating-nav__button:focus-visible .floating-nav__label,
|
||||
.floating-nav__button.is-active .floating-nav__label {
|
||||
|
||||
@@ -3990,6 +3990,13 @@
|
||||
isolation: isolate;
|
||||
break-inside: avoid;
|
||||
aspect-ratio: 4 / 5;
|
||||
transition: transform 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
|
||||
box-shadow 200ms ease;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--tile-0,
|
||||
@@ -5387,6 +5394,787 @@
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
|
||||
/* Profile center: commercial SaaS polish while preserving the dark-green theme. */
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page {
|
||||
background:
|
||||
radial-gradient(circle at 18% 0%, rgba(var(--accent-rgb), 0.08), transparent 28%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 220px),
|
||||
var(--dg-page);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner {
|
||||
height: 214px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(var(--accent-rgb), 0.11), transparent 34%),
|
||||
linear-gradient(180deg, var(--bg-elevated), var(--dg-page));
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner.has-image {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner-overlay {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(13, 13, 15, 0.18), rgba(13, 13, 15, 0.78)),
|
||||
radial-gradient(circle at 50% 100%, rgba(var(--accent-rgb), 0.12), transparent 34%);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn {
|
||||
height: 36px;
|
||||
padding: 0 14px;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
background: rgba(10, 12, 13, 0.66);
|
||||
backdrop-filter: blur(14px);
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
min-width: 104px;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn .anticon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner .profile-page__banner-btn {
|
||||
top: 18px;
|
||||
right: max(18px, calc((100vw - 1240px) / 2 + 18px));
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn:hover {
|
||||
border-color: rgba(var(--accent-rgb), 0.45);
|
||||
background: rgba(12, 18, 16, 0.86);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__body {
|
||||
grid-template-columns: 292px minmax(0, 1fr);
|
||||
gap: 34px;
|
||||
width: min(1240px, calc(100% - 56px));
|
||||
margin-top: -72px;
|
||||
padding-bottom: 56px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-item,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__upload-card {
|
||||
border-color: rgba(255, 255, 255, 0.075);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
|
||||
var(--bg-surface);
|
||||
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar {
|
||||
gap: 18px;
|
||||
padding: 22px;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar-head {
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -7px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(var(--accent-rgb), 0.22), transparent 68%);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring .profile-page__avatar,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar {
|
||||
position: relative;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border: 4px solid var(--dg-page);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(var(--accent-rgb), 0.26), rgba(var(--accent-rgb), 0.08)),
|
||||
var(--bg-elevated);
|
||||
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-color: rgba(255, 255, 255, 0.18);
|
||||
background: rgba(8, 10, 11, 0.68);
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: opacity var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-badge {
|
||||
right: -3px;
|
||||
bottom: 10px;
|
||||
z-index: 4;
|
||||
border: 2px solid var(--bg-surface);
|
||||
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring:hover .profile-page__avatar-edit,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring:active .profile-page__avatar-edit,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring:hover .profile-page__avatar-edit:hover,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit:focus-visible {
|
||||
background: rgba(8, 10, 11, 0.82);
|
||||
transform: translate(-50%, -50%) scale(1.02);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__username {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
font-size: 21px;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.25;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio {
|
||||
width: 100%;
|
||||
min-height: 56px;
|
||||
padding: 10px 12px;
|
||||
border-color: rgba(255, 255, 255, 0.07);
|
||||
background: rgba(255, 255, 255, 0.025);
|
||||
color: var(--fg-muted);
|
||||
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio:focus {
|
||||
background: var(--bg-elevated);
|
||||
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-editor {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
min-width: 68px;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.075);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.025);
|
||||
color: var(--fg-muted);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action:hover {
|
||||
border-color: rgba(255, 255, 255, 0.14);
|
||||
background: rgba(255, 255, 255, 0.045);
|
||||
color: var(--fg-body);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action--save {
|
||||
border-color: rgba(var(--accent-rgb), 0.34);
|
||||
background: rgba(var(--accent-rgb), 0.1);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action--save:hover {
|
||||
border-color: rgba(var(--accent-rgb), 0.5);
|
||||
background: rgba(var(--accent-rgb), 0.16);
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.055);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(255, 255, 255, 0.018);
|
||||
color: var(--fg-muted);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display span {
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display.is-empty span {
|
||||
color: var(--fg-soft);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-edit-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: rgba(var(--accent-rgb), 0.08);
|
||||
color: var(--accent);
|
||||
font-size: 12px;
|
||||
opacity: 0.78;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:hover,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:focus-visible {
|
||||
border-color: rgba(var(--accent-rgb), 0.28);
|
||||
background: rgba(var(--accent-rgb), 0.055);
|
||||
color: var(--fg-body);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:hover .profile-page__bio-edit-icon,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:focus-visible .profile-page__bio-edit-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-status {
|
||||
color: var(--accent);
|
||||
font-size: 11px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__counts {
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
padding: 12px 0;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.065);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.065);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__count strong {
|
||||
font-size: 19px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__count span {
|
||||
margin-top: 4px;
|
||||
color: var(--fg-soft);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn {
|
||||
min-height: 40px;
|
||||
padding: 0 15px;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--plan {
|
||||
justify-content: center;
|
||||
border-color: rgba(var(--accent-rgb), 0.24);
|
||||
background: rgba(var(--accent-rgb), 0.07);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--primary {
|
||||
border-color: rgba(var(--accent-rgb), 0.62);
|
||||
background: var(--accent);
|
||||
color: var(--dg-button-text);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--secondary {
|
||||
background: rgba(255, 255, 255, 0.025);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--danger {
|
||||
margin-top: 2px;
|
||||
border-color: transparent;
|
||||
color: var(--fg-soft);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--primary:hover {
|
||||
border-color: var(--accent-hover);
|
||||
background: var(--accent-hover);
|
||||
color: var(--dg-button-text);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--danger:hover {
|
||||
border-color: rgba(255, 90, 95, 0.36);
|
||||
background: rgba(255, 90, 95, 0.1);
|
||||
color: #ff9a9d;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__main {
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs {
|
||||
min-height: 52px;
|
||||
margin-bottom: 2px;
|
||||
padding: 4px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.065);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(255, 255, 255, 0.022);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button {
|
||||
min-height: 42px;
|
||||
padding: 0 18px;
|
||||
border: 0;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button.is-active {
|
||||
background: rgba(var(--accent-rgb), 0.12);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button.is-active::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__section {
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__section-label {
|
||||
margin-bottom: 0;
|
||||
color: var(--fg-body);
|
||||
font-size: 15px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
|
||||
gap: 14px;
|
||||
max-height: min(470px, 48vh);
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding-right: 6px;
|
||||
scrollbar-color: rgba(var(--accent-rgb), 0.42) transparent;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar-track,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar-thumb,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar-thumb {
|
||||
border-radius: 999px;
|
||||
background: rgba(var(--accent-rgb), 0.28);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar-thumb:hover,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(var(--accent-rgb), 0.42);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card {
|
||||
min-height: 136px;
|
||||
padding: 16px;
|
||||
border-radius: var(--radius-md);
|
||||
transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card:hover,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-item:hover {
|
||||
border-color: rgba(var(--accent-rgb), 0.28);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(var(--accent-rgb), 0.045), transparent),
|
||||
var(--bg-surface);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head strong {
|
||||
min-width: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head span {
|
||||
padding: 4px 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(var(--accent-rgb), 0.1);
|
||||
color: var(--accent);
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card p {
|
||||
display: -webkit-box;
|
||||
min-height: 38px;
|
||||
overflow: hidden;
|
||||
color: var(--fg-muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.55;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-meta {
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.055);
|
||||
color: var(--fg-soft);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state {
|
||||
position: relative;
|
||||
min-height: 280px;
|
||||
overflow: hidden;
|
||||
padding: 46px 28px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.09), transparent 42%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__empty-mark {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.22);
|
||||
border-radius: 50%;
|
||||
background: rgba(var(--accent-rgb), 0.08);
|
||||
color: var(--accent);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__empty-text {
|
||||
position: relative;
|
||||
color: var(--fg-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__empty-btn {
|
||||
position: relative;
|
||||
min-height: 38px;
|
||||
border-color: rgba(var(--accent-rgb), 0.32);
|
||||
background: rgba(var(--accent-rgb), 0.08);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-list {
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
gap: 14px;
|
||||
max-height: min(470px, 48vh);
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding-right: 6px;
|
||||
scrollbar-color: rgba(var(--accent-rgb), 0.42) transparent;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-item {
|
||||
min-height: 74px;
|
||||
padding: 10px;
|
||||
border-radius: var(--radius-md);
|
||||
transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-item:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-item img,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-thumb {
|
||||
flex-basis: 70px;
|
||||
width: 70px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__review-item strong {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-bar {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs {
|
||||
gap: 4px;
|
||||
padding: 3px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.065);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs button {
|
||||
min-height: 32px;
|
||||
padding: 0 14px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs button.is-active {
|
||||
background: rgba(var(--accent-rgb), 0.1);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__upload-card--meta {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__meta-item {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
padding: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.055);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(255, 255, 255, 0.025);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__meta-item small {
|
||||
overflow: hidden;
|
||||
color: var(--fg-soft);
|
||||
font-size: 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__meta-item strong {
|
||||
overflow: hidden;
|
||||
color: var(--fg-body);
|
||||
font-size: 17px;
|
||||
line-height: 1.25;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__body {
|
||||
grid-template-columns: 1fr;
|
||||
width: min(100% - 36px, 760px);
|
||||
margin-top: -54px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner {
|
||||
height: 152px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner .profile-page__banner-btn {
|
||||
top: 10px;
|
||||
right: 12px;
|
||||
width: 36px;
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
border-radius: 999px;
|
||||
font-size: 0;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn .anticon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__body {
|
||||
width: min(100% - 28px, 560px);
|
||||
margin-top: -32px;
|
||||
padding-bottom: 88px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar {
|
||||
gap: 13px;
|
||||
padding: 18px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar-head {
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring .profile-page__avatar,
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
border-width: 3px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-badge {
|
||||
bottom: 6px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__username {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio {
|
||||
min-height: 46px;
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display {
|
||||
min-height: 42px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display span {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__counts {
|
||||
padding: 9px 0;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__count strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn {
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button {
|
||||
flex: 0 0 auto;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__upload-card--meta {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
max-height: min(312px, 46vh);
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card {
|
||||
min-height: 112px;
|
||||
padding: 9px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head strong {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head span {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 3px 7px;
|
||||
font-size: 10px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card p {
|
||||
min-height: 30px;
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-meta {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding-top: 8px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ecommerce generation page: keep its carousel and composer independent from
|
||||
the community carousel rules that share class names. */
|
||||
.web-shell[data-ui-theme="dark-green"] .ecommerce-landing-page {
|
||||
|
||||
+7
-3
@@ -1,8 +1,11 @@
|
||||
import react from "@vitejs/plugin-react";
|
||||
import { compression } from "vite-plugin-compression2";
|
||||
import { defineConfig } from "vite";
|
||||
import { defineConfig, loadEnv } from "vite";
|
||||
|
||||
export default defineConfig({
|
||||
export default defineConfig(({ mode }) => {
|
||||
const env = loadEnv(mode, process.cwd(), "");
|
||||
|
||||
return {
|
||||
plugins: [
|
||||
react(),
|
||||
compression({ algorithms: ["gzip", "brotliCompress"], threshold: 1024 }),
|
||||
@@ -12,7 +15,7 @@ export default defineConfig({
|
||||
host: "127.0.0.1",
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://47.110.225.76:3600",
|
||||
target: env.VITE_DEV_PROXY || "http://47.110.225.76:3600",
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
@@ -42,4 +45,5 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user