@@ -67,9 +67,7 @@ export const ClueBookModal = ({
@@ -81,8 +79,8 @@ export const ClueBookModal = ({
@@ -126,37 +119,27 @@ export const ClueBookModal = ({
暂无线索
) : (
clues.map((clue) => {
- const isSelected = clue.id === selectedClueId;
- const isCollected = clue.collected;
+ const isSelected = clue.id === selectedClueId
+ const isCollected = clue.collected
return (
{
if (isCollected) {
- setSelectedClueId(clue.id);
+ setSelectedClueId(clue.id)
}
}}
>
{/* 线索缩略图 - 带倾斜效果 */}
- );
+ )
})
)}
{/* 显示线索详情图片 */}
- );
-};
+ )
+}
diff --git a/src/components/clue/ClueHintModal.tsx b/src/components/clue/ClueHintModal.tsx
index 45820da..1e65af5 100644
--- a/src/components/clue/ClueHintModal.tsx
+++ b/src/components/clue/ClueHintModal.tsx
@@ -1,24 +1,24 @@
-import { useEffect, useRef, useState } from "react";
-import { Image } from "@/components";
-import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { useEffect, useRef, useState } from 'react'
+import { Image } from '@/components'
+import { getBackgroundImage, getStaticImage } from '@/lib/utils'
export interface ClueHint {
- id: string;
- name: string;
+ id: string
+ name: string
position: {
- top: string;
- left: string;
- width: string;
- height: string;
- };
+ top: string
+ left: string
+ width: string
+ height: string
+ }
}
export interface ClueHintModalProps {
- visible: boolean;
- backgroundImage: string;
- clues: ClueHint[];
- onClose: () => void;
- sourceContainerRef?: React.RefObject
-
-
setShowClueHint(true)}
/>
@@ -166,7 +149,7 @@ export const ClueBookModal = ({
) : (
@@ -181,5 +164,5 @@ export const ClueBookModal = ({
/>
- setShowClueHint(false)}
- />
-
+ {showClueHint && hasClueHint(selectedClue.id) && getClueHintImage && (
+
+
+ )}
{/* 线索提示按钮（右下角） */}
{hasClueHint(selectedClue.id) && (
+ setShowClueHint(false)}
+ />
- )}
+
- {selectedClue ? "该线索尚未收集" : "请选择一个线索查看详情"}
+ {selectedClue ? '该线索尚未收集' : '请选择一个线索查看详情'}
)}
+
- );
-};
-
-export default MatchQuizPanel;
+ )
+}
+export default MatchQuizPanel
diff --git a/src/components/layout/quiz/MultipleChoiceQuizPanel.tsx b/src/components/layout/quiz/MultipleChoiceQuizPanel.tsx
index 4c95f7c..5c706a1 100644
--- a/src/components/layout/quiz/MultipleChoiceQuizPanel.tsx
+++ b/src/components/layout/quiz/MultipleChoiceQuizPanel.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect } from "react";
-import { MultipleChoice } from "@/components";
-import type { MultipleChoiceQuizPanelProps } from "./types";
+import { useState, useEffect } from 'react'
+import { MultipleChoice } from '@/components'
+import type { MultipleChoiceQuizPanelProps } from './types'
/**
* 多选题面板组件
@@ -44,94 +44,85 @@ const MultipleChoiceQuizPanel = ({
disabled = false,
minSelections,
maxSelections,
- submitText = "提交",
+ submitText = '提交',
}: MultipleChoiceQuizPanelProps) => {
- const [selectedValues, setSelectedValues] = useState
{/* 蒙版背景 */}
-
+
{/* 背景图片容器 - 使用缩放匹配源容器尺寸并居中 */}
@@ -68,9 +65,9 @@ const ExhibitDescriptionNarration = ({
exit={{ opacity: 0, x: -20 }}
transition={{ duration: 0.3 }}
className={cn(
- "max-w-[580px] px-12 py-14",
- "shadow-black/60",
- "relative overflow-hidden",
+ 'max-w-[580px] px-12 py-14',
+ 'shadow-black/60',
+ 'relative overflow-hidden',
className
)}
>
@@ -84,12 +81,10 @@ const ExhibitDescriptionNarration = ({
className="absolute inset-0 pointer-events-none box-border"
aria-hidden="true"
style={{
- border: "40px solid transparent",
- borderImageSource: getBackgroundImage(
- "components/narration/b.png"
- ),
- borderImageSlice: "40 fill",
- borderImageRepeat: "stretch round",
+ border: '40px solid transparent',
+ borderImageSource: getBackgroundImage('components/narration/b.png'),
+ borderImageSlice: '40 fill',
+ borderImageRepeat: 'stretch round',
}}
/>
{/* 线索标记 */}
{clues.map(
(clue) =>
- clue.position.width !== "0%" && (
+ clue.position.width !== '0%' && (
- );
-};
+ )
+}
diff --git a/src/components/clue/index.ts b/src/components/clue/index.ts
index 0188cb9..3a760b7 100644
--- a/src/components/clue/index.ts
+++ b/src/components/clue/index.ts
@@ -1,5 +1,5 @@
-export { ClueHintModal } from "./ClueHintModal";
-export type { ClueHintModalProps, ClueHint } from "./ClueHintModal";
+export { ClueHintModal } from './ClueHintModal'
+export type { ClueHintModalProps, ClueHint } from './ClueHintModal'
-export { ClueBookModal } from "./ClueBookModal";
-export type { ClueBookModalProps } from "./ClueBookModal";
+export { ClueBookModal } from './ClueBookModal'
+export type { ClueBookModalProps } from './ClueBookModal'
diff --git a/src/components/cursor/index.tsx b/src/components/cursor/index.tsx
index b80331e..4d1032f 100644
--- a/src/components/cursor/index.tsx
+++ b/src/components/cursor/index.tsx
@@ -1,73 +1,65 @@
-import { cn, getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { cn, getBackgroundImage, getStaticImage } from '@/lib/utils'
// 原始尺寸（保持比例）
const ORIGINAL_SIZES = {
read: { width: 116, height: 140 },
unread: { width: 120, height: 121 },
-} as const;
+} as const
interface CursorProps {
- className?: string;
- onClick: () => void;
+ className?: string
+ onClick: () => void
/** 已阅读 / 已完成 状态；true 时显示预留的 div，由你自行实现效果 */
- read?: boolean;
+ read?: boolean
/** 尺寸缩放比例，默认为 1（原始大小） */
- size?: number;
+ size?: number
/** 禁用状态，禁用时无法点击但不影响 read 状态显示。当 read=true 时，disabled 不生效 */
- disabled?: boolean;
+ disabled?: boolean
}
-const Cursor = ({
- className,
- onClick,
- read = false,
- size = 1,
- disabled = false,
-}: CursorProps) => {
- const baseSize = read ? ORIGINAL_SIZES.read : ORIGINAL_SIZES.unread;
+const Cursor = ({ className, onClick, read = false, size = 1, disabled = false }: CursorProps) => {
+ const baseSize = read ? ORIGINAL_SIZES.read : ORIGINAL_SIZES.unread
// 当 read=true 时，disabled 不生效；只有 read=false 且 disabled=true 时才禁用
- const isDisabled = disabled && !read;
+ const isDisabled = disabled && !read
const handleClick = (e: React.MouseEvent) => {
if (isDisabled) {
- e.preventDefault();
- e.stopPropagation();
- return;
+ e.preventDefault()
+ e.stopPropagation()
+ return
}
- onClick();
- };
+ onClick()
+ }
const handleTouchEnd = (e: React.TouchEvent) => {
- if (isDisabled) return;
- e.preventDefault();
- onClick();
- };
+ if (isDisabled) return
+ e.preventDefault()
+ onClick()
+ }
return (
{!read && (
![]({getStaticImage("components/point.png")})
)}
- );
-};
+ )
+}
-export default Cursor;
+export default Cursor
diff --git a/src/components/exhibit/ExhibitDescriptionNarration.tsx b/src/components/exhibit/ExhibitDescriptionNarration.tsx
index de8a2fb..a013057 100644
--- a/src/components/exhibit/ExhibitDescriptionNarration.tsx
+++ b/src/components/exhibit/ExhibitDescriptionNarration.tsx
@@ -1,21 +1,21 @@
-import { useEffect } from "react";
-import { cn, getBackgroundImage } from "@/lib/utils";
-import { AnimatePresence, motion } from "framer-motion";
-import { useAudioManager } from "@/hooks/useAudioManager";
+import { useEffect } from 'react'
+import { cn, getBackgroundImage } from '@/lib/utils'
+import { AnimatePresence, motion } from 'framer-motion'
+import { useAudioManager } from '@/hooks/useAudioManager'
export interface ExhibitDescriptionNarrationProps {
/** 描述文本 */
- text?: string;
+ text?: string
/** 是否可见 */
- visible?: boolean;
+ visible?: boolean
/** 是否自动播放音频（默认 true） */
- autoPlay?: boolean;
+ autoPlay?: boolean
/** 音频文件地址 */
- audioSrc?: string;
+ audioSrc?: string
/** 音频分组 id，相同 channel 内互斥，不同 channel 可同时播放；不传则全局互斥 */
- audioChannelId?: string;
+ audioChannelId?: string
/** 额外的自定义类 */
- className?: string;
+ className?: string
}
/**
@@ -34,30 +34,27 @@ const ExhibitDescriptionNarration = ({
}: ExhibitDescriptionNarrationProps) => {
// 音频管理：默认全局互斥，如果传了 audioChannelId 则按 channel 互斥
const { currentSrc, isPlaying, play, stop } = useAudioManager(
- audioChannelId
- ? { mode: "channel", channelId: audioChannelId }
- : { mode: "global" }
- );
+ audioChannelId ? { mode: 'channel', channelId: audioChannelId } : { mode: 'global' }
+ )
// 当前组件对应的音频是否正在播放
- const isCurrentAudioPlaying =
- audioSrc && currentSrc === audioSrc && isPlaying;
+ const isCurrentAudioPlaying = audioSrc && currentSrc === audioSrc && isPlaying
// 自动播放音频
useEffect(() => {
if (visible && autoPlay && audioSrc) {
- play(audioSrc);
+ play(audioSrc)
}
- }, [visible, autoPlay, audioSrc, play]);
+ }, [visible, autoPlay, audioSrc, play])
// 组件不可见时停止音频（仅当当前播放的是该组件的 audioSrc）
useEffect(() => {
if (!visible && audioSrc && currentSrc === audioSrc) {
- stop();
+ stop()
}
- }, [visible, audioSrc, currentSrc, stop]);
+ }, [visible, audioSrc, currentSrc, stop])
- if (!text) return null;
+ if (!text) return null
return (
)}
@@ -107,11 +102,7 @@ const ExhibitDescriptionNarration = ({
className="w-10 h-10 flex items-center justify-center rounded-full bg-white/30 hover:bg-white/50 transition-colors shadow-lg"
aria-label="播放"
>
-
+
- );
-};
+ )
+}
-export default MultipleChoiceQuizPanel;
+export default MultipleChoiceQuizPanel
diff --git a/src/components/layout/quiz/QuizPanal.tsx b/src/components/layout/quiz/QuizPanal.tsx
index da1f918..c5479c9 100644
--- a/src/components/layout/quiz/QuizPanal.tsx
+++ b/src/components/layout/quiz/QuizPanal.tsx
@@ -1,6 +1,6 @@
-import { SingleChoice } from "@/components";
-import { getBackgroundImage } from "@/lib/utils";
-import type { QuizPanelProps } from "./types";
+import { SingleChoice } from '@/components'
+import { getBackgroundImage } from '@/lib/utils'
+import type { QuizPanelProps } from './types'
/** 单选题展示面板：题干使用“底板”背景，点击即选，hover 高亮 */
const QuizPanel = ({
@@ -12,13 +12,10 @@ const QuizPanel = ({
error,
onChange,
}: QuizPanelProps) => {
- if (!visible) return null;
+ if (!visible) return null
return (
-
{/* 题干卡片 */}
{/* 选项区域 - 可滚动 */}
@@ -149,56 +140,48 @@ const MultipleChoiceQuizPanel = ({
disabled ||
(!isSelected &&
maxSelections !== undefined &&
- selectedValues.length >= maxSelections);
+ selectedValues.length >= maxSelections)
// 处理选项点击
const handleClick = () => {
- if (isDisabled) return;
+ if (isDisabled) return
- let newValues: string[];
+ let newValues: string[]
if (isSelected) {
// 取消选择
- newValues = selectedValues.filter((v) => v !== option.value);
+ newValues = selectedValues.filter((v) => v !== option.value)
// 检查最小选择数量限制
- if (
- minSelections !== undefined &&
- newValues.length < minSelections
- ) {
- return;
+ if (minSelections !== undefined && newValues.length < minSelections) {
+ return
}
} else {
// 选择
// 检查最大选择数量限制
- if (
- maxSelections !== undefined &&
- selectedValues.length >= maxSelections
- ) {
- return;
+ if (maxSelections !== undefined && selectedValues.length >= maxSelections) {
+ return
}
- newValues = [...selectedValues, option.value];
+ newValues = [...selectedValues, option.value]
}
- handleOptionChange(newValues);
- };
+ handleOptionChange(newValues)
+ }
return (
- );
+ )
}}
/>
@@ -212,8 +195,7 @@ const MultipleChoiceQuizPanel = ({
disabled={
disabled ||
selectedValues.length === 0 ||
- (minSelections !== undefined &&
- selectedValues.length < minSelections)
+ (minSelections !== undefined && selectedValues.length < minSelections)
}
className="px-30 py-4 text-[28px] font-medium text-white bg-[#c2995f] rounded-[40px] transition-all duration-200 hover:brightness-110 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg"
>
@@ -223,7 +205,7 @@ const MultipleChoiceQuizPanel = ({
{title}
{/* 答案反馈 */}
- {error && (
-
- {error}
-
- )}
+ {error && {error}
}
{option.label}
+
- );
-};
+ )
+}
-export default QuizPanel;
+export default QuizPanel
diff --git a/src/components/layout/quiz/SelectFillQuizPanel.tsx b/src/components/layout/quiz/SelectFillQuizPanel.tsx
index a812f25..a59f604 100644
--- a/src/components/layout/quiz/SelectFillQuizPanel.tsx
+++ b/src/components/layout/quiz/SelectFillQuizPanel.tsx
@@ -1,8 +1,5 @@
-import { useEffect, useState } from "react";
-import type {
- SelectFillQuizPanelProps,
- SelectFillResult,
-} from "./types";
+import { useEffect, useState } from 'react'
+import type { SelectFillQuizPanelProps, SelectFillResult } from './types'
/**
* 选择填空题面板组件
@@ -21,131 +18,124 @@ const SelectFillQuizPanel = ({
onSubmit,
onError,
disabled = false,
- submitText = "提交",
+ submitText = '提交',
}: SelectFillQuizPanelProps) => {
- const [results, setResults] = useState([]);
- const [error, setError] = useState("");
+ const [results, setResults] = useState([])
+ const [error, setError] = useState('')
// 当前正在填的空的下标（从 0 开始），默认为第一个空
- const [activeBlankIndex, setActiveBlankIndex] = useState(0);
+ const [activeBlankIndex, setActiveBlankIndex] = useState(0)
// 关闭时重置内部状态
useEffect(() => {
if (!visible) {
- setResults([]);
- setError("");
- setActiveBlankIndex(0);
+ setResults([])
+ setError('')
+ setActiveBlankIndex(0)
}
- }, [visible]);
+ }, [visible])
- if (!visible) return null;
+ if (!visible) return null
const isAllFilled = blanks.every((blank) =>
- results.some((r) => r.blankId === blank.id && r.value !== "")
- );
+ results.some((r) => r.blankId === blank.id && r.value !== '')
+ )
// 点击下方选项：填入当前激活的空
const handleOptionClick = (value: string) => {
- if (disabled) return;
+ if (disabled) return
- const currentBlank = blanks[activeBlankIndex];
- if (!currentBlank) return;
+ const currentBlank = blanks[activeBlankIndex]
+ if (!currentBlank) return
const newResults: SelectFillResult[] = (() => {
- const others = results.filter((r) => r.blankId !== currentBlank.id);
- return [...others, { blankId: currentBlank.id, value }];
- })();
+ const others = results.filter((r) => r.blankId !== currentBlank.id)
+ return [...others, { blankId: currentBlank.id, value }]
+ })()
- setResults(newResults);
- setError("");
+ setResults(newResults)
+ setError('')
// 自动跳到下一个空
const nextIndex = (() => {
// 优先跳到还未填写的下一个空
for (let i = 0; i < blanks.length; i++) {
- const blankItem = blanks[i]!;
- const hasValue = newResults.some(
- (r) => r.blankId === blankItem.id && r.value !== ""
- );
- if (!hasValue) return i;
+ const blankItem = blanks[i]!
+ const hasValue = newResults.some((r) => r.blankId === blankItem.id && r.value !== '')
+ if (!hasValue) return i
}
- return activeBlankIndex;
- })();
- setActiveBlankIndex(nextIndex);
- };
+ return activeBlankIndex
+ })()
+ setActiveBlankIndex(nextIndex)
+ }
// 清空某个空
const handleClearBlank = (blankId: string) => {
- if (disabled) return;
- setResults(results.filter((r) => r.blankId !== blankId));
- setError("");
- const index = blanks.findIndex((b) => b.id === blankId);
- if (index >= 0) setActiveBlankIndex(index);
- };
+ if (disabled) return
+ setResults(results.filter((r) => r.blankId !== blankId))
+ setError('')
+ const index = blanks.findIndex((b) => b.id === blankId)
+ if (index >= 0) setActiveBlankIndex(index)
+ }
// 提交答案
const handleSubmit = () => {
- if (disabled) return;
+ if (disabled) return
// 有空未填
if (!isAllFilled) {
- const msg = "请先把所有空都填完再提交哦～";
- setError(msg);
- onError?.(msg);
- return;
+ const msg = '请先把所有空都填完再提交哦～'
+ setError(msg)
+ onError?.(msg)
+ return
}
const filledResults = blanks.map((blank) => {
- const r = results.find((res) => res.blankId === blank.id);
- return { blankId: blank.id, value: r?.value ?? "" };
- });
+ const r = results.find((res) => res.blankId === blank.id)
+ return { blankId: blank.id, value: r?.value ?? '' }
+ })
- let isCorrect = true;
+ let isCorrect = true
if (correctAnswers) {
for (const r of filledResults) {
- const expected = correctAnswers[r.blankId];
+ const expected = correctAnswers[r.blankId]
if (expected !== undefined && expected !== r.value) {
- isCorrect = false;
- break;
+ isCorrect = false
+ break
}
}
}
if (!correctAnswers) {
- onSubmit?.(filledResults, true);
- return;
+ onSubmit?.(filledResults, true)
+ return
}
if (isCorrect) {
- setError("");
- onSubmit?.(filledResults, true);
+ setError('')
+ onSubmit?.(filledResults, true)
} else {
- const msg =
- errorMessage || "还不太对，再仔细对照题干和提示想一想吧～";
- setError(msg);
+ const msg = errorMessage || '还不太对，再仔细对照题干和提示想一想吧～'
+ setError(msg)
// 错误后清空已填写内容，重新作答
- setResults([]);
- setActiveBlankIndex(0);
- onError?.(msg);
+ setResults([])
+ setActiveBlankIndex(0)
+ onError?.(msg)
}
- };
+ }
- const getBlankValue = (blankId: string) =>
- results.find((r) => r.blankId === blankId)?.value ?? "";
+ const getBlankValue = (blankId: string) => results.find((r) => r.blankId === blankId)?.value ?? ''
return (
- ("");
- const [error, setError] = useState("");
+ const [selectedValue, setSelectedValue] = useState('')
+ const [error, setError] = useState('')
// 当窗口关闭时，重置内部状态
useEffect(() => {
if (!visible) {
- setSelectedValue("");
- setError("");
+ setSelectedValue('')
+ setError('')
}
- }, [visible]);
+ }, [visible])
- if (!visible) return null;
+ if (!visible) return null
// 处理选项点击
const handleOptionClick = (value: string) => {
- if (disabled) return;
+ if (disabled) return
- setSelectedValue(value);
- setError("");
+ setSelectedValue(value)
+ setError('')
// 验证答案
- const isCorrect =
- correctAnswer !== undefined ? value === correctAnswer : undefined;
+ const isCorrect = correctAnswer !== undefined ? value === correctAnswer : undefined
// 如果提供了正确答案，进行验证
if (correctAnswer !== undefined) {
if (isCorrect) {
// 答题成功：清空状态，执行 onSubmit（外部控制关闭窗口）
- setSelectedValue("");
- setError("");
- onSubmit?.(value, true);
+ setSelectedValue('')
+ setError('')
+ onSubmit?.(value, true)
} else {
// 答题失败：清空状态，执行 onError，允许重新选择
- setSelectedValue("");
- const customError = onWrongSelect?.(value);
- const errorMsg =
- customError || errorMessage || "很抱歉，你选错了！请你再思考一下吧！";
- setError(errorMsg);
- onError?.(errorMsg);
+ setSelectedValue('')
+ const customError = onWrongSelect?.(value)
+ const errorMsg = customError || errorMessage || '很抱歉，你选错了！请你再思考一下吧！'
+ setError(errorMsg)
+ onError?.(errorMsg)
}
} else {
// 没有提供正确答案，直接提交
- setSelectedValue("");
- setError("");
- onSubmit?.(value, true);
+ setSelectedValue('')
+ setError('')
+ onSubmit?.(value, true)
}
- };
+ }
return (
-
{/* 题干卡片 */}
@@ -40,24 +37,21 @@ const QuizPanel = ({
className="w-[1431px] h-[156px] flex items-center px-16 text-[28px] leading-snug text-[#fdf5e6] bg-cover bg-center bg-no-repeat transition-all duration-150"
style={{
backgroundImage: getBackgroundImage(
- isSelected
- ? "components/quiz/选中"
- : "components/quiz/未选择"
+ isSelected ? 'components/quiz/选中' : 'components/quiz/未选择'
),
- filter: isSelected ? undefined : "brightness(0.96)",
+ filter: isSelected ? undefined : 'brightness(0.96)',
}}
onMouseEnter={(e) => {
- if (isSelected) return;
- (e.currentTarget as HTMLDivElement).style.backgroundImage =
- getBackgroundImage("components/quiz/选中");
- (e.currentTarget as HTMLDivElement).style.filter = "";
+ if (isSelected) return
+ ;(e.currentTarget as HTMLDivElement).style.backgroundImage =
+ getBackgroundImage('components/quiz/选中')
+ ;(e.currentTarget as HTMLDivElement).style.filter = ''
}}
onMouseLeave={(e) => {
- if (isSelected) return;
- (e.currentTarget as HTMLDivElement).style.backgroundImage =
- getBackgroundImage("components/quiz/未选择");
- (e.currentTarget as HTMLDivElement).style.filter =
- "brightness(0.96)";
+ if (isSelected) return
+ ;(e.currentTarget as HTMLDivElement).style.backgroundImage =
+ getBackgroundImage('components/quiz/未选择')
+ ;(e.currentTarget as HTMLDivElement).style.filter = 'brightness(0.96)'
}}
>
{option.label}
@@ -67,15 +61,11 @@ const QuizPanel = ({
/>
{/* 答案反馈 */}
- {error && (
-
- {error}
-
- )}
+ {error && {error}
}
+
- );
-};
-
-export default SelectFillQuizPanel;
-
+ )
+}
+export default SelectFillQuizPanel
diff --git a/src/components/layout/quiz/SingleChoiceQuizPanel.tsx b/src/components/layout/quiz/SingleChoiceQuizPanel.tsx
index 6f701ea..c81264b 100644
--- a/src/components/layout/quiz/SingleChoiceQuizPanel.tsx
+++ b/src/components/layout/quiz/SingleChoiceQuizPanel.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react";
-import { SingleChoice } from "@/components";
-import type { SingleChoiceQuizPanelProps } from "./types";
+import { useEffect, useState } from 'react'
+import { SingleChoice } from '@/components'
+import type { SingleChoiceQuizPanelProps } from './types'
/**
* 单选题面板组件
@@ -39,70 +39,61 @@ const SingleChoiceQuizPanel = ({
onError,
disabled = false,
}: SingleChoiceQuizPanelProps) => {
- const [selectedValue, setSelectedValue] = useState
{/* 题干 + 空格区域 */}
{/* 选项区域 */}
@@ -207,8 +193,8 @@ const SelectFillQuizPanel = ({
disabled={disabled}
className={`min-w-[90px] h-[72px] px-6 rounded-2xl text-[28px] font-medium border-2 transition-all ${
disabled
- ? "opacity-60 cursor-not-allowed bg-[#d7b888]/60 border-[#d4c5a9]/60 text-[#5c3e2e]/60"
- : "cursor-pointer bg-[#d7b888] border-[#d4c5a9] text-[#5c3e2e] hover:bg-gradient-to-r hover:from-[#ddf3e1] hover:to-[#fbdd97] hover:border-[#f0be75]"
+ ? 'opacity-60 cursor-not-allowed bg-[#d7b888]/60 border-[#d4c5a9]/60 text-[#5c3e2e]/60'
+ : 'cursor-pointer bg-[#d7b888] border-[#d4c5a9] text-[#5c3e2e] hover:bg-gradient-to-r hover:from-[#ddf3e1] hover:to-[#fbdd97] hover:border-[#f0be75]'
}`}
onClick={() => handleOptionClick(option.value)}
>
@@ -231,9 +217,7 @@ const SelectFillQuizPanel = ({
{titlePrefix && {titlePrefix}}
{blanks.map((blank, index) => {
- const value = getBlankValue(blank.id);
- const isActive = index === activeBlankIndex;
+ const value = getBlankValue(blank.id)
+ const isActive = index === activeBlankIndex
return (
{blank.prefix && {blank.prefix}}
@@ -153,29 +143,29 @@ const SelectFillQuizPanel = ({
type="button"
className={`inline-flex items-center justify-center min-w-[120px] h-[52px] px-4 mx-2 rounded-xl border-2 text-[28px] transition-all ${
disabled
- ? "opacity-60 cursor-not-allowed border-[#d4c5a9]/40"
- : "cursor-pointer"
+ ? 'opacity-60 cursor-not-allowed border-[#d4c5a9]/40'
+ : 'cursor-pointer'
} ${
value
- ? "border-[#f0be75] bg-gradient-to-br from-[#3a3020] to-[#2a2520] text-[#f0be75]"
- : "border-[#d4c5a9]/60 bg-white/10 text-white/40"
+ ? 'border-[#f0be75] bg-gradient-to-br from-[#3a3020] to-[#2a2520] text-[#f0be75]'
+ : 'border-[#d4c5a9]/60 bg-white/10 text-white/40'
} ${
isActive && !disabled
- ? "ring-2 ring-[#f0be75] ring-offset-2 ring-offset-black"
- : ""
+ ? 'ring-2 ring-[#f0be75] ring-offset-2 ring-offset-black'
+ : ''
}`}
onClick={() => {
- if (disabled) return;
- setActiveBlankIndex(index);
+ if (disabled) return
+ setActiveBlankIndex(index)
}}
>
- {value || "____"}
+ {value || '____'}
{value && !disabled && (
{
- e.stopPropagation();
- handleClearBlank(blank.id);
+ e.stopPropagation()
+ handleClearBlank(blank.id)
}}
>
×
@@ -184,17 +174,13 @@ const SelectFillQuizPanel = ({
{blank.suffix && {blank.suffix}}
- );
+ )
})}
{titleSuffix && {titleSuffix}}
{/* 答案反馈 */}
- {error && (
-
- {error}
-
- )}
+ {error && {error}
}
+
- );
-};
+ )
+}
-export default SingleChoiceQuizPanel;
+export default SingleChoiceQuizPanel
diff --git a/src/components/layout/quiz/index.ts b/src/components/layout/quiz/index.ts
index 80f7680..776ed1f 100644
--- a/src/components/layout/quiz/index.ts
+++ b/src/components/layout/quiz/index.ts
@@ -1,9 +1,9 @@
// 新组件
-export { default as SingleChoiceQuizPanel } from "./SingleChoiceQuizPanel";
-export { default as MultipleChoiceQuizPanel } from "./MultipleChoiceQuizPanel";
-export { default as DragQuizPanel } from "./DragQuizPanel";
-export { default as MatchQuizPanel } from "./MatchQuizPanel";
-export { default as SelectFillQuizPanel } from "./SelectFillQuizPanel";
+export { default as SingleChoiceQuizPanel } from './SingleChoiceQuizPanel'
+export { default as MultipleChoiceQuizPanel } from './MultipleChoiceQuizPanel'
+export { default as DragQuizPanel } from './DragQuizPanel'
+export { default as MatchQuizPanel } from './MatchQuizPanel'
+export { default as SelectFillQuizPanel } from './SelectFillQuizPanel'
export type {
SingleChoiceQuizPanelProps,
MultipleChoiceQuizPanelProps,
@@ -14,8 +14,8 @@ export type {
SelectFillQuizPanelProps,
SelectFillBlank,
SelectFillResult,
-} from "./types";
+} from './types'
// 保留旧组件以保持向后兼容
-export { default as QuizPanel } from "./QuizPanal";
-export type { QuizPanelProps } from "./types";
\ No newline at end of file
+export { default as QuizPanel } from './QuizPanal'
+export type { QuizPanelProps } from './types'
diff --git a/src/components/layout/quiz/types.ts b/src/components/layout/quiz/types.ts
index 1199140..52d8355 100644
--- a/src/components/layout/quiz/types.ts
+++ b/src/components/layout/quiz/types.ts
@@ -3,188 +3,188 @@ import {
MultipleChoiceOption,
DragFillResult,
DragFillBlank,
-} from "@/components";
+} from '@/components'
/** 拖拽题面板配置 */
export interface DragQuizPanelProps {
/** 是否可见 */
- visible: boolean;
+ visible: boolean
/** z-index 层级 */
- zIndex?: number;
+ zIndex?: number
/** 题目标题（可选） */
- title?: string;
+ title?: string
/** 题干前缀文本（空白区域之前的文本） */
- questionPrefix?: string;
+ questionPrefix?: string
/** 题干后缀文本（空白区域之后的文本） */
- questionSuffix?: string;
+ questionSuffix?: string
/** 选项列表 */
- options: { value: string; label: string }[];
+ options: { value: string; label: string }[]
/** 空白区域列表 */
- blanks: DragFillBlank[];
+ blanks: DragFillBlank[]
/** 空白之间的分隔符数组（可选，如果不提供则使用默认的"、"） */
- blankSeparators?: string[];
+ blankSeparators?: string[]
/** 当前值 */
- value: DragFillResult[];
+ value: DragFillResult[]
/** 错误提示信息 */
- error?: string;
+ error?: string
/** 值变化回调 */
- onChange: (value: DragFillResult[]) => void;
+ onChange: (value: DragFillResult[]) => void
}
/** 单选题面板配置 */
export interface SingleChoiceQuizPanelProps {
/** 是否可见 */
- visible: boolean;
+ visible: boolean
/** z-index 层级 */
- zIndex?: number;
+ zIndex?: number
/** 题目 */
- title: string;
+ title: string
/** 选项列表 */
- options: SingleChoiceOption[];
+ options: SingleChoiceOption[]
/** 正确答案（可选，用于验证） */
- correctAnswer?: string;
+ correctAnswer?: string
/** 自定义错误提示信息（答案错误时显示） */
- errorMessage?: string;
+ errorMessage?: string
/** 提交回调，返回用户选择和是否正确 */
- onSubmit?: (value: string, isCorrect: boolean) => void;
+ onSubmit?: (value: string, isCorrect: boolean) => void
/** 答错时回调，可返回自定义解析文案覆盖默认 errorMessage */
- onWrongSelect?: (value: string) => string | void;
+ onWrongSelect?: (value: string) => string | void
/** 错误回调（可选） */
- onError?: (error: string) => void;
+ onError?: (error: string) => void
/** 是否禁用 */
- disabled?: boolean;
+ disabled?: boolean
}
/** 多选题面板配置 */
export interface MultipleChoiceQuizPanelProps {
/** 是否可见 */
- visible: boolean;
+ visible: boolean
/** z-index 层级 */
- zIndex?: number;
+ zIndex?: number
/** 题目 */
- title: string;
+ title: string
/** 选项列表 */
- options: MultipleChoiceOption[];
+ options: MultipleChoiceOption[]
/** 正确答案数组（可选，用于验证） */
- correctAnswer?: string[];
+ correctAnswer?: string[]
/** 自定义错误提示信息（答案错误时显示），可以是字符串或函数（根据用户选择返回不同提示） */
- errorMessage?: string | ((selectedValues: string[]) => string);
+ errorMessage?: string | ((selectedValues: string[]) => string)
/** 自定义最小选择数量不足时的提示信息 */
- minSelectionsErrorMessage?: string;
+ minSelectionsErrorMessage?: string
/** 提交回调，返回用户选择和是否正确 */
- onSubmit?: (values: string[], isCorrect: boolean) => void;
+ onSubmit?: (values: string[], isCorrect: boolean) => void
/** 错误回调（可选） */
- onError?: (error: string) => void;
+ onError?: (error: string) => void
/** 是否禁用 */
- disabled?: boolean;
+ disabled?: boolean
/** 最小选择数量 */
- minSelections?: number;
+ minSelections?: number
/** 最大选择数量 */
- maxSelections?: number;
+ maxSelections?: number
/** 提交按钮文本 */
- submitText?: string;
+ submitText?: string
}
/** 连线题项 */
export interface MatchQuizItem {
/** 唯一标识 */
- id: string;
+ id: string
/** 显示文本 */
- label: string;
+ label: string
}
/** 连线题匹配 */
export interface MatchQuizMatch {
/** 左列项ID */
- leftId: string;
+ leftId: string
/** 右列项ID */
- rightId: string;
+ rightId: string
}
/** 连线题面板配置 */
export interface MatchQuizPanelProps {
/** 是否可见 */
- visible: boolean;
+ visible: boolean
/** z-index 层级 */
- zIndex?: number;
+ zIndex?: number
/** 题目 */
- title: string;
+ title: string
/** 左列项列表（日期） */
- leftItems: MatchQuizItem[];
+ leftItems: MatchQuizItem[]
/** 右列项列表（事件） */
- rightItems: MatchQuizItem[];
+ rightItems: MatchQuizItem[]
/** 正确答案匹配列表 */
- correctMatches: MatchQuizMatch[];
+ correctMatches: MatchQuizMatch[]
/**
* 自定义错误提示信息（答案错误时显示）
* 可以是固定文案，或根据当前匹配结果返回不同提示
*/
- errorMessage?: string | ((matches: MatchQuizMatch[]) => string);
+ errorMessage?: string | ((matches: MatchQuizMatch[]) => string)
/** 提交回调，返回用户匹配和是否正确 */
- onSubmit?: (matches: MatchQuizMatch[], isCorrect: boolean) => void;
+ onSubmit?: (matches: MatchQuizMatch[], isCorrect: boolean) => void
/** 错误回调（可选） */
- onError?: (error: string) => void;
+ onError?: (error: string) => void
/** 是否禁用 */
- disabled?: boolean;
+ disabled?: boolean
}
/** 选择填空题中，每一个空的配置 */
export interface SelectFillBlank {
/** 唯一标识，用于和答案、结果关联 */
- id: string;
+ id: string
/** 空前面的文本（可选） */
- prefix?: string;
+ prefix?: string
/** 空后面的文本（可选） */
- suffix?: string;
+ suffix?: string
}
/** 选择填空题的答题结果 */
export interface SelectFillResult {
- blankId: string;
- value: string;
+ blankId: string
+ value: string
}
/** 选择填空题面板配置 */
export interface SelectFillQuizPanelProps {
/** 是否可见 */
- visible: boolean;
+ visible: boolean
/** z-index 层级 */
- zIndex?: number;
+ zIndex?: number
/** 题目前缀整体文本（可选） */
- titlePrefix?: string;
+ titlePrefix?: string
/** 题目后缀整体文本（可选） */
- titleSuffix?: string;
+ titleSuffix?: string
/** 填空位配置（控制有几个空、空前后的说明文本） */
- blanks: SelectFillBlank[];
+ blanks: SelectFillBlank[]
/** 可选项列表（如 0-9 的数字、若干短语等） */
- options: { value: string; label: string }[];
+ options: { value: string; label: string }[]
/**
* 正确答案映射
* key 为 blankId，value 为该空对应的正确值
*/
- correctAnswers?: Record;
+ correctAnswers?: Record
/** 自定义错误提示信息（答案错误时显示） */
- errorMessage?: string;
+ errorMessage?: string
/**
* 提交回调，返回用户选择结果与是否全部正确
* 注意：如果未提供 correctAnswers，则 isCorrect 恒为 true
*/
- onSubmit?: (results: SelectFillResult[], isCorrect: boolean) => void;
+ onSubmit?: (results: SelectFillResult[], isCorrect: boolean) => void
/** 错误回调（可选） */
- onError?: (error: string) => void;
+ onError?: (error: string) => void
/** 是否禁用 */
- disabled?: boolean;
+ disabled?: boolean
/** 提交按钮文本 */
- submitText?: string;
+ submitText?: string
}
/** @deprecated 使用 SingleChoiceQuizPanelProps 替代 */
export interface QuizPanelProps {
- visible: boolean;
- zIndex?: number;
- title: string;
- options: SingleChoiceOption[];
- value: string;
- error?: string;
- onChange?: (value: string) => void;
+ visible: boolean
+ zIndex?: number
+ title: string
+ options: SingleChoiceOption[]
+ value: string
+ error?: string
+ onChange?: (value: string) => void
}
diff --git a/src/components/letter/LetterToChenyun.tsx b/src/components/letter/LetterToChenyun.tsx
index 5caa88a..a91c02a 100644
--- a/src/components/letter/LetterToChenyun.tsx
+++ b/src/components/letter/LetterToChenyun.tsx
@@ -1,69 +1,65 @@
-import { useEffect, useState } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import { getStaticImage } from "@/lib/utils";
-import { Image } from "@/components";
+import { useEffect, useState } from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { getStaticImage } from '@/lib/utils'
+import { Image } from '@/components'
export interface LetterToChenyunProps {
/** 是否可见 */
- visible?: boolean;
+ visible?: boolean
/** 关闭回调 */
- onClose?: () => void;
+ onClose?: () => void
/** 提交回调 */
- onSubmit?: (values: string[]) => void;
+ onSubmit?: (values: string[]) => void
}
/**
* LetterToChenyun 组件 - 寄给陈云爷爷的信
* 包含飞入和放大动画
*/
-const LetterToChenyun = ({
- visible = false,
- onClose,
- onSubmit,
-}: LetterToChenyunProps) => {
+const LetterToChenyun = ({ visible = false, onClose, onSubmit }: LetterToChenyunProps) => {
// 下划线可填写内容
- const [blankValues, setBlankValues] = useState([]);
+ const [blankValues, setBlankValues] = useState([])
// 每个空的校验状态：true 表示该空当前不符合要求（为空或超过 10 个字）
- const [blankErrors, setBlankErrors] = useState([]);
+ const [blankErrors, setBlankErrors] = useState([])
// 是否已提交：提交后隐藏编辑信件，展示只读信件
- const [submitted, setSubmitted] = useState(false);
+ const [submitted, setSubmitted] = useState(false)
// 校验输入：不能为空、每个不超过 10 个字符
const validateBlanks = () => {
// 计算占位总数，防止有些没被输入过而是 undefined
- const placeholderCount = (letterContent.match(/____/g) || []).length;
+ const placeholderCount = (letterContent.match(/____/g) || []).length
- const nextErrors: boolean[] = Array(placeholderCount).fill(false);
- const nextValues: string[] = [...blankValues];
- let hasError = false;
+ const nextErrors: boolean[] = Array(placeholderCount).fill(false)
+ const nextValues: string[] = [...blankValues]
+ let hasError = false
for (let i = 0; i < placeholderCount; i++) {
- const raw = blankValues[i] || "";
- const v = raw.trim();
+ const raw = blankValues[i] || ''
+ const v = raw.trim()
// 为空 或 超过 10 个字，都视为不符合要求：清空并标红
if (!v || v.length > 10) {
- nextValues[i] = "";
- nextErrors[i] = true;
- hasError = true;
+ nextValues[i] = ''
+ nextErrors[i] = true
+ hasError = true
}
}
- setBlankValues(nextValues);
- setBlankErrors(nextErrors);
+ setBlankValues(nextValues)
+ setBlankErrors(nextErrors)
- return !hasError;
- };
+ return !hasError
+ }
// 弹窗关闭后重置内容，方便下次重新填写
useEffect(() => {
if (!visible) {
- setSubmitted(false);
- setBlankValues([]);
- setBlankErrors([]);
+ setSubmitted(false)
+ setBlankValues([])
+ setBlankErrors([])
}
- }, [visible]);
+ }, [visible])
// 信件内容模板（根据设计稿）
const letterContent = `敬爱的陈云爷爷：
@@ -73,7 +69,7 @@ const LetterToChenyun = ({
作为新时代学生，我会在专业学习中____，像您当年练珠算、搞调查那样精益求精；未来无论从事什么工作，都要把服务群众、____放在首位；面对困难时不退缩，像您当年稳定物价、推进实业那样，用____本领（结合所学专业）为国家发展贡献自己的力量！
-站在新时代的起点，我一定以____为志向，勤学苦练，传承精神，让您的务实担当在青春里扎根，让奋斗在建设祖国的实践中绽放光彩！`;
+站在新时代的起点，我一定以____为志向，勤学苦练，传承精神，让您的务实担当在青春里扎根，让奋斗在建设祖国的实践中绽放光彩！`
return (
@@ -96,7 +92,7 @@ const LetterToChenyun = ({
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.5, y: 100 }}
transition={{
- type: "spring",
+ type: 'spring',
stiffness: 300,
damping: 30,
duration: 0.6,
@@ -105,28 +101,28 @@ const LetterToChenyun = ({
{/* 题干卡片 */}
{/* 选项区域 */}
@@ -119,13 +110,11 @@ const SingleChoiceQuizPanel = ({
>
{title}
{/* 答案反馈 */}
- {error && (
-
- {error}
-
- )}
+ {error && {error}
}
{option.label}
@@ -136,7 +125,7 @@ const SingleChoiceQuizPanel = ({
e.stopPropagation()}
- style={{ perspective: "1200px" }}
+ style={{ perspective: '1200px' }}
>
{/* 编辑态 / 只读态：Y 轴翻转切换 */}
{/* 前面：编辑态 */}
{/* 编辑态：信纸背景 */}
![信纸]({getStaticImage("components/letter/信底")})
@@ -136,8 +132,8 @@ const LetterToChenyun = ({
寄给陈云的信
@@ -148,75 +144,62 @@ const LetterToChenyun = ({
@@ -224,7 +207,7 @@ const LetterToChenyun = ({
{/* 笔的图片 */}
![笔]({getStaticImage("components/letter/笔")})
@@ -233,11 +216,11 @@ const LetterToChenyun = ({
{/* 提交按钮：切换到只读信件态 */}
{
- if (!validateBlanks()) return;
- setSubmitted(true);
+ if (!validateBlanks()) return
+ setSubmitted(true)
}}
button
/>
@@ -248,25 +231,25 @@ const LetterToChenyun = ({
{(() => {
- let placeholderIndex = 0;
- let foundNiHao = false;
- return letterContent
- .split("\n")
- .map((line, lineIndex) => {
- // 检测是否已经找到"您好"行
- if (line.includes("您好")) {
- foundNiHao = true;
- }
+ let placeholderIndex = 0
+ let foundNiHao = false
+ return letterContent.split('\n').map((line, lineIndex) => {
+ // 检测是否已经找到"您好"行
+ if (line.includes('您好')) {
+ foundNiHao = true
+ }
- // "您好"行之后的非空行需要首行缩进
- const needsIndent =
- foundNiHao &&
- line.trim() !== "" &&
- !line.includes("您好");
+ // "您好"行之后的非空行需要首行缩进
+ const needsIndent =
+ foundNiHao && line.trim() !== '' && !line.includes('您好')
- const segments = line.split("____");
- return (
-
- {segments.map((part, partIndex) => {
- const isLast =
- partIndex === segments.length - 1;
- if (isLast) {
- return (
-
- {part}
-
- );
- }
+ const segments = line.split('____')
+ return (
+
+ )
+ })
})()}
+ {segments.map((part, partIndex) => {
+ const isLast = partIndex === segments.length - 1
+ if (isLast) {
+ return {part}
+ }
- const currentIndex = placeholderIndex++;
- return (
-
- {part}
- {
- const next = [...blankValues];
- next[currentIndex] = e.target.value;
- setBlankValues(next);
+ const currentIndex = placeholderIndex++
+ return (
+
+ {part}
+ {
+ const next = [...blankValues]
+ next[currentIndex] = e.target.value
+ setBlankValues(next)
- // 用户再次输入时，清除该空的错误高亮
- if (blankErrors[currentIndex]) {
- const nextErrs = [...blankErrors];
- nextErrs[currentIndex] = false;
- setBlankErrors(nextErrs);
- }
- }}
- />
-
- );
- })}
-
- );
- });
+ // 用户再次输入时，清除该空的错误高亮
+ if (blankErrors[currentIndex]) {
+ const nextErrs = [...blankErrors]
+ nextErrs[currentIndex] = false
+ setBlankErrors(nextErrs)
+ }
+ }}
+ />
+
+ )
+ })}
+
{/* 只读态：新背景 */}
![信件]({getStaticImage("components/letter/信")})
{
- setSubmitted(false);
+ setSubmitted(false)
}}
/>
@@ -274,55 +257,42 @@ const LetterToChenyun = ({
@@ -330,10 +300,10 @@ const LetterToChenyun = ({
{/* 寄出按钮：关闭窗口 */}
{
- onSubmit?.(blankValues);
+ onSubmit?.(blankValues)
}}
button
/>
@@ -345,7 +315,7 @@ const LetterToChenyun = ({
)}
- );
-};
+ )
+}
-export default LetterToChenyun;
+export default LetterToChenyun
diff --git a/src/components/letter/LetterToHuangyanpei.tsx b/src/components/letter/LetterToHuangyanpei.tsx
index 4b6b119..0f4a47b 100644
--- a/src/components/letter/LetterToHuangyanpei.tsx
+++ b/src/components/letter/LetterToHuangyanpei.tsx
@@ -1,108 +1,104 @@
-import { useEffect, useState } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import { getStaticImage } from "@/lib/utils";
-import { Image, Select } from "@/components";
-import { filterInput } from "@/lib/utils/sensitiveWords";
+import { useEffect, useState } from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { getStaticImage } from '@/lib/utils'
+import { Image, Select } from '@/components'
+import { filterInput } from '@/lib/utils/sensitiveWords'
export interface LetterToHuangyanpeiProps {
/** 是否可见 */
- visible?: boolean;
+ visible?: boolean
/** 关闭回调 */
- onClose?: () => void;
+ onClose?: () => void
/** 提交回调 */
- onSubmit?: (values: string[]) => void;
+ onSubmit?: (values: string[]) => void
}
/**
* LetterToHuangyanpei 组件 - 写给黄炎培先生的信
* 包含飞入和放大动画
*/
-const LetterToHuangyanpei = ({
- visible = false,
- onClose,
- onSubmit,
-}: LetterToHuangyanpeiProps) => {
+const LetterToHuangyanpei = ({ visible = false, onClose, onSubmit }: LetterToHuangyanpeiProps) => {
// 下划线可填写内容
- const [blankValues, setBlankValues] = useState([]);
+ const [blankValues, setBlankValues] = useState([])
// 每个空的校验状态：true 表示该空当前不符合要求
- const [blankErrors, setBlankErrors] = useState([]);
+ const [blankErrors, setBlankErrors] = useState([])
// 是否已提交：提交后隐藏编辑信件，展示只读信件
- const [submitted, setSubmitted] = useState(false);
+ const [submitted, setSubmitted] = useState(false)
// 填空类型定义：0=填空1（限填），1=填空2（任填），2=填空3（任填），3=填空4（限填）
- const BLANK_1_ANSWER = "手脑并用";
- const BLANK_4_ANSWER = "有业者乐业";
+ const BLANK_1_ANSWER = '手脑并用'
+ const BLANK_4_ANSWER = '有业者乐业'
// 填空1的选项
const BLANK_1_OPTIONS = [
- "手脑并用",
- "有业者乐业",
+ '手脑并用',
+ '有业者乐业',
// "知行合一",
// "学以致用",
// "理论实践"
- ];
+ ]
// 填空4的选项
const BLANK_4_OPTIONS = [
- "手脑并用",
- "有业者乐业",
+ '手脑并用',
+ '有业者乐业',
// "有业者敬业",
// "有业者精业",
// "有业者成业",
- ];
+ ]
// 校验输入：确保所有填空符合标准
const validateBlanks = () => {
// 计算占位总数，防止有些没被输入过而是 undefined
- const placeholderCount = (letterContent.match(/____/g) || []).length;
+ const placeholderCount = (letterContent.match(/____/g) || []).length
- const nextErrors: boolean[] = Array(placeholderCount).fill(false);
- const nextValues: string[] = [...blankValues];
- let hasError = false;
+ const nextErrors: boolean[] = Array(placeholderCount).fill(false)
+ const nextValues: string[] = [...blankValues]
+ let hasError = false
for (let i = 0; i < placeholderCount; i++) {
- const raw = nextValues[i] || "";
- const v = raw.trim();
+ const raw = nextValues[i] || ''
+ const v = raw.trim()
if (i === 0) {
// 填空1：限填，必须选择"手脑并用"
if (!v || v !== BLANK_1_ANSWER) {
- nextValues[i] = "";
- nextErrors[i] = true;
- hasError = true;
+ nextValues[i] = ''
+ nextErrors[i] = true
+ hasError = true
}
} else if (i === 1 || i === 2) {
// 填空2、3：任填，不能为空，不超过20个字
if (!v || v.length > 20) {
- nextValues[i] = "";
- nextErrors[i] = true;
- hasError = true;
+ nextValues[i] = ''
+ nextErrors[i] = true
+ hasError = true
}
} else if (i === 3) {
// 填空4：限填，必须选择"有业者乐业"
if (!v || v !== BLANK_4_ANSWER) {
- nextValues[i] = "";
- nextErrors[i] = true;
- hasError = true;
+ nextValues[i] = ''
+ nextErrors[i] = true
+ hasError = true
}
}
}
- setBlankValues(nextValues);
- setBlankErrors(nextErrors);
+ setBlankValues(nextValues)
+ setBlankErrors(nextErrors)
- return !hasError;
- };
+ return !hasError
+ }
// 弹窗关闭后重置内容，方便下次重新填写
useEffect(() => {
if (!visible) {
- setSubmitted(false);
- setBlankValues([]);
- setBlankErrors([]);
+ setSubmitted(false)
+ setBlankValues([])
+ setBlankErrors([])
}
- }, [visible]);
+ }, [visible])
// 信件内容模板（根据设计稿）
const letterContent = `敬爱的黄炎培先生：
@@ -115,7 +111,7 @@ const LetterToHuangyanpei = ({
我是____专业的学生，今后，我会在实训课堂上精益求精，像当年中华职校的学长学姐那样，把技能练到极致；我会在志愿服务中践行担当，用所学知识为身边人、为社会做实事；我更会紧跟时代步伐，努力成为____领域的技能人才，为中国制造升级、为民族产业振兴添砖加瓦！
-请您放心，您播下的职教火种，我们会让它在新时代燃烧得更旺；您毕生追求的"无业者有业、____"的愿景，我们会用青春和汗水去实现！`;
+请您放心，您播下的职教火种，我们会让它在新时代燃烧得更旺；您毕生追求的"无业者有业、____"的愿景，我们会用青春和汗水去实现！`
return (
@@ -138,7 +134,7 @@ const LetterToHuangyanpei = ({
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.5, y: 100 }}
transition={{
- type: "spring",
+ type: 'spring',
stiffness: 300,
damping: 30,
duration: 0.6,
@@ -147,28 +143,28 @@ const LetterToHuangyanpei = ({
{(() => {
- let placeholderIndex = 0;
- let foundNiHao = false;
- return letterContent
- .split("\n")
- .map((line, lineIndex) => {
- if (line.includes("您好")) {
- foundNiHao = true;
- }
+ let placeholderIndex = 0
+ let foundNiHao = false
+ return letterContent.split('\n').map((line, lineIndex) => {
+ if (line.includes('您好')) {
+ foundNiHao = true
+ }
- const needsIndent =
- foundNiHao &&
- line.trim() !== "" &&
- !line.includes("您好");
+ const needsIndent =
+ foundNiHao && line.trim() !== '' && !line.includes('您好')
- const segments = line.split("____");
- return (
-
- {segments.map((part, partIndex) => {
- const isLast =
- partIndex === segments.length - 1;
- if (isLast) {
- return (
-
- {part}
-
- );
- }
+ const segments = line.split('____')
+ return (
+
+ )
+ })
})()}
+ {segments.map((part, partIndex) => {
+ const isLast = partIndex === segments.length - 1
+ if (isLast) {
+ return {part}
+ }
- const currentIndex = placeholderIndex++;
- const value = blankValues[currentIndex] ?? "";
+ const currentIndex = placeholderIndex++
+ const value = blankValues[currentIndex] ?? ''
- return (
-
- {part}
- {value || " "}
-
- );
- })}
-
- );
- });
+ return (
+
+ {part}
+ {value || ' '}
+
+ )
+ })}
+ e.stopPropagation()}
- style={{ perspective: "1200px" }}
+ style={{ perspective: '1200px' }}
>
{/* 编辑态 / 只读态：Y 轴翻转切换 */}
{/* 前面：编辑态 */}
{/* 编辑态：信纸背景 */}
@@ -178,8 +174,8 @@ const LetterToHuangyanpei = ({
写给黄炎培先生的信
@@ -190,121 +186,97 @@ const LetterToHuangyanpei = ({
@@ -312,7 +284,7 @@ const LetterToHuangyanpei = ({
{/* 笔的图片 */}
@@ -321,11 +293,11 @@ const LetterToHuangyanpei = ({
{/* 提交按钮：切换到只读信件态 */}
{
- if (!validateBlanks()) return;
- setSubmitted(true);
+ if (!validateBlanks()) return
+ setSubmitted(true)
}}
button
/>
@@ -336,25 +308,25 @@ const LetterToHuangyanpei = ({
{(() => {
- let placeholderIndex = 0;
- let foundNiHao = false;
- return letterContent
- .split("\n")
- .map((line, lineIndex) => {
- // 检测是否已经找到"您好"行
- if (line.includes("您好")) {
- foundNiHao = true;
- }
+ let placeholderIndex = 0
+ let foundNiHao = false
+ return letterContent.split('\n').map((line, lineIndex) => {
+ // 检测是否已经找到"您好"行
+ if (line.includes('您好')) {
+ foundNiHao = true
+ }
- // "您好"行之后的非空行需要首行缩进
- const needsIndent =
- foundNiHao &&
- line.trim() !== "" &&
- !line.includes("您好");
+ // "您好"行之后的非空行需要首行缩进
+ const needsIndent =
+ foundNiHao && line.trim() !== '' && !line.includes('您好')
- const segments = line.split("____");
- return (
-
- {segments.map((part, partIndex) => {
- const isLast =
- partIndex === segments.length - 1;
- if (isLast) {
- return (
-
- {part}
-
- );
- }
+ const segments = line.split('____')
+ return (
+
+ )
+ })
})()}
+ {segments.map((part, partIndex) => {
+ const isLast = partIndex === segments.length - 1
+ if (isLast) {
+ return {part}
+ }
- const currentIndex = placeholderIndex++;
- const isLimitedFill =
- currentIndex === 0 || currentIndex === 3; // 填空1和填空4为限填
- const options =
- currentIndex === 0
- ? BLANK_1_OPTIONS
- : BLANK_4_OPTIONS;
+ const currentIndex = placeholderIndex++
+ const isLimitedFill = currentIndex === 0 || currentIndex === 3 // 填空1和填空4为限填
+ const options =
+ currentIndex === 0 ? BLANK_1_OPTIONS : BLANK_4_OPTIONS
- return (
-
- {part}
- {isLimitedFill ? (
- // 限填：下拉选择
-
- );
- });
+ }}
+ />
+ )}
+
+ )
+ })}
+
{/* 只读态：新背景 */}
{
- setSubmitted(false);
+ setSubmitted(false)
}}
/>
@@ -362,54 +334,38 @@ const LetterToHuangyanpei = ({
@@ -417,12 +373,12 @@ const LetterToHuangyanpei = ({
{/* 寄出按钮：关闭窗口 */}
{
// 寄出前再次校验，确保所有填空符合标准
if (validateBlanks()) {
- onSubmit?.(blankValues);
+ onSubmit?.(blankValues)
}
}}
button
@@ -435,7 +391,7 @@ const LetterToHuangyanpei = ({
)}
- );
-};
+ )
+}
-export default LetterToHuangyanpei;
+export default LetterToHuangyanpei
diff --git a/src/components/letter/LetterToLuxun.tsx b/src/components/letter/LetterToLuxun.tsx
index 5a13fa7..41f8521 100644
--- a/src/components/letter/LetterToLuxun.tsx
+++ b/src/components/letter/LetterToLuxun.tsx
@@ -1,103 +1,99 @@
-import { useEffect, useState } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import { getStaticImage } from "@/lib/utils";
-import { Image, Select } from "@/components";
+import { useEffect, useState } from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { getStaticImage } from '@/lib/utils'
+import { Image, Select } from '@/components'
export interface LetterToLuxunProps {
/** 是否可见 */
- visible?: boolean;
+ visible?: boolean
/** 关闭回调 */
- onClose?: () => void;
+ onClose?: () => void
/** 提交回调 */
- onSubmit?: (values: string[]) => void;
+ onSubmit?: (values: string[]) => void
}
/**
* LetterToLuxun 组件 - 写给鲁迅先生的信
* 包含飞入和放大动画
*/
-const LetterToLuxun = ({
- visible = false,
- onClose,
- onSubmit,
-}: LetterToLuxunProps) => {
+const LetterToLuxun = ({ visible = false, onClose, onSubmit }: LetterToLuxunProps) => {
// 下划线可填写内容
- const [blankValues, setBlankValues] = useState([]);
+ const [blankValues, setBlankValues] = useState([])
// 每个空的校验状态：true 表示该空当前不符合要求（为空或超过 10 个字）
- const [blankErrors, setBlankErrors] = useState([]);
+ const [blankErrors, setBlankErrors] = useState([])
// 是否已提交：提交后隐藏编辑信件，展示只读信件
- const [submitted, setSubmitted] = useState(false);
+ const [submitted, setSubmitted] = useState(false)
// 填空类型定义：0=填空1（限填），1=填空2（限填），其他=任填
- const BLANK_1_ANSWER = "首在立人";
- const BLANK_2_ANSWER = "批判求真";
+ const BLANK_1_ANSWER = '首在立人'
+ const BLANK_2_ANSWER = '批判求真'
// 填空1的选项
const BLANK_1_OPTIONS = [
- "首在立人",
- "批判求真",
+ '首在立人',
+ '批判求真',
// 可以添加其他选项
- ];
+ ]
// 填空2的选项
const BLANK_2_OPTIONS = [
- "首在立人",
- "批判求真",
+ '首在立人',
+ '批判求真',
// 可以添加其他选项
- ];
+ ]
// 校验输入：确保所有填空符合标准
const validateBlanks = () => {
// 计算占位总数，防止有些没被输入过而是 undefined
- const placeholderCount = (letterContent.match(/____/g) || []).length;
+ const placeholderCount = (letterContent.match(/____/g) || []).length
- const nextErrors: boolean[] = Array(placeholderCount).fill(false);
- const nextValues: string[] = [...blankValues];
- let hasError = false;
+ const nextErrors: boolean[] = Array(placeholderCount).fill(false)
+ const nextValues: string[] = [...blankValues]
+ let hasError = false
for (let i = 0; i < placeholderCount; i++) {
- const raw = nextValues[i] || "";
- const v = raw.trim();
+ const raw = nextValues[i] || ''
+ const v = raw.trim()
if (i === 0) {
// 填空1：限填，必须选择"首在立人"
if (!v || v !== BLANK_1_ANSWER) {
- nextValues[i] = "";
- nextErrors[i] = true;
- hasError = true;
+ nextValues[i] = ''
+ nextErrors[i] = true
+ hasError = true
}
} else if (i === 1) {
// 填空2：限填，必须选择"批判求真"
if (!v || v !== BLANK_2_ANSWER) {
- nextValues[i] = "";
- nextErrors[i] = true;
- hasError = true;
+ nextValues[i] = ''
+ nextErrors[i] = true
+ hasError = true
}
} else {
// 其他填空：任填，不能为空，不超过 10 个字
if (!v || v.length > 10) {
- nextValues[i] = "";
- nextErrors[i] = true;
- hasError = true;
+ nextValues[i] = ''
+ nextErrors[i] = true
+ hasError = true
}
}
}
- setBlankValues(nextValues);
- setBlankErrors(nextErrors);
+ setBlankValues(nextValues)
+ setBlankErrors(nextErrors)
- return !hasError;
- };
+ return !hasError
+ }
// 弹窗关闭后重置内容，方便下次重新填写
useEffect(() => {
if (!visible) {
- setSubmitted(false);
- setBlankValues([]);
- setBlankErrors([]);
+ setSubmitted(false)
+ setBlankValues([])
+ setBlankErrors([])
}
- }, [visible]);
+ }, [visible])
// 信件内容模板（根据设计稿）
const letterContent = `敬爱的鲁迅先生：
@@ -108,7 +104,7 @@ const LetterToLuxun = ({
我是____专业的学生，今后，我会以您"____千夫指"的骨气，在是非面前坚守立场，不随波逐流；我会以您"俯首甘为____"的热忱，参与____活动，用微光温暖他人；我更会记住您"____，走的人多了，便成了路"的箴言，在专业领域勇于探索，努力用____为民族复兴、文化繁荣添砖加瓦。
-请您放心，您播下的"立人"火种，我们会让它在新时代燎原；您毕生追求的"人国"愿景，我们会用青春和奋斗去守护！`;
+请您放心，您播下的"立人"火种，我们会让它在新时代燎原；您毕生追求的"人国"愿景，我们会用青春和奋斗去守护！`
return (
@@ -131,7 +127,7 @@ const LetterToLuxun = ({
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.5, y: 100 }}
transition={{
- type: "spring",
+ type: 'spring',
stiffness: 300,
damping: 30,
duration: 0.6,
@@ -140,28 +136,28 @@ const LetterToLuxun = ({
{(() => {
- let placeholderIndex = 0;
- let foundNiHao = false;
- return letterContent
- .split("\n")
- .map((line, lineIndex) => {
- if (line.includes("您好")) {
- foundNiHao = true;
- }
+ let placeholderIndex = 0
+ let foundNiHao = false
+ return letterContent.split('\n').map((line, lineIndex) => {
+ if (line.includes('您好')) {
+ foundNiHao = true
+ }
- const needsIndent =
- foundNiHao &&
- line.trim() !== "" &&
- !line.includes("您好");
+ const needsIndent =
+ foundNiHao && line.trim() !== '' && !line.includes('您好')
- const segments = line.split("____");
- return (
-
- {segments.map((part, partIndex) => {
- const isLast =
- partIndex === segments.length - 1;
- if (isLast) {
- return (
-
- {part}
-
- );
- }
+ const segments = line.split('____')
+ return (
+
+ )
+ })
})()}
+ {segments.map((part, partIndex) => {
+ const isLast = partIndex === segments.length - 1
+ if (isLast) {
+ return {part}
+ }
- const currentIndex = placeholderIndex++;
- const value = blankValues[currentIndex] ?? "";
+ const currentIndex = placeholderIndex++
+ const value = blankValues[currentIndex] ?? ''
- return (
-
- {part}
- {value || " "}
-
- );
- })}
-
- );
- });
+ return (
+
+ {part}
+ {value || ' '}
+
+ )
+ })}
+ e.stopPropagation()}
- style={{ perspective: "1200px" }}
+ style={{ perspective: '1200px' }}
>
{/* 编辑态 / 只读态：Y 轴翻转切换 */}
{/* 前面：编辑态 */}
{/* 编辑态：信纸背景 */}
@@ -171,8 +167,8 @@ const LetterToLuxun = ({
写给鲁迅先生的信
@@ -183,115 +179,95 @@ const LetterToLuxun = ({
@@ -299,7 +275,7 @@ const LetterToLuxun = ({
{/* 笔的图片 */}
@@ -308,11 +284,11 @@ const LetterToLuxun = ({
{/* 提交按钮：切换到只读信件态 */}
{
- if (!validateBlanks()) return;
- setSubmitted(true);
+ if (!validateBlanks()) return
+ setSubmitted(true)
}}
button
/>
@@ -332,25 +308,25 @@ const LetterToLuxun = ({
{(() => {
- let placeholderIndex = 0;
- let foundNiHao = false;
- return letterContent
- .split("\n")
- .map((line, lineIndex) => {
- // 检测是否已经找到"您好"行
- if (line.includes("您好")) {
- foundNiHao = true;
- }
+ let placeholderIndex = 0
+ let foundNiHao = false
+ return letterContent.split('\n').map((line, lineIndex) => {
+ // 检测是否已经找到"您好"行
+ if (line.includes('您好')) {
+ foundNiHao = true
+ }
- // "您好"行之后的非空行需要首行缩进
- const needsIndent =
- foundNiHao &&
- line.trim() !== "" &&
- !line.includes("您好");
+ // "您好"行之后的非空行需要首行缩进
+ const needsIndent =
+ foundNiHao && line.trim() !== '' && !line.includes('您好')
- const segments = line.split("____");
- return (
-
- {segments.map((part, partIndex) => {
- const isLast =
- partIndex === segments.length - 1;
- if (isLast) {
- return (
-
- {part}
-
- );
- }
+ const segments = line.split('____')
+ return (
+
+ )
+ })
})()}
+ {segments.map((part, partIndex) => {
+ const isLast = partIndex === segments.length - 1
+ if (isLast) {
+ return {part}
+ }
- const currentIndex = placeholderIndex++;
- const isLimitedFill =
- currentIndex === 0 || currentIndex === 1; // 填空1和填空2为限填
- const options =
- currentIndex === 0
- ? BLANK_1_OPTIONS
- : BLANK_2_OPTIONS;
+ const currentIndex = placeholderIndex++
+ const isLimitedFill = currentIndex === 0 || currentIndex === 1 // 填空1和填空2为限填
+ const options =
+ currentIndex === 0 ? BLANK_1_OPTIONS : BLANK_2_OPTIONS
- return (
-
- {part}
- {isLimitedFill ? (
- // 限填：下拉选择
-
- );
- });
+ }}
+ />
+ )}
+
+ )
+ })}
+
{/* 只读态：新背景 */}
{
- setSubmitted(false);
+ setSubmitted(false)
}}
/>
@@ -358,55 +334,42 @@ const LetterToLuxun = ({
@@ -414,10 +377,10 @@ const LetterToLuxun = ({
{/* 寄出按钮：关闭窗口 */}
{
- onSubmit?.(blankValues);
+ onSubmit?.(blankValues)
}}
button
/>
@@ -429,7 +392,7 @@ const LetterToLuxun = ({
)}
- );
-};
+ )
+}
-export default LetterToLuxun;
+export default LetterToLuxun
diff --git a/src/components/letter/LetterToSunzhongshan.tsx b/src/components/letter/LetterToSunzhongshan.tsx
index 9e43531..0d0233d 100644
--- a/src/components/letter/LetterToSunzhongshan.tsx
+++ b/src/components/letter/LetterToSunzhongshan.tsx
@@ -1,16 +1,16 @@
-import { useEffect, useState } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import { getStaticImage } from "@/lib/utils";
-import { Image, Select } from "@/components";
-import { ErrorAlert } from "@/components/layout";
+import { useEffect, useState } from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { getStaticImage } from '@/lib/utils'
+import { Image, Select } from '@/components'
+import { ErrorAlert } from '@/components/layout'
export interface LetterToSunzhongshanProps {
/** 是否可见 */
- visible?: boolean;
+ visible?: boolean
/** 关闭回调 */
- onClose?: () => void;
+ onClose?: () => void
/** 提交回调 */
- onSubmit?: (values: string[]) => void;
+ onSubmit?: (values: string[]) => void
}
/**
@@ -23,84 +23,84 @@ const LetterToSunzhongshan = ({
onSubmit,
}: LetterToSunzhongshanProps) => {
// 下划线可填写内容
- const [blankValues, setBlankValues] = useState([]);
+ const [blankValues, setBlankValues] = useState([])
// 每个空的校验状态：true 表示该空当前不符合要求（为空或超过 10 个字）
- const [blankErrors, setBlankErrors] = useState([]);
+ const [blankErrors, setBlankErrors] = useState([])
// 是否已提交：提交后隐藏编辑信件，展示只读信件
- const [submitted, setSubmitted] = useState(false);
+ const [submitted, setSubmitted] = useState(false)
// ErrorAlert 相关状态
- const [showErrorAlert, setShowErrorAlert] = useState(false);
- const [errorAlertText, setErrorAlertText] = useState("");
+ const [showErrorAlert, setShowErrorAlert] = useState(false)
+ const [errorAlertText, setErrorAlertText] = useState('')
// 前三个空的正确答案
- const BLANK_0_ANSWER = "振兴中华";
- const BLANK_1_ANSWER = "天下为公";
- const BLANK_2_ANSWER = "与时俱进";
+ const BLANK_0_ANSWER = '振兴中华'
+ const BLANK_1_ANSWER = '天下为公'
+ const BLANK_2_ANSWER = '与时俱进'
// 最后一个空的正确答案
- const LAST_BLANK_ANSWER = "仍需努力";
+ const LAST_BLANK_ANSWER = '仍需努力'
// 前三个空的选项（所有空都用这三个选项）
const SELECT_OPTIONS = [
- { value: "振兴中华", label: "振兴中华" },
- { value: "天下为公", label: "天下为公" },
- { value: "与时俱进", label: "与时俱进" },
- ];
+ { value: '振兴中华', label: '振兴中华' },
+ { value: '天下为公', label: '天下为公' },
+ { value: '与时俱进', label: '与时俱进' },
+ ]
// 校验输入：前三个空必须选择正确答案，最后一个空必须是"仍需努力"，其他空不能为空且不超过 10 个字符
const validateBlanks = () => {
// 计算占位总数，防止有些没被输入过而是 undefined
- const placeholderCount = (letterContent.match(/____/g) || []).length;
+ const placeholderCount = (letterContent.match(/____/g) || []).length
- const nextErrors: boolean[] = Array(placeholderCount).fill(false);
- const nextValues: string[] = [...blankValues];
- let hasError = false;
+ const nextErrors: boolean[] = Array(placeholderCount).fill(false)
+ const nextValues: string[] = [...blankValues]
+ let hasError = false
for (let i = 0; i < placeholderCount; i++) {
- const raw = blankValues[i] || "";
- const v = raw.trim();
+ const raw = blankValues[i] || ''
+ const v = raw.trim()
if (i < 3) {
// 前三个空：必须选择正确答案（已在 onChange 中验证，这里只检查是否为空）
if (!v) {
- nextValues[i] = "";
- nextErrors[i] = true;
- hasError = true;
+ nextValues[i] = ''
+ nextErrors[i] = true
+ hasError = true
}
} else if (i === placeholderCount - 1) {
// 最后一个空：必须是"仍需努力"
if (!v || v !== LAST_BLANK_ANSWER) {
- nextValues[i] = "";
- nextErrors[i] = true;
- hasError = true;
+ nextValues[i] = ''
+ nextErrors[i] = true
+ hasError = true
}
} else {
// 其他空：不能为空，不超过 10 个字
if (!v || v.length > 10) {
- nextValues[i] = "";
- nextErrors[i] = true;
- hasError = true;
+ nextValues[i] = ''
+ nextErrors[i] = true
+ hasError = true
}
}
}
- setBlankValues(nextValues);
- setBlankErrors(nextErrors);
+ setBlankValues(nextValues)
+ setBlankErrors(nextErrors)
- return !hasError;
- };
+ return !hasError
+ }
// 弹窗关闭后重置内容，方便下次重新填写
useEffect(() => {
if (!visible) {
- setSubmitted(false);
- setBlankValues([]);
- setBlankErrors([]);
- setShowErrorAlert(false);
- setErrorAlertText("");
+ setSubmitted(false)
+ setBlankValues([])
+ setBlankErrors([])
+ setShowErrorAlert(false)
+ setErrorAlertText('')
}
- }, [visible]);
+ }, [visible])
// 信件内容模板（根据设计稿）
const letterContent = `敬爱的孙中山先生：
@@ -111,7 +111,7 @@ const LetterToSunzhongshan = ({
我是____专业的学生，今后，我会以您“知难行易”的信念，在专业学习中攻克难题，就像您当年为了革命理想屡败屡战；我会以您“心系民众”的情怀，参与____，帮身边人解决实际困难；我更会记住您“适乎世界之潮流”的智慧，紧跟时代步伐，努力用____为民族复兴添砖加瓦。
-请您放心，“革命尚未成功，同志____”的嘱托，我们从未忘记；“振兴中华”的初心，我们会用一生践行！`;
+请您放心，“革命尚未成功，同志____”的嘱托，我们从未忘记；“振兴中华”的初心，我们会用一生践行！`
return (
@@ -134,7 +134,7 @@ const LetterToSunzhongshan = ({
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.5, y: 100 }}
transition={{
- type: "spring",
+ type: 'spring',
stiffness: 300,
damping: 30,
duration: 0.6,
@@ -143,28 +143,28 @@ const LetterToSunzhongshan = ({
{(() => {
- let placeholderIndex = 0;
- let foundNiHao = false;
- return letterContent
- .split("\n")
- .map((line, lineIndex) => {
- if (line.includes("您好")) {
- foundNiHao = true;
- }
+ let placeholderIndex = 0
+ let foundNiHao = false
+ return letterContent.split('\n').map((line, lineIndex) => {
+ if (line.includes('您好')) {
+ foundNiHao = true
+ }
- const needsIndent =
- foundNiHao &&
- line.trim() !== "" &&
- !line.includes("您好");
+ const needsIndent =
+ foundNiHao && line.trim() !== '' && !line.includes('您好')
- const segments = line.split("____");
- return (
-
- {segments.map((part, partIndex) => {
- const isLast =
- partIndex === segments.length - 1;
- if (isLast) {
- return (
-
- {part}
-
- );
- }
+ const segments = line.split('____')
+ return (
+
+ )
+ })
})()}
+ {segments.map((part, partIndex) => {
+ const isLast = partIndex === segments.length - 1
+ if (isLast) {
+ return {part}
+ }
- const currentIndex = placeholderIndex++;
- const value = blankValues[currentIndex] ?? "";
+ const currentIndex = placeholderIndex++
+ const value = blankValues[currentIndex] ?? ''
- return (
-
- {part}
- {value || " "}
-
- );
- })}
-
- );
- });
+ return (
+
+ {part}
+ {value || ' '}
+
+ )
+ })}
+ e.stopPropagation()}
- style={{ perspective: "1200px" }}
+ style={{ perspective: '1200px' }}
>
{/* 编辑态 / 只读态：Y 轴翻转切换 */}
{/* 前面：编辑态 */}
{/* 编辑态：信纸背景 */}
@@ -174,8 +174,8 @@ const LetterToSunzhongshan = ({
写给孙中山先生的信
@@ -186,134 +186,117 @@ const LetterToSunzhongshan = ({
@@ -321,7 +304,7 @@ const LetterToSunzhongshan = ({
{/* 笔的图片 */}
@@ -330,11 +313,11 @@ const LetterToSunzhongshan = ({
{/* 提交按钮：切换到只读信件态 */}
{
- if (!validateBlanks()) return;
- setSubmitted(true);
+ if (!validateBlanks()) return
+ setSubmitted(true)
}}
button
/>
@@ -354,25 +337,25 @@ const LetterToSunzhongshan = ({
{(() => {
- let placeholderIndex = 0;
- let foundNiHao = false;
- return letterContent
- .split("\n")
- .map((line, lineIndex) => {
- // 检测是否已经找到"您好"行
- if (line.includes("您好")) {
- foundNiHao = true;
- }
+ let placeholderIndex = 0
+ let foundNiHao = false
+ return letterContent.split('\n').map((line, lineIndex) => {
+ // 检测是否已经找到"您好"行
+ if (line.includes('您好')) {
+ foundNiHao = true
+ }
- // "您好"行之后的非空行需要首行缩进
- const needsIndent =
- foundNiHao &&
- line.trim() !== "" &&
- !line.includes("您好");
+ // "您好"行之后的非空行需要首行缩进
+ const needsIndent =
+ foundNiHao && line.trim() !== '' && !line.includes('您好')
- const segments = line.split("____");
- return (
-
- {segments.map((part, partIndex) => {
- const isLast =
- partIndex === segments.length - 1;
- if (isLast) {
- return (
-
- {part}
-
- );
- }
+ const segments = line.split('____')
+ return (
+
+ )
+ })
})()}
+ {segments.map((part, partIndex) => {
+ const isLast = partIndex === segments.length - 1
+ if (isLast) {
+ return {part}
+ }
- const currentIndex = placeholderIndex++;
- const isSelectFill = currentIndex < 3; // 前三个空使用 Select
+ const currentIndex = placeholderIndex++
+ const isSelectFill = currentIndex < 3 // 前三个空使用 Select
- return (
-
- {part}
- {isSelectFill ? (
- // 前三个空：下拉选择
-
- );
- })}
-
- );
- });
+ }}
+ />
+ )}
+
+ )
+ })}
+
{/* 只读态：新背景 */}
{
- setSubmitted(false);
+ setSubmitted(false)
}}
/>
@@ -380,55 +363,42 @@ const LetterToSunzhongshan = ({
@@ -436,10 +406,10 @@ const LetterToSunzhongshan = ({
{/* 寄出按钮：关闭窗口 */}
{
- onSubmit?.(blankValues);
+ onSubmit?.(blankValues)
}}
button
/>
@@ -460,7 +430,7 @@ const LetterToSunzhongshan = ({
)}
- );
-};
+ )
+}
-export default LetterToSunzhongshan;
+export default LetterToSunzhongshan
diff --git a/src/components/letter/index.ts b/src/components/letter/index.ts
index 578e435..ea64631 100644
--- a/src/components/letter/index.ts
+++ b/src/components/letter/index.ts
@@ -1,11 +1,11 @@
-export { default as LetterToChenyun } from "./LetterToChenyun";
-export type { LetterToChenyunProps } from "./LetterToChenyun";
+export { default as LetterToChenyun } from './LetterToChenyun'
+export type { LetterToChenyunProps } from './LetterToChenyun'
-export { default as LetterToSunzhongshan } from "./LetterToSunzhongshan";
-export type { LetterToSunzhongshanProps } from "./LetterToSunzhongshan";
+export { default as LetterToSunzhongshan } from './LetterToSunzhongshan'
+export type { LetterToSunzhongshanProps } from './LetterToSunzhongshan'
-export { default as LetterToHuangyanpei } from "./LetterToHuangyanpei";
-export type { LetterToHuangyanpeiProps } from "./LetterToHuangyanpei";
+export { default as LetterToHuangyanpei } from './LetterToHuangyanpei'
+export type { LetterToHuangyanpeiProps } from './LetterToHuangyanpei'
-export { default as LetterToLuxun } from "./LetterToLuxun";
-export type { LetterToLuxunProps } from "./LetterToLuxun";
+export { default as LetterToLuxun } from './LetterToLuxun'
+export type { LetterToLuxunProps } from './LetterToLuxun'
diff --git a/src/components/narration/Narration.tsx b/src/components/narration/Narration.tsx
index 38ea500..eb7cb7f 100644
--- a/src/components/narration/Narration.tsx
+++ b/src/components/narration/Narration.tsx
@@ -1,26 +1,26 @@
-import { useState, useEffect } from "react";
-import { cn } from "@/lib/utils";
-import { useAudioManager } from "@/hooks/useAudioManager";
+import { useState, useEffect } from 'react'
+import { cn } from '@/lib/utils'
+import { useAudioManager } from '@/hooks/useAudioManager'
export interface NarrationProps {
/** 旁白文本 */
- text: string;
+ text: string
/** 是否可见 */
- visible: boolean;
+ visible: boolean
/** 关闭回调 */
- onClose: () => void;
+ onClose: () => void
/** 语音播报的音频文件路径（可选） */
- audioSrc?: string;
+ audioSrc?: string
/** 自定义样式类名 */
- className?: string;
+ className?: string
/** 是否启用逐字动画，默认 true */
- enableAnimation?: boolean;
+ enableAnimation?: boolean
/** 文字动画速度（毫秒/字），默认 100ms */
- animationSpeed?: number;
+ animationSpeed?: number
/** 覆盖层出现时是否自动播放音频（默认 true） */
- autoPlayAudio?: boolean;
+ autoPlayAudio?: boolean
/** 音频分组 id，相同 channel 内互斥，不同 channel 可同时播放；不传则全局互斥 */
- audioChannelId?: string;
+ audioChannelId?: string
}
/**
@@ -42,95 +42,95 @@ const Narration = ({
autoPlayAudio = true,
audioChannelId,
}: NarrationProps) => {
- const [displayedText, setDisplayedText] = useState("");
- const [isAnimating, setIsAnimating] = useState(true);
- const [isSkipped, setIsSkipped] = useState(false);
+ const [displayedText, setDisplayedText] = useState('')
+ const [isAnimating, setIsAnimating] = useState(true)
+ const [isSkipped, setIsSkipped] = useState(false)
// 旁白音频：默认自动播放，支持按 channel 分组互斥
const { currentSrc, play, stop } = useAudioManager(
audioChannelId
? {
- mode: "channel",
+ mode: 'channel',
channelId: audioChannelId,
}
- : { mode: "global" }
- );
+ : { mode: 'global' }
+ )
// 文字动画效果
useEffect(() => {
if (!visible) {
- setDisplayedText("");
- setIsAnimating(true);
- setIsSkipped(false);
+ setDisplayedText('')
+ setIsAnimating(true)
+ setIsSkipped(false)
// 旁白关闭时，如果当前正在播放该旁白音频，则停止
if (audioSrc && currentSrc === audioSrc) {
- stop();
+ stop()
}
- return;
+ return
}
// 如果已经跳过，不再执行动画
if (isSkipped) {
- return;
+ return
}
// 如果不启用动画，直接显示全部文本
if (!enableAnimation) {
- setDisplayedText(text);
- setIsAnimating(false);
- return;
+ setDisplayedText(text)
+ setIsAnimating(false)
+ return
}
- let currentIndex = 0;
- setDisplayedText("");
- setIsAnimating(true);
+ let currentIndex = 0
+ setDisplayedText('')
+ setIsAnimating(true)
const timer = setInterval(() => {
if (currentIndex < text.length) {
- setDisplayedText(text.slice(0, currentIndex + 1));
- currentIndex++;
+ setDisplayedText(text.slice(0, currentIndex + 1))
+ currentIndex++
} else {
- setIsAnimating(false);
- clearInterval(timer);
+ setIsAnimating(false)
+ clearInterval(timer)
}
- }, animationSpeed);
+ }, animationSpeed)
- return () => clearInterval(timer);
- }, [text, visible, enableAnimation, animationSpeed, isSkipped, audioSrc, currentSrc, stop]);
+ return () => clearInterval(timer)
+ }, [text, visible, enableAnimation, animationSpeed, isSkipped, audioSrc, currentSrc, stop])
// 跳过动画
const handleSkip = () => {
- setDisplayedText(text);
- setIsAnimating(false);
- setIsSkipped(true);
- };
+ setDisplayedText(text)
+ setIsAnimating(false)
+ setIsSkipped(true)
+ }
// 旁白出现时自动播放音频
useEffect(() => {
- if (!visible) return;
- if (!autoPlayAudio) return;
- if (!audioSrc) return;
+ if (!visible) return
+ if (!autoPlayAudio) return
+ if (!audioSrc) return
- play(audioSrc);
- }, [visible, autoPlayAudio, audioSrc, play]);
+ play(audioSrc)
+ }, [visible, autoPlayAudio, audioSrc, play])
// 停止音频
const handleClose = () => {
if (audioSrc && currentSrc === audioSrc) {
- stop();
+ stop()
}
- onClose();
- };
+ onClose()
+ }
- if (!visible) return null;
+ if (!visible) return null
return (
- );
-};
+ )
+}
-export default Narration;
+export default Narration
diff --git a/src/components/narration/index.ts b/src/components/narration/index.ts
index 3bce0da..46a2213 100644
--- a/src/components/narration/index.ts
+++ b/src/components/narration/index.ts
@@ -1,2 +1,2 @@
-export { default as Narration } from "./Narration";
-export type { NarrationProps } from "./Narration";
+export { default as Narration } from './Narration'
+export type { NarrationProps } from './Narration'
diff --git a/src/components/overlay/EndingOverlay.tsx b/src/components/overlay/EndingOverlay.tsx
index 381f0ed..75bc18f 100644
--- a/src/components/overlay/EndingOverlay.tsx
+++ b/src/components/overlay/EndingOverlay.tsx
@@ -1,22 +1,22 @@
-import { useEffect, useState } from "react";
-import { getStaticImage } from "@/lib/utils";
-import { useAudioManager } from "@/hooks/useAudioManager";
+import { useEffect, useState } from 'react'
+import { getStaticImage } from '@/lib/utils'
+import { useAudioManager } from '@/hooks/useAudioManager'
export interface EndingOverlayProps {
/** 是否可见 */
- visible: boolean;
+ visible: boolean
/** 中间显示的文本内容 */
- text: string;
+ text: string
/** 点击继续回调 */
- onContinue: () => void;
+ onContinue: () => void
/** 文字动画速度（毫秒/字），默认 60ms */
- animationSpeed?: number;
+ animationSpeed?: number
/** 结语对应的音频地址（可选） */
- audioSrc?: string;
+ audioSrc?: string
/** 覆盖层出现时是否自动播放音频（默认 true） */
- autoPlayAudio?: boolean;
+ autoPlayAudio?: boolean
/** 音频分组 id，相同 channel 内互斥，不同 channel 可同时播放；不传则全局互斥 */
- audioChannelId?: string;
+ audioChannelId?: string
}
/**
@@ -32,62 +32,62 @@ export const EndingOverlay = ({
autoPlayAudio = true,
audioChannelId,
}: EndingOverlayProps) => {
- const [displayedText, setDisplayedText] = useState("");
- const [isAnimating, setIsAnimating] = useState(false);
+ const [displayedText, setDisplayedText] = useState('')
+ const [isAnimating, setIsAnimating] = useState(false)
// 结语音频：默认自动播放，支持按 channel 分组互斥
const { currentSrc, isPlaying, play, stop } = useAudioManager(
audioChannelId
? {
- mode: "channel",
+ mode: 'channel',
channelId: audioChannelId,
}
- : { mode: "global" }
- );
+ : { mode: 'global' }
+ )
// 文字逐字动画
useEffect(() => {
if (!visible) {
- setDisplayedText("");
- setIsAnimating(false);
+ setDisplayedText('')
+ setIsAnimating(false)
// 结语关闭时，如果当前正在播放该结语音频，则停止
if (audioSrc && currentSrc === audioSrc) {
- stop();
+ stop()
}
- return;
+ return
}
- let currentIndex = 0;
- setDisplayedText("");
- setIsAnimating(true);
+ let currentIndex = 0
+ setDisplayedText('')
+ setIsAnimating(true)
const timer = setInterval(() => {
if (currentIndex < text.length) {
- setDisplayedText(text.slice(0, currentIndex + 1));
- currentIndex++;
+ setDisplayedText(text.slice(0, currentIndex + 1))
+ currentIndex++
} else {
- setIsAnimating(false);
- clearInterval(timer);
+ setIsAnimating(false)
+ clearInterval(timer)
}
- }, animationSpeed);
+ }, animationSpeed)
- return () => clearInterval(timer);
- }, [visible, text, animationSpeed, audioSrc, currentSrc, stop]);
+ return () => clearInterval(timer)
+ }, [visible, text, animationSpeed, audioSrc, currentSrc, stop])
// 覆盖层显示时自动播放音频
useEffect(() => {
- if (!visible) return;
- if (!autoPlayAudio) return;
- if (!audioSrc) return;
+ if (!visible) return
+ if (!autoPlayAudio) return
+ if (!audioSrc) return
- play(audioSrc);
- }, [visible, autoPlayAudio, audioSrc, play]);
+ play(audioSrc)
+ }, [visible, autoPlayAudio, audioSrc, play])
// 全部文字出现后自动关闭（如果有音频，需等待音频播放完成）
useEffect(() => {
- if (!visible) return;
- if (isAnimating) return;
- if (!text || displayedText !== text) return;
+ if (!visible) return
+ if (isAnimating) return
+ if (!text || displayedText !== text) return
// 如果有音频，需要等待音频播放完成
if (audioSrc) {
@@ -95,32 +95,23 @@ export const EndingOverlay = ({
if (currentSrc === audioSrc && !isPlaying) {
// 音频播放完成后，等待 800ms 再关闭
const timer = setTimeout(() => {
- onContinue();
- }, 800);
- return () => clearTimeout(timer);
+ onContinue()
+ }, 800)
+ return () => clearTimeout(timer)
}
// 音频还在播放，等待播放完成
- return;
+ return
}
// 没有音频，文字动画完成后等待 800ms 关闭
const timer = setTimeout(() => {
- onContinue();
- }, 800);
+ onContinue()
+ }, 800)
- return () => clearTimeout(timer);
- }, [
- visible,
- isAnimating,
- displayedText,
- text,
- audioSrc,
- currentSrc,
- isPlaying,
- onContinue,
- ]);
+ return () => clearTimeout(timer)
+ }, [visible, isAnimating, displayedText, text, audioSrc, currentSrc, isPlaying, onContinue])
- if (!visible) return null;
+ if (!visible) return null
return (
= {
- title: "Components/Quiz/DragFill",
+ title: 'Components/Quiz/DragFill',
component: DragFill,
- tags: ["autodocs"],
+ tags: ['autodocs'],
argTypes: {
options: {
- control: { type: "object" },
- description: "可拖拽的选项列表",
+ control: { type: 'object' },
+ description: '可拖拽的选项列表',
},
blanks: {
- control: { type: "object" },
- description: "空白区域列表",
+ control: { type: 'object' },
+ description: '空白区域列表',
},
value: {
- control: { type: "object" },
- description: "当前填充结果（受控模式）",
+ control: { type: 'object' },
+ description: '当前填充结果（受控模式）',
},
defaultValue: {
- control: { type: "object" },
- description: "默认填充结果",
+ control: { type: 'object' },
+ description: '默认填充结果',
},
disabled: {
- control: { type: "boolean" },
- description: "是否禁用整个组件",
+ control: { type: 'boolean' },
+ description: '是否禁用整个组件',
},
allowDuplicate: {
- control: { type: "boolean" },
- description: "是否允许重复选择同一选项",
+ control: { type: 'boolean' },
+ description: '是否允许重复选择同一选项',
},
showSubmitButton: {
- control: { type: "boolean" },
- description: "是否显示提交按钮",
+ control: { type: 'boolean' },
+ description: '是否显示提交按钮',
},
submitText: {
- control: { type: "text" },
- description: "提交按钮文本",
+ control: { type: 'text' },
+ description: '提交按钮文本',
},
},
-};
+}
-export default meta;
-type Story = StoryObj;
+export default meta
+type Story = StoryObj
// 基础示例
export const Default: Story = {
args: {
- options: ["选项A", "选项B", "选项C", "选项D"],
- blanks: ["空白1", "空白2", "空白3"],
+ options: ['选项A', '选项B', '选项C', '选项D'],
+ blanks: ['空白1', '空白2', '空白3'],
onSubmit: (results) => {
- console.log("填充结果:", results);
+ console.log('填充结果:', results)
},
},
-};
+}
// 使用选项和空白对象
export const WithObjects: Story = {
args: {
options: [
- { value: "opt1", label: "选项一" },
- { value: "opt2", label: "选项二" },
- { value: "opt3", label: "选项三（禁用）", disabled: true },
- { value: "opt4", label: "选项四" },
+ { value: 'opt1', label: '选项一' },
+ { value: 'opt2', label: '选项二' },
+ { value: 'opt3', label: '选项三（禁用）', disabled: true },
+ { value: 'opt4', label: '选项四' },
],
blanks: [
- { id: "blank1", label: "第一个空白", required: true },
- { id: "blank2", label: "第二个空白" },
- { id: "blank3", label: "第三个空白（必填）", required: true },
+ { id: 'blank1', label: '第一个空白', required: true },
+ { id: 'blank2', label: '第二个空白' },
+ { id: 'blank3', label: '第三个空白（必填）', required: true },
],
onSubmit: (results) => {
- console.log("填充结果:", results);
+ console.log('填充结果:', results)
},
},
-};
+}
// 受控模式
export const Controlled: Story = {
render: () => {
- const [value, setValue] = useState([]);
+ const [value, setValue] = useState([])
return (
{
- alert(`提交的结果: ${JSON.stringify(results)}`);
+ alert(`提交的结果: ${JSON.stringify(results)}`)
}}
/>
-
- );
+ )
},
-};
+}
// 允许重复选择
export const AllowDuplicate: Story = {
args: {
- options: ["选项A", "选项B", "选项C"],
- blanks: ["空白1", "空白2", "空白3"],
+ options: ['选项A', '选项B', '选项C'],
+ blanks: ['空白1', '空白2', '空白3'],
allowDuplicate: true,
onSubmit: (results) => {
- console.log("填充结果:", results);
+ console.log('填充结果:', results)
},
},
-};
+}
// 禁用状态
export const Disabled: Story = {
args: {
- options: ["选项A", "选项B", "选项C"],
- blanks: ["空白1", "空白2"],
+ options: ['选项A', '选项B', '选项C'],
+ blanks: ['空白1', '空白2'],
disabled: true,
- defaultValue: [{ blankId: "blank1", optionValue: "选项A" }],
+ defaultValue: [{ blankId: 'blank1', optionValue: '选项A' }],
},
-};
+}
// 不显示提交按钮
export const WithoutSubmitButton: Story = {
args: {
- options: ["选项A", "选项B", "选项C"],
- blanks: ["空白1", "空白2"],
+ options: ['选项A', '选项B', '选项C'],
+ blanks: ['空白1', '空白2'],
showSubmitButton: false,
onChange: (results) => {
- console.log("填充变化:", results);
+ console.log('填充变化:', results)
},
},
-};
+}
// 自定义样式
export const CustomStyled: Story = {
args: {
- options: ["选项A", "选项B", "选项C", "选项D"],
- blanks: ["空白1", "空白2"],
- className: "max-w-2xl mx-auto p-6 bg-gray-50 rounded-xl",
- optionClassName: "text-lg font-semibold",
- blankClassName: "min-h-[100px]",
- submitText: "确认答案",
+ options: ['选项A', '选项B', '选项C', '选项D'],
+ blanks: ['空白1', '空白2'],
+ className: 'max-w-2xl mx-auto p-6 bg-gray-50 rounded-xl',
+ optionClassName: 'text-lg font-semibold',
+ blankClassName: 'min-h-[100px]',
+ submitText: '确认答案',
onSubmit: (results) => {
- console.log("填充结果:", results);
+ console.log('填充结果:', results)
},
},
-};
+}
// 自定义渲染
export const CustomRender: Story = {
render: () => {
return (
(
{(() => {
- let placeholderIndex = 0;
- let foundNiHao = false;
- return letterContent
- .split("\n")
- .map((line, lineIndex) => {
- if (line.includes("您好")) {
- foundNiHao = true;
- }
+ let placeholderIndex = 0
+ let foundNiHao = false
+ return letterContent.split('\n').map((line, lineIndex) => {
+ if (line.includes('您好')) {
+ foundNiHao = true
+ }
- const needsIndent =
- foundNiHao &&
- line.trim() !== "" &&
- !line.includes("您好");
+ const needsIndent =
+ foundNiHao && line.trim() !== '' && !line.includes('您好')
- const segments = line.split("____");
- return (
-
- {segments.map((part, partIndex) => {
- const isLast =
- partIndex === segments.length - 1;
- if (isLast) {
- return (
-
- {part}
-
- );
- }
+ const segments = line.split('____')
+ return (
+
+ )
+ })
})()}
+ {segments.map((part, partIndex) => {
+ const isLast = partIndex === segments.length - 1
+ if (isLast) {
+ return {part}
+ }
- const currentIndex = placeholderIndex++;
- const value = blankValues[currentIndex] ?? "";
+ const currentIndex = placeholderIndex++
+ const value = blankValues[currentIndex] ?? ''
- return (
-
- {part}
- {value || " "}
-
- );
- })}
-
- );
- });
+ return (
+
+ {part}
+ {value || ' '}
+
+ )
+ })}
+
@@ -161,7 +161,7 @@ const Narration = ({
)}
@@ -128,7 +119,7 @@ export const EndingOverlay = ({
- );
-};
+ )
+}
diff --git a/src/components/overlay/Overlay.tsx b/src/components/overlay/Overlay.tsx
index f3773bb..b062d64 100644
--- a/src/components/overlay/Overlay.tsx
+++ b/src/components/overlay/Overlay.tsx
@@ -1,50 +1,43 @@
-import {
- useEffect,
- useRef,
- useState,
- useCallback,
- useMemo,
- ReactNode,
-} from "react";
-import { createPortal } from "react-dom";
-import { AnimatePresence, motion } from "framer-motion";
-import { useScale } from "@/contexts/ScaleContext";
-import { getBlockingDivs } from "@/components/spotlight/utils";
+import { useEffect, useRef, useState, useCallback, useMemo, ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import { AnimatePresence, motion } from 'framer-motion'
+import { useScale } from '@/contexts/ScaleContext'
+import { getBlockingDivs } from '@/components/spotlight/utils'
export interface OverlayProps {
/** CSS 选择器，支持多个元素（逗号分隔或数组） */
- selectors: string | string[];
+ selectors: string | string[]
/** 是否可见 */
- visible?: boolean;
+ visible?: boolean
/** 子元素内容 */
- children?: ReactNode;
+ children?: ReactNode
/** 遮罩层背景色（默认：rgba(0, 0, 0, 0.5)） */
- maskColor?: string;
+ maskColor?: string
/** 高亮边框颜色（默认：#3b82f6） */
- highlightColor?: string;
+ highlightColor?: string
/** 高亮边框宽度（默认：3px） */
- highlightWidth?: number;
+ highlightWidth?: number
/** 高亮圆角（默认：8px） */
- borderRadius?: number;
+ borderRadius?: number
/** 是否显示阴影/光晕效果 */
- showShadow?: boolean;
+ showShadow?: boolean
/** 自定义样式类名 */
- className?: string;
+ className?: string
/** 自定义样式 */
- style?: React.CSSProperties;
+ style?: React.CSSProperties
/** z-index 层级（默认：40，低于 GuideSteps 的 z-50） */
- zIndex?: number;
+ zIndex?: number
/** 点击遮罩层回调 */
- onMaskClick?: () => void;
+ onMaskClick?: () => void
/** 是否显示遮罩层（默认：true） */
- showMask?: boolean;
+ showMask?: boolean
}
interface ElementRect {
- x: number;
- y: number;
- width: number;
- height: number;
+ x: number
+ y: number
+ width: number
+ height: number
}
/**
@@ -61,8 +54,8 @@ const Overlay = ({
selectors,
visible = true,
children,
- maskColor = "rgba(0, 0, 0, 0.5)",
- highlightColor = "#3b82f6",
+ maskColor = 'rgba(0, 0, 0, 0.5)',
+ highlightColor = '#3b82f6',
highlightWidth = 3,
borderRadius = 8,
showShadow = false,
@@ -72,223 +65,213 @@ const Overlay = ({
onMaskClick,
showMask = true,
}: OverlayProps) => {
- const [mounted, setMounted] = useState(false);
- const [elementRects, setElementRects] = useState([]);
- const rafRef = useRef(null);
- const resizeObserverRef = useRef(null);
- const mutationObserverRef = useRef(null);
- const debounceTimerRef = useRef(null);
- const elementsCacheRef = useRef([]);
- const prevRectsRef = useRef([]);
+ const [mounted, setMounted] = useState(false)
+ const [elementRects, setElementRects] = useState([])
+ const rafRef = useRef(null)
+ const resizeObserverRef = useRef(null)
+ const mutationObserverRef = useRef(null)
+ const debounceTimerRef = useRef(null)
+ const elementsCacheRef = useRef([])
+ const prevRectsRef = useRef([])
// 获取缩放参数，用于视觉对齐
- const { scale, offsetX, offsetY, DESIGN_WIDTH, DESIGN_HEIGHT } = useScale();
+ const { scale, offsetX, offsetY, DESIGN_WIDTH, DESIGN_HEIGHT } = useScale()
// 生成唯一的 mask ID
- const maskId = useMemo(
- () => `overlay-mask-${Math.random().toString(36).substr(2, 9)}`,
- []
- );
+ const maskId = useMemo(() => `overlay-mask-${Math.random().toString(36).substr(2, 9)}`, [])
// 防抖函数
const debounce = useCallback((fn: () => void, delay: number) => {
return () => {
if (debounceTimerRef.current) {
- clearTimeout(debounceTimerRef.current);
+ clearTimeout(debounceTimerRef.current)
}
- debounceTimerRef.current = window.setTimeout(fn, delay);
- };
- }, []);
+ debounceTimerRef.current = window.setTimeout(fn, delay)
+ }
+ }, [])
// SSR 兼容：只在客户端挂载
useEffect(() => {
- setMounted(true);
- }, []);
+ setMounted(true)
+ }, [])
// 获取所有匹配的元素（带缓存）
const getElements = useCallback(() => {
- if (typeof document === "undefined") return [];
+ if (typeof document === 'undefined') return []
- const selectorArray =
- typeof selectors === "string" ? [selectors] : selectors;
- const elements: Element[] = [];
+ const selectorArray = typeof selectors === 'string' ? [selectors] : selectors
+ const elements: Element[] = []
selectorArray.forEach((selector) => {
try {
- const matches = document.querySelectorAll(selector);
- elements.push(...Array.from(matches));
+ const matches = document.querySelectorAll(selector)
+ elements.push(...Array.from(matches))
} catch (error) {
- console.warn(`Invalid selector: ${selector}`, error);
+ console.warn(`Invalid selector: ${selector}`, error)
}
- });
+ })
// 缓存元素列表
- elementsCacheRef.current = elements;
- return elements;
- }, [selectors]);
+ elementsCacheRef.current = elements
+ return elements
+ }, [selectors])
// 计算元素位置（带浅比较优化）
const calculateRects = useCallback(() => {
- const elements =
- elementsCacheRef.current.length > 0
- ? elementsCacheRef.current
- : getElements();
- const rects: ElementRect[] = [];
+ const elements = elementsCacheRef.current.length > 0 ? elementsCacheRef.current : getElements()
+ const rects: ElementRect[] = []
elements.forEach((element) => {
- const rect = element.getBoundingClientRect();
+ const rect = element.getBoundingClientRect()
if (rect.width > 0 && rect.height > 0) {
rects.push({
x: rect.left,
y: rect.top,
width: rect.width,
height: rect.height,
- });
+ })
}
- });
+ })
// 浅比较，避免不必要的更新
const hasChanged =
rects.length !== prevRectsRef.current.length ||
rects.some((rect, index) => {
- const prev = prevRectsRef.current[index];
+ const prev = prevRectsRef.current[index]
return (
!prev ||
rect.x !== prev.x ||
rect.y !== prev.y ||
rect.width !== prev.width ||
rect.height !== prev.height
- );
- });
+ )
+ })
if (hasChanged) {
- prevRectsRef.current = rects;
- setElementRects(rects);
+ prevRectsRef.current = rects
+ setElementRects(rects)
}
- }, [getElements]);
+ }, [getElements])
// 使用 requestAnimationFrame 批量更新位置
const scheduleUpdate = useCallback(() => {
- if (rafRef.current) return;
+ if (rafRef.current) return
rafRef.current = requestAnimationFrame(() => {
- calculateRects();
- rafRef.current = null;
- });
- }, [calculateRects]);
+ calculateRects()
+ rafRef.current = null
+ })
+ }, [calculateRects])
// 监听窗口变化（带防抖优化）
useEffect(() => {
- if (!visible || !mounted) return;
+ if (!visible || !mounted) return
- const debouncedUpdate = debounce(scheduleUpdate, 150);
- const handleResize = debouncedUpdate;
- const handleScroll = debouncedUpdate;
+ const debouncedUpdate = debounce(scheduleUpdate, 150)
+ const handleResize = debouncedUpdate
+ const handleScroll = debouncedUpdate
- window.addEventListener("resize", handleResize, { passive: true });
- window.addEventListener("scroll", handleScroll, { passive: true });
+ window.addEventListener('resize', handleResize, { passive: true })
+ window.addEventListener('scroll', handleScroll, { passive: true })
// 初始计算
- scheduleUpdate();
+ scheduleUpdate()
return () => {
- window.removeEventListener("resize", handleResize);
- window.removeEventListener("scroll", handleScroll);
+ window.removeEventListener('resize', handleResize)
+ window.removeEventListener('scroll', handleScroll)
if (debounceTimerRef.current) {
- clearTimeout(debounceTimerRef.current);
- debounceTimerRef.current = null;
+ clearTimeout(debounceTimerRef.current)
+ debounceTimerRef.current = null
}
if (rafRef.current) {
- cancelAnimationFrame(rafRef.current);
- rafRef.current = null;
+ cancelAnimationFrame(rafRef.current)
+ rafRef.current = null
}
- };
- }, [visible, mounted, scheduleUpdate, debounce]);
+ }
+ }, [visible, mounted, scheduleUpdate, debounce])
// 使用 ResizeObserver 监听元素尺寸变化（带防抖优化）
useEffect(() => {
- if (!visible || !mounted) return;
+ if (!visible || !mounted) return
- const elements = getElements();
- if (elements.length === 0) return;
+ const elements = getElements()
+ if (elements.length === 0) return
- const debouncedUpdate = debounce(scheduleUpdate, 150);
- const observer = new ResizeObserver(debouncedUpdate);
+ const debouncedUpdate = debounce(scheduleUpdate, 150)
+ const observer = new ResizeObserver(debouncedUpdate)
elements.forEach((element) => {
- observer.observe(element);
- });
+ observer.observe(element)
+ })
- resizeObserverRef.current = observer;
+ resizeObserverRef.current = observer
return () => {
- observer.disconnect();
- resizeObserverRef.current = null;
- };
- }, [visible, mounted, getElements, scheduleUpdate, debounce]);
+ observer.disconnect()
+ resizeObserverRef.current = null
+ }
+ }, [visible, mounted, getElements, scheduleUpdate, debounce])
// 使用 MutationObserver 监听 DOM 变化（优化：只监听目标元素及其父级，带防抖）
useEffect(() => {
- if (!visible || !mounted) return;
+ if (!visible || !mounted) return
- const elements =
- elementsCacheRef.current.length > 0
- ? elementsCacheRef.current
- : getElements();
+ const elements = elementsCacheRef.current.length > 0 ? elementsCacheRef.current : getElements()
- if (elements.length === 0) return;
+ if (elements.length === 0) return
- const debouncedUpdate = debounce(scheduleUpdate, 200);
- const observer = new MutationObserver(debouncedUpdate);
+ const debouncedUpdate = debounce(scheduleUpdate, 200)
+ const observer = new MutationObserver(debouncedUpdate)
// 只监听目标元素及其父级，而不是整个 body
- const observedNodes = new Set();
+ const observedNodes = new Set()
elements.forEach((element) => {
- let current: Node | null = element;
+ let current: Node | null = element
while (current && current !== document.body) {
if (!observedNodes.has(current)) {
observer.observe(current, {
childList: true,
subtree: false,
attributes: true,
- attributeFilter: ["class", "style"],
- });
- observedNodes.add(current);
+ attributeFilter: ['class', 'style'],
+ })
+ observedNodes.add(current)
}
- current = current.parentNode;
+ current = current.parentNode
}
- });
+ })
- mutationObserverRef.current = observer;
+ mutationObserverRef.current = observer
return () => {
- observer.disconnect();
- mutationObserverRef.current = null;
- };
- }, [visible, mounted, getElements, scheduleUpdate, debounce]);
+ observer.disconnect()
+ mutationObserverRef.current = null
+ }
+ }, [visible, mounted, getElements, scheduleUpdate, debounce])
// 生成 SVG mask 的挖洞路径（使用 useMemo 缓存，转换为设计稿坐标）
const maskHoles = useMemo(() => {
if (elementRects.length === 0) {
- return [];
+ return []
}
- const padding = highlightWidth + borderRadius;
- const holes: string[] = [];
+ const padding = highlightWidth + borderRadius
+ const holes: string[] = []
elementRects.forEach((rect) => {
// 将屏幕坐标转换为设计稿坐标
- const designX = (rect.x - offsetX) / scale;
- const designY = (rect.y - offsetY) / scale;
- const designWidth = rect.width / scale;
- const designHeight = rect.height / scale;
- const designPadding = padding / scale;
- const designR = borderRadius / scale;
+ const designX = (rect.x - offsetX) / scale
+ const designY = (rect.y - offsetY) / scale
+ const designWidth = rect.width / scale
+ const designHeight = rect.height / scale
+ const designPadding = padding / scale
+ const designR = borderRadius / scale
- const x = designX - designPadding;
- const y = designY - designPadding;
- const width = designWidth + designPadding * 2;
- const height = designHeight + designPadding * 2;
- const r = designR;
+ const x = designX - designPadding
+ const y = designY - designPadding
+ const width = designWidth + designPadding * 2
+ const height = designHeight + designPadding * 2
+ const r = designR
// 创建圆角矩形路径（用于挖洞）
const path =
@@ -299,34 +282,33 @@ const Overlay = ({
`L ${x + width} ${y + height - r} ` +
`A ${r} ${r} 0 0 1 ${x + width - r} ${y + height} ` +
`L ${x + r} ${y + height} ` +
- `A ${r} ${r} 0 0 1 ${x} ${y + height - r} Z`;
+ `A ${r} ${r} 0 0 1 ${x} ${y + height - r} Z`
- holes.push(path);
- });
+ holes.push(path)
+ })
- return holes;
- }, [elementRects, highlightWidth, borderRadius, scale, offsetX, offsetY]);
+ return holes
+ }, [elementRects, highlightWidth, borderRadius, scale, offsetX, offsetY])
// 生成阻止点击的 div 块（使用 Spotlight 的共享工具函数）
// 因为 SVG mask 不能阻止点击，需要使用 div 块覆盖非高亮区域
const blockingDivs = useMemo(() => {
- if (elementRects.length === 0) return [];
+ if (elementRects.length === 0) return []
- const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 0;
- const viewportHeight =
- typeof window !== "undefined" ? window.innerHeight : 0;
+ const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : 0
+ const viewportHeight = typeof window !== 'undefined' ? window.innerHeight : 0
- const padding = highlightWidth + borderRadius;
+ const padding = highlightWidth + borderRadius
// 计算带 padding 的矩形区域（转换为 Spotlight 需要的格式）
const paddedRects = elementRects.map((rect) => ({
top: rect.y - padding,
left: rect.x - padding,
width: rect.width + padding * 2,
height: rect.height + padding * 2,
- }));
+ }))
- return getBlockingDivs(paddedRects, viewportWidth, viewportHeight);
- }, [elementRects, highlightWidth, borderRadius]);
+ return getBlockingDivs(paddedRects, viewportWidth, viewportHeight)
+ }, [elementRects, highlightWidth, borderRadius])
// 缓存视口尺寸（使用设计稿尺寸，应用缩放）
const viewportSize = useMemo(
@@ -335,48 +317,45 @@ const Overlay = ({
height: DESIGN_HEIGHT,
}),
[DESIGN_WIDTH, DESIGN_HEIGHT]
- );
+ )
// 缩放容器样式（应用 ScaleContext 的缩放）- 必须在条件返回之前
const scaledContainerStyle = useMemo(
() => ({
- position: "absolute",
+ position: 'absolute',
width: `${DESIGN_WIDTH}px`,
height: `${DESIGN_HEIGHT}px`,
left: `${offsetX}px`,
top: `${offsetY}px`,
transform: `scale(${scale})`,
- transformOrigin: "top left",
- overflow: "hidden",
- pointerEvents: "auto", // 允许点击事件穿透
+ transformOrigin: 'top left',
+ overflow: 'hidden',
+ pointerEvents: 'auto', // 允许点击事件穿透
}),
[scale, offsetX, offsetY, DESIGN_WIDTH, DESIGN_HEIGHT]
- );
+ )
// 渲染逻辑：
// 1. 如果有高亮元素，显示遮罩和高亮边框
// 2. 如果有 children，显示遮罩（即使没有高亮元素，用于包裹其他组件）
// 3. 如果 showMask 为 false，则不显示遮罩
- const hasHighlightElements = elementRects.length > 0;
+ const hasHighlightElements = elementRects.length > 0
const shouldRenderMask =
- showMask &&
- visible &&
- mounted &&
- (hasHighlightElements || children !== undefined);
- const shouldRenderChildren = visible && mounted && children !== undefined;
+ showMask && visible && mounted && (hasHighlightElements || children !== undefined)
+ const shouldRenderChildren = visible && mounted && children !== undefined
if (!shouldRenderMask && !shouldRenderChildren) {
- return null;
+ return null
}
// 外层容器样式（全屏，不缩放）
const overlayStyle: React.CSSProperties = {
- position: "fixed",
+ position: 'fixed',
inset: 0,
zIndex,
- pointerEvents: "none",
+ pointerEvents: 'none',
...style,
- };
+ }
const content = (
@@ -388,7 +367,7 @@ const Overlay = ({
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
- transition={{ duration: 0.3, ease: "easeInOut" }}
+ transition={{ duration: 0.3, ease: 'easeInOut' }}
>
{/* 阻止点击层 - 使用 fixed 定位覆盖非高亮区域（集成自 Spotlight） */}
{hasHighlightElements &&
@@ -396,21 +375,12 @@ const Overlay = ({
{/* 全屏白色区域（显示遮罩） */}
-
{children}
@@ -471,44 +435,40 @@ const Overlay = ({
{hasHighlightElements &&
elementRects.map((rect) => {
// 将屏幕坐标转换为设计稿坐标（考虑缩放和偏移）
- const designX = (rect.x - offsetX) / scale;
- const designY = (rect.y - offsetY) / scale;
- const designWidth = rect.width / scale;
- const designHeight = rect.height / scale;
+ const designX = (rect.x - offsetX) / scale
+ const designY = (rect.y - offsetY) / scale
+ const designWidth = rect.width / scale
+ const designHeight = rect.height / scale
return (
- );
+ )
})}
)}
- );
+ )
- return createPortal(content, document.body);
-};
+ return createPortal(content, document.body)
+}
-export default Overlay;
+export default Overlay
diff --git a/src/components/overlay/index.ts b/src/components/overlay/index.ts
index 4b6f90b..8d8df15 100644
--- a/src/components/overlay/index.ts
+++ b/src/components/overlay/index.ts
@@ -1,5 +1,5 @@
-export { default as Overlay } from "./Overlay";
-export type { OverlayProps } from "./Overlay";
+export { default as Overlay } from './Overlay'
+export type { OverlayProps } from './Overlay'
-export { EndingOverlay } from "./EndingOverlay";
-export type { EndingOverlayProps } from "./EndingOverlay";
+export { EndingOverlay } from './EndingOverlay'
+export type { EndingOverlayProps } from './EndingOverlay'
diff --git a/src/components/puzzle/MenuPuzzleCenter.tsx b/src/components/puzzle/MenuPuzzleCenter.tsx
index 431748f..f367b2e 100644
--- a/src/components/puzzle/MenuPuzzleCenter.tsx
+++ b/src/components/puzzle/MenuPuzzleCenter.tsx
@@ -1,51 +1,50 @@
-import { useMemo, useState } from "react";
-import { getBackgroundImage, getStaticImage } from "@/lib/utils";
-import { usePuzzleStore } from "@/store/puzzleStore";
-import { Image } from "@/components";
+import { useMemo, useState } from 'react'
+import { getBackgroundImage, getStaticImage } from '@/lib/utils'
+import { usePuzzleStore } from '@/store/puzzleStore'
+import { Image } from '@/components'
/**
* 六边形进度条组件
* 根据进度值显示不同颜色：100%绿色，50%-99%橙色，0%-49%灰色
*/
interface HexagonProgressBarProps {
- progress: number; // 0-100
+ progress: number // 0-100
}
const HexagonProgressBar = ({ progress }: HexagonProgressBarProps) => {
- const progressPercent = Math.min(100, Math.max(0, progress));
- const progressText = progressPercent.toFixed(2) === "100.00"
- ? "进度100%"
- : `进度${Math.round(progressPercent)}%`;
+ const progressPercent = Math.min(100, Math.max(0, progress))
+ const progressText =
+ progressPercent.toFixed(2) === '100.00' ? '进度100%' : `进度${Math.round(progressPercent)}%`
// 根据进度值确定填充颜色
const getProgressColor = () => {
if (progressPercent >= 100) {
- return "#90B86B"; // 浅橄榄绿色（100%完成）
+ return '#90B86B' // 浅橄榄绿色（100%完成）
} else if (progressPercent >= 50) {
- return "#EEB362"; // 橙色（50%-99%）
+ return '#EEB362' // 橙色（50%-99%）
} else {
- return "#E0E0E0"; // 浅灰色（0%-49%）
+ return '#E0E0E0' // 浅灰色（0%-49%）
}
- };
+ }
- const fillColor = getProgressColor();
+ const fillColor = getProgressColor()
// 六边形路径，细长的水平六边形，左右两端是尖角
// 正确的六边形路径：从左顶点开始，顺时针绘制
// 左顶点(0%, 50%) -> 左上角(3%, 0%) -> 右上角(97%, 0%) -> 右顶点(100%, 50%) -> 右下角(97%, 100%) -> 左下角(3%, 100%)
// 外层路径（包含边框）
- const outerHexagonPath = "polygon(0% 50%, 3% 0%, 97% 0%, 100% 50%, 97% 100%, 3% 100%)";
+ const outerHexagonPath = 'polygon(0% 50%, 3% 0%, 97% 0%, 100% 50%, 97% 100%, 3% 100%)'
// 内层路径（边框内部）
- const innerHexagonPath = "polygon(0% 50%, 3% 0%, 97% 0%, 100% 50%, 97% 100%, 3% 100%)";
- const borderWidth = 4; // 增加边框宽度从2px到3px
+ const innerHexagonPath = 'polygon(0% 50%, 3% 0%, 97% 0%, 100% 50%, 97% 100%, 3% 100%)'
+ const borderWidth = 4 // 增加边框宽度从2px到3px
return (
- (null);
+const MenuPuzzleCenter = ({ visible, onClose, onSelectResidence }: MenuPuzzleCenterProps) => {
+ const { getPuzzleCollectProgress } = usePuzzleStore()
+ const [activeMapImage, setActiveMapImage] = useState(null)
const residenceProgress = useMemo(
() =>
@@ -227,37 +222,40 @@ const MenuPuzzleCenter = ({
progress: item.hasPuzzle ? getPuzzleCollectProgress(item.residence) : 0,
})),
[getPuzzleCollectProgress]
- );
+ )
- if (!visible) return null;
+ if (!visible) return null
return (
(
- ({ residence, pieceId, showGlow = true, className = "" }, ref) => {
+ ({ residence, pieceId, showGlow = true, className = '' }, ref) => {
// 碎片图片路径
- const pieceImage = getStaticImage(`puzzle/${residence}/${pieceId}`);
+ const pieceImage = getStaticImage(`puzzle/${residence}/${pieceId}`)
return (
- );
+ )
}
-);
+)
-PuzzlePieceDisplay.displayName = "PuzzlePieceDisplay";
+PuzzlePieceDisplay.displayName = 'PuzzlePieceDisplay'
-export default PuzzlePieceDisplay;
+export default PuzzlePieceDisplay
diff --git a/src/components/puzzle/PuzzlePiecePortal.tsx b/src/components/puzzle/PuzzlePiecePortal.tsx
index 00fc62f..75f8bc4 100644
--- a/src/components/puzzle/PuzzlePiecePortal.tsx
+++ b/src/components/puzzle/PuzzlePiecePortal.tsx
@@ -1,13 +1,13 @@
-import { forwardRef, useEffect, useState } from "react";
-import { createPortal } from "react-dom";
-import { motion } from "framer-motion";
-import PuzzlePieceDisplay from "./PuzzlePieceDisplay";
+import { forwardRef, useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { motion } from 'framer-motion'
+import PuzzlePieceDisplay from './PuzzlePieceDisplay'
interface PuzzlePiecePortalProps {
- residence: string;
- pieceId: number;
+ residence: string
+ pieceId: number
/** 是否隐藏（飞行时隐藏原始碎片） */
- hidden?: boolean;
+ hidden?: boolean
}
/**
@@ -17,38 +17,38 @@ interface PuzzlePiecePortalProps {
*/
const PuzzlePiecePortal = forwardRef(
({ residence, pieceId, hidden = false }, ref) => {
- const [isAnimating, setIsAnimating] = useState(true);
+ const [isAnimating, setIsAnimating] = useState(true)
// 当组件首次渲染时，标记动画开始
useEffect(() => {
- setIsAnimating(true);
+ setIsAnimating(true)
// 动画完成后，重置状态以便下次出现时重新播放
const timer = setTimeout(() => {
- setIsAnimating(false);
- }, 800); // 与动画时长一致
- return () => clearTimeout(timer);
- }, [pieceId]); // 当 pieceId 变化时重新播放动画
+ setIsAnimating(false)
+ }, 800) // 与动画时长一致
+ return () => clearTimeout(timer)
+ }, [pieceId]) // 当 pieceId 变化时重新播放动画
return createPortal(
(
}
animate={
hidden
- ? { opacity: 0, visibility: "hidden" as const }
+ ? { opacity: 0, visibility: 'hidden' as const }
: isAnimating
- ? {
- scale: 1,
- rotateY: 0,
- opacity: 1,
- visibility: "visible" as const,
- }
- : {
- opacity: 1,
- visibility: "visible" as const,
- }
+ ? {
+ scale: 1,
+ rotateY: 0,
+ opacity: 1,
+ visibility: 'visible' as const,
+ }
+ : {
+ opacity: 1,
+ visibility: 'visible' as const,
+ }
}
transition={{
duration: 0.8, // 稍微延长动画时间，让效果更舒缓
@@ -87,23 +87,23 @@ const PuzzlePiecePortal = forwardRef(
},
opacity: {
duration: 0.6,
- ease: "easeOut",
+ ease: 'easeOut',
},
- }}
- >
-
,
document.body
- );
+ )
}
-);
+)
-PuzzlePiecePortal.displayName = "PuzzlePiecePortal";
+PuzzlePiecePortal.displayName = 'PuzzlePiecePortal'
-export default PuzzlePiecePortal;
+export default PuzzlePiecePortal
diff --git a/src/components/puzzle/PuzzleSystem.tsx b/src/components/puzzle/PuzzleSystem.tsx
index d8e4d15..0882f12 100644
--- a/src/components/puzzle/PuzzleSystem.tsx
+++ b/src/components/puzzle/PuzzleSystem.tsx
@@ -1,32 +1,32 @@
-import { useState, useEffect } from "react";
-import { useNavigate, useParams } from "react-router-dom";
-import { cn, getBackgroundImage, getStaticImage } from "@/lib/utils";
-import { usePuzzleStore } from "@/store/puzzleStore";
-import { getPuzzlePieceData } from "@/config/puzzleData";
-import { getPuzzlePiecePath, getPuzzleViewBox } from "@/config/puzzlePaths";
-import { Image } from "@/components";
+import { useState, useEffect } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { cn, getBackgroundImage, getStaticImage } from '@/lib/utils'
+import { usePuzzleStore } from '@/store/puzzleStore'
+import { getPuzzlePieceData } from '@/config/puzzleData'
+import { getPuzzlePiecePath, getPuzzleViewBox } from '@/config/puzzlePaths'
+import { Image } from '@/components'
/**
* 将英文故居名称转换为中文显示名称
*/
const getResidenceDisplayName = (residence: string): string => {
const nameMap: Record = {
- chenyun: "陈云",
- huangyanpei: "黄炎培",
- luxun: "鲁迅",
- sunzhongshan: "孙中山",
- };
+ chenyun: '陈云',
+ huangyanpei: '黄炎培',
+ luxun: '鲁迅',
+ sunzhongshan: '孙中山',
+ }
- return nameMap[residence] || residence;
-};
+ return nameMap[residence] || residence
+}
export interface PuzzleSystemProps {
/** 是否可见 */
- visible: boolean;
+ visible: boolean
/** 关闭回调 */
- onClose: () => void;
+ onClose: () => void
/** 故居名称，如 'chenyun' */
- residence: string;
+ residence: string
}
/**
@@ -42,24 +42,24 @@ const PuzzlePieceSvg = ({
onHover,
onLeave,
}: {
- residence: string;
- pieceId: number;
- isUnlocked: boolean;
- isSelected: boolean;
- isHovered: boolean;
- onClick: () => void;
- onHover: (id: number) => void;
- onLeave: () => void;
+ residence: string
+ pieceId: number
+ isUnlocked: boolean
+ isSelected: boolean
+ isHovered: boolean
+ onClick: () => void
+ onHover: (id: number) => void
+ onLeave: () => void
}) => {
- const pathData = getPuzzlePiecePath(residence, pieceId);
+ const pathData = getPuzzlePiecePath(residence, pieceId)
- if (!pathData) return null;
+ if (!pathData) return null
// 为每个碎片生成唯一的pattern ID
- const patternId = `pattern-${residence}-${pieceId}`;
+ const patternId = `pattern-${residence}-${pieceId}`
// 碎片图片路径
- const pieceImage = getStaticImage(`puzzle/${residence}/${pieceId}`);
+ const pieceImage = getStaticImage(`puzzle/${residence}/${pieceId}`)
return (
<>
@@ -81,9 +81,9 @@ const PuzzlePieceSvg = ({
onMouseEnter={() => (isUnlocked ? onHover(pieceId) : undefined)}
onMouseLeave={onLeave}
style={{
- cursor: isUnlocked ? "pointer" : "not-allowed",
+ cursor: isUnlocked ? 'pointer' : 'not-allowed',
}}
- className={cn(isUnlocked ? "puzzle-piece" : "")}
+ className={cn(isUnlocked ? 'puzzle-piece' : '')}
>
{/* Safari/iOS 对 SVG image 的 CSS filter 支持有限，使用滤镜定义保证生效 */}
@@ -116,7 +116,7 @@ const PuzzlePieceSvg = ({
preserveAspectRatio="none"
filter={isUnlocked ? undefined : `url(#${patternId}-dim)`}
style={{
- transition: "filter 220ms ease",
+ transition: 'filter 220ms ease',
}}
/>
@@ -126,14 +126,14 @@ const PuzzlePieceSvg = ({
(null);
- const [hoveredPiece, setHoveredPiece] = useState(null);
+ const navigate = useNavigate()
+ const { moduleName } = useParams<{ moduleName: string }>()
+ const { isPuzzleUnlocked, getPuzzleCollectProgress } = usePuzzleStore()
+ const [selectedPiece, setSelectedPiece] = useState(null)
+ const [hoveredPiece, setHoveredPiece] = useState(null)
// 当弹窗关闭时重置选中状态
useEffect(() => {
if (!visible) {
- setSelectedPiece(null);
+ setSelectedPiece(null)
}
- }, [visible]);
+ }, [visible])
- if (!visible) return null;
+ if (!visible) return null
// 背景图片
- const backgroundImage = getStaticImage("puzzle/底图");
+ const backgroundImage = getStaticImage('puzzle/底图')
// 处理碎片点击
const handlePieceClick = (pieceId: number) => {
- const isUnlocked = isPuzzleUnlocked(residence, pieceId);
+ const isUnlocked = isPuzzleUnlocked(residence, pieceId)
if (isUnlocked) {
// 显示选中效果，更新详情框
- setSelectedPiece(pieceId);
+ setSelectedPiece(pieceId)
} else {
// 未解锁的碎片，可以显示提示或不做任何操作
// 暂时不做处理，或者可以添加提示
}
- };
+ }
// 处理前往按钮点击
const handleGoToPage = () => {
@@ -180,40 +180,36 @@ const PuzzleSystem = ({ visible, onClose, residence }: PuzzleSystemProps) => {
// console.log(residence, selectedPiece, moduleName);
// const route = getPuzzleRoute(residence, selectedPiece, moduleName);
// console.log(route);
- const route = selectedPieceData?.route;
+ const route = selectedPieceData?.route
if (route) {
- navigate(`/${moduleName}/${residence}/${route}`);
- onClose();
+ navigate(`/${moduleName}/${residence}/${route}`)
+ onClose()
}
}
- };
+ }
// 获取当前选中碎片的数据
- const selectedPieceData = selectedPiece
- ? getPuzzlePieceData(residence, selectedPiece)
- : null;
+ const selectedPieceData = selectedPiece ? getPuzzlePieceData(residence, selectedPiece) : null
// 生成16块碎片（1-16）
- const pieces = Array.from({ length: 16 }, (_, i) => i + 1);
+ const pieces = Array.from({ length: 16 }, (_, i) => i + 1)
// 将悬停的碎片放到最后渲染，保证 hover 层级在最上
const renderPieces =
- hoveredPiece != null
- ? [...pieces.filter((p) => p !== hoveredPiece), hoveredPiece]
- : pieces;
+ hoveredPiece != null ? [...pieces.filter((p) => p !== hoveredPiece), hoveredPiece] : pieces
// 获取收集进度
- const collectProgress = getPuzzleCollectProgress(residence);
+ const collectProgress = getPuzzleCollectProgress(residence)
return (
- );
-};
+ )
+}
-export default PuzzleSystem;
+export default PuzzleSystem
diff --git a/src/components/puzzle/index.ts b/src/components/puzzle/index.ts
index 609ff1c..3eda983 100644
--- a/src/components/puzzle/index.ts
+++ b/src/components/puzzle/index.ts
@@ -1,6 +1,5 @@
-export { default as PuzzleSystem } from "./PuzzleSystem";
-export type { PuzzleSystemProps } from "./PuzzleSystem";
-export { default as PuzzlePieceDisplay } from "./PuzzlePieceDisplay";
-export type { PuzzlePieceDisplayProps } from "./PuzzlePieceDisplay";
-export { default as PuzzlePiecePortal } from "./PuzzlePiecePortal";
-
+export { default as PuzzleSystem } from './PuzzleSystem'
+export type { PuzzleSystemProps } from './PuzzleSystem'
+export { default as PuzzlePieceDisplay } from './PuzzlePieceDisplay'
+export type { PuzzlePieceDisplayProps } from './PuzzlePieceDisplay'
+export { default as PuzzlePiecePortal } from './PuzzlePiecePortal'
diff --git a/src/components/quiz/drag-fill/drag-fill.stories.tsx b/src/components/quiz/drag-fill/drag-fill.stories.tsx
index 35175eb..e1abd32 100644
--- a/src/components/quiz/drag-fill/drag-fill.stories.tsx
+++ b/src/components/quiz/drag-fill/drag-fill.stories.tsx
@@ -1,169 +1,167 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import DragFill from "./drag-fill";
-import type { DragFillProps } from "./drag-fill.types";
-import { cn } from "@/lib/utils";
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import DragFill from './drag-fill'
+import type { DragFillProps } from './drag-fill.types'
+import { cn } from '@/lib/utils'
const meta: Meta
@@ -139,5 +130,5 @@ export const EndingOverlay = ({
{/* */}
+
- );
-};
+ )
+}
export interface MenuPuzzleCenterProps {
/** 是否可见 */
- visible: boolean;
+ visible: boolean
/** 关闭回调 */
- onClose: () => void;
+ onClose: () => void
/** 选择某个故居后的回调（进入对应的碎片系统） */
- onSelectResidence: (residence: string) => void;
+ onSelectResidence: (residence: string) => void
}
interface ResidenceConfig {
/** 拼图存储用的英文 key（如 chenyun） */
- residence: string;
+ residence: string
/** 显示名称 */
- displayName: string;
+ displayName: string
/** 在大地图上的水平位置（百分比字符串，如 "20%"） */
- left: string;
+ left: string
/** 在大地图上的垂直位置（百分比字符串，如 "40%"） */
- top: string;
+ top: string
/** 显示用图片路径（相对于 puzzle/home/ 目录） */
- image: string;
+ image: string
/** 是否已经开放拼图（未开放时只展示，不可点击） */
- hasPuzzle: boolean;
+ hasPuzzle: boolean
/** 是否有导图资源 */
- hasMap?: boolean;
+ hasMap?: boolean
/** 导图资源文件名（位于 puzzle/home/map 下） */
- mapImage?: string;
+ mapImage?: string
}
/**
@@ -133,91 +132,87 @@ interface ResidenceConfig {
*/
const RESIDENCE_LIST: ResidenceConfig[] = [
{
- residence: "maozedong",
- displayName: "毛泽东旧居",
- left: "30%",
- top: "35%",
- image: "毛泽东",
+ residence: 'maozedong',
+ displayName: '毛泽东旧居',
+ left: '30%',
+ top: '35%',
+ image: '毛泽东',
hasPuzzle: true,
hasMap: true,
- mapImage: "毛泽东导图",
+ mapImage: '毛泽东导图',
},
{
- residence: "sunzhongshan",
- displayName: "孙中山故居",
- left: "12%",
- top: "51%",
- image: "孙中山",
+ residence: 'sunzhongshan',
+ displayName: '孙中山故居',
+ left: '12%',
+ top: '51%',
+ image: '孙中山',
hasPuzzle: true,
hasMap: true,
- mapImage: "孙中山导图",
+ mapImage: '孙中山导图',
},
{
- residence: "luxun",
- displayName: "鲁迅故居",
- left: "26.3%",
- top: "74%",
- image: "鲁迅",
+ residence: 'luxun',
+ displayName: '鲁迅故居',
+ left: '26.3%',
+ top: '74%',
+ image: '鲁迅',
hasPuzzle: true,
hasMap: true,
- mapImage: "鲁迅导图",
+ mapImage: '鲁迅导图',
},
{
- residence: "huangyanpei",
- displayName: "黄炎培故居",
- left: "44%",
- top: "67%",
- image: "黄炎培",
+ residence: 'huangyanpei',
+ displayName: '黄炎培故居',
+ left: '44%',
+ top: '67%',
+ image: '黄炎培',
hasPuzzle: true,
hasMap: true,
- mapImage: "黄炎培导图",
+ mapImage: '黄炎培导图',
},
{
- residence: "nieer",
- displayName: "聂耳旧居",
- left: "62%",
- top: "60%",
- image: "聂耳",
+ residence: 'nieer',
+ displayName: '聂耳旧居',
+ left: '62%',
+ top: '60%',
+ image: '聂耳',
hasPuzzle: true,
hasMap: false,
},
{
- residence: "zhangleping",
- displayName: "张乐平故居",
- left: "73%",
- top: "33%",
- image: "张乐平",
+ residence: 'zhangleping',
+ displayName: '张乐平故居',
+ left: '73%',
+ top: '33%',
+ image: '张乐平',
hasPuzzle: true,
hasMap: false,
},
{
- residence: "rongdesheng",
- displayName: "荣德生旧居",
- left: "90%",
- top: "45%",
- image: "荣德生",
+ residence: 'rongdesheng',
+ displayName: '荣德生旧居',
+ left: '90%',
+ top: '45%',
+ image: '荣德生',
hasPuzzle: true,
hasMap: false,
},
{
- residence: "chenyun",
- displayName: "陈云故居",
- left: "80%",
- top: "76%",
- image: "陈云",
+ residence: 'chenyun',
+ displayName: '陈云故居',
+ left: '80%',
+ top: '76%',
+ image: '陈云',
hasPuzzle: true,
hasMap: true,
- mapImage: "陈云导图",
+ mapImage: '陈云导图',
},
-];
+]
-const MenuPuzzleCenter = ({
- visible,
- onClose,
- onSelectResidence,
-}: MenuPuzzleCenterProps) => {
- const { getPuzzleCollectProgress } = usePuzzleStore();
- const [activeMapImage, setActiveMapImage] = useState
{/* 外层：白色边框（使用 clip-path 裁剪形状） */}
{/* 内容容器（边框内部区域） */}
@@ -63,7 +62,7 @@ const HexagonProgressBar = ({ progress }: HexagonProgressBarProps) => {
{/* 填充层（根据进度百分比从左侧填充） */}
@@ -78,7 +77,7 @@ const HexagonProgressBar = ({ progress }: HexagonProgressBarProps) => {
className="absolute inset-0"
style={{
backgroundColor: fillColor,
- transition: "width 0.3s ease, background-color 0.3s ease",
+ transition: 'width 0.3s ease, background-color 0.3s ease',
}}
/>
@@ -88,42 +87,42 @@ const HexagonProgressBar = ({ progress }: HexagonProgressBarProps) => {
{progressText}
{
if (e.target === e.currentTarget) {
- onClose();
+ onClose()
}
}}
>
- );
-};
-
-export default MenuPuzzleCenter;
-
+ )
+}
+export default MenuPuzzleCenter
diff --git a/src/components/puzzle/PuzzlePieceDisplay.tsx b/src/components/puzzle/PuzzlePieceDisplay.tsx
index 1fa0988..1921c47 100644
--- a/src/components/puzzle/PuzzlePieceDisplay.tsx
+++ b/src/components/puzzle/PuzzlePieceDisplay.tsx
@@ -1,15 +1,15 @@
-import { forwardRef } from "react";
-import { getStaticImage } from "@/lib/utils";
+import { forwardRef } from 'react'
+import { getStaticImage } from '@/lib/utils'
export interface PuzzlePieceDisplayProps {
/** 故居名称，如 'chenyun' */
- residence: string;
+ residence: string
/** 碎片ID */
- pieceId: number;
+ pieceId: number
/** 是否显示发光动画 */
- showGlow?: boolean;
+ showGlow?: boolean
/** 自定义类名 */
- className?: string;
+ className?: string
}
/**
@@ -19,16 +19,16 @@ export interface PuzzlePieceDisplayProps {
* - 可以被 ref 引用，用于飞行动画
*/
const PuzzlePieceDisplay = forwardRef
{/* 箭头指示底图 */}
- ![]({getStaticImage("puzzle/home/箭头指引")})
+ })
{/* 关闭按钮 */}
{residenceProgress.map(
@@ -278,10 +276,7 @@ const MenuPuzzleCenter = ({
style={{ left, top }}
>
{/* 故居图片（资源在 puzzle/home 下，可根据实际名称调整） */}
-
)}
- {
- if (!hasPuzzle) return;
- e.stopPropagation();
- onSelectResidence(residence);
- }} />
+ if (!hasPuzzle) return
+ e.stopPropagation()
+ onSelectResidence(residence)
+ }}
+ />
{
- e.stopPropagation();
- if (!hasMap || !mapImage) return;
- setActiveMapImage(mapImage);
+ e.stopPropagation()
+ if (!hasMap || !mapImage) return
+ setActiveMapImage(mapImage)
}}
/>
@@ -318,10 +317,10 @@ const MenuPuzzleCenter = ({
{activeMapImage && (
{
if (e.target === e.currentTarget) {
- setActiveMapImage(null);
+ setActiveMapImage(null)
}
}}
>
@@ -329,25 +328,20 @@ const MenuPuzzleCenter = ({
setActiveMapImage(null)}
/>
- })
+
{
// 点击背景关闭
if (e.target === e.currentTarget) {
- onClose();
+ onClose()
}
}}
>
@@ -227,7 +223,7 @@ const PuzzleSystem = ({ visible, onClose, residence }: PuzzleSystemProps) => {
{/* 关闭按钮 */}
{
{/* 收集进度 */}
@@ -271,12 +267,12 @@ const PuzzleSystem = ({ visible, onClose, residence }: PuzzleSystemProps) => {
viewBox={getPuzzleViewBox(residence)}
className="w-full h-full"
style={{
- filter: "drop-shadow(0px 2px 4px rgba(0,0,0,0.3))",
- overflow: "visible",
+ filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.3))',
+ overflow: 'visible',
}}
>
{renderPieces.map((pieceId) => {
- const isUnlocked = isPuzzleUnlocked(residence, pieceId);
+ const isUnlocked = isPuzzleUnlocked(residence, pieceId)
return (
{
onHover={(id) => setHoveredPiece(id)}
onLeave={() => setHoveredPiece(null)}
/>
- );
+ )
})}
@@ -300,36 +296,30 @@ const PuzzleSystem = ({ visible, onClose, residence }: PuzzleSystemProps) => {
{getResidenceDisplayName(residence)}故居碎片
![碎片装饰]({getStaticImage("puzzle/碎片装饰")})
{/* 收集进度 */}
- {collectProgress.toFixed(2) == "1.00"
- ? "已集齐"
+ {collectProgress.toFixed(2) == '1.00'
+ ? '已集齐'
: `收集进度${collectProgress.toFixed(2)}%`}
{/* 标题 */}
{selectedPieceData && (
@@ -338,7 +328,7 @@ const PuzzleSystem = ({ visible, onClose, residence }: PuzzleSystemProps) => {
{selectedPieceData && (
{
{/* 空格换行 */}
- {selectedPieceData.title
- .split(" ")
- .map((word: string, index: number) => (
-
)}
{/* 对应页面图片 */}
- {word}
- {index <
- selectedPieceData.title.split(" ").length - 1 &&
- " "}
-
- ))}
+ {selectedPieceData.title.split(' ').map((word: string, index: number) => (
+
+ {word}
+ {index < selectedPieceData.title.split(' ').length - 1 && ' '}
+
+ ))}
- 当前填充: {JSON.stringify(value)}
-
+ 当前填充: {JSON.stringify(value)}
@@ -176,29 +174,24 @@ export const CustomRender: Story = {
renderBlank={(blank, filledValue) => (
(
onSubmit,
disabled = false,
allowDuplicate = false,
- layout = "vertical",
+ layout = 'vertical',
hideLabels = false,
className,
optionClassName,
blankClassName,
- submitText = "提交",
+ submitText = '提交',
showSubmitButton = true,
renderOption,
renderBlank,
@@ -48,205 +48,180 @@ const DragFill = forwardRef(
) => {
// 标准化选项数据
const normalizedOptions: DragFillOption[] = options.map((option) => {
- if (typeof option === "string") {
- return { value: option, label: option };
+ if (typeof option === 'string') {
+ return { value: option, label: option }
}
- return option;
- });
+ return option
+ })
// 标准化空白区域数据
const normalizedBlanks: DragFillBlank[] = blanks.map((blank, index) => {
- if (typeof blank === "string") {
- return { id: `blank-${index}`, label: blank };
+ if (typeof blank === 'string') {
+ return { id: `blank-${index}`, label: blank }
}
- return blank;
- });
+ return blank
+ })
// 受控/非受控模式
- const isControlled = controlledValue !== undefined;
- const [internalValue, setInternalValue] = useState(
- defaultValue || []
- );
- const currentValue = isControlled ? controlledValue : internalValue;
+ const isControlled = controlledValue !== undefined
+ const [internalValue, setInternalValue] = useState(defaultValue || [])
+ const currentValue = isControlled ? controlledValue : internalValue
// 拖拽状态
- const [draggingOption, setDraggingOption] = useState(null);
+ const [draggingOption, setDraggingOption] = useState(null)
const [dragPosition, setDragPosition] = useState<{
- x: number;
- y: number;
- } | null>(null);
- const [hoveredBlank, setHoveredBlank] = useState(null);
- const dragOffsetRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
- const blankRefsMap = useRef>(new Map());
+ x: number
+ y: number
+ } | null>(null)
+ const [hoveredBlank, setHoveredBlank] = useState(null)
+ const dragOffsetRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 })
+ const blankRefsMap = useRef>(new Map())
// 检查选项是否已被使用
const isOptionUsed = useCallback(
(optionValue: string): boolean => {
- if (allowDuplicate) return false;
- return currentValue.some(
- (result) => result.optionValue === optionValue
- );
+ if (allowDuplicate) return false
+ return currentValue.some((result) => result.optionValue === optionValue)
},
[allowDuplicate, currentValue]
- );
+ )
// 通用的坐标更新逻辑（鼠标/触摸）
const updateDragPosition = useCallback(
(clientX: number, clientY: number) => {
- if (!draggingOption) return;
+ if (!draggingOption) return
- setDragPosition({ x: clientX, y: clientY });
+ setDragPosition({ x: clientX, y: clientY })
// 检测是否悬停在空白区域上
- let foundBlank: string | null = null;
+ let foundBlank: string | null = null
// 首先检查组件内的空白区域
blankRefsMap.current.forEach((element, blankId) => {
- const rect = element.getBoundingClientRect();
+ const rect = element.getBoundingClientRect()
if (
clientX >= rect.left &&
clientX <= rect.right &&
clientY >= rect.top &&
clientY <= rect.bottom
) {
- foundBlank = blankId;
+ foundBlank = blankId
}
- });
+ })
// 如果没找到，尝试查找页面中所有带 data-blank-id 的元素
if (!foundBlank) {
normalizedBlanks.forEach((blank) => {
- const element = document.querySelector(
- `[data-blank-id="${blank.id}"]`
- );
+ const element = document.querySelector(`[data-blank-id="${blank.id}"]`)
if (element) {
- const rect = element.getBoundingClientRect();
+ const rect = element.getBoundingClientRect()
if (
clientX >= rect.left &&
clientX <= rect.right &&
clientY >= rect.top &&
clientY <= rect.bottom
) {
- foundBlank = blank.id;
+ foundBlank = blank.id
}
}
- });
+ })
}
- setHoveredBlank(foundBlank);
+ setHoveredBlank(foundBlank)
},
[draggingOption, normalizedBlanks]
- );
+ )
// 处理鼠标移动
const handleMouseMove = useCallback(
(e: MouseEvent) => {
- updateDragPosition(e.clientX, e.clientY);
+ updateDragPosition(e.clientX, e.clientY)
},
[updateDragPosition]
- );
+ )
// 处理触摸移动
const handleTouchMove = useCallback(
(e: TouchEvent) => {
- const touch = e.touches[0];
- if (!touch) return;
+ const touch = e.touches[0]
+ if (!touch) return
// 阻止页面滚动，确保拖拽顺滑
- e.preventDefault();
- updateDragPosition(touch.clientX, touch.clientY);
+ e.preventDefault()
+ updateDragPosition(touch.clientX, touch.clientY)
},
[updateDragPosition]
- );
+ )
// 处理释放（鼠标/触摸）
const handleRelease = useCallback(() => {
- if (!draggingOption) return;
+ if (!draggingOption) return
// 如果悬停在空白区域上，执行放置
if (hoveredBlank) {
- const optionValue = draggingOption;
+ const optionValue = draggingOption
// 检查是否允许重复
if (!allowDuplicate) {
- const isAlreadyUsed = currentValue.some(
- (result) => result.optionValue === optionValue
- );
+ const isAlreadyUsed = currentValue.some((result) => result.optionValue === optionValue)
if (isAlreadyUsed) {
// 如果已使用，先移除旧的填充
- const newValue = currentValue.filter(
- (result) => result.optionValue !== optionValue
- );
+ const newValue = currentValue.filter((result) => result.optionValue !== optionValue)
// 添加新的填充
- const updatedValue = [
- ...newValue,
- { blankId: hoveredBlank, optionValue },
- ];
+ const updatedValue = [...newValue, { blankId: hoveredBlank, optionValue }]
if (!isControlled) {
- setInternalValue(updatedValue);
+ setInternalValue(updatedValue)
}
- onChange?.(updatedValue);
- setDraggingOption(null);
- setDragPosition(null);
- setHoveredBlank(null);
- return;
+ onChange?.(updatedValue)
+ setDraggingOption(null)
+ setDragPosition(null)
+ setHoveredBlank(null)
+ return
}
}
// 检查空白区域是否已有填充
- const existingIndex = currentValue.findIndex(
- (result) => result.blankId === hoveredBlank
- );
+ const existingIndex = currentValue.findIndex((result) => result.blankId === hoveredBlank)
- let updatedValue: DragFillResult[];
+ let updatedValue: DragFillResult[]
if (existingIndex >= 0) {
// 替换现有填充
- updatedValue = [...currentValue];
- updatedValue[existingIndex] = { blankId: hoveredBlank, optionValue };
+ updatedValue = [...currentValue]
+ updatedValue[existingIndex] = { blankId: hoveredBlank, optionValue }
} else {
// 添加新填充
- updatedValue = [
- ...currentValue,
- { blankId: hoveredBlank, optionValue },
- ];
+ updatedValue = [...currentValue, { blankId: hoveredBlank, optionValue }]
}
if (!isControlled) {
- setInternalValue(updatedValue);
+ setInternalValue(updatedValue)
}
- onChange?.(updatedValue);
+ onChange?.(updatedValue)
}
- setDraggingOption(null);
- setDragPosition(null);
- setHoveredBlank(null);
- }, [
- draggingOption,
- hoveredBlank,
- allowDuplicate,
- currentValue,
- isControlled,
- onChange,
- ]);
+ setDraggingOption(null)
+ setDragPosition(null)
+ setHoveredBlank(null)
+ }, [draggingOption, hoveredBlank, allowDuplicate, currentValue, isControlled, onChange])
// 添加全局鼠标事件监听
useEffect(() => {
if (draggingOption) {
- document.addEventListener("mousemove", handleMouseMove);
- document.addEventListener("mouseup", handleRelease);
- document.addEventListener("touchmove", handleTouchMove, {
+ document.addEventListener('mousemove', handleMouseMove)
+ document.addEventListener('mouseup', handleRelease)
+ document.addEventListener('touchmove', handleTouchMove, {
passive: false,
- });
- document.addEventListener("touchend", handleRelease);
- document.addEventListener("touchcancel", handleRelease);
+ })
+ document.addEventListener('touchend', handleRelease)
+ document.addEventListener('touchcancel', handleRelease)
return () => {
- document.removeEventListener("mousemove", handleMouseMove);
- document.removeEventListener("mouseup", handleRelease);
- document.removeEventListener("touchmove", handleTouchMove);
- document.removeEventListener("touchend", handleRelease);
- document.removeEventListener("touchcancel", handleRelease);
- };
+ document.removeEventListener('mousemove', handleMouseMove)
+ document.removeEventListener('mouseup', handleRelease)
+ document.removeEventListener('touchmove', handleTouchMove)
+ document.removeEventListener('touchend', handleRelease)
+ document.removeEventListener('touchcancel', handleRelease)
+ }
}
- }, [draggingOption, handleMouseMove, handleTouchMove, handleRelease]);
+ }, [draggingOption, handleMouseMove, handleTouchMove, handleRelease])
// 开始拖拽（通用）
const startDragging = (
@@ -255,98 +230,93 @@ const DragFill = forwardRef(
clientY: number,
currentTarget: HTMLElement
) => {
- if (disabled) return;
- const option = normalizedOptions.find((opt) => opt.value === optionValue);
- if (option?.disabled) return;
+ if (disabled) return
+ const option = normalizedOptions.find((opt) => opt.value === optionValue)
+ if (option?.disabled) return
// 检查是否已使用
- if (!allowDuplicate && isOptionUsed(optionValue)) return;
+ if (!allowDuplicate && isOptionUsed(optionValue)) return
// 获取实际的元素（如果有自定义渲染，使用第一个子元素）
- const wrapperElement = currentTarget;
+ const wrapperElement = currentTarget
const actualElement = renderOption
? (wrapperElement.firstElementChild as HTMLElement)
- : wrapperElement;
+ : wrapperElement
- if (!actualElement) return;
+ if (!actualElement) return
- const rect = actualElement.getBoundingClientRect();
+ const rect = actualElement.getBoundingClientRect()
// 记录偏移量和元素尺寸
dragOffsetRef.current = {
x: clientX - rect.left,
y: clientY - rect.top,
- };
+ }
- setDraggingOption(optionValue);
- setDragPosition({ x: clientX, y: clientY });
- };
+ setDraggingOption(optionValue)
+ setDragPosition({ x: clientX, y: clientY })
+ }
// 处理鼠标按下开始拖拽
const handleMouseDown = (e: React.MouseEvent, optionValue: string) => {
- startDragging(optionValue, e.clientX, e.clientY, e.currentTarget as HTMLElement);
- };
+ startDragging(optionValue, e.clientX, e.clientY, e.currentTarget as HTMLElement)
+ }
// 处理触摸开始拖拽
const handleTouchStart = (e: React.TouchEvent, optionValue: string) => {
- const touch = e.touches[0];
- if (!touch) return;
+ const touch = e.touches[0]
+ if (!touch) return
// 防止滚动干扰
- e.preventDefault();
- startDragging(optionValue, touch.clientX, touch.clientY, e.currentTarget as HTMLElement);
- };
+ e.preventDefault()
+ startDragging(optionValue, touch.clientX, touch.clientY, e.currentTarget as HTMLElement)
+ }
// 移除填充
const handleRemoveFill = (blankId: string) => {
- if (disabled) return;
- const updatedValue = currentValue.filter(
- (result) => result.blankId !== blankId
- );
+ if (disabled) return
+ const updatedValue = currentValue.filter((result) => result.blankId !== blankId)
if (!isControlled) {
- setInternalValue(updatedValue);
+ setInternalValue(updatedValue)
}
- onChange?.(updatedValue);
- };
+ onChange?.(updatedValue)
+ }
// 处理提交
const handleSubmit = () => {
- if (disabled) return;
+ if (disabled) return
// 检查必填项
- const requiredBlanks = normalizedBlanks.filter((blank) => blank.required);
- const filledBlankIds = currentValue.map((result) => result.blankId);
- const allRequiredFilled = requiredBlanks.every((blank) =>
- filledBlankIds.includes(blank.id)
- );
+ const requiredBlanks = normalizedBlanks.filter((blank) => blank.required)
+ const filledBlankIds = currentValue.map((result) => result.blankId)
+ const allRequiredFilled = requiredBlanks.every((blank) => filledBlankIds.includes(blank.id))
if (!allRequiredFilled) {
- return;
+ return
}
- onSubmit?.(currentValue);
- };
+ onSubmit?.(currentValue)
+ }
// 获取空白区域的填充值
const getBlankFill = (blankId: string): string | null => {
- const result = currentValue.find((result) => result.blankId === blankId);
- return result ? result.optionValue : null;
- };
+ const result = currentValue.find((result) => result.blankId === blankId)
+ return result ? result.optionValue : null
+ }
// 默认渲染选项
const defaultRenderOption = (option: DragFillOption, isUsed: boolean) => {
- const isDragging = draggingOption === option.value;
+ const isDragging = draggingOption === option.value
return (
- );
- };
+ )
+ }
// 默认渲染空白区域
- const defaultRenderBlank = (
- blank: DragFillBlank,
- filledValue: string | null
- ) => {
- const isHovered = hoveredBlank === blank.id;
- const option = filledValue
- ? normalizedOptions.find((opt) => opt.value === filledValue)
- : null;
+ const defaultRenderBlank = (blank: DragFillBlank, filledValue: string | null) => {
+ const isHovered = hoveredBlank === blank.id
+ const option = filledValue ? normalizedOptions.find((opt) => opt.value === filledValue) : null
return (
{filledValue ? (
-
)}
)}
onSubmit={(results) => {
- console.log("填充结果:", results);
+ console.log('填充结果:', results)
}}
/>
- );
+ )
},
-};
-
+}
diff --git a/src/components/quiz/drag-fill/drag-fill.tsx b/src/components/quiz/drag-fill/drag-fill.tsx
index dc7ad03..a8f2143 100644
--- a/src/components/quiz/drag-fill/drag-fill.tsx
+++ b/src/components/quiz/drag-fill/drag-fill.tsx
@@ -1,12 +1,12 @@
-import { useState, useRef, useEffect, useCallback, forwardRef } from "react";
-import { createPortal } from "react-dom";
-import { cn } from "@/lib/utils";
+import { useState, useRef, useEffect, useCallback, forwardRef } from 'react'
+import { createPortal } from 'react-dom'
+import { cn } from '@/lib/utils'
import type {
DragFillProps,
DragFillOption,
DragFillBlank,
DragFillResult,
-} from "./drag-fill.types";
+} from './drag-fill.types'
/**
* DragFill - 拖拽填空组件（使用鼠标事件实现）
@@ -33,12 +33,12 @@ const DragFill = forwardRef
- ✓ {filledValue}
-
+ ✓ {filledValue}
) : (
⬇️
- {blank.label || "拖拽到这里"}
+ {blank.label || '拖拽到这里'}
handleMouseDown(e, option.value)}
onTouchStart={(e) => handleTouchStart(e, option.value)}
className={cn(
- "px-6 py-4 border-2 rounded-lg transition-all select-none",
+ 'px-6 py-4 border-2 rounded-lg transition-all select-none',
!disabled &&
!option.disabled &&
!isUsed &&
- "cursor-move hover:border-orange-400 hover:bg-orange-50",
+ 'cursor-move hover:border-orange-400 hover:bg-orange-50',
isDragging
- ? "opacity-50 border-orange-500 bg-orange-100"
- : "border-gray-300 bg-white text-gray-700",
- (disabled || option.disabled || isUsed) &&
- "opacity-50 cursor-not-allowed",
+ ? 'opacity-50 border-orange-500 bg-orange-100'
+ : 'border-gray-300 bg-white text-gray-700',
+ (disabled || option.disabled || isUsed) && 'opacity-50 cursor-not-allowed',
optionClassName
)}
>
@@ -370,57 +340,45 @@ const DragFill = forwardRef(
)}
{
if (el) {
- blankRefsMap.current.set(blank.id, el);
+ blankRefsMap.current.set(blank.id, el)
} else {
- blankRefsMap.current.delete(blank.id);
+ blankRefsMap.current.delete(blank.id)
}
}}
className={cn(
- "min-h-[80px] px-6 py-4 border-2 border-dashed rounded-lg transition-all",
- "flex items-center justify-between",
+ 'min-h-[80px] px-6 py-4 border-2 border-dashed rounded-lg transition-all',
+ 'flex items-center justify-between',
isHovered && draggingOption
- ? "border-orange-500 bg-orange-50"
+ ? 'border-orange-500 bg-orange-50'
: filledValue
- ? "border-green-500 bg-green-50"
- : "border-gray-300 bg-gray-50",
- blank.required && !filledValue && "border-red-300",
+ ? 'border-green-500 bg-green-50'
+ : 'border-gray-300 bg-gray-50',
+ blank.required && !filledValue && 'border-red-300',
blankClassName
)}
>
{filledValue ? (
<>
-
- {option?.label || filledValue}
-
+ {option?.label || filledValue}
{!disabled && (
- );
- };
+ )
+ }
return (
<>
{/* 选项区域 */}
= {
- title: "Components/Quiz/MultipleChoice",
+ title: 'Components/Quiz/MultipleChoice',
component: MultipleChoice,
- tags: ["autodocs"],
+ tags: ['autodocs'],
argTypes: {
options: {
- control: { type: "object" },
- description: "选项列表，可以是字符串数组或选项对象数组",
+ control: { type: 'object' },
+ description: '选项列表，可以是字符串数组或选项对象数组',
},
value: {
- control: { type: "object" },
- description: "当前选中的值数组（受控模式）",
+ control: { type: 'object' },
+ description: '当前选中的值数组（受控模式）',
},
defaultValue: {
- control: { type: "object" },
- description: "默认选中的值数组",
+ control: { type: 'object' },
+ description: '默认选中的值数组',
},
disabled: {
- control: { type: "boolean" },
- description: "是否禁用整个组件",
+ control: { type: 'boolean' },
+ description: '是否禁用整个组件',
},
minSelections: {
- control: { type: "number" },
- description: "最小选择数量",
+ control: { type: 'number' },
+ description: '最小选择数量',
},
maxSelections: {
- control: { type: "number" },
- description: "最大选择数量",
+ control: { type: 'number' },
+ description: '最大选择数量',
},
showSubmitButton: {
- control: { type: "boolean" },
- description: "是否显示提交按钮",
+ control: { type: 'boolean' },
+ description: '是否显示提交按钮',
},
submitText: {
- control: { type: "text" },
- description: "提交按钮文本",
+ control: { type: 'text' },
+ description: '提交按钮文本',
},
},
-};
+}
-export default meta;
-type Story = StoryObj;
+export default meta
+type Story = StoryObj
// 基础示例
export const Default: Story = {
args: {
- options: ["选项A", "选项B", "选项C", "选项D", "选项E"],
+ options: ['选项A', '选项B', '选项C', '选项D', '选项E'],
onSubmit: (values) => {
- console.log("选中的值:", values);
+ console.log('选中的值:', values)
},
},
-};
+}
// 使用选项对象
export const WithOptionObjects: Story = {
args: {
options: [
- { value: "opt1", label: "选项一" },
- { value: "opt2", label: "选项二" },
- { value: "opt3", label: "选项三（禁用）", disabled: true },
- { value: "opt4", label: "选项四" },
- { value: "opt5", label: "选项五" },
+ { value: 'opt1', label: '选项一' },
+ { value: 'opt2', label: '选项二' },
+ { value: 'opt3', label: '选项三（禁用）', disabled: true },
+ { value: 'opt4', label: '选项四' },
+ { value: 'opt5', label: '选项五' },
],
onSubmit: (values) => {
- console.log("选中的值:", values);
+ console.log('选中的值:', values)
},
},
-};
+}
// 受控模式
export const Controlled: Story = {
render: () => {
- const [values, setValues] = useState([]);
+ const [values, setValues] = useState([])
return (
{
- alert(`提交的值: ${vals.join(", ")}`);
+ alert(`提交的值: ${vals.join(', ')}`)
}}
/>
- );
+ )
},
-};
+}
// 限制最大选择数量
export const WithMaxSelections: Story = {
args: {
- options: ["选项A", "选项B", "选项C", "选项D", "选项E"],
+ options: ['选项A', '选项B', '选项C', '选项D', '选项E'],
maxSelections: 2,
onSubmit: (values) => {
- console.log("选中的值:", values);
+ console.log('选中的值:', values)
},
},
-};
+}
// 限制最小和最大选择数量
export const WithMinMaxSelections: Story = {
args: {
- options: ["选项A", "选项B", "选项C", "选项D", "选项E"],
+ options: ['选项A', '选项B', '选项C', '选项D', '选项E'],
minSelections: 2,
maxSelections: 4,
onSubmit: (values) => {
- console.log("选中的值:", values);
+ console.log('选中的值:', values)
},
},
-};
+}
// 禁用状态
export const Disabled: Story = {
args: {
- options: ["选项A", "选项B", "选项C"],
+ options: ['选项A', '选项B', '选项C'],
disabled: true,
- defaultValue: ["选项A"],
+ defaultValue: ['选项A'],
},
-};
+}
// 不显示提交按钮
export const WithoutSubmitButton: Story = {
args: {
- options: ["选项A", "选项B", "选项C"],
+ options: ['选项A', '选项B', '选项C'],
showSubmitButton: false,
onChange: (values) => {
- console.log("值变化:", values);
+ console.log('值变化:', values)
},
},
-};
+}
// 自定义样式
export const CustomStyled: Story = {
args: {
- options: ["选项A", "选项B", "选项C", "选项D"],
- className: "max-w-md mx-auto p-6 bg-gray-50 rounded-xl",
- optionClassName: "text-lg font-semibold",
- submitText: "确认答案",
+ options: ['选项A', '选项B', '选项C', '选项D'],
+ className: 'max-w-md mx-auto p-6 bg-gray-50 rounded-xl',
+ optionClassName: 'text-lg font-semibold',
+ submitText: '确认答案',
maxSelections: 3,
onSubmit: (values) => {
- console.log("选中的值:", values);
+ console.log('选中的值:', values)
},
},
-};
+}
// 自定义渲染选项
export const CustomRender: Story = {
render: () => {
return (
(
)}
onSubmit={(values) => {
- console.log("选中的值:", values);
+ console.log('选中的值:', values)
}}
/>
- );
+ )
},
-};
-
+}
diff --git a/src/components/quiz/multiple-choice/multiple-choice.tsx b/src/components/quiz/multiple-choice/multiple-choice.tsx
index 8c70b94..34ff973 100644
--- a/src/components/quiz/multiple-choice/multiple-choice.tsx
+++ b/src/components/quiz/multiple-choice/multiple-choice.tsx
@@ -1,9 +1,6 @@
-import { useState, useEffect, forwardRef } from "react";
-import { cn } from "@/lib/utils";
-import type {
- MultipleChoiceProps,
- MultipleChoiceOption,
-} from "./multiple-choice.types";
+import { useState, useEffect, forwardRef } from 'react'
+import { cn } from '@/lib/utils'
+import type { MultipleChoiceProps, MultipleChoiceOption } from './multiple-choice.types'
/**
* MultipleChoice - 多选组件
@@ -32,7 +29,7 @@ const MultipleChoice = forwardRef(
maxSelections,
className,
optionClassName,
- submitText = "提交",
+ submitText = '提交',
showSubmitButton = true,
renderOption,
},
@@ -40,96 +37,79 @@ const MultipleChoice = forwardRef(
) => {
// 标准化选项数据
const normalizedOptions: MultipleChoiceOption[] = options.map((option) => {
- if (typeof option === "string") {
- return { value: option, label: option };
+ if (typeof option === 'string') {
+ return { value: option, label: option }
}
- return option;
- });
+ return option
+ })
// 受控/非受控模式
- const isControlled = controlledValue !== undefined;
- const [internalValue, setInternalValue] = useState(
- defaultValue || []
- );
- const currentValue = isControlled ? controlledValue : internalValue;
+ const isControlled = controlledValue !== undefined
+ const [internalValue, setInternalValue] = useState(defaultValue || [])
+ const currentValue = isControlled ? controlledValue : internalValue
// 处理选项点击
const handleOptionClick = (optionValue: string) => {
- if (disabled) return;
- const option = normalizedOptions.find((opt) => opt.value === optionValue);
- if (option?.disabled) return;
+ if (disabled) return
+ const option = normalizedOptions.find((opt) => opt.value === optionValue)
+ if (option?.disabled) return
- const isSelected = currentValue.includes(optionValue);
- let newValue: string[];
+ const isSelected = currentValue.includes(optionValue)
+ let newValue: string[]
if (isSelected) {
// 取消选择
- newValue = currentValue.filter((v) => v !== optionValue);
+ newValue = currentValue.filter((v) => v !== optionValue)
// 检查最小选择数量限制
- if (
- minSelections !== undefined &&
- newValue.length < minSelections
- ) {
- return;
+ if (minSelections !== undefined && newValue.length < minSelections) {
+ return
}
} else {
// 选择
// 检查最大选择数量限制
- if (
- maxSelections !== undefined &&
- currentValue.length >= maxSelections
- ) {
- return;
+ if (maxSelections !== undefined && currentValue.length >= maxSelections) {
+ return
}
- newValue = [...currentValue, optionValue];
+ newValue = [...currentValue, optionValue]
}
if (!isControlled) {
- setInternalValue(newValue);
+ setInternalValue(newValue)
}
- onChange?.(newValue);
- };
+ onChange?.(newValue)
+ }
// 处理提交
const handleSubmit = () => {
- if (disabled) return;
+ if (disabled) return
// 检查最小选择数量
- if (
- minSelections !== undefined &&
- currentValue.length < minSelections
- ) {
- return;
+ if (minSelections !== undefined && currentValue.length < minSelections) {
+ return
}
- onSubmit?.(currentValue);
- };
+ onSubmit?.(currentValue)
+ }
// 检查是否可以提交
const canSubmit =
currentValue.length > 0 &&
- (minSelections === undefined ||
- currentValue.length >= minSelections);
+ (minSelections === undefined || currentValue.length >= minSelections)
// 默认渲染选项
- const defaultRenderOption = (
- option: MultipleChoiceOption,
- isSelected: boolean
- ) => {
+ const defaultRenderOption = (option: MultipleChoiceOption, isSelected: boolean) => {
const isDisabled =
disabled ||
option.disabled ||
- (!isSelected &&
- maxSelections !== undefined &&
- currentValue.length >= maxSelections);
+ (!isSelected && maxSelections !== undefined && currentValue.length >= maxSelections)
return (
- {!hideLabels && (
-
{/* 空白区域 */}
- 选项
- )} + {!hideLabels &&选项
} 2
- ? "grid-cols-2"
- : !optionClassName && "grid-cols-1"
+ ? 'grid-cols-2'
+ : !optionClassName && 'grid-cols-1'
)
)}
>
{normalizedOptions.map((option) => {
- const isUsed = isOptionUsed(option.value);
- const isDragging = draggingOption === option.value;
+ const isUsed = isOptionUsed(option.value)
+ const isDragging = draggingOption === option.value
return (
{
// 只有在没有自定义渲染或者不是已使用的情况下才处理拖拽
if (!disabled && !option.disabled && !isUsed) {
- handleMouseDown(e, option.value);
+ handleMouseDown(e, option.value)
}
}}
onTouchStart={(e) => {
if (!disabled && !option.disabled && !isUsed) {
- handleTouchStart(e, option.value);
+ handleTouchStart(e, option.value)
}
}}
className={cn(
- renderOption && "select-none",
- !optionClassName && renderOption && "flex-1",
- isDragging && "opacity-50"
+ renderOption && 'select-none',
+ !optionClassName && renderOption && 'flex-1',
+ isDragging && 'opacity-50'
)}
>
{renderOption
? renderOption(option, isUsed)
: defaultRenderOption(option, isUsed)}
- );
+ )
})}
- {!hideLabels && (
- (
onClick={handleSubmit}
disabled={disabled}
className={cn(
- "px-6 py-3 rounded-lg font-medium transition-colors",
- "bg-orange-500 text-white hover:bg-orange-600",
- "disabled:opacity-50 disabled:cursor-not-allowed",
- "focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
+ 'px-6 py-3 rounded-lg font-medium transition-colors',
+ 'bg-orange-500 text-white hover:bg-orange-600',
+ 'disabled:opacity-50 disabled:cursor-not-allowed',
+ 'focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2'
)}
>
{submitText}
@@ -574,31 +519,29 @@ const DragFill = forwardRef(
style={{
left: dragPosition.x,
top: dragPosition.y,
- transform: "translate(-50%, -50%)",
+ transform: 'translate(-50%, -50%)',
}}
>
{(() => {
- const option = normalizedOptions.find(
- (opt) => opt.value === draggingOption
- );
- if (!option) return null;
+ const option = normalizedOptions.find((opt) => opt.value === draggingOption)
+ if (!option) return null
if (renderDragging) {
- return renderDragging(option);
+ return renderDragging(option)
}
return (
{option.label}
- );
+ )
})()}
,
document.body
)}
- );
+ )
}
-);
+)
-DragFill.displayName = "DragFill";
+DragFill.displayName = 'DragFill'
-export default DragFill;
+export default DragFill
diff --git a/src/components/quiz/drag-fill/drag-fill.types.ts b/src/components/quiz/drag-fill/drag-fill.types.ts
index 5506dcc..971a100 100644
--- a/src/components/quiz/drag-fill/drag-fill.types.ts
+++ b/src/components/quiz/drag-fill/drag-fill.types.ts
@@ -1,73 +1,69 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react'
/** 选项数据 */
export interface DragFillOption {
/** 选项值 */
- value: string;
+ value: string
/** 选项显示文本 */
- label: string;
+ label: string
/** 是否禁用 */
- disabled?: boolean;
+ disabled?: boolean
}
/** 空白区域数据 */
export interface DragFillBlank {
/** 空白区域ID */
- id: string;
+ id: string
/** 空白区域显示文本/提示 */
- label?: string;
+ label?: string
/** 是否必填 */
- required?: boolean;
+ required?: boolean
}
/** 填充结果 */
export interface DragFillResult {
/** 空白区域ID */
- blankId: string;
+ blankId: string
/** 填充的选项值 */
- optionValue: string;
+ optionValue: string
}
/** 拖拽填空组件配置项 */
export interface DragFillProps {
/** 可拖拽的选项列表 */
- options: DragFillOption[] | string[];
+ options: DragFillOption[] | string[]
/** 空白区域列表 */
- blanks: DragFillBlank[] | string[];
+ blanks: DragFillBlank[] | string[]
/** 当前填充结果（受控模式） */
- value?: DragFillResult[];
+ value?: DragFillResult[]
/** 默认填充结果 */
- defaultValue?: DragFillResult[];
+ defaultValue?: DragFillResult[]
/** 填充结果变化时的回调 */
- onChange?: (results: DragFillResult[]) => void;
+ onChange?: (results: DragFillResult[]) => void
/** 提交时的回调 */
- onSubmit?: (results: DragFillResult[]) => void;
+ onSubmit?: (results: DragFillResult[]) => void
/** 是否禁用整个组件 */
- disabled?: boolean;
+ disabled?: boolean
/** 是否允许重复选择同一选项 */
- allowDuplicate?: boolean;
+ allowDuplicate?: boolean
/** 布局方向：vertical（上下）、horizontal（左右）或 horizontal-options（选项水平排列） */
- layout?: "vertical" | "horizontal" | "horizontal-options";
+ layout?: 'vertical' | 'horizontal' | 'horizontal-options'
/** 是否隐藏"选项"和"填空"标签 */
- hideLabels?: boolean;
+ hideLabels?: boolean
/** 自定义类名 */
- className?: string;
+ className?: string
/** 选项容器的自定义类名 */
- optionClassName?: string;
+ optionClassName?: string
/** 空白区域容器的自定义类名 */
- blankClassName?: string;
+ blankClassName?: string
/** 提交按钮文本 */
- submitText?: string;
+ submitText?: string
/** 是否显示提交按钮 */
- showSubmitButton?: boolean;
+ showSubmitButton?: boolean
/** 自定义渲染选项 */
- renderOption?: (option: DragFillOption, isUsed: boolean) => ReactNode;
+ renderOption?: (option: DragFillOption, isUsed: boolean) => ReactNode
/** 自定义渲染空白区域 */
- renderBlank?: (
- blank: DragFillBlank,
- filledValue: string | null,
- isHovered: boolean
- ) => ReactNode;
+ renderBlank?: (blank: DragFillBlank, filledValue: string | null, isHovered: boolean) => ReactNode
/** 自定义渲染拖拽中的元素 */
- renderDragging?: (option: DragFillOption) => ReactNode;
+ renderDragging?: (option: DragFillOption) => ReactNode
}
diff --git a/src/components/quiz/drag-fill/index.ts b/src/components/quiz/drag-fill/index.ts
index a0c5052..20bcef9 100644
--- a/src/components/quiz/drag-fill/index.ts
+++ b/src/components/quiz/drag-fill/index.ts
@@ -1,9 +1,8 @@
-export { default } from "./drag-fill";
-export { default as DragFill } from "./drag-fill";
+export { default } from './drag-fill'
+export { default as DragFill } from './drag-fill'
export type {
DragFillProps,
DragFillOption,
DragFillBlank,
DragFillResult,
-} from "./drag-fill.types";
-
+} from './drag-fill.types'
diff --git a/src/components/quiz/index.ts b/src/components/quiz/index.ts
index 2cbf525..a062d7b 100644
--- a/src/components/quiz/index.ts
+++ b/src/components/quiz/index.ts
@@ -1,23 +1,11 @@
// Single Choice component
-export { SingleChoice, default as SingleChoiceDefault } from "./single-choice";
-export type {
- SingleChoiceProps,
- SingleChoiceOption,
-} from "./single-choice";
+export { SingleChoice, default as SingleChoiceDefault } from './single-choice'
+export type { SingleChoiceProps, SingleChoiceOption } from './single-choice'
// Multiple Choice component
-export { MultipleChoice } from "./multiple-choice";
-export type {
- MultipleChoiceProps,
- MultipleChoiceOption,
-} from "./multiple-choice";
+export { MultipleChoice } from './multiple-choice'
+export type { MultipleChoiceProps, MultipleChoiceOption } from './multiple-choice'
// Drag Fill component
-export { DragFill } from "./drag-fill";
-export type {
- DragFillProps,
- DragFillOption,
- DragFillBlank,
- DragFillResult,
-} from "./drag-fill";
-
+export { DragFill } from './drag-fill'
+export type { DragFillProps, DragFillOption, DragFillBlank, DragFillResult } from './drag-fill'
diff --git a/src/components/quiz/multiple-choice/index.ts b/src/components/quiz/multiple-choice/index.ts
index 02831e7..329d827 100644
--- a/src/components/quiz/multiple-choice/index.ts
+++ b/src/components/quiz/multiple-choice/index.ts
@@ -1,7 +1,3 @@
-export { default } from "./multiple-choice";
-export { default as MultipleChoice } from "./multiple-choice";
-export type {
- MultipleChoiceProps,
- MultipleChoiceOption,
-} from "./multiple-choice.types";
-
+export { default } from './multiple-choice'
+export { default as MultipleChoice } from './multiple-choice'
+export type { MultipleChoiceProps, MultipleChoiceOption } from './multiple-choice.types'
diff --git a/src/components/quiz/multiple-choice/multiple-choice.stories.tsx b/src/components/quiz/multiple-choice/multiple-choice.stories.tsx
index 9a7eac6..9b8569f 100644
--- a/src/components/quiz/multiple-choice/multiple-choice.stories.tsx
+++ b/src/components/quiz/multiple-choice/multiple-choice.stories.tsx
@@ -1,193 +1,188 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import MultipleChoice from "./multiple-choice";
-import type { MultipleChoiceProps } from "./multiple-choice.types";
-import { cn } from "@/lib/utils";
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import MultipleChoice from './multiple-choice'
+import type { MultipleChoiceProps } from './multiple-choice.types'
+import { cn } from '@/lib/utils'
const meta: Meta填空
- )} +
+ {!hideLabels &&
@@ -554,10 +499,10 @@ const DragFill = forwardRef填空
}
{normalizedBlanks.map((blank) => {
- const filledValue = getBlankFill(blank.id);
- const isHovered = hoveredBlank === blank.id && !!draggingOption;
+ const filledValue = getBlankFill(blank.id)
+ const isHovered = hoveredBlank === blank.id && !!draggingOption
return (
(
if (el) {
// 如果使用自定义渲染，需要找到实际的空白区域元素
// 默认使用第一个子元素
- const targetEl = renderBlank
- ? (el.firstElementChild as HTMLElement)
- : el;
+ const targetEl = renderBlank ? (el.firstElementChild as HTMLElement) : el
if (targetEl) {
- blankRefsMap.current.set(blank.id, targetEl);
+ blankRefsMap.current.set(blank.id, targetEl)
}
} else {
- blankRefsMap.current.delete(blank.id);
+ blankRefsMap.current.delete(blank.id)
}
}}
>
@@ -543,7 +488,7 @@ const DragFill = forwardRef(
? renderBlank(blank, filledValue, isHovered)
: defaultRenderBlank(blank, filledValue)}
- );
+ )
})}
- 当前选中: {values.length > 0 ? values.join(", ") : "未选择"}
+ 当前选中: {values.length > 0 ? values.join(', ') : '未选择'}
- {isSelected && "✓"}
+ {isSelected && '✓'}
{option.label}
handleOptionClick(option.value)}
@@ -137,10 +117,8 @@ const MultipleChoice = forwardRef(
- );
- };
+ )
+ }
return (
- = {
- title: "Components/Quiz/SingleChoice",
+ title: 'Components/Quiz/SingleChoice',
component: SingleChoice,
- tags: ["autodocs"],
+ tags: ['autodocs'],
argTypes: {
options: {
- control: { type: "object" },
- description: "选项列表，可以是字符串数组或选项对象数组",
+ control: { type: 'object' },
+ description: '选项列表，可以是字符串数组或选项对象数组',
},
value: {
- control: { type: "text" },
- description: "当前选中的值（受控模式）",
+ control: { type: 'text' },
+ description: '当前选中的值（受控模式）',
},
defaultValue: {
- control: { type: "text" },
- description: "默认选中的值",
+ control: { type: 'text' },
+ description: '默认选中的值',
},
disabled: {
- control: { type: "boolean" },
- description: "是否禁用整个组件",
+ control: { type: 'boolean' },
+ description: '是否禁用整个组件',
},
showSubmitButton: {
- control: { type: "boolean" },
- description: "是否显示提交按钮",
+ control: { type: 'boolean' },
+ description: '是否显示提交按钮',
},
submitText: {
- control: { type: "text" },
- description: "提交按钮文本",
+ control: { type: 'text' },
+ description: '提交按钮文本',
},
},
-};
+}
-export default meta;
-type Story = StoryObj;
+export default meta
+type Story = StoryObj
// 基础示例
export const Default: Story = {
args: {
- options: ["选项A", "选项B", "选项C", "选项D"],
+ options: ['选项A', '选项B', '选项C', '选项D'],
onSubmit: (value) => {
- console.log("选中的值:", value);
+ console.log('选中的值:', value)
},
},
-};
+}
// 使用选项对象
export const WithOptionObjects: Story = {
args: {
options: [
- { value: "opt1", label: "选项一" },
- { value: "opt2", label: "选项二" },
- { value: "opt3", label: "选项三（禁用）", disabled: true },
- { value: "opt4", label: "选项四" },
+ { value: 'opt1', label: '选项一' },
+ { value: 'opt2', label: '选项二' },
+ { value: 'opt3', label: '选项三（禁用）', disabled: true },
+ { value: 'opt4', label: '选项四' },
],
onSubmit: (value) => {
- console.log("选中的值:", value);
+ console.log('选中的值:', value)
},
},
-};
+}
// 受控模式
export const Controlled: Story = {
render: () => {
- const [value, setValue] = useState("");
+ const [value, setValue] = useState('')
return (
{
- alert(`提交的值: ${val}`);
+ alert(`提交的值: ${val}`)
}}
/>
-
- );
+ )
},
-};
+}
// 禁用状态
export const Disabled: Story = {
args: {
- options: ["选项A", "选项B", "选项C"],
+ options: ['选项A', '选项B', '选项C'],
disabled: true,
- defaultValue: "选项A",
+ defaultValue: '选项A',
},
-};
+}
// 不显示提交按钮
export const WithoutSubmitButton: Story = {
args: {
- options: ["选项A", "选项B", "选项C"],
+ options: ['选项A', '选项B', '选项C'],
showSubmitButton: false,
onChange: (value) => {
- console.log("值变化:", value);
+ console.log('值变化:', value)
},
},
-};
+}
// 自定义样式
export const CustomStyled: Story = {
args: {
- options: ["选项A", "选项B", "选项C"],
- className: "max-w-md mx-auto p-6 bg-gray-50 rounded-xl",
- optionClassName: "text-lg font-semibold",
- submitText: "确认答案",
+ options: ['选项A', '选项B', '选项C'],
+ className: 'max-w-md mx-auto p-6 bg-gray-50 rounded-xl',
+ optionClassName: 'text-lg font-semibold',
+ submitText: '确认答案',
onSubmit: (value) => {
- console.log("选中的值:", value);
+ console.log('选中的值:', value)
},
},
-};
+}
// 自定义渲染选项
export const CustomRender: Story = {
render: () => {
return (
(
)}
onSubmit={(value) => {
- console.log("选中的值:", value);
+ console.log('选中的值:', value)
}}
/>
- );
+ )
},
-};
-
+}
diff --git a/src/components/quiz/single-choice/single-choice.tsx b/src/components/quiz/single-choice/single-choice.tsx
index 0be4ef4..c951ee4 100644
--- a/src/components/quiz/single-choice/single-choice.tsx
+++ b/src/components/quiz/single-choice/single-choice.tsx
@@ -1,9 +1,6 @@
-import { useState, forwardRef } from "react";
-import { cn } from "@/lib/utils";
-import type {
- SingleChoiceProps,
- SingleChoiceOption,
-} from "./single-choice.types";
+import { useState, forwardRef } from 'react'
+import { cn } from '@/lib/utils'
+import type { SingleChoiceProps, SingleChoiceOption } from './single-choice.types'
/**
* SingleChoice - 单选组件
@@ -29,7 +26,7 @@ const SingleChoice = forwardRef(
disabled = false,
className,
optionClassName,
- submitText: _submitText = "提交", // 保留入参但不使用
+ submitText: _submitText = '提交', // 保留入参但不使用
showSubmitButton: _showSubmitButton = false, // 保留入参但不使用
renderOption,
},
@@ -37,80 +34,73 @@ const SingleChoice = forwardRef(
) => {
// 标准化选项数据
const normalizedOptions: SingleChoiceOption[] = options.map((option) => {
- if (typeof option === "string") {
- return { value: option, label: option };
+ if (typeof option === 'string') {
+ return { value: option, label: option }
}
- return option;
- });
+ return option
+ })
// 受控/非受控模式
- const isControlled = controlledValue !== undefined;
- const [internalValue, setInternalValue] = useState(
- defaultValue || ""
- );
- const currentValue = isControlled ? controlledValue : internalValue;
+ const isControlled = controlledValue !== undefined
+ const [internalValue, setInternalValue] = useState(defaultValue || '')
+ const currentValue = isControlled ? controlledValue : internalValue
// 处理选项点击
const handleOptionClick = (optionValue: string) => {
- if (disabled) return;
- if (
- normalizedOptions.find((opt) => opt.value === optionValue)?.disabled
- ) {
- return;
+ if (disabled) return
+ if (normalizedOptions.find((opt) => opt.value === optionValue)?.disabled) {
+ return
}
if (!isControlled) {
- setInternalValue(optionValue);
+ setInternalValue(optionValue)
}
- onChange?.(optionValue);
+ onChange?.(optionValue)
// 单选题：点击即触发提交回调
- onSubmit?.(optionValue);
- };
+ onSubmit?.(optionValue)
+ }
// 默认渲染选项
- const defaultRenderOption = (
- option: SingleChoiceOption,
- isSelected: boolean
- ) => {
+ const defaultRenderOption = (option: SingleChoiceOption, isSelected: boolean) => {
return (
{isSelected && (
@@ -162,21 +140,21 @@ const MultipleChoice = forwardRef(
{option.label}
+
(
{minSelections !== undefined && (
)}
- );
+ )
}
-);
+)
-MultipleChoice.displayName = "MultipleChoice";
-
-export default MultipleChoice;
+MultipleChoice.displayName = 'MultipleChoice'
+export default MultipleChoice
diff --git a/src/components/quiz/multiple-choice/multiple-choice.types.ts b/src/components/quiz/multiple-choice/multiple-choice.types.ts
index 570d351..a4e5ad6 100644
--- a/src/components/quiz/multiple-choice/multiple-choice.types.ts
+++ b/src/components/quiz/multiple-choice/multiple-choice.types.ts
@@ -1,45 +1,41 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react'
/** 选项数据 */
export interface MultipleChoiceOption {
/** 选项值 */
- value: string;
+ value: string
/** 选项显示文本 */
- label: string;
+ label: string
/** 是否禁用 */
- disabled?: boolean;
+ disabled?: boolean
}
/** 多选组件配置项 */
export interface MultipleChoiceProps {
/** 选项列表 */
- options: MultipleChoiceOption[] | string[];
+ options: MultipleChoiceOption[] | string[]
/** 当前选中的值数组（受控模式） */
- value?: string[];
+ value?: string[]
/** 默认选中的值数组 */
- defaultValue?: string[];
+ defaultValue?: string[]
/** 选中值变化时的回调 */
- onChange?: (values: string[]) => void;
+ onChange?: (values: string[]) => void
/** 提交时的回调 */
- onSubmit?: (values: string[]) => void;
+ onSubmit?: (values: string[]) => void
/** 是否禁用整个组件 */
- disabled?: boolean;
+ disabled?: boolean
/** 最小选择数量 */
- minSelections?: number;
+ minSelections?: number
/** 最大选择数量 */
- maxSelections?: number;
+ maxSelections?: number
/** 自定义类名 */
- className?: string;
+ className?: string
/** 选项容器的自定义类名 */
- optionClassName?: string;
+ optionClassName?: string
/** 提交按钮文本 */
- submitText?: string;
+ submitText?: string
/** 是否显示提交按钮 */
- showSubmitButton?: boolean;
+ showSubmitButton?: boolean
/** 自定义渲染选项 */
- renderOption?: (
- option: MultipleChoiceOption,
- isSelected: boolean
- ) => ReactNode;
+ renderOption?: (option: MultipleChoiceOption, isSelected: boolean) => ReactNode
}
-
diff --git a/src/components/quiz/single-choice/index.ts b/src/components/quiz/single-choice/index.ts
index a0e4ab7..047bd9e 100644
--- a/src/components/quiz/single-choice/index.ts
+++ b/src/components/quiz/single-choice/index.ts
@@ -1,7 +1,3 @@
-export { default } from "./single-choice";
-export { default as SingleChoice } from "./single-choice";
-export type {
- SingleChoiceProps,
- SingleChoiceOption,
-} from "./single-choice.types";
-
+export { default } from './single-choice'
+export { default as SingleChoice } from './single-choice'
+export type { SingleChoiceProps, SingleChoiceOption } from './single-choice.types'
diff --git a/src/components/quiz/single-choice/single-choice.stories.tsx b/src/components/quiz/single-choice/single-choice.stories.tsx
index 7846c4d..c892671 100644
--- a/src/components/quiz/single-choice/single-choice.stories.tsx
+++ b/src/components/quiz/single-choice/single-choice.stories.tsx
@@ -1,161 +1,152 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import SingleChoice from "./single-choice";
-import type { SingleChoiceProps } from "./single-choice.types";
-import { cn } from "@/lib/utils";
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import SingleChoice from './single-choice'
+import type { SingleChoiceProps } from './single-choice.types'
+import { cn } from '@/lib/utils'
const meta: Meta
{normalizedOptions.map((option) => {
- const isSelected = currentValue.includes(option.value);
+ const isSelected = currentValue.includes(option.value)
return (
@@ -185,27 +163,22 @@ const MultipleChoice = forwardRef
{renderOption
? renderOption(option, isSelected)
: defaultRenderOption(option, isSelected)}
- );
+ )
})}
至少选择 {minSelections} 项
- {maxSelections !== undefined &&
- `，最多选择 ${maxSelections} 项`}
- {maxSelections === undefined && "（无上限）"}
+ {maxSelections !== undefined && `，最多选择 ${maxSelections} 项`}
+ {maxSelections === undefined && '（无上限）'}
)}
{maxSelections !== undefined && minSelections === undefined && (
-
- 最多选择 {maxSelections} 项
-
+ 最多选择 {maxSelections} 项
)}
-
- 已选择 {currentValue.length} 项
-
+ 已选择 {currentValue.length} 项
- 当前选中: {value || "未选择"}
-
+ 当前选中: {value || '未选择'}
- {isSelected && (
-
- )}
+ {isSelected && }
{option.label}
handleOptionClick(option.value)}
>
{option.label}
- );
- };
+ )
+ }
return (
-
+
- );
+ )
}
-);
+)
-SingleChoice.displayName = "SingleChoice";
+SingleChoice.displayName = 'SingleChoice'
-export default SingleChoice;
+export default SingleChoice
diff --git a/src/components/quiz/single-choice/single-choice.types.ts b/src/components/quiz/single-choice/single-choice.types.ts
index cd1c752..021ccd0 100644
--- a/src/components/quiz/single-choice/single-choice.types.ts
+++ b/src/components/quiz/single-choice/single-choice.types.ts
@@ -1,38 +1,37 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react'
/** 选项数据 */
export interface SingleChoiceOption {
/** 选项值 */
- value: string;
+ value: string
/** 选项显示文本 */
- label: string;
+ label: string
/** 是否禁用 */
- disabled?: boolean;
+ disabled?: boolean
}
/** 单选组件配置项 */
export interface SingleChoiceProps {
/** 选项列表 */
- options: SingleChoiceOption[] | string[];
+ options: SingleChoiceOption[] | string[]
/** 当前选中的值 */
- value?: string;
+ value?: string
/** 默认选中的值 */
- defaultValue?: string;
+ defaultValue?: string
/** 选中值变化时的回调 */
- onChange?: (value: string) => void;
+ onChange?: (value: string) => void
/** 提交时的回调 */
- onSubmit?: (value: string) => void;
+ onSubmit?: (value: string) => void
/** 是否禁用整个组件 */
- disabled?: boolean;
+ disabled?: boolean
/** 自定义类名 */
- className?: string;
+ className?: string
/** 选项容器的自定义类名 */
- optionClassName?: string;
+ optionClassName?: string
/** 提交按钮文本 */
- submitText?: string;
+ submitText?: string
/** 是否显示提交按钮 */
- showSubmitButton?: boolean;
+ showSubmitButton?: boolean
/** 自定义渲染选项 */
- renderOption?: (option: SingleChoiceOption, isSelected: boolean) => ReactNode;
+ renderOption?: (option: SingleChoiceOption, isSelected: boolean) => ReactNode
}
-
diff --git a/src/components/select/index.ts b/src/components/select/index.ts
index 3cbf1fa..e0b97a7 100644
--- a/src/components/select/index.ts
+++ b/src/components/select/index.ts
@@ -1,4 +1,3 @@
-export { default } from "./select";
-export { default as Select } from "./select";
-export type { SelectProps, SelectOption } from "./select.types";
-
+export { default } from './select'
+export { default as Select } from './select'
+export type { SelectProps, SelectOption } from './select.types'
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index 243acfc..9a18aa0 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -1,7 +1,7 @@
-import { forwardRef, useState, useRef, useEffect, useCallback } from "react";
-import { createPortal } from "react-dom";
-import { cn } from "@/lib/utils";
-import type { SelectProps } from "./select.types";
+import { forwardRef, useState, useRef, useEffect, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+import { cn } from '@/lib/utils'
+import type { SelectProps } from './select.types'
/**
* Select - 下拉选择组件
@@ -26,7 +26,7 @@ const Select = forwardRef(
options,
value,
onChange,
- placeholder = "请选择",
+ placeholder = '请选择',
disabled = false,
className,
error = false,
@@ -37,129 +37,120 @@ const Select = forwardRef(
},
ref
) => {
- const [isOpen, setIsOpen] = useState(false);
- const [focusedIndex, setFocusedIndex] = useState(-1);
- const triggerRef = useRef(null);
- const dropdownRef = useRef(null);
- const measureRef = useRef(null);
+ const [isOpen, setIsOpen] = useState(false)
+ const [focusedIndex, setFocusedIndex] = useState(-1)
+ const triggerRef = useRef(null)
+ const dropdownRef = useRef(null)
+ const measureRef = useRef(null)
const [dropdownPosition, setDropdownPosition] = useState<{
- top: number;
- left: number;
- width: number;
- } | null>(null);
- const [contentWidth, setContentWidth] = useState(null);
+ top: number
+ left: number
+ width: number
+ } | null>(null)
+ const [contentWidth, setContentWidth] = useState(null)
// 获取当前选中的选项
- const selectedOption = options.find((opt) => opt.value === value);
+ const selectedOption = options.find((opt) => opt.value === value)
// 计算内容宽度（用于 fitContent）
const calculateContentWidth = useCallback(() => {
- if (!fitContent || !triggerRef.current) return;
+ if (!fitContent || !triggerRef.current) return
// 获取触发器的计算样式，用于匹配字体
- const triggerStyles = window.getComputedStyle(triggerRef.current);
+ const triggerStyles = window.getComputedStyle(triggerRef.current)
// 创建一个临时元素来测量所有选项的宽度
- const tempElement = document.createElement("span");
- tempElement.style.visibility = "hidden";
- tempElement.style.position = "absolute";
- tempElement.style.whiteSpace = "nowrap";
- tempElement.style.fontSize = triggerStyles.fontSize;
- tempElement.style.fontFamily = triggerStyles.fontFamily;
- tempElement.style.fontWeight = triggerStyles.fontWeight;
- tempElement.style.padding = "8px 12px"; // 与选项 padding 一致 (py-2 px-3)
- document.body.appendChild(tempElement);
+ const tempElement = document.createElement('span')
+ tempElement.style.visibility = 'hidden'
+ tempElement.style.position = 'absolute'
+ tempElement.style.whiteSpace = 'nowrap'
+ tempElement.style.fontSize = triggerStyles.fontSize
+ tempElement.style.fontFamily = triggerStyles.fontFamily
+ tempElement.style.fontWeight = triggerStyles.fontWeight
+ tempElement.style.padding = '8px 12px' // 与选项 padding 一致 (py-2 px-3)
+ document.body.appendChild(tempElement)
- let calculatedWidth = 0;
+ let calculatedWidth = 0
// 测量所有选项和占位符的宽度
- const textsToMeasure = [placeholder, ...options.map((opt) => opt.label)];
+ const textsToMeasure = [placeholder, ...options.map((opt) => opt.label)]
textsToMeasure.forEach((text) => {
- tempElement.textContent = text;
- const width = tempElement.offsetWidth;
+ tempElement.textContent = text
+ const width = tempElement.offsetWidth
if (width > calculatedWidth) {
- calculatedWidth = width;
+ calculatedWidth = width
}
- });
+ })
- document.body.removeChild(tempElement);
+ document.body.removeChild(tempElement)
// 应用最小和最大宽度限制
if (minWidth !== undefined && calculatedWidth < minWidth) {
- calculatedWidth = minWidth;
+ calculatedWidth = minWidth
}
if (maxWidth !== undefined && calculatedWidth > maxWidth) {
- calculatedWidth = maxWidth;
+ calculatedWidth = maxWidth
}
- setContentWidth(calculatedWidth);
- }, [fitContent, options, placeholder, minWidth, maxWidth]);
+ setContentWidth(calculatedWidth)
+ }, [fitContent, options, placeholder, minWidth, maxWidth])
// 计算下拉菜单位置
const updateDropdownPosition = useCallback(() => {
- if (!triggerRef.current) return;
+ if (!triggerRef.current) return
- const rect = triggerRef.current.getBoundingClientRect();
- let width = rect.width;
+ const rect = triggerRef.current.getBoundingClientRect()
+ let width = rect.width
// 如果启用 fitContent，使用计算出的内容宽度
if (fitContent && contentWidth !== null) {
// width = contentWidth;
- width = 0;
+ width = 0
}
setDropdownPosition({
top: rect.bottom + window.scrollY,
left: rect.left + window.scrollX,
width: width,
- });
- }, [fitContent, contentWidth]);
+ })
+ }, [fitContent, contentWidth])
// 打开下拉菜单
const handleOpen = useCallback(() => {
- if (disabled) return;
+ if (disabled) return
// 如果启用 fitContent，先计算内容宽度
if (fitContent) {
- calculateContentWidth();
+ calculateContentWidth()
}
// 使用 setTimeout 确保内容宽度计算完成后再更新位置
setTimeout(() => {
- updateDropdownPosition();
- setIsOpen(true);
- setFocusedIndex(
- value ? options.findIndex((opt) => opt.value === value) : -1
- );
- }, 0);
- }, [
- disabled,
- fitContent,
- calculateContentWidth,
- updateDropdownPosition,
- value,
- options,
- ]);
+ updateDropdownPosition()
+ setIsOpen(true)
+ setFocusedIndex(value ? options.findIndex((opt) => opt.value === value) : -1)
+ }, 0)
+ }, [disabled, fitContent, calculateContentWidth, updateDropdownPosition, value, options])
// 关闭下拉菜单
const handleClose = useCallback(() => {
- setIsOpen(false);
- setFocusedIndex(-1);
- }, []);
+ setIsOpen(false)
+ setFocusedIndex(-1)
+ }, [])
// 选择选项
const handleSelect = useCallback(
(optionValue: string) => {
if (onChange) {
- onChange(optionValue);
+ onChange(optionValue)
}
- handleClose();
+ handleClose()
},
[onChange, handleClose]
- );
+ )
// 点击外部关闭
useEffect(() => {
- if (!isOpen) return;
+ if (!isOpen) return
const handleClickOutside = (event: MouseEvent) => {
if (
@@ -168,98 +159,94 @@ const Select = forwardRef(
dropdownRef.current &&
!dropdownRef.current.contains(event.target as Node)
) {
- handleClose();
+ handleClose()
}
- };
+ }
const handleScroll = () => {
- updateDropdownPosition();
- };
+ updateDropdownPosition()
+ }
const handleResize = () => {
- updateDropdownPosition();
- };
+ updateDropdownPosition()
+ }
- document.addEventListener("mousedown", handleClickOutside);
- window.addEventListener("scroll", handleScroll, true);
- window.addEventListener("resize", handleResize);
+ document.addEventListener('mousedown', handleClickOutside)
+ window.addEventListener('scroll', handleScroll, true)
+ window.addEventListener('resize', handleResize)
return () => {
- document.removeEventListener("mousedown", handleClickOutside);
- window.removeEventListener("scroll", handleScroll, true);
- window.removeEventListener("resize", handleResize);
- };
- }, [isOpen, handleClose, updateDropdownPosition]);
+ document.removeEventListener('mousedown', handleClickOutside)
+ window.removeEventListener('scroll', handleScroll, true)
+ window.removeEventListener('resize', handleResize)
+ }
+ }, [isOpen, handleClose, updateDropdownPosition])
// 键盘导航
useEffect(() => {
- if (!isOpen) return;
+ if (!isOpen) return
const handleKeyDown = (event: KeyboardEvent) => {
const enabledIndices = options
.map((opt, idx) => (!opt.disabled ? idx : -1))
- .filter((idx) => idx !== -1);
+ .filter((idx) => idx !== -1)
switch (event.key) {
- case "ArrowDown":
- event.preventDefault();
+ case 'ArrowDown':
+ event.preventDefault()
setFocusedIndex((prev) => {
- const currentEnabledIdx = enabledIndices.indexOf(prev);
+ const currentEnabledIdx = enabledIndices.indexOf(prev)
const nextEnabledIdx =
- currentEnabledIdx < enabledIndices.length - 1
- ? currentEnabledIdx + 1
- : 0;
- return enabledIndices[nextEnabledIdx] ?? enabledIndices[0] ?? -1;
- });
- break;
- case "ArrowUp":
- event.preventDefault();
+ currentEnabledIdx < enabledIndices.length - 1 ? currentEnabledIdx + 1 : 0
+ return enabledIndices[nextEnabledIdx] ?? enabledIndices[0] ?? -1
+ })
+ break
+ case 'ArrowUp':
+ event.preventDefault()
setFocusedIndex((prev) => {
- const currentEnabledIdx = enabledIndices.indexOf(prev);
+ const currentEnabledIdx = enabledIndices.indexOf(prev)
const nextEnabledIdx =
- currentEnabledIdx > 0
- ? currentEnabledIdx - 1
- : enabledIndices.length - 1;
- return enabledIndices[nextEnabledIdx] ?? enabledIndices[0] ?? -1;
- });
- break;
- case "Enter":
- case " ":
- event.preventDefault();
+ currentEnabledIdx > 0 ? currentEnabledIdx - 1 : enabledIndices.length - 1
+ return enabledIndices[nextEnabledIdx] ?? enabledIndices[0] ?? -1
+ })
+ break
+ case 'Enter':
+ case ' ':
+ event.preventDefault()
if (focusedIndex >= 0 && focusedIndex < options.length) {
- const option = options[focusedIndex];
+ const option = options[focusedIndex]
if (option && !option.disabled) {
- handleSelect(option.value);
+ handleSelect(option.value)
}
}
- break;
- case "Escape":
- event.preventDefault();
- handleClose();
- break;
+ break
+ case 'Escape':
+ event.preventDefault()
+ handleClose()
+ break
}
- };
+ }
- document.addEventListener("keydown", handleKeyDown);
+ document.addEventListener('keydown', handleKeyDown)
return () => {
- document.removeEventListener("keydown", handleKeyDown);
- };
- }, [isOpen, focusedIndex, options, handleSelect, handleClose]);
+ document.removeEventListener('keydown', handleKeyDown)
+ }
+ }, [isOpen, focusedIndex, options, handleSelect, handleClose])
// 滚动到选中项
useEffect(() => {
if (isOpen && focusedIndex >= 0 && dropdownRef.current) {
const optionElement = dropdownRef.current.querySelector(
`[data-option-index="${focusedIndex}"]`
- );
+ )
if (optionElement) {
optionElement.scrollIntoView({
- block: "nearest",
- behavior: "smooth",
- });
+ block: 'nearest',
+ behavior: 'smooth',
+ })
}
}
- }, [isOpen, focusedIndex]);
+ }, [isOpen, focusedIndex])
return (
<>
@@ -268,9 +255,9 @@ const Select = forwardRef(
@@ -279,17 +266,17 @@ const Select = forwardRef(
{/* 触发器 */}
= ({
@@ -19,108 +19,104 @@ const Spotlight: React.FC = ({
padding = 8,
borderRadius = 16,
}) => {
- const [rects, setRects] = useState([]);
+ const [rects, setRects] = useState([])
const measure = useCallback(() => {
if (!visible || !targetSelector) {
- setRects([]);
- return;
+ setRects([])
+ return
}
- const selectors = Array.isArray(targetSelector)
- ? targetSelector
- : [targetSelector];
- const pad = Math.max(0, padding);
- const newRects: Rect[] = [];
+ const selectors = Array.isArray(targetSelector) ? targetSelector : [targetSelector]
+ const pad = Math.max(0, padding)
+ const newRects: Rect[] = []
selectors.forEach((selector) => {
- const elements = document.querySelectorAll(selector);
+ const elements = document.querySelectorAll(selector)
elements.forEach((el) => {
- const htmlEl = el as HTMLElement;
- const r = htmlEl.getBoundingClientRect();
+ const htmlEl = el as HTMLElement
+ const r = htmlEl.getBoundingClientRect()
// 使用视口坐标（fixed层），不叠加滚动偏移
newRects.push({
top: r.top - pad,
left: r.left - pad,
width: r.width + pad * 2,
height: r.height + pad * 2,
- });
- });
- });
+ })
+ })
+ })
- setRects(newRects);
- }, [visible, targetSelector, padding]);
+ setRects(newRects)
+ }, [visible, targetSelector, padding])
useEffect(() => {
// 初始测量
- requestAnimationFrame(measure);
- }, [visible, targetSelector, padding, measure]);
+ requestAnimationFrame(measure)
+ }, [visible, targetSelector, padding, measure])
useEffect(() => {
- const onResize = () => measure();
- const onScroll = () => measure();
+ const onResize = () => measure()
+ const onScroll = () => measure()
- window.addEventListener("resize", onResize);
- window.addEventListener("scroll", onScroll, {
+ window.addEventListener('resize', onResize)
+ window.addEventListener('scroll', onScroll, {
passive: true,
- } as AddEventListenerOptions);
+ } as AddEventListenerOptions)
// 使用 ResizeObserver 监听目标元素尺寸变化
const resizeObserver = new ResizeObserver(() => {
- measure();
- });
+ measure()
+ })
// 观察所有目标元素
if (visible && targetSelector) {
- const selectors = Array.isArray(targetSelector)
- ? targetSelector
- : [targetSelector];
+ const selectors = Array.isArray(targetSelector) ? targetSelector : [targetSelector]
selectors.forEach((selector) => {
- const elements = document.querySelectorAll(selector);
+ const elements = document.querySelectorAll(selector)
elements.forEach((el) => {
- resizeObserver.observe(el);
- });
- });
+ resizeObserver.observe(el)
+ })
+ })
}
// 初始测量（延迟一帧确保 DOM 已渲染）
- requestAnimationFrame(measure);
+ requestAnimationFrame(measure)
return () => {
- window.removeEventListener("resize", onResize);
- window.removeEventListener("scroll", onScroll);
- resizeObserver.disconnect();
- };
- }, [measure, visible, targetSelector]);
+ window.removeEventListener('resize', onResize)
+ window.removeEventListener('scroll', onScroll)
+ resizeObserver.disconnect()
+ }
+ }, [measure, visible, targetSelector])
- if (!visible || rects.length === 0) return null;
+ if (!visible || rects.length === 0) return null
// 生成唯一ID用于SVG mask
- const maskId = `spotlight-mask-${Math.random().toString(36).substr(2, 9)}`;
+ const maskId = `spotlight-mask-${Math.random().toString(36).substr(2, 9)}`
// 计算阻止点击的区域（使用共享工具函数）
- const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 0;
- const viewportHeight = typeof window !== "undefined" ? window.innerHeight : 0;
- const blockingDivs = getBlockingDivs(rects, viewportWidth, viewportHeight);
+ const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : 0
+ const viewportHeight = typeof window !== 'undefined' ? window.innerHeight : 0
+ const blockingDivs = getBlockingDivs(rects, viewportWidth, viewportHeight)
return createPortal(
- );
-};
+ )
+}
-export { Title };
+export { Title }
diff --git a/src/components/video/index.ts b/src/components/video/index.ts
index e92b7aa..3bede84 100644
--- a/src/components/video/index.ts
+++ b/src/components/video/index.ts
@@ -1,8 +1,3 @@
-export { default } from "./video";
-export { default as Video } from "./video";
-export type {
- VideoProps,
- VideoRef,
- VideoAnchor,
- AnchorContext,
-} from "./video.types";
+export { default } from './video'
+export { default as Video } from './video'
+export type { VideoProps, VideoRef, VideoAnchor, AnchorContext } from './video.types'
diff --git a/src/components/video/video.tsx b/src/components/video/video.tsx
index dcebd15..a9d01e6 100644
--- a/src/components/video/video.tsx
+++ b/src/components/video/video.tsx
@@ -5,30 +5,23 @@ import React, {
useImperativeHandle,
useCallback,
useEffect,
-} from "react";
-import { cn } from "@/lib/utils";
-import type {
- VideoProps,
- VideoRef,
- VideoAnchor,
- AnchorContext,
-} from "./video.types";
+} from 'react'
+import { cn } from '@/lib/utils'
+import type { VideoProps, VideoRef, VideoAnchor, AnchorContext } from './video.types'
// Re-export types for convenience
-export type { VideoProps, VideoRef, VideoAnchor, AnchorContext };
+export type { VideoProps, VideoRef, VideoAnchor, AnchorContext }
// 格式化时间显示
const formatTime = (seconds: number): string => {
- const h = Math.floor(seconds / 3600);
- const m = Math.floor((seconds % 3600) / 60);
- const s = Math.floor(seconds % 60);
+ const h = Math.floor(seconds / 3600)
+ const m = Math.floor((seconds % 3600) / 60)
+ const s = Math.floor(seconds % 60)
if (h > 0) {
- return `${h}:${m.toString().padStart(2, "0")}:${s
- .toString()
- .padStart(2, "0")}`;
+ return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
}
- return `${m}:${s.toString().padStart(2, "0")}`;
-};
+ return `${m}:${s.toString().padStart(2, '0')}`
+}
/**
* Video - 支持锚点交互的视频组件
@@ -55,7 +48,7 @@ const Video = forwardRef(
onTimeUpdate,
children,
showSkipButton = false,
- skipText = "跳过",
+ skipText = '跳过',
onSkip,
skipButtonClassName,
controls = false, // 默认不使用原生控制条
@@ -63,407 +56,398 @@ const Video = forwardRef(
},
ref
) => {
- const videoRef = useRef(null);
- const controlsRef = useRef(null);
- const progressRef = useRef(null);
- const [showControls, setShowControls] = useState(true);
- const [currentTime, setCurrentTime] = useState(0);
- const [duration, setDuration] = useState(0);
- const [isMuted, setIsMuted] = useState(false);
- const [volume, setVolume] = useState(1);
- const [isFullscreen, setIsFullscreen] = useState(false);
- const controlsTimerRef = useRef(null);
+ const videoRef = useRef(null)
+ const controlsRef = useRef(null)
+ const progressRef = useRef(null)
+ const [showControls, setShowControls] = useState(true)
+ const [currentTime, setCurrentTime] = useState(0)
+ const [duration, setDuration] = useState(0)
+ const [isMuted, setIsMuted] = useState(false)
+ const [volume, setVolume] = useState(1)
+ const [isFullscreen, setIsFullscreen] = useState(false)
+ const controlsTimerRef = useRef(null)
// 已触发过的锚点 ID（用于 once 逻辑）
- const [triggeredOnceIds, setTriggeredOnceIds] = useState>(
- new Set()
- );
+ const [triggeredOnceIds, setTriggeredOnceIds] = useState>(new Set())
// 当前激活的锚点 ID
- const [activeAnchorId, setActiveAnchorId] = useState(null);
+ const [activeAnchorId, setActiveAnchorId] = useState(null)
// 已隐藏的锚点 ID（afterResume: 'hide'）
- const [hiddenAnchorIds, setHiddenAnchorIds] = useState>(
- new Set()
- );
+ const [hiddenAnchorIds, setHiddenAnchorIds] = useState>(new Set())
// 已移除的锚点 ID（afterResume: 'remove'）
- const [removedAnchorIds, setRemovedAnchorIds] = useState>(
- new Set()
- );
- const isHandlingAnchor = useRef(false);
- const [isPlaying, setIsPlaying] = useState(false);
- const [isDragging, setIsDragging] = useState(false);
- const [isVideoReady, setIsVideoReady] = useState(false);
+ const [removedAnchorIds, setRemovedAnchorIds] = useState>(new Set())
+ const isHandlingAnchor = useRef(false)
+ const [isPlaying, setIsPlaying] = useState(false)
+ const [isDragging, setIsDragging] = useState(false)
+ const [isVideoReady, setIsVideoReady] = useState(false)
// 跟踪是否应该停在锚点处（用于 seek 时强制暂停）
- const shouldStopAtAnchorRef = useRef<{ time: number; anchorId: string } | null>(null);
+ const shouldStopAtAnchorRef = useRef<{ time: number; anchorId: string } | null>(null)
useImperativeHandle(ref, () => ({
video: videoRef.current,
play: async () => {
- await videoRef.current?.play();
+ await videoRef.current?.play()
},
pause: () => {
- videoRef.current?.pause();
+ videoRef.current?.pause()
},
- }));
+ }))
// 初始化视频信息
useEffect(() => {
- const video = videoRef.current;
- if (!video) return;
+ const video = videoRef.current
+ if (!video) return
const handleLoadedMetadata = () => {
- setDuration(video.duration);
- setIsMuted(video.muted);
- setVolume(video.volume);
- setIsVideoReady(true);
- };
+ setDuration(video.duration)
+ setIsMuted(video.muted)
+ setVolume(video.volume)
+ setIsVideoReady(true)
+ }
const handleLoadedData = () => {
- setIsVideoReady(true);
- };
+ setIsVideoReady(true)
+ }
// 如果视频已经有尺寸，立即设置为ready
if (video.videoWidth > 0 && video.videoHeight > 0) {
- setIsVideoReady(true);
+ setIsVideoReady(true)
}
- video.addEventListener("loadedmetadata", handleLoadedMetadata);
- video.addEventListener("loadeddata", handleLoadedData);
+ video.addEventListener('loadedmetadata', handleLoadedMetadata)
+ video.addEventListener('loadeddata', handleLoadedData)
return () => {
- video.removeEventListener("loadedmetadata", handleLoadedMetadata);
- video.removeEventListener("loadeddata", handleLoadedData);
- };
- }, []);
+ video.removeEventListener('loadedmetadata', handleLoadedMetadata)
+ video.removeEventListener('loadeddata', handleLoadedData)
+ }
+ }, [])
// 全屏状态监听
useEffect(() => {
const handleFullscreenChange = () => {
- setIsFullscreen(!!document.fullscreenElement);
- };
+ setIsFullscreen(!!document.fullscreenElement)
+ }
- document.addEventListener("fullscreenchange", handleFullscreenChange);
+ document.addEventListener('fullscreenchange', handleFullscreenChange)
return () => {
- document.removeEventListener(
- "fullscreenchange",
- handleFullscreenChange
- );
- };
- }, []);
+ document.removeEventListener('fullscreenchange', handleFullscreenChange)
+ }
+ }, [])
// 控制条自动隐藏逻辑
const resetControlsTimer = useCallback(() => {
if (controlsTimerRef.current) {
- clearTimeout(controlsTimerRef.current);
+ clearTimeout(controlsTimerRef.current)
}
- setShowControls(true);
+ setShowControls(true)
if (isPlaying) {
controlsTimerRef.current = setTimeout(() => {
- setShowControls(false);
- }, 3000);
+ setShowControls(false)
+ }, 3000)
}
- }, [isPlaying]);
+ }, [isPlaying])
useEffect(() => {
- resetControlsTimer();
+ resetControlsTimer()
return () => {
if (controlsTimerRef.current) {
- clearTimeout(controlsTimerRef.current);
+ clearTimeout(controlsTimerRef.current)
}
- };
- }, [resetControlsTimer]);
+ }
+ }, [resetControlsTimer])
// 取消静音
const unmute = useCallback(() => {
if (videoRef.current) {
- videoRef.current.muted = false;
+ videoRef.current.muted = false
}
- }, []);
+ }, [])
// 创建 resume 函数
const createResume = useCallback((anchor: VideoAnchor) => {
return () => {
- const afterResume = anchor.afterResume ?? "hide";
+ const afterResume = anchor.afterResume ?? 'hide'
- if (afterResume === "hide") {
- setHiddenAnchorIds((prev) => new Set(prev).add(anchor.id));
- setActiveAnchorId(null);
- } else if (afterResume === "remove") {
- setRemovedAnchorIds((prev) => new Set(prev).add(anchor.id));
- setActiveAnchorId(null);
+ if (afterResume === 'hide') {
+ setHiddenAnchorIds((prev) => new Set(prev).add(anchor.id))
+ setActiveAnchorId(null)
+ } else if (afterResume === 'remove') {
+ setRemovedAnchorIds((prev) => new Set(prev).add(anchor.id))
+ setActiveAnchorId(null)
}
// 'keep' 模式：不清除 activeAnchorId，UI 保持可见
- isHandlingAnchor.current = false;
- videoRef.current?.play();
- };
- }, []);
+ isHandlingAnchor.current = false
+ videoRef.current?.play()
+ }
+ }, [])
- const handleTimeUpdate = (
- e: React.SyntheticEvent
- ): void => {
+ const handleTimeUpdate = (e: React.SyntheticEvent): void => {
if (onTimeUpdate) {
- onTimeUpdate(e);
+ onTimeUpdate(e)
}
- const video = e.currentTarget;
- const currentTime = video.currentTime;
- setCurrentTime(currentTime);
+ const video = e.currentTarget
+ const currentTime = video.currentTime
+ setCurrentTime(currentTime)
- if (isHandlingAnchor.current) return;
+ if (isHandlingAnchor.current) return
for (const anchor of anchors) {
// 检查是否启用
- if (anchor.enabled === false) continue;
+ if (anchor.enabled === false) continue
// 检查是否已移除
- if (removedAnchorIds.has(anchor.id)) continue;
+ if (removedAnchorIds.has(anchor.id)) continue
// 检查 once 逻辑
- if (anchor.once && triggeredOnceIds.has(anchor.id)) continue;
+ if (anchor.once && triggeredOnceIds.has(anchor.id)) continue
// 检查是否已隐藏（隐藏的锚点不再触发）
- if (hiddenAnchorIds.has(anchor.id)) continue;
+ if (hiddenAnchorIds.has(anchor.id)) continue
// keep 模式下，如果当前锚点已激活，跳过（避免重复触发暂停）
- if (activeAnchorId === anchor.id) continue;
+ if (activeAnchorId === anchor.id) continue
- const timeDiff = currentTime - anchor.time;
+ const timeDiff = currentTime - anchor.time
if (timeDiff >= 0 && timeDiff < 0.5) {
- console.log(`Anchor triggered: ${anchor.id} at ${anchor.time}s`);
+ console.log(`Anchor triggered: ${anchor.id} at ${anchor.time}s`)
// 暂停视频 - Safari 兼容：确保暂停生效
- video.pause();
+ video.pause()
// 双重保险：延迟再次确认暂停
requestAnimationFrame(() => {
if (!video.paused) {
- video.pause();
+ video.pause()
}
- });
- isHandlingAnchor.current = true;
+ })
+ isHandlingAnchor.current = true
// 标记为已触发（用于 once 逻辑）
if (anchor.once) {
- setTriggeredOnceIds((prev) => new Set(prev).add(anchor.id));
+ setTriggeredOnceIds((prev) => new Set(prev).add(anchor.id))
}
// 设置当前激活的锚点
- setActiveAnchorId(anchor.id);
+ setActiveAnchorId(anchor.id)
// 触发回调（如埋点）
- anchor.onTrigger?.();
+ anchor.onTrigger?.()
- break;
+ break
}
}
- };
+ }
// 检查并触发锚点的辅助函数
- const checkAndTriggerAnchors = useCallback((targetTime: number) => {
- if (!videoRef.current || isHandlingAnchor.current) return;
+ const checkAndTriggerAnchors = useCallback(
+ (targetTime: number) => {
+ if (!videoRef.current || isHandlingAnchor.current) return
- for (const anchor of anchors) {
- // 检查是否启用
- if (anchor.enabled === false) continue;
- // 检查是否已移除
- if (removedAnchorIds.has(anchor.id)) continue;
- // 检查 once 逻辑
- if (anchor.once && triggeredOnceIds.has(anchor.id)) continue;
- // 检查是否已隐藏（隐藏的锚点不再触发）
- if (hiddenAnchorIds.has(anchor.id)) continue;
- // keep 模式下，如果当前锚点已激活，跳过（避免重复触发暂停）
- if (activeAnchorId === anchor.id) continue;
+ for (const anchor of anchors) {
+ // 检查是否启用
+ if (anchor.enabled === false) continue
+ // 检查是否已移除
+ if (removedAnchorIds.has(anchor.id)) continue
+ // 检查 once 逻辑
+ if (anchor.once && triggeredOnceIds.has(anchor.id)) continue
+ // 检查是否已隐藏（隐藏的锚点不再触发）
+ if (hiddenAnchorIds.has(anchor.id)) continue
+ // keep 模式下，如果当前锚点已激活，跳过（避免重复触发暂停）
+ if (activeAnchorId === anchor.id) continue
- // 检查是否跳过了锚点时间（允许0.5秒的容差）
- const timeDiff = targetTime - anchor.time;
- if (timeDiff >= 0 && timeDiff < 0.5) {
- console.log(`Anchor triggered: ${anchor.id} at ${anchor.time}s (seeked to ${targetTime}s)`);
+ // 检查是否跳过了锚点时间（允许0.5秒的容差）
+ const timeDiff = targetTime - anchor.time
+ if (timeDiff >= 0 && timeDiff < 0.5) {
+ console.log(
+ `Anchor triggered: ${anchor.id} at ${anchor.time}s (seeked to ${targetTime}s)`
+ )
- // 立即暂停视频（多次确认确保暂停生效）
- if (videoRef.current) {
- videoRef.current.pause();
- // 同步检查并再次暂停（Safari 兼容）
- if (!videoRef.current.paused) {
- videoRef.current.pause();
+ // 立即暂停视频（多次确认确保暂停生效）
+ if (videoRef.current) {
+ videoRef.current.pause()
+ // 同步检查并再次暂停（Safari 兼容）
+ if (!videoRef.current.paused) {
+ videoRef.current.pause()
+ }
+ // 双重保险：延迟再次确认暂停
+ requestAnimationFrame(() => {
+ if (videoRef.current && !videoRef.current.paused) {
+ videoRef.current.pause()
+ }
+ })
+ // 三重保险：再延迟一次确认
+ setTimeout(() => {
+ if (videoRef.current && !videoRef.current.paused) {
+ videoRef.current.pause()
+ }
+ }, 50)
}
- // 双重保险：延迟再次确认暂停
- requestAnimationFrame(() => {
- if (videoRef.current && !videoRef.current.paused) {
- videoRef.current.pause();
- }
- });
- // 三重保险：再延迟一次确认
- setTimeout(() => {
- if (videoRef.current && !videoRef.current.paused) {
- videoRef.current.pause();
- }
- }, 50);
+ isHandlingAnchor.current = true
+
+ // 标记为已触发（用于 once 逻辑）
+ if (anchor.once) {
+ setTriggeredOnceIds((prev) => new Set(prev).add(anchor.id))
+ }
+
+ // 设置当前激活的锚点
+ setActiveAnchorId(anchor.id)
+
+ // 触发回调（如埋点）
+ anchor.onTrigger?.()
+
+ break
}
- isHandlingAnchor.current = true;
-
- // 标记为已触发（用于 once 逻辑）
- if (anchor.once) {
- setTriggeredOnceIds((prev) => new Set(prev).add(anchor.id));
- }
-
- // 设置当前激活的锚点
- setActiveAnchorId(anchor.id);
-
- // 触发回调（如埋点）
- anchor.onTrigger?.();
-
- break;
}
- }
- }, [anchors, removedAnchorIds, triggeredOnceIds, hiddenAnchorIds, activeAnchorId]);
+ },
+ [anchors, removedAnchorIds, triggeredOnceIds, hiddenAnchorIds, activeAnchorId]
+ )
// 查找目标时间之前最近的未触发锚点
- const findNearestAnchorBeforeTime = useCallback((targetTime: number): VideoAnchor | null => {
- let nearestAnchor: VideoAnchor | null = null;
- let nearestTime = -1;
+ const findNearestAnchorBeforeTime = useCallback(
+ (targetTime: number): VideoAnchor | null => {
+ let nearestAnchor: VideoAnchor | null = null
+ let nearestTime = -1
- for (const anchor of anchors) {
- // 检查是否启用
- if (anchor.enabled === false) continue;
- // 检查是否已移除
- if (removedAnchorIds.has(anchor.id)) continue;
- // 检查 once 逻辑
- if (anchor.once && triggeredOnceIds.has(anchor.id)) continue;
- // 检查是否已隐藏（隐藏的锚点不再触发）
- if (hiddenAnchorIds.has(anchor.id)) continue;
+ for (const anchor of anchors) {
+ // 检查是否启用
+ if (anchor.enabled === false) continue
+ // 检查是否已移除
+ if (removedAnchorIds.has(anchor.id)) continue
+ // 检查 once 逻辑
+ if (anchor.once && triggeredOnceIds.has(anchor.id)) continue
+ // 检查是否已隐藏（隐藏的锚点不再触发）
+ if (hiddenAnchorIds.has(anchor.id)) continue
- // 锚点时间应该在目标时间之前或等于目标时间
- if (anchor.time <= targetTime && anchor.time > nearestTime) {
- nearestAnchor = anchor;
- nearestTime = anchor.time;
+ // 锚点时间应该在目标时间之前或等于目标时间
+ if (anchor.time <= targetTime && anchor.time > nearestTime) {
+ nearestAnchor = anchor
+ nearestTime = anchor.time
+ }
}
- }
- return nearestAnchor;
- }, [anchors, removedAnchorIds, triggeredOnceIds, hiddenAnchorIds]);
+ return nearestAnchor
+ },
+ [anchors, removedAnchorIds, triggeredOnceIds, hiddenAnchorIds]
+ )
// 开始跳转时，如果应该停在锚点处，立即暂停
const handleSeeking = (): void => {
- if (!videoRef.current) return;
+ if (!videoRef.current) return
// 如果设置了应该停在锚点处，立即暂停
if (shouldStopAtAnchorRef.current) {
- videoRef.current.pause();
+ videoRef.current.pause()
// 同步检查并再次暂停（Safari 兼容）
if (!videoRef.current.paused) {
- videoRef.current.pause();
+ videoRef.current.pause()
}
}
- };
+ }
// Seek 时重置隐藏状态（非 once 的锚点可以重新触发），并检查是否跳过了锚点
const handleSeeked = (): void => {
- if (!videoRef.current) return;
- const currentTime = videoRef.current.currentTime;
+ if (!videoRef.current) return
+ const currentTime = videoRef.current.currentTime
// 如果设置了应该停在锚点处，强制暂停并触发锚点
if (shouldStopAtAnchorRef.current) {
- const { time: anchorTime, anchorId } = shouldStopAtAnchorRef.current;
+ const { time: anchorTime, anchorId } = shouldStopAtAnchorRef.current
// 检查当前时间是否在锚点附近（允许0.1秒容差）
if (Math.abs(currentTime - anchorTime) < 0.1) {
// 强制暂停（多次确认）
- videoRef.current.pause();
+ videoRef.current.pause()
if (!videoRef.current.paused) {
- videoRef.current.pause();
+ videoRef.current.pause()
}
requestAnimationFrame(() => {
if (videoRef.current && !videoRef.current.paused) {
- videoRef.current.pause();
+ videoRef.current.pause()
}
- });
-
+ })
+
// 触发锚点逻辑
if (!isHandlingAnchor.current) {
- const anchor = anchors.find((a) => a.id === anchorId);
+ const anchor = anchors.find((a) => a.id === anchorId)
if (anchor) {
- isHandlingAnchor.current = true;
-
+ isHandlingAnchor.current = true
+
// 标记为已触发（用于 once 逻辑）
if (anchor.once) {
- setTriggeredOnceIds((prev) => new Set(prev).add(anchor.id));
+ setTriggeredOnceIds((prev) => new Set(prev).add(anchor.id))
}
-
+
// 设置当前激活的锚点
- setActiveAnchorId(anchor.id);
-
+ setActiveAnchorId(anchor.id)
+
// 触发回调（如埋点）
- anchor.onTrigger?.();
+ anchor.onTrigger?.()
}
}
-
+
// 清除标记
- shouldStopAtAnchorRef.current = null;
- return;
+ shouldStopAtAnchorRef.current = null
+ return
}
// 如果时间不匹配，清除标记
- shouldStopAtAnchorRef.current = null;
+ shouldStopAtAnchorRef.current = null
}
// 清除当前时间之后的隐藏状态（允许重新触发）
setHiddenAnchorIds((prev) => {
- const next = new Set(prev);
+ const next = new Set(prev)
for (const id of next) {
- const anchor = anchors.find((a) => a.id === id);
+ const anchor = anchors.find((a) => a.id === id)
if (anchor && anchor.time > currentTime) {
- next.delete(id);
+ next.delete(id)
}
}
- return next;
- });
+ return next
+ })
// 重置锚点处理锁（如果当前没有激活的锚点）
if (!activeAnchorId) {
- isHandlingAnchor.current = false;
+ isHandlingAnchor.current = false
}
// 检查是否跳过了锚点时间，如果是则触发锚点
- checkAndTriggerAnchors(currentTime);
- };
+ checkAndTriggerAnchors(currentTime)
+ }
// 获取当前激活的锚点
- const activeAnchor = activeAnchorId
- ? anchors.find((a) => a.id === activeAnchorId)
- : null;
+ const activeAnchor = activeAnchorId ? anchors.find((a) => a.id === activeAnchorId) : null
// 统一处理 onEnded：更新播放状态并透传给外部
- const handleEnded: React.VideoHTMLAttributes["onEnded"] =
- (e) => {
- setIsPlaying(false);
- props.onEnded?.(e);
- };
+ const handleEnded: React.VideoHTMLAttributes['onEnded'] = (e) => {
+ setIsPlaying(false)
+ props.onEnded?.(e)
+ }
- const handlePlay: React.VideoHTMLAttributes["onPlay"] = (
- e
- ) => {
- setIsPlaying(true);
- props.onPlay?.(e);
- };
+ const handlePlay: React.VideoHTMLAttributes['onPlay'] = (e) => {
+ setIsPlaying(true)
+ props.onPlay?.(e)
+ }
- const handlePause: React.VideoHTMLAttributes["onPause"] =
- (e) => {
- setIsPlaying(false);
- props.onPause?.(e);
- };
+ const handlePause: React.VideoHTMLAttributes['onPause'] = (e) => {
+ setIsPlaying(false)
+ props.onPause?.(e)
+ }
const handleSkipClick = (): void => {
- if (!videoRef.current) return;
+ if (!videoRef.current) return
- const currentTime = videoRef.current.currentTime;
- const videoDuration = videoRef.current.duration;
+ const currentTime = videoRef.current.currentTime
+ const videoDuration = videoRef.current.duration
// 检查是否有未触发的锚点
- let hasUntriggeredAnchor = false;
+ let hasUntriggeredAnchor = false
for (const anchor of anchors) {
// 检查是否启用
- if (anchor.enabled === false) continue;
+ if (anchor.enabled === false) continue
// 检查是否已移除
- if (removedAnchorIds.has(anchor.id)) continue;
+ if (removedAnchorIds.has(anchor.id)) continue
// 检查 once 逻辑
- if (anchor.once && triggeredOnceIds.has(anchor.id)) continue;
+ if (anchor.once && triggeredOnceIds.has(anchor.id)) continue
// 检查是否已隐藏
- if (hiddenAnchorIds.has(anchor.id)) continue;
+ if (hiddenAnchorIds.has(anchor.id)) continue
// 检查锚点时间是否在当前时间和视频结束之间
if (anchor.time >= currentTime && anchor.time <= videoDuration) {
- hasUntriggeredAnchor = true;
- break;
+ hasUntriggeredAnchor = true
+ break
}
}
@@ -471,209 +455,206 @@ const Video = forwardRef(
if (hasUntriggeredAnchor) {
// 找到第一个未触发的锚点
const nextAnchor = anchors.find((anchor) => {
- if (anchor.enabled === false) return false;
- if (removedAnchorIds.has(anchor.id)) return false;
- if (anchor.once && triggeredOnceIds.has(anchor.id)) return false;
- if (hiddenAnchorIds.has(anchor.id)) return false;
- return anchor.time >= currentTime && anchor.time <= videoDuration;
- });
+ if (anchor.enabled === false) return false
+ if (removedAnchorIds.has(anchor.id)) return false
+ if (anchor.once && triggeredOnceIds.has(anchor.id)) return false
+ if (hiddenAnchorIds.has(anchor.id)) return false
+ return anchor.time >= currentTime && anchor.time <= videoDuration
+ })
if (nextAnchor) {
// 跳转到锚点时间
- videoRef.current.currentTime = nextAnchor.time;
+ videoRef.current.currentTime = nextAnchor.time
// 触发锚点（通过 checkAndTriggerAnchors）
setTimeout(() => {
- checkAndTriggerAnchors(nextAnchor.time);
- }, 100);
- return;
+ checkAndTriggerAnchors(nextAnchor.time)
+ }, 100)
+ return
}
}
// 如果没有未触发的锚点，执行原来的跳过逻辑
- videoRef.current.pause();
- onSkip?.();
+ videoRef.current.pause()
+ onSkip?.()
// 触发与自然结束相同的逻辑
if (props.onEnded) {
// 调用时不关心事件内容，保持类型兼容
- (props.onEnded as (e: any) => void)({} as any);
+ ;(props.onEnded as (e: any) => void)({} as any)
}
- };
+ }
// 播放/暂停切换
const togglePlayPause = () => {
if (videoRef.current) {
if (isPlaying) {
- videoRef.current.pause();
+ videoRef.current.pause()
} else {
- videoRef.current.play();
+ videoRef.current.play()
}
}
- resetControlsTimer();
- };
+ resetControlsTimer()
+ }
// 进度条点击/拖拽
const handleProgressClick = (e: React.MouseEvent) => {
// 如果正在拖拽，不处理点击事件
- if (isDragging) return;
- if (!videoRef.current || !progressRef.current) return;
- const rect = progressRef.current.getBoundingClientRect();
- const percent = (e.clientX - rect.left) / rect.width;
- const targetTime = percent * duration;
-
+ if (isDragging) return
+ if (!videoRef.current || !progressRef.current) return
+ const rect = progressRef.current.getBoundingClientRect()
+ const percent = (e.clientX - rect.left) / rect.width
+ const targetTime = percent * duration
+
// 检查目标时间之前是否有未触发的锚点
- const nearestAnchor = findNearestAnchorBeforeTime(targetTime);
+ const nearestAnchor = findNearestAnchorBeforeTime(targetTime)
// 如果找到锚点，且目标时间跳过了锚点（目标时间 > 锚点时间），则停在锚点处
// 但只有当目标时间在锚点之后超过0.1秒时才停在锚点，避免点击锚点本身时也被拦截
- const shouldStopAtAnchor = nearestAnchor && targetTime > nearestAnchor.time && targetTime - nearestAnchor.time > 0.1;
- const finalTime = shouldStopAtAnchor ? nearestAnchor!.time : targetTime;
-
+ const shouldStopAtAnchor =
+ nearestAnchor && targetTime > nearestAnchor.time && targetTime - nearestAnchor.time > 0.1
+ const finalTime = shouldStopAtAnchor ? nearestAnchor!.time : targetTime
+
// 如果会停在锚点处，设置标记（用于 onSeeking 和 onSeeked 事件）
if (shouldStopAtAnchor && nearestAnchor) {
shouldStopAtAnchorRef.current = {
time: finalTime,
anchorId: nearestAnchor.id,
- };
+ }
// 立即暂停视频
- videoRef.current.pause();
+ videoRef.current.pause()
} else {
- shouldStopAtAnchorRef.current = null;
+ shouldStopAtAnchorRef.current = null
}
-
- videoRef.current.currentTime = finalTime;
- resetControlsTimer();
- };
+
+ videoRef.current.currentTime = finalTime
+ resetControlsTimer()
+ }
const handleProgressMouseDown = (e: React.MouseEvent) => {
- e.preventDefault();
- setIsDragging(true);
- if (!videoRef.current || !progressRef.current) return;
- const rect = progressRef.current.getBoundingClientRect();
- const percent = Math.max(
- 0,
- Math.min(1, (e.clientX - rect.left) / rect.width)
- );
- const targetTime = percent * duration;
-
+ e.preventDefault()
+ setIsDragging(true)
+ if (!videoRef.current || !progressRef.current) return
+ const rect = progressRef.current.getBoundingClientRect()
+ const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+ const targetTime = percent * duration
+
// 检查目标时间之前是否有未触发的锚点
- const nearestAnchor = findNearestAnchorBeforeTime(targetTime);
+ const nearestAnchor = findNearestAnchorBeforeTime(targetTime)
// 如果找到锚点，且目标时间跳过了锚点（目标时间 > 锚点时间），则停在锚点处
// 但只有当目标时间在锚点之后超过0.1秒时才停在锚点，避免点击锚点本身时也被拦截
- const shouldStopAtAnchor = nearestAnchor && targetTime > nearestAnchor.time && targetTime - nearestAnchor.time > 0.1;
- const finalTime = shouldStopAtAnchor ? nearestAnchor!.time : targetTime;
-
+ const shouldStopAtAnchor =
+ nearestAnchor && targetTime > nearestAnchor.time && targetTime - nearestAnchor.time > 0.1
+ const finalTime = shouldStopAtAnchor ? nearestAnchor!.time : targetTime
+
// 如果会停在锚点处，设置标记（用于 onSeeking 和 onSeeked 事件）
if (shouldStopAtAnchor && nearestAnchor) {
shouldStopAtAnchorRef.current = {
time: finalTime,
anchorId: nearestAnchor.id,
- };
+ }
// 立即暂停视频
- videoRef.current.pause();
+ videoRef.current.pause()
} else {
- shouldStopAtAnchorRef.current = null;
+ shouldStopAtAnchorRef.current = null
}
-
- videoRef.current.currentTime = finalTime;
- };
+
+ videoRef.current.currentTime = finalTime
+ }
// 全局鼠标移动和释放事件处理拖拽
useEffect(() => {
- if (!isDragging) return;
+ if (!isDragging) return
const handleMouseMove = (e: MouseEvent) => {
- if (!videoRef.current || !progressRef.current) return;
- const rect = progressRef.current.getBoundingClientRect();
- const percent = Math.max(
- 0,
- Math.min(1, (e.clientX - rect.left) / rect.width)
- );
- const targetTime = percent * duration;
-
+ if (!videoRef.current || !progressRef.current) return
+ const rect = progressRef.current.getBoundingClientRect()
+ const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+ const targetTime = percent * duration
+
// 检查目标时间之前是否有未触发的锚点
- const nearestAnchor = findNearestAnchorBeforeTime(targetTime);
+ const nearestAnchor = findNearestAnchorBeforeTime(targetTime)
// 如果找到锚点，且目标时间跳过了锚点（目标时间 > 锚点时间），则停在锚点处
// 但只有当目标时间在锚点之后超过0.1秒时才停在锚点，避免点击锚点本身时也被拦截
- const shouldStopAtAnchor = nearestAnchor && targetTime > nearestAnchor.time && targetTime - nearestAnchor.time > 0.1;
- const finalTime = shouldStopAtAnchor ? nearestAnchor!.time : targetTime;
-
+ const shouldStopAtAnchor =
+ nearestAnchor && targetTime > nearestAnchor.time && targetTime - nearestAnchor.time > 0.1
+ const finalTime = shouldStopAtAnchor ? nearestAnchor!.time : targetTime
+
// 如果会停在锚点处，设置标记（用于 onSeeking 和 onSeeked 事件）
if (shouldStopAtAnchor && nearestAnchor) {
shouldStopAtAnchorRef.current = {
time: finalTime,
anchorId: nearestAnchor.id,
- };
+ }
// 立即暂停视频
- videoRef.current.pause();
+ videoRef.current.pause()
} else {
- shouldStopAtAnchorRef.current = null;
+ shouldStopAtAnchorRef.current = null
}
-
- videoRef.current.currentTime = finalTime;
- };
+
+ videoRef.current.currentTime = finalTime
+ }
const handleMouseUp = () => {
- setIsDragging(false);
+ setIsDragging(false)
// 拖拽结束后，handleSeeked 会自动处理锚点触发
- };
+ }
- document.addEventListener("mousemove", handleMouseMove);
- document.addEventListener("mouseup", handleMouseUp);
+ document.addEventListener('mousemove', handleMouseMove)
+ document.addEventListener('mouseup', handleMouseUp)
return () => {
- document.removeEventListener("mousemove", handleMouseMove);
- document.removeEventListener("mouseup", handleMouseUp);
- };
- }, [isDragging, duration, checkAndTriggerAnchors, findNearestAnchorBeforeTime]);
+ document.removeEventListener('mousemove', handleMouseMove)
+ document.removeEventListener('mouseup', handleMouseUp)
+ }
+ }, [isDragging, duration, checkAndTriggerAnchors, findNearestAnchorBeforeTime])
// 音量控制
const toggleMute = () => {
if (videoRef.current) {
- videoRef.current.muted = !videoRef.current.muted;
- setIsMuted(videoRef.current.muted);
+ videoRef.current.muted = !videoRef.current.muted
+ setIsMuted(videoRef.current.muted)
}
- resetControlsTimer();
- };
+ resetControlsTimer()
+ }
const handleVolumeChange = (e: React.ChangeEvent) => {
if (videoRef.current) {
- const newVolume = parseFloat(e.target.value);
- videoRef.current.volume = newVolume;
- setVolume(newVolume);
- setIsMuted(newVolume === 0);
- videoRef.current.muted = newVolume === 0;
+ const newVolume = parseFloat(e.target.value)
+ videoRef.current.volume = newVolume
+ setVolume(newVolume)
+ setIsMuted(newVolume === 0)
+ videoRef.current.muted = newVolume === 0
}
- resetControlsTimer();
- };
+ resetControlsTimer()
+ }
// 全屏切换
const toggleFullscreen = () => {
- if (!videoRef.current) return;
+ if (!videoRef.current) return
if (!document.fullscreenElement) {
- videoRef.current.requestFullscreen?.();
+ videoRef.current.requestFullscreen?.()
} else {
- document.exitFullscreen?.();
+ document.exitFullscreen?.()
}
- resetControlsTimer();
- };
+ resetControlsTimer()
+ }
// 获取可见的锚点（用于在进度条上显示）
const visibleAnchors = anchors.filter((anchor) => {
- if (anchor.enabled === false) return false;
- if (removedAnchorIds.has(anchor.id)) return false;
- if (anchor.once && triggeredOnceIds.has(anchor.id)) return false;
- return true;
- });
+ if (anchor.enabled === false) return false
+ if (removedAnchorIds.has(anchor.id)) return false
+ if (anchor.once && triggeredOnceIds.has(anchor.id)) return false
+ return true
+ })
// 计算进度百分比
- const progressPercent = duration > 0 ? (currentTime / duration) * 100 : 0;
+ const progressPercent = duration > 0 ? (currentTime / duration) * 100 : 0
return (
{normalizedOptions.map((option) => {
- const isSelected = currentValue === option.value;
+ const isSelected = currentValue === option.value
return (
{/* 提交按钮移除：点击选项即提交 */}
{renderOption
? renderOption(option, isSelected)
: defaultRenderOption(option, isSelected)}
- );
+ )
})}
{
- if (typeof ref === "function") {
- ref(node);
+ if (typeof ref === 'function') {
+ ref(node)
} else if (ref) {
- ref.current = node;
+ ref.current = node
}
- triggerRef.current = node;
+ triggerRef.current = node
}}
className={cn(
- "inline-flex justify-start w-full h-[36px] mx-2 bg-transparent border-b-2 border-dashed text-[26px] outline-none cursor-pointer",
- error ? "border-red-500" : "border-[#4e402e]",
- disabled && "opacity-50 cursor-not-allowed",
+ 'inline-flex justify-start w-full h-[36px] mx-2 bg-transparent border-b-2 border-dashed text-[26px] outline-none cursor-pointer',
+ error ? 'border-red-500' : 'border-[#4e402e]',
+ disabled && 'opacity-50 cursor-not-allowed',
className
)}
onClick={handleOpen}
@@ -319,29 +306,26 @@ const Select = forwardRef(
style={{
top: `${dropdownPosition.top}px`,
left: `${dropdownPosition.left}px`,
- width: `${
- dropdownPosition.width > 0 ? dropdownPosition.width : "auto"
- }px`,
- minWidth: "80px",
+ width: `${dropdownPosition.width > 0 ? dropdownPosition.width : 'auto'}px`,
+ minWidth: '80px',
zIndex: zIndex,
}}
role="listbox"
>
{options.map((option, index) => {
- const isSelected = option.value === value;
- const isFocused = index === focusedIndex;
- const isDisabled = option.disabled;
+ const isSelected = option.value === value
+ const isFocused = index === focusedIndex
+ const isDisabled = option.disabled
return (
,
document.body
)}
- );
+ )
}
-);
+)
-Select.displayName = "Select";
+Select.displayName = 'Select'
-export default Select;
+export default Select
diff --git a/src/components/select/select.types.ts b/src/components/select/select.types.ts
index b79b84a..7b079a6 100644
--- a/src/components/select/select.types.ts
+++ b/src/components/select/select.types.ts
@@ -1,37 +1,37 @@
-import type { ReactNode } from "react";
+import type { ReactNode } from 'react'
/** Select 选项 */
export interface SelectOption {
/** 选项值 */
- value: string;
+ value: string
/** 选项标签 */
- label: string;
+ label: string
/** 是否禁用 */
- disabled?: boolean;
+ disabled?: boolean
}
/** Select 组件属性 */
export interface SelectProps {
/** 选项列表 */
- options: SelectOption[];
+ options: SelectOption[]
/** 当前选中的值 */
- value?: string;
+ value?: string
/** 值变化回调 */
- onChange?: (value: string) => void;
+ onChange?: (value: string) => void
/** 占位符文本 */
- placeholder?: string;
+ placeholder?: string
/** 是否禁用 */
- disabled?: boolean;
+ disabled?: boolean
/** 自定义类名 */
- className?: string;
+ className?: string
/** 是否显示错误状态 */
- error?: boolean;
+ error?: boolean
/** 下拉菜单的 z-index */
- zIndex?: number;
+ zIndex?: number
/** 下拉菜单宽度是否自适应内容（根据最长的 label 文字宽度） */
- fitContent?: boolean;
+ fitContent?: boolean
/** 下拉菜单最小宽度（当 fitContent 为 true 时生效） */
- minWidth?: number;
+ minWidth?: number
/** 下拉菜单最大宽度（当 fitContent 为 true 时生效） */
- maxWidth?: number;
+ maxWidth?: number
}
diff --git a/src/components/spotlight/Spotlight.tsx b/src/components/spotlight/Spotlight.tsx
index acd8557..beabdd5 100644
--- a/src/components/spotlight/Spotlight.tsx
+++ b/src/components/spotlight/Spotlight.tsx
@@ -1,16 +1,16 @@
-import { useEffect, useState, useCallback } from "react";
-import { createPortal } from "react-dom";
-import { getBlockingDivs, type Rect } from "./utils";
+import { useEffect, useState, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+import { getBlockingDivs, type Rect } from './utils'
interface SpotlightProps {
/** 是否可见 */
- visible?: boolean;
+ visible?: boolean
/** 目标元素选择器（支持单个或多个） */
- targetSelector?: string | string[] | null;
+ targetSelector?: string | string[] | null
/** 额外内边距 */
- padding?: number;
+ padding?: number
/** 圆角 */
- borderRadius?: number;
+ borderRadius?: number
}
const Spotlight: React.FC !isDisabled && handleSelect(option.value)}
role="option"
@@ -349,16 +333,16 @@ const Select = forwardRef(
>
{option.label}
- );
+ )
})}
{/* SVG 视觉遮罩 */}
,
document.body
- );
-};
+ )
+}
-export default Spotlight;
+export default Spotlight
diff --git a/src/components/spotlight/index.ts b/src/components/spotlight/index.ts
index 5f4351c..d0b0c3d 100644
--- a/src/components/spotlight/index.ts
+++ b/src/components/spotlight/index.ts
@@ -1 +1 @@
-export { default as Spotlight } from "./Spotlight";
+export { default as Spotlight } from './Spotlight'
diff --git a/src/components/spotlight/utils.ts b/src/components/spotlight/utils.ts
index 38cc423..7bba730 100644
--- a/src/components/spotlight/utils.ts
+++ b/src/components/spotlight/utils.ts
@@ -3,17 +3,17 @@
* 用于 Spotlight 和 Overlay 组件
*/
export interface BlockingDiv {
- top: number;
- left: number;
- width: string | number;
- height: string | number;
+ top: number
+ left: number
+ width: string | number
+ height: string | number
}
export interface Rect {
- top: number;
- left: number;
- width: number;
- height: number;
+ top: number
+ left: number
+ width: number
+ height: number
}
/**
@@ -28,24 +28,24 @@ export function getBlockingDivs(
viewportWidth: number,
viewportHeight: number
): BlockingDiv[] {
- if (rects.length === 0) return [];
+ if (rects.length === 0) return []
- const blocks: BlockingDiv[] = [];
+ const blocks: BlockingDiv[] = []
// 找出所有孔的边界
- const minTop = Math.min(...rects.map((r) => r.top));
- const maxBottom = Math.max(...rects.map((r) => r.top + r.height));
- const minLeft = Math.min(...rects.map((r) => r.left));
- const maxRight = Math.max(...rects.map((r) => r.left + r.width));
+ const minTop = Math.min(...rects.map((r) => r.top))
+ const maxBottom = Math.max(...rects.map((r) => r.top + r.height))
+ const minLeft = Math.min(...rects.map((r) => r.left))
+ const maxRight = Math.max(...rects.map((r) => r.left + r.width))
// 顶部大块
if (minTop > 0) {
blocks.push({
top: 0,
left: 0,
- width: "100%",
+ width: '100%',
height: minTop,
- });
+ })
}
// 底部大块
@@ -53,9 +53,9 @@ export function getBlockingDivs(
blocks.push({
top: maxBottom,
left: 0,
- width: "100%",
+ width: '100%',
height: viewportHeight - maxBottom,
- });
+ })
}
// 左侧大块（中间部分）
@@ -65,7 +65,7 @@ export function getBlockingDivs(
left: 0,
width: minLeft,
height: maxBottom - minTop,
- });
+ })
}
// 右侧大块（中间部分）
@@ -75,20 +75,20 @@ export function getBlockingDivs(
left: maxRight,
width: viewportWidth - maxRight,
height: maxBottom - minTop,
- });
+ })
}
// 对于多个孔的情况，填充孔之间的间隙
if (rects.length > 1) {
// 按位置排序
- const sortedByTop = [...rects].sort((a, b) => a.top - b.top);
- const sortedByLeft = [...rects].sort((a, b) => a.left - b.left);
+ const sortedByTop = [...rects].sort((a, b) => a.top - b.top)
+ const sortedByLeft = [...rects].sort((a, b) => a.left - b.left)
// 填充垂直间隙
for (let i = 0; i < sortedByTop.length - 1; i++) {
- const current = sortedByTop[i]!;
- const next = sortedByTop[i + 1]!;
- const gap = next.top - (current.top + current.height);
+ const current = sortedByTop[i]!
+ const next = sortedByTop[i + 1]!
+ const gap = next.top - (current.top + current.height)
if (gap > 0) {
blocks.push({
@@ -96,15 +96,15 @@ export function getBlockingDivs(
left: Math.max(current.left, next.left),
width: Math.min(current.width, next.width),
height: gap,
- });
+ })
}
}
// 填充水平间隙
for (let i = 0; i < sortedByLeft.length - 1; i++) {
- const current = sortedByLeft[i]!;
- const next = sortedByLeft[i + 1]!;
- const gap = next.left - (current.left + current.width);
+ const current = sortedByLeft[i]!
+ const next = sortedByLeft[i + 1]!
+ const gap = next.left - (current.left + current.width)
if (gap > 0) {
blocks.push({
@@ -112,10 +112,10 @@ export function getBlockingDivs(
left: current.left + current.width,
width: gap,
height: Math.min(current.height, next.height),
- });
+ })
}
}
}
- return blocks;
+ return blocks
}
diff --git a/src/components/title/index.tsx b/src/components/title/index.tsx
index 0e30725..742d4e8 100644
--- a/src/components/title/index.tsx
+++ b/src/components/title/index.tsx
@@ -1,4 +1,4 @@
-import { cn, getBackgroundImage } from "@/lib/utils";
+import { cn, getBackgroundImage } from '@/lib/utils'
/**
* 两个标题（主标题、副标题）
@@ -6,23 +6,18 @@ import { cn, getBackgroundImage } from "@/lib/utils";
* subtitle: 副标题
*/
interface TitleProps {
- title: string;
- subtitle: string;
- className?: string;
- subtitleClassName?: string;
+ title: string
+ subtitle: string
+ className?: string
+ subtitleClassName?: string
}
-const Title = ({
- title,
- subtitle,
- className,
- subtitleClassName,
-}: TitleProps) => {
+const Title = ({ title, subtitle, className, subtitleClassName }: TitleProps) => {
return (
{title}
{/* 副标题 */}
-
- {subtitle}
-
+ {subtitle}
{
if (isPlaying) {
- setShowControls(false);
+ setShowControls(false)
}
}}
>
@@ -695,9 +676,9 @@ const Video = forwardRef(
type="button"
onClick={handleSkipClick}
className={cn(
- "absolute top-8 right-8 z-20 px-6 py-2 rounded-full bg-black/60 text-white text-xl",
- "backdrop-blur-sm border border-white/30",
- "hover:bg-black/75 transition-colors",
+ 'absolute top-8 right-8 z-20 px-6 py-2 rounded-full bg-black/60 text-white text-xl',
+ 'backdrop-blur-sm border border-white/30',
+ 'hover:bg-black/75 transition-colors',
skipButtonClassName
)}
>
@@ -709,12 +690,12 @@ const Video = forwardRef(
e.stopPropagation()}
>
{/* 进度条容器 */}
@@ -731,19 +712,18 @@ const Video = forwardRef(
/>
{/* 锚点标记 */}
{visibleAnchors.map((anchor) => {
- const anchorPercent =
- duration > 0 ? (anchor.time / duration) * 100 : 0;
+ const anchorPercent = duration > 0 ? (anchor.time / duration) * 100 : 0
return (
- );
+ )
})}
{/* 悬停时的进度预览 */}
@@ -761,22 +741,14 @@ const Video = forwardRef(
type="button"
onClick={togglePlayPause}
className="flex-shrink-0 w-10 h-10 flex items-center justify-center text-white hover:text-white/80 transition-colors"
- aria-label={isPlaying ? "暂停" : "播放"}
+ aria-label={isPlaying ? '暂停' : '播放'}
>
{isPlaying ? (
-