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
198 KiB
9 lines
198 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>335</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>14</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>2</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/09/07/%E7%94%A8gpt-oss%E9%9B%B6%E6%94%B9%E5%8A%A8%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAtodo%E5%BA%94%E7%94%A8/ itemprop=mainEntityOfPage><span hidden itemprop=author itemscope itemtype=http://schema.org/Person><meta content=/uploads/avatar.jpg itemprop=image><meta content=Nicksxs itemprop=name></span><span hidden itemprop=publisher itemscope itemtype=http://schema.org/Organization><meta content="Nicksxs's Blog" itemprop=name><meta content="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/09/07/%E7%94%A8gpt-oss%E9%9B%B6%E6%94%B9%E5%8A%A8%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAtodo%E5%BA%94%E7%94%A8/ itemprop=url>用gpt-oss零改动实现一个todo应用</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-09-07 18:55:20" datetime=2025-09-07T18:55:20+08:00>2025-09-07</time> </span><span class=post-meta-item><span class=post-meta-item-icon><i class="far fa-folder"></i> </span><span class=post-meta-item-text>分类于</span> <span itemprop=about itemscope itemtype=http://schema.org/Thing><a href=/categories/LLM/ itemprop=url rel=index><span itemprop=name>LLM</span></a> </span></span><span class="post-meta-item leancloud_visitors" data-flag-title=用gpt-oss零改动实现一个todo应用 id=/2025/09/07/%E7%94%A8gpt-oss%E9%9B%B6%E6%94%B9%E5%8A%A8%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAtodo%E5%BA%94%E7%94%A8/ title=阅读次数><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/09/07/%E7%94%A8gpt-oss%E9%9B%B6%E6%94%B9%E5%8A%A8%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAtodo%E5%BA%94%E7%94%A8/#disqus_thread itemprop=discussionUrl title=disqus><span class="post-comments-count disqus-comment-count" data-disqus-identifier=2025/09/07/用gpt-oss零改动实现一个todo应用/ itemprop=commentCount></span></a></span></div></div></header><div class=post-body itemprop=articleBody><h2 id=上次是文字型的，这次我们来写点代码试试，看看效果怎么样首先肯定是比较简单的尝试开始写一个todo应用，主要是看能不能零改动就跑起来用最简单的提示词然后就给出了代码><a class=headerlink href=#上次是文字型的，这次我们来写点代码试试，看看效果怎么样首先肯定是比较简单的尝试开始写一个todo应用，主要是看能不能零改动就跑起来用最简单的提示词然后就给出了代码 title=上次是文字型的，这次我们来写点代码试试，看看效果怎么样首先肯定是比较简单的尝试开始写一个todo应用，主要是看能不能零改动就跑起来用最简单的提示词然后就给出了代码></a>上次是文字型的，这次我们来写点代码试试，看看效果怎么样<br>首先肯定是比较简单的尝试开始<br>写一个todo应用，主要是看能不能零改动就跑起来<br>用最简单的提示词<br><figure class="highlight plaintext"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line>帮我写一个todo应用，基于react</span><br></pre></table></figure><br>然后就给出了代码</h2><p>下面给你一个 <strong>最小可运行</strong> 的 Todo 应用示例，基于 <strong>React + Vite</strong>（如果你习惯 <code>create-react-app</code>，思路几乎完全一样，只是文件夹结构略有差异）。<br>应用包含：<table><thead><tr><th>组件<th>作用<tbody><tr><td><code>TodoInput</code><td>新增条目输入框<tr><td><code>TodoItem</code><td>单个待办项（支持完成/取消、删除）<tr><td><code>TodoList</code><td>渲染 Todo 列表<tr><td><code>TodoApp</code>/<code>App</code><td>主容器，维护全局 <code>todos</code> 状态</table><blockquote><p><strong>安装依赖</strong><figure class="highlight plaintext"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br></pre><td class=code><pre><span class=line>npm create vite@latest todo-app --template react</span><br><span class=line>cd todo-app</span><br><span class=line>npm i</span><br><span class=line>npm run dev</span><br></pre></table></figure></blockquote><p>下面按文件展示完整代码（把对应文件替换或新建即可）。<hr><h2 id=1️⃣-src-main-jsx><a title="1️⃣ src/main.jsx" class=headerlink href=#1️⃣-src-main-jsx></a>1️⃣ <code>src/main.jsx</code></h2><figure class="highlight jsx"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br></pre><td class=code><pre><span class=line><span class=keyword>import</span> <span class="title class_">React</span> <span class=keyword>from</span> <span class=string>"react"</span>;</span><br><span class=line><span class=keyword>import</span> { createRoot } <span class=keyword>from</span> <span class=string>"react-dom/client"</span>;</span><br><span class=line><span class=keyword>import</span> <span class="title class_">App</span> <span class=keyword>from</span> <span class=string>"./App"</span>;</span><br><span class=line><span class=keyword>import</span> <span class=string>"./index.css"</span>;</span><br><span class=line></span><br><span class=line><span class="title function_">createRoot</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class=string>"root"</span>)).<span class="title function_">render</span>(<span class=language-xml><span class=tag><<span class=name>App</span> /></span></span>);</span><br></pre></table></figure><hr><h2 id=2️⃣-src-App-jsx><a title="2️⃣ src/App.jsx" class=headerlink href=#2️⃣-src-App-jsx></a>2️⃣ <code>src/App.jsx</code></h2><figure class="highlight jsx"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br><span class=line>15</span><br><span class=line>16</span><br><span class=line>17</span><br><span class=line>18</span><br><span class=line>19</span><br><span class=line>20</span><br><span class=line>21</span><br><span class=line>22</span><br><span class=line>23</span><br><span class=line>24</span><br><span class=line>25</span><br><span class=line>26</span><br><span class=line>27</span><br><span class=line>28</span><br><span class=line>29</span><br><span class=line>30</span><br><span class=line>31</span><br><span class=line>32</span><br><span class=line>33</span><br><span class=line>34</span><br><span class=line>35</span><br><span class=line>36</span><br><span class=line>37</span><br><span class=line>38</span><br><span class=line>39</span><br><span class=line>40</span><br><span class=line>41</span><br><span class=line>42</span><br><span class=line>43</span><br><span class=line>44</span><br><span class=line>45</span><br><span class=line>46</span><br><span class=line>47</span><br><span class=line>48</span><br><span class=line>49</span><br><span class=line>50</span><br><span class=line>51</span><br><span class=line>52</span><br><span class=line>53</span><br><span class=line>54</span><br><span class=line>55</span><br><span class=line>56</span><br><span class=line>57</span><br><span class=line>58</span><br><span class=line>59</span><br><span class=line>60</span><br><span class=line>61</span><br><span class=line>62</span><br></pre><td class=code><pre><span class=line><span class=keyword>import</span> <span class="title class_">React</span>, { useState, useEffect } <span class=keyword>from</span> <span class=string>"react"</span>;</span><br><span class=line><span class=keyword>import</span> <span class="title class_">TodoInput</span> <span class=keyword>from</span> <span class=string>"./components/TodoInput"</span>;</span><br><span class=line><span class=keyword>import</span> <span class="title class_">TodoList</span> <span class=keyword>from</span> <span class=string>"./components/TodoList"</span>;</span><br><span class=line><span class=keyword>import</span> <span class=string>"./App.css"</span>;</span><br><span class=line></span><br><span class=line><span class=comment>/**</span></span><br><span class=line><span class=comment> * 关键点：</span></span><br><span class=line><span class=comment> * 1. 用 useState 存放 todos</span></span><br><span class=line><span class=comment> * 2. 用 useEffect 做本地存储同步，仅在组件挂载时读取一次</span></span><br><span class=line><span class=comment> * 3. 处理增删改的通用方法</span></span><br><span class=line><span class=comment> */</span></span><br><span class=line><span class=keyword>function</span> <span class="title function_">App</span>(<span class=params></span>) {</span><br><span class=line> <span class=keyword>const</span> [todos, setTodos] = <span class="title function_">useState</span>([]);</span><br><span class=line></span><br><span class=line> <span class=comment>// 从 localStorage 初始化</span></span><br><span class=line> <span class="title function_">useEffect</span>(<span class=function>() =></span> {</span><br><span class=line> <span class=keyword>const</span> stored = <span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class=string>"todos"</span>);</span><br><span class=line> <span class=keyword>if</span> (stored) {</span><br><span class=line> <span class="title function_">setTodos</span>(<span class="title class_">JSON</span>.<span class="title function_">parse</span>(stored));</span><br><span class=line> }</span><br><span class=line> }, []);</span><br><span class=line></span><br><span class=line> <span class=comment>// 每次 todos 变更时同步到 localStorage</span></span><br><span class=line> <span class="title function_">useEffect</span>(<span class=function>() =></span> {</span><br><span class=line> <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class=string>"todos"</span>, <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(todos));</span><br><span class=line> }, [todos]);</span><br><span class=line></span><br><span class=line> <span class=keyword>const</span> <span class="title function_">addTodo</span> = (<span class=params>title</span>) => {</span><br><span class=line> <span class=keyword>const</span> newTodo = {</span><br><span class=line> <span class=attr>id</span>: <span class="title class_">Date</span>.<span class="title function_">now</span>(),</span><br><span class=line> title,</span><br><span class=line> <span class=attr>completed</span>: <span class=literal>false</span>,</span><br><span class=line> };</span><br><span class=line> <span class="title function_">setTodos</span>([newTodo, ...todos]);</span><br><span class=line> };</span><br><span class=line></span><br><span class=line> <span class=keyword>const</span> <span class="title function_">toggleComplete</span> = (<span class=params>id</span>) => {</span><br><span class=line> <span class="title function_">setTodos</span>(<span class=function>(<span class=params>prev</span>) =></span></span><br><span class=line> prev.<span class="title function_">map</span>(<span class=function>(<span class=params>t</span>) =></span></span><br><span class=line> t.<span class=property>id</span> === id ? { ...t, <span class=attr>completed</span>: !t.<span class=property>completed</span> } : t</span><br><span class=line> )</span><br><span class=line> );</span><br><span class=line> };</span><br><span class=line></span><br><span class=line> <span class=keyword>const</span> <span class="title function_">deleteTodo</span> = (<span class=params>id</span>) => {</span><br><span class=line> <span class="title function_">setTodos</span>(<span class=function>(<span class=params>prev</span>) =></span> prev.<span class="title function_">filter</span>(<span class=function>(<span class=params>t</span>) =></span> t.<span class=property>id</span> !== id));</span><br><span class=line> };</span><br><span class=line></span><br><span class=line> <span class=keyword>return</span> (</span><br><span class=line> <span class=language-xml><span class=tag><<span class=name>div</span> <span class=attr>className</span>=<span class=string>"app-container"</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>h1</span>></span>Todo List<span class=tag></<span class=name>h1</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>TodoInput</span> <span class=attr>addTodo</span>=<span class=string>{addTodo}</span> /></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>TodoList</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>todos</span>=<span class=string>{todos}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>toggleComplete</span>=<span class=string>{toggleComplete}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>deleteTodo</span>=<span class=string>{deleteTodo}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> /></span></span></span><br><span class=line><span class=language-xml> <span class=tag></<span class=name>div</span>></span></span></span><br><span class=line> );</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=keyword>export</span> <span class=keyword>default</span> <span class="title class_">App</span>;</span><br></pre></table></figure><hr><h2 id=3️⃣-src-components-TodoInput-jsx><a title="3️⃣ src/components/TodoInput.jsx" class=headerlink href=#3️⃣-src-components-TodoInput-jsx></a>3️⃣ <code>src/components/TodoInput.jsx</code></h2><figure class="highlight jsx"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br><span class=line>15</span><br><span class=line>16</span><br><span class=line>17</span><br><span class=line>18</span><br><span class=line>19</span><br><span class=line>20</span><br><span class=line>21</span><br><span class=line>22</span><br><span class=line>23</span><br><span class=line>24</span><br><span class=line>25</span><br><span class=line>26</span><br><span class=line>27</span><br><span class=line>28</span><br><span class=line>29</span><br></pre><td class=code><pre><span class=line><span class=keyword>import</span> <span class="title class_">React</span>, { useState } <span class=keyword>from</span> <span class=string>"react"</span>;</span><br><span class=line><span class=keyword>import</span> <span class=string>"./TodoInput.css"</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>const</span> <span class="title function_">TodoInput</span> = (<span class=params>{ addTodo }</span>) => {</span><br><span class=line> <span class=keyword>const</span> [value, setValue] = <span class="title function_">useState</span>(<span class=string>""</span>);</span><br><span class=line></span><br><span class=line> <span class=keyword>const</span> <span class="title function_">handleSubmit</span> = (<span class=params>e</span>) => {</span><br><span class=line> e.<span class="title function_">preventDefault</span>();</span><br><span class=line> <span class=keyword>const</span> trimmed = value.<span class="title function_">trim</span>();</span><br><span class=line> <span class=keyword>if</span> (trimmed) {</span><br><span class=line> <span class="title function_">addTodo</span>(trimmed);</span><br><span class=line> <span class="title function_">setValue</span>(<span class=string>""</span>);</span><br><span class=line> }</span><br><span class=line> };</span><br><span class=line></span><br><span class=line> <span class=keyword>return</span> (</span><br><span class=line> <span class=language-xml><span class=tag><<span class=name>form</span> <span class=attr>className</span>=<span class=string>"todo-input"</span> <span class=attr>onSubmit</span>=<span class=string>{handleSubmit}</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>input</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>type</span>=<span class=string>"text"</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>placeholder</span>=<span class=string>"Add a new todo..."</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>value</span>=<span class=string>{value}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>onChange</span>=<span class=string>{(e)</span> =></span> setValue(e.target.value)}</span></span><br><span class=line><span class=language-xml> /></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>button</span> <span class=attr>type</span>=<span class=string>"submit"</span>></span>Add<span class=tag></<span class=name>button</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag></<span class=name>form</span>></span></span></span><br><span class=line> );</span><br><span class=line>};</span><br><span class=line></span><br><span class=line><span class=keyword>export</span> <span class=keyword>default</span> <span class="title class_">TodoInput</span>;</span><br></pre></table></figure><hr><h2 id=4️⃣-src-components-TodoItem-jsx><a title="4️⃣ src/components/TodoItem.jsx" class=headerlink href=#4️⃣-src-components-TodoItem-jsx></a>4️⃣ <code>src/components/TodoItem.jsx</code></h2><figure class="highlight jsx"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br><span class=line>15</span><br><span class=line>16</span><br><span class=line>17</span><br><span class=line>18</span><br><span class=line>19</span><br><span class=line>20</span><br><span class=line>21</span><br><span class=line>22</span><br><span class=line>23</span><br><span class=line>24</span><br></pre><td class=code><pre><span class=line><span class=keyword>import</span> <span class="title class_">React</span> <span class=keyword>from</span> <span class=string>"react"</span>;</span><br><span class=line><span class=keyword>import</span> <span class=string>"./TodoItem.css"</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>const</span> <span class="title function_">TodoItem</span> = (<span class=params>{ todo, toggleComplete, deleteTodo }</span>) => {</span><br><span class=line> <span class=keyword>return</span> (</span><br><span class=line> <span class=language-xml><span class=tag><<span class=name>div</span> <span class=attr>className</span>=<span class=string>"todo-item"</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>label</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>input</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>type</span>=<span class=string>"checkbox"</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>checked</span>=<span class=string>{todo.completed}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>onChange</span>=<span class=string>{()</span> =></span> toggleComplete(todo.id)}</span></span><br><span class=line><span class=language-xml> /></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>span</span> <span class=attr>className</span>=<span class=string>{todo.completed</span> ? "<span class=attr>completed</span>" <span class=attr>:</span> ""}></span></span></span><br><span class=line><span class=language-xml> {todo.title}</span></span><br><span class=line><span class=language-xml> <span class=tag></<span class=name>span</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag></<span class=name>label</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>button</span> <span class=attr>className</span>=<span class=string>"delete-btn"</span> <span class=attr>onClick</span>=<span class=string>{()</span> =></span> deleteTodo(todo.id)}></span></span><br><span class=line><span class=language-xml> ×</span></span><br><span class=line><span class=language-xml> <span class=tag></<span class=name>button</span>></span></span></span><br><span class=line><span class=language-xml> <span class=tag></<span class=name>div</span>></span></span></span><br><span class=line> );</span><br><span class=line>};</span><br><span class=line></span><br><span class=line><span class=keyword>export</span> <span class=keyword>default</span> <span class="title class_">TodoItem</span>;</span><br></pre></table></figure><hr><h2 id=5️⃣-src-components-TodoList-jsx><a title="5️⃣ src/components/TodoList.jsx" class=headerlink href=#5️⃣-src-components-TodoList-jsx></a>5️⃣ <code>src/components/TodoList.jsx</code></h2><figure class="highlight jsx"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br><span class=line>15</span><br><span class=line>16</span><br><span class=line>17</span><br><span class=line>18</span><br><span class=line>19</span><br><span class=line>20</span><br><span class=line>21</span><br><span class=line>22</span><br><span class=line>23</span><br><span class=line>24</span><br></pre><td class=code><pre><span class=line><span class=keyword>import</span> <span class="title class_">React</span> <span class=keyword>from</span> <span class=string>"react"</span>;</span><br><span class=line><span class=keyword>import</span> <span class="title class_">TodoItem</span> <span class=keyword>from</span> <span class=string>"./TodoItem"</span>;</span><br><span class=line><span class=keyword>import</span> <span class=string>"./TodoList.css"</span>;</span><br><span class=line></span><br><span class=line><span class=keyword>const</span> <span class="title function_">TodoList</span> = (<span class=params>{ todos, toggleComplete, deleteTodo }</span>) => {</span><br><span class=line> <span class=keyword>if</span> (todos.<span class=property>length</span> === <span class=number>0</span>) {</span><br><span class=line> <span class=keyword>return</span> <span class=language-xml><span class=tag><<span class=name>p</span> <span class=attr>className</span>=<span class=string>"empty-msg"</span>></span>No todos yet. Add something!<span class=tag></<span class=name>p</span>></span></span>;</span><br><span class=line> }</span><br><span class=line></span><br><span class=line> <span class=keyword>return</span> (</span><br><span class=line> <span class=language-xml><span class=tag><<span class=name>div</span> <span class=attr>className</span>=<span class=string>"todo-list"</span>></span></span></span><br><span class=line><span class=language-xml> {todos.map((todo) => (</span></span><br><span class=line><span class=language-xml> <span class=tag><<span class=name>TodoItem</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>key</span>=<span class=string>{todo.id}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>todo</span>=<span class=string>{todo}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>toggleComplete</span>=<span class=string>{toggleComplete}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> <span class=attr>deleteTodo</span>=<span class=string>{deleteTodo}</span></span></span></span><br><span class=line><span class=tag><span class=language-xml> /></span></span></span><br><span class=line><span class=language-xml> ))}</span></span><br><span class=line><span class=language-xml> <span class=tag></<span class=name>div</span>></span></span></span><br><span class=line> );</span><br><span class=line>};</span><br><span class=line></span><br><span class=line><span class=keyword>export</span> <span class=keyword>default</span> <span class="title class_">TodoList</span>;</span><br></pre></table></figure><hr><h2 id=6️⃣-src-index-css（可选，简单全局样式）><a title="6️⃣ src/index.css（可选，简单全局样式）" class=headerlink href=#6️⃣-src-index-css（可选，简单全局样式）></a>6️⃣ <code>src/index.css</code>（可选，简单全局样式）</h2><figure class="highlight css"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br></pre><td class=code><pre><span class=line><span class=comment>/* 让页面充满屏幕并居中 */</span></span><br><span class=line><span class=selector-tag>html</span>, <span class=selector-tag>body</span>, <span class=selector-id>#root</span> {</span><br><span class=line> <span class=attribute>height</span>: <span class=number>100%</span>;</span><br><span class=line> <span class=attribute>margin</span>: <span class=number>0</span>;</span><br><span class=line> <span class=attribute>font-family</span>: system-ui, sans-serif;</span><br><span class=line>}</span><br><span class=line><span class=selector-tag>body</span> {</span><br><span class=line> <span class=attribute>display</span>: flex;</span><br><span class=line> <span class=attribute>justify-content</span>: center;</span><br><span class=line> <span class=attribute>align-items</span>: flex-start;</span><br><span class=line> <span class=attribute>background</span>: <span class=number>#f5f5f5</span>;</span><br><span class=line>}</span><br></pre></table></figure><hr><h2 id=7️⃣-src-App-css><a title="7️⃣ src/App.css" class=headerlink href=#7️⃣-src-App-css></a>7️⃣ <code>src/App.css</code></h2><figure class="highlight css"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br></pre><td class=code><pre><span class=line><span class=selector-class>.app-container</span> {</span><br><span class=line> <span class=attribute>width</span>: <span class=number>90%</span>;</span><br><span class=line> <span class=attribute>max-width</span>: <span class=number>480px</span>;</span><br><span class=line> <span class=attribute>background</span>: <span class=number>#fff</span>;</span><br><span class=line> <span class=attribute>padding</span>: <span class=number>20px</span>;</span><br><span class=line> <span class=attribute>margin-top</span>: <span class=number>40px</span>;</span><br><span class=line> <span class=attribute>box-shadow</span>: <span class=number>0</span> <span class=number>2px</span> <span class=number>10px</span> <span class=built_in>rgba</span>(<span class=number>0</span>,<span class=number>0</span>,<span class=number>0</span>,<span class=number>0.1</span>);</span><br><span class=line> <span class=attribute>border-radius</span>: <span class=number>8px</span>;</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=selector-class>.app-container</span> <span class=selector-tag>h1</span> {</span><br><span class=line> <span class=attribute>text-align</span>: center;</span><br><span class=line> <span class=attribute>margin-bottom</span>: <span class=number>20px</span>;</span><br><span class=line>}</span><br></pre></table></figure><hr><h2 id=8️⃣-src-components-TodoInput-css><a title="8️⃣ src/components/TodoInput.css" class=headerlink href=#8️⃣-src-components-TodoInput-css></a>8️⃣ <code>src/components/TodoInput.css</code></h2><figure class="highlight css"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br><span class=line>15</span><br><span class=line>16</span><br><span class=line>17</span><br><span class=line>18</span><br><span class=line>19</span><br><span class=line>20</span><br><span class=line>21</span><br><span class=line>22</span><br><span class=line>23</span><br><span class=line>24</span><br></pre><td class=code><pre><span class=line><span class=selector-class>.todo-input</span> {</span><br><span class=line> <span class=attribute>display</span>: flex;</span><br><span class=line> <span class=attribute>margin-bottom</span>: <span class=number>20px</span>;</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=selector-class>.todo-input</span> <span class=selector-tag>input</span> {</span><br><span class=line> <span class=attribute>flex</span>: <span class=number>1</span>;</span><br><span class=line> <span class=attribute>padding</span>: <span class=number>8px</span> <span class=number>12px</span>;</span><br><span class=line> <span class=attribute>font-size</span>: <span class=number>16px</span>;</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=selector-class>.todo-input</span> <span class=selector-tag>button</span> {</span><br><span class=line> <span class=attribute>padding</span>: <span class=number>8px</span> <span class=number>12px</span>;</span><br><span class=line> <span class=attribute>margin-left</span>: <span class=number>8px</span>;</span><br><span class=line> <span class=attribute>font-size</span>: <span class=number>16px</span>;</span><br><span class=line> <span class=attribute>background</span>: <span class=number>#4caf50</span>;</span><br><span class=line> <span class=attribute>color</span>: <span class=number>#fff</span>;</span><br><span class=line> <span class=attribute>border</span>: none;</span><br><span class=line> <span class=attribute>cursor</span>: pointer;</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=selector-class>.todo-input</span> <span class=selector-tag>button</span><span class=selector-pseudo>:hover</span> {</span><br><span class=line> <span class=attribute>background</span>: <span class=number>#45a049</span>;</span><br><span class=line>}</span><br></pre></table></figure><hr><h2 id=9️⃣-src-components-TodoList-css><a title="9️⃣ src/components/TodoList.css" class=headerlink href=#9️⃣-src-components-TodoList-css></a>9️⃣ <code>src/components/TodoList.css</code></h2><figure class="highlight css"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br></pre><td class=code><pre><span class=line><span class=selector-class>.todo-list</span> {</span><br><span class=line> <span class=attribute>display</span>: flex;</span><br><span class=line> <span class=attribute>flex-direction</span>: column;</span><br><span class=line> <span class=attribute>gap</span>: <span class=number>8px</span>;</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=selector-class>.empty-msg</span> {</span><br><span class=line> <span class=attribute>text-align</span>: center;</span><br><span class=line> <span class=attribute>color</span>: <span class=number>#777</span>;</span><br><span class=line>}</span><br></pre></table></figure><hr><h2 id=🔟-src-components-TodoItem-css><a title="🔟 src/components/TodoItem.css" class=headerlink href=#🔟-src-components-TodoItem-css></a>🔟 <code>src/components/TodoItem.css</code></h2><figure class="highlight css"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br><span class=line>15</span><br><span class=line>16</span><br><span class=line>17</span><br><span class=line>18</span><br><span class=line>19</span><br><span class=line>20</span><br><span class=line>21</span><br><span class=line>22</span><br><span class=line>23</span><br><span class=line>24</span><br><span class=line>25</span><br><span class=line>26</span><br><span class=line>27</span><br><span class=line>28</span><br><span class=line>29</span><br><span class=line>30</span><br><span class=line>31</span><br><span class=line>32</span><br><span class=line>33</span><br><span class=line>34</span><br><span class=line>35</span><br></pre><td class=code><pre><span class=line><span class=selector-class>.todo-item</span> {</span><br><span class=line> <span class=attribute>display</span>: flex;</span><br><span class=line> <span class=attribute>align-items</span>: center;</span><br><span class=line> <span class=attribute>justify-content</span>: space-between;</span><br><span class=line> <span class=attribute>padding</span>: <span class=number>8px</span> <span class=number>12px</span>;</span><br><span class=line> <span class=attribute>background</span>: <span class=number>#fafafa</span>;</span><br><span class=line> <span class=attribute>border-radius</span>: <span class=number>4px</span>;</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=selector-class>.todo-item</span> <span class=selector-tag>label</span> {</span><br><span class=line> <span class=attribute>flex</span>: <span class=number>1</span>;</span><br><span class=line> <span class=attribute>display</span>: flex;</span><br><span class=line> <span class=attribute>align-items</span>: center;</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=selector-class>.todo-item</span> <span class=selector-tag>input</span><span class=selector-attr>[type=<span class=string>"checkbox"</span>]</span> {</span><br><span class=line> <span class=attribute>margin-right</span>: <span class=number>12px</span>;</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=selector-class>.todo-item</span> <span class=selector-class>.completed</span> {</span><br><span class=line> <span class=attribute>text-decoration</span>: line-through;</span><br><span class=line> <span class=attribute>color</span>: <span class=number>#777</span>;</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=selector-class>.delete-btn</span> {</span><br><span class=line> <span class=attribute>background</span>: transparent;</span><br><span class=line> <span class=attribute>border</span>: none;</span><br><span class=line> <span class=attribute>color</span>: <span class=number>#ff4444</span>;</span><br><span class=line> <span class=attribute>font-size</span>: <span class=number>20px</span>;</span><br><span class=line> <span class=attribute>cursor</span>: pointer;</span><br><span class=line>}</span><br><span class=line></span><br><span class=line><span class=selector-class>.delete-btn</span><span class=selector-pseudo>:hover</span> {</span><br><span class=line> <span class=attribute>color</span>: <span class=number>#ff0000</span>;</span><br><span class=line>}</span><br></pre></table></figure><hr><h2 id=🎉-运行、打包><a title="🎉 运行、打包" class=headerlink href=#🎉-运行、打包></a>🎉 运行、打包</h2><figure class="highlight bash"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br></pre><td class=code><pre><span class=line><span class=comment># 开发模式</span></span><br><span class=line>npm run dev</span><br><span class=line></span><br><span class=line><span class=comment># 生产构建</span></span><br><span class=line>npm run build</span><br></pre></table></figure><hr><h2 id=🚀-小贴士><a title="🚀 小贴士" class=headerlink href=#🚀-小贴士></a>🚀 小贴士</h2><ul><li><strong>本地存储</strong>：示例中使用 <code>localStorage</code> 让 Todo 在刷新后保留。生产环境可以接<br>入后端或使用 <code>IndexedDB</code> 之类的更强大存储方案。<li><strong>状态管理</strong>：若项目日后变大，可考虑引入<br><code>Redux</code>/<code>zustand</code>/<code>@tanstack/react-store</code> 等。<li><strong>类型安全</strong>：使用 <code>TypeScript</code> 可以防止类型错误；把文件后缀改成 <code>.tsx</code> 并在<br><code>package.json</code> <code>dependencies</code> 增加 <code>typescript</code> 与 <code>@types/react</code>。<li><strong>单位测试</strong>：<code>jest</code>、<code>react-testing-library</code> 能帮你保障组件逻辑正确。<li><strong>样式优化</strong>：考虑使用 <code>styled-components</code>/<code>emotion</code>/<code>tailwindcss</code> 等，让样<br>式变得更易维护。</ul><p>现在你就拥有一个完整、可直接跑起的 Todo React 应用，随时可以继续扩展功能（如过<br>滤、拖拽排序、用户登录等）。祝编码愉快 🚀！<hr><p>在本地先建个应用<figure class="highlight shell"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line>npm create vite@latest todo-app --template react</span><br></pre></table></figure><p>这里要注意下，要用vite的话要node版本在<code>20.19+</code>或者<code>22.12+</code><br>还有是需要选择js版本，而不是ts<br>运行下<figure class="highlight shell"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line>npm install</span><br></pre></table></figure><p>这里比较慢的话可以上镜像<figure class="highlight shell"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line>npm config set registry https://registry.npmmirror.com</span><br></pre></table></figure><p>接着把生成的代码都保存成文件<figure class="highlight shell"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br></pre><td class=code><pre><span class=line>├── src</span><br><span class=line>│ ├── App.css</span><br><span class=line>│ ├── App.jsx</span><br><span class=line>│ ├── assets</span><br><span class=line>│ │ └── react.svg</span><br><span class=line>│ ├── components</span><br><span class=line>│ │ ├── TodoInput.css</span><br><span class=line>│ │ ├── TodoInput.jsx</span><br><span class=line>│ │ ├── TodoItem.css</span><br><span class=line>│ │ ├── TodoItem.jsx</span><br><span class=line>│ │ ├── TodoList.css</span><br><span class=line>│ │ └── TodoList.jsx</span><br><span class=line>│ ├── index.css</span><br><span class=line>│ └── main.jsx</span><br></pre></table></figure><p>运行命令<figure class="highlight shell"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line>npm run dev</span><br></pre></table></figure><p>看到效果<br><img data-src=https://img.nicksxs.me/gpt-oss-todo.png><p>结果是真的直接可用的，为什么要测这个呢，主要原因是一个模型本地可用的探讨，我认为如果是要本地可用，至少在这些相对简单的任务上能够完成得比较好，前面那个只是个提问，并没有什么可以验证正确性的，内容还是比较多的，对于做开发的来说能辅助编程还是比较重要的，并且能够完成一些相对独立完整的任务才是比较可用的初级门槛，只是对内存压力还是比较大的</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/08/30/%E4%BD%93%E9%AA%8Copenai%E5%BC%80%E6%BA%90%E7%9A%84gpt-oss%E6%A8%A1%E5%9E%8B/ 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/08/30/%E4%BD%93%E9%AA%8Copenai%E5%BC%80%E6%BA%90%E7%9A%84gpt-oss%E6%A8%A1%E5%9E%8B/ itemprop=url>体验openai开源的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-08-30 22:13:18" datetime=2025-08-30T22:13:18+08:00>2025-08-30</time> </span><span class=post-meta-item><span class=post-meta-item-icon><i class="far fa-calendar-check"></i> </span><span class=post-meta-item-text>更新于</span> <time title="修改时间：2025-08-31 21:04:35" datetime=2025-08-31T21:04:35+08:00 itemprop=dateModified>2025-08-31</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=体验openai开源的gpt-oss模型 id=/2025/08/30/%E4%BD%93%E9%AA%8Copenai%E5%BC%80%E6%BA%90%E7%9A%84gpt-oss%E6%A8%A1%E5%9E%8B/ 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/08/30/%E4%BD%93%E9%AA%8Copenai%E5%BC%80%E6%BA%90%E7%9A%84gpt-oss%E6%A8%A1%E5%9E%8B/#disqus_thread itemprop=discussionUrl title=disqus><span class="post-comments-count disqus-comment-count" data-disqus-identifier=2025/08/30/体验openai开源的gpt-oss模型/ itemprop=commentCount></span></a></span></div></div></header><div class=post-body itemprop=articleBody><p>openai终于履行诺言开源了自家模型，只不过不是像deepseek那样把最新最好的开源出来，而是专门调了一大一小两个模型来开源，当然也有一些技术亮点<br>刚好我本地是18g内存的mbp，勉强可以跑20b大小的，这次开源的有20b跟200b感觉尺寸上还是比较取巧的，20b适合个人本地使用，稍微扩下内存一般就能用了，只是速度稍慢些<br>官方介绍的引用<blockquote><p>Gpt-oss-120b 模型在核心推理基准测试中与 OpenAI o4-mini 模型几乎持平，同时能在单个 80GB GPU 上高效运行。Gpt-oss-20b 模型在常见基准测试中与 OpenAI o3‑mini 模型取得类似结果，且可在仅配备 16GB 内存的边缘设备上运行，使其成为设备端应用、本地推理或无需昂贵基础设施的快速迭代的理想选择。这两个模型在工具使用、少样本函数调用、CoT推理（如在 Tau-Bench 智能体评估套件中的结果所示）以及 HealthBench 测试中表现强劲（甚至超越了 OpenAI o1 和 GPT‑4o 等专有模型）。</blockquote><h2 id=预训练和模型架构><a class=headerlink href=#预训练和模型架构 title=预训练和模型架构></a>预训练和模型架构</h2><p>gpt-oss 模型采用我们最先进的预训练和后训练技术进行训练，特别注重推理能力、效率以及在各种部署环境中的实际应用性。虽然我们已经公开发布了包括 Whisper 和 CLIP 在内的其他模型，但 gpt-oss 模型是我们自 GPT‑2[1]以来的首个开放大型语言模型。<p>每个模型都是一个 Transformer，它利用专家混合 (MoE[2]) 来减少处理输入所需的活跃参数数量。Gpt-oss-120b 每个令牌激活 51 亿个参数，而 gpt-oss-20b 激活 36 亿个参数。这两个模型的总参数数分别为 1,170 亿和 210 亿。这些模型采用交替的密集和局部带状稀疏注意力模式，与 GPT‑3 [3] 类似。为了提高推理和内存效率，这些模型还使用分组多查询注意力，分组大小为 8。我们使用旋转位置嵌入 (RoPE[4]) 进行位置编码，并原生支持长达 128k 的上下文长度。<table><thead><tr><th>模型<th>层数<th>总参数<th>每个令牌的活跃参数<th>总专家数<th>每个令牌的活跃专家数<th>上下文长度<tbody><tr><td>gpt-oss-120b<td>36<td>117b<td>5.1b<td>128<td>4<td>128k<tr><td>gpt-oss-20b<td>24<td>21b<td>3.6b<td>32<td>4<td>128k</table><p>比如我本地用ollama来运行了20b大小的，<figure class="highlight shell"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line>ollama run gpt-oss:20b</span><br></pre></table></figure><p>运行起来大概是占用了13g多点的内存，因为mac本身也有不少占用内存的以及我自己的一些后台运行的软件，所以比较捉襟见肘，有条件的上32g的mac mini可能比较富裕点<br>虽然现在ollama已经带了gui界面，但是发现运行的特别慢，直接通过命令行倒还是可以接受，比如我们问个Java相关的问题<figure class="highlight shell"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line><span class="meta prompt_">></span><span class=language-bash>>> 怎么成为Java架构师</span></span><br></pre></table></figure><p>首先是思维过程<figure class="highlight shell"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br></pre><td class=code><pre><span class=line>Thinking...</span><br><span class=line>The user asks in Chinese: "怎么成为Java架构师" which means "How to become a Java architect?" They likely want steps, skills, learning path. Provide a thorough</span><br><span class=line>guide: fundamentals, design patterns, architecture frameworks, deep dive, system design, cloud, CI/CD, soft skills, leadership, etc. Also talk about</span><br><span class=line>certifications, real-world experience, project, mentorship, portfolio. Cover common architecture patterns: microservices, distributed, event-driven. Tools:</span><br><span class=line>Spring, Hibernate, etc. Should also mention reading books: Clean Architecture, Domain-Driven Design, Patterns. Also cover continuous learning, speaking at</span><br><span class=line>conferences, writing blogs.</span><br><span class=line></span><br><span class=line>Let's structure answer: introduction, prerequisites, technical skills, architectural concepts, real-world experience, soft skills, certifications, community,</span><br><span class=line>portfolio, continuous learning. Provide resources and timelines. Since Chinese user, answer in Chinese. Provide details, resources links. Make it thorough. Use</span><br><span class=line>bullet points for clarity.</span><br><span class=line></span><br><span class=line>Let's now produce final.</span><br><span class=line>...done thinking.</span><br></pre></table></figure><p>然后就是给出结果，体感是个位数token每秒的输出速度<blockquote><p>以下就是生成的内容</blockquote><h2 id=目标：成为一名-Java-架构师><a title="目标：成为一名 Java 架构师" class=headerlink href=#目标：成为一名-Java-架构师></a>目标：成为一名 <strong>Java 架构师</strong></h2><blockquote><p><em>架构师不是一次获得“技术标签”，而是一种综合的 <strong>设计思维</strong> 与 <strong>业务洞察</strong> 的能力。</em></blockquote><p>下面给你一条完整、可量化的路线图，帮助你从“有经验的 Java 开发者”成长为 <strong>架构师</strong>。<blockquote><p><strong>小贴士</strong>：如果你手头已有 3–5 年的项目经验，就可以直接对应后面的“实战经验”板块。如果你刚起步，建议先走“技术打底”阶段，然后再投身实战。</blockquote><hr><h2 id=一、技术打底（1–2-年）><a title="一、技术打底（1–2 年）" class=headerlink href=#一、技术打底（1–2-年）></a>一、技术打底（1–2 年）</h2><table><thead><tr><th>目标<th>必备技术 / 书籍 / 练手<th>练习建议<tbody><tr><td><strong>Java 基础</strong><td>Java SE 8+（lambda, stream, JPA 等）<td>先练手 OOP、设计模式、并发，做 Leetcode、练下 JDK 内部实现（如 <code>ArrayList</code>、<code>HashMap</code>）<tr><td><strong>框架</strong><td>Spring Framework（MVC、AOP）、Spring Boot、Spring Cloud、Spring Data JPA<td>搭建多层 CRUD + MVC + Security + Redis + MySQL 的完整项目<tr><td><strong>ORM</strong><td>Hibernate / JPA<td>写复杂的查询，掌握 Fetch 策略、缓存、懒加载<tr><td><strong>数据库</strong><td>关系型（MySQL/PostgreSQL） + NoSQL（MongoDB / Redis）<td>学习分库分表、事务、读写分离<tr><td><strong>安全</strong><td>OAuth2 / JWT / Spring Security<td>单独做一套认证系统<tr><td><strong>单元测试</strong><td>JUnit、Mockito<td>代码覆盖率≥90%<tr><td><strong>CI/CD</strong><td>Git, Maven/Gradle, Docker, Jenkins/GitHub Actions<td>自动化构建、单元/集成测试、镜像推送<tr><td><strong>监控</strong><td>Micrometer + Prometheus + Grafana / ELK<td>记录度量、日志、告警<tr><td><strong>微服务</strong><td>Spring Cloud（Nacos/Spring Cloud Config + Eureka/Consul + Zuul/Gateway + Hystrix）<td>搭建 3‑5 个小服务，练习服务间调用与降级<tr><td><strong>消息中间件</strong><td>Kafka / RabbitMQ<td>读写队列，练习发布/订阅，事务与回滚<tr><td><strong>分布式事务</strong><td>Saga、TCC、XA<td>通过 Spring Transaction、Atomikos 练习</table><p><strong>学习资源（中文 / 英文）</strong><table><thead><tr><th>主题<th>书籍<th>课程<th>文章 / 官网<tbody><tr><td>Java<td>《Java 编程思想》, 《深入理解 Java 虚拟机》<td>《Java 8+ 入门与进阶》（慕课, 极客时间）<td>Oracle JDK 官网, 《Effective Java》解读<tr><td>Spring<td>《Spring 实战 5》, 《Spring Cloud 实战》<td>Spring 官方培训，Bilibili / 慕课<td>Spring 官网 & Spring Cloud 官网<tr><td>微服务<td>《微服务设计》, 《Domain-Driven Design》<td>《Spring Cloud 全栈》（极客时间）<td>微服务架构图 (Zhou’s blog, DZone)<tr><td>大数据 / Kafka<td>《Kafka 权威指南》<td>《Kafka 入门 & 进阶》<td>Apache Kafka 官网<tr><td>系统设计<td>《系统架构设计》, 《分布式系统设计之道》<td>《系统设计基础》课程<td>阿里云、腾讯云白皮书</table><blockquote><p><strong>练手项目</strong>：做一个 <strong>电商平台</strong> 或 <strong>社交系统</strong>，分拆为多个服务：用户服务、商品服务、订单服务、支付服务、物流服务等。通过实现 **统一鉴权、限流、熔断、日志聚合<br>**，让自己彻底体验架构层面的痛点。</blockquote><hr><h2 id=二、系统设计能力（3–5-年经验）><a title="二、系统设计能力（3–5 年经验）" class=headerlink href=#二、系统设计能力（3–5-年经验）></a>二、系统设计能力（3–5 年经验）</h2><h3 id=1-业务需求分析><a title="1. 业务需求分析" class=headerlink href=#1-业务需求分析></a>1. 业务需求分析</h3><ul><li><strong>痛点</strong>：业务需求往往是模糊、频繁变动的，架构师需要把业务拆解为 <strong>核心能力</strong> 与 <strong>边缘功能</strong>。<li><strong>实践</strong>：每月挑选一个业务点（如优惠券、库存预警等），写 1–2 页面需求文档，然后把需求拆解成 <strong>业务领域模型</strong>。</ul><h3 id=2-设计模式与架构模式><a title="2. 设计模式与架构模式" class=headerlink href=#2-设计模式与架构模式></a>2. 设计模式与架构模式</h3><table><thead><tr><th>类别<th>经典模式<th>示例<tbody><tr><td>业务层<td>领域模型 (Domain Model), 领域事件 (Domain Event)<td>商品模块使用领域事件实现库存同步<tr><td>持久层<td>DAO, Repository, Unit of Work<td>JPA Repository + UnitOfWork<tr><td>基础设施<td>适配器 (Adapter), 代理 (Proxy), 桥接 (Bridge)<td>用 Feign+Ribbon 代理调用第三方支付<tr><td>核心架构<td>微服务, 事件驱动, Command Query Responsibility Segregation (CQRS), Event Sourcing, Saga<td>微服务 + Kafka<tr><td>运行时<td>延迟策略 (Retry), 熔断 (Circuit Breaker), 限流 (Limiter), 负载均衡 (LoadBalancer)<td>Hystrix + Ribbon + Sentinel</table><blockquote><p><strong>书单</strong>：<ul><li>《Design Patterns》 经典翻译版<li>《架构师的选型与设计》<li>《系统架构师的自我修养》<li>《大规模分布式系统架构》（阿里巴巴架构师经验分享）</ul></blockquote><h3 id=3-云原生技术><a title="3. 云原生技术" class=headerlink href=#3-云原生技术></a>3. 云原生技术</h3><ul><li><strong>容器</strong>: Docker、Kubernetes；自研或使用 <strong>OpenJDK + JDK 21</strong>。<li><strong>服务网格</strong>：Istio/Linkerd。<li><strong>CI/CD</strong>：ArgoCD + Jenkins。<li><strong>自动化</strong>：Helm、Terraform、Ansible。<li><strong>云服务</strong>：Aliyun、AWS、Azure，熟悉至少一个云的部署与运维。</ul><h3 id=4-监控、日志、运维><a title="4. 监控、日志、运维" class=headerlink href=#4-监控、日志、运维></a>4. 监控、日志、运维</h3><ul><li><strong>分布式追踪</strong>：OpenTelemetry + Zipkin/Jaeger。<li><strong>AIOps</strong>：使用 <strong>Prometheus + Grafana</strong>，结合 Alertmanager。<li><strong>日志</strong>：ELK、Loki，或 <strong>OpenTelemetry Log</strong>。</ul><h3 id=5-软技能-团队协作><a title="5. 软技能 & 团队协作" class=headerlink href=#5-软技能-团队协作></a>5. 软技能 & 团队协作</h3><table><thead><tr><th>领域<th>关键能力<th>学习路径<tbody><tr><td><strong>产品思维</strong><td>理解业务目标、价值主张<td>与 PO、BA 讨论，用业务故事拆解<tr><td><strong>沟通</strong><td>需求梳理、技术方案说明<td>每周至少 1 次技术分享或午餐会<tr><td><strong>领导</strong><td>组内技术指导、冲刺规划<td>作为 scrum master 或技术负责人<tr><td><strong>安全 & 合规</strong><td>数据加密、GDPR/HIPAA<td>学习安全框架、法规手册<tr><td><strong>成本管理</strong><td>云成本、容量规划<td>通过 Cloud Cost Estimator 评估</table><blockquote><p><strong>练习</strong>：把上面 4 大主题写成 PPT，给同事做一个半小时的技术分享，随后收集反思与改进。</blockquote><hr><h2 id=三、职业路线（5-10-岁经验）><a title="三、职业路线（5-10 岁经验）" class=headerlink href=#三、职业路线（5-10-岁经验）></a>三、职业路线（5-10 岁经验）</h2><table><thead><tr><th>阶段<th>目标<th>关键步骤<tbody><tr><td><strong>技术负责人</strong><td>完成 <strong>3–5 个核心模块的技术方案</strong>。<td>按模块负责并交付。<tr><td><strong>架构师</strong><td>对整个平台制定 <strong>技术愿景、技术选型、非功能性指标</strong>。<td>1）制定技术路线图；2）做安全、数据治理、成本管控。<tr><td><strong>架构顾问</strong><td>对多家企业/业务线提供架构咨询。<td>参与技术评审、代码走查、培训。<tr><td><strong>高层 CxO（CTO/VP）</strong><td>负责技术战略、团队治理。<td>培养团队、构建技术生态。</table><blockquote><p><strong>核心任务</strong><ul><li><em>选型</em>：在技术评估、成本评估、稳定性、社区支持等要素上做出决策。<li><em>方案落地</em>：把抽象设计写成 <strong>可执行的计划</strong>。<li><em>治理</em>：制定 <em>编码规范</em>、<em>CI/CD 标准</em>、<em>安全策略</em>、<em>成本追踪</em>。<li><em>治理工具</em>：使用 <strong>ArgoRollouts</strong>、<strong>Helm</strong>、<strong>OPA</strong>（Open Policy Agent）来实现自动化治理。</ul></blockquote><hr><h2 id=四、推荐路线图（时间轴示例）><a class=headerlink href=#四、推荐路线图（时间轴示例） title=四、推荐路线图（时间轴示例）></a>四、推荐路线图（时间轴示例）</h2><table><thead><tr><th>月份<th>阶段<th>关键任务<tbody><tr><td>1–6<td>Java 基础 & Spring Boot<td>1 个 CRUD 项目<tr><td>7–12<td>中间件 & 微服务<td>3 个微服务 + 统一鉴权<tr><td>13–18<td>系统设计 & DDD<td>业务拆解、领域模型<tr><td>19–24<td>分布式 & 缓存<td>Kafka、Redis、分布式事务<tr><td>25–36<td>云原生 & 运维<td>Kubernetes + Prometheus + Zipkin<tr><td>37–48<td>设计模式 & 框架<td>事件驱动、Saga、CQRS<tr><td>49–60<td>软技能 & 领导<td>组内技术分享、技术评审<tr><td>60+<td>架构师<td>制定技术愿景、治理</table><blockquote><p><strong>关键点</strong>：<strong>每个阶段都要有交付</strong>。写好<strong>技术文档、代码库、可复现的 demo</strong>，让别人能够看到你“解决了什么”而不是仅仅“看懂你说了些什么”。</blockquote><hr><h2 id=五、实战案例-经验总结><a title="五、实战案例 / 经验总结" class=headerlink href=#五、实战案例-经验总结></a>五、实战案例 / 经验总结</h2><ol><li><strong>从业务痛点出发</strong><ul><li><strong>痛点</strong>：订单系统的并发高峰导致库存穿透。<li><strong>方案</strong>：采用 <strong>Redis 分布式锁 + 限流</strong>，把订单请求拆成两部分：下单 + 支付确认。<li><strong>结果</strong>：库存一致性恢复，系统 QPS 提升 200%。</ul><li><strong>选型要有成本意识</strong><ul><li>评估 <strong>AWS vs 阿里云</strong>：计算预计 8 万/年与 6 万/年，选阿里云。<li>在选型后做 <strong>性能基准</strong>（LTP测试）来验证业务水平。</ul><li><strong>保持“可审计”</strong><ul><li>在微服务中加入 <strong>OpenTelemetry</strong>，把日志、指标、追踪统一到 ELK。<li>业务日志采用 <strong>业务日志表</strong>，可以跟踪数据脏读与回滚路径。</ul><li><strong>持续学习</strong><ul><li>每周至少读 1 次技术文章（Hacker News、InfoQ、阿里巴巴技术分享）。<li>每年至少读 2 本系统架构书籍，把知识写进 <strong>技术笔记</strong>。</ul></ol><hr><h2 id=六、如何验证自己的能力？><a class=headerlink href=#六、如何验证自己的能力？ title=六、如何验证自己的能力？></a>六、如何验证自己的能力？</h2><table><thead><tr><th>验证方式<th>说明<tbody><tr><td><strong>技术博客 / 公开课</strong><td>发布 8+ 篇系统设计技术文章，完成 1 次公开技术分享。<tr><td><strong>GitHub 项目</strong><td>至少 3 个真实业务项目或开源项目，PR 贡献。<tr><td><strong>项目验收记录</strong><td>给同事或客户交付至少 2 次业务改造。<tr><td><strong>面试评估</strong><td><strong>Top 技术平台</strong>（猎聘、BOSS 直聘）上，面试 “架构师” 级别。<tr><td><strong>认证</strong><td><em>Oracle Certified Professional</em>、<em>AWS Certified Solutions Architect – Professional</em>、<em>阿里云架构师认证</em> 等。</table><blockquote><p><strong>面试题准备</strong><ul><li>业务场景 → 需求分析 → 系统架构 → 数据模型 → 性能方案 → 监控与运维 → 失败模式与可恢复性<li>经典面试题：<ul><li>给定 <code>100 个并发用户</code> 同时下单，怎么防止库存穿透？<li>如何实现微服务之间的 <strong>幂等调用</strong>？<li>解释“CAP定理”并给出符合业务的解决方案。</ul></ul></blockquote><hr><h2 id=七、最后的实戰建議><a class=headerlink href=#七、最后的实戰建議 title=七、最后的实戰建議></a>七、最后的实戰建議</h2><ol><li><strong>先学会 “怎么写代码”，再学 “怎么设计架构”。</strong><ul><li>把代码质量放在首位：单元测试、代码评审、CI/CD。</ul><li><strong>与业务同事保持紧密沟通</strong>，避免 “技术孤岛”。<li><strong>学习</strong>：架构师不只是技术，更是 <strong>业务、合规、成本</strong> 的统筹者。<li><strong>保持好奇心</strong>：阅读每季度的 <strong>技术白皮书</strong>（阿里巴巴、腾讯、Google、Microsoft）。<li><strong>培养 “反脆弱” 思维</strong>：系统设计不是一次性完成的，而是 <strong>持续演进</strong>。<li><strong>分享</strong>：通过技术分享会、博客或社区演讲，把自己的知识体系和思维体系固化。</ol><hr><blockquote><p><strong>结语</strong><br>成为 Java 架构师是一段 <strong>从 “熟练编码” → “系统设计” → “业务与技术双栖”</strong> 的成长旅程。只要你把每一步拆解成可执行的目标，系统练习并且用落地项目检验自己的能力，就<br>能稳扎稳打地迈向架构师角色。祝你早日成为团队里的架构引路人！</blockquote><p>如果你想进一步细化任何一板块（如某个具体的技术选型、微服务拆分方案，或是面试技巧），随时告诉我！祝你编码愉快 🚀✌️<blockquote><p>内容正确性仅供参考<br>只是输出的质量体感可能赶得上最初版的chatgpt了，按这种效果本地用来做一些辅助工作的能力感觉是够用了。根据官方的测评20b的模型也是超过了o3-mini，主要是目前的内存占用还比较吃力对我来说，如果是32g内存的话应该就比较舒服了，也期待会有更小的且效果不输于gpt-oss:20b的模型，本地的模型使用就会越来越普遍且好用</blockquote></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/08/24/%E7%9C%9F%E6%AD%A3%E9%80%82%E5%90%88spring-ai%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F/ 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/08/24/%E7%9C%9F%E6%AD%A3%E9%80%82%E5%90%88spring-ai%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F/ itemprop=url>真正适合spring ai的使用方式</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-08-24 23:18:00" datetime=2025-08-24T23:18:00+08:00>2025-08-24</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="真正适合spring ai的使用方式" id=/2025/08/24/%E7%9C%9F%E6%AD%A3%E9%80%82%E5%90%88spring-ai%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F/ 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/08/24/%E7%9C%9F%E6%AD%A3%E9%80%82%E5%90%88spring-ai%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F/#disqus_thread itemprop=discussionUrl title=disqus><span class="post-comments-count disqus-comment-count" data-disqus-identifier=2025/08/24/真正适合spring-ai的使用方式/ itemprop=commentCount></span></a></span></div></div></header><div class=post-body itemprop=articleBody><p>上周被spring-ai调用模型api这个折腾的有点难受，这周又试了下用deepseek官方的api，但结果还是一样，不确定是啥原因，请求会一直卡着<br>后来想着本地有ollama，那是不是可以直接用ollama来调本地模型<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>ollama run gemma3:1b</span><br></pre></table></figure><p>然后对应的配置是<figure class="highlight xml"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br></pre><td class=code><pre><span class=line><span class=tag><<span class=name>dependency</span>></span></span><br><span class=line> <span class=tag><<span class=name>groupId</span>></span>org.springframework.ai<span class=tag></<span class=name>groupId</span>></span></span><br><span class=line> <span class=tag><<span class=name>artifactId</span>></span>spring-ai-ollama-spring-boot-starter<span class=tag></<span class=name>artifactId</span>></span></span><br><span class=line><span class=tag></<span class=name>dependency</span>></span></span><br></pre></table></figure><p>当然这里有个坑，因为目前还不成熟，所以这个包的依赖跟之前openai的是不兼容的<br>需要引用<figure class="highlight xml"><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></pre><td class=code><pre><span class=line><span class=tag><<span class=name>dependency</span>></span></span><br><span class=line> <span class=tag><<span class=name>groupId</span>></span>org.springframework.ai<span class=tag></<span class=name>groupId</span>></span></span><br><span class=line> <span class=tag><<span class=name>artifactId</span>></span>spring-ai-bom<span class=tag></<span class=name>artifactId</span>></span></span><br><span class=line> <span class=tag><<span class=name>version</span>></span>1.0.0-M1<span class=tag></<span class=name>version</span>></span></span><br><span class=line> <span class=tag><<span class=name>type</span>></span>pom<span class=tag></<span class=name>type</span>></span></span><br><span class=line> <span class=tag><<span class=name>scope</span>></span>import<span class=tag></<span class=name>scope</span>></span></span><br><span class=line> <span class=tag></<span class=name>dependency</span>></span></span><br></pre></table></figure><p>属性配置就很简单了<figure class="highlight properties"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br></pre><td class=code><pre><span class=line><span class=attr>spring.ai.ollama.base-url</span>=<span class=string>http://localhost:11434</span></span><br><span class=line><span class=attr>spring.ai.ollama.chat.model</span>=<span class=string>gemma3:1b</span></span><br></pre></table></figure><p>然后就是简单写个Controller就可以了<figure class="highlight java"><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></pre><td class=code><pre><span class=line><span class=meta>@RestController</span></span><br><span class=line><span class=meta>@RequestMapping("/demo")</span></span><br><span class=line><span class=keyword>public</span> <span class=keyword>class</span> <span class="title class_">OllamaController</span> {</span><br><span class=line> <span class=keyword>private</span> <span class=keyword>static</span> <span class=keyword>final</span> <span class=type>Logger</span> <span class=variable>logger</span> <span class=operator>=</span> LoggerFactory.getLogger(OllamaController.class);</span><br><span class=line></span><br><span class=line> <span class=meta>@Autowired</span></span><br><span class=line> <span class=keyword>private</span> OllamaChatModel ollamaChatModel;</span><br><span class=line></span><br><span class=line></span><br><span class=line> <span class=meta>@RequestMapping("/ollama")</span></span><br><span class=line> <span class=keyword>public</span> Object <span class="title function_">ollama</span><span class=params>(String msg)</span> {</span><br><span class=line> <span class=type>String</span> <span class=variable>call</span> <span class=operator>=</span> ollamaChatModel.call(msg);</span><br><span class=line> <span class=keyword>return</span> call;</span><br><span class=line> }</span><br><span class=line>}</span><br></pre></table></figure><p>这样我们的初始调用就完成了<br>比如我们提问 ‘how to learn java’<figure class="highlight markdown"><table><tr><td class=gutter><pre><span class=line>1</span><br></pre><td class=code><pre><span class=line>Okay, let's break down how to learn Java! It can seem daunting at first, but with a structured approach, you'll be coding in Java in no time. Here’s a breakdown of a recommended learning path, broken down into phases: <span class=strong>**1. Foundation (2-4 Weeks)**</span> * <span class=strong>**Understand the Basics:**</span> * <span class=strong>**What is Java?**</span> Java is a robust, object-oriented programming language known for its platform independence ("write once, run anywhere"). It’s used for enterprise applications, Android development, and more. * <span class=strong>**Why Learn Java?**</span> It’s a popular choice for beginners because it’s relatively easy to learn, has a large community, and is used in many real-world applications. * <span class=strong>**Key Concepts:**</span> * <span class=strong>**Variables & Data Types:**</span> Understand different data types (int, float, String, boolean, etc.). * <span class=strong>**Operators:**</span> Arithmetic, comparison, logical, assignment. * <span class=strong>**Control Flow:**</span> <span class=code>`if`</span>, <span class=code>`else`</span>, <span class=code>`for`</span>, <span class=code>`while`</span> – controlling the flow of your program. * <span class=strong>**Basic Syntax:**</span> The code structure of Java. * <span class=strong>**Resources:**</span> * <span class=strong>**Tutorialspoint Java Course:**</span> [<span class=string>https://www.tutorialspoint.com/java/index.htm</span>](<span class=link>https://www.tutorialspoint.com/java/index.htm</span>) - A good, comprehensive, and free overview. * <span class=strong>**Codecademy's Learn Java:**</span> [<span class=string>https://www.codecademy.com/learn/learn-java</span>](<span class=link>https://www.codecademy.com/learn/learn-java</span>) - Interactive, hands-on exercises. * <span class=strong>**Google's Java Tutorial:**</span> [<span class=string>https://developer.android.com/training/jdbc</span>](<span class=link>https://developer.android.com/training/jdbc</span>) (Java is built on JDBC, so this will give you a baseline) <span class=strong>**2. Core Concepts (4-8 Weeks)**</span> * <span class=strong>**Data Structures:**</span> * <span class=strong>**Arrays:**</span> Fundamental data structures. Understand how to declare, initialize, and use arrays. * <span class=strong>**Linked Lists:**</span> Another essential data structure, offering flexibility. * <span class=strong>**Object-Oriented Programming (OOP) Fundamentals:**</span> * <span class=strong>**Classes and Objects:**</span> The basis of OOP. Learn how to define classes, create objects, and interact with them. * <span class=strong>**Encapsulation:**</span> Bundling data and methods that operate on that data within a class. * <span class=strong>**Inheritance:**</span> Creating new classes based on existing classes. * <span class=strong>**Polymorphism:**</span> The ability of objects to take on many forms. * <span class=strong>**Java Syntax & Semantics:**</span> * <span class=strong>**Statements:**</span> The commands you write. * <span class=strong>**Expressions:**</span> Results of calculations. * <span class=strong>**Keywords:**</span> Reserved words with special meanings (e.g., <span class=code>`class`</span>, <span class=code>`if`</span>, <span class=code>`else`</span>). * <span class=strong>**Comments:**</span> Explain your code. * <span class=strong>**Resources:**</span> * <span class=strong>**Oracle Java Tutorials:**</span> [<span class=string>https://docs.oracle.com/javase/tutorial/</span>](<span class=link>https://docs.oracle.com/javase/tutorial/</span>) – A more in-depth guide. * <span class=strong>**FreeCodeCamp's Java Tutorial:**</span> [<span class=string>https://www.freecodecamp.org/learn/java-tutorial/</span>](<span class=link>https://www.freecodecamp.org/learn/java-tutorial/</span>) - Great for visual learners. <span class=strong>**3. Practical Application - Projects**</span> * <span class=strong>**Simple Programs:**</span> Start with small, manageable projects: * <span class=strong>**Number Guessing Game:**</span> A classic introductory project. * <span class=strong>**Rock-Paper-Scissors:**</span> A basic example of OOP. * <span class=strong>**Simple Calculator:**</span> Reinforces fundamental concepts. * <span class=strong>**Gradually Increase Complexity:**</span> * <span class=strong>**Print Statements:**</span> A simple way to understand output. * <span class=strong>**Palindrome Checker:**</span> A challenge to practice string manipulation. * <span class=strong>**Basic Console Applications:**</span> Write programs that run directly in the console. <span class=strong>**4. Intermediate Concepts (Ongoing)**</span> * <span class=strong>**Exception Handling:**</span> Understanding and handling errors. * <span class=strong>**Collections:**</span> Learn about ArrayLists, LinkedLists, Sets, and Maps. * <span class=strong>**String Manipulation:**</span> Working with strings effectively. * <span class=strong>**Multithreading:**</span> Understanding how to run multiple tasks concurrently (basic concepts). * <span class=strong>**Java Collections Framework:**</span> The cornerstone of modern Java programming. <span class=strong>**Resources for Continued Learning:**</span> * <span class=strong>**Stack Overflow:**</span> [<span class=string>https://stackoverflow.com/</span>](<span class=link>https://stackoverflow.com/</span>) - An invaluable resource for solving coding problems and learning from others. * <span class=strong>**Reddit's r/java:**</span> [<span class=string>https://www.reddit.com/r/java/</span>](<span class=link>https://www.reddit.com/r/java/</span>) - A community forum with discussions and resources. * <span class=strong>**YouTube:**</span> Search for Java tutorials and courses (e.g., "Java for beginners"). <span class=strong>**Tips for Success:**</span> * <span class=strong>**Practice Regularly:**</span> Even 30 minutes a day is better than long, infrequent sessions. * <span class=strong>**Write Code Frequently:**</span> The more you write, the better you'll understand. * <span class=strong>**Don't Be Afraid to Make Mistakes:**</span> Mistakes are part of the learning process. Learn from them. * <span class=strong>**Read Code:**</span> Look at code written by others to understand different approaches. * <span class=strong>**Join a Community:**</span> Connecting with others can provide support and motivation. <span class=strong>**To help me tailor my advice even more, could you tell me:**</span> * <span class=strong>**What's your background in programming?**</span> (e.g., Have you programmed before? If so, what languages?) * <span class=strong>**What are your goals for learning Java?**</span> (e.g., Career change? Personal project? Specific application like Android?)</span><br></pre></table></figure><p>格式不太美观，但是至少是能输出来结果了，而且可以选择本地可用的最佳模型，话说openai的oss试了下，本地有点吃不消，不然可能是比较合适的</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/08/16/%E5%B7%AE%E7%82%B9%E5%BF%98%E4%BA%86%E8%BF%98%E6%9C%89springb-ai%E8%BF%99%E4%B8%AA%E5%8C%85/ 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/08/16/%E5%B7%AE%E7%82%B9%E5%BF%98%E4%BA%86%E8%BF%98%E6%9C%89springb-ai%E8%BF%99%E4%B8%AA%E5%8C%85/ itemprop=url>差点忘了还有spring ai这个包</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-08-16 23:08:27 / 修改时间：23:09:29" datetime=2025-08-16T23:08:27+08:00>2025-08-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="差点忘了还有spring ai这个包" id=/2025/08/16/%E5%B7%AE%E7%82%B9%E5%BF%98%E4%BA%86%E8%BF%98%E6%9C%89springb-ai%E8%BF%99%E4%B8%AA%E5%8C%85/ 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/08/16/%E5%B7%AE%E7%82%B9%E5%BF%98%E4%BA%86%E8%BF%98%E6%9C%89springb-ai%E8%BF%99%E4%B8%AA%E5%8C%85/#disqus_thread itemprop=discussionUrl title=disqus><span class="post-comments-count disqus-comment-count" data-disqus-identifier=2025/08/16/差点忘了还有springb-ai这个包/ itemprop=commentCount></span></a></span></div></div></header><div class=post-body itemprop=articleBody><p>之前经常看一些LLM的工具，类似于ollama，chatbox等等，这些都类似于是个独立工具，真的在代码里使用的话可能没那么方便<br>正好看了下spring有个spring-ai的包，可以来使用试下<br>首先我们要用比较新的jdk版本，比如jdk17，然后需要使用springboot比较新的版本，比如3.2.3，但是不建议使用最新稳定版，3.4.x，因为会有bug，别问我怎么知道的。<br>真的是折腾，<br>简单分享下吧<br>需要在pom中增加仓库定义<figure class="highlight xml"><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></pre><td class=code><pre><span class=line><span class=comment><!-- 仓库定义 --></span></span><br><span class=line> <span class=tag><<span class=name>repositories</span>></span></span><br><span class=line> <span class=tag><<span class=name>repository</span>></span></span><br><span class=line> <span class=tag><<span class=name>id</span>></span>spring-milestones<span class=tag></<span class=name>id</span>></span></span><br><span class=line> <span class=tag><<span class=name>name</span>></span>Spring Milestones<span class=tag></<span class=name>name</span>></span></span><br><span class=line> <span class=tag><<span class=name>url</span>></span>https://repo.spring.io/milestone<span class=tag></<span class=name>url</span>></span></span><br><span class=line> <span class=tag><<span class=name>snapshots</span>></span></span><br><span class=line> <span class=tag><<span class=name>enabled</span>></span>false<span class=tag></<span class=name>enabled</span>></span></span><br><span class=line> <span class=tag></<span class=name>snapshots</span>></span></span><br><span class=line> <span class=tag></<span class=name>repository</span>></span></span><br><span class=line> <span class=tag><<span class=name>repository</span>></span></span><br><span class=line> <span class=tag><<span class=name>id</span>></span>spring-snapshots<span class=tag></<span class=name>id</span>></span></span><br><span class=line> <span class=tag><<span class=name>name</span>></span>Spring Snapshots<span class=tag></<span class=name>name</span>></span></span><br><span class=line> <span class=tag><<span class=name>url</span>></span>https://repo.spring.io/snapshot<span class=tag></<span class=name>url</span>></span></span><br><span class=line> <span class=tag><<span class=name>releases</span>></span></span><br><span class=line> <span class=tag><<span class=name>enabled</span>></span>false<span class=tag></<span class=name>enabled</span>></span></span><br><span class=line> <span class=tag></<span class=name>releases</span>></span></span><br><span class=line> <span class=tag></<span class=name>repository</span>></span></span><br><span class=line> <span class=tag></<span class=name>repositories</span>></span></span><br></pre></table></figure><p>然后增加依赖<figure class="highlight xml"><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></pre><td class=code><pre><span class=line><span class=tag><<span class=name>dependencyManagement</span>></span></span><br><span class=line> <span class=tag><<span class=name>dependencies</span>></span></span><br><span class=line> <span class=tag><<span class=name>dependency</span>></span></span><br><span class=line> <span class=tag><<span class=name>groupId</span>></span>org.springframework.ai<span class=tag></<span class=name>groupId</span>></span></span><br><span class=line> <span class=tag><<span class=name>artifactId</span>></span>spring-ai-bom<span class=tag></<span class=name>artifactId</span>></span></span><br><span class=line> <span class=tag><<span class=name>version</span>></span>1.0.0-M5<span class=tag></<span class=name>version</span>></span></span><br><span class=line> <span class=tag><<span class=name>type</span>></span>pom<span class=tag></<span class=name>type</span>></span></span><br><span class=line> <span class=tag><<span class=name>scope</span>></span>import<span class=tag></<span class=name>scope</span>></span></span><br><span class=line> <span class=tag></<span class=name>dependency</span>></span></span><br><span class=line> <span class=tag></<span class=name>dependencies</span>></span></span><br><span class=line> <span class=tag></<span class=name>dependencyManagement</span>></span></span><br></pre></table></figure><p>引入主要的几个包<figure class="highlight xml"><table><tr><td class=gutter><pre><span class=line>1</span><br><span class=line>2</span><br><span class=line>3</span><br><span class=line>4</span><br><span class=line>5</span><br><span class=line>6</span><br><span class=line>7</span><br><span class=line>8</span><br><span class=line>9</span><br><span class=line>10</span><br><span class=line>11</span><br><span class=line>12</span><br><span class=line>13</span><br><span class=line>14</span><br></pre><td class=code><pre><span class=line><span class=tag><<span class=name>dependency</span>></span></span><br><span class=line> <span class=tag><<span class=name>groupId</span>></span>org.springframework.boot<span class=tag></<span class=name>groupId</span>></span></span><br><span class=line> <span class=tag><<span class=name>artifactId</span>></span>spring-boot-starter<span class=tag></<span class=name>artifactId</span>></span></span><br><span class=line> <span class=tag></<span class=name>dependency</span>></span></span><br><span class=line></span><br><span class=line> <span class=tag><<span class=name>dependency</span>></span></span><br><span class=line> <span class=tag><<span class=name>groupId</span>></span>org.springframework.boot<span class=tag></<span class=name>groupId</span>></span></span><br><span class=line> <span class=tag><<span class=name>artifactId</span>></span>spring-boot-starter-web<span class=tag></<span class=name>artifactId</span>></span></span><br><span class=line> <span class=tag></<span class=name>dependency</span>></span></span><br><span class=line></span><br><span class=line> <span class=tag><<span class=name>dependency</span>></span></span><br><span class=line> <span class=tag><<span class=name>groupId</span>></span>org.springframework.ai<span class=tag></<span class=name>groupId</span>></span></span><br><span class=line> <span class=tag><<span class=name>artifactId</span>></span>spring-ai-openai-spring-boot-starter<span class=tag></<span class=name>artifactId</span>></span></span><br><span class=line> <span class=tag></<span class=name>dependency</span>></span></span><br></pre></table></figure><p>代码也很简单，但是不确定是api限流太严重还是啥，响应慢的离谱<figure class="highlight java"><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></pre><td class=code><pre><span class=line><span class=meta>@RestController</span></span><br><span class=line><span class=keyword>public</span> <span class=keyword>class</span> <span class="title class_">ChatController</span> {</span><br><span class=line></span><br><span class=line> <span class=keyword>private</span> <span class=keyword>final</span> ChatClient chatClient;</span><br><span class=line></span><br><span class=line> <span class=keyword>public</span> <span class="title function_">ChatController</span><span class=params>(ChatClient.Builder builder)</span> {</span><br><span class=line> <span class=built_in>this</span>.chatClient = builder.defaultSystem(<span class=string>"你是个资深服务端架构师"</span>).build();</span><br><span class=line> }</span><br><span class=line></span><br><span class=line> <span class=meta>@GetMapping("/demo/{message}")</span></span><br><span class=line> <span class=keyword>public</span> String <span class="title function_">demo</span><span class=params>(<span class=meta>@PathVariable("message")</span> String message)</span> {</span><br><span class=line></span><br><span class=line> message = <span class=string>"怎么学习java"</span>;</span><br><span class=line> <span class=type>String</span> <span class=variable>response</span> <span class=operator>=</span> chatClient.prompt()</span><br><span class=line> .user(message)</span><br><span class=line> .call().content();</span><br><span class=line></span><br><span class=line> <span class=keyword>return</span> response;</span><br><span class=line> }</span><br><span class=line>}</span><br></pre></table></figure><p>对的，甚至把prompt写死了<br><img data-src=https://img.nicksxs.me/lajihuoshan.png><br>这里经过了好几个包版本的调整<br>原先比较早的0.8的不支持接口的自定义路径，因为要用火山的接口，它的接口跟openai是不一样的，后面有个v3啥的<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></pre><td class=code><pre><span class=line>spring.ai.openai.base-url=https://ark.cn-beijing.volces.com/api/v3</span><br><span class=line>spring.ai.openai.chat.options.model=deepseek-r1-250120</span><br><span class=line>spring.ai.openai.chat.completions-path=/chat/completions</span><br></pre></table></figure><p>但是可以从上面的图里看出来，响应非常慢，简直不能忍，有openai 权限的可以帮忙试下究竟是啥原因，抓包啥的也不太方便</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/08/10/%E4%BB%8B%E7%BB%8D%E4%B8%80%E6%89%B9%E6%AF%94%E8%BE%83%E4%B8%8D%E9%94%99%E7%9A%84n8n%E6%A8%A1%E6%9D%BF/ 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/08/10/%E4%BB%8B%E7%BB%8D%E4%B8%80%E6%89%B9%E6%AF%94%E8%BE%83%E4%B8%8D%E9%94%99%E7%9A%84n8n%E6%A8%A1%E6%9D%BF/ itemprop=url>介绍一批比较不错的n8n模板</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-08-10 20:48:35" datetime=2025-08-10T20:48:35+08:00>2025-08-10</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=介绍一批比较不错的n8n模板 id=/2025/08/10/%E4%BB%8B%E7%BB%8D%E4%B8%80%E6%89%B9%E6%AF%94%E8%BE%83%E4%B8%8D%E9%94%99%E7%9A%84n8n%E6%A8%A1%E6%9D%BF/ 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/08/10/%E4%BB%8B%E7%BB%8D%E4%B8%80%E6%89%B9%E6%AF%94%E8%BE%83%E4%B8%8D%E9%94%99%E7%9A%84n8n%E6%A8%A1%E6%9D%BF/#disqus_thread itemprop=discussionUrl title=disqus><span class="post-comments-count disqus-comment-count" data-disqus-identifier=2025/08/10/介绍一批比较不错的n8n模板/ itemprop=commentCount></span></a></span></div></div></header><div class=post-body itemprop=articleBody><p>上次介绍了n8n的安装和简单的工作流搭建，现在我们可以来看下一批免费开源的模板，也许它不能直接为我们所用，但是可以给我们搭建使用过程中提供一些帮助<br>就是这个仓库 <code>https://github.com/wassupjay/n8n-free-templates</code><br>比如我们看下第一个目录，是关于机器学习的<br>我们可以直接直接把原始文件json格式的下载下来，<br><img data-src=https://img.nicksxs.me/n8n_import.png><br>然后就可以按自己的需求进行调整，当然还是需要一些openai的api这些才能完全体跑起来，我本地受限制就暂时不完整演示了<br>而如果觉得这些模板可能离实际使用有点远的话，可以看下官方的模板库，发现官方的模板库是更适合我们初学者的<br>官方的可以在这里找到<br><code>https://n8n.io/workflows/</code><br>上半部分是如何学习n8n<br><img data-src=https://img.nicksxs.me/n8n_template_to_learn.png><br>下半部分是热门的template<br><img data-src=https://img.nicksxs.me/n8n_trending_template.png><br>比如我们来看下Chat with local LLMs using n8n and Ollama <a href=https://n8n.io/workflows/2384-chat-with-local-llms-using-n8n-and-ollama/ rel=noopener target=_blank>这个</a><br>我们可以直接导入<br>然后配置ollama的端口和模型<br><img data-src=https://img.nicksxs.me/n8n_local_ollama.png><br>这样我们就可以借助ollama来做个类似chatgpt的网页工具，当然这些只是举例，真正使用的还有待各自发掘和分享</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/67/>67</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>
|