必要的全局样式src/index.cssimporttailwindcss;/* 当根元素有 classdark 时 → 激活 dark: 样式用于在页面上切换主题为暗黑模式 */custom-variantdark(:where(.dark,.dark*));theme{/* 主配色 */--color-apple-light:#f5f5f7;--color-apple-dark:#1d1d1f;/* 标准色 */--color-apple-black:#000000;--color-apple-white:#ffffff;/* 品牌配色 */--color-apple-blue:#0071e3;--color-apple-red:#b64400;/* 灰阶系统Gray Scale */--color-apple-gray-100:#f5f5f7;--color-apple-gray-200:#d2d2d7;--color-apple-gray-300:#86868b;--color-apple-gray-800:#424245;--color-apple-gray-900:#1d1d1f;/* 字体 */--font-sans:Inter,Roboto,Open Sans,Helvetica Neue,sans-serif;--font-display:Poppins,Inter,sans-serif;--font-text:Source Sans Pro,Open Sans,sans-serif;/* 文字颜色*/--color-apple-text-light:#1d1d1f;--color-apple-text-dark:#f5f5f7;/* 阴影 */--shadow-apple-sm:01px3pxrgba(0,0,0,0.1);--shadow-apple-md:04px12pxrgba(0,0,0,0.08);--shadow-apple-lg:08px24pxrgba(0,0,0,0.06);}body{margin:0;font-family:var(--font-sans);font-weight:400;line-height:1.5;letter-spacing:0.01em;color:var(--color-apple-text-light);background-color:var(--color-apple-light);}按钮src/components/Button.tsxexport interface ButtonProps{title?:React.ReactNode;variant?:primary|outline;disabled?:boolean;onClick?:()void;}constButton({title,variantprimary,disabledfalse,onClick,}:ButtonProps){let classNamepx-5py-2rounded-md border transition-colors duration-200inline-flex items-center justify-center gap-2;if(variantprimary){className bg-apple-blue text-white border-apple-blue hover:bg-apple-blue/90;}elseif(variantoutline){className bg-transparent text-apple-blue border-apple-blue hover:bg-apple-blue hover:text-white;}if(disabled){className opacity-50 cursor-not-allowed pointer-events-none;}return(button className{className}disabled{disabled}onClick{onClick}{title}/button);};exportdefaultButton;使用Button title购买variantoutline/图标按钮src/components/IconButton.tsximport Button,{type ButtonProps}from./Button.tsx;export interface IconButtonProps extends ButtonProps{icon:React.ReactNode;ioconPosition?:left|right;}constIconButton({icon,ioconPositionleft,title,...rest}:IconButtonProps){return(Button title{span classNameflex items-center gap-2{ioconPositionlefticon}span{title}/span{ioconPositionrighticon}/span}{...rest}/);};exportdefaultIconButton;使用import IconButton from./IconButton.tsx;import{MdOutlineNavigateNext}fromreact-icons/md;IconButton icon{MdOutlineNavigateNext/}ioconPositionrighttitle进一步了解variantprimary/