diff --git a/src/components/stateless/DottedStepper/index.jsx b/src/components/stateless/DottedStepper/index.jsx index 0a87eef0..e9c94386 100644 --- a/src/components/stateless/DottedStepper/index.jsx +++ b/src/components/stateless/DottedStepper/index.jsx @@ -15,18 +15,18 @@ const defaultSteps = [ label: 'Personal Information', fields: [ { name: 'name', type: 'text', placeholder: 'Name' }, - { name: 'email', type: 'email', placeholder: 'Email' }, - ], + { name: 'email', type: 'email', placeholder: 'Email' } + ] }, { label: 'Address Details', fields: [ { name: 'address', type: 'text', placeholder: 'Address' }, { name: 'city', type: 'text', placeholder: 'City' }, - { name: 'country', type: 'text', placeholder: 'Country' }, - ], + { name: 'country', type: 'text', placeholder: 'Country' } + ] }, - { label: 'Review & Submit' }, + { label: 'Review & Submit' } ] const StepIndicator = ({ currentStep, steps }) => { @@ -41,12 +41,12 @@ const StepIndicator = ({ currentStep, steps }) => { const inactiveTextColor = isDark ? '#8c8c8c' : '#bfbfbf' return ( -
+
{isMobile ? ( // 移动端垂直布局 -
+
{steps.map((step, index) => ( -
+
{ backgroundColor: index <= currentStep ? activeColor : inactiveBgColor, color: index <= currentStep ? activeTextColor : inactiveTextColor, borderColor: index <= currentStep ? activeColor : undefined, - boxShadow: index <= currentStep ? `0 4px 12px ${activeColor}40` : undefined, + boxShadow: index <= currentStep ? `0 4px 12px ${activeColor}40` : undefined }} > - {index < currentStep ? : } + {index < currentStep ? : } -
+
{step.label}
{index === currentStep && ( -
+
当前步骤
)} @@ -85,10 +85,10 @@ const StepIndicator = ({ currentStep, steps }) => {
) : ( // 桌面端水平布局 -
+
{steps.map((step, index) => ( -
+
{ backgroundColor: index <= currentStep ? activeColor : inactiveBgColor, color: index <= currentStep ? activeTextColor : inactiveTextColor, borderColor: index <= currentStep ? activeColor : undefined, - boxShadow: index <= currentStep ? `0 4px 12px ${activeColor}40` : undefined, + boxShadow: index <= currentStep ? `0 4px 12px ${activeColor}40` : undefined }} > - {index < currentStep ? : } + {index < currentStep ? : }
{ index <= currentStep ? '' : 'text-gray-500 dark:text-gray-400' )} style={{ - color: index <= currentStep ? activeColor : undefined, + color: index <= currentStep ? activeColor : undefined }} > {step.label}
{index < steps.length - 1 && ( -
+
@@ -146,7 +146,7 @@ const StepIndicator = ({ currentStep, steps }) => { StepIndicator.propTypes = { currentStep: PropTypes.number.isRequired, - steps: PropTypes.array.isRequired, + steps: PropTypes.array.isRequired } const StepContent = ({ step }) => { @@ -156,33 +156,33 @@ const StepContent = ({ step }) => { return ( -
-
-

+
+
+

{step.label}

-

+

Step content for {step.label}

{step.fields && ( -
+
{step.fields.map((field) => (
@@ -196,7 +196,7 @@ const StepContent = ({ step }) => { } StepContent.propTypes = { - step: PropTypes.object.isRequired, + step: PropTypes.object.isRequired } const NavigationButtons = ({ currentStep, totalSteps, handlePrev, handleNext }) => { @@ -215,27 +215,27 @@ const NavigationButtons = ({ currentStep, totalSteps, handlePrev, handleNext }) - )) - )} + 暂无通知 +
+ ) + : ( + notifications.slice(0, MAX_ITEMS).map((item) => ( + + )) + )}
- - - @@ -176,56 +178,58 @@ const NotificationDropdown = ({ iconColor, variant = 'inline', buttonStyle, ghos const openDrawer = () => setPopVisible(true) const iconNode = ( - + ) const triggerNode = - variant === 'button' ? ( - - ) : ( - - ) + variant === 'button' + ? ( + + ) + : ( + + ) return ( <> {triggerNode} setPopVisible(false)} open={popVisible} size={360} @@ -241,7 +245,7 @@ NotificationDropdown.propTypes = { iconColor: PropTypes.string, variant: PropTypes.oneOf(['inline', 'button']), buttonStyle: PropTypes.object, - ghost: PropTypes.bool, + ghost: PropTypes.bool } export default NotificationDropdown diff --git a/src/pages/error/index.jsx b/src/pages/error/index.jsx index fb2fcb2d..ca319a17 100644 --- a/src/pages/error/index.jsx +++ b/src/pages/error/index.jsx @@ -20,14 +20,14 @@ const MyError = () => {
{/* 错误边界测试 */} - + ErrorBoundary 测试页面 点击下方按钮将触发一个渲染错误。
- + 注意：在开发模式下，React 会显示红色的错误覆盖层（Error Overlay）。 你需要点击覆盖层右上角的 "X" 关闭它，才能看到 ErrorBoundary 渲染的降级 UI。 @@ -39,12 +39,12 @@ const MyError = () => { display: 'flex', justifyContent: screens.xs ? 'center' : 'flex-end', alignItems: 'center', - height: screens.xs ? 'auto' : '100%', + height: screens.xs ? 'auto' : '100%' }} > )} @@ -43,7 +45,7 @@ const ProSider = ({ children, theme = 'light' }) => { ProSider.propTypes = { children: PropTypes.node, - theme: PropTypes.string, + theme: PropTypes.string // `isMobile` 由全局 Zustand 管理，组件直接读取，不再通过 props 传入 // 侧边栏折叠状态由全局 Zustand `isSidebarOpen` 管理 } diff --git a/src/pages/portfilo/index.jsx b/src/pages/portfilo/index.jsx index 6b590d3e..9373d7e1 100644 --- a/src/pages/portfilo/index.jsx +++ b/src/pages/portfilo/index.jsx @@ -16,7 +16,7 @@ import { Divider, Tooltip, Grid, - FloatButton, + FloatButton } from 'antd' import { useStore } from '@/store' import { motion, useScroll, useSpring } from 'framer-motion' @@ -32,7 +32,7 @@ import { ToolOutlined, ArrowLeftOutlined, XOutlined, - MenuOutlined, + MenuOutlined } from '@ant-design/icons' import avatarPng from '@assets/images/w.png' @@ -54,7 +54,7 @@ const Section = ({ id, children, className = '' }) => { Section.propTypes = { id: PropTypes.string.isRequired, children: PropTypes.node.isRequired, - className: PropTypes.string, + className: PropTypes.string } const AnimatedCard = ({ children, delay = 0 }) => ( @@ -71,7 +71,7 @@ const AnimatedCard = ({ children, delay = 0 }) => ( AnimatedCard.propTypes = { children: PropTypes.node.isRequired, - delay: PropTypes.number, + delay: PropTypes.number } const MyPortfilo = () => { @@ -84,7 +84,7 @@ const MyPortfilo = () => { const scaleX = useSpring(scrollYProgress, { stiffness: 100, damping: 30, - restDelta: 0.001, + restDelta: 0.001 }) const [targetOffset, setTargetOffset] = useState(80) @@ -98,33 +98,33 @@ const MyPortfilo = () => { { key: 'home', href: '#home', - title: Home, + title: Home }, { key: 'about', href: '#about', - title: About, + title: About }, { key: 'skills', href: '#skills', - title: Skills, + title: Skills }, { key: 'projects', href: '#projects', - title: Work, + title: Work }, { key: 'experience', href: '#experience', - title: Exp, + title: Exp }, { key: 'contact', href: '#contact', - title: Contact, - }, + title: Contact + } ] const handleAnchorClick = (e, link) => { @@ -147,7 +147,7 @@ const MyPortfilo = () => { { name: 'Tailwind CSS', color: '#38B2AC' }, { name: 'Next.js', color: '#000000' }, { name: 'GraphQL', color: '#E10098' }, - { name: 'Docker', color: '#2496ED' }, + { name: 'Docker', color: '#2496ED' } ] const projects = [ @@ -155,20 +155,20 @@ const MyPortfilo = () => { title: 'Pro React Admin', desc: 'A comprehensive enterprise-level admin dashboard template based on React, Ant Design, and Vite.', tags: ['React', 'Ant Design', 'Vite'], - icon: , + icon: }, { title: 'E-Commerce Platform', desc: 'A full-stack e-commerce solution with real-time inventory management and payment integration.', tags: ['Next.js', 'Node.js', 'Stripe'], - icon: , + icon: }, { title: 'Data Visualization Dashboard', desc: 'Interactive dashboard for visualizing complex datasets using and ECharts.', tags: ['Vue', 'ECharts'], - icon: , - }, + icon: + } ] const experiences = [ @@ -176,25 +176,25 @@ const MyPortfilo = () => { year: '2023 - Present', title: 'Senior Frontend Engineer', company: 'Tech Corp', - desc: 'Leading the frontend team, architecting scalable solutions, and mentoring junior developers.', + desc: 'Leading the frontend team, architecting scalable solutions, and mentoring junior developers.' }, { year: '2021 - 2023', title: 'Full Stack Developer', company: 'StartUp Inc', - desc: 'Developed and maintained multiple web applications using React and Node.js.', + desc: 'Developed and maintained multiple web applications using React and Node.js.' }, { year: '2019 - 2021', title: 'Frontend Developer', company: 'Web Solutions', - desc: 'Collaborated with designers to implement responsive and accessible user interfaces.', - }, + desc: 'Collaborated with designers to implement responsive and accessible user interfaces.' + } ] return (
{ ? `radial-gradient(circle at 50% 50%, ${token.colorPrimaryBg} 0%, transparent 50%), radial-gradient(circle at 0% 0%, ${token.colorFill} 0%, transparent 30%), radial-gradient(circle at 100% 100%, ${token.colorFill} 0%, transparent 30%)` : `radial-gradient(circle at 50% 50%, ${token.colorPrimaryBg} 0%, transparent 60%), radial-gradient(circle at 100% 0%, ${token.colorFill} 0%, transparent 40%)`, backgroundAttachment: 'fixed', - backgroundSize: 'cover', + backgroundSize: 'cover' }} > {/* Floating Shapes Background */} @@ -222,19 +222,19 @@ const MyPortfilo = () => { height: '100%', overflow: 'hidden', pointerEvents: 'none', - zIndex: 0, + zIndex: 0 }} > { borderRadius: '50%', background: token.colorPrimary, filter: 'blur(100px)', - opacity: 0.1, + opacity: 0.1 }} /> { borderRadius: '50%', background: token.colorSuccess, filter: 'blur(120px)', - opacity: 0.08, + opacity: 0.08 }} />
@@ -283,7 +283,7 @@ const MyPortfilo = () => { height: 4, background: token.colorPrimary, transformOrigin: '0%', - zIndex: 1000, + zIndex: 1000 }} /> @@ -296,13 +296,13 @@ const MyPortfilo = () => { position: 'fixed', top: 24, left: 24, - zIndex: 100, + zIndex: 100 }} > - +
} actions={[ - , - , - , + , + , + ]} > { {/* Experience Section */} -
- +
+ Experience
({ title: (
- {exp.year} + {exp.year}
), content: ( - + {exp.title} - {exp.company} + {exp.company} {exp.desc} ), - color: token.colorPrimary, + color: token.colorPrimary }))} />
{/* Contact Section */} -
+
{ I'm currently open to new opportunities and collaborations. Whether you have a question or just want to say hi, feel free to reach out! - - - - diff --git a/src/pages/privacy/index.jsx b/src/pages/privacy/index.jsx index 4444f7da..89e46263 100644 --- a/src/pages/privacy/index.jsx +++ b/src/pages/privacy/index.jsx @@ -22,29 +22,29 @@ const Privacy = () => { '--legal-text-2': token.colorTextSecondary, '--legal-primary': token.colorPrimary, '--legal-primary-2': token.colorInfo, - '--legal-shadow': token.boxShadowSecondary, + '--legal-shadow': token.boxShadowSecondary } return ( -