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.
9 lines
234 KiB
9 lines
234 KiB
<!doctypehtml><html lang=zh-CN><meta charset=UTF-8><meta content=width=device-width name=viewport><meta content=#222 name=theme-color><meta content="Hexo 7.1.0" name=generator><link href=https://fonts.googleapis.com rel=preconnect><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>setTimeout(function(){var d=document.createElement("script");d.setAttribute("data-ad-client","ca-pub-7480618470784058"),d.async=!0,d.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",document.body.appendChild(d)},5e3),window.addEventListener?window.addEventListener("load",downloadJsAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJsAtOnload):window.onload=downloadJsAtOnload</script><style>:root{--body-bg-color:#f5f7f9;--content-bg-color:#fff;--card-bg-color:#f5f5f5;--text-color:#555;--blockquote-color:#666;--link-color:#555;--link-hover-color:#222;--brand-color:#fff;--brand-hover-color:#fff;--table-row-odd-bg-color:#f9f9f9;--table-row-hover-bg-color:#f5f5f5;--menu-item-bg-color:#f5f5f5;--theme-color:#222;--btn-default-bg:#fff;--btn-default-color:#555;--btn-default-border-color:#555;--btn-default-hover-bg:#222;--btn-default-hover-color:#fff;--btn-default-hover-border-color:#222;--highlight-background:#f3f3f3;--highlight-foreground:#444;--highlight-gutter-background:#e1e1e1;--highlight-gutter-foreground:#555;color-scheme:light}html{line-height:1.15;-webkit-text-size-adjust:100%}details,main{display:block}pre{font-size:1em;overflow:auto;padding:10px}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}.table-container,textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}summary{display:list-item}[hidden],template{display:none}::selection{background:#262a30;color:#eee}body,html{height:100%}body{margin:0;background:var(--body-bg-color);box-sizing:border-box;color:var(--text-color);font-family:Lato,'PingFang SC','Microsoft YaHei',sans-serif;font-size:1.2em;line-height:2;min-height:100%;position:relative;transition:padding .2s ease-in-out}h1,h2,h3,h4,h5,h6{font-family:Lato,'PingFang SC','Microsoft YaHei',sans-serif;font-weight:700;line-height:1.5;margin:30px 0 15px}h1{font-size:1.5em}h2{font-size:1.375em}h3{font-size:1.25em}h4{font-size:1.125em}h5{font-size:1em}h6{font-size:.875em}p{margin:0 0 20px}a{background:0 0;border-bottom:1px solid #999;color:var(--link-color);cursor:pointer;outline:0;text-decoration:none;overflow-wrap:break-word}a:hover{border-bottom-color:var(--link-hover-color);color:var(--link-hover-color)}embed,iframe,img,video{display:block;margin-left:auto;margin-right:auto;max-width:100%}hr{box-sizing:content-box;overflow:visible;background-image:repeating-linear-gradient(-45deg,#ddd,#ddd 4px,transparent 4px,transparent 8px);border:0;height:3px;margin:40px 0}blockquote{border-left:4px solid #ddd;color:var(--blockquote-color);margin:0;padding:0 15px}blockquote cite::before{content:'-';padding:0 5px}dt{font-weight:700}dd{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0;font-size:.875em;margin:0 0 20px;width:100%}tbody tr:nth-of-type(odd){background:var(--table-row-odd-bg-color)}tbody tr:hover{background:var(--table-row-hover-bg-color)}caption,td,th{padding:8px}td,th{border:1px solid #ddd;border-bottom:3px solid #ddd}th{font-weight:700;padding-bottom:10px}td{border-bottom-width:1px}.btn{background:var(--btn-default-bg);border:2px solid var(--btn-default-border-color);border-radius:2px;color:var(--btn-default-color);display:inline-block;font-size:.875em;line-height:2;padding:0 20px;transition:background-color .2s ease-in-out}.btn:hover{background:var(--btn-default-hover-bg);border-color:var(--btn-default-hover-border-color);color:var(--btn-default-hover-color)}.btn+.btn{margin:0 0 8px 8px}.btn .fa-fw{text-align:left;width:1.285714285714286em}.toggle{line-height:0}.toggle .toggle-line{background:#fff;display:block;height:2px;left:0;position:relative;top:0;transition:.4s;width:100%}.toggle .toggle-line:first-child{margin-top:1px}.toggle .toggle-line:not(:first-child){margin-top:4px}.toggle.toggle-arrow :first-child{left:50%;top:2px;transform:rotate(45deg);width:50%}.toggle.toggle-arrow :last-child{left:50%;top:-2px;transform:rotate(-45deg);width:50%}.toggle.toggle-close :nth-child(2){opacity:0}.toggle.toggle-close :first-child{top:6px;transform:rotate(45deg)}.toggle.toggle-close :last-child{top:-6px;transform:rotate(-45deg)}/*!
|
|
Theme: Default
|
|
Description: Original highlight.js style
|
|
Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
|
|
Maintainer: @highlightjs/core-team
|
|
Website: https://highlightjs.org/
|
|
License: see project LICENSE
|
|
Touched: 2021
|
|
*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#f3f3f3;color:#444}.hljs-comment{color:#697070}.hljs-punctuation,.hljs-tag{color:#444a}.hljs-tag .hljs-attr,.hljs-tag .hljs-name{color:#444}.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-name,.hljs-selector-tag{font-weight:700}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#800}.hljs-section,.hljs-title{color:#800;font-weight:700}.hljs-link,.hljs-operator,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#ab5656}.hljs-literal{color:#695}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta .hljs-string{color:#38a}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.code-container:hover .copy-btn,.highlight:hover .copy-btn{opacity:1}.code-container{position:relative}.copy-btn{color:#333;cursor:pointer;line-height:1.6;opacity:0;padding:2px 6px;position:absolute;transition:opacity .2s ease-in-out;background-color:#eee;background-image:linear-gradient(#fcfcfc,#eee);border:1px solid #d5d5d5;border-radius:3px;font-size:.8125em;right:4px;top:8px}code,figure.highlight,kbd,pre{background:var(--highlight-background);color:var(--highlight-foreground)}figure.highlight,pre{line-height:1.6;margin:0 auto 20px}figure.highlight figcaption,pre .caption,pre figcaption{background:var(--highlight-gutter-background);color:var(--highlight-foreground);display:flow-root;font-size:.875em;line-height:1.2;padding:.5em}figure.highlight figcaption a,pre .caption a,pre figcaption a{color:var(--highlight-foreground);float:right}figure.highlight figcaption a:hover,pre .caption a:hover,pre figcaption a:hover{border-bottom-color:var(--highlight-foreground)}code,pre{font-family:consolas,Menlo,monospace,'PingFang SC','Microsoft YaHei'}code{border-radius:3px;font-size:.875em;padding:2px 4px;overflow-wrap:break-word}kbd{border:2px solid #ccc;border-radius:.2em;box-shadow:.1em .1em .2em rgba(0,0,0,.1);font-family:inherit;padding:.1em .3em;white-space:nowrap}figure.highlight{overflow:auto;position:relative}figure.highlight pre{border:0;margin:0;padding:10px 0}figure.highlight table{border:0;margin:0;width:auto}figure.highlight td{border:0;padding:0}figure.highlight .gutter{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}figure.highlight .gutter pre{background:var(--highlight-gutter-background);color:var(--highlight-gutter-foreground);padding-left:10px;padding-right:10px;text-align:right}figure.highlight .code pre{padding-left:10px;width:100%}figure.highlight .marked{background:rgba(0,0,0,.3)}pre .caption,pre figcaption{margin-bottom:10px}.gist table{width:auto}.gist table td{border:0}pre code{background:0 0;padding:0;text-shadow:none}.blockquote-center{border-left:0;margin:40px 0;padding:0;position:relative;text-align:center}.blockquote-center::after,.blockquote-center::before{left:0;line-height:1;opacity:.6;position:absolute;width:100%}.blockquote-center::before{border-top:1px solid #ccc;text-align:left;top:-20px;content:'\f10d';font-family:'Font Awesome 6 Free';font-weight:900}.blockquote-center::after{border-bottom:1px solid #ccc;bottom:-20px;text-align:right;content:'\f10e';font-family:'Font Awesome 6 Free';font-weight:900}.blockquote-center div,.blockquote-center p{text-align:center}.group-picture{margin-bottom:20px}.group-picture .group-picture-row{display:flex;gap:3px;margin-bottom:3px}.group-picture .group-picture-column{flex:1}.group-picture .group-picture-column img{height:100%;margin:0;object-fit:cover;width:100%}.post-body .label{color:#555;padding:0 2px}.post-body .label.default{background:#f0f0f0}.post-body .label.primary{background:#efe6f7}.post-body .label.info{background:#e5f2f8}.post-body .label.success{background:#e7f4e9}.post-body .label.warning{background:#fcf6e1}.post-body .label.danger{background:#fae8eb}.post-body .link-grid{display:grid;grid-gap:1.5rem;gap:1.5rem;grid-template-columns:1fr 1fr;margin-bottom:20px;padding:1rem}.post-body .link-grid .link-grid-container{border:solid #ddd;box-shadow:1rem 1rem .5rem rgba(0,0,0,.5);min-height:5rem;min-width:0;padding:.5rem;position:relative;transition:background .3s}.post-body .link-grid .link-grid-container:hover{animation:.5s next-shake;background:var(--card-bg-color)}.post-body .link-grid .link-grid-container:active{box-shadow:.5rem .5rem .25rem rgba(0,0,0,.5);transform:translate(.2rem,.2rem)}.post-body .link-grid .link-grid-container .link-grid-image{border:1px solid #ddd;border-radius:50%;box-sizing:border-box;height:5rem;padding:3px;position:absolute;width:5rem}.post-body .link-grid .link-grid-container p{margin:0 1rem 0 6rem}.post-body .link-grid .link-grid-container p:first-of-type{font-size:1.2em}.post-body .link-grid .link-grid-container p:last-of-type{font-size:.8em;line-height:1.3rem;opacity:.7}.post-body .link-grid .link-grid-container a{border:0;height:100%;left:0;position:absolute;top:0;width:100%}@keyframes next-shake{0%{transform:translate(1pt,1pt) rotate(0)}10%{transform:translate(-1pt,-2pt) rotate(-1deg)}20%{transform:translate(-3pt,0) rotate(1deg)}30%{transform:translate(3pt,2pt) rotate(0)}40%{transform:translate(1pt,-1pt) rotate(1deg)}50%{transform:translate(-1pt,2pt) rotate(-1deg)}60%{transform:translate(-3pt,1pt) rotate(0)}70%{transform:translate(3pt,1pt) rotate(-1deg)}80%{transform:translate(-1pt,-1pt) rotate(1deg)}90%{transform:translate(1pt,2pt) rotate(0)}100%{transform:translate(1pt,-2pt) rotate(-1deg)}}.post-body .note{border-radius:3px;margin-bottom:20px;padding:1em;position:relative;border:1px solid #eee;border-left-width:5px}.post-body .note summary{cursor:pointer;outline:0}.post-body .note summary p{display:inline}.post-body .note h2,.post-body .note h3,.post-body .note h4,.post-body .note h5,.post-body .note h6{border-bottom:initial;margin:0;padding-top:0}.post-body .note :first-child{margin-top:0}.post-body .note :last-child{margin-bottom:0}.post-body .note.default{border-left-color:#777}.post-body .note.default h2,.post-body .note.default h3,.post-body .note.default h4,.post-body .note.default h5,.post-body .note.default h6{color:#777}.post-body .note.primary{border-left-color:#6f42c1}.post-body .note.primary h2,.post-body .note.primary h3,.post-body .note.primary h4,.post-body .note.primary h5,.post-body .note.primary h6{color:#6f42c1}.post-body .note.info{border-left-color:#428bca}.post-body .note.info h2,.post-body .note.info h3,.post-body .note.info h4,.post-body .note.info h5,.post-body .note.info h6{color:#428bca}.post-body .note.success{border-left-color:#5cb85c}.post-body .note.success h2,.post-body .note.success h3,.post-body .note.success h4,.post-body .note.success h5,.post-body .note.success h6{color:#5cb85c}.post-body .note.warning{border-left-color:#f0ad4e}.post-body .note.warning h2,.post-body .note.warning h3,.post-body .note.warning h4,.post-body .note.warning h5,.post-body .note.warning h6{color:#f0ad4e}.post-body .note.danger{border-left-color:#d9534f}.post-body .note.danger h2,.post-body .note.danger h3,.post-body .note.danger h4,.post-body .note.danger h5,.post-body .note.danger h6{color:#d9534f}.post-body .tabs{margin-bottom:20px}.post-body .tabs,.tabs-comment{padding-top:10px}.post-body .tabs ul.nav-tabs,.tabs-comment ul.nav-tabs{background:var(--content-bg-color);display:flex;display:flex;flex-wrap:wrap;justify-content:center;margin:0;padding:0;position:-webkit-sticky;position:sticky;top:0;z-index:5}.post-body .tabs ul.nav-tabs li.tab,.tabs-comment ul.nav-tabs li.tab{border-bottom:1px solid #ddd;border-left:1px solid transparent;border-right:1px solid transparent;border-radius:0;border-top:3px solid transparent;flex-grow:1;list-style-type:none}@media (max-width:413px){.post-body .tabs ul.nav-tabs,.tabs-comment ul.nav-tabs{display:block;margin-bottom:5px}.post-body .tabs ul.nav-tabs li.tab,.tabs-comment ul.nav-tabs li.tab{border-bottom:1px solid transparent;border-left:3px solid transparent;border-right:1px solid transparent;border-top:1px solid transparent;border-radius:0}}.post-body .tabs ul.nav-tabs li.tab a,.tabs-comment ul.nav-tabs li.tab a{border-bottom:initial;display:block;line-height:1.8;padding:.25em .75em;text-align:center;transition:.2s ease-out}.post-body .tabs ul.nav-tabs li.tab a i[class^=fa],.tabs-comment ul.nav-tabs li.tab a i[class^=fa]{width:1.285714285714286em}.post-body .tabs ul.nav-tabs li.tab.active,.tabs-comment ul.nav-tabs li.tab.active{border-color:#fc6423 #ddd transparent}@media (max-width:413px){.post-body .tabs ul.nav-tabs li.tab.active,.tabs-comment ul.nav-tabs li.tab.active{border-color:#ddd #ddd #ddd #fc6423}}.post-body .tabs ul.nav-tabs li.tab.active a,.tabs-comment ul.nav-tabs li.tab.active a{cursor:default}.post-body .tabs .tab-content,.tabs-comment .tab-content{border:1px solid #ddd;border-radius:0;border-top-color:transparent}@media (max-width:413px){.post-body .tabs .tab-content,.tabs-comment .tab-content{border-radius:0;border-top-color:#ddd}}.post-body .tabs .tab-content .tab-pane,.tabs-comment .tab-content .tab-pane{padding:20px 20px 0}.post-body .tabs .tab-content .tab-pane:not(.active),.tabs-comment .tab-content .tab-pane:not(.active){display:none}.pagination .next,.pagination .page-number,.pagination .prev,.pagination .space{display:inline-block;margin:-1px 10px 0;padding:0 10px}.algolia-pagination .current .page-number,.pagination .page-number.current{background:#ccc;border-color:#ccc;color:var(--content-bg-color)}.pagination{border-top:1px solid #eee;margin:120px 0 0;text-align:center}.pagination .next,.pagination .page-number,.pagination .prev{border-bottom:0;border-top:1px solid #eee;transition:border-color .2s ease-in-out}.pagination .next:hover,.pagination .page-number:hover,.pagination .prev:hover{border-top-color:var(--link-hover-color)}@media (max-width:767px){.post-body .link-grid{grid-template-columns:1fr}.pagination .next,.pagination .page-number,.pagination .prev,.pagination .space{margin:0 5px}.pagination{border-top:0}.pagination .next,.pagination .page-number,.pagination .prev{border-bottom:1px solid #eee;border-top:0}.pagination .next:hover,.pagination .page-number:hover,.pagination .prev:hover{border-bottom-color:var(--link-hover-color)}.site-meta{text-align:center}}.pagination .space{margin:0;padding:0}.comments{margin-top:60px;overflow:hidden}.comment-button-group{display:flex;display:flex;flex-wrap:wrap;justify-content:center;justify-content:center;margin:1em 0}.comment-button-group .comment-button{margin:.1em .2em}.comment-button-group .comment-button.active{background:var(--btn-default-hover-bg);border-color:var(--btn-default-hover-border-color);color:var(--btn-default-hover-color)}.comment-position{display:none}.comment-position.active{display:block}.tabs-comment{margin-top:4em;padding-top:0}.tabs-comment .comments{margin-top:0;padding-top:0}.headband{background:var(--theme-color);height:3px}@media (max-width:991px){.headband{display:none}}.site-brand-container{display:flex;flex-shrink:0;padding:0 10px}.use-motion .column,.use-motion .site-brand-container .toggle{opacity:0}.site-meta{flex-grow:1;text-align:center}.custom-logo-image{margin-top:20px}@media (max-width:991px){.custom-logo-image{display:none}}.brand{border-bottom:0;color:var(--brand-color);display:inline-block;padding:0}.brand:hover{color:var(--brand-hover-color)}.site-title{font-family:Lato,'PingFang SC','Microsoft YaHei',sans-serif;font-size:1.375em;font-weight:400;line-height:1.5;margin:0}.site-subtitle{color:#ddd;font-size:.8125em;margin:10px 10px 0}.use-motion .custom-logo-image,.use-motion .site-subtitle,.use-motion .site-title{opacity:0;position:relative;top:-10px}.site-nav-right,.site-nav-toggle{display:none}.site-nav-right .toggle,.site-nav-toggle .toggle{color:var(--text-color);padding:10px;width:22px}.site-nav-right .toggle .toggle-line,.site-nav-toggle .toggle .toggle-line{background:var(--text-color);border-radius:1px}@media (max-width:767px){.site-nav-right,.site-nav-toggle{display:flex;flex-direction:column;justify-content:center}.site-nav{--scroll-height:0;height:0;overflow:hidden;transition:height .2s ease-in-out,visibility .2s ease-in-out;visibility:hidden}body:not(.site-nav-on) .site-nav .animated{animation:none}body.site-nav-on .site-nav{height:var(--scroll-height);visibility:unset}}.menu{margin:0;padding:1em 0;text-align:center}.menu-item{display:inline-block;list-style:none;margin:0 10px}@media (max-width:767px){.menu-item{display:block;margin-top:10px}.menu-item.menu-item-search{display:none}}.menu-item a{border-bottom:0;display:block;font-size:.8125em;transition:border-color .2s ease-in-out}.menu-item a.menu-item-active,.menu-item a:hover{background:var(--menu-item-bg-color)}.menu-item i[class^=fa]{margin-right:8px}.menu-item .badge{display:inline-block;font-weight:700;line-height:1;margin-left:.35em;margin-top:.35em;text-align:center;white-space:nowrap}.use-motion .menu-item{visibility:hidden}.github-corner :hover .octo-arm{animation:560ms ease-in-out octocat-wave}.github-corner svg{color:#fff;fill:var(--theme-color);position:absolute;right:0;top:0;z-index:5}@media (max-width:991px){.github-corner{display:none}.github-corner svg{color:var(--theme-color);fill:#fff}.github-corner .github-corner:hover .octo-arm{animation:none}.github-corner .github-corner .octo-arm{animation:560ms ease-in-out octocat-wave}}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}.sidebar-inner{color:#999;padding:18px 10px;text-align:center;display:flex;flex-direction:column;justify-content:center}.cc-license .cc-opacity{border-bottom:0;opacity:.7}.cc-license .cc-opacity:hover{opacity:.9}.cc-license img{display:inline-block}.site-author-image{border:1px solid #eee;max-width:120px;padding:2px}.site-author-name{color:var(--text-color);font-weight:600;margin:0}.site-description{color:#999;font-size:.8125em;margin-top:0}.links-of-author a{font-size:.8125em}.links-of-author i[class^=fa]{margin-right:2px}.sidebar .sidebar-button:not(:first-child){margin-top:15px}.sidebar .sidebar-button button{background:0 0;cursor:pointer;line-height:2;padding:0 15px;border-radius:4px}.sidebar .sidebar-button button i[class^=fa]{margin-right:5px}.links-of-blogroll{font-size:.8125em}.links-of-blogroll-title{font-size:.875em;font-weight:600}.links-of-blogroll-list{list-style:none;margin:0;padding:0}.sidebar-nav{font-size:.875em;height:0;margin:0;overflow:hidden;padding-left:0;pointer-events:none;transition:height .2s ease-in-out,visibility .2s ease-in-out;visibility:hidden}.sidebar-nav-active .sidebar-nav{height:calc(2em + 1px);pointer-events:unset;visibility:unset}.sidebar-nav li{border-bottom:1px solid transparent;color:var(--text-color);cursor:pointer;display:inline-block;transition:border-bottom-color .2s ease-in-out,color .2s ease-in-out}.sidebar-nav li.sidebar-nav-overview{margin-left:10px}.sidebar-nav li:hover{color:#fc6423}.sidebar-overview-active .sidebar-nav-overview,.sidebar-toc-active .sidebar-nav-toc{border-bottom-color:#fc6423;color:#fc6423;transition-delay:0.2s}.sidebar-overview-active .sidebar-nav-overview:hover,.sidebar-toc-active .sidebar-nav-toc:hover{color:#fc6423}.sidebar-panel-container{align-items:start;display:grid;flex:1;overflow-x:hidden;overflow-y:auto;padding-top:0;transition:padding-top .2s ease-in-out}.sidebar-nav-active .sidebar-panel-container{padding-top:20px}.sidebar-panel{animation:.2s ease-in-out deactivate-sidebar-panel;grid-area:1/1;height:0;opacity:0;overflow:hidden;pointer-events:none;transform:translateY(0);transition:.2s ease-in-out;transition-property:opacity,transform,visibility;visibility:hidden}.sidebar-nav-active .sidebar-panel,.sidebar-overview-active .sidebar-panel.post-toc-wrap{transform:translateY(-20px)}.sidebar-overview-active:not(.sidebar-nav-active) .sidebar-panel.post-toc-wrap{transition-delay:0s,0.2s,0s}.sidebar-overview-active .sidebar-panel.site-overview-wrap,.sidebar-toc-active .sidebar-panel.post-toc-wrap{animation-name:activate-sidebar-panel;height:auto;opacity:1;pointer-events:unset;transform:translateY(0);transition-delay:0.2s,0.2s,0s;visibility:unset}.sidebar-panel.site-overview-wrap{display:flex;flex-direction:column;justify-content:center;gap:10px;justify-content:flex-start}@keyframes deactivate-sidebar-panel{from{height:var(--inactive-panel-height,0)}to{height:var(--active-panel-height,0)}}@keyframes activate-sidebar-panel{from{height:var(--inactive-panel-height,auto)}to{height:var(--active-panel-height,auto)}}.sidebar-toggle{bottom:61px;height:16px;padding:5px;width:16px;background:#222;cursor:pointer;opacity:.6;position:fixed;z-index:30;right:30px}.sidebar-toggle:hover{opacity:.8}@media (max-width:991px){.sidebar-toggle{right:20px;opacity:.8}}.sidebar-toggle:hover .toggle-line{background:#fc6423}@media (any-hover:hover){body:not(.sidebar-active) .sidebar-toggle:hover :first-child{left:50%;top:2px;transform:rotate(45deg);width:50%}body:not(.sidebar-active) .sidebar-toggle:hover :last-child{left:50%;top:-2px;transform:rotate(-45deg);width:50%}}.sidebar-active .sidebar-toggle :nth-child(2){opacity:0}.sidebar-active .sidebar-toggle :first-child{top:6px;transform:rotate(45deg)}.sidebar-active .sidebar-toggle :last-child{top:-6px;transform:rotate(-45deg)}.post-toc{font-size:.875em}.post-toc ol{list-style:none;margin:0;padding:0 2px 0 10px;text-align:left}.post-toc ol>:last-child{margin-bottom:5px}.post-toc ol>ol{padding-left:0}.post-toc ol a{transition:.2s ease-in-out}.post-toc .nav-item{line-height:1.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.post-toc .nav .nav-child{--height:0;height:0;opacity:0;overflow:hidden;transition:.2s ease-in-out;visibility:hidden}.post-toc .nav .active>.nav-child{height:var(--height,auto);opacity:1;visibility:unset}.post-toc .nav .active>a{border-bottom-color:#fc6423;color:#fc6423}.post-toc .nav .active-current>a,.post-toc .nav .active-current>a:hover{color:#fc6423}.site-state{display:flex;flex-wrap:wrap;justify-content:center;line-height:1.4}.site-state-item a{border-bottom:0;display:block}.site-state-item-count{display:block;font-size:1em;font-weight:600}.site-state-item-name{color:#999;font-size:.8125em}.sidebar-post-related{font-size:.8125em;padding:18px 0 0}.popular-posts{margin:0;padding:1em 0;text-align:left}.popular-posts .popular-posts-item{display:block}.popular-posts .popular-posts-item .popular-posts-link{border-bottom:0;display:block;padding:5px 20px;transition:background .2s ease-in-out}.popular-posts .popular-posts-item .popular-posts-link:hover{background:var(--menu-item-bg-color)}.popular-posts .popular-posts-item .popular-posts-time{color:#999}.footer{color:#999;font-size:.875em;padding:20px 0;transition:left .2s ease-in-out,right .2s ease-in-out}.footer.footer-fixed{bottom:0;left:0;position:absolute;right:0}.footer-inner{box-sizing:border-box;text-align:center;display:flex;flex-direction:column;justify-content:center;margin:0 auto;width:calc(100% - 20px)}@media (max-width:767px){.menu-item .badge{float:right;margin-left:0}.footer-inner{width:auto}}@media (min-width:1200px){.footer-inner{width:1160px}}@media (min-width:1600px){.footer-inner{width:73%}}.use-motion .footer{opacity:0}.languages{display:inline-block;font-size:1.125em;position:relative}.languages .lang-select-label span{margin:0 .5em}.languages .lang-select{height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.with-love{color:red;display:inline-block;margin:0 5px}.beian img{display:inline-block;margin:0 3px;vertical-align:middle}.busuanzi-count #busuanzi_container_site_pv,.busuanzi-count #busuanzi_container_site_uv{display:none}@keyframes icon-animate{0%,100%{transform:scale(1)}10%,30%{transform:scale(.9)}20%,40%,50%,60%,70%,80%{transform:scale(1.1)}}@media (max-width:567px){.main-inner{padding:initial!important}.posts-expand .post-header{margin-bottom:10px!important}.post-block{margin-top:initial!important;padding:8px 18px!important}.post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6{margin:20px 0 8px}.post-body .note h1,.post-body .note h2,.post-body .note h3,.post-body .note h4,.post-body .note h5,.post-body .note h6,.post-body .tabs .tab-content .tab-pane h1,.post-body .tabs .tab-content .tab-pane h2,.post-body .tabs .tab-content .tab-pane h3,.post-body .tabs .tab-content .tab-pane h4,.post-body .tabs .tab-content .tab-pane h5,.post-body .tabs .tab-content .tab-pane h6{margin:0 5px}.post-body>p{margin:0 0 10px}.post-body .note>p,.post-body .tabs .tab-content .tab-pane>p{padding:0 5px}.post-body img,.post-body video{margin-bottom:10px!important}.post-body .fancybox+figcaption,.post-body img+figcaption{margin:-5px auto 15px!important}.post-body .note{margin-bottom:10px!important;padding:10px!important}.post-body .tabs .tab-content .tab-pane{padding:10px 10px 0!important}.post-eof{margin:40px auto 20px!important}.pagination{margin-top:40px}}.back-to-top{font-size:12px;align-items:center;bottom:-100px;color:#fff;display:flex;height:26px;transition:bottom .2s ease-in-out;background:#222;cursor:pointer;opacity:.6;position:fixed;z-index:30;right:30px}.back-to-top span{margin-right:8px;display:none}.back-to-top .fa{text-align:center;width:26px}.back-to-top:hover{opacity:.8;color:#fc6423}.back-to-top.back-to-top-on{bottom:30px}.rtl.post-body a,.rtl.post-body h1,.rtl.post-body h2,.rtl.post-body h3,.rtl.post-body h4,.rtl.post-body h5,.rtl.post-body h6,.rtl.post-body li,.rtl.post-body ol,.rtl.post-body p,.rtl.post-body ul{direction:rtl;font-family:UKIJ Ekran}.rtl.post-title{font-family:UKIJ Ekran}.post-button{margin-top:40px;text-align:center}.use-motion .collection-header,.use-motion .comments,.use-motion .pagination,.use-motion .post-block,.use-motion .post-body,.use-motion .post-header{visibility:hidden}.posts-collapse .post-content{margin-bottom:35px;margin-left:35px;position:relative}@media (max-width:767px){.posts-collapse .post-content{margin-left:0;margin-right:0}}.posts-collapse .post-content .collection-title{font-size:1.125em;position:relative}.posts-collapse .post-content .collection-title::before{background:#999;border:1px solid #fff;margin-left:-6px;margin-top:-4px;position:absolute;top:50%;border-radius:50%;content:' ';height:10px;width:10px}.posts-collapse .post-content .collection-year{font-size:1.5em;font-weight:700;margin:60px 0;position:relative}.posts-collapse .post-content .collection-year::before{background:#bbb;margin-left:-4px;margin-top:-4px;position:absolute;top:50%;border-radius:50%;content:' ';height:8px;width:8px}.posts-collapse .post-content .collection-header{display:block;margin-left:20px}.posts-collapse .post-content .collection-header small{color:#bbb;margin-left:5px}.posts-collapse .post-content .post-header{border-bottom:1px dashed #ccc;margin:30px 2px 0;padding-left:15px;position:relative;transition:border .2s ease-in-out}.posts-collapse .post-content .post-header::before{background:#bbb;border:1px solid #fff;left:-6px;position:absolute;top:.75em;transition:background .2s ease-in-out;border-radius:50%;content:' ';height:6px;width:6px}.posts-collapse .post-content .post-header:hover{border-bottom-color:#666}.posts-collapse .post-content .post-header:hover::before{background:#222}.posts-collapse .post-content .post-meta-container{display:inline;font-size:.75em;margin-right:10px}.posts-collapse .post-content .post-title{display:inline}.posts-collapse .post-content .post-title a{border-bottom:0;color:var(--link-color)}.posts-collapse .post-content::before{background:#f5f5f5;content:' ';height:100%;margin-left:-2px;position:absolute;top:1.25em;width:4px}.post-body{font-family:Lato,'PingFang SC','Microsoft YaHei',sans-serif;overflow-wrap:break-word}@media (min-width:1200px){.post-body{font-size:1.125em}}@media (min-width:992px){.post-body{text-align:justify}}.post-body h1 .header-anchor,.post-body h1 .headerlink,.post-body h2 .header-anchor,.post-body h2 .headerlink,.post-body h3 .header-anchor,.post-body h3 .headerlink,.post-body h4 .header-anchor,.post-body h4 .headerlink,.post-body h5 .header-anchor,.post-body h5 .headerlink,.post-body h6 .header-anchor,.post-body h6 .headerlink{border-bottom-style:none;color:inherit;float:right;font-size:.875em;margin-left:10px;opacity:0}.post-body h1 .header-anchor::before,.post-body h1 .headerlink::before,.post-body h2 .header-anchor::before,.post-body h2 .headerlink::before,.post-body h3 .header-anchor::before,.post-body h3 .headerlink::before,.post-body h4 .header-anchor::before,.post-body h4 .headerlink::before,.post-body h5 .header-anchor::before,.post-body h5 .headerlink::before,.post-body h6 .header-anchor::before,.post-body h6 .headerlink::before{content:'\f0c1';font-family:'Font Awesome 6 Free';font-weight:900}.post-body h1:hover .header-anchor,.post-body h1:hover .headerlink,.post-body h2:hover .header-anchor,.post-body h2:hover .headerlink,.post-body h3:hover .header-anchor,.post-body h3:hover .headerlink,.post-body h4:hover .header-anchor,.post-body h4:hover .headerlink,.post-body h5:hover .header-anchor,.post-body h5:hover .headerlink,.post-body h6:hover .header-anchor,.post-body h6:hover .headerlink{opacity:.5}.post-body h1:hover .header-anchor:hover,.post-body h1:hover .headerlink:hover,.post-body h2:hover .header-anchor:hover,.post-body h2:hover .headerlink:hover,.post-body h3:hover .header-anchor:hover,.post-body h3:hover .headerlink:hover,.post-body h4:hover .header-anchor:hover,.post-body h4:hover .headerlink:hover,.post-body h5:hover .header-anchor:hover,.post-body h5:hover .headerlink:hover,.post-body h6:hover .header-anchor:hover,.post-body h6:hover .headerlink:hover{opacity:1}.post-body .exturl .fa{font-size:.875em;margin-left:4px}.post-body .fancybox+figcaption,.post-body img+figcaption{color:#999;font-size:.875em;font-weight:700;line-height:1;margin:-15px auto 15px;text-align:center}.post-body embed,.post-body iframe,.post-body img,.post-body video{margin-bottom:20px}.post-body .video-container{height:0;margin-bottom:20px;overflow:hidden;padding-top:75%;position:relative;width:100%}.post-body .video-container embed,.post-body .video-container iframe,.post-body .video-container object{height:100%;left:0;margin:0;position:absolute;top:0;width:100%}.post-gallery{display:flex;min-height:200px}.post-gallery .post-gallery-image{flex:1}.post-gallery .post-gallery-image:not(:first-child){clip-path:polygon(40px 0,100% 0,100% 100%,0 100%);margin-left:-20px}.post-gallery .post-gallery-image:not(:last-child){margin-right:-20px}.post-gallery .post-gallery-image img{height:100%;object-fit:cover;opacity:1;width:100%}.posts-expand .post-gallery{margin-bottom:60px}.posts-collapse .post-gallery{margin:15px 0}.posts-expand .post-header{font-size:1.125em;margin-bottom:60px;text-align:center}.posts-expand .post-title{font-size:1.5em;font-weight:400;margin:initial;overflow-wrap:break-word}.posts-expand .post-title-link{border-bottom:0;color:var(--link-color);display:inline-block;position:relative}.posts-expand .post-title-link::before{background:var(--link-color);bottom:0;content:'';height:2px;left:0;position:absolute;transform:scaleX(0);transition:transform .2s ease-in-out;width:100%}.posts-expand .post-title-link:hover::before{transform:scaleX(1)}.posts-expand .post-title-link .fa{font-size:.875em;margin-left:5px}.post-sticky-flag{display:inline-block;margin-right:8px;transform:rotate(30deg)}.posts-expand .post-meta-container{color:#999;font-family:Lato,'PingFang SC','Microsoft YaHei',sans-serif;font-size:.75em;margin-top:3px}.posts-expand .post-meta-container .post-description{font-size:.875em;margin-top:2px}.posts-expand .post-meta-container time{border-bottom:1px dashed #999}.post-meta{display:flex;flex-wrap:wrap;justify-content:center}:not(.post-meta-break)+.post-meta-item::before{content:'|';margin:0 .5em}.post-meta-item-icon{margin-right:3px}@media (max-width:991px){.back-to-top{right:20px;opacity:.8}.post-body{text-align:justify}.post-meta-item-text{display:none}}.post-meta-break{flex-basis:100%;height:0}#busuanzi_container_page_pv{display:none}.post-nav{border-top:1px solid #eee;display:flex;gap:30px;justify-content:space-between;margin-top:1em;padding:10px 5px 0}.post-nav-item{flex:1}.post-nav-item a{border-bottom:0;display:block;font-size:.875em;line-height:1.6}.post-nav-item a:active{top:2px}.post-nav-item .fa{font-size:.75em}.post-nav-item:first-child .fa{margin-right:5px}.post-nav-item:last-child{text-align:right}.post-nav-item:last-child .fa{margin-left:5px}.post-footer{display:flex;flex-direction:column;justify-content:center}.post-eof{background:#ccc;height:1px;margin:80px auto 60px;width:8%}.post-block:last-of-type .post-eof{display:none}.post-copyright ul{list-style:none;overflow:hidden;padding:.5em 1em;position:relative;background:var(--card-bg-color);border-left:3px solid #ff2a2a;margin:1em 0 0}.post-copyright ul::after{content:'\f25e';font-family:'Font Awesome 6 Brands';font-size:200px;opacity:.1;position:absolute;right:-50px;top:-150px}.post-tags{margin-top:40px;text-align:center}.post-tags a{display:inline-block;font-size:.8125em}.post-tags a:not(:last-child){margin-right:10px}.social-like{border-top:1px solid #eee;font-size:.875em;margin-top:1em;padding-top:1em;display:flex;flex-wrap:wrap;justify-content:center}.social-like a{border-bottom:none}.reward-container{margin:1em 0 0;padding:1em 0;text-align:center}.reward-container button{background:0 0;color:#fc6423;cursor:pointer;line-height:2;padding:0 15px;border:2px solid #fc6423;border-radius:2px;outline:0;transition:.2s ease-in-out;vertical-align:text-top}.reward-container button:hover{background:#fc6423;color:#fff}.post-reward{display:none;padding-top:20px}.post-reward.active{display:block}.post-reward div{display:inline-block}.post-reward div span{display:block}.post-reward img{display:inline-block;margin:.8em 2em 0;max-width:100%;width:180px}@keyframes next-roll{from{transform:rotateZ(30deg)}to{transform:rotateZ(-30deg)}}.category-all-page .category-all-title{text-align:center}.category-all-page .category-all{margin-top:20px}.category-all-page .category-list{list-style:none;margin:0;padding:0}.category-all-page .category-list-item{margin:5px 10px}.category-all-page .category-list-count{color:#bbb}.category-all-page .category-list-count::before{content:' ('}.category-all-page .category-list-count::after{content:') '}.category-all-page .category-list-child{padding-left:10px}.event-list hr{background:#222;margin:20px 0 45px}.event-list hr::after{background:#222;color:#fff;content:'NOW';display:inline-block;font-weight:700;padding:0 5px}.event-list .event{--event-background:#222;--event-foreground:#bbb;--event-title:#fff;background:var(--event-background);padding:15px}.event-list .event .event-summary{border-bottom:0;color:var(--event-title);margin:0;padding:0 0 0 35px;position:relative}.event-list .event .event-summary::before{animation:1s ease-in-out infinite alternate dot-flash;background:var(--event-title);left:0;margin-top:-6px;position:absolute;top:50%;border-radius:50%;content:' ';height:12px;width:12px}.event-list .event:nth-of-type(odd) .event-summary::before{animation-delay:.5s}.event-list .event:not(:last-child){margin-bottom:20px}.event-list .event .event-relative-time{color:var(--event-foreground);display:inline-block;font-size:12px;font-weight:400;padding-left:12px}.event-list .event .event-details{color:var(--event-foreground);display:block;line-height:18px;padding:6px 0 6px 35px}.event-list .event .event-details::before{color:var(--event-foreground);display:inline-block;margin-right:9px;width:14px;font-family:'Font Awesome 6 Free';font-weight:900}.event-list .event .event-details.event-location::before{content:'\f041'}.event-list .event .event-details.event-duration::before{content:'\f017'}.event-list .event .event-details.event-description::before{content:'\f024'}.event-list .event-past{--event-background:#f5f5f5;--event-foreground:#999;--event-title:#222}@keyframes dot-flash{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}ul.breadcrumb{font-size:.75em;list-style:none;margin:1em 0;padding:0 2em;text-align:center}ul.breadcrumb li{display:inline}ul.breadcrumb li:not(:first-child)::before{content:'/\00a0';font-weight:400;padding:.5em}ul.breadcrumb li:last-child{font-weight:700}.tag-cloud{text-align:center}.tag-cloud a{display:inline-block;margin:10px}.tag-cloud-0{border-bottom-color:#aaa;color:#aaa}.tag-cloud-1{border-bottom-color:#9a9a9a;color:#9a9a9a}.tag-cloud-2{border-bottom-color:#8b8b8b;color:#8b8b8b}.tag-cloud-3{border-bottom-color:#7c7c7c;color:#7c7c7c}.tag-cloud-4{border-bottom-color:#6c6c6c;color:#6c6c6c}.tag-cloud-5{border-bottom-color:#5d5d5d;color:#5d5d5d}.tag-cloud-6{border-bottom-color:#4e4e4e;color:#4e4e4e}.tag-cloud-7{border-bottom-color:#3e3e3e;color:#3e3e3e}.tag-cloud-8{border-bottom-color:#2f2f2f;color:#2f2f2f}.tag-cloud-9{border-bottom-color:#202020;color:#202020}.tag-cloud-10{border-bottom-color:#111;color:#111}.search-active{overflow:hidden}.search-pop-overlay{background:rgba(0,0,0,0);display:flex;height:100%;left:0;position:fixed;top:0;transition:visibility .4s,background .4s;visibility:hidden;width:100%;z-index:40}.search-active .search-pop-overlay{background:rgba(0,0,0,.3);visibility:visible}.search-popup{background:var(--card-bg-color);border-radius:5px;height:80%;margin:auto;transform:scale(0);transition:transform .4s;width:700px}.search-active .search-popup{transform:scale(1)}@media (max-width:767px){.search-popup{border-radius:0;height:100%;width:100%}}.search-popup .popup-btn-close,.search-popup .search-icon{color:#999;font-size:18px;padding:0 10px}.search-popup .popup-btn-close{cursor:pointer}.search-popup .popup-btn-close:hover .fa{color:#222}.search-popup .search-header{background:#eee;border-top-left-radius:5px;border-top-right-radius:5px;display:flex;padding:5px}.search-popup input.search-input{background:0 0;border:0;outline:0;width:100%}.search-popup input.search-input::-webkit-search-cancel-button{display:none}.search-popup .search-result-container{height:calc(100% - 55px);overflow:auto;padding:5px 25px}.search-popup .search-result-container hr{margin:5px 0 10px}.search-popup .search-result-container hr:first-child{display:none}.search-popup .search-result-list{margin:0 5px;padding:0}.search-popup a.search-result-title{font-weight:700}.search-popup p.search-result{border-bottom:1px dashed #ccc;padding:5px 0}.search-input-container{flex-grow:1}.search-input-container form{padding:2px}.search-stats{align-items:center;display:flex;justify-content:space-between}.search-stats img{height:1em;margin:0}.algolia-pagination{margin:40px 0;opacity:1;padding:0}.algolia-pagination .pagination-item{display:inline-block}.algolia-pagination .current .page-number{cursor:default}.algolia-pagination .disabled-item{visibility:hidden}.use-motion .animated{animation-fill-mode:none;visibility:inherit}.use-motion .sidebar .animated{animation-fill-mode:both}header.header{background:var(--content-bg-color);border-radius:initial;box-shadow:initial}.main{align-items:stretch;display:flex;justify-content:space-between;margin:0 auto;width:calc(100% - 20px)}@media (max-width:767px){.main{width:auto}}@media (min-width:1200px){.main{width:1160px}}@media (min-width:1600px){.main{width:73%}}@media (max-width:991px){header.header{border-radius:initial}.main{display:block;width:auto}}.main-inner{border-radius:initial;box-sizing:border-box;width:calc(100% - 252px)}.footer-inner{padding-left:252px}@media (max-width:991px){.main-inner{border-radius:initial;width:100%}.footer-inner{padding-left:0;padding-right:0;width:auto}}.column{width:240px}.site-brand-container{background:var(--theme-color)}.site-meta{padding:20px 0}.site-nav-right .toggle,.site-nav-toggle .toggle{color:#fff}.site-nav-right .toggle .toggle-line,.site-nav-toggle .toggle .toggle-line{background:#fff}@media (min-width:768px) and (max-width:991px){.site-nav-right,.site-nav-toggle{display:flex;flex-direction:column;justify-content:center}.site-nav{--scroll-height:0;height:0;overflow:hidden;transition:height .2s ease-in-out,visibility .2s ease-in-out;visibility:hidden}body:not(.site-nav-on) .site-nav .animated{animation:none}body.site-nav-on .site-nav{height:var(--scroll-height);visibility:unset}}.menu .menu-item{display:block;margin:0}.menu .menu-item a{padding:5px 20px;position:relative;text-align:left;transition-property:background-color}.menu .menu-item .badge{background:#ccc;border-radius:10px;color:var(--content-bg-color);float:right;padding:2px 5px;text-shadow:1px 1px 0 rgba(0,0,0,.1)}.main-menu .menu-item-active::after{background:#bbb;border-radius:50%;content:' ';height:6px;margin-top:-3px;position:absolute;right:15px;top:50%;width:6px}.sub-menu{margin:0;padding:6px 0}.sub-menu .menu-item{display:inline-block}.sub-menu .menu-item a{background:0 0;margin:5px 10px;padding:initial}.sub-menu .menu-item a:hover{background:0 0;color:#fc6423}.sub-menu .menu-item-active{border-bottom-color:#fc6423;color:#fc6423}.sub-menu .menu-item-active:hover{border-bottom-color:#fc6423}.sidebar{position:-webkit-sticky;position:sticky;top:12px}@media (max-width:991px){.column{width:auto}.site-nav-on .site-brand-container{box-shadow:0 0 16px rgba(0,0,0,.5)}.menu .menu-item.menu-item-search,.sidebar{display:none}}.sidebar-inner{background:var(--content-bg-color);border-radius:initial;box-shadow:initial;box-sizing:border-box;color:var(--text-color);margin-top:12px;max-height:calc(100vh - 24px);visibility:hidden}.site-state-item{padding:0 10px}.sidebar .sidebar-button{border-bottom:1px dotted #ccc;border-top:1px dotted #ccc}.sidebar .sidebar-button button{border:0;color:#fc6423;display:block;width:100%}.sidebar .sidebar-button button:hover{background:0 0;border:0;color:#e34603}.links-of-author{display:flex;flex-wrap:wrap;justify-content:center}.links-of-author-item{margin:5px 0 0;width:50%}.links-of-author-item a{box-sizing:border-box;max-width:100%;overflow:hidden;padding:0 5px;text-overflow:ellipsis;white-space:nowrap;border-bottom:0;border-radius:4px;display:block}.links-of-author-item a:hover{background:var(--body-bg-color)}.main-inner{background:var(--content-bg-color);box-shadow:initial;padding:40px}@media (max-width:991px){.main-inner{padding:20px}}.sub-menu{border-bottom:1px solid #ddd}.post-block:first-of-type{padding-top:40px}@media (max-width:767px){.pagination{margin-bottom:10px}}</style><link as=style href=https://fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext onload=this.rel='stylesheet' rel=preload><link crossorigin=anonymous href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css integrity=sha256-yIDrPSXHZdOZhAqiBP7CKzIwMQmRCJ8UeB8Jo17YC4o= rel=stylesheet><link crossorigin=anonymous href=https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css integrity=sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE= rel=stylesheet><link crossorigin=anonymous href=https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/5.0.28/fancybox/fancybox.css integrity=sha256-6cQIC71/iBIYXFK+0RHAvwmjwWzkWd+r7v/BX3/vZDc= rel=stylesheet><script class=next-config data-name=main type=application/json>{"hostname":"nicksxs.me","root":"/","images":"/images","scheme":"Pisces","darkmode":false,"version":"8.19.1","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":true,"style":"default"},"fold":{"enable":false,"height":500},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":true,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"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 src=/js/config.js></script><meta content="learn from zero,技术博客，Nicksxs，史学森" name=description><meta content=website property=og:type><meta content="Nicksxs's Blog" property=og:title><meta content=https://nicksxs.me/index.html property=og:url><meta content="Nicksxs's Blog" property=og:site_name><meta content="learn from zero,技术博客，Nicksxs，史学森" property=og:description><meta content=zh_CN property=og:locale><meta content=Nicksxs property=article:author><meta content=Nicksxs,史学森,米方方,米方方的男朋友,森哥 property=article:tag><meta content=summary name=twitter:card><link href=https://nicksxs.me/ rel=canonical><script class=next-config data-name=page type=application/json>{"sidebar":"","isHome":true,"isPost":false,"lang":"zh-CN","comments":"","permalink":"","path":"index.html","title":""}</script><script class=next-config data-name=calendar type=application/json>""</script><title>Nicksxs's Blog - What hurts more, the pain of hard work or the pain of regret?</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 src=/js/third-party/analytics/google-analytics.js></script><script src=/js/third-party/analytics/baidu-analytics.js></script><script async src=https://hm.baidu.com/hm.js?20f33b3c0c0eff9b1522999c0015646d></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 class=use-motion 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><h1 class=site-title>Nicksxs's Blog</h1><i class=logo-line></i></a><p class=site-subtitle itemprop=description>What hurts more, the pain of hard work or the pain of regret?</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-about"><a href=/about/ rel=section><i class="fa fa-user fa-fw"></i>关于我</a><li class="menu-item menu-item-mirror"><a href=https://nicksxs.com/ rel=section target=_blank><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-top"><a href=/top/ rel=section><i class="fa fa-th fa-fw"></i>热度</a><li class="menu-item menu-item-sitemap"><a href=/sitemap.xml rel=section><i class="fa fa-sitemap fa-fw"></i>站点地图</a><li class="menu-item menu-item-commonweal"><a href=/404/ rel=section><i class="fa fa-heartbeat fa-fw"></i>公益 404</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></div><span class=popup-btn-close role=button><i class="fa fa-times-circle"></i></span></div><div class=search-result-container><div class=algolia-stats><hr></div><div class=algolia-hits></div><div class=algolia-pagination></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>learn from zero,技术博客，Nicksxs，史学森</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>347</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>175</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>307</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=post-gallery itemscope itemtype=http://schema.org/ImageGallery style=height:120px;min-height:120px><div class=post-gallery-row><a class="post-gallery-img fancybox" href=https://url.cn/LLWrL7gx itemprop=url itemscope itemtype=http://schema.org/ImageObject rel=gallery_ target=_blank><img alt=腾讯云推广 itemprop=contentUrl src=https://img.nicksxs.com/blog/345X200.jpg style=padding:12px></a></div></div><script charset=utf-8 src=/js/tagcloud.js></script><script charset=utf-8 src=/js/tagcanvas.js></script><div class=widget-wrap><div class="widget tagcloud" id=myCanvasContainer><canvas height=250 id=resCanvas width=250><ul class=tag-list itemprop=keywords><li class=tag-list-item><a class=tag-list-link href=/tags/2019/ rel=tag>2019</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/2020/ rel=tag>2020</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/2021/ rel=tag>2021</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/2022/ rel=tag>2022</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/2023/ rel=tag>2023</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/2PC/ rel=tag>2PC</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/360-%E5%85%A8%E5%AE%B6%E6%A1%B6/ rel=tag>360 全家桶</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/3PC/ rel=tag>3PC</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/3Sum-Closest/ rel=tag>3Sum Closest</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/AOP/ rel=tag>AOP</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Adaptive/ rel=tag>Adaptive</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Apollo/ rel=tag>Apollo</a><span class=tag-list-count>4</span><li class=tag-list-item><a class=tag-list-link href=/tags/AutoConfiguration/ rel=tag>AutoConfiguration</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/Binary-Tree/ rel=tag>Binary Tree</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/Broker/ rel=tag>Broker</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/C/ rel=tag>C</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/C/ rel=tag>C++</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/CachedThreadPool/ rel=tag>CachedThreadPool</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Comparator/ rel=tag>Comparator</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/DFS/ rel=tag>DFS</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/DP/ rel=tag>DP</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/DefaultMQPushConsumer/ rel=tag>DefaultMQPushConsumer</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Design-Patterns/ rel=tag>Design Patterns</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Disruptor/ rel=tag>Disruptor</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/Distributed-Lock/ rel=tag>Distributed Lock</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Docker/ rel=tag>Docker</a><span class=tag-list-count>6</span><li class=tag-list-item><a class=tag-list-link href=/tags/Dockerfile/ rel=tag>Dockerfile</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Druid/ rel=tag>Druid</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Dubbo/ rel=tag>Dubbo</a><span class=tag-list-count>6</span><li class=tag-list-item><a class=tag-list-link href=/tags/EagerThreadPool/ rel=tag>EagerThreadPool</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Evict/ rel=tag>Evict</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Filter/ rel=tag>Filter</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/First-Bad-Version/ rel=tag>First Bad Version</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/FixedThreadPool/ rel=tag>FixedThreadPool</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/G1/ rel=tag>G1</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/GC/ rel=tag>GC</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Garbage-First-Collector/ rel=tag>Garbage-First Collector</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Gogs/ rel=tag>Gogs</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Homebrew/ rel=tag>Homebrew</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/Inorder-Traversal/ rel=tag>Inorder Traversal</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Interceptor/ rel=tag>Interceptor</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Intersection-of-Two-Arrays/ rel=tag>Intersection of Two Arrays</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/JMap/ rel=tag>JMap</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/JPS/ rel=tag>JPS</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/JStack/ rel=tag>JStack</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/JVM/ rel=tag>JVM</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/Java/ rel=tag>Java</a><span class=tag-list-count>76</span><li class=tag-list-item><a class=tag-list-link href=/tags/LLM/ rel=tag>LLM</a><span class=tag-list-count>25</span><li class=tag-list-item><a class=tag-list-link href=/tags/Leetcode-42/ rel=tag>Leetcode 42</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/LimitedThreadPool/ rel=tag>LimitedThreadPool</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Linked-List/ rel=tag>Linked List</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/Lowest-Common-Ancestor-of-a-Binary-Tree/ rel=tag>Lowest Common Ancestor of a Binary Tree</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/MQ/ rel=tag>MQ</a><span class=tag-list-count>9</span><li class=tag-list-item><a class=tag-list-link href=/tags/Mac/ rel=tag>Mac</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/Maven/ rel=tag>Maven</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/Median-of-Two-Sorted-Arrays/ rel=tag>Median of Two Sorted Arrays</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Mybatis/ rel=tag>Mybatis</a><span class=tag-list-count>13</span><li class=tag-list-item><a class=tag-list-link href=/tags/Mysql/ rel=tag>Mysql</a><span class=tag-list-count>13</span><li class=tag-list-item><a class=tag-list-link href=/tags/NameServer/ rel=tag>NameServer</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/PHP/ rel=tag>PHP</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/Preorder-Traversal/ rel=tag>Preorder Traversal</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Print-FooBar-Alternately/ rel=tag>Print FooBar Alternately</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/RPC/ rel=tag>RPC</a><span class=tag-list-count>4</span><li class=tag-list-item><a class=tag-list-link href=/tags/Redis/ rel=tag>Redis</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/Remove-Duplicates-from-Sorted-List/ rel=tag>Remove Duplicates from Sorted List</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/RocketMQ/ rel=tag>RocketMQ</a><span class=tag-list-count>9</span><li class=tag-list-item><a class=tag-list-link href=/tags/Rotate-Image/ rel=tag>Rotate Image</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Rust/ rel=tag>Rust</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/SPI/ rel=tag>SPI</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/Servlet/ rel=tag>Servlet</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Sharding-Jdbc/ rel=tag>Sharding-Jdbc</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/Shift-2D-Grid/ rel=tag>Shift 2D Grid</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Singleton/ rel=tag>Singleton</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Spring/ rel=tag>Spring</a><span class=tag-list-count>7</span><li class=tag-list-item><a class=tag-list-link href=/tags/Spring-Event/ rel=tag>Spring Event</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/SpringBoot/ rel=tag>SpringBoot</a><span class=tag-list-count>22</span><li class=tag-list-item><a class=tag-list-link href=/tags/Sql%E6%B3%A8%E5%85%A5/ rel=tag>Sql注入</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Stream/ rel=tag>Stream</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Synchronized/ rel=tag>Synchronized</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/Thread-dump/ rel=tag>Thread dump</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/ThreadLocal/ rel=tag>ThreadLocal</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/ThreadPool/ rel=tag>ThreadPool</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Tomcat/ rel=tag>Tomcat</a><span class=tag-list-count>13</span><li class=tag-list-item><a class=tag-list-link href=/tags/Trapping-Rain-Water/ rel=tag>Trapping Rain Water</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/WeakReference/ rel=tag>WeakReference</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Web/ rel=tag>Web</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Webhook/ rel=tag>Webhook</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/Windows/ rel=tag>Windows</a><span class=tag-list-count>5</span><li class=tag-list-item><a class=tag-list-link href=/tags/WordPress/ rel=tag>WordPress</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/aqs/ rel=tag>aqs</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/await/ rel=tag>await</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/bloom-filter/ rel=tag>bloom filter</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/c/ rel=tag>c++</a><span class=tag-list-count>14</span><li class=tag-list-item><a class=tag-list-link href=/tags/cglib/ rel=tag>cglib</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/cgroup/ rel=tag>cgroup</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/cluster/ rel=tag>cluster</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/condition/ rel=tag>condition</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/dnsmasq/ rel=tag>dnsmasq</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/docker/ rel=tag>docker</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/dp/ rel=tag>dp</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/dubbo/ rel=tag>dubbo</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/echo/ rel=tag>echo</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/environment/ rel=tag>environment</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/gap-lock/ rel=tag>gap lock</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/gc/ rel=tag>gc</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/git/ rel=tag>git</a><span class=tag-list-count>4</span><li class=tag-list-item><a class=tag-list-link href=/tags/grep/ rel=tag>grep</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/hadoop/ rel=tag>hadoop</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/headscale/ rel=tag>headscale</a><span class=tag-list-count>6</span><li class=tag-list-item><a class=tag-list-link href=/tags/hexo/ rel=tag>hexo</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/http/ rel=tag>http</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/icu4c/ rel=tag>icu4c</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/im/ rel=tag>im</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/is-not-null/ rel=tag>is not null</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/is-null/ rel=tag>is null</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/j-u-c/ rel=tag>j.u.c</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/java/ rel=tag>java</a><span class=tag-list-count>54</span><li class=tag-list-item><a class=tag-list-link href=/tags/jvm/ rel=tag>jvm</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/leetcode/ rel=tag>leetcode</a><span class=tag-list-count>44</span><li class=tag-list-item><a class=tag-list-link href=/tags/leetcode-155/ rel=tag>leetcode 155</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/linked-list/ rel=tag>linked list</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/linux/ rel=tag>linux</a><span class=tag-list-count>7</span><li class=tag-list-item><a class=tag-list-link href=/tags/lock/ rel=tag>lock</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/mac/ rel=tag>mac</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/mfc/ rel=tag>mfc</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/min-stack/ rel=tag>min stack</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/mq/ rel=tag>mq</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/mvcc/ rel=tag>mvcc</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/mysql/ rel=tag>mysql</a><span class=tag-list-count>9</span><li class=tag-list-item><a class=tag-list-link href=/tags/namespace/ rel=tag>namespace</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/nas/ rel=tag>nas</a><span class=tag-list-count>6</span><li class=tag-list-item><a class=tag-list-link href=/tags/next-key-lock/ rel=tag>next-key lock</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/nginx/ rel=tag>nginx</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/nullsfirst/ rel=tag>nullsfirst</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/openresty/ rel=tag>openresty</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/openwrt/ rel=tag>openwrt</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/php/ rel=tag>php</a><span class=tag-list-count>6</span><li class=tag-list-item><a class=tag-list-link href=/tags/powershell/ rel=tag>powershell</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/procedure/ rel=tag>procedure</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/python/ rel=tag>python</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/read-view/ rel=tag>read view</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/redis/ rel=tag>redis</a><span class=tag-list-count>12</span><li class=tag-list-item><a class=tag-list-link href=/tags/scp/ rel=tag>scp</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/signal/ rel=tag>signal</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/sort/ rel=tag>sort</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/spark/ rel=tag>spark</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/ssh/ rel=tag>ssh</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/stack/ rel=tag>stack</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/stream/ rel=tag>stream</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/string/ rel=tag>string</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/swoole/ rel=tag>swoole</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/top/ rel=tag>top</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/trace/ rel=tag>trace</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/uname/ rel=tag>uname</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/unlock/ rel=tag>unlock</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/utf8/ rel=tag>utf8</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/utf8mb4/ rel=tag>utf8mb4</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/utf8mb4-0900-ai-ci/ rel=tag>utf8mb4_0900_ai_ci</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/utf8mb4-general-ci/ rel=tag>utf8mb4_general_ci</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/utf8mb4-unicode-ci/ rel=tag>utf8mb4_unicode_ci</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/value/ rel=tag>value</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/websocket/ rel=tag>websocket</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/windows/ rel=tag>windows</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/wsl/ rel=tag>wsl</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/zookeeper/ rel=tag>zookeeper</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/zsh/ rel=tag>zsh</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E4%B8%89%E9%98%B6%E6%AE%B5%E6%8F%90%E4%BA%A4/ rel=tag>三阶段提交</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E4%B8%8D%E5%8F%AF%E5%8F%98%E5%BC%95%E7%94%A8/ rel=tag>不可变引用</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E4%B8%9C%E4%BA%AC%E5%A5%A5%E8%BF%90%E4%BC%9A/ rel=tag>东京奥运会</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E4%B8%A4%E9%98%B6%E6%AE%B5%E6%8F%90%E4%BA%A4/ rel=tag>两阶段提交</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E4%B8%AD%E5%B1%B1%E8%B7%AF/ rel=tag>中山路</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E4%B8%AD%E5%BA%8F/ rel=tag>中序</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E4%B8%AD%E9%97%B4%E4%BB%B6/ rel=tag>中间件</a><span class=tag-list-count>4</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E4%B8%BE%E9%87%8D/ rel=tag>举重</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E4%B9%92%E4%B9%93%E7%90%83/ rel=tag>乒乓球</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E4%BA%8B%E5%8A%A1/ rel=tag>事务</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E4%BA%8C%E5%8F%89%E6%A0%91/ rel=tag>二叉树</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E4%BA%91%E6%9C%8D%E5%8A%A1%E5%99%A8/ rel=tag>云服务器</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E4%BA%92%E6%96%A5%E9%94%81/ rel=tag>互斥锁</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E4%BB%A3%E7%A0%81%E9%A2%98%E8%A7%A3/ rel=tag>代码题解</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E4%BF%AE%E7%94%B5%E8%84%91%E7%9A%84/ rel=tag>修电脑的</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%81%8F%E5%90%91%E9%94%81/ rel=tag>偏向锁</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%81%A5%E5%BA%B7%E7%A0%81/ rel=tag>健康码</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%85%AC%E4%BA%A4/ rel=tag>公交</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%85%AC%E4%BA%A4%E8%BD%A6/ rel=tag>公交车</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%86%85%E5%AD%98%E5%88%86%E5%B8%83/ rel=tag>内存分布</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%86%85%E5%AD%98%E6%B3%84%E6%BC%8F/ rel=tag>内存泄漏</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%87%86%E5%A4%87/ rel=tag>准备</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%87%8F%E8%82%A5/ rel=tag>减肥</a><span class=tag-list-count>7</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%88%86%E5%B8%83%E5%BC%8F%E4%BA%8B%E5%8A%A1/ rel=tag>分布式事务</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%88%86%E5%B8%83%E5%BC%8F%E9%94%81/ rel=tag>分布式锁</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%88%87%E7%89%87/ rel=tag>切片</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%88%9D%E5%A7%8B%E5%8C%96/ rel=tag>初始化</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%89%8A%E5%B3%B0%E5%A1%AB%E8%B0%B7/ rel=tag>削峰填谷</a><span class=tag-list-count>4</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%89%8D%E5%BA%8F/ rel=tag>前序</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%8A%A0%E5%A1%9E/ rel=tag>加塞</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%8A%A0%E8%BD%BD/ rel=tag>加载</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%8D%95%E4%BE%8B/ rel=tag>单例</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%8D%9A%E5%AE%A2%EF%BC%8C%E6%96%87%E7%AB%A0/ rel=tag>博客，文章</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%8E%A6%E9%97%A8/ rel=tag>厦门</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%8F%8C%E4%BA%B2%E5%A7%94%E6%B4%BE/ rel=tag>双亲委派</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%8F%91%E8%A1%8C%E7%89%88/ rel=tag>发行版</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%8F%A3%E7%BD%A9/ rel=tag>口罩</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%8F%AF%E5%8F%98%E5%BC%95%E7%94%A8/ rel=tag>可变引用</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%90%90%E6%A7%BD/ rel=tag>吐槽</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%9B%A4%E7%89%A9%E8%B5%84/ rel=tag>囤物资</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6/ rel=tag>垃圾回收</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%9F%BA%E7%A1%80%E8%AE%BE%E6%96%BD/ rel=tag>基础设施</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%A4%A7%E6%89%AB%E9%99%A4/ rel=tag>大扫除</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%AD%97%E7%AC%A6%E9%9B%86/ rel=tag>字符集</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%AE%89%E5%85%A8/ rel=tag>安全</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%AE%B9%E9%94%99%E6%9C%BA%E5%88%B6/ rel=tag>容错机制</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%AF%84%E7%94%9F%E8%99%AB/ rel=tag>寄生虫</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%B0%84%E5%87%BB/ rel=tag>射击</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%B0%8F%E6%8A%80%E5%B7%A7/ rel=tag>小技巧</a><span class=tag-list-count>10</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%B1%80%E5%8F%A3%E8%A1%97/ rel=tag>局口街</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%B7%A5%E5%85%B7/ rel=tag>工具</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%B8%83%E9%9A%86%E8%BF%87%E6%BB%A4%E5%99%A8/ rel=tag>布隆过滤器</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%B9%B2%E6%B4%BB/ rel=tag>干活</a><span class=tag-list-count>6</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%B9%B4%E4%B8%AD%E6%80%BB%E7%BB%93/ rel=tag>年中总结</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%B9%B4%E7%BB%88%E6%80%BB%E7%BB%93/ rel=tag>年终总结</a><span class=tag-list-count>4</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%B9%B6%E5%8F%91/ rel=tag>并发</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%B9%B8%E7%A6%8F%E4%BA%86%E5%90%97/ rel=tag>幸福了吗</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%B9%BB%E8%AF%BB/ rel=tag>幻读</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%BA%94%E7%94%A8/ rel=tag>应用</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%BC%80%E8%BD%A6/ rel=tag>开车</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%BC%B1%E5%BC%95%E7%94%A8/ rel=tag>弱引用</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E5%BD%B1%E8%AF%84/ rel=tag>影评</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%81%B6%E6%84%8F%E7%9B%97%E5%88%B7/ rel=tag>恶意盗刷</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%89%80%E6%9C%89%E6%9D%83/ rel=tag>所有权</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%89%93%E5%8D%A1/ rel=tag>打卡</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%89%B6%E6%A2%AF/ rel=tag>扶梯</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%8A%80%E5%B7%A7/ rel=tag>技巧</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%8A%80%E6%9C%AF/ rel=tag>技术</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%8A%98%E8%85%BE/ rel=tag>折腾</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%8B%96%E6%9B%B4/ rel=tag>拖更</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%8D%A2%E8%BD%A6%E7%89%8C/ rel=tag>换车牌</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%8E%92%E5%BA%8F/ rel=tag>排序</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%8E%A5%E9%9B%A8%E6%B0%B4/ rel=tag>接雨水</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%95%B0%E6%8D%AE%E6%BA%90%E5%8A%A8%E6%80%81%E5%88%87%E6%8D%A2/ rel=tag>数据源动态切换</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/ rel=tag>数据结构</a><span class=tag-list-count>11</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%96%B0%E8%AF%AD%E8%A8%80/ rel=tag>新语言</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%97%85%E6%B8%B8/ rel=tag>旅游</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%97%A5%E5%BF%97/ rel=tag>日志</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%9B%BE%E5%8E%9D%E5%9E%B5/ rel=tag>曾厝垵</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%9C%80%E5%B0%8F%E6%A0%88/ rel=tag>最小栈</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%9D%80%E4%BA%BA%E8%AF%9B%E5%BF%83/ rel=tag>杀人诛心</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%9D%AD%E5%B7%9E/ rel=tag>杭州</a><span class=tag-list-count>4</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%A0%87%E8%AE%B0%E6%95%B4%E7%90%86/ rel=tag>标记整理</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%A4%8D%E7%89%A9%E5%9B%AD/ rel=tag>植物园</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%B2%99%E8%8C%B6%E9%9D%A2/ rel=tag>沙茶面</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%B3%A8%E8%A7%A3/ rel=tag>注解</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%B5%B7%E8%9B%8E%E7%85%8E/ rel=tag>海蛎煎</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%B6%88%E6%81%AF%E9%98%9F%E5%88%97/ rel=tag>消息队列</a><span class=tag-list-count>9</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%B7%98%E6%B1%B0%E7%AD%96%E7%95%A5/ rel=tag>淘汰策略</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/ rel=tag>深度学习</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%BA%90%E7%A0%81/ rel=tag>源码</a><span class=tag-list-count>11</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/ rel=tag>源码解析</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E7%94%9F%E6%B4%BB/ rel=tag>生活</a><span class=tag-list-count>42</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E7%94%B5%E7%93%B6%E8%BD%A6/ rel=tag>电瓶车</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E7%96%AB%E6%83%85/ rel=tag>疫情</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E7%9C%8B%E4%B9%A6/ rel=tag>看书</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E7%9C%8B%E5%89%A7/ rel=tag>看剧</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E7%9F%A9%E9%98%B5/ rel=tag>矩阵</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E7%AB%AF%E5%8F%A3%E8%BD%AC%E5%8F%91/ rel=tag>端口转发</a><span class=tag-list-count>3</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E7%AE%97%E6%B3%95/ rel=tag>算法</a><span class=tag-list-count>5</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E7%B1%BB%E5%8A%A0%E8%BD%BD/ rel=tag>类加载</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E7%B3%9F%E5%BF%83%E4%BA%8B/ rel=tag>糟心事</a><span class=tag-list-count>5</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E7%B4%A2%E5%BC%95/ rel=tag>索引</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E7%BA%BF%E7%A8%8B%E6%B1%A0/ rel=tag>线程池</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E7%BC%93%E5%AD%98/ rel=tag>缓存</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E7%BC%93%E5%AD%98%E5%87%BB%E7%A9%BF/ rel=tag>缓存击穿</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E7%BC%93%E5%AD%98%E7%A9%BF%E9%80%8F/ rel=tag>缓存穿透</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E7%BC%93%E5%AD%98%E9%9B%AA%E5%B4%A9/ rel=tag>缓存雪崩</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E7%BC%96%E7%A0%81/ rel=tag>编码</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E7%BE%8E%E5%9B%BD/ rel=tag>美国</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%80%81%E7%94%B5%E8%84%91/ rel=tag>老电脑</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%87%AA%E5%8A%A8%E8%A3%85%E9%85%8D/ rel=tag>自动装配</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%87%AA%E6%97%8B/ rel=tag>自旋</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%87%AA%E9%80%82%E5%BA%94%E6%8B%93%E5%B1%95/ rel=tag>自适应拓展</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%A3%85%E7%94%B5%E8%84%91/ rel=tag>装电脑</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%A7%84%E5%88%99/ rel=tag>规则</a><span class=tag-list-count>4</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%A7%A3%E6%9E%90/ rel=tag>解析</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/ rel=tag>设计模式</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%AF%BB%E4%B9%A6/ rel=tag>读书</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%AF%BB%E5%90%8E%E6%84%9F/ rel=tag>读后感</a><span class=tag-list-count>4</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1/ rel=tag>负载均衡</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%B6%B3%E7%90%83/ rel=tag>足球</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%B7%91%E6%AD%A5/ rel=tag>跑步</a><span class=tag-list-count>7</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%B7%AF%E6%94%BF%E8%A7%84%E5%88%92/ rel=tag>路政规划</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%B7%AF%E7%94%B1%E5%99%A8/ rel=tag>路由器</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%B7%B3%E6%B0%B4/ rel=tag>跳水</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%B8%A9%E8%B8%8F/ rel=tag>踩踏</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%BD%AC%E4%B9%89/ rel=tag>转义</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%BD%BB%E9%87%8F%E7%BA%A7%E9%94%81/ rel=tag>轻量级锁</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%BF%87%E6%9C%9F%E7%AD%96%E7%95%A5/ rel=tag>过期策略</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%BF%90%E5%8A%A8/ rel=tag>运动</a><span class=tag-list-count>9</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E8%BF%9C%E7%A8%8B%E5%8A%9E%E5%85%AC/ rel=tag>远程办公</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E9%80%92%E5%BD%92/ rel=tag>递归</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E9%87%8D%E9%87%8F%E7%BA%A7%E9%94%81/ rel=tag>重量级锁</a><span class=tag-list-count>2</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E9%93%BE%E6%8E%A5/ rel=tag>链接</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E9%A2%98%E8%A7%A3/ rel=tag>题解</a><span class=tag-list-count>28</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E9%A9%AC%E6%88%8F%E5%9B%A2/ rel=tag>马戏团</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E9%AA%8C%E8%AF%81/ rel=tag>验证</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E9%AA%91%E8%BD%A6/ rel=tag>骑车</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E9%AB%98%E9%80%9F/ rel=tag>高速</a><span class=tag-list-count>1</span><li class=tag-list-item><a class=tag-list-link href=/tags/%E9%BC%93%E6%B5%AA%E5%B1%BF/ rel=tag>鼓浪屿</a><span class=tag-list-count>1</span></ul></canvas></div></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 index posts-expand"><div class=post-block><article class=post-content itemscope itemtype=http://schema.org/Article><link href=https://nicksxs.me/2025/11/30/%E6%9D%A5%E7%9C%8B%E4%B8%8B%E6%88%91%E8%A3%85%E5%A4%87%E4%BA%865060TI%E6%98%BE%E5%8D%A1%E7%9A%84gpt-oss%E6%A8%A1%E5%9E%8B%E8%A1%A8%E7%8E%B0/ 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="learn from zero,技术博客，Nicksxs，史学森" itemprop=description></span><span hidden itemprop=post itemscope itemtype=http://schema.org/CreativeWork><meta content="undefined | Nicksxs's Blog" itemprop=name><meta itemprop=description></span><header class=post-header><h2 itemprop="name headline" class=post-title><a class=post-title-link href=/2025/11/30/%E6%9D%A5%E7%9C%8B%E4%B8%8B%E6%88%91%E8%A3%85%E5%A4%87%E4%BA%865060TI%E6%98%BE%E5%8D%A1%E7%9A%84gpt-oss%E6%A8%A1%E5%9E%8B%E8%A1%A8%E7%8E%B0/ itemprop=url>来看下我装备了5060TI显卡的gpt-oss模型表现</a></h2><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-30 21:53:14" datetime=2025-11-30T21:53:14+08:00>2025-11-30</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 leancloud_visitors" data-flag-title=来看下我装备了5060TI显卡的gpt-oss模型表现 id=/2025/11/30/%E6%9D%A5%E7%9C%8B%E4%B8%8B%E6%88%91%E8%A3%85%E5%A4%87%E4%BA%865060TI%E6%98%BE%E5%8D%A1%E7%9A%84gpt-oss%E6%A8%A1%E5%9E%8B%E8%A1%A8%E7%8E%B0/ title=阅读次数><span class=post-meta-item-icon><i class="far fa-eye"></i> </span><span class=post-meta-item-text>阅读次数：</span> <span class=leancloud-visitors-count></span> </span><span class=post-meta-item><span class=post-meta-item-icon><i class="far fa-comment"></i> </span><span class=post-meta-item-text>Disqus：</span> <a href=/2025/11/30/%E6%9D%A5%E7%9C%8B%E4%B8%8B%E6%88%91%E8%A3%85%E5%A4%87%E4%BA%865060TI%E6%98%BE%E5%8D%A1%E7%9A%84gpt-oss%E6%A8%A1%E5%9E%8B%E8%A1%A8%E7%8E%B0/#disqus_thread itemprop=discussionUrl title=disqus><span class="post-comments-count disqus-comment-count" data-disqus-identifier=2025/11/30/来看下我装备了5060TI显卡的gpt-oss模型表现/ itemprop=commentCount></span></a></span></div></div></header><div class=post-body itemprop=articleBody><p>之前在我的3060笔记本上试了有显卡的情况下gpt-oss的表现，只能说勉强可以用，比mbp上是可用了很多，毕竟那玩意除非完全把内存都让给gpt-oss，不然都跑不起来，只是生成速度还是有点感人，差不多就4.66token/s,一直觉得能在本地跑个稍微能用点的模型还是种比较不错的体验，所以在最近买了个5060TI，因为这个是最便宜的16G显存的家用显卡了，当然排除各种魔改卡，比如镭7这种，当然喜欢折腾的也可以买来玩玩，硬件上要玩起来还是需要比较多时间的<br>今天用同样的prompt来再对比测试下<br>3060 6g笔记本显卡<br>prompt是<br><code>帮我用react写一个todo应用，样式要美观精致</code><br>我们先对比下效果<br><img data-src=https://img.nicksxs.me/uPic/sCyypJ.png><br>生成的还是比较简介，重要的是正确的<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></pre><td class=code><pre><span class=line>1.77 token/s</span><br><span class=line></span><br><span class=line>•</span><br><span class=line></span><br><span class=line>2926 token</span><br><span class=line></span><br><span class=line>•</span><br><span class=line></span><br><span class=line>首个token用时 2.21 s</span><br><span class=line></span><br><span class=line>•</span><br><span class=line></span><br><span class=line>停止原因: 检测到 EOS token</span><br></pre></table></figure><p>对比的是<br>5060ti 16g显卡<br>我们也来看下效果<br><img data-src=https://img.nicksxs.me/uPic/QchgJQ.png><br>样式稍稍有点问题，但是能一次运行成功<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></pre><td class=code><pre><span class=line>27.91 tok/sec</span><br><span class=line></span><br><span class=line>•</span><br><span class=line></span><br><span class=line>2236 tokens</span><br><span class=line></span><br><span class=line>•</span><br><span class=line></span><br><span class=line>0.41s to first token</span><br><span class=line></span><br><span class=line>•</span><br><span class=line></span><br><span class=line>Stop reason: EOS Token Found</span><br></pre></table></figure><p>对比两次运行，其实3060在一开始think的时候也耗时比较久，后续生成的速度差异也是比较大的<br>这简单对比比较能看出来能把整个模型权重加载进显存还是有比较大优势的，不过既然本身可以不全加载进显存，我是不是也可以试试32B的模型，毕竟有16+32的显存组合，16显存+32是内存共享的，下次可以体验试试看，比如32B的qwen模型</div><footer class=post-footer><div class=post-eof></div></footer></article></div><div class=post-block><article class=post-content itemscope itemtype=http://schema.org/Article><link href=https://nicksxs.me/2025/11/23/%E6%9D%A5%E7%9C%8B%E4%B8%8Bgoogle%E6%9C%80%E6%96%B0%E5%8A%9B%E4%BD%9Cgemini-3-pro%E7%9A%84%E6%B0%B4%E5%B9%B3%E5%A6%82%E4%BD%95/ 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="learn from zero,技术博客，Nicksxs，史学森" itemprop=description></span><span hidden itemprop=post itemscope itemtype=http://schema.org/CreativeWork><meta content="undefined | Nicksxs's Blog" itemprop=name><meta itemprop=description></span><header class=post-header><h2 itemprop="name headline" class=post-title><a class=post-title-link href=/2025/11/23/%E6%9D%A5%E7%9C%8B%E4%B8%8Bgoogle%E6%9C%80%E6%96%B0%E5%8A%9B%E4%BD%9Cgemini-3-pro%E7%9A%84%E6%B0%B4%E5%B9%B3%E5%A6%82%E4%BD%95/ itemprop=url>来看下google最新力作Antigravity的水平如何</a></h2><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-23 23:36:25" datetime=2025-11-23T23:36:25+08:00>2025-11-23</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 leancloud_visitors" data-flag-title=来看下google最新力作Antigravity的水平如何 id=/2025/11/23/%E6%9D%A5%E7%9C%8B%E4%B8%8Bgoogle%E6%9C%80%E6%96%B0%E5%8A%9B%E4%BD%9Cgemini-3-pro%E7%9A%84%E6%B0%B4%E5%B9%B3%E5%A6%82%E4%BD%95/ title=阅读次数><span class=post-meta-item-icon><i class="far fa-eye"></i> </span><span class=post-meta-item-text>阅读次数：</span> <span class=leancloud-visitors-count></span> </span><span class=post-meta-item><span class=post-meta-item-icon><i class="far fa-comment"></i> </span><span class=post-meta-item-text>Disqus：</span> <a href=/2025/11/23/%E6%9D%A5%E7%9C%8B%E4%B8%8Bgoogle%E6%9C%80%E6%96%B0%E5%8A%9B%E4%BD%9Cgemini-3-pro%E7%9A%84%E6%B0%B4%E5%B9%B3%E5%A6%82%E4%BD%95/#disqus_thread itemprop=discussionUrl title=disqus><span class="post-comments-count disqus-comment-count" data-disqus-identifier=2025/11/23/来看下google最新力作gemini-3-pro的水平如何/ itemprop=commentCount></span></a></span></div></div></header><div class=post-body itemprop=articleBody><p>这是一个类似于cursor的智能ide，并且内置了最新的gemini-3-pro<br><img data-src=https://img.nicksxs.me/uPic/qI56HV.png><br>界面也是类似于cursor，但是需要一些网络技巧，这个自行解决哈<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>首先也是会生成plan，接着就执行，<br><img data-src=https://img.nicksxs.me/uPic/bP08uw.png><br>生成的还是比较顺利的，也没有修改，但是它的有个优势点是会自行开启一个chrome，对页面进行dom检查和截图检查<br>并且还会生成一个Walkthrough，包括截图和验证结果<br><img data-src=https://img.nicksxs.me/uPic/Tstgqh.png><br>只是这个生成的感觉过分的为了保持UI的相似性，或者说可能从语义理解来说感觉有点问题，首先得是个todo应用，只是样式像Instagram<br>因为也有因为中断导致最终是两次生成，我又重新生成了一次，但貌似语义理解的确是个问题<br><img data-src=https://img.nicksxs.me/uPic/V9X7Jv.png><br>当然生成的效果跟Instagram的相似度是最高的，可能还需要再学习下</div><footer class=post-footer><div class=post-eof></div></footer></article></div><div class=post-block><article class=post-content itemscope itemtype=http://schema.org/Article><link href=https://nicksxs.me/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/ 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="learn from zero,技术博客，Nicksxs，史学森" itemprop=description></span><span hidden itemprop=post itemscope itemtype=http://schema.org/CreativeWork><meta content="undefined | Nicksxs's Blog" itemprop=name><meta itemprop=description></span><header class=post-header><h2 itemprop="name headline" class=post-title><a class=post-title-link 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/ itemprop=url>基于iflow的kimi模型来体验代码生成</a></h2><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-16 19:14:42 / 修改时间：19:14:50" datetime=2025-11-16T19:14:42+08:00>2025-11-16</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 leancloud_visitors" data-flag-title=基于iflow的kimi模型来体验代码生成 id=/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/ title=阅读次数><span class=post-meta-item-icon><i class="far fa-eye"></i> </span><span class=post-meta-item-text>阅读次数：</span> <span class=leancloud-visitors-count></span> </span><span class=post-meta-item><span class=post-meta-item-icon><i class="far fa-comment"></i> </span><span class=post-meta-item-text>Disqus：</span> <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/#disqus_thread itemprop=discussionUrl title=disqus><span class="post-comments-count disqus-comment-count" data-disqus-identifier=2025/11/16/基于iflow的kimi模型来体验代码生成/ itemprop=commentCount></span></a></span></div></div></header><div class=post-body itemprop=articleBody><p>首先是生成plan<br><img data-src=https://img.nicksxs.me/uPic/TcFxPi.png><p>完整生成完后还是无法运行，多次把问题提给kimi也没有解决<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><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></pre><td class=code><pre><span class=line>Compiled with warnings.</span><br><span class=line></span><br><span class=line>[eslint]</span><br><span class=line>src/components/TodoItem.tsx</span><br><span class=line> Line 4:19: 'FiX' is defined but never used @typescript-eslint/no-unused-vars</span><br><span class=line> Line 4:108: 'FiClock' is defined but never used @typescript-eslint/no-unused-vars</span><br><span class=line> Line 213:7: 'ActionBar' is assigned a value but never used @typescript-eslint/no-unused-vars</span><br><span class=line> Line 222:7: 'ActionButtons' is assigned a value but never used @typescript-eslint/no-unused-vars</span><br><span class=line> Line 334:7: 'Timestamp' is assigned a value but never used @typescript-eslint/no-unused-vars</span><br><span class=line></span><br><span class=line>Search for the keywords to learn more about each warning.</span><br><span class=line>To ignore, add // eslint-disable-next-line to the line before.</span><br><span class=line></span><br><span class=line>WARNING in [eslint]</span><br><span class=line>src/components/TodoItem.tsx</span><br><span class=line> Line 4:19: 'FiX' is defined but never used @typescript-eslint/no-unused-vars</span><br><span class=line> Line 4:108: 'FiClock' is defined but never used @typescript-eslint/no-unused-vars</span><br><span class=line> Line 213:7: 'ActionBar' is assigned a value but never used @typescript-eslint/no-unused-vars</span><br><span class=line> Line 222:7: 'ActionButtons' is assigned a value but never used @typescript-eslint/no-unused-vars</span><br><span class=line> Line 334:7: 'Timestamp' is assigned a value but never used @typescript-eslint/no-unused-vars</span><br><span class=line></span><br><span class=line>webpack compiled with 1 warning</span><br><span class=line>Files successfully emitted, waiting for typecheck results...</span><br><span class=line>Issues checking in progress...</span><br><span class=line>ERROR in src/components/Header.tsx:270:16</span><br><span class=line>TS2786: 'FiSearch' cannot be used as a JSX component.</span><br><span class=line> Its return type 'ReactNode' is not a valid JSX element.</span><br><span class=line> Type 'undefined' is not assignable to type 'Element | null'.</span><br><span class=line> 268 | <SearchContainer></span><br><span class=line> 269 | <SearchIcon></span><br><span class=line> > 270 | <FiSearch {...({ size: 16 } as any)} /></span><br><span class=line> | ^^^^^^^^</span><br><span class=line> 271 | </SearchIcon></span><br><span class=line> 272 | <SearchInput</span><br><span class=line> 273 | type="text"</span><br><span class=line></span><br><span class=line>ERROR in src/components/Header.tsx:300:18</span><br><span class=line>TS2786: 'FiHome' cannot be used as a JSX component.</span><br><span class=line> Its return type 'ReactNode' is not a valid JSX element.</span><br><span class=line> 298 | <NavIcons></span><br><span class=line> 299 | <NavIcon></span><br><span class=line> > 300 | <FiHome {...({ size: 24 } as any)} /></span><br><span class=line> | ^^^^^^</span><br><span class=line> 301 | </NavIcon></span><br><span class=line> 302 | <NavIcon></span><br><span class=line> 303 | <FiCompass {...({ size: 24 } as any)} /></span><br><span class=line></span><br><span class=line></span><br><span class=line>ERROR in src/components/TodoItem.tsx:453:43</span><br><span class=line>TS2786: 'FiTag' cannot be used as a JSX component.</span><br><span class=line> Its return type 'ReactNode' is not a valid JSX element.</span><br><span class=line> 451 | {todo.priority === 'high' ? '🔴 高' : todo.priority === 'medium' ? '🟡 中' : '🟢 低'}</span><br><span class=line> 452 | </PriorityBadge></span><br><span class=line> > 453 | {todo.category && <CategoryTag><FiTag size={10} /> #{todo.category}</CategoryTag>}</span><br><span class=line> | ^^^^^</span><br><span class=line> 454 |</span><br><span class=line> 455 | <div style={{ position: 'relative' }}></span><br><span class=line> 456 | <MoreButton onClick={() => setShowDropdown(!showDropdown)}></span><br><span class=line></span><br><span class=line></span><br></pre></table></figure><p>没办法，后面我好好思考了下，前面因为响应一直很慢，我退出了几次又继续使用同一个prompt，但是实际的模型是需要读取原先写到一半的代码，这样其实每次的生成上下文就被搞混乱了，所以重新清理了代码，再给kimi一次机会，这次就慢慢等了<br>首先也是列出了todo list<br><img data-src=https://img.nicksxs.me/uPic/IzMoRN.png><br>完成后主体的代码也不多<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></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 <span class=keyword>from</span> <span class=string>'@emotion/styled'</span>;</span><br><span class=line><span class=keyword>import</span> { motion, <span class="title class_">AnimatePresence</span> } <span class=keyword>from</span> <span class=string>'framer-motion'</span>;</span><br><span class=line><span class=keyword>import</span> { <span class="title class_">Plus</span> } <span class=keyword>from</span> <span class=string>'lucide-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="title class_">TodoForm</span> <span class=keyword>from</span> <span class=string>'./TodoForm'</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>export</span> <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 class=attr>priority</span>: <span class=string>'low'</span> | <span class=string>'medium'</span> | <span class=string>'high'</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_">Container</span> = <span class="title function_">styled</span>(motion.<span class=property>div</span>)<span class=string>`</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> backdrop-filter: blur(20px);</span></span><br><span class=line><span class=string> border-radius: 24px;</span></span><br><span class=line><span class=string> box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);</span></span><br><span class=line><span class=string> width: 100%;</span></span><br><span class=line><span class=string> max-width: 500px;</span></span><br><span class=line><span class=string> min-height: 600px;</span></span><br><span class=line><span class=string> padding: 30px;</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><br><span class=line><span class=keyword>const</span> <span class="title class_">Header</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> margin-bottom: 30px;</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_">Title</span> = styled.<span class=property>h1</span><span class=string>`</span></span><br><span class=line><span class=string> font-size: 2.5rem;</span></span><br><span class=line><span class=string> font-weight: 700;</span></span><br><span class=line><span class=string> background: linear-gradient(135deg, #667eea 0%, #764ba2 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> background-clip: text;</span></span><br><span class=line><span class=string> margin: 0;</span></span><br><span class=line><span class=string> letter-spacing: -0.02em;</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_">Subtitle</span> = styled.<span class=property>p</span><span class=string>`</span></span><br><span class=line><span class=string> color: #6b7280;</span></span><br><span class=line><span class=string> font-size: 1rem;</span></span><br><span class=line><span class=string> margin: 8px 0 0 0;</span></span><br><span class=line><span class=string> font-weight: 500;</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_">TodoList</span> = styled.<span class=property>div</span><span class=string>`</span></span><br><span class=line><span class=string> margin-top: 30px;</span></span><br><span class=line><span class=string> max-height: 400px;</span></span><br><span class=line><span class=string> overflow-y: auto;</span></span><br><span class=line><span class=string> padding-right: 10px;</span></span><br><span class=line><span class=string></span></span><br><span class=line><span class=string> &::-webkit-scrollbar {</span></span><br><span class=line><span class=string> width: 6px;</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> &::-webkit-scrollbar-track {</span></span><br><span class=line><span class=string> background: #f1f5f9;</span></span><br><span class=line><span class=string> border-radius: 3px;</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> &::-webkit-scrollbar-thumb {</span></span><br><span class=line><span class=string> background: #cbd5e1;</span></span><br><span class=line><span class=string> border-radius: 3px;</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> &::-webkit-scrollbar-thumb:hover {</span></span><br><span class=line><span class=string> background: #94a3b8;</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_">EmptyState</span> = <span class="title function_">styled</span>(motion.<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: #9ca3af;</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: 4rem;</span></span><br><span class=line><span class=string> margin-bottom: 16px;</span></span><br><span class=line><span class=string> opacity: 0.5;</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_">EmptyText</span> = styled.<span class=property>p</span><span class=string>`</span></span><br><span class=line><span class=string> font-size: 1.1rem;</span></span><br><span class=line><span class=string> margin: 0;</span></span><br><span class=line><span class=string> font-weight: 500;</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_">Stats</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> align-items: center;</span></span><br><span class=line><span class=string> margin-top: 20px;</span></span><br><span class=line><span class=string> padding-top: 20px;</span></span><br><span class=line><span class=string> border-top: 1px solid #e5e7eb;</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>`</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: #667eea;</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.875rem;</span></span><br><span class=line><span class=string> color: #6b7280;</span></span><br><span class=line><span class=string> margin-top: 4px;</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_">TodoApp</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> [showForm, setShowForm] = <span class="title function_">useState</span>(<span class=literal>false</span>);</span><br><span class=line> <span class=keyword>const</span> [editingTodo, setEditingTodo] = useState<<span class="title class_">Todo</span> | <span class=literal>null</span>>(<span class=literal>null</span>);</span><br><span class=line></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="title function_">setTodos</span>(<span class="title class_">JSON</span>.<span class="title function_">parse</span>(savedTodos).<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><br><span class=line> }, []);</span><br><span class=line></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>text: <span class=built_in>string</span>, priority: <span class=string>'low'</span> | <span class=string>'medium'</span> | <span class=string>'high'</span></span>) => {</span><br><span class=line> <span class=keyword>const</span> <span class=attr>newTodo</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> text,</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> priority</span><br><span class=line> };</span><br><span class=line> <span class="title function_">setTodos</span>([newTodo, ...todos]);</span><br><span class=line> <span class="title function_">setShowForm</span>(<span class=literal>false</span>);</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>, newPriority: <span class=string>'low'</span> | <span class=string>'medium'</span> | <span class=string>'high'</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>text</span>: newText, <span class=attr>priority</span>: newPriority } : todo</span><br><span class=line> ));</span><br><span class=line> <span class="title function_">setEditingTodo</span>(<span class=literal>null</span>);</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 class=name>Container</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>initial</span>=<span class=string>{{</span> <span class=attr>opacity:</span> <span class=attr>0</span>, <span class=attr>y:</span> <span class=attr>20</span> }}</span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>animate</span>=<span class=string>{{</span> <span class=attr>opacity:</span> <span class=attr>1</span>, <span class=attr>y:</span> <span class=attr>0</span> }}</span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>transition</span>=<span class=string>{{</span> <span class=attr>duration:</span> <span class=attr>0.6</span>, <span class=attr>ease:</span> "<span class=attr>easeOut</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><<span class=name>Header</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>Title</span>></span>My Tasks<span class=tag></<span class=name>Title</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>Subtitle</span>></span>Stay organized and productive<span class=tag></<span class=name>Subtitle</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></span><br><span class=line><span class=language-xml> {showForm && (</span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>TodoForm</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>onSubmit</span>=<span class=string>{addTodo}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>onCancel</span>=<span class=string>{()</span> =></span> setShowForm(false)}</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></span></span><br><span class=line><span class=language-xml> {editingTodo && (</span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>TodoForm</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>todo</span>=<span class=string>{editingTodo}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>onSubmit</span>=<span class=string>{(text,</span> <span class=attr>priority</span>) =></span> editTodo(editingTodo.id, text, priority)}</span></span><br><span class=line><span class=language-xml> onCancel={() => setEditingTodo(null)}</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></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> <span class=tag><<span class=name>AnimatePresence</span>></span></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 class=name>EmptyState</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>initial</span>=<span class=string>{{</span> <span class=attr>opacity:</span> <span class=attr>0</span> }}</span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>animate</span>=<span class=string>{{</span> <span class=attr>opacity:</span> <span class=attr>1</span> }}</span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>exit</span>=<span class=string>{{</span> <span class=attr>opacity:</span> <span class=attr>0</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><<span class=name>EmptyIcon</span>></span>📝<span class=tag></<span class=name>EmptyIcon</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>EmptyText</span>></span>No tasks yet. Add one to get started!<span class=tag></<span class=name>EmptyText</span>></span></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></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>onToggle</span>=<span class=string>{toggleTodo}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>onDelete</span>=<span class=string>{deleteTodo}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>onEdit</span>=<span class=string>{setEditingTodo}</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></span><br><span class=line><span class=language-xml> <span class=tag></<span class=name>AnimatePresence</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=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 class=name>Stats</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></<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>Total<span class=tag></<span class=name>StatLabel</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>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></<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>Completed<span class=tag></<span class=name>StatLabel</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>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></<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>Remaining<span class=tag></<span class=name>StatLabel</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>Stats</span>></span></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> {!showForm && !editingTodo && (</span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>motion.button</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>style</span>=<span class=string>{{</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>position:</span> '<span class=attr>absolute</span>',</span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>bottom:</span> '<span class=attr>30px</span>',</span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>right:</span> '<span class=attr>30px</span>',</span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>width:</span> '<span class=attr>60px</span>',</span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>height:</span> '<span class=attr>60px</span>',</span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>borderRadius:</span> '<span class=attr>50</span>%',</span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>background:</span> '<span class=attr>linear-gradient</span>(<span class=attr>135deg</span>, #<span class=attr>667eea</span> <span class=attr>0</span>%, #<span class=attr>764ba2</span> <span class=attr>100</span>%)',</span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>border:</span> '<span class=attr>none</span>',</span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>color:</span> '<span class=attr>white</span>',</span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>fontSize:</span> '<span class=attr>24px</span>',</span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>cursor:</span> '<span class=attr>pointer</span>',</span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>boxShadow:</span> '<span class=attr>0</span> <span class=attr>10px</span> <span class=attr>25px</span> <span class=attr>rgba</span>(<span class=attr>102</span>, <span class=attr>126</span>, <span class=attr>234</span>, <span class=attr>0.4</span>)',</span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>display:</span> '<span class=attr>flex</span>',</span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>alignItems:</span> '<span class=attr>center</span>',</span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>justifyContent:</span> '<span class=attr>center</span>'</span></span></span><br><span class=line><span class=tag><span class=language-xml> }}</span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>whileHover</span>=<span class=string>{{</span> <span class=attr>scale:</span> <span class=attr>1.1</span> }}</span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>whileTap</span>=<span class=string>{{</span> <span class=attr>scale:</span> <span class=attr>0.95</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> setShowForm(true)}</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>Plus</span> <span class=attr>size</span>=<span class=string>{24}</span> /></span></span></span><br><span class=line><span class=language-xml> <span class=tag></<span class=name>motion.button</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>Container</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_">TodoApp</span>;</span><br></pre></table></figure><p>一开始运行出现了个问题，<br><code>新增的时候报错 Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform.</code><br>就继续让kimi来解决这个问题，结果一次就改好了，<br><img data-src=https://img.nicksxs.me/uPic/eZeAMi.png><br>整体看起来也还行，可能的确是我一开始中断了几次导致上下文太复杂，只是不确定是模型消耗资源比较多还是什么原因响应有时候会很慢，可能免费的资源池是共用的，高峰期就比较慢了</div><footer class=post-footer><div class=post-eof></div></footer></article></div><div class=post-block><article class=post-content itemscope itemtype=http://schema.org/Article><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="learn from zero,技术博客，Nicksxs，史学森" itemprop=description></span><span hidden itemprop=post itemscope itemtype=http://schema.org/CreativeWork><meta content="undefined | Nicksxs's Blog" itemprop=name><meta itemprop=description></span><header class=post-header><h2 itemprop="name headline" class=post-title><a class=post-title-link href=/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=url>基于iflow的qwen模型来体验代码生成</a></h2><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 leancloud_visitors" data-flag-title=基于iflow的qwen模型来体验代码生成 id=/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=阅读次数><span class=post-meta-item-icon><i class="far fa-eye"></i> </span><span class=post-meta-item-text>阅读次数：</span> <span class=leancloud-visitors-count></span> </span><span class=post-meta-item><span class=post-meta-item-icon><i class="far fa-comment"></i> </span><span class=post-meta-item-text>Disqus：</span> <a href=/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/#disqus_thread itemprop=discussionUrl title=disqus><span class="post-comments-count disqus-comment-count" data-disqus-identifier=2025/11/09/基于iflow的qwen模型来体验代码生成/ itemprop=commentCount></span></a></span></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<HTMLInputElement></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></<span class=name>AppTitle</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></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></<span class=name>AddButton</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></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></<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></<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></<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></<span class=name>DeleteButton</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>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></<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></<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></<span class=name>StatLabel</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>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></<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></<span class=name>StatLabel</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>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></<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></<span class=name>StatLabel</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>StatsContainer</span>></span></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></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></<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></<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></<span class=name>p</span>></span></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></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>AppContainer</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag></></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 data-src=https://img.nicksxs.me/uPic/KjP8ep.png><br>另外在运行过程中把之前说的问题截到图了，这就是我说的广告，也做的太快了<br><img data-src=https://img.nicksxs.me/uPic/vn6CDl.png><br>好像是我碰到的第一个带有广告的，不过其他家都是需要为api用量付费的，免费的有点代价也正常<br>另外在调整UI的过程中我们需要让iflow在每一步变更前先把当前代码提交，这样方便我们在多次ui调整中选择最佳的版本</div><footer class=post-footer><div class=post-eof></div></footer></article></div><div class=post-block><article class=post-content itemscope itemtype=http://schema.org/Article><link href=https://nicksxs.me/2025/11/02/%E4%BD%93%E9%AA%8C%E5%BF%83%E6%B5%81%E5%8A%A9%E6%89%8Biflow/ 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="learn from zero,技术博客，Nicksxs，史学森" itemprop=description></span><span hidden itemprop=post itemscope itemtype=http://schema.org/CreativeWork><meta content="undefined | Nicksxs's Blog" itemprop=name><meta itemprop=description></span><header class=post-header><h2 itemprop="name headline" class=post-title><a class=post-title-link href=/2025/11/02/%E4%BD%93%E9%AA%8C%E5%BF%83%E6%B5%81%E5%8A%A9%E6%89%8Biflow/ itemprop=url>体验心流助手iflow</a></h2><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-02 18:49:41" datetime=2025-11-02T18:49:41+08:00>2025-11-02</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 leancloud_visitors" data-flag-title=体验心流助手iflow id=/2025/11/02/%E4%BD%93%E9%AA%8C%E5%BF%83%E6%B5%81%E5%8A%A9%E6%89%8Biflow/ title=阅读次数><span class=post-meta-item-icon><i class="far fa-eye"></i> </span><span class=post-meta-item-text>阅读次数：</span> <span class=leancloud-visitors-count></span> </span><span class=post-meta-item><span class=post-meta-item-icon><i class="far fa-comment"></i> </span><span class=post-meta-item-text>Disqus：</span> <a href=/2025/11/02/%E4%BD%93%E9%AA%8C%E5%BF%83%E6%B5%81%E5%8A%A9%E6%89%8Biflow/#disqus_thread itemprop=discussionUrl title=disqus><span class="post-comments-count disqus-comment-count" data-disqus-identifier=2025/11/02/体验心流助手iflow/ itemprop=commentCount></span></a></span></div></div></header><div class=post-body itemprop=articleBody><p>最近一直在找这些AI编程助手，想找个cc的八分平替，刚好前阵子在朋友圈看到iflow-cli，据说是可以免费用GLM4.6这些模型，<br>首先安装也很简单<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>bash -c "$(curl -fsSL https://gitee.com/iflow-ai/iflow-cli/raw/main/install.sh)"</span><br></pre></table></figure><p>但是这里他会判断nodejs的版本，需要22及以上版本<br>这个可以用nvm切换，不过这里比较好奇，应该是nodejs的普及率太高了所以都用它做来会更方便<br>切换以后运行上面的命令，首次运行直接回进去类似于claude code的交互界面，<br>当然我还是让它给我修复下roo代码<br><img data-src=https://img.nicksxs.me/uPic/mF1bTB.png><br>第一个错误是启动<code>npm run dev</code> 的时候就报的，后面是在chrome控制台的<br><img data-src=https://img.nicksxs.me/uPic/aNl65f.png><br>这两个问题改完之后终于这个“庞大的”工程终于起来了，原因只是为了做roocode测试，并且我的prompt加了“精美的”这种关键词，结果用copilot改了半天index.css中依赖tailwind的问题，<br>这次总算用iflow-cli给修好了，但也是能跑起来<br><img data-src=https://273d100fa7947b37e52ceb4bedab7c0a.r2.cloudflarestorage.com/blog/uPic/6OqBrO.png><br>可以看到页面是比之前的都精美了，但是样式还有点不对，有点偏右，而且经过copilot的修改，可能配色也已经不太一样了<br>iflow总结用下来有两个问题，第一个是有时候会莫名其妙超时，非常久，有一次我放着没管，一晚上都没结果<br>第二个是广告，在等待prompt结果的时候，会有一行文字的广告，这个体验非常差，当然如果是为了免费也没办法，希望能有一定的控制，后续可以看看它支持的模型里哪个生成的比较好</div><footer class=post-footer><div class=post-eof></div></footer></article></div><nav class=pagination><span class="page-number current">1</span><a class=page-number href=/page/2/>2</a><span class=space>…</span><a class=page-number href=/page/70/>70</a><a class="extend next" aria-label=下一页 href=/page/2/ rel=next title=下一页><i class="fa fa-angle-right"></i></a></nav></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>2025</span><span class=with-love><i class="fa fa-heart"></i> </span><span class=author itemprop=copyrightHolder>Nicksxs</span></div><div class=busuanzi-count><span class=post-meta-item id=busuanzi_container_site_uv><span class=post-meta-item-icon><i class="fa fa-user"></i> </span><span class=site-uv title=总访客量><span id=busuanzi_value_site_uv></span> </span></span><span class=post-meta-item id=busuanzi_container_site_pv><span class=post-meta-item-icon><i class="fa fa-eye"></i> </span><span class=site-pv title=总访问量><span id=busuanzi_value_site_pv></span></span></span></div></div></footer><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 crossorigin=anonymous integrity=sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY= src=https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js></script><script crossorigin=anonymous integrity=sha256-ytMJGN3toR+a84u7g7NuHm91VIR06Q41kMWDr2pq7Zo= src=https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/5.0.28/fancybox/fancybox.umd.js></script><script crossorigin=anonymous integrity=sha256-mOFREFhqmHeQbXpK2lp4nA3qooVgACfh88fpJftLBbc= src=https://cdnjs.cloudflare.com/ajax/libs/lozad.js/1.16.0/lozad.min.js></script><script src=/js/comments.js></script><script src=/js/utils.js></script><script src=/js/motion.js></script><script src=/js/next-boot.js></script><script crossorigin=anonymous integrity=sha256-DABVk+hYj0mdUzo+7ViJC6cwLahQIejFvC+my2M/wfM= src=https://cdnjs.cloudflare.com/ajax/libs/algoliasearch/4.20.0/algoliasearch-lite.umd.js></script><script crossorigin=anonymous integrity=sha256-9242vN47QUX50UG5Gf5XDO1YREWCEJRyXHofh5fsl24= src=https://cdnjs.cloudflare.com/ajax/libs/instantsearch.js/4.60.0/instantsearch.production.min.js></script><script src=/js/third-party/search/algolia-search.js></script><script src=/js/third-party/fancybox.js></script><script async src=https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js></script><script class=next-config data-name=leancloud_visitors type=application/json>{"enable":true,"app_id":"ysza182Vghlqjdt7QiwGLLJy-gzGzoHsz","app_key":"s9GDqbn7gnGGkusf66YRVccw","server_url":"https://leancloud.cn","security":true}</script><script src=/js/third-party/statistics/lean-analytics.js></script><script crossorigin=anonymous integrity=sha256-yvJQOINiH9fWemHn0vCA5lsHWJaHs6/ZmO+1Ft04SvM= src=https://cdnjs.cloudflare.com/ajax/libs/quicklink/2.3.0/quicklink.umd.js></script><script class=next-config data-name=quicklink type=application/json>{"enable":false,"home":false,"archive":false,"delay":true,"timeout":3000,"priority":true,"url":"https://nicksxs.me/"}</script><script src=/js/third-party/quicklink.js></script><script class=next-config data-name=disqus type=application/json>{"enable":true,"shortname":"nicksxs","count":true,"i18n":{"disqus":"disqus"}}</script><script src=/js/third-party/comments/disqus.js></script>
|