feat(create): 对话页布局 - 加宽输入区并修正参数弹窗
开始对话后工具条进顶栏、模式切换横排到录音左侧，输入区加宽并去掉黑底；参数弹窗改用工作台表面色，去掉细线描边。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
ddCat
@@ -54,6 +54,7 @@
|
||||
.app-product-workspace .creation-home .creation-submit.ant-btn:not(:disabled):hover .creation-submit-action::after { animation: creation-submit-sheen 640ms cubic-bezier(.16, 1, .3, 1); }
|
||||
.app-product-workspace .creation-home .creation-submit.ant-btn:not(:disabled):hover .creation-submit-action svg { transform: translateY(-1px); }
|
||||
.app-product-workspace .creation-home .creation-submit.ant-btn:not(:disabled):active .creation-submit-action { transform: scale(.97); }
|
||||
.app-product-workspace .creation-home .creation-chat-composer.is-thread .creation-submit.ant-btn .creation-submit-action { height: 34px; padding: 0 14px; }
|
||||
}
|
||||
.creation-inspiration-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
|
||||
.creation-inspiration-filters button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; min-height: 36px; border: 0; border-radius: 999px; color: var(--user-ink-muted); background: transparent; font-size: 13px; transition: background var(--user-motion), color var(--user-motion); }
|
||||
@@ -120,3 +121,154 @@
|
||||
.app-user-workspace .creation-submit-action { transition: none !important; transform: none !important; }
|
||||
.app-product-workspace .creation-home .creation-submit.ant-btn:not(:disabled):hover .creation-submit-action::after { animation: none; }
|
||||
}
|
||||
|
||||
/* 参数弹窗挂在 body overlays，必须直接用用户表面 token；描边由 Ant inner 的 1px border 造成。 */
|
||||
.app-user-overlays .creation-control-popover,
|
||||
.app-product-overlays .creation-control-popover {
|
||||
--popover: var(--user-surface-raised);
|
||||
--border: transparent;
|
||||
--creation-text: var(--user-ink);
|
||||
--creation-muted: var(--user-ink-muted);
|
||||
--creation-faint: var(--user-ink-soft);
|
||||
--control-selected-bg: var(--user-control-pressed);
|
||||
--control-selected-fg: var(--user-ink);
|
||||
}
|
||||
|
||||
.app-user-overlays .creation-control-popover .ant-popover-arrow,
|
||||
.app-product-overlays .creation-control-popover .ant-popover-arrow { display: none; }
|
||||
|
||||
.app-user-overlays .creation-control-popover.ant-popover,
|
||||
.app-user-overlays .creation-control-popover .ant-popover-container,
|
||||
.app-user-overlays .creation-control-popover .ant-popover-inner,
|
||||
.app-user-overlays .creation-control-popover-surface,
|
||||
.app-product-overlays .creation-control-popover.ant-popover,
|
||||
.app-product-overlays .creation-control-popover .ant-popover-container,
|
||||
.app-product-overlays .creation-control-popover .ant-popover-inner,
|
||||
.app-product-overlays .creation-control-popover-surface {
|
||||
border: 0 !important;
|
||||
outline: 0 !important;
|
||||
background: var(--user-surface-raised) !important;
|
||||
background-image: none !important;
|
||||
box-shadow: 0 18px 40px rgba(0, 0, 0, .36) !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
border-radius: 16px !important;
|
||||
}
|
||||
|
||||
.app-user-overlays .creation-control-popover .ant-popover-inner,
|
||||
.app-product-overlays .creation-control-popover .ant-popover-inner {
|
||||
overflow: hidden;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.app-user-overlays .creation-parameter-menu,
|
||||
.app-product-overlays .creation-parameter-menu { padding: 12px !important; }
|
||||
|
||||
.app-user-overlays .creation-parameter-section h3,
|
||||
.app-user-overlays .creation-duration-heading > span,
|
||||
.app-product-overlays .creation-parameter-section h3,
|
||||
.app-product-overlays .creation-duration-heading > span { color: var(--user-ink-muted) !important; }
|
||||
|
||||
.app-user-overlays .creation-parameter-section > header > span,
|
||||
.app-user-overlays .creation-duration-heading strong,
|
||||
.app-product-overlays .creation-parameter-section > header > span,
|
||||
.app-product-overlays .creation-duration-heading strong { color: var(--user-ink) !important; }
|
||||
|
||||
.app-user-overlays .creation-choice-grid,
|
||||
.app-product-overlays .creation-choice-grid { gap: 6px !important; }
|
||||
|
||||
.app-user-overlays .creation-choice-grid button,
|
||||
.app-user-overlays .creation-duration-choices button,
|
||||
.app-product-overlays .creation-choice-grid button,
|
||||
.app-product-overlays .creation-duration-choices button {
|
||||
min-height: 40px !important;
|
||||
border: 0 !important;
|
||||
border-radius: 10px !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
color: var(--user-ink-muted) !important;
|
||||
}
|
||||
|
||||
.app-user-overlays .creation-choice-grid.is-resolution button,
|
||||
.app-user-overlays .creation-choice-grid.is-quality button,
|
||||
.app-user-overlays .creation-choice-grid.is-count button,
|
||||
.app-user-overlays .creation-duration-choices button,
|
||||
.app-product-overlays .creation-choice-grid.is-resolution button,
|
||||
.app-product-overlays .creation-choice-grid.is-quality button,
|
||||
.app-product-overlays .creation-choice-grid.is-count button,
|
||||
.app-product-overlays .creation-duration-choices button { min-height: 34px !important; }
|
||||
|
||||
.app-user-overlays .creation-choice-grid button:hover,
|
||||
.app-user-overlays .creation-duration-choices button:hover,
|
||||
.app-product-overlays .creation-choice-grid button:hover,
|
||||
.app-product-overlays .creation-duration-choices button:hover {
|
||||
background: var(--user-surface-hover) !important;
|
||||
color: var(--user-ink) !important;
|
||||
}
|
||||
|
||||
.app-user-overlays .creation-choice-grid button.is-selected,
|
||||
.app-user-overlays .creation-duration-choices button.is-selected,
|
||||
.app-product-overlays .creation-choice-grid button.is-selected,
|
||||
.app-product-overlays .creation-duration-choices button.is-selected {
|
||||
background: var(--user-control-pressed) !important;
|
||||
color: var(--user-ink) !important;
|
||||
}
|
||||
|
||||
.app-user-overlays .creation-choice-grid .creation-ratio-preview > span,
|
||||
.app-product-overlays .creation-choice-grid .creation-ratio-preview > span {
|
||||
border: 0 !important;
|
||||
border-radius: 3px !important;
|
||||
background: currentColor;
|
||||
opacity: .55;
|
||||
}
|
||||
|
||||
.app-user-overlays .creation-choice-grid button.is-selected .creation-ratio-preview > span,
|
||||
.app-product-overlays .creation-choice-grid button.is-selected .creation-ratio-preview > span { opacity: .92; }
|
||||
|
||||
.app-user-overlays .creation-custom-value,
|
||||
.app-product-overlays .creation-custom-value {
|
||||
border: 0 !important;
|
||||
background: var(--user-surface-muted) !important;
|
||||
color: var(--user-ink-muted) !important;
|
||||
}
|
||||
|
||||
.app-user-overlays .creation-parameter-menu .image-size-tiers button,
|
||||
.app-user-overlays .creation-parameter-menu .image-size-ratios button,
|
||||
.app-user-overlays .creation-parameter-menu .image-size-auto,
|
||||
.app-product-overlays .creation-parameter-menu .image-size-tiers button,
|
||||
.app-product-overlays .creation-parameter-menu .image-size-ratios button,
|
||||
.app-product-overlays .creation-parameter-menu .image-size-auto {
|
||||
border: 0 !important;
|
||||
background: var(--user-surface-muted) !important;
|
||||
box-shadow: none !important;
|
||||
color: var(--user-ink-muted) !important;
|
||||
}
|
||||
|
||||
.app-user-overlays .creation-parameter-menu .image-size-tiers button[aria-pressed="true"],
|
||||
.app-user-overlays .creation-parameter-menu .image-size-ratios button[aria-pressed="true"],
|
||||
.app-user-overlays .creation-parameter-menu .image-size-auto[aria-pressed="true"],
|
||||
.app-product-overlays .creation-parameter-menu .image-size-tiers button[aria-pressed="true"],
|
||||
.app-product-overlays .creation-parameter-menu .image-size-ratios button[aria-pressed="true"],
|
||||
.app-product-overlays .creation-parameter-menu .image-size-auto[aria-pressed="true"] {
|
||||
background: var(--user-control-pressed) !important;
|
||||
box-shadow: none !important;
|
||||
color: var(--user-ink) !important;
|
||||
}
|
||||
|
||||
.app-user-overlays .creation-parameter-menu .image-size-ratio-icon,
|
||||
.app-product-overlays .creation-parameter-menu .image-size-ratio-icon {
|
||||
border: 0 !important;
|
||||
background: currentColor;
|
||||
opacity: .55;
|
||||
}
|
||||
|
||||
html:not(.dark) .app-user-overlays .creation-control-popover.ant-popover,
|
||||
html:not(.dark) .app-user-overlays .creation-control-popover .ant-popover-container,
|
||||
html:not(.dark) .app-user-overlays .creation-control-popover .ant-popover-inner,
|
||||
html:not(.dark) .app-user-overlays .creation-control-popover-surface,
|
||||
html:not(.dark) .app-product-overlays .creation-control-popover.ant-popover,
|
||||
html:not(.dark) .app-product-overlays .creation-control-popover .ant-popover-container,
|
||||
html:not(.dark) .app-product-overlays .creation-control-popover .ant-popover-inner,
|
||||
html:not(.dark) .app-product-overlays .creation-control-popover-surface {
|
||||
box-shadow: 0 16px 40px rgba(25, 25, 30, .12) !important;
|
||||
}
|
||||
|
||||
@@ -35,6 +35,7 @@ export type CreationMessage = {
|
||||
export type CreationConversation = { id: string; title: string; updatedAt: string; canvasId?: string; messages: CreationMessage[] };
|
||||
|
||||
export const modeLabels: Record<CreationMode, string> = { text: "文本", image: "图片", video: "视频" };
|
||||
export const defaultCreationMode: CreationMode = "image";
|
||||
export const shotScriptLabels: Record<CreationMode, string> = { text: "创作思路", image: "画面指令", video: "镜头脚本" };
|
||||
export const ratioOptions = [
|
||||
{ value: "1:1", label: "方形" },
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import { ImageSizePicker } from "@/components/image-size-picker";
|
||||
import { imageResolutionUsesQuality } from "@/lib/image-size-presets";
|
||||
import { createPortal } from "react-dom";
|
||||
import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState, type CSSProperties, type PointerEvent, type ReactNode, type RefObject } from "react";
|
||||
import { App, Button, Dropdown, Popover } from "antd";
|
||||
import { AppDrawer } from "@/components/ui/product/app-drawer";
|
||||
import { AppModal } from "@/components/ui/product/app-modal";
|
||||
import { useWorkspaceTopBarMount } from "@/components/layout/workspace-top-bar-extension";
|
||||
import { Tooltip } from "@/components/ui/base/tooltip";
|
||||
import { Reorder, LayoutGroup, motion, useReducedMotion } from "motion/react";
|
||||
import { ArrowDown, ArrowUp, Brain, ChevronDown, ChevronLeft, ChevronRight, Clapperboard, Clock3, Copy, Download, FileText, Film, History, Image as ImageIcon, LoaderCircle, Maximize2, MessageSquareText, Minimize2, MoreHorizontal, Music2, Pencil, Plus, RefreshCw, Search, SlidersHorizontal, Sparkles, Trash2, UserRound, WandSparkles, Waves, X } from "lucide-react";
|
||||
@@ -174,7 +176,8 @@ export function CreationWorkspaceToolbar({ shots, onJumpToShot, onNewConversatio
|
||||
window.addEventListener("mousedown", onPointerDown);
|
||||
return () => window.removeEventListener("mousedown", onPointerDown);
|
||||
}, [railOpen]);
|
||||
return <header className="creation-thread-toolbar">
|
||||
const mount = useWorkspaceTopBarMount();
|
||||
const toolbar = <header className="creation-thread-toolbar">
|
||||
<div className="creation-toolbar-shots" ref={railRef}>
|
||||
<button type="button" className="creation-rail-trigger" aria-expanded={railOpen} aria-haspopup="listbox" onClick={() => setRailOpen((open) => !open)}><Clapperboard />镜头时间线{shots.length > 0 ? <em className="creation-rail-count">{shots.length}</em> : null}</button>
|
||||
{railOpen ? <div className="creation-rail-pop" role="listbox" aria-label="镜头时间线">
|
||||
@@ -196,6 +199,9 @@ export function CreationWorkspaceToolbar({ shots, onJumpToShot, onNewConversatio
|
||||
<Tooltip title="历史对话"><button type="button" aria-label="查看历史对话" className="creation-toolbar-action" onClick={onOpenHistory}><History /></button></Tooltip>
|
||||
</div>
|
||||
</header>;
|
||||
if (mount) return createPortal(toolbar, mount);
|
||||
if (mount === null) return null;
|
||||
return toolbar;
|
||||
}
|
||||
|
||||
export function CreationMessageView({ item, shotNumber, onRetryFailure, onCreateVariant, onEditUserMessage, onContinueCanvas, openingCanvas }: { item: CreationMessage; shotNumber: number; onRetryFailure: () => void; onCreateVariant: () => void; onEditUserMessage: (text: string) => void; onContinueCanvas: (ids?: string[]) => void; openingCanvas: boolean }) {
|
||||
@@ -492,7 +498,6 @@ export function CreationComposer(props: ComposerProps) {
|
||||
spotlightColor="color-mix(in srgb, var(--user-ink) 12%, transparent)"
|
||||
spotlightRadius={280}
|
||||
>
|
||||
{props.variant === "thread" ? <div className="creation-composer-mode-row"><ModePicker mode={props.mode} onModeChange={props.onModeChange} /></div> : null}
|
||||
<div className="creation-chat-writing-surface">
|
||||
<div className="creation-chat-editor">
|
||||
<CanvasResourceMentionTextarea ref={props.composerFocusRef} value={props.prompt} references={props.references} mentionMenuWidth={400} sendOnEnter onFocus={props.onPromptFocus} onChange={props.setPrompt} onSubmit={props.onSubmit} containerClassName="creation-chat-mention-container" className="creation-chat-mention-editor creation-scrollbar" style={{ color: "var(--creation-text)" }} placeholder={props.placeholderOverride || (props.variant === "empty" ? emptyPlaceholder : placeholder)} aria-label="创作提示词，可使用 @ 引用当前参考内容或技能；回车发送，Shift+回车换行" spellCheck disabled={interactionBusy} activeDropReferenceId={dropTargetReferenceId} onReferenceFilesDrop={(reference, files) => { const target = props.references.find((item) => item.id === reference.id); if (target?.attachmentId) props.onReplaceReferenceFiles(target.attachmentId, files); }} />
|
||||
@@ -564,6 +569,7 @@ export function CreationComposer(props: ComposerProps) {
|
||||
</div>
|
||||
<footer className="creation-chat-dock">
|
||||
<div className="creation-chat-controls">
|
||||
{props.variant === "thread" ? <ModePicker mode={props.mode} onModeChange={props.onModeChange} /> : null}
|
||||
<VoiceRecordingButton
|
||||
className="creation-voice-trigger"
|
||||
disabled={interactionBusy}
|
||||
@@ -663,7 +669,7 @@ export function CreationModeTabs({ mode, onModeChange, agentActive = false, onAg
|
||||
}
|
||||
|
||||
function ModePicker({ mode, onModeChange }: { mode: CreationMode; onModeChange: (mode: CreationMode) => void }) {
|
||||
return <CreationModeTabs mode={mode} onModeChange={onModeChange} orientation="vertical" />;
|
||||
return <CreationModeTabs mode={mode} onModeChange={onModeChange} />;
|
||||
}
|
||||
|
||||
function GenerationSettingsMenu(props: ComposerProps) {
|
||||
|
||||
@@ -29,7 +29,7 @@ import { createPluginHostContext } from "@/services/plugin-host";
|
||||
import { usePluginStore } from "@/stores/use-plugin-store";
|
||||
import { buildCreationMentionReferences, expandCreationPrompt, reconcileCreationAttachmentLimit, removeCreationReferenceTokens, replaceCreationAttachmentReference, selectedCreationReferences, type CreationReference } from "./creation-references";
|
||||
import { creationAttachmentFromAsset, creationAttachmentFromAudio, creationAttachmentFromAudioAsset, creationAttachmentFromDocument, creationAttachmentFromExternalAsset, creationAttachmentFromImage, creationAttachmentFromVideo, creationAttachmentFromVideoAsset, creationAttachmentKind, creationAudioAsset, creationFileAccepted, creationImageAsset, creationMediaAspectRatio, creationUploadAccept, creationVideoAsset, removeCreationAttachment, splitCreationAttachments, type CreationAttachment } from "./creation-assets";
|
||||
import { modeLabels, type CreationConversation, type CreationMessage, type CreationMode, type CreationRetryContext, type CreationSettings, type CreationShotRailEntry, type CreationStatus } from "./creation-types";
|
||||
import { defaultCreationMode, modeLabels, type CreationConversation, type CreationMessage, type CreationMode, type CreationRetryContext, type CreationSettings, type CreationShotRailEntry, type CreationStatus } from "./creation-types";
|
||||
import { attachCreationTaskContexts, completedCreationGenerationTask, conversationTimestamp, creationShotRail, creationVideoShotOrdinal, isImageAttachment, isVideoAttachment, materializeCreationTaskResults, newConversation, newMessage, reconcileCreationTaskMessages } from "./creation-conversations";
|
||||
import { CreationComposer, CreationEmptySuggest, CreationFeaturedWorks, CreationHistoryDrawer, CreationMessageView, CreationModeTabs, CreationWorkspaceToolbar, creationAssetCategoryLabels } from "./creation-workspace";
|
||||
import { CreationAgentEntry } from "./creation-agent-entry";
|
||||
@@ -83,7 +83,7 @@ export default function CreatePage() {
|
||||
const [activeId, setActiveId] = useState("");
|
||||
const activeIdRef = useRef("");
|
||||
const [hydrated, setHydrated] = useState(false);
|
||||
const [mode, setMode] = useState<CreationMode>(() => initialComposerPreferences.mode || "video");
|
||||
const [mode, setMode] = useState<CreationMode>(() => initialComposerPreferences.mode || defaultCreationMode);
|
||||
const [prompt, setPrompt] = useState("");
|
||||
const [attachments, setAttachments] = useState<CreationAttachment[]>([]);
|
||||
const promptRef = useRef(prompt);
|
||||
@@ -178,7 +178,7 @@ export default function CreatePage() {
|
||||
useEffect(() => {
|
||||
if (!composerPreferencesHydrated || composerPreferencesInitialized) return;
|
||||
const saved = useCreationPreferencesStore.getState().preferences;
|
||||
const nextMode = saved.mode || "video";
|
||||
const nextMode = saved.mode || defaultCreationMode;
|
||||
setMode(nextMode);
|
||||
if (nextMode === "image" && saved.image) {
|
||||
if (saved.image.ratio) setRatio(saved.image.ratio);
|
||||
|
||||
@@ -6410,169 +6410,6 @@ html:not(.dark) .creation-studio-control:hover,
|
||||
.skill-card-added-count { flex: 0 0 auto; color: color-mix(in srgb, var(--foreground) 36%, transparent); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
|
||||
.skill-card-owner-flag { flex: 1 1 auto; color: color-mix(in srgb, var(--foreground) 46%, transparent); font-size: var(--fs-caption); }
|
||||
|
||||
/* 积分页使用同一工作台表面，通过排版而非反色卡片表达资产层级。 */
|
||||
.wallet-library-page .app-page-header { padding-bottom: 0; }
|
||||
.wallet-library-page .app-workspace-surface { border: 0; background: color-mix(in srgb, var(--workspace-surface-strong) 76%, transparent); box-shadow: none; }
|
||||
.wallet-library-page .wallet-credit-meta { gap: 6px; }
|
||||
.wallet-library-page .wallet-credit-meta svg { color: currentColor; }
|
||||
.credit-balance-card { overflow: hidden; border: 0; border-radius: var(--r-lg); background: var(--library-surface); color: var(--foreground); box-shadow: none; }
|
||||
.wallet-balance-inner { display: grid; min-height: 210px; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 32px; padding: 24px; }
|
||||
.wallet-balance-primary { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; }
|
||||
.wallet-balance-heading { display: flex; min-width: 0; align-items: center; gap: 12px; }
|
||||
.wallet-balance-heading > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
|
||||
.wallet-balance-heading strong { font-size: var(--fs-caption); font-weight: 600; }
|
||||
.wallet-balance-heading div > span { overflow: hidden; color: color-mix(in srgb, var(--foreground) 44%, transparent); font-size: var(--fs-label); text-overflow: ellipsis; white-space: nowrap; }
|
||||
.wallet-balance-icon { width: 36px; height: 36px; border-radius: var(--r-md); color: color-mix(in srgb, var(--foreground) 68%, transparent); }
|
||||
.wallet-balance-icon svg { width: 17px; height: 17px; }
|
||||
.wallet-balance-number { display: flex; min-width: 0; align-items: baseline; gap: 8px; margin-top: 28px; }
|
||||
.wallet-balance-number strong { min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-display); font-variant-numeric: tabular-nums; font-weight: 620; line-height: 1; }
|
||||
.wallet-balance-number > span { flex: 0 0 auto; color: color-mix(in srgb, var(--foreground) 48%, transparent); font-size: var(--fs-caption); }
|
||||
.wallet-balance-details { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: end; gap: 20px; }
|
||||
.wallet-account-status { display: inline-flex; grid-column: 1 / -1; align-items: center; justify-self: end; gap: 6px; color: color-mix(in srgb, var(--foreground) 58%, transparent); font-size: var(--fs-label); font-weight: 560; }
|
||||
.wallet-account-status svg { width: 15px; height: 15px; }
|
||||
.wallet-balance-metric { display: grid; min-width: 0; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 9px; }
|
||||
.wallet-balance-metric-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: var(--r-sm); background: color-mix(in srgb, var(--foreground) 5%, transparent); color: color-mix(in srgb, var(--foreground) 42%, transparent); }
|
||||
.wallet-balance-metric-icon svg { width: 14px; height: 14px; }
|
||||
.wallet-balance-metric > div { display: flex; min-width: 0; flex-direction: column; }
|
||||
.wallet-balance-metric span { color: color-mix(in srgb, var(--foreground) 50%, transparent); font-size: var(--fs-tiny); }
|
||||
.wallet-balance-metric strong { margin-top: 3px; overflow: hidden; font-size: var(--fs-heading); font-variant-numeric: tabular-nums; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.wallet-balance-metric small { margin-top: 2px; overflow: hidden; color: color-mix(in srgb, var(--foreground) 35%, transparent); font-size: var(--fs-tiny); text-overflow: ellipsis; white-space: nowrap; }
|
||||
.wallet-library-page .wallet-redeem-icon { background: color-mix(in srgb, var(--foreground) 6%, transparent); color: color-mix(in srgb, var(--foreground) 72%, transparent); }
|
||||
.wallet-library-page .wallet-ledger-panel { margin-top: 28px; }
|
||||
.wallet-library-page .wallet-ledger-panel .app-table-surface { border: 0; box-shadow: none; }
|
||||
.wallet-library-page .wallet-ledger-table .ant-table-thead > tr > th { height: 38px; padding: 8px 12px !important; background: color-mix(in srgb, var(--foreground) 4%, var(--background)) !important; color: color-mix(in srgb, var(--foreground) 52%, transparent) !important; font-size: var(--fs-label); font-weight: 500; }
|
||||
.wallet-library-page .wallet-ledger-table .ant-table-tbody > tr > td { padding: 10px 12px !important; transition: background-color var(--motion-instant) ease-out; }
|
||||
.wallet-library-page .wallet-ledger-table .ant-table-tbody > tr:hover > td { background: color-mix(in srgb, var(--foreground) 2.5%, var(--background)) !important; }
|
||||
@media (max-width: 1120px) {
|
||||
.wallet-balance-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
|
||||
.wallet-balance-details { align-content: start; }
|
||||
.wallet-account-status { grid-row: 2; grid-column: 1 / -1; justify-self: start; }
|
||||
}
|
||||
@media (max-width: 520px) {
|
||||
.wallet-balance-inner { min-height: 0; gap: 22px; padding: 20px; }
|
||||
.wallet-balance-number { margin-top: 32px; }
|
||||
.wallet-balance-details { grid-template-columns: minmax(0, 1fr); gap: 16px; }
|
||||
.wallet-account-status { grid-row: auto; grid-column: auto; }
|
||||
}
|
||||
|
||||
/* 积分超市：消费型入口优先，真实余额与可追溯明细保持在同一条工作流内。 */
|
||||
.wallet-market-page {
|
||||
--wallet-market-wash: color-mix(in srgb, var(--workspace-accent) 5%, transparent);
|
||||
}
|
||||
|
||||
.wallet-market-page > div {
|
||||
max-width: 1440px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.wallet-market-page .studio-band {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
|
||||
border-radius: var(--r-xl);
|
||||
background:
|
||||
radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--workspace-accent) 9%, transparent), transparent 30%),
|
||||
linear-gradient(135deg, color-mix(in srgb, var(--workspace-surface) 94%, transparent), color-mix(in srgb, var(--workspace-surface) 70%, var(--workspace-canvas)));
|
||||
box-shadow: 0 14px 40px color-mix(in srgb, var(--workspace-canvas) 26%, transparent);
|
||||
}
|
||||
|
||||
.wallet-market-page .studio-band::after {
|
||||
position: absolute;
|
||||
inset: auto -10% -58% 42%;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
background: color-mix(in srgb, var(--workspace-accent) 5%, transparent);
|
||||
content: "";
|
||||
filter: blur(22px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wallet-market-page .app-page-header {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-height: 108px;
|
||||
align-items: center;
|
||||
padding: 22px 24px;
|
||||
}
|
||||
|
||||
.wallet-market-page .app-page-header h1 {
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.wallet-market-page .wallet-credit-meta {
|
||||
border: 1px solid color-mix(in srgb, var(--workspace-accent) 18%, transparent);
|
||||
background: var(--wallet-market-wash);
|
||||
}
|
||||
|
||||
.wallet-market-page .library-feature-grid {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.wallet-market-page .credit-balance-card,
|
||||
.wallet-market-page .wallet-redeem-panel,
|
||||
.wallet-market-page > div > section:not(.library-feature-grid) {
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
|
||||
border-radius: var(--r-xl);
|
||||
box-shadow: 0 12px 30px color-mix(in srgb, var(--workspace-canvas) 20%, transparent);
|
||||
}
|
||||
|
||||
.wallet-market-page .credit-balance-card {
|
||||
background:
|
||||
linear-gradient(145deg, color-mix(in srgb, var(--workspace-surface-strong) 98%, transparent), color-mix(in srgb, var(--workspace-surface-strong) 82%, var(--workspace-accent)));
|
||||
}
|
||||
|
||||
.wallet-market-page .wallet-redeem-panel {
|
||||
background: color-mix(in srgb, var(--workspace-surface) 92%, transparent);
|
||||
}
|
||||
|
||||
.wallet-market-page .wallet-redeem-panel .ant-input-affix-wrapper,
|
||||
.wallet-market-page .wallet-redeem-panel .ant-input {
|
||||
border-radius: var(--r-md);
|
||||
}
|
||||
|
||||
.wallet-market-page .wallet-redeem-panel .ant-btn,
|
||||
.wallet-market-page .wallet-ledger-panel .ant-segmented,
|
||||
.wallet-market-page .app-workspace-surface > .ant-btn {
|
||||
border-radius: var(--r-md);
|
||||
}
|
||||
|
||||
.wallet-market-page .wallet-ledger-panel {
|
||||
background: color-mix(in srgb, var(--workspace-surface) 90%, transparent);
|
||||
}
|
||||
|
||||
.wallet-market-page .wallet-ledger-panel .ant-table-wrapper {
|
||||
overflow: hidden;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 6%, transparent);
|
||||
border-radius: var(--r-lg);
|
||||
}
|
||||
|
||||
.wallet-market-page .wallet-ledger-panel .ant-table-thead > tr > th {
|
||||
background: color-mix(in srgb, var(--foreground) 3%, transparent) !important;
|
||||
}
|
||||
|
||||
.wallet-market-page .wallet-ledger-panel .ant-table-tbody > tr:last-child > td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.wallet-market-page .app-page-header {
|
||||
min-height: 0;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.wallet-market-page .app-page-header > div:last-child {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wallet-market-page .app-page-header > div:last-child > * {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.wallet-market-page .app-page-header .ant-btn {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.library-loading-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 18px; margin-top: 20px; }
|
||||
/* 画布骨架屏 - 使用新token */
|
||||
.library-skeleton { aspect-ratio: 16 / 10; border-radius: var(--r-xl); background: var(--skeleton-surface); animation: library-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
|
||||
@@ -10905,26 +10742,25 @@ html[data-theme-switching="true"] :where(.canvas-node-shell, .aceternity-comet-c
|
||||
}
|
||||
|
||||
.creation-scrollbar {
|
||||
scrollbar-color: rgba(255, 255, 255, .22) transparent;
|
||||
scrollbar-gutter: stable;
|
||||
scrollbar-width: auto;
|
||||
scrollbar-color: color-mix(in srgb, var(--user-ink, #fff) 22%, transparent) transparent;
|
||||
scrollbar-gutter: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.creation-scrollbar::-webkit-scrollbar { width: 10px; }
|
||||
.creation-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
.creation-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
||||
.creation-scrollbar::-webkit-scrollbar-thumb {
|
||||
border: 3px solid transparent;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, .22);
|
||||
background-clip: content-box;
|
||||
background: color-mix(in srgb, var(--user-ink, #fff) 18%, transparent);
|
||||
}
|
||||
.creation-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .34); }
|
||||
.creation-scrollbar::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--user-ink, #fff) 32%, transparent); }
|
||||
|
||||
html:not(.dark) .creation-scrollbar {
|
||||
scrollbar-color: rgba(35, 41, 49, .24) transparent;
|
||||
scrollbar-color: color-mix(in srgb, var(--user-ink, #1b1b1f) 22%, transparent) transparent;
|
||||
}
|
||||
html:not(.dark) .creation-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(35, 41, 49, .24); }
|
||||
html:not(.dark) .creation-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(35, 41, 49, .38); }
|
||||
html:not(.dark) .creation-scrollbar::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--user-ink, #1b1b1f) 16%, transparent); }
|
||||
html:not(.dark) .creation-scrollbar::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--user-ink, #1b1b1f) 28%, transparent); }
|
||||
|
||||
html:not(.dark) .creation-home {
|
||||
--creation-bg: var(--workspace-page);
|
||||
@@ -15173,18 +15009,22 @@ html.dark .ai-message-codeblock-pre .shiki span { color: var(--shiki-dark) !impo
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.creation-home .creation-thread-toolbar {
|
||||
.creation-thread-toolbar {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
width: min(900px, calc(100% - 56px));
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.creation-home .creation-thread-toolbar {
|
||||
flex: 0 0 auto;
|
||||
width: min(900px, calc(100% - 56px));
|
||||
padding: var(--space-3) 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.creation-home .creation-toolbar-actions { display: inline-flex; align-items: center; gap: var(--space-1); }
|
||||
.creation-home .creation-toolbar-action {
|
||||
.creation-toolbar-actions { display: inline-flex; align-items: center; gap: var(--space-1); }
|
||||
.creation-toolbar-action {
|
||||
display: inline-flex;
|
||||
min-height: var(--space-8);
|
||||
align-items: center;
|
||||
@@ -15198,11 +15038,11 @@ html.dark .ai-message-codeblock-pre .shiki span { color: var(--shiki-dark) !impo
|
||||
cursor: pointer;
|
||||
transition: background-color var(--motion-state) ease, color var(--motion-state) ease;
|
||||
}
|
||||
.creation-home .creation-toolbar-action:hover { background: var(--creation-surface-hover); color: var(--creation-text); }
|
||||
.creation-home .creation-toolbar-action:focus-visible { outline: 2px solid var(--creation-accent); outline-offset: 1px; }
|
||||
.creation-home .creation-toolbar-action svg { width: var(--space-4); height: var(--space-4); }
|
||||
.creation-home .creation-toolbar-shots { position: relative; display: inline-flex; }
|
||||
.creation-home .creation-rail-trigger {
|
||||
.creation-toolbar-action:hover { background: var(--creation-surface-hover); color: var(--creation-text); }
|
||||
.creation-toolbar-action:focus-visible { outline: 2px solid var(--creation-accent); outline-offset: 1px; }
|
||||
.creation-toolbar-action svg { width: var(--space-4); height: var(--space-4); }
|
||||
.creation-toolbar-shots { position: relative; display: inline-flex; }
|
||||
.creation-rail-trigger {
|
||||
display: inline-flex;
|
||||
min-height: var(--space-8);
|
||||
align-items: center;
|
||||
@@ -15217,11 +15057,11 @@ html.dark .ai-message-codeblock-pre .shiki span { color: var(--shiki-dark) !impo
|
||||
cursor: pointer;
|
||||
transition: background-color var(--motion-state) ease, color var(--motion-state) ease;
|
||||
}
|
||||
.creation-home .creation-rail-trigger:hover,
|
||||
.creation-home .creation-rail-trigger[aria-expanded="true"] { background: var(--creation-surface-hover); color: var(--creation-text); }
|
||||
.creation-home .creation-rail-trigger:focus-visible { outline: 2px solid var(--creation-accent); outline-offset: 1px; }
|
||||
.creation-home .creation-rail-trigger svg { width: var(--space-4); height: var(--space-4); }
|
||||
.creation-home .creation-rail-count {
|
||||
.creation-rail-trigger:hover,
|
||||
.creation-rail-trigger[aria-expanded="true"] { background: var(--creation-surface-hover); color: var(--creation-text); }
|
||||
.creation-rail-trigger:focus-visible { outline: 2px solid var(--creation-accent); outline-offset: 1px; }
|
||||
.creation-rail-trigger svg { width: var(--space-4); height: var(--space-4); }
|
||||
.creation-rail-count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -15237,7 +15077,7 @@ html.dark .ai-message-codeblock-pre .shiki span { color: var(--shiki-dark) !impo
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1;
|
||||
}
|
||||
.creation-home .creation-rail-pop {
|
||||
.creation-rail-pop {
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
top: calc(100% + var(--space-2));
|
||||
@@ -15249,10 +15089,10 @@ html.dark .ai-message-codeblock-pre .shiki span { color: var(--shiki-dark) !impo
|
||||
box-shadow: var(--shadow-popover);
|
||||
padding: var(--space-2);
|
||||
}
|
||||
.creation-home .creation-rail-pop-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-1) var(--space-2) var(--space-2); }
|
||||
.creation-home .creation-rail-pop-title { display: flex; align-items: baseline; gap: var(--space-2); color: var(--creation-text); font-size: var(--fs-body); font-weight: 620; }
|
||||
.creation-home .creation-rail-pop-title small { color: var(--creation-muted); font-size: var(--fs-micro); font-weight: 480; }
|
||||
.creation-home .creation-rail-pop-close {
|
||||
.creation-rail-pop-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-1) var(--space-2) var(--space-2); }
|
||||
.creation-rail-pop-title { display: flex; align-items: baseline; gap: var(--space-2); color: var(--creation-text); font-size: var(--fs-body); font-weight: 620; }
|
||||
.creation-rail-pop-title small { color: var(--creation-muted); font-size: var(--fs-micro); font-weight: 480; }
|
||||
.creation-rail-pop-close {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -15263,10 +15103,10 @@ html.dark .ai-message-codeblock-pre .shiki span { color: var(--shiki-dark) !impo
|
||||
padding: var(--space-1);
|
||||
cursor: pointer;
|
||||
}
|
||||
.creation-home .creation-rail-pop-close:hover { background: var(--creation-surface-hover); color: var(--creation-text); }
|
||||
.creation-home .creation-rail-pop-close svg { width: var(--space-4); height: var(--space-4); }
|
||||
.creation-home .creation-rail-list { list-style: none; margin: 0; padding: 0; max-height: min(46vh, 320px); overflow-y: auto; }
|
||||
.creation-home .creation-rail-row {
|
||||
.creation-rail-pop-close:hover { background: var(--creation-surface-hover); color: var(--creation-text); }
|
||||
.creation-rail-pop-close svg { width: var(--space-4); height: var(--space-4); }
|
||||
.creation-rail-list { list-style: none; margin: 0; padding: 0; max-height: min(46vh, 320px); overflow-y: auto; }
|
||||
.creation-rail-row {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
@@ -15281,9 +15121,9 @@ html.dark .ai-message-codeblock-pre .shiki span { color: var(--shiki-dark) !impo
|
||||
cursor: pointer;
|
||||
transition: background-color var(--motion-state) ease;
|
||||
}
|
||||
.creation-home .creation-rail-row:hover { background: var(--creation-surface-hover); }
|
||||
.creation-home .creation-rail-row:focus-visible { outline: 2px solid var(--creation-accent); outline-offset: -2px; }
|
||||
.creation-home .creation-rail-row-shot {
|
||||
.creation-rail-row:hover { background: var(--creation-surface-hover); }
|
||||
.creation-rail-row:focus-visible { outline: 2px solid var(--creation-accent); outline-offset: -2px; }
|
||||
.creation-rail-row-shot {
|
||||
display: inline-flex;
|
||||
min-width: 44px;
|
||||
align-items: center;
|
||||
@@ -15296,12 +15136,12 @@ html.dark .ai-message-codeblock-pre .shiki span { color: var(--shiki-dark) !impo
|
||||
font-weight: 620;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.creation-home .creation-rail-row-prompt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--creation-text); font-size: var(--fs-caption); }
|
||||
.creation-home .creation-rail-row-state { color: var(--creation-muted); font-size: var(--fs-micro); white-space: nowrap; }
|
||||
.creation-home .creation-rail-row-state.is-done { color: var(--palette-status-success); }
|
||||
.creation-home .creation-rail-row-state.is-error { color: var(--palette-status-error); }
|
||||
.creation-home .creation-rail-row-state.is-pending { color: var(--creation-accent); }
|
||||
.creation-home .creation-rail-empty { margin: 0; color: var(--creation-muted); padding: var(--space-3) var(--space-2); font-size: var(--fs-caption); }
|
||||
.creation-rail-row-prompt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--creation-text); font-size: var(--fs-caption); }
|
||||
.creation-rail-row-state { color: var(--creation-muted); font-size: var(--fs-micro); white-space: nowrap; }
|
||||
.creation-rail-row-state.is-done { color: var(--palette-status-success); }
|
||||
.creation-rail-row-state.is-error { color: var(--palette-status-error); }
|
||||
.creation-rail-row-state.is-pending { color: var(--creation-accent); }
|
||||
.creation-rail-empty { margin: 0; color: var(--creation-muted); padding: var(--space-3) var(--space-2); font-size: var(--fs-caption); }
|
||||
.creation-home .creation-shot-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -15322,6 +15162,19 @@ html.dark .ai-message-codeblock-pre .shiki span { color: var(--shiki-dark) !impo
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-gutter: auto;
|
||||
scrollbar-color: color-mix(in srgb, var(--user-ink, var(--creation-text)) 20%, transparent) transparent;
|
||||
}
|
||||
.creation-home .creation-thread-scroll::-webkit-scrollbar { width: 6px; }
|
||||
.creation-home .creation-thread-scroll::-webkit-scrollbar-track { background: transparent; }
|
||||
.creation-home .creation-thread-scroll::-webkit-scrollbar-thumb {
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--user-ink, var(--creation-text)) 16%, transparent);
|
||||
}
|
||||
.creation-home .creation-thread-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: color-mix(in srgb, var(--user-ink, var(--creation-text)) 30%, transparent);
|
||||
}
|
||||
|
||||
|
||||
@@ -15339,7 +15192,7 @@ html.dark .ai-message-codeblock-pre .shiki span { color: var(--shiki-dark) !impo
|
||||
width: min(900px, calc(100% - 56px));
|
||||
margin: 0 auto;
|
||||
padding: var(--space-2) 0 var(--space-5);
|
||||
background: var(--creation-bg);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.creation-home .creation-user-message {
|
||||
@@ -16175,8 +16028,27 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-topbar-extension {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex: 0 1 auto;
|
||||
flex: 1 1 auto;
|
||||
align-items: center;
|
||||
}
|
||||
.app-user-workspace .app-workspace-topbar-extension .creation-thread-toolbar {
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
--creation-text: var(--user-ink);
|
||||
--creation-muted: var(--user-ink-muted);
|
||||
--creation-surface: var(--user-surface);
|
||||
--creation-surface-hover: var(--user-surface-hover);
|
||||
--creation-border: var(--user-border);
|
||||
--creation-accent: var(--user-accent);
|
||||
}
|
||||
.app-user-workspace .app-workspace-topbar-extension .creation-rail-pop {
|
||||
z-index: 80;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-topbar-actions {
|
||||
@@ -16221,6 +16093,285 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-account {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-account.is-collapsed {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-checkin {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 10px 10px 14px;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
box-shadow: 0 10px 24px rgba(16, 18, 22, .12);
|
||||
color: #171717;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-checkin-copy {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-checkin-title,
|
||||
.app-user-workspace .app-workspace-sidebar-checkin-offer {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-checkin-title {
|
||||
color: #171717;
|
||||
font-size: 13px;
|
||||
font-weight: 720;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -.01em;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-checkin-offer {
|
||||
margin-top: 4px;
|
||||
color: #8a8a8a;
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-checkin-offer em {
|
||||
margin: 0 1px;
|
||||
color: #12c8a0;
|
||||
font-style: normal;
|
||||
font-weight: 720;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-checkin-claim,
|
||||
.app-user-workspace .app-workspace-sidebar-checkin.is-collapsed {
|
||||
flex: none;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: #171717;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 650;
|
||||
white-space: nowrap;
|
||||
transition: background-color 160ms cubic-bezier(.16, 1, .3, 1), transform 160ms cubic-bezier(.16, 1, .3, 1);
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-checkin-claim:hover,
|
||||
.app-user-workspace .app-workspace-sidebar-checkin-claim:focus-visible,
|
||||
.app-user-workspace .app-workspace-sidebar-checkin.is-collapsed:hover,
|
||||
.app-user-workspace .app-workspace-sidebar-checkin.is-collapsed:focus-visible {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-checkin-claim:focus-visible,
|
||||
.app-user-workspace .app-workspace-sidebar-checkin.is-collapsed:focus-visible {
|
||||
outline: 2px solid #12c8a0;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-checkin-claim:active,
|
||||
.app-user-workspace .app-workspace-sidebar-checkin.is-collapsed:active {
|
||||
transform: scale(.98);
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-checkin-claim:disabled,
|
||||
.app-user-workspace .app-workspace-sidebar-checkin.is-collapsed:disabled {
|
||||
opacity: .72;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-checkin.is-collapsed {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding: 0;
|
||||
border-radius: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.dark .app-user-workspace .app-workspace-sidebar-checkin {
|
||||
background: #fff;
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, .38);
|
||||
color: #171717;
|
||||
}
|
||||
|
||||
.dark .app-user-workspace .app-workspace-sidebar-checkin-title {
|
||||
color: #171717;
|
||||
}
|
||||
|
||||
.dark .app-user-workspace .app-workspace-sidebar-checkin-claim,
|
||||
.dark .app-user-workspace .app-workspace-sidebar-checkin.is-collapsed {
|
||||
background: #171717;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.app-user-workspace .app-workspace-sidebar-checkin-claim,
|
||||
.app-user-workspace .app-workspace-sidebar-checkin.is-collapsed {
|
||||
transition: none;
|
||||
}
|
||||
.app-user-workspace .app-workspace-sidebar-checkin-claim:active,
|
||||
.app-user-workspace .app-workspace-sidebar-checkin.is-collapsed:active {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 8px 8px 6px;
|
||||
border-radius: 12px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: background-color var(--motion-state, 180ms) var(--motion-ease-out, cubic-bezier(.16, 1, .3, 1));
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage:hover,
|
||||
.app-user-workspace .app-workspace-sidebar-storage:focus-visible {
|
||||
background: var(--user-surface-hover, rgba(72, 72, 73, .055));
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage:focus-visible {
|
||||
outline: 2px solid var(--control-focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage-copy {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage-meta {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage-used {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--user-ink, var(--foreground));
|
||||
font-size: var(--fs-label);
|
||||
font-weight: 620;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: .01em;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage-remain,
|
||||
.app-user-workspace .app-workspace-sidebar-storage-total {
|
||||
flex: none;
|
||||
overflow: hidden;
|
||||
color: color-mix(in srgb, var(--user-ink, var(--foreground)) 46%, transparent);
|
||||
font-size: var(--fs-tiny);
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage-remain {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage-track {
|
||||
display: block;
|
||||
height: 5px;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--user-ink, var(--foreground)) 10%, transparent);
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage-track > span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: var(--workspace-accent);
|
||||
transition: width var(--motion-state, 180ms) var(--motion-ease-out, cubic-bezier(.16, 1, .3, 1)), background-color var(--motion-state, 180ms) var(--motion-ease-out, cubic-bezier(.16, 1, .3, 1));
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage.has-usage .app-workspace-sidebar-storage-track > span {
|
||||
min-width: 2px;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage.is-pending .app-workspace-sidebar-storage-track {
|
||||
background: color-mix(in srgb, var(--user-ink, var(--foreground)) 8%, transparent);
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage.is-warn .app-workspace-sidebar-storage-used {
|
||||
color: var(--status-warning);
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage.is-warn .app-workspace-sidebar-storage-track > span {
|
||||
background: var(--status-warning);
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage.is-critical .app-workspace-sidebar-storage-used {
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage.is-critical .app-workspace-sidebar-storage-track > span {
|
||||
background: var(--progress-bar-fill-error);
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage.is-error {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
min-height: 28px;
|
||||
color: color-mix(in srgb, var(--user-ink, var(--foreground)) 48%, transparent);
|
||||
font-size: var(--fs-tiny);
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage.is-error button {
|
||||
color: var(--user-ink, var(--foreground));
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage.is-error button:focus-visible {
|
||||
outline: 2px solid var(--control-focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage.is-collapsed {
|
||||
width: 36px;
|
||||
padding: 8px 0 6px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage.is-collapsed.is-error {
|
||||
width: 36px;
|
||||
min-height: 0;
|
||||
padding: 2px 0 4px;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-storage.is-collapsed.is-error button {
|
||||
display: block;
|
||||
width: 36px;
|
||||
height: 5px;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--status-error) 48%, transparent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-profile-row {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
@@ -18406,6 +18557,7 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
|
||||
.app-user-workspace .app-workspace-topbar {
|
||||
min-height: 64px !important;
|
||||
height: 64px !important;
|
||||
overflow: visible;
|
||||
padding-inline: 24px !important;
|
||||
border-bottom: 0 !important;
|
||||
background: color-mix(in srgb, var(--user-page-bg) 92%, transparent) !important;
|
||||
@@ -18510,6 +18662,7 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
|
||||
.app-user-workspace .creation-empty-composer { width: 100% !important; margin: 0 0 20px !important; }
|
||||
.app-user-workspace .creation-composer-shell {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 22px;
|
||||
background: transparent;
|
||||
box-shadow: 0 6px 16px color-mix(in srgb, var(--user-ink) 8%, transparent);
|
||||
@@ -18527,7 +18680,6 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
|
||||
box-shadow: none !important;
|
||||
transition: box-shadow var(--user-motion), transform var(--user-motion) !important;
|
||||
}
|
||||
.app-user-workspace .creation-chat-composer .creation-composer-mode-row,
|
||||
.app-user-workspace .creation-chat-composer .creation-chat-writing-surface,
|
||||
.app-user-workspace .creation-chat-composer .creation-chat-dock {
|
||||
position: relative;
|
||||
@@ -18738,17 +18890,41 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
|
||||
/* 对话记录统一成窄而有层次的工作区，不让输入区吞掉首屏。 */
|
||||
.app-user-workspace .creation-thread-toolbar,
|
||||
.app-user-workspace .creation-thread-stage,
|
||||
.app-user-workspace .creation-thread-composer { width: min(820px, calc(100% - 48px)); }
|
||||
.app-user-workspace .creation-thread-toolbar { min-height: 54px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--user-border) 70%, transparent); }
|
||||
.app-user-workspace .creation-thread-scroll { background: color-mix(in srgb, var(--user-bg) 82%, var(--user-surface)); }
|
||||
.app-user-workspace .creation-thread-stage { padding-top: 28px; padding-bottom: 18px; }
|
||||
.app-user-workspace .creation-thread-composer { padding: 8px 0 18px; }
|
||||
.app-user-workspace .creation-home .creation-user-message { width: min(520px, 82%); margin-bottom: 28px; gap: 8px; }
|
||||
.app-user-workspace .creation-thread-composer { width: min(1066px, calc(100% - 48px)); }
|
||||
.app-user-workspace .creation-home .creation-thread-toolbar { min-height: 40px; padding: 4px 0; border-bottom: 0; }
|
||||
.app-user-workspace .creation-thread-scroll { background: transparent; }
|
||||
.app-user-workspace .creation-thread-stage { padding-top: 16px; padding-bottom: 12px; }
|
||||
.app-user-workspace .creation-thread-composer { padding: 4px 0 10px; background: transparent; }
|
||||
.app-user-workspace .creation-chat-composer.is-thread .creation-chat-writing-surface {
|
||||
min-height: 0 !important;
|
||||
padding: 8px 12px 0 !important;
|
||||
}
|
||||
.app-user-workspace .creation-chat-composer.is-thread .creation-chat-editor textarea,
|
||||
.app-user-workspace .creation-chat-composer.is-thread .creation-chat-mention-editor {
|
||||
min-height: 40px !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.55 !important;
|
||||
}
|
||||
.app-user-workspace .creation-chat-composer.is-thread .creation-chat-dock {
|
||||
min-height: 44px !important;
|
||||
padding: 4px 10px 8px !important;
|
||||
}
|
||||
.app-user-workspace .creation-chat-composer.is-thread .creation-chat-control,
|
||||
.app-user-workspace .creation-chat-composer.is-thread .creation-model-picker.canvas-composer-model-picker {
|
||||
min-height: 32px !important;
|
||||
height: 32px !important;
|
||||
}
|
||||
.app-user-workspace .creation-home .creation-chat-composer.is-thread .creation-submit.ant-btn .creation-submit-action,
|
||||
.app-product-workspace .creation-home .creation-chat-composer.is-thread .creation-submit.ant-btn .creation-submit-action {
|
||||
height: 36px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
.app-user-workspace .creation-home .creation-user-message { width: min(676px, 82%); margin-bottom: 28px; gap: 8px; }
|
||||
.app-user-workspace .creation-user-message-copy-wrap { border: 1px solid color-mix(in srgb, var(--user-accent) 12%, var(--user-border)); border-radius: 18px 18px 5px 18px; padding: 11px 14px; background: color-mix(in srgb, var(--user-accent) 7%, var(--user-surface)); box-shadow: 0 8px 24px color-mix(in srgb, var(--user-ink) 5%, transparent); }
|
||||
.app-user-workspace .creation-assistant-message { width: min(700px, 100%); margin-bottom: 28px; }
|
||||
.app-user-workspace .creation-assistant-message { width: min(910px, 100%); margin-bottom: 28px; }
|
||||
.app-user-workspace .creation-message-content,
|
||||
.app-user-workspace .creation-message-error,
|
||||
.app-user-workspace .creation-message-reasoning-wrap { max-width: 680px; padding-top: 8px; }
|
||||
.app-user-workspace .creation-message-reasoning-wrap { max-width: 884px; padding-top: 8px; }
|
||||
.app-user-workspace .creation-message-heading { min-height: 28px; }
|
||||
.app-user-workspace .creation-home .creation-thread-composer .creation-mode-tabs { transform: none; margin-bottom: 0; }
|
||||
.app-user-workspace .creation-history-drawer .ant-drawer-body { background: var(--user-bg); }
|
||||
|
||||
@@ -467,6 +467,9 @@
|
||||
.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-nav-icon { width: 30px; height: 30px; flex-basis: 30px; }
|
||||
.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-nav-link .app-workspace-nav-icon svg,
|
||||
.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-nav-link .app-workspace-nav-main > svg { width: 18px !important; height: 18px !important; flex: 0 0 18px; }
|
||||
.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-account { width: 100%; align-items: center; }
|
||||
.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-checkin { width: 48px; }
|
||||
.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-storage { width: 36px; }
|
||||
.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-profile-row { width: 100%; justify-content: center; }
|
||||
.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-profile { width: 48px; min-width: 48px; flex: 0 0 48px; margin-inline: auto; }
|
||||
.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-notification-spacer { display: none; }
|
||||
@@ -538,13 +541,32 @@
|
||||
.creation-floating-prompt button:hover { background: var(--user-surface-hover); transform: scale(1.05); }
|
||||
.creation-floating-prompt button:focus-visible { outline: 2px solid var(--user-accent); outline-offset: 2px; }
|
||||
.creation-floating-prompt button svg { width: 19px; height: 19px; }
|
||||
.app-user-workspace .creation-chat-composer.is-thread { display: grid; grid-template-columns: 74px minmax(0, 1fr); column-gap: 10px; }
|
||||
.app-user-workspace .creation-chat-composer.is-thread .creation-composer-mode-row { grid-column: 1; grid-row: 1 / 3; min-width: 0; padding: 8px 0 8px 8px; }
|
||||
.app-user-workspace .creation-chat-composer.is-thread .creation-composer-mode-row .creation-mode-tabs { display: grid; width: 100%; height: 100%; grid-template-rows: repeat(3, minmax(52px, 1fr)); align-self: stretch; margin: 0; padding: 4px; border-radius: 16px; transform: none; }
|
||||
.app-user-workspace .creation-chat-composer.is-thread .creation-composer-mode-row .creation-mode-button { height: auto; min-height: 52px; flex-direction: column; gap: 3px; padding: 5px 2px; font-size: 11px; }
|
||||
.app-user-workspace .creation-chat-composer.is-thread .creation-composer-mode-row .creation-mode-indicator { inset: 0; width: auto; height: auto; }
|
||||
.app-user-workspace .creation-chat-composer.is-thread .creation-chat-writing-surface,
|
||||
.app-user-workspace .creation-chat-composer.is-thread .creation-chat-dock { grid-column: 2; min-width: 0; }
|
||||
.app-user-workspace .creation-chat-composer.is-thread { display: flex; flex-direction: column; }
|
||||
.app-user-workspace .creation-chat-composer.is-thread .creation-chat-dock .creation-mode-tabs {
|
||||
display: grid;
|
||||
width: max-content;
|
||||
height: 32px;
|
||||
flex: 0 0 auto;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
margin: 0;
|
||||
padding: 2px;
|
||||
border-radius: 999px;
|
||||
background: var(--user-surface-muted);
|
||||
transform: none;
|
||||
}
|
||||
.app-user-workspace .creation-chat-composer.is-thread .creation-chat-dock .creation-mode-button {
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
flex-direction: row;
|
||||
gap: 4px;
|
||||
padding: 0 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 620;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.app-user-workspace .creation-chat-composer.is-thread .creation-chat-dock .creation-mode-button svg { width: 13px; height: 13px; }
|
||||
.app-user-workspace .creation-chat-composer.is-thread .creation-chat-dock .creation-mode-indicator { inset: 0; width: auto; height: auto; border-radius: 999px; }
|
||||
.app-user-workspace .creation-composer-stage { display: flex; min-width: 0; align-items: stretch; gap: 14px; }
|
||||
.app-user-workspace .creation-composer-stage.is-thread-mode { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
|
||||
.app-user-workspace .creation-composer-stage.is-thread-mode > .creation-mode-tabs { display: grid; width: 76px; grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(54px, 1fr)); align-self: stretch; margin: 0; padding: 4px; border-radius: 18px; }
|
||||
@@ -564,7 +586,7 @@
|
||||
.creation-model-picker-surface .creation-model-picker-menu.is-model-list .canvas-model-picker-brand.is-active { border-color: var(--workspace-border); background: var(--workspace-surface-hover); }
|
||||
.creation-model-picker-surface .creation-model-picker-menu.is-model-list .canvas-model-picker-model-pane { border: 0; margin: 0; padding: 0; }
|
||||
|
||||
@media (max-width: 720px) { .creation-floating-prompt { top: 8px; width: calc(100% - 24px); min-height: 60px; gap: 10px; padding: 8px 9px 8px 16px; border-radius: 19px; } .creation-floating-prompt input { font-size: 14px; } .creation-floating-prompt button { width: 40px; height: 40px; flex-basis: 40px; } .creation-model-picker-surface .creation-model-picker-menu:is(.is-brand-list, .is-model-list) { width: calc(100vw - 24px) !important; } .creation-model-picker-surface .creation-model-picker-menu.is-model-list .canvas-model-picker-two-pane { grid-template-columns: minmax(0, 1fr); min-height: 0; } .creation-model-picker-surface .creation-model-picker-menu.is-model-list .canvas-model-picker-brand-rail { display: none; } .app-user-workspace .creation-chat-composer.is-thread { grid-template-columns: 58px minmax(0, 1fr); column-gap: 4px; } .app-user-workspace .creation-chat-composer.is-thread .creation-composer-mode-row { padding: 6px 0 6px 6px; } }
|
||||
@media (max-width: 720px) { .creation-floating-prompt { top: 8px; width: calc(100% - 24px); min-height: 60px; gap: 10px; padding: 8px 9px 8px 16px; border-radius: 19px; } .creation-floating-prompt input { font-size: 14px; } .creation-floating-prompt button { width: 40px; height: 40px; flex-basis: 40px; } .creation-model-picker-surface .creation-model-picker-menu:is(.is-brand-list, .is-model-list) { width: calc(100vw - 24px) !important; } .creation-model-picker-surface .creation-model-picker-menu.is-model-list .canvas-model-picker-two-pane { grid-template-columns: minmax(0, 1fr); min-height: 0; } .creation-model-picker-surface .creation-model-picker-menu.is-model-list .canvas-model-picker-brand-rail { display: none; } .app-user-workspace .creation-chat-composer.is-thread .creation-chat-dock .creation-mode-tabs { height: 30px; } .app-user-workspace .creation-chat-composer.is-thread .creation-chat-dock .creation-mode-button { height: 26px; min-height: 26px; padding: 0 6px; font-size: 10px; } }
|
||||
|
||||
/* Shared controls: one size system and one state vocabulary. */
|
||||
.app-product-workspace :where(.ant-btn, .ant-input-affix-wrapper, .ant-select-selector, .ant-picker, .ant-input-number),
|
||||
|
||||
@@ -28,12 +28,13 @@ describe("creation library button", () => {
|
||||
const modePickerIndex = dockSource.indexOf("<ModePicker mode={props.mode}");
|
||||
|
||||
expect(modePickerIndex).toBeGreaterThanOrEqual(0);
|
||||
expect(source).not.toContain("creation-composer-mode-row");
|
||||
expect(dockSource).not.toContain('aria-label="打开素材库选择参考内容"');
|
||||
expect(dockSource).not.toContain('aria-label="从本机上传附件"');
|
||||
expect(source).toContain("onClick={props.onOpenLibrary}");
|
||||
expect(source).toContain("creation-reference-add-button");
|
||||
expect(source).toContain('showSelectedPrice={false} showOptionPrices variant="creation"');
|
||||
expect(source).toContain("canvas-node-composer-submit-cost");
|
||||
expect(source).toContain("creation-submit-cost");
|
||||
});
|
||||
|
||||
test("uploads from the library without adding a reference before confirmation", () => {
|
||||
@@ -68,7 +69,7 @@ describe("creation library button", () => {
|
||||
const source = readCreateWorkspaceSource();
|
||||
const styles = readFileSync(resolve(import.meta.dir, "../src/styles/globals.css"), "utf8");
|
||||
|
||||
expect(source).toContain('import { Reorder } from "motion/react"');
|
||||
expect(source).toContain("import { Reorder, LayoutGroup, motion, useReducedMotion } from \"motion/react\"");
|
||||
expect(source).toContain("<Reorder.Group");
|
||||
expect(source).toContain('axis="x"');
|
||||
expect(source).toContain("values={visibleAttachments}");
|
||||
@@ -144,3 +145,38 @@ describe("creation library button", () => {
|
||||
expect(source).not.toContain("onClick={() => props.fileInputRef.current?.click()}");
|
||||
});
|
||||
});
|
||||
|
||||
describe("creation homepage default mode", () => {
|
||||
test("opens the empty homepage on image generation instead of video", () => {
|
||||
const source = readCreateSource();
|
||||
expect(source).toContain("import { defaultCreationMode, modeLabels,");
|
||||
expect(source).toContain("initialComposerPreferences.mode || defaultCreationMode");
|
||||
expect(source).toContain("saved.mode || defaultCreationMode");
|
||||
expect(source).not.toContain('mode || "video"');
|
||||
});
|
||||
});
|
||||
|
||||
describe("creation thread chrome", () => {
|
||||
test("docks the conversation toolbar into the workspace top bar and keeps a compact thread composer", () => {
|
||||
const workspace = readCreateWorkspaceSource();
|
||||
const topBar = readFileSync(resolve(import.meta.dir, "../src/components/layout/workspace-top-bar.tsx"), "utf8");
|
||||
const product = readFileSync(resolve(import.meta.dir, "../src/styles/workspace-product.css"), "utf8");
|
||||
|
||||
expect(workspace).toContain("useWorkspaceTopBarMount");
|
||||
expect(workspace).toContain("createPortal(toolbar, mount)");
|
||||
expect(topBar).toContain("WorkspaceTopBarExtensionSlot");
|
||||
expect(product).toContain(".creation-chat-dock .creation-mode-tabs");
|
||||
expect(product).not.toContain("creation-composer-mode-row");
|
||||
});
|
||||
|
||||
test("parameter popovers use the user surface without a hairline stroke", () => {
|
||||
const css = readFileSync(resolve(import.meta.dir, "../src/pages/create/creation-product.css"), "utf8");
|
||||
|
||||
expect(css).toContain(".creation-control-popover .ant-popover-inner");
|
||||
expect(css).toContain("background: var(--user-surface-raised) !important");
|
||||
expect(css).toContain("border: 0 !important");
|
||||
expect(css).toContain("--border: transparent");
|
||||
expect(css).toContain(".creation-choice-grid button.is-selected");
|
||||
expect(css).toContain("background: var(--user-control-pressed) !important");
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user