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
90 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="这里我们用iflow的默认Qwen3-Coder-Plus模型来生成一个todo应用 本次的prompt稍微调整了下 生成的复杂度比之前roocode小很多 主要就是在App.tsx里 包括了主体代码和样式,但是颜色样式我还不太满意,希望是之前Instagram那种比较素的颜色…" name=description><meta content=article property=og:type><meta content=基于iflow的qwen模型来体验代码生成 property=og:title><meta content=https://nicksxs.me/2025/11/09/%E5%9F%BA%E4%BA%8Eiflow%E7%9A%84qwen%E6%A8%A1%E5%9E%8B%E6%9D%A5%E4%BD%93%E9%AA%8C%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90/index.html property=og:url><meta content="Nicksxs's Blog" property=og:site_name><meta content="这里我们用iflow的默认Qwen3-Coder-Plus模型来生成一个todo应用 本次的prompt稍微调整了下 生成的复杂度比之前roocode小很多 主要就是在App.tsx里 包括了主体代码和样式,但是颜色样式我还不太满意,希望是之前Instagram那种比较素的颜色…" property=og:description><meta content=zh_CN property=og:locale><meta content=https://img.nicksxs.me/uPic/KjP8ep.png property=og:image><meta content=https://img.nicksxs.me/uPic/vn6CDl.png property=og:image><meta content=2025-11-09T13:07:39.000Z property=article:published_time><meta content=2025-11-09T13:07:39.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/uPic/KjP8ep.png name=twitter:image><link href=https://nicksxs.me/2025/11/09/%E5%9F%BA%E4%BA%8Eiflow%E7%9A%84qwen%E6%A8%A1%E5%9E%8B%E6%9D%A5%E4%BD%93%E9%AA%8C%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90/ 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/11/09/%E5%9F%BA%E4%BA%8Eiflow%E7%9A%84qwen%E6%A8%A1%E5%9E%8B%E6%9D%A5%E4%BD%93%E9%AA%8C%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90/","path":"2025/11/09/基于iflow的qwen模型来体验代码生成/","title":"基于iflow的qwen模型来体验代码生成"}</script><script class=next-config data-name=calendar type=application/json>""</script><title>基于iflow的qwen模型来体验代码生成 | 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-overview-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><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/11/09/%E5%9F%BA%E4%BA%8Eiflow%E7%9A%84qwen%E6%A8%A1%E5%9E%8B%E6%9D%A5%E4%BD%93%E9%AA%8C%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90/ 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="基于iflow的qwen模型来体验代码生成 | Nicksxs's Blog" itemprop=name><meta content="这里我们用iflow的默认Qwen3-Coder-Plus模型来生成一个todo应用 本次的prompt稍微调整了下 生成的复杂度比之前roocode小很多 主要就是在App.tsx里 包括了主体代码和样式,但是颜色样式我还不太满意,希望是之前Instagram那种比较素的颜色…" itemprop=description></span><header class=post-header><h1 itemprop="name headline" class=post-title>基于iflow的qwen模型来体验代码生成</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-11-09 21:07:39" datetime=2025-11-09T21:07:39+08:00>2025-11-09</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/11/09/%E5%9F%BA%E4%BA%8Eiflow%E7%9A%84qwen%E6%A8%A1%E5%9E%8B%E6%9D%A5%E4%BD%93%E9%AA%8C%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90/ data-title=基于iflow的qwen模型来体验代码生成 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>这里我们用iflow的默认Qwen3-Coder-Plus模型来生成一个todo应用 本次的prompt稍微调整了下 生成的复杂度比之前roocode小很多 主要就是在App.tsx里 包括了主体代码和样式,但是颜色样式我还不太满意,希望是之前Instagram那种比较素的颜色…</div></div></header><div class=post-body itemprop=articleBody><p>这里我们用iflow的默认<code>Qwen3-Coder-Plus</code>模型来生成一个todo应用<br>本次的prompt稍微调整了下<figure class="highlight shell"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line>帮我生成一个todo应用,基于react实现,需要具有非常精美的UI,媲美Instagram那样的网站</span><br></pre></table></figure><p>生成的复杂度比之前roocode小很多<br>主要就是在App.tsx里<figure class="highlight tsx"><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><span class=line>63</span><br><span class=line>64</span><br><span class=line>65</span><br><span class=line>66</span><br><span class=line>67</span><br><span class=line>68</span><br><span class=line>69</span><br><span class=line>70</span><br><span class=line>71</span><br><span class=line>72</span><br><span class=line>73</span><br><span class=line>74</span><br><span class=line>75</span><br><span class=line>76</span><br><span class=line>77</span><br><span class=line>78</span><br><span class=line>79</span><br><span class=line>80</span><br><span class=line>81</span><br><span class=line>82</span><br><span class=line>83</span><br><span class=line>84</span><br><span class=line>85</span><br><span class=line>86</span><br><span class=line>87</span><br><span class=line>88</span><br><span class=line>89</span><br><span class=line>90</span><br><span class=line>91</span><br><span class=line>92</span><br><span class=line>93</span><br><span class=line>94</span><br><span class=line>95</span><br><span class=line>96</span><br><span class=line>97</span><br><span class=line>98</span><br><span class=line>99</span><br><span class=line>100</span><br><span class=line>101</span><br><span class=line>102</span><br><span class=line>103</span><br><span class=line>104</span><br><span class=line>105</span><br><span class=line>106</span><br><span class=line>107</span><br><span class=line>108</span><br><span class=line>109</span><br><span class=line>110</span><br><span class=line>111</span><br><span class=line>112</span><br><span class=line>113</span><br><span class=line>114</span><br><span class=line>115</span><br><span class=line>116</span><br><span class=line>117</span><br><span class=line>118</span><br><span class=line>119</span><br><span class=line>120</span><br><span class=line>121</span><br><span class=line>122</span><br><span class=line>123</span><br><span class=line>124</span><br><span class=line>125</span><br><span class=line>126</span><br><span class=line>127</span><br><span class=line>128</span><br><span class=line>129</span><br><span class=line>130</span><br><span class=line>131</span><br><span class=line>132</span><br><span class=line>133</span><br><span class=line>134</span><br><span class=line>135</span><br><span class=line>136</span><br><span class=line>137</span><br><span class=line>138</span><br><span class=line>139</span><br><span class=line>140</span><br><span class=line>141</span><br><span class=line>142</span><br><span class=line>143</span><br><span class=line>144</span><br><span class=line>145</span><br><span class=line>146</span><br><span class=line>147</span><br><span class=line>148</span><br><span class=line>149</span><br><span class=line>150</span><br><span class=line>151</span><br><span class=line>152</span><br><span class=line>153</span><br><span class=line>154</span><br><span class=line>155</span><br><span class=line>156</span><br><span class=line>157</span><br><span class=line>158</span><br><span class=line>159</span><br><span class=line>160</span><br><span class=line>161</span><br><span class=line>162</span><br><span class=line>163</span><br><span class=line>164</span><br><span class=line>165</span><br><span class=line>166</span><br><span class=line>167</span><br><span class=line>168</span><br><span class=line>169</span><br><span class=line>170</span><br><span class=line>171</span><br><span class=line>172</span><br><span class=line>173</span><br><span class=line>174</span><br><span class=line>175</span><br><span class=line>176</span><br><span class=line>177</span><br><span class=line>178</span><br><span class=line>179</span><br><span class=line>180</span><br><span class=line>181</span><br><span class=line>182</span><br><span class=line>183</span><br><span class=line>184</span><br><span class=line>185</span><br><span class=line>186</span><br><span class=line>187</span><br><span class=line>188</span><br><span class=line>189</span><br><span class=line>190</span><br><span class=line>191</span><br><span class=line>192</span><br><span class=line>193</span><br><span class=line>194</span><br><span class=line>195</span><br><span class=line>196</span><br><span class=line>197</span><br><span class=line>198</span><br><span class=line>199</span><br><span class=line>200</span><br><span class=line>201</span><br><span class=line>202</span><br><span class=line>203</span><br><span class=line>204</span><br><span class=line>205</span><br><span class=line>206</span><br><span class=line>207</span><br><span class=line>208</span><br><span class=line>209</span><br><span class=line>210</span><br><span class=line>211</span><br><span class=line>212</span><br><span class=line>213</span><br><span class=line>214</span><br><span class=line>215</span><br><span class=line>216</span><br><span class=line>217</span><br><span class=line>218</span><br><span class=line>219</span><br><span class=line>220</span><br><span class=line>221</span><br><span class=line>222</span><br><span class=line>223</span><br><span class=line>224</span><br><span class=line>225</span><br><span class=line>226</span><br><span class=line>227</span><br><span class=line>228</span><br><span class=line>229</span><br><span class=line>230</span><br><span class=line>231</span><br><span class=line>232</span><br><span class=line>233</span><br><span class=line>234</span><br><span class=line>235</span><br><span class=line>236</span><br><span class=line>237</span><br><span class=line>238</span><br><span class=line>239</span><br><span class=line>240</span><br><span class=line>241</span><br><span class=line>242</span><br><span class=line>243</span><br><span class=line>244</span><br><span class=line>245</span><br><span class=line>246</span><br><span class=line>247</span><br><span class=line>248</span><br><span class=line>249</span><br><span class=line>250</span><br><span class=line>251</span><br><span class=line>252</span><br><span class=line>253</span><br><span class=line>254</span><br><span class=line>255</span><br><span class=line>256</span><br><span class=line>257</span><br><span class=line>258</span><br><span class=line>259</span><br><span class=line>260</span><br><span class=line>261</span><br><span class=line>262</span><br><span class=line>263</span><br><span class=line>264</span><br><span class=line>265</span><br><span class=line>266</span><br><span class=line>267</span><br><span class=line>268</span><br><span class=line>269</span><br><span class=line>270</span><br><span class=line>271</span><br><span class=line>272</span><br><span class=line>273</span><br><span class=line>274</span><br><span class=line>275</span><br><span class=line>276</span><br><span class=line>277</span><br><span class=line>278</span><br><span class=line>279</span><br><span class=line>280</span><br><span class=line>281</span><br><span class=line>282</span><br><span class=line>283</span><br><span class=line>284</span><br><span class=line>285</span><br><span class=line>286</span><br><span class=line>287</span><br><span class=line>288</span><br><span class=line>289</span><br><span class=line>290</span><br><span class=line>291</span><br><span class=line>292</span><br><span class=line>293</span><br><span class=line>294</span><br><span class=line>295</span><br><span class=line>296</span><br><span class=line>297</span><br><span class=line>298</span><br><span class=line>299</span><br><span class=line>300</span><br><span class=line>301</span><br><span class=line>302</span><br><span class=line>303</span><br><span class=line>304</span><br><span class=line>305</span><br><span class=line>306</span><br><span class=line>307</span><br><span class=line>308</span><br><span class=line>309</span><br><span class=line>310</span><br><span class=line>311</span><br><span class=line>312</span><br><span class=line>313</span><br><span class=line>314</span><br><span class=line>315</span><br><span class=line>316</span><br><span class=line>317</span><br><span class=line>318</span><br><span class=line>319</span><br><span class=line>320</span><br><span class=line>321</span><br><span class=line>322</span><br><span class=line>323</span><br><span class=line>324</span><br><span class=line>325</span><br><span class=line>326</span><br><span class=line>327</span><br><span class=line>328</span><br><span class=line>329</span><br><span class=line>330</span><br><span class=line>331</span><br><span class=line>332</span><br><span class=line>333</span><br><span class=line>334</span><br><span class=line>335</span><br><span class=line>336</span><br><span class=line>337</span><br><span class=line>338</span><br><span class=line>339</span><br><span class=line>340</span><br><span class=line>341</span><br><span class=line>342</span><br><span class=line>343</span><br><span class=line>344</span><br><span class=line>345</span><br><span class=line>346</span><br><span class=line>347</span><br><span class=line>348</span><br><span class=line>349</span><br><span class=line>350</span><br><span class=line>351</span><br><span class=line>352</span><br><span class=line>353</span><br><span class=line>354</span><br><span class=line>355</span><br><span class=line>356</span><br><span class=line>357</span><br><span class=line>358</span><br><span class=line>359</span><br><span class=line>360</span><br><span class=line>361</span><br><span class=line>362</span><br><span class=line>363</span><br><span class=line>364</span><br><span class=line>365</span><br><span class=line>366</span><br><span class=line>367</span><br><span class=line>368</span><br><span class=line>369</span><br><span class=line>370</span><br><span class=line>371</span><br><span class=line>372</span><br><span class=line>373</span><br><span class=line>374</span><br><span class=line>375</span><br><span class=line>376</span><br><span class=line>377</span><br><span class=line>378</span><br><span class=line>379</span><br><span class=line>380</span><br><span class=line>381</span><br><span class=line>382</span><br><span class=line>383</span><br><span class=line>384</span><br><span class=line>385</span><br><span class=line>386</span><br><span class=line>387</span><br><span class=line>388</span><br><span class=line>389</span><br><span class=line>390</span><br><span class=line>391</span><br><span class=line>392</span><br><span class=line>393</span><br><span class=line>394</span><br><span class=line>395</span><br><span class=line>396</span><br><span class=line>397</span><br><span class=line>398</span><br><span class=line>399</span><br><span class=line>400</span><br><span class=line>401</span><br><span class=line>402</span><br><span class=line>403</span><br><span class=line>404</span><br><span class=line>405</span><br><span class=line>406</span><br><span class=line>407</span><br><span class=line>408</span><br><span class=line>409</span><br><span class=line>410</span><br><span class=line>411</span><br><span class=line>412</span><br><span class=line>413</span><br><span class=line>414</span><br><span class=line>415</span><br><span class=line>416</span><br><span class=line>417</span><br><span class=line>418</span><br><span class=line>419</span><br><span class=line>420</span><br><span class=line>421</span><br><span class=line>422</span><br><span class=line>423</span><br><span class=line>424</span><br><span class=line>425</span><br><span class=line>426</span><br><span class=line>427</span><br><span class=line>428</span><br><span class=line>429</span><br><span class=line>430</span><br><span class=line>431</span><br><span class=line>432</span><br><span class=line>433</span><br><span class=line>434</span><br><span class=line>435</span><br><span class=line>436</span><br><span class=line>437</span><br><span class=line>438</span><br><span class=line>439</span><br><span class=line>440</span><br><span class=line>441</span><br><span class=line>442</span><br><span class=line>443</span><br><span class=line>444</span><br><span class=line>445</span><br><span class=line>446</span><br><span class=line>447</span><br><span class=line>448</span><br><span class=line>449</span><br><span class=line>450</span><br><span class=line>451</span><br><span class=line>452</span><br><span class=line>453</span><br><span class=line>454</span><br><span class=line>455</span><br><span class=line>456</span><br><span class=line>457</span><br><span class=line>458</span><br><span class=line>459</span><br><span class=line>460</span><br><span class=line>461</span><br><span class=line>462</span><br><span class=line>463</span><br><span class=line>464</span><br><span class=line>465</span><br><span class=line>466</span><br><span class=line>467</span><br><span class=line>468</span><br><span class=line>469</span><br><span class=line>470</span><br><span class=line>471</span><br><span class=line>472</span><br><span class=line>473</span><br><span class=line>474</span><br><span class=line>475</span><br><span class=line>476</span><br><span class=line>477</span><br><span class=line>478</span><br><span class=line>479</span><br><span class=line>480</span><br><span class=line>481</span><br><span class=line>482</span><br><span class=line>483</span><br><span class=line>484</span><br><span class=line>485</span><br><span class=line>486</span><br><span class=line>487</span><br><span class=line>488</span><br><span class=line>489</span><br><span class=line>490</span><br><span class=line>491</span><br><span class=line>492</span><br><span class=line>493</span><br><span class=line>494</span><br><span class=line>495</span><br><span class=line>496</span><br><span class=line>497</span><br><span class=line>498</span><br><span class=line>499</span><br><span class=line>500</span><br><span class=line>501</span><br><span class=line>502</span><br><span class=line>503</span><br><span class=line>504</span><br><span class=line>505</span><br><span class=line>506</span><br><span class=line>507</span><br><span class=line>508</span><br><span class=line>509</span><br><span class=line>510</span><br><span class=line>511</span><br><span class=line>512</span><br><span class=line>513</span><br><span class=line>514</span><br><span class=line>515</span><br><span class=line>516</span><br><span class=line>517</span><br><span class=line>518</span><br><span class=line>519</span><br><span class=line>520</span><br><span class=line>521</span><br><span class=line>522</span><br><span class=line>523</span><br><span class=line>524</span><br><span class=line>525</span><br><span class=line>526</span><br><span class=line>527</span><br><span class=line>528</span><br><span class=line>529</span><br><span class=line>530</span><br><span class=line>531</span><br><span class=line>532</span><br><span class=line>533</span><br><span class=line>534</span><br><span class=line>535</span><br><span class=line>536</span><br><span class=line>537</span><br><span class=line>538</span><br><span class=line>539</span><br><span class=line>540</span><br><span class=line>541</span><br><span class=line>542</span><br><span class=line>543</span><br><span class=line>544</span><br><span class=line>545</span><br><span class=line>546</span><br><span class=line>547</span><br><span class=line>548</span><br><span class=line>549</span><br><span class=line>550</span><br><span class=line>551</span><br><span class=line>552</span><br><span class=line>553</span><br><span class=line>554</span><br><span class=line>555</span><br><span class=line>556</span><br><span class=line>557</span><br><span class=line>558</span><br><span class=line>559</span><br><span class=line>560</span><br><span class=line>561</span><br><span class=line>562</span><br><span class=line>563</span><br><span class=line>564</span><br><span class=line>565</span><br><span class=line>566</span><br><span class=line>567</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> styled, { createGlobalStyle, keyframes } <span class=keyword>from</span> <span class=string>'styled-components'</span>;</span><br><span class=line><span class=keyword>import</span> { <span class="title class_">FiCheck</span>, <span class="title class_">FiTrash2</span>, <span class="title class_">FiEdit2</span> } <span class=keyword>from</span> <span class=string>'react-icons/fi'</span>;</span><br><span class=line></span><br><span class=line><span class=comment>// 淡入动画</span></span><br><span class=line><span class=keyword>const</span> fadeIn = keyframes<span class=string>`</span></span><br><span class=line><span class=string> from {</span></span><br><span class=line><span class=string> opacity: 0;</span></span><br><span class=line><span class=string> transform: translateY(20px);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string> to {</span></span><br><span class=line><span class=string> opacity: 1;</span></span><br><span class=line><span class=string> transform: translateY(0);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=comment>// 淡入缩放动画</span></span><br><span class=line><span class=keyword>const</span> fadeInScale = keyframes<span class=string>`</span></span><br><span class=line><span class=string> from {</span></span><br><span class=line><span class=string> opacity: 0;</span></span><br><span class=line><span class=string> transform: scale(0.95);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string> to {</span></span><br><span class=line><span class=string> opacity: 1;</span></span><br><span class=line><span class=string> transform: scale(1);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=comment>// 按钮点击动画</span></span><br><span class=line><span class=keyword>const</span> buttonClick = keyframes<span class=string>`</span></span><br><span class=line><span class=string> 0% {</span></span><br><span class=line><span class=string> transform: scale(1);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string> 50% {</span></span><br><span class=line><span class=string> transform: scale(0.95);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string> 100% {</span></span><br><span class=line><span class=string> transform: scale(1);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=comment>// 按钮悬停脉冲动画</span></span><br><span class=line><span class=keyword>const</span> pulse = keyframes<span class=string>`</span></span><br><span class=line><span class=string> 0% {</span></span><br><span class=line><span class=string> box-shadow: 0 0 0 0 rgba(56, 151, 240, 0.4);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string> 70% {</span></span><br><span class=line><span class=string> box-shadow: 0 0 0 10px rgba(56, 151, 240, 0);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string> 100% {</span></span><br><span class=line><span class=string> box-shadow: 0 0 0 0 rgba(56, 151, 240, 0);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=comment>// 任务项滑动动画</span></span><br><span class=line><span class=keyword>const</span> slideIn = keyframes<span class=string>`</span></span><br><span class=line><span class=string> from {</span></span><br><span class=line><span class=string> opacity: 0;</span></span><br><span class=line><span class=string> transform: translateX(30px);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string> to {</span></span><br><span class=line><span class=string> opacity: 1;</span></span><br><span class=line><span class=string> transform: translateX(0);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=comment>// 全局样式</span></span><br><span class=line><span class=keyword>const</span> <span class="title class_">GlobalStyle</span> = createGlobalStyle<span class=string>`</span></span><br><span class=line><span class=string> * {</span></span><br><span class=line><span class=string> margin: 0;</span></span><br><span class=line><span class=string> padding: 0;</span></span><br><span class=line><span class=string> box-sizing: border-box;</span></span><br><span class=line><span class=string> font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string></span></span><br><span class=line><span class=string> body {</span></span><br><span class=line><span class=string> background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);</span></span><br><span class=line><span class=string> min-height: 100vh;</span></span><br><span class=line><span class=string> padding: 20px;</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=comment>// 主容器</span></span><br><span class=line><span class=keyword>const</span> <span class="title class_">AppContainer</span> = styled.<span class=property>div</span><span class=string>`</span></span><br><span class=line><span class=string> max-width: 600px;</span></span><br><span class=line><span class=string> margin: 0 auto;</span></span><br><span class=line><span class=string> background: rgba(255, 255, 255, 0.95);</span></span><br><span class=line><span class=string> border-radius: 20px;</span></span><br><span class=line><span class=string> box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);</span></span><br><span class=line><span class=string> overflow: hidden;</span></span><br><span class=line><span class=string> border: 1px solid rgba(255, 255, 255, 0.2);</span></span><br><span class=line><span class=string> backdrop-filter: blur(10px);</span></span><br><span class=line><span class=string> animation: <span class=subst>${fadeIn}</span> 0.5s ease-out;</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=comment>// 顶部导航栏</span></span><br><span class=line><span class=keyword>const</span> <span class="title class_">Header</span> = styled.<span class=property>header</span><span class=string>`</span></span><br><span class=line><span class=string> background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);</span></span><br><span class=line><span class=string> padding: 25px;</span></span><br><span class=line><span class=string> text-align: center;</span></span><br><span class=line><span class=string> position: relative;</span></span><br><span class=line><span class=string> overflow: hidden;</span></span><br><span class=line><span class=string></span></span><br><span class=line><span class=string> &::before {</span></span><br><span class=line><span class=string> content: '';</span></span><br><span class=line><span class=string> position: absolute;</span></span><br><span class=line><span class=string> top: -50%;</span></span><br><span class=line><span class=string> left: -50%;</span></span><br><span class=line><span class=string> width: 200%;</span></span><br><span class=line><span class=string> height: 200%;</span></span><br><span class=line><span class=string> background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);</span></span><br><span class=line><span class=string> transform: rotate(30deg);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string></span></span><br><span class=line><span class=string> &::after {</span></span><br><span class=line><span class=string> content: '';</span></span><br><span class=line><span class=string> position: absolute;</span></span><br><span class=line><span class=string> bottom: 0;</span></span><br><span class=line><span class=string> left: 0;</span></span><br><span class=line><span class=string> width: 100%;</span></span><br><span class=line><span class=string> height: 2px;</span></span><br><span class=line><span class=string> background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>const</span> <span class="title class_">AppTitle</span> = styled.<span class=property>h1</span><span class=string>`</span></span><br><span class=line><span class=string> color: white;</span></span><br><span class=line><span class=string> font-size: 2rem;</span></span><br><span class=line><span class=string> font-weight: 700;</span></span><br><span class=line><span class=string> letter-spacing: 0.5px;</span></span><br><span class=line><span class=string> margin: 0;</span></span><br><span class=line><span class=string> position: relative;</span></span><br><span class=line><span class=string> text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);</span></span><br><span class=line><span class=string> background: linear-gradient(90deg, white, #e0f7fa);</span></span><br><span class=line><span class=string> -webkit-background-clip: text;</span></span><br><span class=line><span class=string> -webkit-text-fill-color: transparent;</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=comment>// 主内容区域</span></span><br><span class=line><span class=keyword>const</span> <span class="title class_">MainContent</span> = styled.<span class=property>main</span><span class=string>`</span></span><br><span class=line><span class=string> padding: 30px;</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=comment>// 添加任务表单</span></span><br><span class=line><span class=keyword>const</span> <span class="title class_">AddTodoForm</span> = styled.<span class=property>div</span><span class=string>`</span></span><br><span class=line><span class=string> display: flex;</span></span><br><span class=line><span class=string> margin-bottom: 25px;</span></span><br><span class=line><span class=string> gap: 12px;</span></span><br><span class=line><span class=string> animation: <span class=subst>${fadeIn}</span> 0.5s ease-out;</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>const</span> <span class="title class_">TodoInput</span> = styled.<span class=property>input</span><span class=string>`</span></span><br><span class=line><span class=string> flex: 1;</span></span><br><span class=line><span class=string> padding: 16px 20px;</span></span><br><span class=line><span class=string> border: 1px solid rgba(134, 142, 150, 0.2);</span></span><br><span class=line><span class=string> border-radius: 12px;</span></span><br><span class=line><span class=string> font-size: 1rem;</span></span><br><span class=line><span class=string> outline: none;</span></span><br><span class=line><span class=string> transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);</span></span><br><span class=line><span class=string> background: rgba(255, 255, 255, 0.8);</span></span><br><span class=line><span class=string> box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);</span></span><br><span class=line><span class=string></span></span><br><span class=line><span class=string> &:focus {</span></span><br><span class=line><span class=string> border-color: #3897f0;</span></span><br><span class=line><span class=string> background: white;</span></span><br><span class=line><span class=string> box-shadow: 0 0 0 3px rgba(56, 151, 240, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.05);</span></span><br><span class=line><span class=string> transform: translateY(-2px);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string></span></span><br><span class=line><span class=string> &::placeholder {</span></span><br><span class=line><span class=string> color: #a0aec0;</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>const</span> <span class="title class_">AddButton</span> = styled.<span class=property>button</span><span class=string>`</span></span><br><span class=line><span class=string> background: linear-gradient(135deg, #3897f0 0%, #833ab4 100%);</span></span><br><span class=line><span class=string> color: white;</span></span><br><span class=line><span class=string> border: none;</span></span><br><span class=line><span class=string> border-radius: 12px;</span></span><br><span class=line><span class=string> padding: 0 24px;</span></span><br><span class=line><span class=string> font-size: 1rem;</span></span><br><span class=line><span class=string> font-weight: 600;</span></span><br><span class=line><span class=string> cursor: pointer;</span></span><br><span class=line><span class=string> display: flex;</span></span><br><span class=line><span class=string> align-items: center;</span></span><br><span class=line><span class=string> justify-content: center;</span></span><br><span class=line><span class=string> transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);</span></span><br><span class=line><span class=string> position: relative;</span></span><br><span class=line><span class=string> overflow: hidden;</span></span><br><span class=line><span class=string> box-shadow: 0 4px 15px rgba(56, 151, 240, 0.3);</span></span><br><span class=line><span class=string></span></span><br><span class=line><span class=string> &:hover {</span></span><br><span class=line><span class=string> background: linear-gradient(135deg, #2d7bc4 0%, #6a11cb 100%);</span></span><br><span class=line><span class=string> transform: translateY(-2px);</span></span><br><span class=line><span class=string> box-shadow: 0 6px 20px rgba(56, 151, 240, 0.4);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string></span></span><br><span class=line><span class=string> &:active {</span></span><br><span class=line><span class=string> animation: <span class=subst>${buttonClick}</span> 0.2s ease;</span></span><br><span class=line><span class=string> transform: translateY(0);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string></span></span><br><span class=line><span class=string> &:focus {</span></span><br><span class=line><span class=string> animation: <span class=subst>${pulse}</span> 1.5s infinite;</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string></span></span><br><span class=line><span class=string> &::before {</span></span><br><span class=line><span class=string> content: '';</span></span><br><span class=line><span class=string> position: absolute;</span></span><br><span class=line><span class=string> top: 0;</span></span><br><span class=line><span class=string> left: -100%;</span></span><br><span class=line><span class=string> width: 100%;</span></span><br><span class=line><span class=string> height: 100%;</span></span><br><span class=line><span class=string> background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);</span></span><br><span class=line><span class=string> transition: 0.5s;</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string></span></span><br><span class=line><span class=string> &:hover::before {</span></span><br><span class=line><span class=string> left: 100%;</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=comment>// 任务列表</span></span><br><span class=line><span class=keyword>const</span> <span class="title class_">TodoList</span> = styled.<span class=property>div</span><span class=string>`</span></span><br><span class=line><span class=string> display: flex;</span></span><br><span class=line><span class=string> flex-direction: column;</span></span><br><span class=line><span class=string> gap: 15px;</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=comment>// 单个任务项</span></span><br><span class=line><span class=keyword>const</span> <span class="title class_">TodoItem</span> = styled.<span class=property>div</span><{ <span class=attr>completed</span>: <span class=built_in>boolean</span> }><span class=string>`</span></span><br><span class=line><span class=string> display: flex;</span></span><br><span class=line><span class=string> align-items: center;</span></span><br><span class=line><span class=string> padding: 18px;</span></span><br><span class=line><span class=string> background: rgba(255, 255, 255, 0.8);</span></span><br><span class=line><span class=string> border-radius: 12px;</span></span><br><span class=line><span class=string> border: 1px solid rgba(134, 142, 150, 0.15);</span></span><br><span class=line><span class=string> transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);</span></span><br><span class=line><span class=string> box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);</span></span><br><span class=line><span class=string> animation: <span class=subst>${slideIn}</span> 0.3s ease-out;</span></span><br><span class=line><span class=string></span></span><br><span class=line><span class=string> <span class=subst>${props => props.completed && <span class=string>`</span></span></span></span><br><span class=line><span class=string><span class=subst><span class=string> opacity: 0.8;</span></span></span></span><br><span class=line><span class=string><span class=subst><span class=string> background: rgba(240, 240, 240, 0.6);</span></span></span></span><br><span class=line><span class=string><span class=subst><span class=string> `</span>}</span></span></span><br><span class=line><span class=string></span></span><br><span class=line><span class=string> &:hover {</span></span><br><span class=line><span class=string> border-color: rgba(134, 142, 150, 0.3);</span></span><br><span class=line><span class=string> transform: translateY(-2px);</span></span><br><span class=line><span class=string> box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>const</span> <span class="title class_">Checkbox</span> = styled.<span class=property>input</span>.<span class="title function_">attrs</span>({ <span class=attr>type</span>: <span class=string>'checkbox'</span> })<span class=string>`</span></span><br><span class=line><span class=string> width: 22px;</span></span><br><span class=line><span class=string> height: 22px;</span></span><br><span class=line><span class=string> cursor: pointer;</span></span><br><span class=line><span class=string> accent-color: #4CAF50;</span></span><br><span class=line><span class=string> border-radius: 6px;</span></span><br><span class=line><span class=string> border: 2px solid #cbd5e0;</span></span><br><span class=line><span class=string> transition: all 0.2s ease;</span></span><br><span class=line><span class=string></span></span><br><span class=line><span class=string> &:checked {</span></span><br><span class=line><span class=string> border-color: #4CAF50;</span></span><br><span class=line><span class=string> background: #4CAF50;</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string></span></span><br><span class=line><span class=string> &:hover {</span></span><br><span class=line><span class=string> transform: scale(1.1);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>const</span> <span class="title class_">TodoText</span> = styled.<span class=property>span</span><{ <span class=attr>completed</span>: <span class=built_in>boolean</span> }><span class=string>`</span></span><br><span class=line><span class=string> flex: 1;</span></span><br><span class=line><span class=string> font-size: 1.1rem;</span></span><br><span class=line><span class=string> margin: 0 15px;</span></span><br><span class=line><span class=string> transition: all 0.3s ease;</span></span><br><span class=line><span class=string> color: #2d3748;</span></span><br><span class=line><span class=string> <span class=subst>${props => props.completed && <span class=string>`</span></span></span></span><br><span class=line><span class=string><span class=subst><span class=string> text-decoration: line-through;</span></span></span></span><br><span class=line><span class=string><span class=subst><span class=string> color: #a0aec0;</span></span></span></span><br><span class=line><span class=string><span class=subst><span class=string> `</span>}</span></span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>const</span> <span class="title class_">TodoActions</span> = styled.<span class=property>div</span><span class=string>`</span></span><br><span class=line><span class=string> display: flex;</span></span><br><span class=line><span class=string> gap: 12px;</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>const</span> <span class="title class_">ActionButton</span> = styled.<span class=property>button</span><span class=string>`</span></span><br><span class=line><span class=string> background: rgba(255, 255, 255, 0.7);</span></span><br><span class=line><span class=string> border: 1px solid rgba(134, 142, 150, 0.2);</span></span><br><span class=line><span class=string> cursor: pointer;</span></span><br><span class=line><span class=string> font-size: 1.2rem;</span></span><br><span class=line><span class=string> width: 40px;</span></span><br><span class=line><span class=string> height: 40px;</span></span><br><span class=line><span class=string> border-radius: 50%;</span></span><br><span class=line><span class=string> display: flex;</span></span><br><span class=line><span class=string> align-items: center;</span></span><br><span class=line><span class=string> justify-content: center;</span></span><br><span class=line><span class=string> transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);</span></span><br><span class=line><span class=string> color: #718096;</span></span><br><span class=line><span class=string> box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);</span></span><br><span class=line><span class=string></span></span><br><span class=line><span class=string> &:hover {</span></span><br><span class=line><span class=string> background: white;</span></span><br><span class=line><span class=string> color: #4a5568;</span></span><br><span class=line><span class=string> border-color: rgba(134, 142, 150, 0.4);</span></span><br><span class=line><span class=string> transform: translateY(-2px) scale(1.1);</span></span><br><span class=line><span class=string> box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string></span></span><br><span class=line><span class=string> &:active {</span></span><br><span class=line><span class=string> transform: scale(0.95);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>const</span> <span class="title class_">CheckButton</span> = <span class="title function_">styled</span>(<span class="title class_">ActionButton</span>)<span class=string>`</span></span><br><span class=line><span class=string> &:hover {</span></span><br><span class=line><span class=string> color: #4CAF50;</span></span><br><span class=line><span class=string> border-color: rgba(76, 175, 80, 0.4);</span></span><br><span class=line><span class=string> background: rgba(76, 175, 80, 0.1);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>const</span> <span class="title class_">EditButton</span> = <span class="title function_">styled</span>(<span class="title class_">ActionButton</span>)<span class=string>`</span></span><br><span class=line><span class=string> &:hover {</span></span><br><span class=line><span class=string> color: #2b6cb0;</span></span><br><span class=line><span class=string> border-color: rgba(43, 108, 176, 0.4);</span></span><br><span class=line><span class=string> background: rgba(43, 108, 176, 0.1);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>const</span> <span class="title class_">DeleteButton</span> = <span class="title function_">styled</span>(<span class="title class_">ActionButton</span>)<span class=string>`</span></span><br><span class=line><span class=string> &:hover {</span></span><br><span class=line><span class=string> color: #e53e3e;</span></span><br><span class=line><span class=string> border-color: rgba(229, 62, 62, 0.4);</span></span><br><span class=line><span class=string> background: rgba(229, 62, 62, 0.1);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=comment>// 统计信息</span></span><br><span class=line><span class=keyword>const</span> <span class="title class_">StatsContainer</span> = styled.<span class=property>div</span><span class=string>`</span></span><br><span class=line><span class=string> display: flex;</span></span><br><span class=line><span class=string> justify-content: space-between;</span></span><br><span class=line><span class=string> margin-top: 25px;</span></span><br><span class=line><span class=string> padding: 20px;</span></span><br><span class=line><span class=string> background: rgba(255, 255, 255, 0.7);</span></span><br><span class=line><span class=string> border-radius: 12px;</span></span><br><span class=line><span class=string> font-weight: 500;</span></span><br><span class=line><span class=string> color: #718096;</span></span><br><span class=line><span class=string> border: 1px solid rgba(134, 142, 150, 0.15);</span></span><br><span class=line><span class=string> animation: <span class=subst>${fadeInScale}</span> 0.5s ease-out;</span></span><br><span class=line><span class=string> box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>const</span> <span class="title class_">StatItem</span> = styled.<span class=property>div</span><span class=string>`</span></span><br><span class=line><span class=string> text-align: center;</span></span><br><span class=line><span class=string> padding: 10px 15px;</span></span><br><span class=line><span class=string> border-radius: 8px;</span></span><br><span class=line><span class=string> transition: all 0.3s ease;</span></span><br><span class=line><span class=string></span></span><br><span class=line><span class=string> &:hover {</span></span><br><span class=line><span class=string> background: rgba(255, 255, 255, 0.5);</span></span><br><span class=line><span class=string> transform: translateY(-2px);</span></span><br><span class=line><span class=string> }</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>const</span> <span class="title class_">StatNumber</span> = styled.<span class=property>div</span><span class=string>`</span></span><br><span class=line><span class=string> font-size: 1.5rem;</span></span><br><span class=line><span class=string> font-weight: 700;</span></span><br><span class=line><span class=string> color: #2d3748;</span></span><br><span class=line><span class=string> background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);</span></span><br><span class=line><span class=string> -webkit-background-clip: text;</span></span><br><span class=line><span class=string> -webkit-text-fill-color: transparent;</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>const</span> <span class="title class_">StatLabel</span> = styled.<span class=property>div</span><span class=string>`</span></span><br><span class=line><span class=string> font-size: 0.85rem;</span></span><br><span class=line><span class=string> color: #a0aec0;</span></span><br><span class=line><span class=string> margin-top: 3px;</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=comment>// 空状态</span></span><br><span class=line><span class=keyword>const</span> <span class="title class_">EmptyState</span> = styled.<span class=property>div</span><span class=string>`</span></span><br><span class=line><span class=string> text-align: center;</span></span><br><span class=line><span class=string> padding: 60px 20px;</span></span><br><span class=line><span class=string> color: #a0aec0;</span></span><br><span class=line><span class=string> animation: <span class=subst>${fadeIn}</span> 0.5s ease-out;</span></span><br><span class=line><span class=string> background: rgba(255, 255, 255, 0.5);</span></span><br><span class=line><span class=string> border-radius: 12px;</span></span><br><span class=line><span class=string> margin-top: 10px;</span></span><br><span class=line><span class=string> backdrop-filter: blur(5px);</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>const</span> <span class="title class_">EmptyIcon</span> = styled.<span class=property>div</span><span class=string>`</span></span><br><span class=line><span class=string> font-size: 3.5rem;</span></span><br><span class=line><span class=string> margin-bottom: 20px;</span></span><br><span class=line><span class=string> opacity: 0.6;</span></span><br><span class=line><span class=string> filter: grayscale(100%);</span></span><br><span class=line><span class=string> animation: <span class=subst>${fadeIn}</span> 1s ease-in-out infinite alternate;</span></span><br><span class=line><span class=string>`</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>interface</span> <span class="title class_">Todo</span> {</span><br><span class=line> <span class=attr>id</span>: <span class=built_in>string</span>;</span><br><span class=line> <span class=attr>text</span>: <span class=built_in>string</span>;</span><br><span class=line> <span class=attr>completed</span>: <span class=built_in>boolean</span>;</span><br><span class=line> <span class=attr>createdAt</span>: <span class="title class_">Date</span>;</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=keyword>const</span> <span class="title class_">App</span>: <span class="title class_">React</span>.<span class=property>FC</span> = <span class=function>() =></span> {</span><br><span class=line> <span class=keyword>const</span> [todos, setTodos] = useState<<span class="title class_">Todo</span>[]>([]);</span><br><span class=line> <span class=keyword>const</span> [newTodo, setNewTodo] = useState<<span class=built_in>string</span>>(<span class=string>''</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> savedTodos = <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> (savedTodos) {</span><br><span class=line> <span class=keyword>try</span> {</span><br><span class=line> <span class=keyword>const</span> parsedTodos = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(savedTodos);</span><br><span class=line> <span class=comment>// 将日期字符串转换回Date对象</span></span><br><span class=line> <span class=keyword>const</span> todosWithDates = parsedTodos.<span class="title function_">map</span>(<span class=function>(<span class=params>todo: <span class=built_in>any</span></span>) =></span> ({</span><br><span class=line> ...todo,</span><br><span class=line> <span class=attr>createdAt</span>: <span class=keyword>new</span> <span class="title class_">Date</span>(todo.<span class=property>createdAt</span>)</span><br><span class=line> }));</span><br><span class=line> <span class="title function_">setTodos</span>(todosWithDates);</span><br><span class=line> } <span class=keyword>catch</span> (e) {</span><br><span class=line> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class=string>'Error parsing todos from localStorage'</span>, e);</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=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="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></span>) => {</span><br><span class=line> <span class=keyword>if</span> (newTodo.<span class="title function_">trim</span>() !== <span class=string>''</span>) {</span><br><span class=line> <span class=keyword>const</span> <span class=attr>newTodoItem</span>: <span class="title class_">Todo</span> = {</span><br><span class=line> <span class=attr>id</span>: <span class="title class_">Date</span>.<span class="title function_">now</span>().<span class="title function_">toString</span>(),</span><br><span class=line> <span class=attr>text</span>: newTodo,</span><br><span class=line> <span class=attr>completed</span>: <span class=literal>false</span>,</span><br><span class=line> <span class=attr>createdAt</span>: <span class=keyword>new</span> <span class="title class_">Date</span>()</span><br><span class=line> };</span><br><span class=line> <span class="title function_">setTodos</span>([newTodoItem, ...todos]); <span class=comment>// 将新任务添加到列表顶部</span></span><br><span class=line> <span class="title function_">setNewTodo</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>const</span> <span class="title function_">toggleTodo</span> = (<span class=params>id: <span class=built_in>string</span></span>) => {</span><br><span class=line> <span class="title function_">setTodos</span>(todos.<span class="title function_">map</span>(<span class=function><span class=params>todo</span> =></span></span><br><span class=line> todo.<span class=property>id</span> === id ? { ...todo, <span class=attr>completed</span>: !todo.<span class=property>completed</span> } : todo</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 class=built_in>string</span></span>) => {</span><br><span class=line> <span class="title function_">setTodos</span>(todos.<span class="title function_">filter</span>(<span class=function><span class=params>todo</span> =></span> todo.<span class=property>id</span> !== id));</span><br><span class=line> };</span><br><span class=line></span><br><span class=line> <span class=keyword>const</span> <span class="title function_">editTodo</span> = (<span class=params>id: <span class=built_in>string</span>, newText: <span class=built_in>string</span></span>) => {</span><br><span class=line> <span class=keyword>if</span> (newText.<span class="title function_">trim</span>() !== <span class=string>''</span>) {</span><br><span class=line> <span class="title function_">setTodos</span>(todos.<span class="title function_">map</span>(<span class=function><span class=params>todo</span> =></span></span><br><span class=line> todo.<span class=property>id</span> === id ? { ...todo, <span class=attr>text</span>: newText } : todo</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_">handleKeyPress</span> = (<span class=params>e: React.KeyboardEvent&LTHTMLInputElement></span>) => {</span><br><span class=line> <span class=keyword>if</span> (e.<span class=property>key</span> === <span class=string>'Enter'</span>) {</span><br><span class=line> <span class="title function_">addTodo</span>();</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> completedCount = todos.<span class="title function_">filter</span>(<span class=function><span class=params>todo</span> =></span> todo.<span class=property>completed</span>).<span class=property>length</span>;</span><br><span class=line> <span class=keyword>const</span> totalCount = todos.<span class=property>length</span>;</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></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>GlobalStyle</span> /></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>AppContainer</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>Header</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>AppTitle</span>></span>Instagram风格Todo<span class=tag>&LT/<span class=name>AppTitle</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/<span class=name>Header</span>></span></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>MainContent</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>AddTodoForm</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>TodoInput</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>value</span>=<span class=string>{newTodo}</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> setNewTodo(e.target.value)}</span></span><br><span class=line><span class=language-xml> onKeyPress={handleKeyPress}</span></span><br><span class=line><span class=language-xml> placeholder="添加新任务..."</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>AddButton</span> <span class=attr>onClick</span>=<span class=string>{addTodo}</span>></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>AddButton</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/<span class=name>AddTodoForm</span>></span></span></span><br><span class=line><span class=language-xml></span></span><br><span class=line><span class=language-xml> {todos.length > 0 ? (</span></span><br><span class=line><span class=language-xml> <span class=tag><></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=language-xml> {todos.map(todo => (</span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>TodoItem</span> <span class=attr>key</span>=<span class=string>{todo.id}</span> <span class=attr>completed</span>=<span class=string>{todo.completed}</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>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> toggleTodo(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>TodoText</span> <span class=attr>completed</span>=<span class=string>{todo.completed}</span>></span>{todo.text}<span class=tag>&LT/<span class=name>TodoText</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>TodoActions</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>CheckButton</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>onClick</span>=<span class=string>{()</span> =></span> toggleTodo(todo.id)}</span></span><br><span class=line><span class=language-xml> title={todo.completed ? "标记为未完成" : "标记为完成"}</span></span><br><span class=line><span class=language-xml> ></span></span><br><span class=line><span class=language-xml> {React.createElement(FiCheck as any)}</span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/<span class=name>CheckButton</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>EditButton</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>onClick</span>=<span class=string>{()</span> =></span> {</span></span><br><span class=line><span class=language-xml> const newText = prompt('编辑任务:', todo.text);</span></span><br><span class=line><span class=language-xml> if (newText !== null) {</span></span><br><span class=line><span class=language-xml> editTodo(todo.id, newText);</span></span><br><span class=line><span class=language-xml> }</span></span><br><span class=line><span class=language-xml> }}</span></span><br><span class=line><span class=language-xml> title="编辑"</span></span><br><span class=line><span class=language-xml> ></span></span><br><span class=line><span class=language-xml> {React.createElement(FiEdit2 as any)}</span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/<span class=name>EditButton</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>DeleteButton</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>onClick</span>=<span class=string>{()</span> =></span> deleteTodo(todo.id)}</span></span><br><span class=line><span class=language-xml> title="删除"</span></span><br><span class=line><span class=language-xml> ></span></span><br><span class=line><span class=language-xml> {React.createElement(FiTrash2 as any)}</span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/<span class=name>DeleteButton</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/<span class=name>TodoActions</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/<span class=name>TodoItem</span>></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>TodoList</span>></span></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>StatsContainer</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>StatItem</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>StatNumber</span>></span>{totalCount}<span class=tag>&LT/<span class=name>StatNumber</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>StatLabel</span>></span>总任务<span class=tag>&LT/<span class=name>StatLabel</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/<span class=name>StatItem</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>StatItem</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>StatNumber</span>></span>{completedCount}<span class=tag>&LT/<span class=name>StatNumber</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>StatLabel</span>></span>已完成<span class=tag>&LT/<span class=name>StatLabel</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/<span class=name>StatItem</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>StatItem</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>StatNumber</span>></span>{totalCount - completedCount}<span class=tag>&LT/<span class=name>StatNumber</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>StatLabel</span>></span>待完成<span class=tag>&LT/<span class=name>StatLabel</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/<span class=name>StatItem</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/<span class=name>StatsContainer</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/></span></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>EmptyState</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>EmptyIcon</span>></span>📝<span class=tag>&LT/<span class=name>EmptyIcon</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>h2</span>></span>还没有任务<span class=tag>&LT/<span class=name>h2</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>p</span>></span>添加你的第一个任务开始吧!<span class=tag>&LT/<span class=name>p</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/<span class=name>EmptyState</span>></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>MainContent</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/<span class=name>AppContainer</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag>&LT/></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><p>包括了主体代码和样式,但是颜色样式我还不太满意,希望是之前Instagram那种比较素的颜色,又很精致的那种,但是最近又登录看了下,发现他们家也倒退很多,又通过一些修改,感觉好了一些<br><img loading=lazy src=https://img.nicksxs.me/uPic/KjP8ep.png><br>另外在运行过程中把之前说的问题截到图了,这就是我说的广告,也做的太快了<br><img loading=lazy src=https://img.nicksxs.me/uPic/vn6CDl.png><br>好像是我碰到的第一个带有广告的,不过其他家都是需要为api用量付费的,免费的有点代价也正常<br>另外在调整UI的过程中我们需要让iflow在每一步变更前先把当前代码提交,这样方便我们在多次ui调整中选择最佳的版本</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/11/09/%E5%9F%BA%E4%BA%8Eiflow%E7%9A%84qwen%E6%A8%A1%E5%9E%8B%E6%9D%A5%E4%BD%93%E9%AA%8C%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90/ title=基于iflow的qwen模型来体验代码生成>https://nicksxs.me/2025/11/09/基于iflow的qwen模型来体验代码生成/</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 href=/2025/11/02/%E4%BD%93%E9%AA%8C%E5%BF%83%E6%B5%81%E5%8A%A9%E6%89%8Biflow/ rel=prev title=体验心流助手iflow><i class="fa fa-angle-left"></i> 体验心流助手iflow</a></div><div class=post-nav-item><a href=/2025/11/16/%E5%9F%BA%E4%BA%8Eiflow%E7%9A%84kimi%E6%A8%A1%E5%9E%8B%E6%9D%A5%E4%BD%93%E9%AA%8C%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90/ rel=next title=基于iflow的kimi模型来体验代码生成>基于iflow的kimi模型来体验代码生成 <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>