格式化BGM界面涉及的两个文件
对 index.css 与 ImageCanvasBackgroundMusicPresetMarquee.tsx 执行 Prettier, 消除评审提到的格式检查告警。纯格式改动,语义不变。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -47,7 +47,10 @@ const PRESET_HOVER_CONTROL_QUERY = '(hover: hover) and (pointer: fine)';
|
||||
type BackgroundMusicPresetZone = 'left' | 'center' | 'right' | null;
|
||||
|
||||
function readsMediaQueryMatches(query: string) {
|
||||
if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
|
||||
if (
|
||||
typeof window === 'undefined' ||
|
||||
typeof window.matchMedia !== 'function'
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return window.matchMedia(query).matches;
|
||||
@@ -102,7 +105,9 @@ export function ImageCanvasBackgroundMusicPresetMarquee({
|
||||
const prefersReducedMotion = useMediaQueryMatches(
|
||||
PRESET_REDUCED_MOTION_QUERY,
|
||||
);
|
||||
const supportsHoverControls = useMediaQueryMatches(PRESET_HOVER_CONTROL_QUERY);
|
||||
const supportsHoverControls = useMediaQueryMatches(
|
||||
PRESET_HOVER_CONTROL_QUERY,
|
||||
);
|
||||
const [isTouchScrolling, setIsTouchScrolling] = useState(false);
|
||||
|
||||
const viewportRef = useRef<HTMLDivElement | null>(null);
|
||||
@@ -110,7 +115,9 @@ export function ImageCanvasBackgroundMusicPresetMarquee({
|
||||
const queueWidthRef = useRef(0);
|
||||
const frameRef = useRef<number | null>(null);
|
||||
const frameTimestampRef = useRef<number | null>(null);
|
||||
const touchSettleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const touchSettleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
// 归位只按实测的单份队列宽度取模,不硬编码 chip 或轨道宽度。
|
||||
const normalizeScrollPosition = useCallback(() => {
|
||||
@@ -316,7 +323,8 @@ export function ImageCanvasBackgroundMusicPresetMarquee({
|
||||
if (!viewport) {
|
||||
return;
|
||||
}
|
||||
const step = viewport.getBoundingClientRect().width * PRESET_ARROW_STEP_RATIO;
|
||||
const step =
|
||||
viewport.getBoundingClientRect().width * PRESET_ARROW_STEP_RATIO;
|
||||
// 离散滚动不使用平滑动画,供触摸和键盘使用。
|
||||
viewport.scrollLeft += direction * (step || PRESET_FAST_VELOCITY);
|
||||
normalizeScrollPosition();
|
||||
|
||||
+9
-7
@@ -963,7 +963,6 @@ html[data-mobile-keyboard-open='true'] #root {
|
||||
font-family: var(--platform-font-family) !important;
|
||||
}
|
||||
|
||||
|
||||
.platform-brand-logo {
|
||||
display: inline-flex;
|
||||
flex: none;
|
||||
@@ -3303,8 +3302,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.creation-landing__asset-waterfall--masonry
|
||||
> .creation-landing__asset-card {
|
||||
.creation-landing__asset-waterfall--masonry > .creation-landing__asset-card {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -3440,7 +3438,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.creation-landing__asset-preview--campaign .creation-landing__asset-preview-media {
|
||||
.creation-landing__asset-preview--campaign
|
||||
.creation-landing__asset-preview-media {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
@@ -6769,7 +6768,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
display: grid;
|
||||
grid-template-columns: max-content minmax(0, 1fr) max-content max-content max-content;
|
||||
align-items: center;
|
||||
gap: 0.10rem;
|
||||
gap: 0.1rem;
|
||||
justify-content: start;
|
||||
position: relative;
|
||||
border-top: 1px solid rgba(15, 23, 42, 0.06);
|
||||
@@ -8076,7 +8075,8 @@ button.image-canvas-editor__reference-chip:disabled {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.image-canvas-editor__asset-context-menu button:disabled
|
||||
.image-canvas-editor__asset-context-menu
|
||||
button:disabled
|
||||
.image-canvas-editor__asset-context-menu-reason {
|
||||
color: #94a3b8;
|
||||
}
|
||||
@@ -17082,7 +17082,9 @@ button {
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: var(--image-canvas-brand-border-strong, #f97316);
|
||||
transition: left 0.12s ease, width 0.12s ease;
|
||||
transition:
|
||||
left 0.12s ease,
|
||||
width 0.12s ease;
|
||||
}
|
||||
|
||||
.image-canvas-editor__background-music-presets-hairline--left::after {
|
||||
|
||||
Reference in New Issue
Block a user