feat: 更新 ESLint 和 Prettier 配置,增强代码质量管理

- 在 .gitignore 中添加 public/audio/* 以忽略音频文件。
- 更新 bun.lock,添加 eslint-config-prettier 和 eslint-plugin-prettier 依赖,确保 ESLint 与 Prettier 的兼容性。
- 修改 eslint.config.ts,整合 Prettier 规则,优化代码风格一致性。
- 在 package.json 中添加 lint:fix 和 format 脚本,简化代码格式化和修复流程。
- 更新 tailwind.config.ts 和其他组件文件,统一代码风格,提升可读性。
This commit is contained in:
zhongyidian committed 2026-03-05 13:50:47 +08:00
1 parent 5d00adc1a5
commit 76c67b492e
216 files changed
+12454 -13976

No files matched your search

+205 -235
View File
@@ -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<string[]>([]);
const [blankValues, setBlankValues] = useState<string[]>([])
// 每个空的校验状态:true 表示该空当前不符合要求(为空或超过 10 个字)
const [blankErrors, setBlankErrors] = useState<boolean[]>([]);
const [blankErrors, setBlankErrors] = useState<boolean[]>([])
// 是否已提交:提交后隐藏编辑信件,展示只读信件
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 (
<AnimatePresence>
@@ -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 = ({
<div
className="relative w-[1200px] h-full pointer-events-auto"
onClick={(e) => e.stopPropagation()}
style={{ perspective: "1200px" }}
style={{ perspective: '1200px' }}
>
{/* 编辑态 / 只读态:Y 轴翻转切换 */}
<motion.div
className="relative w-full h-full"
initial={false}
animate={{ rotateY: submitted ? 180 : 0 }}
transition={{ duration: 0.7, ease: "easeInOut" }}
style={{ transformStyle: "preserve-3d" }}
transition={{ duration: 0.7, ease: 'easeInOut' }}
style={{ transformStyle: 'preserve-3d' }}
>
{/* 前面:编辑态 */}
<div
className="absolute inset-0"
style={{
backfaceVisibility: "hidden",
backfaceVisibility: 'hidden',
// 编辑态展示时才响应事件,避免与背面点击冲突
pointerEvents: submitted ? "none" : "auto",
pointerEvents: submitted ? 'none' : 'auto',
}}
>
{/* 编辑态:信纸背景 */}
<img
src={getStaticImage("components/letter/信底")}
src={getStaticImage('components/letter/信底')}
alt="信纸"
className="absolute inset-0 w-full h-full object-contain"
/>
@@ -174,8 +174,8 @@ const LetterToSunzhongshan = ({
<div
className="text-white text-6xl font-bold tracking-[20px]"
style={{
writingMode: "vertical-rl",
textOrientation: "upright",
writingMode: 'vertical-rl',
textOrientation: 'upright',
}}
>
写给孙中山先生的信
@@ -186,134 +186,117 @@ const LetterToSunzhongshan = ({
<div className="absolute w-[700px] left-[320px] right-[180px] top-[80px] bottom-[180px] z-99">
<div className="text-[#4e402e] text-[26px] leading-relaxed">
{(() => {
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 (
<div
key={lineIndex}
className="mb-2"
style={needsIndent ? { textIndent: "2em" } : {}}
>
{segments.map((part, partIndex) => {
const isLast =
partIndex === segments.length - 1;
if (isLast) {
return (
<span
key={`part-${lineIndex}-${partIndex}`}
>
{part}
</span>
);
}
const segments = line.split('____')
return (
<div
key={lineIndex}
className="mb-2"
style={needsIndent ? { textIndent: '2em' } : {}}
>
{segments.map((part, partIndex) => {
const isLast = partIndex === segments.length - 1
if (isLast) {
return <span key={`part-${lineIndex}-${partIndex}`}>{part}</span>
}
const currentIndex = placeholderIndex++;
const isSelectFill = currentIndex < 3; // 前三个空使用 Select
const currentIndex = placeholderIndex++
const isSelectFill = currentIndex < 3 // 前三个空使用 Select
return (
<span
key={`part-${lineIndex}-${partIndex}`}
>
{part}
{isSelectFill ? (
// 前三个空:下拉选择
<Select
className="inline"
options={SELECT_OPTIONS}
value={
blankValues[currentIndex] ?? ""
return (
<span key={`part-${lineIndex}-${partIndex}`}>
{part}
{isSelectFill ? (
// 前三个空:下拉选择
<Select
className="inline"
options={SELECT_OPTIONS}
value={blankValues[currentIndex] ?? ''}
onChange={(selectedValue) => {
const next = [...blankValues]
next[currentIndex] = selectedValue
setBlankValues(next)
// 清除错误状态
if (blankErrors[currentIndex]) {
const nextErrs = [...blankErrors]
nextErrs[currentIndex] = false
setBlankErrors(nextErrs)
}
onChange={(selectedValue) => {
const next = [...blankValues];
next[currentIndex] = selectedValue;
setBlankValues(next);
// 清除错误状态
if (blankErrors[currentIndex]) {
const nextErrs = [...blankErrors];
nextErrs[currentIndex] = false;
setBlankErrors(nextErrs);
}
// 立即验证选择是否正确
// let correctAnswer = "";
// if (currentIndex === 0) {
// correctAnswer = BLANK_0_ANSWER;
// } else if (currentIndex === 1) {
// correctAnswer = BLANK_1_ANSWER;
// } else if (currentIndex === 2) {
// correctAnswer = BLANK_2_ANSWER;
// }
// 立即验证选择是否正确
// let correctAnswer = "";
// if (currentIndex === 0) {
// correctAnswer = BLANK_0_ANSWER;
// } else if (currentIndex === 1) {
// correctAnswer = BLANK_1_ANSWER;
// } else if (currentIndex === 2) {
// correctAnswer = BLANK_2_ANSWER;
// }
// if (
// correctAnswer &&
// selectedValue !== correctAnswer
// ) {
// // 选择错误,显示错误提示
// setErrorAlertText(
// "请选择正确答案"
// );
// setShowErrorAlert(true);
// // 清空选择
// next[currentIndex] = "";
// setBlankValues(next);
// const nextErrs = [...blankErrors];
// nextErrs[currentIndex] = true;
// setBlankErrors(nextErrs);
// }
}}
placeholder="请选择"
error={blankErrors[currentIndex]}
zIndex={10000}
fitContent={true}
/>
) : (
// 其他空:文本输入
<input
name={`blank-${currentIndex}`}
className={`inline-block w-[110px] h-[36px] mx-2 bg-transparent border-b-2 border-dashed [font-size:26px_!important] text-center outline-none ${
blankErrors[currentIndex]
? 'border-red-500'
: 'border-[#4e402e]'
}`}
value={blankValues[currentIndex] ?? ''}
onChange={(e) => {
const next = [...blankValues]
next[currentIndex] = e.target.value
setBlankValues(next)
// if (
// correctAnswer &&
// selectedValue !== correctAnswer
// ) {
// // 选择错误,显示错误提示
// setErrorAlertText(
// "请选择正确答案"
// );
// setShowErrorAlert(true);
// // 清空选择
// next[currentIndex] = "";
// setBlankValues(next);
// const nextErrs = [...blankErrors];
// nextErrs[currentIndex] = true;
// setBlankErrors(nextErrs);
// }
}}
placeholder="请选择"
error={blankErrors[currentIndex]}
zIndex={10000}
fitContent={true}
/>
) : (
// 其他空:文本输入
<input
name={`blank-${currentIndex}`}
className={`inline-block w-[110px] h-[36px] mx-2 bg-transparent border-b-2 border-dashed [font-size:26px_!important] text-center outline-none ${
blankErrors[currentIndex]
? "border-red-500"
: "border-[#4e402e]"
}`}
value={
blankValues[currentIndex] ?? ""
// 用户再次输入时,清除该空的错误高亮
if (blankErrors[currentIndex]) {
const nextErrs = [...blankErrors]
nextErrs[currentIndex] = false
setBlankErrors(nextErrs)
}
onChange={(e) => {
const next = [...blankValues];
next[currentIndex] = e.target.value;
setBlankValues(next);
// 用户再次输入时,清除该空的错误高亮
if (blankErrors[currentIndex]) {
const nextErrs = [...blankErrors];
nextErrs[currentIndex] = false;
setBlankErrors(nextErrs);
}
}}
/>
)}
</span>
);
})}
</div>
);
});
}}
/>
)}
</span>
)
})}
</div>
)
})
})()}
</div>
</div>
@@ -321,7 +304,7 @@ const LetterToSunzhongshan = ({
{/* 笔的图片 */}
<div className="absolute bottom-[150px] -right-30">
<img
src={getStaticImage("components/letter/笔")}
src={getStaticImage('components/letter/笔')}
alt="笔"
className="w-full h-full object-contain"
/>
@@ -330,11 +313,11 @@ const LetterToSunzhongshan = ({
{/* 提交按钮:切换到只读信件态 */}
<div className="absolute bottom-[80px] left-1/2 transform -translate-x-1/2 z-99">
<Image
src={getStaticImage("components/letter/可提交状态")}
src={getStaticImage('components/letter/可提交状态')}
alt="可提交状态"
onClick={() => {
if (!validateBlanks()) return;
setSubmitted(true);
if (!validateBlanks()) return
setSubmitted(true)
}}
button
/>
@@ -354,25 +337,25 @@ const LetterToSunzhongshan = ({
<div
className="absolute inset-0"
style={{
transform: "rotateY(180deg)",
backfaceVisibility: "hidden",
transform: 'rotateY(180deg)',
backfaceVisibility: 'hidden',
// 只读态展示时才响应事件
pointerEvents: submitted ? "auto" : "none",
pointerEvents: submitted ? 'auto' : 'none',
}}
>
{/* 只读态:新背景 */}
<img
src={getStaticImage("components/letter/信")}
src={getStaticImage('components/letter/信')}
alt="信件"
className="absolute inset-0 w-full h-full object-contain"
/>
<Image
src={getStaticImage("components/close")}
src={getStaticImage('components/close')}
alt="信纸"
className="absolute right-38 top-0"
button
onClick={() => {
setSubmitted(false);
setSubmitted(false)
}}
/>
@@ -380,55 +363,42 @@ const LetterToSunzhongshan = ({
<div className="absolute w-[700px] left-[260px] right-[180px] top-[80px] bottom-[180px] z-99">
<div className="text-[#4e402e] text-[26px] leading-relaxed">
{(() => {
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 (
<div
key={lineIndex}
className="mb-2"
style={needsIndent ? { textIndent: "2em" } : {}}
>
{segments.map((part, partIndex) => {
const isLast =
partIndex === segments.length - 1;
if (isLast) {
return (
<span
key={`part-${lineIndex}-${partIndex}`}
>
{part}
</span>
);
}
const segments = line.split('____')
return (
<div
key={lineIndex}
className="mb-2"
style={needsIndent ? { textIndent: '2em' } : {}}
>
{segments.map((part, partIndex) => {
const isLast = partIndex === segments.length - 1
if (isLast) {
return <span key={`part-${lineIndex}-${partIndex}`}>{part}</span>
}
const currentIndex = placeholderIndex++;
const value = blankValues[currentIndex] ?? "";
const currentIndex = placeholderIndex++
const value = blankValues[currentIndex] ?? ''
return (
<span
key={`part-${lineIndex}-${partIndex}`}
>
{part}
{value || "  "}
</span>
);
})}
</div>
);
});
return (
<span key={`part-${lineIndex}-${partIndex}`}>
{part}
{value || '  '}
</span>
)
})}
</div>
)
})
})()}
</div>
</div>
@@ -436,10 +406,10 @@ const LetterToSunzhongshan = ({
{/* 寄出按钮:关闭窗口 */}
<div className="absolute bottom-[80px] left-1/2 transform -translate-x-1/2 z-99">
<Image
src={getStaticImage("components/letter/寄出")}
src={getStaticImage('components/letter/寄出')}
alt="寄出"
onClick={() => {
onSubmit?.(blankValues);
onSubmit?.(blankValues)
}}
button
/>
@@ -460,7 +430,7 @@ const LetterToSunzhongshan = ({
</>
)}
</AnimatePresence>
);
};
)
}
export default LetterToSunzhongshan;
export default LetterToSunzhongshan