You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

1 lines
65 KiB

<!doctypehtml><html lang=zh-CN><meta charset=UTF-8><meta content=width=device-width name=viewport><meta media="(prefers-color-scheme: light)" content=#222 name=theme-color><meta media="(prefers-color-scheme: dark)" content=#222 name=theme-color><meta content="Hexo 7.3.0" name=generator><link href=https://cdnjs.cloudflare.com rel=preconnect><link href=/images/apple-touch-icon-next.png rel=apple-touch-icon sizes=180x180><link href=/images/favicon-32x32-next.png rel=icon sizes=32x32 type=image/png><link href=/images/favicon-16x16-next.png rel=icon sizes=16x16 type=image/png><link color=#222 href=/images/logo.svg rel=mask-icon><meta content=2X6S9P7CAjXjVvw8YyQR8pCu-B0oEu7O9quLgxXuWyA name=google-site-verification><meta content=dV8JGNzi0c name=baidu-site-verification><script>!function(){var t=!1;function e(){var e;t||(t=!0,(e=document.createElement("script")).setAttribute("data-ad-client","ca-pub-7480618470784058"),e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",document.head.appendChild(e))}function a(){"requestIdleCallback"in window?window.requestIdleCallback(e,{timeout:5e3}):window.setTimeout(e,5e3)}"complete"===document.readyState?a():window.addEventListener("load",a,{once:!0})}()</script><link href=/css/main.css rel=stylesheet><link crossorigin=anonymous href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css integrity=sha256-VHqXKFhhMxcpubYf9xiWdCiojEbY9NexQ4jh8AxbvcM= rel=stylesheet><link crossorigin=anonymous href=https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/6.1.14/fancybox/fancybox.css integrity=sha256-mdaMxrItEW6hMIVJJNPKuX0B7KCSJQVEv3mVY4N2we4= rel=stylesheet><script class=next-config data-name=main type=application/json>{"hostname":"nicksxs.me","root":"/","images":"/images","scheme":"Pisces","darkmode":true,"version":"8.29.0","exturl":false,"sidebar":{"position":"left","width_expanded":320,"width_dual_column":240,"display":"post","padding":18,"offset":12},"hljswrap":true,"codeblock":{"theme":{"light":"default","dark":"stackoverflow-dark"},"prism":{"light":"prism","dark":"prism-dark"},"copy_button":{"enable":true,"style":"default"},"fold":{"enable":false,"height":500},"language":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":true,"nav":null},"stickytabs":false,"motion":{"enable":false,"async":false,"duration":200,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果:${query}","hits_time":"找到 ${hits} 个搜索结果(用时 ${time} 毫秒)","hits":"找到 ${hits} 个搜索结果"},"algolia":{"appID":"663Q99OQQD","apiKey":"e461a1371d12cec1491c1153b288a9ed","indexName":"nicksxs","hits":{"per_page":10}}}</script><script defer src=/js/config.js></script><meta content="上次是文字型的,这次我们来写点代码试试,看看效果怎么样 首先肯定是比较简单的尝试开始 写一个todo应用,主要是看能不能零改动就跑起来 用最简单的提示词 然后就给出了代码" name=description><meta content=article property=og:type><meta content=用gpt-oss零改动实现一个todo应用 property=og:title><meta content=https://nicksxs.me/2025/09/07/%E7%94%A8gpt-oss%E9%9B%B6%E6%94%B9%E5%8A%A8%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAtodo%E5%BA%94%E7%94%A8/index.html property=og:url><meta content="Nicksxs's Blog" property=og:site_name><meta content="上次是文字型的,这次我们来写点代码试试,看看效果怎么样 首先肯定是比较简单的尝试开始 写一个todo应用,主要是看能不能零改动就跑起来 用最简单的提示词 然后就给出了代码" property=og:description><meta content=zh_CN property=og:locale><meta content=https://img.nicksxs.me/gpt-oss-todo.png property=og:image><meta content=2025-09-07T10:55:20.000Z property=article:published_time><meta content=2025-09-07T10:55:20.000Z property=article:modified_time><meta content=Nicksxs property=article:author><meta content=LLM property=article:tag><meta content=summary name=twitter:card><meta content=https://img.nicksxs.me/gpt-oss-todo.png name=twitter:image><link href=https://nicksxs.me/2025/09/07/%E7%94%A8gpt-oss%E9%9B%B6%E6%94%B9%E5%8A%A8%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAtodo%E5%BA%94%E7%94%A8/ rel=canonical><script class=next-config data-name=page type=application/json>{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://nicksxs.me/2025/09/07/%E7%94%A8gpt-oss%E9%9B%B6%E6%94%B9%E5%8A%A8%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAtodo%E5%BA%94%E7%94%A8/","path":"2025/09/07/用gpt-oss零改动实现一个todo应用/","title":"用gpt-oss零改动实现一个todo应用"}</script><script class=next-config data-name=calendar type=application/json>""</script><title>用gpt-oss零改动实现一个todo应用 | Nicksxs's Blog</title><script async src=https://www.googletagmanager.com/gtag/js?id=UA-61358619-1></script><script class=next-config data-name=google_analytics type=application/json>{"tracking_id":"UA-61358619-1","only_pageview":false,"measure_protocol_api_secret":null}</script><script defer src=/js/third-party/analytics/google-analytics.js></script><script defer src=/js/third-party/analytics/baidu-analytics.js></script><script async src=https://hm.baidu.com/hm.js?20f33b3c0c0eff9b1522999c0015646d></script><script crossorigin=anonymous defer integrity=sha256-QnJV4HT5r8i89ovZGRD86iynZqHerEbT2xt69vDM36I= src=https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/6.1.14/fancybox/fancybox.umd.js></script><script defer src=/js/utils.js></script><script defer src=/js/sidebar.js></script><script defer src=/js/next-boot.js></script><script data-algolia-integrity=sha256-o49zoHLDPBm9WLg6AiliAVi3axCRTqe3ltTxLvhzAVg= data-algolia-src=https://cdnjs.cloudflare.com/ajax/libs/algoliasearch/5.36.0/lite/builds/browser.umd.js data-search-src=/js/third-party/search/algolia-search.js src=/js/third-party/search/algolia-search-loader.js></script><script defer src=/js/third-party/fancybox.js></script><noscript><link href=/css/noscript.css rel=stylesheet></noscript><link title="Nicksxs's Blog" href=/atom.xml rel=alternate type=application/atom+xml><body itemscope itemtype=http://schema.org/WebPage><div class=headband></div><main class=main><div class=column><header class=header itemscope itemtype=http://schema.org/WPHeader><div class=site-brand-container><div class=site-nav-toggle><div aria-label=切换导航栏 class=toggle role=button><span class=toggle-line></span><span class=toggle-line></span><span class=toggle-line></span></div></div><div class=site-meta><a class=brand href=/ rel=start><i class=logo-line></i><p class=site-title>Nicksxs's Blog</p><i class=logo-line></i></a><p class=site-subtitle itemprop=description>Java 运行时、生产诊断与 AI 工程实践</div><div class=site-nav-right><div class="toggle popup-trigger" aria-label=搜索 role=button><i class="fa fa-search fa-fw fa-lg"></i></div></div></div><nav class=site-nav><ul class="main-menu menu"><li class="menu-item menu-item-home"><a href=/ rel=section><i class="fa fa-home fa-fw"></i>首页</a><li class="menu-item menu-item-专题"><a href=/topics/ rel=section><i class="fa fa-layer-group fa-fw"></i>专题</a><li class="menu-item menu-item-工具"><a href=/tools/ rel=section><i class="fa fa-toolbox fa-fw"></i>工具</a><li class="menu-item menu-item-about"><a href=/about/ rel=section><i class="fa fa-user fa-fw"></i>关于我</a><li class="menu-item menu-item-tags"><a href=/tags/ rel=section><i class="fa fa-tags fa-fw"></i>标签</a><li class="menu-item menu-item-categories"><a href=/categories/ rel=section><i class="fa fa-th fa-fw"></i>分类</a><li class="menu-item menu-item-archives"><a href=/archives/ rel=section><i class="fa fa-archive fa-fw"></i>归档</a><li class="menu-item menu-item-search"><a class=popup-trigger role=button><i class="fa fa-search fa-fw"></i>搜索</a></ul></nav><div class=search-pop-overlay><div class="popup search-popup"><div class=search-header><span class=search-icon><i class="fa fa-search"></i></span><div class=search-input-container><input autocapitalize=off autocomplete=off class=search-input maxlength=80 placeholder=搜索... spellcheck=false type=search></div><span class=popup-btn-close role=button><i class="fa fa-times-circle"></i></span></div><div class=search-result-container><div class=search-result-icon><i class="fab fa-algolia fa-5x"></i></div></div></div></div></header><aside class=sidebar><div class="sidebar-inner sidebar-nav-active sidebar-toc-active"><ul class=sidebar-nav><li class=sidebar-nav-toc>文章目录<li class=sidebar-nav-overview>站点概览</ul><div class=sidebar-panel-container><div class="post-toc-wrap sidebar-panel"><div class="post-toc animated"><ol class=nav><li class="nav-item nav-level-2"><a class=nav-link href=#%E4%B8%8A%E6%AC%A1%E6%98%AF%E6%96%87%E5%AD%97%E5%9E%8B%E7%9A%84%EF%BC%8C%E8%BF%99%E6%AC%A1%E6%88%91%E4%BB%AC%E6%9D%A5%E5%86%99%E7%82%B9%E4%BB%A3%E7%A0%81%E8%AF%95%E8%AF%95%EF%BC%8C%E7%9C%8B%E7%9C%8B%E6%95%88%E6%9E%9C%E6%80%8E%E4%B9%88%E6%A0%B7%E9%A6%96%E5%85%88%E8%82%AF%E5%AE%9A%E6%98%AF%E6%AF%94%E8%BE%83%E7%AE%80%E5%8D%95%E7%9A%84%E5%B0%9D%E8%AF%95%E5%BC%80%E5%A7%8B%E5%86%99%E4%B8%80%E4%B8%AAtodo%E5%BA%94%E7%94%A8%EF%BC%8C%E4%B8%BB%E8%A6%81%E6%98%AF%E7%9C%8B%E8%83%BD%E4%B8%8D%E8%83%BD%E9%9B%B6%E6%94%B9%E5%8A%A8%E5%B0%B1%E8%B7%91%E8%B5%B7%E6%9D%A5%E7%94%A8%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%8F%90%E7%A4%BA%E8%AF%8D%E7%84%B6%E5%90%8E%E5%B0%B1%E7%BB%99%E5%87%BA%E4%BA%86%E4%BB%A3%E7%A0%81><span class=nav-number>1.</span> <span class=nav-text>上次是文字型的,这次我们来写点代码试试,看看效果怎么样首先肯定是比较简单的尝试开始写一个todo应用,主要是看能不能零改动就跑起来用最简单的提示词1帮我写一个todo应用,基于react然后就给出了代码</span></a><li class="nav-item nav-level-2"><a class=nav-link href=#1%EF%B8%8F%E2%83%A3-src-main-jsx><span class=nav-number>2.</span> <span class=nav-text>1️⃣ src/main.jsx</span></a><li class="nav-item nav-level-2"><a class=nav-link href=#2%EF%B8%8F%E2%83%A3-src-App-jsx><span class=nav-number>3.</span> <span class=nav-text>2️⃣ src/App.jsx</span></a><li class="nav-item nav-level-2"><a class=nav-link href=#3%EF%B8%8F%E2%83%A3-src-components-TodoInput-jsx><span class=nav-number>4.</span> <span class=nav-text>3️⃣ src/components/TodoInput.jsx</span></a><li class="nav-item nav-level-2"><a class=nav-link href=#4%EF%B8%8F%E2%83%A3-src-components-TodoItem-jsx><span class=nav-number>5.</span> <span class=nav-text>4️⃣ src/components/TodoItem.jsx</span></a><li class="nav-item nav-level-2"><a class=nav-link href=#5%EF%B8%8F%E2%83%A3-src-components-TodoList-jsx><span class=nav-number>6.</span> <span class=nav-text>5️⃣ src/components/TodoList.jsx</span></a><li class="nav-item nav-level-2"><a class=nav-link href=#6%EF%B8%8F%E2%83%A3-src-index-css%EF%BC%88%E5%8F%AF%E9%80%89%EF%BC%8C%E7%AE%80%E5%8D%95%E5%85%A8%E5%B1%80%E6%A0%B7%E5%BC%8F%EF%BC%89><span class=nav-number>7.</span> <span class=nav-text>6️⃣ src/index.css(可选,简单全局样式)</span></a><li class="nav-item nav-level-2"><a class=nav-link href=#7%EF%B8%8F%E2%83%A3-src-App-css><span class=nav-number>8.</span> <span class=nav-text>7️⃣ src/App.css</span></a><li class="nav-item nav-level-2"><a class=nav-link href=#8%EF%B8%8F%E2%83%A3-src-components-TodoInput-css><span class=nav-number>9.</span> <span class=nav-text>8️⃣ src/components/TodoInput.css</span></a><li class="nav-item nav-level-2"><a class=nav-link href=#9%EF%B8%8F%E2%83%A3-src-components-TodoList-css><span class=nav-number>10.</span> <span class=nav-text>9️⃣ src/components/TodoList.css</span></a><li class="nav-item nav-level-2"><a class=nav-link href=#%F0%9F%94%9F-src-components-TodoItem-css><span class=nav-number>11.</span> <span class=nav-text>🔟 src/components/TodoItem.css</span></a><li class="nav-item nav-level-2"><a class=nav-link href=#%F0%9F%8E%89-%E8%BF%90%E8%A1%8C%E3%80%81%E6%89%93%E5%8C%85><span class=nav-number>12.</span> <span class=nav-text>🎉 运行、打包</span></a><li class="nav-item nav-level-2"><a class=nav-link href=#%F0%9F%9A%80-%E5%B0%8F%E8%B4%B4%E5%A3%AB><span class=nav-number>13.</span> <span class=nav-text>🚀 小贴士</span></a></ol></div></div><div class="site-overview-wrap sidebar-panel"><div class="site-author animated" itemprop=author itemscope itemtype=http://schema.org/Person><img alt=Nicksxs class=site-author-image itemprop=image src=/uploads/avatar.jpg><p class=site-author-name itemprop=name>Nicksxs<div class=site-description itemprop=description>Nicksxs 的技术博客,深入 Java 运行时与生产诊断、低成本大模型推理和 Agent 工程实践。</div></div><div class="site-state-wrap animated"><nav class=site-state><div class="site-state-item site-state-posts"><a href=/archives/><span class=site-state-item-count>394</span> <span class=site-state-item-name>日志</span></a></div><div class="site-state-item site-state-categories"><a href=/categories/><span class=site-state-item-count>181</span> <span class=site-state-item-name>分类</span></a></div><div class="site-state-item site-state-tags"><a href=/tags/><span class=site-state-item-count>347</span> <span class=site-state-item-name>标签</span></a></div></nav></div><div class="links-of-author animated"><span class=links-of-author-item><a rel="noopener me" title="GitHub → https://github.com/nicksxs" href=https://github.com/nicksxs target=_blank><i class="fab fa-github fa-fw"></i>GitHub</a> </span><span class=links-of-author-item><a rel="noopener me" title="E-Mail → mailto:nicksxs1202@gmail.com" href=mailto:nicksxs1202@gmail.com target=_blank><i class="fa fa-envelope fa-fw"></i>E-Mail</a></span></div><div class="cc-license animated" itemprop=license><a class=cc-opacity href=https://creativecommons.org/licenses/by-nc-sa/4.0/ rel=noopener target=_blank><img alt="Creative Commons" src=https://cdnjs.cloudflare.com/ajax/libs/creativecommons-vocabulary/2020.11.3/assets/license_badges/small/by_nc_sa.svg></a></div><div class="widget-wrap sidebar-tag-cloud"><div class=tag-cloud-tags><a class=tag-cloud-10 href=/tags/Java/ style=font-size:16px>Java</a><a class=tag-cloud-9 href=/tags/leetcode/ style=font-size:15.62px>leetcode</a><a class=tag-cloud-8 href=/tags/LLM/ style=font-size:15.23px>LLM</a><a class=tag-cloud-8 href=/tags/%E7%94%9F%E6%B4%BB/ style=font-size:14.85px>生活</a><a class=tag-cloud-7 href=/tags/%E9%A2%98%E8%A7%A3/ style=font-size:14.46px>题解</a><a class=tag-cloud-6 href=/tags/SpringBoot/ style=font-size:14.08px>SpringBoot</a><a class=tag-cloud-6 href=/tags/MySQL/ style=font-size:14.08px>MySQL</a><a class=tag-cloud-5 href=/tags/C/ style=font-size:13.69px>C++</a><a class=tag-cloud-5 href=/tags/Redis/ style=font-size:13.31px>Redis</a><a class=tag-cloud-4 href=/tags/Tomcat/ style=font-size:12.92px>Tomcat</a><a class=tag-cloud-4 href=/tags/Mybatis/ style=font-size:12.92px>Mybatis</a><a class=tag-cloud-3 href=/tags/%E5%B0%8F%E6%8A%80%E5%B7%A7/ style=font-size:12.54px>小技巧</a><a class=tag-cloud-2 href=/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/ style=font-size:12.15px>数据结构</a><a class=tag-cloud-2 href=/tags/%E6%BA%90%E7%A0%81/ style=font-size:12.15px>源码</a><a class=tag-cloud-2 href=/tags/MQ/ style=font-size:11.77px>MQ</a><a class=tag-cloud-2 href=/tags/%E6%B6%88%E6%81%AF%E9%98%9F%E5%88%97/ style=font-size:11.77px>消息队列</a><a class=tag-cloud-2 href=/tags/RocketMQ/ style=font-size:11.77px>RocketMQ</a><a class=tag-cloud-2 href=/tags/%E8%BF%90%E5%8A%A8/ style=font-size:11.77px>运动</a><a class=tag-cloud-1 href=/tags/php/ style=font-size:11.38px>php</a><a class=tag-cloud-0 href=/tags/Spring/ style=font-size:11px>Spring</a><a class=tag-cloud-0 href=/tags/linux/ style=font-size:11px>linux</a><a class=tag-cloud-0 href=/tags/Docker/ style=font-size:11px>Docker</a><a class=tag-cloud-0 href=/tags/%E5%87%8F%E8%82%A5/ style=font-size:11px>减肥</a><a class=tag-cloud-0 href=/tags/%E8%B7%91%E6%AD%A5/ style=font-size:11px>跑步</a></div></div><div class="affiliate-creative affiliate-creative--sidebar" data-affiliate-id=tencent-cloud-server><a rel="sponsored noopener" aria-label=腾讯云服务器优惠 href=https://cloud.tencent.com/act/cps/redirect?redirect=6544&cps_key=2e33a1eedb380997d03618b4a5ba6ca7&from=console target=_blank><img alt="腾讯云 AI 焕新云服务器优惠" decoding=async height=241 loading=lazy src=/uploads/affiliate/tencent-cloud-server.webp width=690> </a><span class=affiliate-disclosure>推广</span></div></div></div></div><div class="sidebar-inner sidebar-blogroll"><div class="links-of-blogroll animated"><div class=links-of-blogroll-title><i class="fa fa-globe fa-fw"></i> 链接</div><ul class=links-of-blogroll-list><li class=links-of-blogroll-item><a href=https://covermusic.cn/ rel=noopener target=_blank title=https://covermusic.cn>69伙伴</a></ul></div></div></aside></div><div class="main-inner post posts-expand"><div class=post-block><article class=post-content itemscope itemtype=http://schema.org/Article lang=zh-CN><link href=https://nicksxs.me/2025/09/07/%E7%94%A8gpt-oss%E9%9B%B6%E6%94%B9%E5%8A%A8%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAtodo%E5%BA%94%E7%94%A8/ itemprop=mainEntityOfPage><span hidden itemprop=author itemscope itemtype=http://schema.org/Person><meta content=/uploads/avatar.jpg itemprop=image><meta content=Nicksxs itemprop=name></span><span hidden itemprop=publisher itemscope itemtype=http://schema.org/Organization><meta content="Nicksxs's Blog" itemprop=name><meta content="Nicksxs 的技术博客,深入 Java 运行时与生产诊断、低成本大模型推理和 Agent 工程实践。" itemprop=description></span><span hidden itemprop=post itemscope itemtype=http://schema.org/CreativeWork><meta content="用gpt-oss零改动实现一个todo应用 | Nicksxs's Blog" itemprop=name><meta content="上次是文字型的,这次我们来写点代码试试,看看效果怎么样 首先肯定是比较简单的尝试开始 写一个todo应用,主要是看能不能零改动就跑起来 用最简单的提示词 然后就给出了代码" itemprop=description></span><header class=post-header><h1 itemprop="name headline" class=post-title>用gpt-oss零改动实现一个todo应用</h1><div class=post-meta-container><div class=post-meta><span class=post-meta-item><span class=post-meta-item-icon><i class="far fa-calendar"></i> </span><span class=post-meta-item-text>发表于</span> <time itemprop="dateCreated datePublished" title="创建时间:2025-09-07 18:55:20" datetime=2025-09-07T18:55:20+08:00>2025-09-07</time> </span><span class=post-meta-item><span class=post-meta-item-icon><i class="far fa-folder"></i> </span><span class=post-meta-item-text>分类于</span> <span itemprop=about itemscope itemtype=http://schema.org/Thing><a href=/categories/LLM/ itemprop=url rel=index><span itemprop=name>LLM</span></a> </span></span><span class="post-meta-item cloudflare-page-counter" data-increment=true data-path=/2025/09/07/%E7%94%A8gpt-oss%E9%9B%B6%E6%94%B9%E5%8A%A8%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAtodo%E5%BA%94%E7%94%A8/ data-title=用gpt-oss零改动实现一个todo应用 title=阅读次数><span class=post-meta-item-icon><i class="far fa-eye"></i> </span><span class=post-meta-item-text>阅读次数:</span> <span class=cloudflare-page-counter-count></span></span></div><div class=post-description>上次是文字型的,这次我们来写点代码试试,看看效果怎么样 首先肯定是比较简单的尝试开始 写一个todo应用,主要是看能不能零改动就跑起来 用最简单的提示词 然后就给出了代码</div></div></header><div class=post-body itemprop=articleBody><h2 id=上次是文字型的,这次我们来写点代码试试,看看效果怎么样首先肯定是比较简单的尝试开始写一个todo应用,主要是看能不能零改动就跑起来用最简单的提示词然后就给出了代码><a class=headerlink href=#上次是文字型的,这次我们来写点代码试试,看看效果怎么样首先肯定是比较简单的尝试开始写一个todo应用,主要是看能不能零改动就跑起来用最简单的提示词然后就给出了代码 title=上次是文字型的,这次我们来写点代码试试,看看效果怎么样首先肯定是比较简单的尝试开始写一个todo应用,主要是看能不能零改动就跑起来用最简单的提示词然后就给出了代码></a>上次是文字型的,这次我们来写点代码试试,看看效果怎么样<br>首先肯定是比较简单的尝试开始<br>写一个todo应用,主要是看能不能零改动就跑起来<br>用最简单的提示词<br><figure class="highlight plaintext"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line>帮我写一个todo应用,基于react</span><br></pre></table></figure><br>然后就给出了代码</h2><p>下面给你一个 <strong>最小可运行</strong> 的 Todo 应用示例,基于 <strong>React + Vite</strong>(如果你习惯 <code>create-react-app</code>,思路几乎完全一样,只是文件夹结构略有差异)。<br>应用包含:<table><thead><tr><th>组件<th>作用<tbody><tr><td><code>TodoInput</code><td>新增条目输入框<tr><td><code>TodoItem</code><td>单个待办项(支持完成/取消、删除)<tr><td><code>TodoList</code><td>渲染 Todo 列表<tr><td><code>TodoApp</code>/<code>App</code><td>主容器,维护全局 <code>todos</code> 状态</table><blockquote><p><strong>安装依赖</strong><figure class="highlight plaintext"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br></pre><td class=code><pre><span class=line>npm create vite@latest todo-app --template react</span><br><span class=line>cd todo-app</span><br><span class=line>npm i</span><br><span class=line>npm run dev</span><br></pre></table></figure></blockquote><p>下面按文件展示完整代码(把对应文件替换或新建即可)。<hr><h2 id=1️⃣-src-main-jsx><a title="1️⃣ src/main.jsx" class=headerlink href=#1️⃣-src-main-jsx></a>1️⃣ <code>src/main.jsx</code></h2><figure class="highlight jsx"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br></pre><td class=code><pre><span class=line><span class=keyword>import</span> <span class="title class_">React</span> <span class=keyword>from</span> <span class=string>"react"</span>;</span><br><span class=line><span class=keyword>import</span> { createRoot } <span class=keyword>from</span> <span class=string>"react-dom/client"</span>;</span><br><span class=line><span class=keyword>import</span> <span class="title class_">App</span> <span class=keyword>from</span> <span class=string>"./App"</span>;</span><br><span class=line><span class=keyword>import</span> <span class=string>"./index.css"</span>;</span><br><span class=line></span><br><span class=line><span class="title function_">createRoot</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class=string>"root"</span>)).<span class="title function_">render</span>(<span class=language-xml><span class=tag><<span class=name>App</span> /></span></span>);</span><br></pre></table></figure><hr><h2 id=2️⃣-src-App-jsx><a title="2️⃣ src/App.jsx" class=headerlink href=#2️⃣-src-App-jsx></a>2️⃣ <code>src/App.jsx</code></h2><figure class="highlight jsx"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br><span class=line>15</span><br><span class=line>16</span><br><span class=line>17</span><br><span class=line>18</span><br><span class=line>19</span><br><span class=line>20</span><br><span class=line>21</span><br><span class=line>22</span><br><span class=line>23</span><br><span class=line>24</span><br><span class=line>25</span><br><span class=line>26</span><br><span class=line>27</span><br><span class=line>28</span><br><span class=line>29</span><br><span class=line>30</span><br><span class=line>31</span><br><span class=line>32</span><br><span class=line>33</span><br><span class=line>34</span><br><span class=line>35</span><br><span class=line>36</span><br><span class=line>37</span><br><span class=line>38</span><br><span class=line>39</span><br><span class=line>40</span><br><span class=line>41</span><br><span class=line>42</span><br><span class=line>43</span><br><span class=line>44</span><br><span class=line>45</span><br><span class=line>46</span><br><span class=line>47</span><br><span class=line>48</span><br><span class=line>49</span><br><span class=line>50</span><br><span class=line>51</span><br><span class=line>52</span><br><span class=line>53</span><br><span class=line>54</span><br><span class=line>55</span><br><span class=line>56</span><br><span class=line>57</span><br><span class=line>58</span><br><span class=line>59</span><br><span class=line>60</span><br><span class=line>61</span><br><span class=line>62</span><br></pre><td class=code><pre><span class=line><span class=keyword>import</span> <span class="title class_">React</span>, { useState, useEffect } <span class=keyword>from</span> <span class=string>"react"</span>;</span><br><span class=line><span class=keyword>import</span> <span class="title class_">TodoInput</span> <span class=keyword>from</span> <span class=string>"./components/TodoInput"</span>;</span><br><span class=line><span class=keyword>import</span> <span class="title class_">TodoList</span> <span class=keyword>from</span> <span class=string>"./components/TodoList"</span>;</span><br><span class=line><span class=keyword>import</span> <span class=string>"./App.css"</span>;</span><br><span class=line></span><br><span class=line><span class=comment>/**</span></span><br><span class=line><span class=comment> * 关键点:</span></span><br><span class=line><span class=comment> * 1. 用 useState 存放 todos</span></span><br><span class=line><span class=comment> * 2. 用 useEffect 做本地存储同步,仅在组件挂载时读取一次</span></span><br><span class=line><span class=comment> * 3. 处理增删改的通用方法</span></span><br><span class=line><span class=comment> */</span></span><br><span class=line><span class=keyword>function</span> <span class="title function_">App</span>(<span class=params></span>) {</span><br><span class=line> <span class=keyword>const</span> [todos, setTodos] = <span class="title function_">useState</span>([]);</span><br><span class=line></span><br><span class=line> <span class=comment>// 从 localStorage 初始化</span></span><br><span class=line> <span class="title function_">useEffect</span>(<span class=function>() =></span> {</span><br><span class=line> <span class=keyword>const</span> stored = <span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class=string>"todos"</span>);</span><br><span class=line> <span class=keyword>if</span> (stored) {</span><br><span class=line> <span class="title function_">setTodos</span>(<span class="title class_">JSON</span>.<span class="title function_">parse</span>(stored));</span><br><span class=line> }</span><br><span class=line> }, []);</span><br><span class=line></span><br><span class=line> <span class=comment>// 每次 todos 变更时同步到 localStorage</span></span><br><span class=line> <span class="title function_">useEffect</span>(<span class=function>() =></span> {</span><br><span class=line> <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class=string>"todos"</span>, <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(todos));</span><br><span class=line> }, [todos]);</span><br><span class=line></span><br><span class=line> <span class=keyword>const</span> <span class="title function_">addTodo</span> = (<span class=params>title</span>) => {</span><br><span class=line> <span class=keyword>const</span> newTodo = {</span><br><span class=line> <span class=attr>id</span>: <span class="title class_">Date</span>.<span class="title function_">now</span>(),</span><br><span class=line> title,</span><br><span class=line> <span class=attr>completed</span>: <span class=literal>false</span>,</span><br><span class=line> };</span><br><span class=line> <span class="title function_">setTodos</span>([newTodo, ...todos]);</span><br><span class=line> };</span><br><span class=line></span><br><span class=line> <span class=keyword>const</span> <span class="title function_">toggleComplete</span> = (<span class=params>id</span>) => {</span><br><span class=line> <span class="title function_">setTodos</span>(<span class=function>(<span class=params>prev</span>) =></span></span><br><span class=line> prev.<span class="title function_">map</span>(<span class=function>(<span class=params>t</span>) =></span></span><br><span class=line> t.<span class=property>id</span> === id ? { ...t, <span class=attr>completed</span>: !t.<span class=property>completed</span> } : t</span><br><span class=line> )</span><br><span class=line> );</span><br><span class=line> };</span><br><span class=line></span><br><span class=line> <span class=keyword>const</span> <span class="title function_">deleteTodo</span> = (<span class=params>id</span>) => {</span><br><span class=line> <span class="title function_">setTodos</span>(<span class=function>(<span class=params>prev</span>) =></span> prev.<span class="title function_">filter</span>(<span class=function>(<span class=params>t</span>) =></span> t.<span class=property>id</span> !== id));</span><br><span class=line> };</span><br><span class=line></span><br><span class=line> <span class=keyword>return</span> (</span><br><span class=line> <span class=language-xml><span class=tag><<span class=name>div</span> <span class=attr>className</span>=<span class=string>"app-container"</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>h1</span>></span>Todo List<span class=tag>&LT/<span class=name>h1</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>TodoInput</span> <span class=attr>addTodo</span>=<span class=string>{addTodo}</span> /></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>TodoList</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>todos</span>=<span class=string>{todos}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>toggleComplete</span>=<span class=string>{toggleComplete}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>deleteTodo</span>=<span class=string>{deleteTodo}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> /></span></span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/<span class=name>div</span>></span></span></span><br><span class=line> );</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=keyword>export</span> <span class=keyword>default</span> <span class="title class_">App</span>;</span><br></pre></table></figure><hr><h2 id=3️⃣-src-components-TodoInput-jsx><a title="3️⃣ src/components/TodoInput.jsx" class=headerlink href=#3️⃣-src-components-TodoInput-jsx></a>3️⃣ <code>src/components/TodoInput.jsx</code></h2><figure class="highlight jsx"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br><span class=line>15</span><br><span class=line>16</span><br><span class=line>17</span><br><span class=line>18</span><br><span class=line>19</span><br><span class=line>20</span><br><span class=line>21</span><br><span class=line>22</span><br><span class=line>23</span><br><span class=line>24</span><br><span class=line>25</span><br><span class=line>26</span><br><span class=line>27</span><br><span class=line>28</span><br><span class=line>29</span><br></pre><td class=code><pre><span class=line><span class=keyword>import</span> <span class="title class_">React</span>, { useState } <span class=keyword>from</span> <span class=string>"react"</span>;</span><br><span class=line><span class=keyword>import</span> <span class=string>"./TodoInput.css"</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>const</span> <span class="title function_">TodoInput</span> = (<span class=params>{ addTodo }</span>) => {</span><br><span class=line> <span class=keyword>const</span> [value, setValue] = <span class="title function_">useState</span>(<span class=string>""</span>);</span><br><span class=line></span><br><span class=line> <span class=keyword>const</span> <span class="title function_">handleSubmit</span> = (<span class=params>e</span>) => {</span><br><span class=line> e.<span class="title function_">preventDefault</span>();</span><br><span class=line> <span class=keyword>const</span> trimmed = value.<span class="title function_">trim</span>();</span><br><span class=line> <span class=keyword>if</span> (trimmed) {</span><br><span class=line> <span class="title function_">addTodo</span>(trimmed);</span><br><span class=line> <span class="title function_">setValue</span>(<span class=string>""</span>);</span><br><span class=line> }</span><br><span class=line> };</span><br><span class=line></span><br><span class=line> <span class=keyword>return</span> (</span><br><span class=line> <span class=language-xml><span class=tag><<span class=name>form</span> <span class=attr>className</span>=<span class=string>"todo-input"</span> <span class=attr>onSubmit</span>=<span class=string>{handleSubmit}</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>input</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>type</span>=<span class=string>"text"</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>placeholder</span>=<span class=string>"Add a new todo..."</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>value</span>=<span class=string>{value}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>onChange</span>=<span class=string>{(e)</span> =></span> setValue(e.target.value)}</span></span><br><span class=line><span class=language-xml> /></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>button</span> <span class=attr>type</span>=<span class=string>"submit"</span>></span>Add<span class=tag>&LT/<span class=name>button</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/<span class=name>form</span>></span></span></span><br><span class=line> );</span><br><span class=line>};</span><br><span class=line></span><br><span class=line><span class=keyword>export</span> <span class=keyword>default</span> <span class="title class_">TodoInput</span>;</span><br></pre></table></figure><hr><h2 id=4️⃣-src-components-TodoItem-jsx><a title="4️⃣ src/components/TodoItem.jsx" class=headerlink href=#4️⃣-src-components-TodoItem-jsx></a>4️⃣ <code>src/components/TodoItem.jsx</code></h2><figure class="highlight jsx"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br><span class=line>15</span><br><span class=line>16</span><br><span class=line>17</span><br><span class=line>18</span><br><span class=line>19</span><br><span class=line>20</span><br><span class=line>21</span><br><span class=line>22</span><br><span class=line>23</span><br><span class=line>24</span><br></pre><td class=code><pre><span class=line><span class=keyword>import</span> <span class="title class_">React</span> <span class=keyword>from</span> <span class=string>"react"</span>;</span><br><span class=line><span class=keyword>import</span> <span class=string>"./TodoItem.css"</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>const</span> <span class="title function_">TodoItem</span> = (<span class=params>{ todo, toggleComplete, deleteTodo }</span>) => {</span><br><span class=line> <span class=keyword>return</span> (</span><br><span class=line> <span class=language-xml><span class=tag><<span class=name>div</span> <span class=attr>className</span>=<span class=string>"todo-item"</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>label</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>input</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>type</span>=<span class=string>"checkbox"</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>checked</span>=<span class=string>{todo.completed}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>onChange</span>=<span class=string>{()</span> =></span> toggleComplete(todo.id)}</span></span><br><span class=line><span class=language-xml> /></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>span</span> <span class=attr>className</span>=<span class=string>{todo.completed</span> ? "<span class=attr>completed</span>" <span class=attr>:</span> ""}></span></span></span><br><span class=line><span class=language-xml> {todo.title}</span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/<span class=name>span</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/<span class=name>label</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>button</span> <span class=attr>className</span>=<span class=string>"delete-btn"</span> <span class=attr>onClick</span>=<span class=string>{()</span> =></span> deleteTodo(todo.id)}></span></span><br><span class=line><span class=language-xml> ×</span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/<span class=name>button</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/<span class=name>div</span>></span></span></span><br><span class=line> );</span><br><span class=line>};</span><br><span class=line></span><br><span class=line><span class=keyword>export</span> <span class=keyword>default</span> <span class="title class_">TodoItem</span>;</span><br></pre></table></figure><hr><h2 id=5️⃣-src-components-TodoList-jsx><a title="5️⃣ src/components/TodoList.jsx" class=headerlink href=#5️⃣-src-components-TodoList-jsx></a>5️⃣ <code>src/components/TodoList.jsx</code></h2><figure class="highlight jsx"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br><span class=line>15</span><br><span class=line>16</span><br><span class=line>17</span><br><span class=line>18</span><br><span class=line>19</span><br><span class=line>20</span><br><span class=line>21</span><br><span class=line>22</span><br><span class=line>23</span><br><span class=line>24</span><br></pre><td class=code><pre><span class=line><span class=keyword>import</span> <span class="title class_">React</span> <span class=keyword>from</span> <span class=string>"react"</span>;</span><br><span class=line><span class=keyword>import</span> <span class="title class_">TodoItem</span> <span class=keyword>from</span> <span class=string>"./TodoItem"</span>;</span><br><span class=line><span class=keyword>import</span> <span class=string>"./TodoList.css"</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>const</span> <span class="title function_">TodoList</span> = (<span class=params>{ todos, toggleComplete, deleteTodo }</span>) => {</span><br><span class=line> <span class=keyword>if</span> (todos.<span class=property>length</span> === <span class=number>0</span>) {</span><br><span class=line> <span class=keyword>return</span> <span class=language-xml><span class=tag><<span class=name>p</span> <span class=attr>className</span>=<span class=string>"empty-msg"</span>></span>No todos yet. Add something!<span class=tag>&LT/<span class=name>p</span>></span></span>;</span><br><span class=line> }</span><br><span class=line></span><br><span class=line> <span class=keyword>return</span> (</span><br><span class=line> <span class=language-xml><span class=tag><<span class=name>div</span> <span class=attr>className</span>=<span class=string>"todo-list"</span>></span></span></span><br><span class=line><span class=language-xml> {todos.map((todo) => (</span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>TodoItem</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>key</span>=<span class=string>{todo.id}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>todo</span>=<span class=string>{todo}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>toggleComplete</span>=<span class=string>{toggleComplete}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>deleteTodo</span>=<span class=string>{deleteTodo}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> /></span></span></span><br><span class=line><span class=language-xml> ))}</span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/<span class=name>div</span>></span></span></span><br><span class=line> );</span><br><span class=line>};</span><br><span class=line></span><br><span class=line><span class=keyword>export</span> <span class=keyword>default</span> <span class="title class_">TodoList</span>;</span><br></pre></table></figure><hr><h2 id=6️⃣-src-index-css(可选,简单全局样式)><a title="6️⃣ src/index.css(可选,简单全局样式)" class=headerlink href=#6️⃣-src-index-css(可选,简单全局样式)></a>6️⃣ <code>src/index.css</code>(可选,简单全局样式)</h2><figure class="highlight css"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br></pre><td class=code><pre><span class=line><span class=comment>/* 让页面充满屏幕并居中 */</span></span><br><span class=line><span class=selector-tag>html</span>, <span class=selector-tag>body</span>, <span class=selector-id>#root</span> {</span><br><span class=line> <span class=attribute>height</span>: <span class=number>100%</span>;</span><br><span class=line> <span class=attribute>margin</span>: <span class=number>0</span>;</span><br><span class=line> <span class=attribute>font-family</span>: system-ui, sans-serif;</span><br><span class=line>}</span><br><span class=line><span class=selector-tag>body</span> {</span><br><span class=line> <span class=attribute>display</span>: flex;</span><br><span class=line> <span class=attribute>justify-content</span>: center;</span><br><span class=line> <span class=attribute>align-items</span>: flex-start;</span><br><span class=line> <span class=attribute>background</span>: <span class=number>#f5f5f5</span>;</span><br><span class=line>}</span><br></pre></table></figure><hr><h2 id=7️⃣-src-App-css><a title="7️⃣ src/App.css" class=headerlink href=#7️⃣-src-App-css></a>7️⃣ <code>src/App.css</code></h2><figure class="highlight css"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br></pre><td class=code><pre><span class=line><span class=selector-class>.app-container</span> {</span><br><span class=line> <span class=attribute>width</span>: <span class=number>90%</span>;</span><br><span class=line> <span class=attribute>max-width</span>: <span class=number>480px</span>;</span><br><span class=line> <span class=attribute>background</span>: <span class=number>#fff</span>;</span><br><span class=line> <span class=attribute>padding</span>: <span class=number>20px</span>;</span><br><span class=line> <span class=attribute>margin-top</span>: <span class=number>40px</span>;</span><br><span class=line> <span class=attribute>box-shadow</span>: <span class=number>0</span> <span class=number>2px</span> <span class=number>10px</span> <span class=built_in>rgba</span>(<span class=number>0</span>,<span class=number>0</span>,<span class=number>0</span>,<span class=number>0.1</span>);</span><br><span class=line> <span class=attribute>border-radius</span>: <span class=number>8px</span>;</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=selector-class>.app-container</span> <span class=selector-tag>h1</span> {</span><br><span class=line> <span class=attribute>text-align</span>: center;</span><br><span class=line> <span class=attribute>margin-bottom</span>: <span class=number>20px</span>;</span><br><span class=line>}</span><br></pre></table></figure><hr><h2 id=8️⃣-src-components-TodoInput-css><a title="8️⃣ src/components/TodoInput.css" class=headerlink href=#8️⃣-src-components-TodoInput-css></a>8️⃣ <code>src/components/TodoInput.css</code></h2><figure class="highlight css"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br><span class=line>15</span><br><span class=line>16</span><br><span class=line>17</span><br><span class=line>18</span><br><span class=line>19</span><br><span class=line>20</span><br><span class=line>21</span><br><span class=line>22</span><br><span class=line>23</span><br><span class=line>24</span><br></pre><td class=code><pre><span class=line><span class=selector-class>.todo-input</span> {</span><br><span class=line> <span class=attribute>display</span>: flex;</span><br><span class=line> <span class=attribute>margin-bottom</span>: <span class=number>20px</span>;</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=selector-class>.todo-input</span> <span class=selector-tag>input</span> {</span><br><span class=line> <span class=attribute>flex</span>: <span class=number>1</span>;</span><br><span class=line> <span class=attribute>padding</span>: <span class=number>8px</span> <span class=number>12px</span>;</span><br><span class=line> <span class=attribute>font-size</span>: <span class=number>16px</span>;</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=selector-class>.todo-input</span> <span class=selector-tag>button</span> {</span><br><span class=line> <span class=attribute>padding</span>: <span class=number>8px</span> <span class=number>12px</span>;</span><br><span class=line> <span class=attribute>margin-left</span>: <span class=number>8px</span>;</span><br><span class=line> <span class=attribute>font-size</span>: <span class=number>16px</span>;</span><br><span class=line> <span class=attribute>background</span>: <span class=number>#4caf50</span>;</span><br><span class=line> <span class=attribute>color</span>: <span class=number>#fff</span>;</span><br><span class=line> <span class=attribute>border</span>: none;</span><br><span class=line> <span class=attribute>cursor</span>: pointer;</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=selector-class>.todo-input</span> <span class=selector-tag>button</span><span class=selector-pseudo>:hover</span> {</span><br><span class=line> <span class=attribute>background</span>: <span class=number>#45a049</span>;</span><br><span class=line>}</span><br></pre></table></figure><hr><h2 id=9️⃣-src-components-TodoList-css><a title="9️⃣ src/components/TodoList.css" class=headerlink href=#9️⃣-src-components-TodoList-css></a>9️⃣ <code>src/components/TodoList.css</code></h2><figure class="highlight css"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br></pre><td class=code><pre><span class=line><span class=selector-class>.todo-list</span> {</span><br><span class=line> <span class=attribute>display</span>: flex;</span><br><span class=line> <span class=attribute>flex-direction</span>: column;</span><br><span class=line> <span class=attribute>gap</span>: <span class=number>8px</span>;</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=selector-class>.empty-msg</span> {</span><br><span class=line> <span class=attribute>text-align</span>: center;</span><br><span class=line> <span class=attribute>color</span>: <span class=number>#777</span>;</span><br><span class=line>}</span><br></pre></table></figure><hr><h2 id=🔟-src-components-TodoItem-css><a title="🔟 src/components/TodoItem.css" class=headerlink href=#🔟-src-components-TodoItem-css></a>🔟 <code>src/components/TodoItem.css</code></h2><figure class="highlight css"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br><span class=line>15</span><br><span class=line>16</span><br><span class=line>17</span><br><span class=line>18</span><br><span class=line>19</span><br><span class=line>20</span><br><span class=line>21</span><br><span class=line>22</span><br><span class=line>23</span><br><span class=line>24</span><br><span class=line>25</span><br><span class=line>26</span><br><span class=line>27</span><br><span class=line>28</span><br><span class=line>29</span><br><span class=line>30</span><br><span class=line>31</span><br><span class=line>32</span><br><span class=line>33</span><br><span class=line>34</span><br><span class=line>35</span><br></pre><td class=code><pre><span class=line><span class=selector-class>.todo-item</span> {</span><br><span class=line> <span class=attribute>display</span>: flex;</span><br><span class=line> <span class=attribute>align-items</span>: center;</span><br><span class=line> <span class=attribute>justify-content</span>: space-between;</span><br><span class=line> <span class=attribute>padding</span>: <span class=number>8px</span> <span class=number>12px</span>;</span><br><span class=line> <span class=attribute>background</span>: <span class=number>#fafafa</span>;</span><br><span class=line> <span class=attribute>border-radius</span>: <span class=number>4px</span>;</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=selector-class>.todo-item</span> <span class=selector-tag>label</span> {</span><br><span class=line> <span class=attribute>flex</span>: <span class=number>1</span>;</span><br><span class=line> <span class=attribute>display</span>: flex;</span><br><span class=line> <span class=attribute>align-items</span>: center;</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=selector-class>.todo-item</span> <span class=selector-tag>input</span><span class=selector-attr>[type=<span class=string>"checkbox"</span>]</span> {</span><br><span class=line> <span class=attribute>margin-right</span>: <span class=number>12px</span>;</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=selector-class>.todo-item</span> <span class=selector-class>.completed</span> {</span><br><span class=line> <span class=attribute>text-decoration</span>: line-through;</span><br><span class=line> <span class=attribute>color</span>: <span class=number>#777</span>;</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=selector-class>.delete-btn</span> {</span><br><span class=line> <span class=attribute>background</span>: transparent;</span><br><span class=line> <span class=attribute>border</span>: none;</span><br><span class=line> <span class=attribute>color</span>: <span class=number>#ff4444</span>;</span><br><span class=line> <span class=attribute>font-size</span>: <span class=number>20px</span>;</span><br><span class=line> <span class=attribute>cursor</span>: pointer;</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=selector-class>.delete-btn</span><span class=selector-pseudo>:hover</span> {</span><br><span class=line> <span class=attribute>color</span>: <span class=number>#ff0000</span>;</span><br><span class=line>}</span><br></pre></table></figure><hr><h2 id=🎉-运行、打包><a title="🎉 运行、打包" class=headerlink href=#🎉-运行、打包></a>🎉 运行、打包</h2><figure class="highlight bash"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br></pre><td class=code><pre><span class=line><span class=comment># 开发模式</span></span><br><span class=line>npm run dev</span><br><span class=line></span><br><span class=line><span class=comment># 生产构建</span></span><br><span class=line>npm run build</span><br></pre></table></figure><hr><h2 id=🚀-小贴士><a title="🚀 小贴士" class=headerlink href=#🚀-小贴士></a>🚀 小贴士</h2><ul><li><strong>本地存储</strong>:示例中使用 <code>localStorage</code> 让 Todo 在刷新后保留。生产环境可以接<br>入后端或使用 <code>IndexedDB</code> 之类的更强大存储方案。<li><strong>状态管理</strong>:若项目日后变大,可考虑引入<br><code>Redux</code>/<code>zustand</code>/<code>@tanstack/react-store</code> 等。<li><strong>类型安全</strong>:使用 <code>TypeScript</code> 可以防止类型错误;把文件后缀改成 <code>.tsx</code> 并在<br><code>package.json</code> <code>dependencies</code> 增加 <code>typescript</code> 与 <code>@types/react</code>。<li><strong>单位测试</strong>:<code>jest</code>、<code>react-testing-library</code> 能帮你保障组件逻辑正确。<li><strong>样式优化</strong>:考虑使用 <code>styled-components</code>/<code>emotion</code>/<code>tailwindcss</code> 等,让样<br>式变得更易维护。</ul><p>现在你就拥有一个完整、可直接跑起的 Todo React 应用,随时可以继续扩展功能(如过<br>滤、拖拽排序、用户登录等)。祝编码愉快 🚀!<hr><p>在本地先建个应用<figure class="highlight shell"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line>npm create vite@latest todo-app --template react</span><br></pre></table></figure><p>这里要注意下,要用vite的话要node版本在<code>20.19+</code>或者<code>22.12+</code><br>还有是需要选择js版本,而不是ts<br>运行下<figure class="highlight shell"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line>npm install</span><br></pre></table></figure><p>这里比较慢的话可以上镜像<figure class="highlight shell"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line>npm config set registry https://registry.npmmirror.com</span><br></pre></table></figure><p>接着把生成的代码都保存成文件<figure class="highlight shell"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br></pre><td class=code><pre><span class=line>├── src</span><br><span class=line>│   ├── App.css</span><br><span class=line>│   ├── App.jsx</span><br><span class=line>│   ├── assets</span><br><span class=line>│   │   └── react.svg</span><br><span class=line>│   ├── components</span><br><span class=line>│   │   ├── TodoInput.css</span><br><span class=line>│   │   ├── TodoInput.jsx</span><br><span class=line>│   │   ├── TodoItem.css</span><br><span class=line>│   │   ├── TodoItem.jsx</span><br><span class=line>│   │   ├── TodoList.css</span><br><span class=line>│   │   └── TodoList.jsx</span><br><span class=line>│   ├── index.css</span><br><span class=line>│   └── main.jsx</span><br></pre></table></figure><p>运行命令<figure class="highlight shell"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line>npm run dev</span><br></pre></table></figure><p>看到效果<br><img loading=lazy src=https://img.nicksxs.me/gpt-oss-todo.png><p>结果是真的直接可用的,为什么要测这个呢,主要原因是一个模型本地可用的探讨,我认为如果是要本地可用,至少在这些相对简单的任务上能够完成得比较好,前面那个只是个提问,并没有什么可以验证正确性的,内容还是比较多的,对于做开发的来说能辅助编程还是比较重要的,并且能够完成一些相对独立完整的任务才是比较可用的初级门槛,只是对内存压力还是比较大的</div><footer class=post-footer><div class="affiliate-creative affiliate-creative--post-end" data-affiliate-id=tencent-cloud-server><a rel="sponsored noopener" aria-label=腾讯云服务器优惠 href=https://cloud.tencent.com/act/cps/redirect?redirect=6544&cps_key=2e33a1eedb380997d03618b4a5ba6ca7&from=console target=_blank><img alt="腾讯云 AI 焕新云服务器优惠" decoding=async height=241 loading=lazy src=/uploads/affiliate/tencent-cloud-server.webp width=690> </a><span class=affiliate-disclosure>推广</span></div><div class=reward-container><div>请我一杯咖啡吧!</div><button>赞赏</button><div class=post-reward><div><img alt="Nicksxs 微信" src=https://i.loli.net/2020/01/12/NUlWanT31E8LQGx.png><span>微信</span></div><div><img alt="Nicksxs 支付宝" src=https://ooo.0o0.ooo/2016/08/17/57b421e773057.jpg><span>支付宝</span></div></div></div><div class=post-copyright><ul><li class=post-copyright-author><strong>本文作者: </strong>Nicksxs<li class=post-copyright-link><strong>本文链接:</strong> <a href=https://nicksxs.me/2025/09/07/%E7%94%A8gpt-oss%E9%9B%B6%E6%94%B9%E5%8A%A8%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAtodo%E5%BA%94%E7%94%A8/ title=用gpt-oss零改动实现一个todo应用>https://nicksxs.me/2025/09/07/用gpt-oss零改动实现一个todo应用/</a><li class=post-copyright-license><strong>版权声明: </strong>本博客所有文章除特别声明外,均采用 <a href=https://creativecommons.org/licenses/by-nc-sa/4.0/ rel=noopener target=_blank><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处!</ul></div><div class=post-tags><a href=/tags/LLM/ rel=tag># LLM</a></div><div class=post-nav><div class=post-nav-item><a title="GPT-OSS 模型架构与 20B 本地运行体验" href=/2025/08/30/%E4%BD%93%E9%AA%8Copenai%E5%BC%80%E6%BA%90%E7%9A%84gpt-oss%E6%A8%A1%E5%9E%8B/ rel=prev><i class="fa fa-angle-left"></i> GPT-OSS 模型架构与 20B 本地运行体验</a></div><div class=post-nav-item><a title="怎么让claude code用国内的模型" href=/2025/09/13/%E6%80%8E%E4%B9%88%E8%AE%A9claude-code%E7%94%A8%E5%9B%BD%E5%86%85%E7%9A%84%E6%A8%A1%E5%9E%8B/ rel=next>怎么让claude code用国内的模型 <i class="fa fa-angle-right"></i></a></div></div></footer></article></div><div class=comments id=disqus_thread><noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript></div></div></main><footer class=footer><div class=footer-inner><div class=beian><a href=https://beian.miit.gov.cn/ rel=noopener target=_blank>浙ICP备16002580号-2 </a><img alt src=/uploads/beian.png><a href=https://beian.mps.gov.cn/#/query/webSearch?code=33010602011094 rel=noopener target=_blank>浙公网安备 33010602011094号</a></div><div class=copyright>© <span itemprop=copyrightYear>2026</span><span class=with-love><i class="fa fa-heart"></i> </span><span class=author itemprop=copyrightHolder>Nicksxs</span></div></div></footer><div class="toggle sidebar-toggle" role=button><span class=toggle-line></span><span class=toggle-line></span><span class=toggle-line></span></div><div class=sidebar-dimmer></div><div aria-label=返回顶部 class=back-to-top role=button><i class="fa fa-arrow-up fa-lg"></i><span>0%</span></div><a aria-label="在 GitHub 上关注我" title="在 GitHub 上关注我" class=github-corner href=https://github.com/nicksxs rel=noopener target=_blank><svg viewbox="0 0 250 250" aria-hidden=true height=80 width=80><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" style="transform-origin:130px 106px" class=octo-arm fill=currentColor></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" class=octo-body fill=currentColor></path></svg></a><noscript><div class=noscript-warning>Theme NexT works best with JavaScript enabled</div></noscript><script data-cloudflare-page-counter-config type=application/json>{"enable":true,"endpoint":"https://counter.nicksxs.me","site":"nicksxs","local_cache":true,"timeout":5000,"icon":"far fa-eye","item_text":true}</script><script src=/js/cloudflare-page-counter.js></script><script class=next-config data-name=disqus type=application/json>{"enable":true,"shortname":"nicksxs","count":false,"i18n":{"disqus":"disqus"}}</script><script defer src=/js/third-party/comments/disqus.js></script>