merge: official v1.5.4 release
This commit is contained in:
Codex
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Button, Input } from "antd";
|
||||
import { Check, LibraryBig, LoaderCircle, Plus, Search, Sparkles, Users } from "lucide-react";
|
||||
import { Check, LoaderCircle, Plus, Search, Sparkles, Users } from "lucide-react";
|
||||
|
||||
import { AppModal } from "@/components/ui/product/app-modal";
|
||||
import type { CanvasTheme } from "@/lib/canvas-theme";
|
||||
@@ -45,16 +45,20 @@ export function CanvasAgentSkillLibraryModal({
|
||||
onInstall,
|
||||
onLoadMore,
|
||||
}: CanvasAgentSkillLibraryModalProps) {
|
||||
const [tab, setTab] = useState<SkillLibraryTab>("enabled");
|
||||
const [tab, setTab] = useState<SkillLibraryTab>("market");
|
||||
const listRef = useRef<HTMLDivElement>(null);
|
||||
const loadMoreRef = useRef<HTMLDivElement>(null);
|
||||
const wasOpenRef = useRef(false);
|
||||
const selectedCount = selectedSkillIds.length;
|
||||
|
||||
useEffect(() => {
|
||||
if (open && !wasOpenRef.current) setTab(selectedCount > 0 ? "enabled" : "installed");
|
||||
if (open && !wasOpenRef.current) setTab("market");
|
||||
wasOpenRef.current = open;
|
||||
}, [open, selectedCount]);
|
||||
}, [open]);
|
||||
|
||||
useEffect(() => {
|
||||
listRef.current?.scrollTo({ top: 0 });
|
||||
}, [category, search, tab]);
|
||||
|
||||
const visibleSkills = useMemo(() => {
|
||||
const keyword = search.trim().toLocaleLowerCase("zh-CN");
|
||||
@@ -86,16 +90,21 @@ export function CanvasAgentSkillLibraryModal({
|
||||
const categoryItems = useMemo(() => {
|
||||
const unique = new Map<string, SkillCategory>();
|
||||
categories.forEach((item) => {
|
||||
if (item.value && item.label) unique.set(item.value, item);
|
||||
if (item.value && item.value !== "all" && item.label) unique.set(item.value, item);
|
||||
});
|
||||
return [{ value: "all", label: "全部" }, ...unique.values()];
|
||||
return [...unique.values()];
|
||||
}, [categories]);
|
||||
|
||||
const emptyText = tab === "enabled"
|
||||
? "本轮还没有启用 Skill，可在“已加入”中选择"
|
||||
? "本轮还没有启用技能，可在“我的技能”中选择"
|
||||
: tab === "installed"
|
||||
? "还没有匹配的已加入 Skill，可前往“发现 Skills”添加"
|
||||
: "没有匹配的公开 Skill，换个关键词或分类试试";
|
||||
? "还没有匹配的已加入技能，可前往“全部”添加"
|
||||
: "没有匹配的公开技能，换个关键词或分类试试";
|
||||
|
||||
const changeTab = (value: SkillLibraryTab) => {
|
||||
setTab(value);
|
||||
onCategoryChange("all");
|
||||
};
|
||||
|
||||
return (
|
||||
<AppModal
|
||||
@@ -104,7 +113,16 @@ export function CanvasAgentSkillLibraryModal({
|
||||
title={null}
|
||||
footer={null}
|
||||
centered
|
||||
width="min(1180px, calc(100vw - 24px))"
|
||||
width="min(1180px, 66vw)"
|
||||
closable={false}
|
||||
modalRender={(modal) => (
|
||||
<div className="canvas-agent-skill-library-frame">
|
||||
<button type="button" className="canvas-agent-skill-library-close" aria-label="关闭技能商店" onClick={onClose}>
|
||||
<kbd>ESC</kbd><span>关闭</span>
|
||||
</button>
|
||||
{modal}
|
||||
</div>
|
||||
)}
|
||||
onCancel={onClose}
|
||||
flush
|
||||
>
|
||||
@@ -115,85 +133,78 @@ export function CanvasAgentSkillLibraryModal({
|
||||
data-canvas-wheel-scroll
|
||||
aria-label="Agent Skills 技能库"
|
||||
>
|
||||
<header className="canvas-agent-skill-library-header">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2 text-lg font-semibold">
|
||||
<LibraryBig className="size-5" aria-hidden="true" />
|
||||
Skills 技能库
|
||||
</div>
|
||||
<p className="mt-1 text-xs" style={{ color: theme.node.muted }}>按分类浏览和搜索技能，本轮最多启用 8 个，发送消息时固定版本。</p>
|
||||
</div>
|
||||
<div className="canvas-agent-skill-library-count" style={{ color: theme.node.muted }}>
|
||||
已启用 <strong style={{ color: selectedCount >= 8 ? "var(--destructive)" : theme.accent.primary }}>{selectedCount}</strong>/8
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="canvas-agent-skill-library-toolbar">
|
||||
<div className="canvas-agent-skill-library-tabs" role="tablist" aria-label="Skills 视图">
|
||||
<SkillTab active={tab === "enabled"} label="已启用" count={selectedCount} onClick={() => setTab("enabled")} />
|
||||
<SkillTab active={tab === "installed"} label="已加入" count={installedSkills.length} onClick={() => setTab("installed")} />
|
||||
<SkillTab active={tab === "market"} label="发现 Skills" onClick={() => setTab("market")} />
|
||||
</div>
|
||||
<aside className="canvas-agent-skill-library-sidebar">
|
||||
<Input
|
||||
allowClear
|
||||
prefix={<Search className="size-4" style={{ color: theme.node.muted }} aria-hidden="true" />}
|
||||
value={search}
|
||||
onChange={(event) => onSearch(event.target.value)}
|
||||
placeholder="搜索 Skill 名称、说明或作者"
|
||||
aria-label="搜索 Skills"
|
||||
placeholder="搜索技能"
|
||||
aria-label="搜索技能名称、说明或作者"
|
||||
className="canvas-agent-skill-library-search"
|
||||
/>
|
||||
</div>
|
||||
<nav className="canvas-agent-skill-library-categories thin-scrollbar" aria-label="技能视图与分类">
|
||||
<SkillTab active={tab === "market" && category === "all"} label="全部" onClick={() => changeTab("market")} />
|
||||
<SkillTab active={tab === "installed"} label="我的技能" count={installedSkills.length} onClick={() => changeTab("installed")} />
|
||||
<SkillTab active={tab === "enabled"} label="已启用" count={selectedCount} onClick={() => changeTab("enabled")} />
|
||||
{categoryItems.map((item) => (
|
||||
<button
|
||||
key={item.value}
|
||||
type="button"
|
||||
className={`canvas-agent-skill-library-tab ${tab === "market" && category === item.value ? "is-active" : ""}`}
|
||||
aria-pressed={tab === "market" && category === item.value}
|
||||
onClick={() => { setTab("market"); onCategoryChange(item.value); }}
|
||||
>
|
||||
{item.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<nav className="canvas-agent-skill-library-categories" aria-label="Skill 分类">
|
||||
{categoryItems.map((item) => (
|
||||
<button
|
||||
key={item.value}
|
||||
type="button"
|
||||
className={`canvas-agent-skill-category ${category === item.value ? "is-active" : ""}`}
|
||||
aria-pressed={category === item.value}
|
||||
onClick={() => onCategoryChange(item.value)}
|
||||
>
|
||||
{item.label}
|
||||
<div className="canvas-agent-skill-library-content">
|
||||
<header className="canvas-agent-skill-library-header">
|
||||
<h2>技能商店</h2>
|
||||
<button type="button" className="canvas-agent-skill-library-count" onClick={() => changeTab("enabled")} aria-label={`查看本轮已启用的 ${selectedCount} 个技能，最多 8 个`}>
|
||||
已启用 <strong>{selectedCount}</strong><span> / 8</span>
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div ref={listRef} className="canvas-agent-skill-library-list thin-scrollbar" role="tabpanel">
|
||||
{visibleSkills.map((skill) => (
|
||||
<SkillLibraryCard
|
||||
key={skill.skillId}
|
||||
skill={skill}
|
||||
theme={theme}
|
||||
categories={categories}
|
||||
selected={selectedSkillIds.includes(skill.skillId)}
|
||||
canSelect={selectedCount < 8 || selectedSkillIds.includes(skill.skillId)}
|
||||
onToggle={() => onToggle(skill.skillId)}
|
||||
onInstall={() => onInstall(skill)}
|
||||
/>
|
||||
))}
|
||||
{loading && visibleSkills.length === 0 ? (
|
||||
<div className="canvas-agent-skill-library-state" style={{ color: theme.node.muted }}>
|
||||
<LoaderCircle className="size-5 animate-spin motion-reduce:animate-none" aria-hidden="true" />
|
||||
正在读取技能库…
|
||||
</div>
|
||||
) : null}
|
||||
{!loading && visibleSkills.length === 0 ? (
|
||||
<div className="canvas-agent-skill-library-state" style={{ color: theme.node.muted }}>
|
||||
<Sparkles className="size-6" aria-hidden="true" />
|
||||
<span>{emptyText}</span>
|
||||
{tab !== "market" ? <Button size="small" onClick={() => setTab("market")}>浏览公开 Skills</Button> : null}
|
||||
</div>
|
||||
) : null}
|
||||
{tab === "market" && hasMore ? <div ref={loadMoreRef} className="col-span-full h-px" aria-hidden="true" /> : null}
|
||||
<div ref={listRef} className="canvas-agent-skill-library-list thin-scrollbar" aria-label="技能列表" aria-busy={loading}>
|
||||
{visibleSkills.map((skill) => (
|
||||
<SkillLibraryCard
|
||||
key={skill.skillId}
|
||||
skill={skill}
|
||||
theme={theme}
|
||||
categories={categories}
|
||||
selected={selectedSkillIds.includes(skill.skillId)}
|
||||
canSelect={selectedCount < 8 || selectedSkillIds.includes(skill.skillId)}
|
||||
onToggle={() => onToggle(skill.skillId)}
|
||||
onInstall={() => onInstall(skill)}
|
||||
/>
|
||||
))}
|
||||
{loading && visibleSkills.length === 0 ? (
|
||||
<div className="canvas-agent-skill-library-state" style={{ color: theme.node.muted }}>
|
||||
<LoaderCircle className="size-5 animate-spin motion-reduce:animate-none" aria-hidden="true" />
|
||||
正在读取技能库…
|
||||
</div>
|
||||
) : null}
|
||||
{!loading && visibleSkills.length === 0 ? (
|
||||
<div className="canvas-agent-skill-library-state" style={{ color: theme.node.muted }}>
|
||||
<Sparkles className="size-6" aria-hidden="true" />
|
||||
<span>{emptyText}</span>
|
||||
{tab !== "market" ? <Button size="small" onClick={() => changeTab("market")}>浏览公开技能</Button> : null}
|
||||
</div>
|
||||
) : null}
|
||||
{tab === "market" && hasMore ? <div ref={loadMoreRef} className="col-span-full h-px" aria-hidden="true" /> : null}
|
||||
</div>
|
||||
|
||||
<footer className="canvas-agent-skill-library-footer" style={{ color: theme.node.muted, borderColor: theme.node.stroke }}>
|
||||
<span>{tab === "enabled" ? `${selectedCount} 个技能将在本轮生效` : tab === "installed" ? `${visibleSkills.length} 个已加入技能` : `已加载 ${marketSkills.length} 个公开技能`}</span>
|
||||
{tab === "market" && hasMore ? (
|
||||
<Button size="small" disabled={loading} loading={loading} onClick={() => void onLoadMore()}>{loading ? "加载中" : "加载更多"}</Button>
|
||||
) : <span>{tab === "market" ? "已加载全部" : "最多启用 8 个"}</span>}
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<footer className="canvas-agent-skill-library-footer" style={{ color: theme.node.muted, borderColor: theme.node.stroke }}>
|
||||
<span>{tab === "enabled" ? `${selectedCount} 个技能将在本轮生效` : tab === "installed" ? `${visibleSkills.length} 个已加入技能` : `已加载 ${marketSkills.length} 个公开技能`}</span>
|
||||
{tab === "market" && hasMore ? (
|
||||
<Button size="small" disabled={loading} loading={loading} onClick={() => void onLoadMore()}>{loading ? "加载中" : "加载更多"}</Button>
|
||||
) : <span>{tab === "market" ? "已加载全部" : "最多启用 8 个"}</span>}
|
||||
</footer>
|
||||
</section>
|
||||
</AppModal>
|
||||
);
|
||||
@@ -201,7 +212,7 @@ export function CanvasAgentSkillLibraryModal({
|
||||
|
||||
function SkillTab({ active, label, count, onClick }: { active: boolean; label: string; count?: number; onClick: () => void }) {
|
||||
return (
|
||||
<button type="button" role="tab" aria-selected={active} className={`canvas-agent-skill-library-tab ${active ? "is-active" : ""}`} onClick={onClick}>
|
||||
<button type="button" aria-pressed={active} className={`canvas-agent-skill-library-tab ${active ? "is-active" : ""}`} onClick={onClick}>
|
||||
{label}
|
||||
{typeof count === "number" ? <span>{count}</span> : null}
|
||||
</button>
|
||||
@@ -219,7 +230,9 @@ function SkillLibraryCard({ skill, theme, categories, selected, canSelect, onTog
|
||||
}) {
|
||||
const [installing, setInstalling] = useState(false);
|
||||
const [coverFailed, setCoverFailed] = useState(false);
|
||||
const coverUrl = skill.showcaseMedia?.find((item) => item.showcaseUrl)?.showcaseUrl;
|
||||
const cover = skill.showcaseMedia?.find((item) => item.type === "image" && item.showcaseUrl)
|
||||
|| skill.showcaseMedia?.find((item) => item.showcaseUrl);
|
||||
const coverUrl = cover?.showcaseUrl;
|
||||
const categoryLabel = categories.find((item) => item.value === skill.tag)?.label || "其他";
|
||||
const author = skill.effectiveUser?.name || "影策创作者";
|
||||
const addedCount = formatSkillCount(skill.addedCount || 0);
|
||||
@@ -237,48 +250,49 @@ function SkillLibraryCard({ skill, theme, categories, selected, canSelect, onTog
|
||||
};
|
||||
|
||||
return (
|
||||
<article className={`canvas-agent-skill-card ${selected ? "is-selected" : ""}`} style={{ borderColor: selected ? theme.accent.primary : theme.node.stroke }}>
|
||||
<div className="canvas-agent-skill-card-cover" style={{ background: theme.node.fill }}>
|
||||
<article className={`canvas-agent-skill-card ${selected ? "is-selected" : ""}`}>
|
||||
<div className="canvas-agent-skill-card-cover">
|
||||
{coverUrl && !coverFailed ? (
|
||||
<img src={coverUrl} alt="" loading="lazy" onError={() => setCoverFailed(true)} />
|
||||
cover?.type === "video"
|
||||
? <video src={coverUrl} muted playsInline preload="metadata" onError={() => setCoverFailed(true)} />
|
||||
: <img src={coverUrl} alt="" loading="lazy" onError={() => setCoverFailed(true)} />
|
||||
) : (
|
||||
<div className="canvas-agent-skill-card-placeholder" aria-hidden="true">
|
||||
<Sparkles className="size-7" />
|
||||
</div>
|
||||
)}
|
||||
<span className="canvas-agent-skill-card-category">{categoryLabel}</span>
|
||||
{selected ? <span className="canvas-agent-skill-card-selected" aria-label="本轮已启用"><Check className="size-4" aria-hidden="true" /></span> : null}
|
||||
</div>
|
||||
<div className="canvas-agent-skill-card-body">
|
||||
<div className="canvas-agent-skill-card-title-row">
|
||||
<h3 title={skill.skillName}>{skill.skillName}</h3>
|
||||
{skill.version ? <span className="canvas-agent-skill-card-version">v{skill.version}</span> : null}
|
||||
<div className="canvas-agent-skill-card-action">
|
||||
{skill.isAdded ? (
|
||||
<Button
|
||||
size="small"
|
||||
type="default"
|
||||
className={selected ? "is-selected" : ""}
|
||||
disabled={!canSelect}
|
||||
aria-pressed={selected}
|
||||
title={!canSelect ? "本轮最多启用 8 个 Skills" : undefined}
|
||||
onClick={onToggle}
|
||||
>
|
||||
{selected ? "已启用" : "使用"}
|
||||
</Button>
|
||||
) : (
|
||||
<Button size="small" icon={<Plus className="size-3.5" />} loading={installing} disabled={installing || !canSelect} title={!canSelect ? "本轮最多启用 8 个 Skills" : undefined} onClick={() => void install()}>
|
||||
加入
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p title={skill.description || "暂无技能说明"}>{skill.description || "暂无技能说明"}</p>
|
||||
<div className="canvas-agent-skill-card-meta" style={{ color: theme.node.muted }}>
|
||||
<span className="min-w-0 truncate">{author}</span>
|
||||
<span aria-hidden="true">·</span>
|
||||
{skill.version ? <><span aria-hidden="true">·</span><span className="canvas-agent-skill-card-version">v{skill.version}</span></> : null}
|
||||
<span className="inline-flex shrink-0 items-center gap-1"><Users className="size-3.5" aria-hidden="true" />{addedCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="canvas-agent-skill-card-action">
|
||||
{skill.isAdded ? (
|
||||
<Button
|
||||
size="small"
|
||||
type="default"
|
||||
className={selected ? "is-selected" : ""}
|
||||
icon={selected ? <Check className="size-3.5" /> : <Plus className="size-3.5" />}
|
||||
disabled={!canSelect}
|
||||
aria-pressed={selected}
|
||||
title={!canSelect ? "本轮最多启用 8 个 Skills" : undefined}
|
||||
onClick={onToggle}
|
||||
>
|
||||
{selected ? "已启用" : "启用"}
|
||||
</Button>
|
||||
) : (
|
||||
<Button size="small" icon={<Plus className="size-3.5" />} loading={installing} disabled={installing} onClick={() => void install()}>
|
||||
加入
|
||||
</Button>
|
||||
)}
|
||||
<p title={skill.description || "暂无技能说明"}>{skill.description || "暂无技能说明"}</p>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -118,7 +118,6 @@ export function AgentChatMessage({
|
||||
<ChevronDown className="agent-reasoning-chevron" aria-hidden="true" />
|
||||
</summary>
|
||||
<div className="agent-reasoning-content" data-canvas-wheel-scroll>
|
||||
<span className="agent-reasoning-rail" aria-hidden="true" />
|
||||
<div className="agent-reasoning-text">{item.text || (item.streaming ? "正在整理思路…" : "暂无可展示的推理摘要")}</div>
|
||||
</div>
|
||||
</details>
|
||||
@@ -235,7 +234,7 @@ export function AgentPendingToolCard({ summary, detail, theme, onReject, onAppro
|
||||
return (
|
||||
<div className="flex items-start gap-3">
|
||||
<AgentTimelineMarker theme={theme} tone="approval" icon={<CircleAlert className="size-3.5" />} />
|
||||
<div className="agent-pending-tool min-w-0 flex-1 rounded-r-lg border-l-2 py-1 pl-3 pr-1" style={{ borderColor: "#f97316", background: "rgba(249,115,22,.05)", color: theme.node.text }}>
|
||||
<div className="agent-pending-tool min-w-0 flex-1 rounded-lg border py-2 pl-3 pr-3" style={{ borderColor: "rgba(249,115,22,.22)", background: "rgba(249,115,22,.05)", color: theme.node.text }}>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center gap-2 text-[13px] font-semibold leading-5">
|
||||
@@ -539,10 +538,10 @@ export function AgentChatComposer({
|
||||
setPromptHeight(clampAgentPromptHeight(promptHeight + (event.key === "ArrowUp" ? 20 : -20)));
|
||||
};
|
||||
|
||||
// 在输入值末尾检测「/关键词」打开技能候选；选中后写入稳定 token，编辑器再把它渲染为技能 chip。
|
||||
// 在输入值末尾检测「/ 或 、+ 关键词」打开技能候选：中文输入法下 "/" 会打成 "、"，两者等价，且都必须紧跟行首或空白，避免中文顿号误触发。选中后写入稳定 token，编辑器再把它渲染为技能 chip。
|
||||
const handlePromptChange = (value: string) => {
|
||||
onPromptChange(value);
|
||||
const match = /(^|\s)\/([^\s/]*)$/.exec(value);
|
||||
const match = /(^|\s)[/、]([^\s/、]*)$/.exec(value);
|
||||
if (match && availableSlashSkills.length) {
|
||||
const next = { start: match.index + match[1].length, query: match[2] };
|
||||
setSlash((current) => (current && current.start === next.start && current.query === next.query ? current : next));
|
||||
@@ -554,6 +553,7 @@ export function AgentChatComposer({
|
||||
|
||||
const applySlashSkill = (skill: Skill) => {
|
||||
const token = `@[skill:${skill.skillId}] `;
|
||||
// 触发符 "/" 与 "、" 都是单字符，替换长度固定为 1。
|
||||
const next = slash ? `${prompt.slice(0, slash.start)}${token}${prompt.slice(slash.start + 1 + slash.query.length)}` : prompt ? `${prompt.replace(/\s+$/u, "")} ${token}` : token;
|
||||
setSlash(null);
|
||||
setSlashIndex(0);
|
||||
@@ -674,7 +674,7 @@ export function AgentChatComposer({
|
||||
value={prompt}
|
||||
references={composerReferences}
|
||||
includeAssetLibrary={includeAssetLibrary}
|
||||
sendOnEnter={false}
|
||||
sendOnEnter={canSubmit ? "both" : false}
|
||||
disabled={disabled}
|
||||
onChange={handlePromptChange}
|
||||
onSubmit={() => { if (canSubmit) onSubmit(); }}
|
||||
@@ -741,7 +741,12 @@ export function AgentChatComposer({
|
||||
{left}
|
||||
</div>
|
||||
<div className="agent-composer-submit flex items-center gap-2">
|
||||
<span className="agent-composer-send-hint">{canStop ? "运行中：发送即插话，下一步生效" : "Enter 换行 · ⌘/Ctrl+Enter 发送"}</span>
|
||||
{disabled ? null : (
|
||||
<span className="agent-composer-send-hint">
|
||||
<span className="agent-composer-send-hint-full">{canStop ? "运行中：发送即插话，下一步生效" : "Enter 发送 · Shift+Enter 换行"}</span>
|
||||
<span className="agent-composer-send-hint-compact">{canStop ? "运行中可插话" : "Enter 发送"}</span>
|
||||
</span>
|
||||
)}
|
||||
{canStop ? <motion.button
|
||||
type="button"
|
||||
disabled={stopping}
|
||||
@@ -761,7 +766,7 @@ export function AgentChatComposer({
|
||||
type="button"
|
||||
disabled={!canSubmit}
|
||||
aria-label={sending ? "发送中" : canStop ? "插话" : "发送"}
|
||||
title={canStop ? "插话：Agent 下一次开口时看到它" : "点击发送；⌘/Ctrl+Enter 发送"}
|
||||
title={canStop ? "插话：Agent 下一次开口时看到它" : "点击发送；Enter 或 ⌘/Ctrl+Enter 发送"}
|
||||
onClick={() => onSubmit()}
|
||||
whileHover={canSubmit && !reducedMotion ? { scale: 1.06, y: -1 } : undefined}
|
||||
whileTap={canSubmit && !reducedMotion ? { scale: 0.9, y: 1 } : undefined}
|
||||
@@ -835,7 +840,6 @@ function AgentTimelineMarker({ theme, tone, icon }: { theme: (typeof canvasTheme
|
||||
const color = tone === "error" ? "#ef4444" : tone === "approval" ? "#f97316" : tone === "tool" ? "#4f7cff" : tone === "agent" ? theme.accent.primary : theme.node.muted;
|
||||
return (
|
||||
<span className="relative flex w-6 shrink-0 self-stretch justify-center" aria-hidden="true">
|
||||
<span className="absolute bottom-[-20px] top-6 w-px opacity-35" style={{ background: theme.toolbar.border }} />
|
||||
<span className="relative grid size-6 place-items-center rounded-full" style={{ background: tone === "agent" ? theme.accent.primarySoft : theme.node.fill, color }}>
|
||||
{icon || <span className="size-3 opacity-90" style={{ background: color, WebkitMask: "url(/icons/openai.svg) center / contain no-repeat", mask: "url(/icons/openai.svg) center / contain no-repeat" }} />}
|
||||
</span>
|
||||
|
||||
@@ -733,7 +733,7 @@ export function CanvasCloudAgentPanel({ canvasId, domainProjectId, nodeCount, re
|
||||
disabled={Boolean(run && connectionStatus !== "connected") || !historyHydrated || !pendingHydrated}
|
||||
sending={busy}
|
||||
running={running}
|
||||
placeholder={running ? "运行中可直接插话，会在它下一步生效" : "输入操作指导；用 @ 引用画布节点，用 / 引用 Skills"}
|
||||
placeholder={running ? "运行中可直接插话，会在它下一步生效" : "输入操作指导；用 @ 引用画布节点，用 / 或 、 引用 Skills"}
|
||||
theme={theme}
|
||||
onPromptChange={setPrompt}
|
||||
onSubmit={() => void submit()}
|
||||
|
||||
@@ -96,19 +96,14 @@
|
||||
}
|
||||
|
||||
.agent-tool-row {
|
||||
/* 行为用图标和文案区分，颜色只留给真实的成功/失败状态。 */
|
||||
/* 日志是事件流，不是连续卡片；只用间距和状态图标建立层次。 */
|
||||
--agent-tool-accent: color-mix(in srgb, var(--foreground) 62%, transparent);
|
||||
min-height: 42px;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 11%, transparent);
|
||||
border-radius: 14px;
|
||||
background: color-mix(in srgb, var(--foreground) 2.5%, var(--background));
|
||||
padding: 9px 10px;
|
||||
transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
|
||||
}
|
||||
|
||||
.agent-tool-row:hover {
|
||||
border-color: color-mix(in srgb, var(--foreground) 20%, transparent);
|
||||
background: color-mix(in srgb, var(--foreground) 4%, var(--background));
|
||||
min-height: 36px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
padding: 5px 2px;
|
||||
transition: transform 160ms ease;
|
||||
}
|
||||
|
||||
/* 没有节点明细的“读取信息 / 操作画布”只保留时间线语义，不再撑成一张空卡片。 */
|
||||
@@ -120,11 +115,6 @@
|
||||
padding: 3px 2px;
|
||||
}
|
||||
|
||||
.agent-tool-row--plain:hover {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.agent-tool-row--read {
|
||||
--agent-tool-accent: color-mix(in srgb, var(--foreground) 62%, transparent);
|
||||
}
|
||||
@@ -151,11 +141,11 @@
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 16%, transparent);
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--foreground) 5%, transparent);
|
||||
padding: 2px 7px 2px 6px;
|
||||
color: color-mix(in srgb, var(--foreground) 76%, transparent);
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
background: color-mix(in srgb, var(--agent-tool-accent) 9%, transparent);
|
||||
padding: 2px 5px;
|
||||
color: color-mix(in srgb, var(--foreground) 68%, transparent);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
@@ -235,10 +225,18 @@
|
||||
.agent-composer-prompt-scroll {
|
||||
min-height: 60px;
|
||||
max-height: min(240px, 34vh);
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.agent-composer-prompt-scroll > [data-canvas-no-zoom] {
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.agent-composer-resize-handle {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
@@ -366,11 +364,19 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 面板宽度包含内边距；默认 448px 面板的输入区已不足以同时容纳控制区和快捷键提示。 */
|
||||
/* 面板宽度包含内边距；默认 448px 面板放不下完整快捷键说明，窄态降级为短文案而不是隐藏提示本身。 */
|
||||
.agent-composer-send-hint .agent-composer-send-hint-compact {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@container (max-width: 520px) {
|
||||
.agent-composer-send-hint {
|
||||
.agent-composer-send-hint .agent-composer-send-hint-full {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.agent-composer-send-hint .agent-composer-send-hint-compact {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.agent-tool-status {
|
||||
@@ -398,17 +404,15 @@
|
||||
.agent-reasoning-card {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent);
|
||||
border-radius: 14px;
|
||||
background: color-mix(in srgb, var(--foreground) 2.5%, var(--background));
|
||||
box-shadow: 0 5px 18px color-mix(in srgb, var(--foreground) 3%, transparent);
|
||||
transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
transition: background-color 160ms ease;
|
||||
}
|
||||
|
||||
.agent-reasoning-card[open] {
|
||||
border-color: color-mix(in srgb, var(--agent-reasoning-accent) 28%, transparent);
|
||||
background: color-mix(in srgb, var(--agent-reasoning-accent) 3.5%, var(--background));
|
||||
box-shadow: 0 8px 24px color-mix(in srgb, var(--agent-reasoning-accent) 7%, transparent);
|
||||
}
|
||||
|
||||
.agent-reasoning-summary {
|
||||
@@ -418,7 +422,7 @@
|
||||
gap: 9px;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
padding: 9px 10px;
|
||||
padding: 6px 4px;
|
||||
color: color-mix(in srgb, var(--foreground) 72%, transparent);
|
||||
user-select: none;
|
||||
}
|
||||
@@ -437,9 +441,9 @@
|
||||
height: 25px;
|
||||
flex: 0 0 25px;
|
||||
place-items: center;
|
||||
border: 1px solid color-mix(in srgb, var(--agent-reasoning-accent) 24%, transparent);
|
||||
border-radius: 8px;
|
||||
background: color-mix(in srgb, var(--agent-reasoning-accent) 11%, transparent);
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: color-mix(in srgb, var(--agent-reasoning-accent) 10%, transparent);
|
||||
color: var(--agent-reasoning-accent);
|
||||
}
|
||||
|
||||
@@ -477,10 +481,10 @@
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--foreground) 4%, transparent);
|
||||
padding: 2px 7px;
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
background: transparent;
|
||||
padding: 2px 4px;
|
||||
color: color-mix(in srgb, var(--foreground) 45%, transparent);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
@@ -488,7 +492,6 @@
|
||||
}
|
||||
|
||||
.agent-reasoning-status.is-live {
|
||||
border-color: color-mix(in srgb, var(--agent-reasoning-accent) 22%, transparent);
|
||||
background: color-mix(in srgb, var(--agent-reasoning-accent) 9%, transparent);
|
||||
color: var(--agent-reasoning-accent);
|
||||
}
|
||||
@@ -524,21 +527,13 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
max-height: min(232px, 30vh);
|
||||
gap: 10px;
|
||||
gap: 0;
|
||||
overflow: auto;
|
||||
border-top: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
|
||||
padding: 10px 12px 12px 14px;
|
||||
border-top: 0;
|
||||
padding: 4px 10px 10px 38px;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.agent-reasoning-rail {
|
||||
width: 2px;
|
||||
flex: 0 0 2px;
|
||||
align-self: stretch;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, color-mix(in srgb, var(--agent-reasoning-accent) 72%, transparent), color-mix(in srgb, var(--agent-reasoning-accent) 12%, transparent));
|
||||
}
|
||||
|
||||
.agent-reasoning-text {
|
||||
min-width: 0;
|
||||
color: color-mix(in srgb, var(--foreground) 58%, transparent);
|
||||
@@ -873,170 +868,194 @@
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-modal .ant-modal {
|
||||
padding-bottom: 0;
|
||||
margin-top: var(--space-10);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-modal .ant-modal-container {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-2xl);
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18), var(--elevation-hairline) !important;
|
||||
border: 0;
|
||||
border-radius: var(--r-5xl);
|
||||
background: var(--background);
|
||||
box-shadow: var(--elevation-overlay);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-modal .ant-modal-body {
|
||||
padding: 0;
|
||||
.canvas-agent-skill-library-frame {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-modal .ant-modal-close {
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
.canvas-agent-skill-library-close {
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--space-10));
|
||||
inset-inline-start: var(--space-2);
|
||||
inset-inline-end: auto;
|
||||
width: auto;
|
||||
height: var(--space-8);
|
||||
border-radius: var(--r-md);
|
||||
padding: 0 var(--space-2);
|
||||
color: var(--foreground);
|
||||
background: color-mix(in srgb, var(--foreground) 7%, transparent);
|
||||
background: transparent;
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
font-size: var(--fs-body);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-modal .ant-modal-close:hover {
|
||||
background: color-mix(in srgb, var(--foreground) 12%, transparent);
|
||||
.canvas-agent-skill-library-close kbd {
|
||||
border-radius: var(--r-xs);
|
||||
background: var(--primary);
|
||||
padding: var(--space-half) var(--space-2);
|
||||
color: var(--primary-foreground);
|
||||
font-size: var(--fs-caption);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-shell {
|
||||
position: relative;
|
||||
display: grid;
|
||||
height: min(780px, calc(100dvh - 36px));
|
||||
grid-template-rows: auto auto auto minmax(0, 1fr) auto;
|
||||
height: min(700px, 66dvh);
|
||||
max-height: calc(100dvh - 88px);
|
||||
grid-template-columns: 176px minmax(0, 1fr);
|
||||
overflow: hidden;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
radial-gradient(circle at 0 0, color-mix(in srgb, var(--workspace-accent) 7%, transparent), transparent 34%),
|
||||
var(--cn-spatial-elevated, var(--background));
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-sidebar {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
margin: var(--space-6) 0;
|
||||
border-right: 1px solid var(--border);
|
||||
padding: 0 var(--space-3);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-search.ant-input-affix-wrapper {
|
||||
flex: 0 0 auto;
|
||||
height: var(--space-12);
|
||||
border: 0;
|
||||
border-radius: var(--r-full);
|
||||
background: var(--library-surface);
|
||||
padding-inline: var(--space-4);
|
||||
font-size: var(--fs-body);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-search .ant-input-prefix {
|
||||
margin-inline-end: var(--space-2);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-categories {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
overflow-y: auto;
|
||||
padding: var(--space-1);
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-tab {
|
||||
display: flex;
|
||||
min-height: var(--space-12);
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
border: 0;
|
||||
border-radius: var(--r-lg);
|
||||
padding: var(--space-3);
|
||||
color: var(--muted-foreground);
|
||||
font-size: var(--fs-body-lg);
|
||||
text-align: left;
|
||||
overflow-wrap: anywhere;
|
||||
transition: background-color var(--motion-dur-fast) ease, color var(--motion-dur-fast) ease;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-tab::before {
|
||||
width: var(--space-1);
|
||||
height: var(--space-1);
|
||||
flex: 0 0 auto;
|
||||
border-radius: var(--r-full);
|
||||
background: currentColor;
|
||||
content: "";
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-tab span {
|
||||
margin-left: auto;
|
||||
color: var(--muted-foreground);
|
||||
font-size: var(--fs-caption);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-tab:hover {
|
||||
background: var(--library-surface-hover);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-tab.is-active {
|
||||
color: var(--foreground);
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-tab.is-active::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-content {
|
||||
container: agent-skill-content / inline-size;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-header {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
padding: 18px 64px 14px 20px;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-5) var(--space-6);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-header p {
|
||||
margin-bottom: 0;
|
||||
.canvas-agent-skill-library-header h2 {
|
||||
margin: 0;
|
||||
font-size: var(--fs-title);
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-count {
|
||||
flex: 0 0 auto;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent);
|
||||
border-radius: var(--r-lg);
|
||||
background: color-mix(in srgb, var(--foreground) 4%, transparent);
|
||||
padding: 7px 10px;
|
||||
font-size: var(--fs-label);
|
||||
border: 0;
|
||||
border-radius: var(--r-full);
|
||||
background: var(--library-surface);
|
||||
padding: var(--space-2-half) var(--space-4);
|
||||
color: var(--foreground);
|
||||
font-size: var(--fs-caption);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 0 20px 12px;
|
||||
.canvas-agent-skill-library-count:hover {
|
||||
background: var(--library-surface-hover);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-tabs {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-tab {
|
||||
display: inline-flex;
|
||||
min-height: 38px;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
border-radius: var(--r-md);
|
||||
padding: 0 12px;
|
||||
color: color-mix(in srgb, var(--foreground) 56%, transparent);
|
||||
font-size: var(--fs-caption);
|
||||
font-weight: 560;
|
||||
transition: background-color var(--motion-dur-fast) var(--motion-ease-out), color var(--motion-dur-fast) var(--motion-ease-out);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-tab span {
|
||||
min-width: 20px;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, currentColor 9%, transparent);
|
||||
padding: 1px 6px;
|
||||
font-size: var(--fs-tiny);
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-tab:hover {
|
||||
background: color-mix(in srgb, var(--foreground) 4%, transparent);
|
||||
color: color-mix(in srgb, var(--foreground) 76%, transparent);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-tab.is-active {
|
||||
background: color-mix(in srgb, var(--foreground) 5%, transparent);
|
||||
color: color-mix(in srgb, var(--foreground) 78%, transparent);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-search {
|
||||
height: 40px;
|
||||
border-radius: var(--r-lg);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-categories {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
border-top: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
|
||||
padding: 10px 20px;
|
||||
overscroll-behavior-x: contain;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-categories::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-category {
|
||||
min-height: 34px;
|
||||
flex: 0 0 auto;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent);
|
||||
border-radius: var(--r-md);
|
||||
padding: 0 13px;
|
||||
color: color-mix(in srgb, var(--foreground) 58%, transparent);
|
||||
font-size: var(--fs-caption);
|
||||
transition: border-color var(--motion-dur-fast) var(--motion-ease-out), background-color var(--motion-dur-fast) var(--motion-ease-out), color var(--motion-dur-fast) var(--motion-ease-out);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-category:hover {
|
||||
border-color: color-mix(in srgb, var(--foreground) 20%, transparent);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-category.is-active {
|
||||
border-color: color-mix(in srgb, var(--workspace-accent) 34%, var(--border));
|
||||
background: color-mix(in srgb, var(--workspace-accent) 11%, transparent);
|
||||
color: var(--workspace-accent);
|
||||
.canvas-agent-skill-library-count span {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-list {
|
||||
display: grid;
|
||||
min-height: 0;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
flex: 1;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
grid-auto-rows: max-content;
|
||||
align-content: start;
|
||||
gap: 12px;
|
||||
gap: var(--space-6) var(--space-4);
|
||||
overflow-y: auto;
|
||||
padding: 16px 20px;
|
||||
padding: var(--space-1) var(--space-6) var(--space-6);
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-state {
|
||||
@@ -1045,54 +1064,52 @@
|
||||
grid-column: 1 / -1;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
gap: 10px;
|
||||
padding: 28px;
|
||||
font-size: var(--fs-caption);
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-6);
|
||||
font-size: var(--fs-body);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
min-height: 136px;
|
||||
grid-template-columns: 164px minmax(0, 1fr) auto;
|
||||
gap: 14px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-xl);
|
||||
background: color-mix(in srgb, var(--foreground) 3%, transparent);
|
||||
padding: 11px;
|
||||
transition: border-color var(--motion-dur-fast) var(--motion-ease-out), background-color var(--motion-dur-fast) var(--motion-ease-out), transform var(--motion-dur-fast) var(--motion-ease-out);
|
||||
border: 0;
|
||||
border-radius: var(--r-2xl);
|
||||
transition: transform var(--motion-state) var(--motion-ease-out), background-color var(--motion-state) ease;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card:hover {
|
||||
border-color: color-mix(in srgb, var(--foreground) 22%, transparent) !important;
|
||||
background: color-mix(in srgb, var(--foreground) 5%, transparent);
|
||||
transform: translateY(-1px);
|
||||
.canvas-agent-skill-card:hover,
|
||||
.canvas-agent-skill-card:focus-within {
|
||||
transform: translateY(var(--library-hover-offset));
|
||||
background: var(--library-surface-hover);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card.is-selected {
|
||||
background: color-mix(in srgb, var(--workspace-accent) 7%, transparent);
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--workspace-accent) 24%, transparent);
|
||||
.canvas-agent-skill-card:hover .canvas-agent-skill-card-cover img,
|
||||
.canvas-agent-skill-card:focus-within .canvas-agent-skill-card-cover img {
|
||||
transform: scale(1.025);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-cover {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border-radius: var(--r-lg);
|
||||
aspect-ratio: 16 / 10;
|
||||
border-radius: var(--r-2xl);
|
||||
aspect-ratio: 16 / 9;
|
||||
background: var(--library-cover-surface);
|
||||
transition: outline-color var(--motion-dur-fast) ease;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-cover img {
|
||||
.canvas-agent-skill-card.is-selected .canvas-agent-skill-card-cover {
|
||||
outline: 1px solid var(--library-selected-stroke);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-cover img,
|
||||
.canvas-agent-skill-card-cover video {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform var(--motion-dur-base) var(--motion-ease-out);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card:hover .canvas-agent-skill-card-cover img {
|
||||
transform: scale(1.025);
|
||||
transition: transform var(--motion-state) var(--motion-ease-out);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-placeholder {
|
||||
@@ -1100,258 +1117,242 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
place-items: center;
|
||||
color: color-mix(in srgb, var(--workspace-accent) 64%, var(--foreground));
|
||||
background:
|
||||
radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--workspace-accent) 28%, transparent), transparent 46%),
|
||||
linear-gradient(145deg, color-mix(in srgb, var(--foreground) 8%, transparent), color-mix(in srgb, var(--foreground) 2%, transparent));
|
||||
color: var(--muted-foreground);
|
||||
background: var(--library-cover-surface);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-category {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 7px;
|
||||
max-width: calc(100% - 14px);
|
||||
bottom: var(--space-3);
|
||||
left: var(--space-3);
|
||||
max-width: calc(100% - var(--space-6));
|
||||
overflow: hidden;
|
||||
border: 1px solid color-mix(in srgb, white 18%, transparent);
|
||||
border-radius: var(--r-md);
|
||||
background: color-mix(in srgb, black 62%, transparent);
|
||||
padding: 2px 7px;
|
||||
color: white;
|
||||
border-radius: var(--r-sm);
|
||||
background: color-mix(in srgb, var(--color-neutral-950) 75%, transparent);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
color: var(--color-neutral-0);
|
||||
font-size: var(--fs-tiny);
|
||||
line-height: 19px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-selected {
|
||||
position: absolute;
|
||||
top: var(--space-3);
|
||||
right: var(--space-3);
|
||||
display: grid;
|
||||
width: var(--space-8);
|
||||
height: var(--space-8);
|
||||
place-items: center;
|
||||
border-radius: var(--r-full);
|
||||
color: var(--control-selected-fg);
|
||||
background: var(--control-selected-bg);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-body {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
padding: 4px 0 2px;
|
||||
gap: var(--space-2);
|
||||
padding-top: var(--space-3);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-title-row {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-title-row h3 {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
color: var(--foreground);
|
||||
font-size: 15px;
|
||||
color: inherit;
|
||||
font-size: var(--fs-heading);
|
||||
font-weight: 650;
|
||||
line-height: 22px;
|
||||
line-height: 1.5;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-version {
|
||||
flex: 0 0 auto;
|
||||
color: color-mix(in srgb, var(--foreground) 42%, transparent);
|
||||
font-size: var(--fs-tiny);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-body > p {
|
||||
display: -webkit-box;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
margin: 7px 0 10px;
|
||||
color: color-mix(in srgb, var(--foreground) 54%, transparent);
|
||||
font-size: var(--fs-label);
|
||||
line-height: 19px;
|
||||
margin: 0;
|
||||
color: var(--muted-foreground);
|
||||
font-size: var(--fs-body);
|
||||
line-height: 1.65;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-meta {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: auto;
|
||||
font-size: var(--fs-label);
|
||||
gap: var(--space-2);
|
||||
font-size: var(--fs-caption);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-version {
|
||||
flex: 0 1 auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-action {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding-top: 3px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-action .ant-btn {
|
||||
min-width: 76px;
|
||||
border-radius: var(--r-md);
|
||||
min-width: var(--space-16);
|
||||
height: var(--space-8);
|
||||
border: 0;
|
||||
border-radius: var(--r-full);
|
||||
background: var(--primary);
|
||||
padding-inline: var(--space-3);
|
||||
color: var(--primary-foreground);
|
||||
box-shadow: none;
|
||||
font-size: var(--fs-body);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-action .ant-btn.is-selected {
|
||||
border-color: color-mix(in srgb, var(--workspace-accent) 32%, var(--border));
|
||||
background: color-mix(in srgb, var(--workspace-accent) 13%, transparent);
|
||||
color: var(--workspace-accent);
|
||||
box-shadow: none;
|
||||
.canvas-agent-skill-card-action .ant-btn:not(:disabled):hover {
|
||||
background: color-mix(in srgb, var(--primary) 85%, var(--background));
|
||||
color: var(--primary-foreground);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-action .ant-btn.is-selected,
|
||||
.canvas-agent-skill-card-action .ant-btn.is-selected:not(:disabled):hover {
|
||||
background: var(--control-selected-bg);
|
||||
color: var(--control-selected-fg);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-action .ant-btn:disabled {
|
||||
background: var(--library-surface);
|
||||
color: var(--muted-foreground);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-footer {
|
||||
display: flex;
|
||||
min-height: 48px;
|
||||
min-height: var(--space-12);
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
border-top: 1px solid;
|
||||
padding: 8px 20px;
|
||||
font-size: var(--fs-label);
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-2) var(--space-6);
|
||||
font-size: var(--fs-caption);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-tab:focus-visible,
|
||||
.canvas-agent-skill-category:focus-visible {
|
||||
.canvas-agent-skill-library-close:focus-visible,
|
||||
.canvas-agent-skill-library-count:focus-visible {
|
||||
outline: 2px solid var(--ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
@container agent-skill-content (max-width: 660px) {
|
||||
.canvas-agent-skill-library-list {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
@media (max-width: 900px) {
|
||||
.canvas-agent-skill-library-modal .ant-modal {
|
||||
width: calc(100vw - 32px) !important;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-shell {
|
||||
height: calc(100dvh - 24px);
|
||||
height: min(700px, calc(100dvh - 88px));
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-header {
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 16px 56px 12px 14px;
|
||||
.canvas-agent-skill-library-header,
|
||||
.canvas-agent-skill-library-list,
|
||||
.canvas-agent-skill-library-footer {
|
||||
padding-inline: var(--space-5);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-header p {
|
||||
display: none;
|
||||
.canvas-agent-skill-library-sidebar {
|
||||
padding-inline: var(--space-3);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.canvas-agent-skill-library-modal .ant-modal-container {
|
||||
border-radius: var(--r-4xl);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-count {
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-toolbar {
|
||||
.canvas-agent-skill-library-shell {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
padding: 0 14px 10px;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-tabs {
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
.canvas-agent-skill-library-sidebar {
|
||||
gap: var(--space-2);
|
||||
margin: 0;
|
||||
border-right: 0;
|
||||
padding: var(--space-4) var(--space-4) 0;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
.canvas-agent-skill-library-search.ant-input-affix-wrapper {
|
||||
height: var(--space-10);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-categories {
|
||||
padding: 8px 14px;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-list {
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-footer {
|
||||
min-height: 44px;
|
||||
padding: 6px 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.canvas-agent-skill-library-header {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-count {
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
right: 56px;
|
||||
flex-direction: row;
|
||||
gap: var(--space-1);
|
||||
overflow-x: auto;
|
||||
overscroll-behavior-x: contain;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-tab {
|
||||
min-height: 34px;
|
||||
padding: 0 9px;
|
||||
font-size: var(--fs-label);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card {
|
||||
min-height: 122px;
|
||||
grid-template-columns: 104px minmax(0, 1fr);
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
gap: 8px 10px;
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-cover {
|
||||
grid-row: 1 / 3;
|
||||
align-self: stretch;
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-body {
|
||||
padding: 1px 0 0;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-body > p {
|
||||
margin: 4px 0 6px;
|
||||
font-size: var(--fs-tiny);
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-meta {
|
||||
font-size: var(--fs-tiny);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-action {
|
||||
justify-content: flex-end;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card-action .ant-btn {
|
||||
min-width: 72px;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-footer > span:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 560px) {
|
||||
.canvas-agent-skill-library-shell {
|
||||
height: calc(100dvh - 16px);
|
||||
min-height: var(--space-10);
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2);
|
||||
font-size: var(--fs-body);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-header {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 8px;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-categories {
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
.canvas-agent-skill-library-header h2 {
|
||||
font-size: var(--fs-heading-lg);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-list {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: var(--space-6);
|
||||
padding-inline: var(--space-4);
|
||||
}
|
||||
|
||||
.canvas-agent-skill-library-footer {
|
||||
gap: var(--space-2);
|
||||
padding-inline: var(--space-4);
|
||||
font-size: var(--fs-label);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.canvas-agent-skill-card,
|
||||
.canvas-agent-skill-card-cover,
|
||||
.canvas-agent-skill-card-cover img,
|
||||
.canvas-agent-skill-category,
|
||||
.canvas-agent-skill-card-cover video,
|
||||
.canvas-agent-skill-library-tab {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.canvas-agent-skill-card:hover,
|
||||
.canvas-agent-skill-card:hover .canvas-agent-skill-card-cover img {
|
||||
.canvas-agent-skill-card:focus-within,
|
||||
.canvas-agent-skill-card:hover .canvas-agent-skill-card-cover img,
|
||||
.canvas-agent-skill-card:focus-within .canvas-agent-skill-card-cover img {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@ import { Brush, Camera, Copy, FileText, Globe2, Grid2x2, Layers3, Lock, LockOpen
|
||||
import type { CanvasNodeData } from "@/types/canvas";
|
||||
import type { NodeToolbarGroup } from "@/lib/canvas/tool-registry";
|
||||
|
||||
type ImageNodeActionToolId = "copyPrompt" | "reversePrompt" | "replace" | "resize" | "annotation" | "annotationEdit" | "textEdit" | "maskEdit" | "imageEdit" | "removeBackground" | "layerDecomposition" | "emotion" | "portraitTexture" | "crop" | "split" | "upscale" | "superResolve" | "angle" | "lighting" | "panorama" | "view";
|
||||
type ImageNodeActionToolId = "copyPrompt" | "reversePrompt" | "replace" | "resize" | "annotation" | "annotationEdit" | "textEdit" | "maskEdit" | "removeBackground" | "layerDecomposition" | "emotion" | "portraitTexture" | "crop" | "split" | "upscale" | "superResolve" | "angle" | "lighting" | "panorama" | "view";
|
||||
|
||||
type ImageToolHandlers = {
|
||||
onUpload: (node: CanvasNodeData) => void;
|
||||
@@ -13,7 +13,6 @@ type ImageToolHandlers = {
|
||||
onAnnotationEdit: (node: CanvasNodeData) => void;
|
||||
onTextEdit: (node: CanvasNodeData) => void;
|
||||
onMaskEdit: (node: CanvasNodeData) => void;
|
||||
onImageEdit: (node: CanvasNodeData) => void;
|
||||
onRemoveBackground: (node: CanvasNodeData) => void;
|
||||
onLayerDecomposition: (node: CanvasNodeData) => void;
|
||||
onEmotion: (node: CanvasNodeData) => void;
|
||||
@@ -117,15 +116,6 @@ const imageToolDefinitions: ImageToolDefinition[] = [
|
||||
order: 15,
|
||||
run: (node, handlers) => handlers.onTextEdit(node),
|
||||
},
|
||||
{
|
||||
id: "imageEdit",
|
||||
label: "图片编辑",
|
||||
description: "用文字描述要修改的内容，生成新图片",
|
||||
icon: () => <WandSparkles className="size-3.5" />,
|
||||
group: "primary",
|
||||
order: 20,
|
||||
run: (node, handlers) => handlers.onImageEdit(node),
|
||||
},
|
||||
{
|
||||
id: "removeBackground",
|
||||
label: "去除背景",
|
||||
|
||||
@@ -31,7 +31,7 @@ export function CanvasNodeImageEditDialog({
|
||||
}, [config, open, dataUrl]);
|
||||
|
||||
return (
|
||||
<Modal open={open && Boolean(dataUrl)} onCancel={onClose} footer={null} centered destroyOnHidden width={860} title="图片编辑">
|
||||
<Modal open={open && Boolean(dataUrl)} onCancel={onClose} footer={null} centered destroyOnHidden width={860} title={preset === "remove-background" ? "去除背景" : "图片编辑"}>
|
||||
<div className="grid gap-5 md:grid-cols-[minmax(0,1fr)_300px]">
|
||||
<div className="grid min-h-[320px] place-items-center overflow-hidden rounded-xl bg-black/5 p-3 dark:bg-white/[0.04]">
|
||||
<img src={dataUrl} alt="待编辑图片" className="max-h-[58vh] max-w-full object-contain" draggable={false} />
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -37,7 +37,6 @@ type CanvasNodeToolbarProps = {
|
||||
onDownload: (node: CanvasNodeData) => void;
|
||||
onSaveAsset: (node: CanvasNodeData) => void;
|
||||
onMaskEdit: (node: CanvasNodeData) => void;
|
||||
onImageEdit: (node: CanvasNodeData) => void;
|
||||
onRemoveBackground: (node: CanvasNodeData) => void;
|
||||
onLayerDecomposition: (node: CanvasNodeData) => void;
|
||||
onEmotion: (node: CanvasNodeData) => void;
|
||||
@@ -103,7 +102,6 @@ export function CanvasNodeToolbar({
|
||||
onDownload,
|
||||
onSaveAsset,
|
||||
onMaskEdit,
|
||||
onImageEdit,
|
||||
onRemoveBackground,
|
||||
onLayerDecomposition,
|
||||
onEmotion,
|
||||
@@ -231,13 +229,13 @@ export function CanvasNodeToolbar({
|
||||
}
|
||||
copyText(prompt, "提示词已复制");
|
||||
};
|
||||
const imageTools = buildImageToolbarTools(node, { onUpload, onToggleFreeResize, onAnnotate, onAnnotationEdit, onTextEdit, onMaskEdit, onImageEdit, onRemoveBackground, onLayerDecomposition, onEmotion, onPortraitTexture, onCrop, onUpscale, onSuperResolve, onAngle, onLighting, onPanorama, onViewImage, onCopyPrompt: copyImagePrompt, onReversePrompt });
|
||||
const imageTools = buildImageToolbarTools(node, { onUpload, onToggleFreeResize, onAnnotate, onAnnotationEdit, onTextEdit, onMaskEdit, onRemoveBackground, onLayerDecomposition, onEmotion, onPortraitTexture, onCrop, onUpscale, onSuperResolve, onAngle, onLighting, onPanorama, onViewImage, onCopyPrompt: copyImagePrompt, onReversePrompt });
|
||||
|
||||
// 构建 ToolContext——供注册表解析工具
|
||||
const nodeHoverHandlers = {
|
||||
onNodeInfo: onInfo, onNodeDelete: onDelete, onNodeRetry: onRetry, onNodeEditText: onEditText, onNodeDecreaseFont: onDecreaseFont, onNodeIncreaseFont: onIncreaseFont,
|
||||
onNodeToggleDialog: onToggleDialog, onNodeAnnotate: onAnnotate, onNodeGenerateImage: onGenerateImage, onNodeUpload: onUpload, onNodeDownload: onDownload,
|
||||
onNodeSaveAsset: onSaveAsset, onNodeMaskEdit: onMaskEdit, onNodeImageEdit: onImageEdit, onNodeRemoveBackground: onRemoveBackground, onNodeEmotion: onEmotion, onNodePortraitTexture: onPortraitTexture, onNodeCrop: onCrop,
|
||||
onNodeSaveAsset: onSaveAsset, onNodeMaskEdit: onMaskEdit, onNodeRemoveBackground: onRemoveBackground, onNodeEmotion: onEmotion, onNodePortraitTexture: onPortraitTexture, onNodeCrop: onCrop,
|
||||
onNodeSplit: (target) => onSplit(target, { rows: 2, columns: 2 }), onNodeUpscale: onUpscale, onNodeSuperResolve: onSuperResolve, onNodeAngle: onAngle, onNodeViewImage: onViewImage,
|
||||
onNodeExtractVideoFrames: onExtractVideoFrames, onNodeExtractAudioFromVideo: onExtractAudioFromVideo, onNodeTrimVideoSegments: onTrimVideoSegments, onNodeReversePrompt: onReversePrompt, onNodeToggleFreeResize: onToggleFreeResize,
|
||||
onNodeSubtitles: onSubtitles, onNodeTimeline: onTimeline, onNodeToggleLocked: onToggleLocked, onNodeCopyPrompt: copyImagePrompt,
|
||||
|
||||
@@ -66,7 +66,7 @@ export function CanvasProjectAssetModal({
|
||||
mediaKind,
|
||||
asset: media,
|
||||
imageUrl: coverRepresentation ? resourceFileUrl(coverRepresentation.resourceId) : project?.mediaType === "image" && remoteResourceId ? resourceFileUrl(remoteResourceId) : undefined,
|
||||
imageStorageKey: coverRepresentation ? `resource:${coverRepresentation.resourceId}` : undefined,
|
||||
imageStorageKey: coverRepresentation ? `resource:${coverRepresentation.resourceId}` : remoteResourceId ? `resource:${remoteResourceId}` : undefined,
|
||||
imageFit: character ? "contain" : "cover",
|
||||
description: character ? `${character.character?.visualStatus === "ready" ? "形象就绪" : "形象待完善"} · ${character.character?.voiceStatus === "ready" ? "声音已绑定" : "声音未绑定"}` : project?.previewText,
|
||||
searchText: [media?.tags?.join(" ") || "", project?.previewText || ""].join(" "),
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Check, Clapperboard, CloudUpload, Download, FileText, Frame, Image as ImageIcon, MoreHorizontal, Music2, Pencil, Plus, Settings2, Sparkles, Trash2, Video, X } from "lucide-react";
|
||||
import type { ReactNode } from "react";
|
||||
import { useNavigate, useSearchParams } from "react-router";
|
||||
import { Dropdown, Input } from "antd";
|
||||
import { App, Dropdown, Input } from "antd";
|
||||
|
||||
import { useCanvasStore, type CanvasProject } from "@/stores/canvas/use-canvas-store";
|
||||
import { useCanvasUiStore } from "@/stores/canvas/use-canvas-ui-store";
|
||||
@@ -13,6 +13,7 @@ import { CachedResourceImage } from "@/components/cached-resource-image";
|
||||
import { MediaPlaceholder } from "@/components/ui/product/media-placeholder";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useSyncProgressStore } from "@/stores/use-sync-progress-store";
|
||||
import { hasRemoteUserDataSyncSession, loadCanvasProjectForEditing, saveRemoteUserDataNow } from "@/services/user-data-sync";
|
||||
|
||||
type ProjectPreviewMedia = { node: CanvasNodeData; url: string; storageKey?: string };
|
||||
const projectPreviewMediaCache = new WeakMap<CanvasNodeData[], { first?: ProjectPreviewMedia; latest?: ProjectPreviewMedia }>();
|
||||
@@ -30,6 +31,7 @@ export function CanvasCreateCard({ disabled, onClick }: { disabled?: boolean; on
|
||||
}
|
||||
|
||||
export function CanvasProjectCard({ project, projectName, variant = "library", readOnly = false, footer }: { project: CanvasProject; projectName?: string; variant?: "library" | "recent"; readOnly?: boolean; footer?: ReactNode }) {
|
||||
const { message } = App.useApp();
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const renameProject = useCanvasStore((state) => state.renameProject);
|
||||
@@ -44,9 +46,19 @@ export function CanvasProjectCard({ project, projectName, variant = "library", r
|
||||
const editing = editingId === project.id;
|
||||
const selected = selectedIds.includes(project.id);
|
||||
const open = () => navigate(`/canvas/${project.id}${searchParams.toString() ? `?${searchParams.toString()}` : ""}`);
|
||||
const saveTitle = () => {
|
||||
renameProject(project.id, editingTitle);
|
||||
const saveTitle = async () => {
|
||||
stopEditing();
|
||||
if (!hasRemoteUserDataSyncSession()) {
|
||||
renameProject(project.id, editingTitle);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await loadCanvasProjectForEditing(project.id);
|
||||
renameProject(project.id, editingTitle);
|
||||
await saveRemoteUserDataNow(project.id);
|
||||
} catch (error) {
|
||||
message.error(error instanceof Error ? error.message : "重命名失败");
|
||||
}
|
||||
};
|
||||
|
||||
const compact = variant === "recent";
|
||||
|
||||
@@ -42,7 +42,7 @@ type Props = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "val
|
||||
containerClassName?: string;
|
||||
highlightLabels?: boolean;
|
||||
mentionMenuWidth?: number;
|
||||
sendOnEnter?: boolean;
|
||||
sendOnEnter?: boolean | "both";
|
||||
onContentSizeChange?: (height: number) => void;
|
||||
includeAssetLibrary?: boolean;
|
||||
activeDropReferenceId?: string | null;
|
||||
@@ -50,6 +50,15 @@ type Props = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "val
|
||||
autoLinkEnabled?: boolean;
|
||||
};
|
||||
|
||||
// 回车提交语义由调用方决定：false 只在 ⌘/Ctrl+Enter 提交，"both" 两种都提交；Shift+Enter 始终换行。
|
||||
function shouldSubmitOnEnter(event: { key: string; ctrlKey: boolean; metaKey: boolean; shiftKey: boolean }, sendOnEnter: boolean | "both") {
|
||||
if (event.key !== "Enter" || event.shiftKey) return false;
|
||||
const modifier = event.ctrlKey || event.metaKey;
|
||||
if (sendOnEnter === false) return modifier;
|
||||
if (sendOnEnter === "both") return true;
|
||||
return !modifier;
|
||||
}
|
||||
|
||||
export const CanvasResourceMentionTextarea = forwardRef<HTMLTextAreaElement, Props>(function CanvasResourceMentionTextarea(
|
||||
{ value, references, onSelectReference, onChange, onSubmit, onKeyDown, className, containerClassName, style, highlightLabels = true, mentionMenuWidth = 320, sendOnEnter = true, onContentSizeChange, includeAssetLibrary = false, activeDropReferenceId, onReferenceFilesDrop, autoLinkEnabled = false, ...props },
|
||||
forwardedRef,
|
||||
@@ -350,7 +359,15 @@ export const CanvasResourceMentionTextarea = forwardRef<HTMLTextAreaElement, Pro
|
||||
spellCheck={props.spellCheck}
|
||||
tabIndex={props.tabIndex}
|
||||
className={`${className || ""} relative z-10 cursor-text select-text whitespace-pre-wrap break-words`}
|
||||
style={{ ...mergedStyle, color: style?.color || theme.node.text }}
|
||||
style={{
|
||||
...mergedStyle,
|
||||
color: style?.color || theme.node.text,
|
||||
height: "100%",
|
||||
minHeight: 0,
|
||||
maxHeight: "100%",
|
||||
overflowY: "auto",
|
||||
overflowX: "hidden",
|
||||
}}
|
||||
onInput={syncEditableValue}
|
||||
onCompositionStart={(event) => {
|
||||
composingRef.current = true;
|
||||
@@ -425,7 +442,7 @@ if (event.key === "Enter" && (event.nativeEvent.isComposing || composingRef.curr
|
||||
}
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
const shouldSubmit = sendOnEnter ? !event.ctrlKey && !event.metaKey && !event.shiftKey : (event.ctrlKey || event.metaKey) && !event.shiftKey;
|
||||
const shouldSubmit = shouldSubmitOnEnter(event, sendOnEnter);
|
||||
if (onSubmit && shouldSubmit) {
|
||||
onSubmit();
|
||||
return;
|
||||
@@ -489,7 +506,7 @@ if (event.key === "Enter" && (event.nativeEvent.isComposing || composingRef.curr
|
||||
}}
|
||||
value={value}
|
||||
className={`${className || ""} relative z-10`}
|
||||
style={mergedStyle}
|
||||
style={{ ...mergedStyle, height: "100%", minHeight: 0, maxHeight: "100%", overflowY: "auto", overflowX: "hidden" }}
|
||||
onChange={(event) => {
|
||||
const next = event.target.value;
|
||||
onChange(next);
|
||||
@@ -539,7 +556,7 @@ if (event.key === "Enter" && (event.nativeEvent.isComposing || composingRef.curr
|
||||
return;
|
||||
}
|
||||
}
|
||||
const shouldSubmit = event.key === "Enter" && (sendOnEnter ? !event.ctrlKey && !event.metaKey && !event.shiftKey : (event.ctrlKey || event.metaKey) && !event.shiftKey);
|
||||
const shouldSubmit = shouldSubmitOnEnter(event, sendOnEnter);
|
||||
if (shouldSubmit && onSubmit) {
|
||||
event.preventDefault();
|
||||
onSubmit();
|
||||
|
||||
Reference in New Issue
Block a user