[{"data":1,"prerenderedAt":7347},["ShallowReactive",2],{"blog-D4E5F6":3,"blog-all":2542},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"code":11,"body":12,"_type":2536,"_id":2537,"_source":2538,"_file":2539,"_stem":2540,"_extension":2541},"\u002Fblog\u002F2-post","blog",false,"","FastAPI + Vue3：轻量级全栈项目实战","前后端目录规范与依赖管理","2026-05-08","D4E5F6",{"type":13,"children":14,"toc":2529},"root",[15,23,39,46,56,65,262,268,525,889,895,1308,1638,1644,1660,1857,1872,2038,2044,2336,2477,2485,2523],{"type":16,"tag":17,"props":18,"children":20},"element","h1",{"id":19},"fastapi-vue3轻量级全栈项目实战",[21],{"type":22,"value":8},"text",{"type":16,"tag":24,"props":25,"children":26},"blockquote",{},[27],{"type":16,"tag":28,"props":29,"children":30},"p",{},[31,33,37],{"type":22,"value":32},"适用场景：快速原型 \u002F 内部工具 \u002F 个人项目",{"type":16,"tag":34,"props":35,"children":36},"br",{},[],{"type":22,"value":38},"\n技术栈：FastAPI + Vue3 + Pinia + Axios + Docker",{"type":16,"tag":40,"props":41,"children":43},"h2",{"id":42},"_1-目录规范与依赖管理",[44],{"type":22,"value":45},"1. 目录规范与依赖管理",{"type":16,"tag":47,"props":48,"children":50},"pre",{"code":49},"project\u002F\n├── backend\u002F          # Python 后端\n│   ├── app\u002F\n│   │   ├── main.py\n│   │   ├── routers\u002F\n│   │   ├── models\u002F   # SQLAlchemy \u002F Pydantic\n│   │   └── core\u002F     # Config, Security\n│   └── requirements.txt\n└── frontend\u002F         # Vue3 前端\n    ├── src\u002F\n    │   ├── api\u002F\n    │   ├── stores\u002F   # Pinia\n    │   └── composables\u002F\n    └── package.json\n",[51],{"type":16,"tag":52,"props":53,"children":54},"code",{"__ignoreMap":7},[55],{"type":22,"value":49},{"type":16,"tag":28,"props":57,"children":58},{},[59],{"type":16,"tag":60,"props":61,"children":62},"strong",{},[63],{"type":22,"value":64},"初始化",{"type":16,"tag":47,"props":66,"children":70},{"code":67,"language":68,"meta":7,"className":69,"style":7},"# Backend\npython -m venv .venv && source .venv\u002Fbin\u002Factivate\npip install \"fastapi[standard]\" pydantic passlib[bcrypt] python-jose[cryptography]\n\n# Frontend\nnpm create vite@latest frontend -- --template vue-ts\ncd frontend && npm i axios pinia vue-router\n","bash","language-bash shiki shiki-themes github-light github-dark",[71],{"type":16,"tag":52,"props":72,"children":73},{"__ignoreMap":7},[74,86,129,163,173,182,221],{"type":16,"tag":75,"props":76,"children":79},"span",{"class":77,"line":78},"line",1,[80],{"type":16,"tag":75,"props":81,"children":83},{"style":82},"--shiki-default:#6A737D;--shiki-dark:#6A737D",[84],{"type":22,"value":85},"# Backend\n",{"type":16,"tag":75,"props":87,"children":89},{"class":77,"line":88},2,[90,96,102,108,113,119,124],{"type":16,"tag":75,"props":91,"children":93},{"style":92},"--shiki-default:#6F42C1;--shiki-dark:#B392F0",[94],{"type":22,"value":95},"python",{"type":16,"tag":75,"props":97,"children":99},{"style":98},"--shiki-default:#005CC5;--shiki-dark:#79B8FF",[100],{"type":22,"value":101}," -m",{"type":16,"tag":75,"props":103,"children":105},{"style":104},"--shiki-default:#032F62;--shiki-dark:#9ECBFF",[106],{"type":22,"value":107}," venv",{"type":16,"tag":75,"props":109,"children":110},{"style":104},[111],{"type":22,"value":112}," .venv",{"type":16,"tag":75,"props":114,"children":116},{"style":115},"--shiki-default:#24292E;--shiki-dark:#E1E4E8",[117],{"type":22,"value":118}," && ",{"type":16,"tag":75,"props":120,"children":121},{"style":98},[122],{"type":22,"value":123},"source",{"type":16,"tag":75,"props":125,"children":126},{"style":104},[127],{"type":22,"value":128}," .venv\u002Fbin\u002Factivate\n",{"type":16,"tag":75,"props":130,"children":132},{"class":77,"line":131},3,[133,138,143,148,153,158],{"type":16,"tag":75,"props":134,"children":135},{"style":92},[136],{"type":22,"value":137},"pip",{"type":16,"tag":75,"props":139,"children":140},{"style":104},[141],{"type":22,"value":142}," install",{"type":16,"tag":75,"props":144,"children":145},{"style":104},[146],{"type":22,"value":147}," \"fastapi[standard]\"",{"type":16,"tag":75,"props":149,"children":150},{"style":104},[151],{"type":22,"value":152}," pydantic",{"type":16,"tag":75,"props":154,"children":155},{"style":104},[156],{"type":22,"value":157}," passlib[bcrypt]",{"type":16,"tag":75,"props":159,"children":160},{"style":104},[161],{"type":22,"value":162}," python-jose[cryptography]\n",{"type":16,"tag":75,"props":164,"children":166},{"class":77,"line":165},4,[167],{"type":16,"tag":75,"props":168,"children":170},{"emptyLinePlaceholder":169},true,[171],{"type":22,"value":172},"\n",{"type":16,"tag":75,"props":174,"children":176},{"class":77,"line":175},5,[177],{"type":16,"tag":75,"props":178,"children":179},{"style":82},[180],{"type":22,"value":181},"# Frontend\n",{"type":16,"tag":75,"props":183,"children":185},{"class":77,"line":184},6,[186,191,196,201,206,211,216],{"type":16,"tag":75,"props":187,"children":188},{"style":92},[189],{"type":22,"value":190},"npm",{"type":16,"tag":75,"props":192,"children":193},{"style":104},[194],{"type":22,"value":195}," create",{"type":16,"tag":75,"props":197,"children":198},{"style":104},[199],{"type":22,"value":200}," vite@latest",{"type":16,"tag":75,"props":202,"children":203},{"style":104},[204],{"type":22,"value":205}," frontend",{"type":16,"tag":75,"props":207,"children":208},{"style":98},[209],{"type":22,"value":210}," --",{"type":16,"tag":75,"props":212,"children":213},{"style":98},[214],{"type":22,"value":215}," --template",{"type":16,"tag":75,"props":217,"children":218},{"style":104},[219],{"type":22,"value":220}," vue-ts\n",{"type":16,"tag":75,"props":222,"children":224},{"class":77,"line":223},7,[225,230,234,238,242,247,252,257],{"type":16,"tag":75,"props":226,"children":227},{"style":98},[228],{"type":22,"value":229},"cd",{"type":16,"tag":75,"props":231,"children":232},{"style":104},[233],{"type":22,"value":205},{"type":16,"tag":75,"props":235,"children":236},{"style":115},[237],{"type":22,"value":118},{"type":16,"tag":75,"props":239,"children":240},{"style":92},[241],{"type":22,"value":190},{"type":16,"tag":75,"props":243,"children":244},{"style":104},[245],{"type":22,"value":246}," i",{"type":16,"tag":75,"props":248,"children":249},{"style":104},[250],{"type":22,"value":251}," axios",{"type":16,"tag":75,"props":253,"children":254},{"style":104},[255],{"type":22,"value":256}," pinia",{"type":16,"tag":75,"props":258,"children":259},{"style":104},[260],{"type":22,"value":261}," vue-router\n",{"type":16,"tag":40,"props":263,"children":265},{"id":264},"_2-fastapi-路由pydantic-校验与-jwt",[266],{"type":22,"value":267},"2. FastAPI 路由、Pydantic 校验与 JWT",{"type":16,"tag":47,"props":269,"children":272},{"code":270,"language":95,"meta":7,"className":271,"style":7},"# backend\u002Fapp\u002Fcore\u002Fsecurity.py\nfrom datetime import datetime, timedelta\nfrom jose import jwt\n\nSECRET_KEY = \"your-secret\"\nALGORITHM = \"HS256\"\n\ndef create_token(data: dict, expires_delta: timedelta = timedelta(hours=24)):\n    to_encode = data.copy()\n    to_encode.update({\"exp\": datetime.utcnow() + expires_delta})\n    return jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)\n","language-python shiki shiki-themes github-light github-dark",[273],{"type":16,"tag":52,"props":274,"children":275},{"__ignoreMap":7},[276,284,308,329,336,354,371,378,437,455,484],{"type":16,"tag":75,"props":277,"children":278},{"class":77,"line":78},[279],{"type":16,"tag":75,"props":280,"children":281},{"style":82},[282],{"type":22,"value":283},"# backend\u002Fapp\u002Fcore\u002Fsecurity.py\n",{"type":16,"tag":75,"props":285,"children":286},{"class":77,"line":88},[287,293,298,303],{"type":16,"tag":75,"props":288,"children":290},{"style":289},"--shiki-default:#D73A49;--shiki-dark:#F97583",[291],{"type":22,"value":292},"from",{"type":16,"tag":75,"props":294,"children":295},{"style":115},[296],{"type":22,"value":297}," datetime ",{"type":16,"tag":75,"props":299,"children":300},{"style":289},[301],{"type":22,"value":302},"import",{"type":16,"tag":75,"props":304,"children":305},{"style":115},[306],{"type":22,"value":307}," datetime, timedelta\n",{"type":16,"tag":75,"props":309,"children":310},{"class":77,"line":131},[311,315,320,324],{"type":16,"tag":75,"props":312,"children":313},{"style":289},[314],{"type":22,"value":292},{"type":16,"tag":75,"props":316,"children":317},{"style":115},[318],{"type":22,"value":319}," jose ",{"type":16,"tag":75,"props":321,"children":322},{"style":289},[323],{"type":22,"value":302},{"type":16,"tag":75,"props":325,"children":326},{"style":115},[327],{"type":22,"value":328}," jwt\n",{"type":16,"tag":75,"props":330,"children":331},{"class":77,"line":165},[332],{"type":16,"tag":75,"props":333,"children":334},{"emptyLinePlaceholder":169},[335],{"type":22,"value":172},{"type":16,"tag":75,"props":337,"children":338},{"class":77,"line":175},[339,344,349],{"type":16,"tag":75,"props":340,"children":341},{"style":98},[342],{"type":22,"value":343},"SECRET_KEY",{"type":16,"tag":75,"props":345,"children":346},{"style":289},[347],{"type":22,"value":348}," =",{"type":16,"tag":75,"props":350,"children":351},{"style":104},[352],{"type":22,"value":353}," \"your-secret\"\n",{"type":16,"tag":75,"props":355,"children":356},{"class":77,"line":184},[357,362,366],{"type":16,"tag":75,"props":358,"children":359},{"style":98},[360],{"type":22,"value":361},"ALGORITHM",{"type":16,"tag":75,"props":363,"children":364},{"style":289},[365],{"type":22,"value":348},{"type":16,"tag":75,"props":367,"children":368},{"style":104},[369],{"type":22,"value":370}," \"HS256\"\n",{"type":16,"tag":75,"props":372,"children":373},{"class":77,"line":223},[374],{"type":16,"tag":75,"props":375,"children":376},{"emptyLinePlaceholder":169},[377],{"type":22,"value":172},{"type":16,"tag":75,"props":379,"children":381},{"class":77,"line":380},8,[382,387,392,397,402,407,412,417,423,427,432],{"type":16,"tag":75,"props":383,"children":384},{"style":289},[385],{"type":22,"value":386},"def",{"type":16,"tag":75,"props":388,"children":389},{"style":92},[390],{"type":22,"value":391}," create_token",{"type":16,"tag":75,"props":393,"children":394},{"style":115},[395],{"type":22,"value":396},"(data: ",{"type":16,"tag":75,"props":398,"children":399},{"style":98},[400],{"type":22,"value":401},"dict",{"type":16,"tag":75,"props":403,"children":404},{"style":115},[405],{"type":22,"value":406},", expires_delta: timedelta ",{"type":16,"tag":75,"props":408,"children":409},{"style":289},[410],{"type":22,"value":411},"=",{"type":16,"tag":75,"props":413,"children":414},{"style":115},[415],{"type":22,"value":416}," timedelta(",{"type":16,"tag":75,"props":418,"children":420},{"style":419},"--shiki-default:#E36209;--shiki-dark:#FFAB70",[421],{"type":22,"value":422},"hours",{"type":16,"tag":75,"props":424,"children":425},{"style":289},[426],{"type":22,"value":411},{"type":16,"tag":75,"props":428,"children":429},{"style":98},[430],{"type":22,"value":431},"24",{"type":16,"tag":75,"props":433,"children":434},{"style":115},[435],{"type":22,"value":436},")):\n",{"type":16,"tag":75,"props":438,"children":440},{"class":77,"line":439},9,[441,446,450],{"type":16,"tag":75,"props":442,"children":443},{"style":115},[444],{"type":22,"value":445},"    to_encode ",{"type":16,"tag":75,"props":447,"children":448},{"style":289},[449],{"type":22,"value":411},{"type":16,"tag":75,"props":451,"children":452},{"style":115},[453],{"type":22,"value":454}," data.copy()\n",{"type":16,"tag":75,"props":456,"children":458},{"class":77,"line":457},10,[459,464,469,474,479],{"type":16,"tag":75,"props":460,"children":461},{"style":115},[462],{"type":22,"value":463},"    to_encode.update({",{"type":16,"tag":75,"props":465,"children":466},{"style":104},[467],{"type":22,"value":468},"\"exp\"",{"type":16,"tag":75,"props":470,"children":471},{"style":115},[472],{"type":22,"value":473},": datetime.utcnow() ",{"type":16,"tag":75,"props":475,"children":476},{"style":289},[477],{"type":22,"value":478},"+",{"type":16,"tag":75,"props":480,"children":481},{"style":115},[482],{"type":22,"value":483}," expires_delta})\n",{"type":16,"tag":75,"props":485,"children":487},{"class":77,"line":486},11,[488,493,498,502,507,512,516,520],{"type":16,"tag":75,"props":489,"children":490},{"style":289},[491],{"type":22,"value":492},"    return",{"type":16,"tag":75,"props":494,"children":495},{"style":115},[496],{"type":22,"value":497}," jwt.encode(to_encode, ",{"type":16,"tag":75,"props":499,"children":500},{"style":98},[501],{"type":22,"value":343},{"type":16,"tag":75,"props":503,"children":504},{"style":115},[505],{"type":22,"value":506},", ",{"type":16,"tag":75,"props":508,"children":509},{"style":419},[510],{"type":22,"value":511},"algorithm",{"type":16,"tag":75,"props":513,"children":514},{"style":289},[515],{"type":22,"value":411},{"type":16,"tag":75,"props":517,"children":518},{"style":98},[519],{"type":22,"value":361},{"type":16,"tag":75,"props":521,"children":522},{"style":115},[523],{"type":22,"value":524},")\n",{"type":16,"tag":47,"props":526,"children":528},{"code":527,"language":95,"meta":7,"className":271,"style":7},"# backend\u002Fapp\u002Frouters\u002Fauth.py\nfrom fastapi import APIRouter, Depends, HTTPException\nfrom pydantic import BaseModel\nfrom app.core.security import create_token\n\nrouter = APIRouter(prefix=\"\u002Fauth\", tags=[\"auth\"])\n\nclass LoginReq(BaseModel):\n    username: str\n    password: str\n\n@router.post(\"\u002Flogin\")\ndef login(payload: LoginReq):\n    if payload.username != \"admin\" or payload.password != \"123\":\n        raise HTTPException(401, \"Invalid credentials\")\n    return {\"access_token\": create_token({\"sub\": payload.username})}\n",[529],{"type":16,"tag":52,"props":530,"children":531},{"__ignoreMap":7},[532,540,561,582,603,610,669,676,704,717,729,736,758,776,824,856],{"type":16,"tag":75,"props":533,"children":534},{"class":77,"line":78},[535],{"type":16,"tag":75,"props":536,"children":537},{"style":82},[538],{"type":22,"value":539},"# backend\u002Fapp\u002Frouters\u002Fauth.py\n",{"type":16,"tag":75,"props":541,"children":542},{"class":77,"line":88},[543,547,552,556],{"type":16,"tag":75,"props":544,"children":545},{"style":289},[546],{"type":22,"value":292},{"type":16,"tag":75,"props":548,"children":549},{"style":115},[550],{"type":22,"value":551}," fastapi ",{"type":16,"tag":75,"props":553,"children":554},{"style":289},[555],{"type":22,"value":302},{"type":16,"tag":75,"props":557,"children":558},{"style":115},[559],{"type":22,"value":560}," APIRouter, Depends, HTTPException\n",{"type":16,"tag":75,"props":562,"children":563},{"class":77,"line":131},[564,568,573,577],{"type":16,"tag":75,"props":565,"children":566},{"style":289},[567],{"type":22,"value":292},{"type":16,"tag":75,"props":569,"children":570},{"style":115},[571],{"type":22,"value":572}," pydantic ",{"type":16,"tag":75,"props":574,"children":575},{"style":289},[576],{"type":22,"value":302},{"type":16,"tag":75,"props":578,"children":579},{"style":115},[580],{"type":22,"value":581}," BaseModel\n",{"type":16,"tag":75,"props":583,"children":584},{"class":77,"line":165},[585,589,594,598],{"type":16,"tag":75,"props":586,"children":587},{"style":289},[588],{"type":22,"value":292},{"type":16,"tag":75,"props":590,"children":591},{"style":115},[592],{"type":22,"value":593}," app.core.security ",{"type":16,"tag":75,"props":595,"children":596},{"style":289},[597],{"type":22,"value":302},{"type":16,"tag":75,"props":599,"children":600},{"style":115},[601],{"type":22,"value":602}," create_token\n",{"type":16,"tag":75,"props":604,"children":605},{"class":77,"line":175},[606],{"type":16,"tag":75,"props":607,"children":608},{"emptyLinePlaceholder":169},[609],{"type":22,"value":172},{"type":16,"tag":75,"props":611,"children":612},{"class":77,"line":184},[613,618,622,627,632,636,641,645,650,654,659,664],{"type":16,"tag":75,"props":614,"children":615},{"style":115},[616],{"type":22,"value":617},"router ",{"type":16,"tag":75,"props":619,"children":620},{"style":289},[621],{"type":22,"value":411},{"type":16,"tag":75,"props":623,"children":624},{"style":115},[625],{"type":22,"value":626}," APIRouter(",{"type":16,"tag":75,"props":628,"children":629},{"style":419},[630],{"type":22,"value":631},"prefix",{"type":16,"tag":75,"props":633,"children":634},{"style":289},[635],{"type":22,"value":411},{"type":16,"tag":75,"props":637,"children":638},{"style":104},[639],{"type":22,"value":640},"\"\u002Fauth\"",{"type":16,"tag":75,"props":642,"children":643},{"style":115},[644],{"type":22,"value":506},{"type":16,"tag":75,"props":646,"children":647},{"style":419},[648],{"type":22,"value":649},"tags",{"type":16,"tag":75,"props":651,"children":652},{"style":289},[653],{"type":22,"value":411},{"type":16,"tag":75,"props":655,"children":656},{"style":115},[657],{"type":22,"value":658},"[",{"type":16,"tag":75,"props":660,"children":661},{"style":104},[662],{"type":22,"value":663},"\"auth\"",{"type":16,"tag":75,"props":665,"children":666},{"style":115},[667],{"type":22,"value":668},"])\n",{"type":16,"tag":75,"props":670,"children":671},{"class":77,"line":223},[672],{"type":16,"tag":75,"props":673,"children":674},{"emptyLinePlaceholder":169},[675],{"type":22,"value":172},{"type":16,"tag":75,"props":677,"children":678},{"class":77,"line":380},[679,684,689,694,699],{"type":16,"tag":75,"props":680,"children":681},{"style":289},[682],{"type":22,"value":683},"class",{"type":16,"tag":75,"props":685,"children":686},{"style":92},[687],{"type":22,"value":688}," LoginReq",{"type":16,"tag":75,"props":690,"children":691},{"style":115},[692],{"type":22,"value":693},"(",{"type":16,"tag":75,"props":695,"children":696},{"style":92},[697],{"type":22,"value":698},"BaseModel",{"type":16,"tag":75,"props":700,"children":701},{"style":115},[702],{"type":22,"value":703},"):\n",{"type":16,"tag":75,"props":705,"children":706},{"class":77,"line":439},[707,712],{"type":16,"tag":75,"props":708,"children":709},{"style":115},[710],{"type":22,"value":711},"    username: ",{"type":16,"tag":75,"props":713,"children":714},{"style":98},[715],{"type":22,"value":716},"str\n",{"type":16,"tag":75,"props":718,"children":719},{"class":77,"line":457},[720,725],{"type":16,"tag":75,"props":721,"children":722},{"style":115},[723],{"type":22,"value":724},"    password: ",{"type":16,"tag":75,"props":726,"children":727},{"style":98},[728],{"type":22,"value":716},{"type":16,"tag":75,"props":730,"children":731},{"class":77,"line":486},[732],{"type":16,"tag":75,"props":733,"children":734},{"emptyLinePlaceholder":169},[735],{"type":22,"value":172},{"type":16,"tag":75,"props":737,"children":739},{"class":77,"line":738},12,[740,745,749,754],{"type":16,"tag":75,"props":741,"children":742},{"style":92},[743],{"type":22,"value":744},"@router.post",{"type":16,"tag":75,"props":746,"children":747},{"style":115},[748],{"type":22,"value":693},{"type":16,"tag":75,"props":750,"children":751},{"style":104},[752],{"type":22,"value":753},"\"\u002Flogin\"",{"type":16,"tag":75,"props":755,"children":756},{"style":115},[757],{"type":22,"value":524},{"type":16,"tag":75,"props":759,"children":761},{"class":77,"line":760},13,[762,766,771],{"type":16,"tag":75,"props":763,"children":764},{"style":289},[765],{"type":22,"value":386},{"type":16,"tag":75,"props":767,"children":768},{"style":92},[769],{"type":22,"value":770}," login",{"type":16,"tag":75,"props":772,"children":773},{"style":115},[774],{"type":22,"value":775},"(payload: LoginReq):\n",{"type":16,"tag":75,"props":777,"children":779},{"class":77,"line":778},14,[780,785,790,795,800,805,810,814,819],{"type":16,"tag":75,"props":781,"children":782},{"style":289},[783],{"type":22,"value":784},"    if",{"type":16,"tag":75,"props":786,"children":787},{"style":115},[788],{"type":22,"value":789}," payload.username ",{"type":16,"tag":75,"props":791,"children":792},{"style":289},[793],{"type":22,"value":794},"!=",{"type":16,"tag":75,"props":796,"children":797},{"style":104},[798],{"type":22,"value":799}," \"admin\"",{"type":16,"tag":75,"props":801,"children":802},{"style":289},[803],{"type":22,"value":804}," or",{"type":16,"tag":75,"props":806,"children":807},{"style":115},[808],{"type":22,"value":809}," payload.password ",{"type":16,"tag":75,"props":811,"children":812},{"style":289},[813],{"type":22,"value":794},{"type":16,"tag":75,"props":815,"children":816},{"style":104},[817],{"type":22,"value":818}," \"123\"",{"type":16,"tag":75,"props":820,"children":821},{"style":115},[822],{"type":22,"value":823},":\n",{"type":16,"tag":75,"props":825,"children":827},{"class":77,"line":826},15,[828,833,838,843,847,852],{"type":16,"tag":75,"props":829,"children":830},{"style":289},[831],{"type":22,"value":832},"        raise",{"type":16,"tag":75,"props":834,"children":835},{"style":115},[836],{"type":22,"value":837}," HTTPException(",{"type":16,"tag":75,"props":839,"children":840},{"style":98},[841],{"type":22,"value":842},"401",{"type":16,"tag":75,"props":844,"children":845},{"style":115},[846],{"type":22,"value":506},{"type":16,"tag":75,"props":848,"children":849},{"style":104},[850],{"type":22,"value":851},"\"Invalid credentials\"",{"type":16,"tag":75,"props":853,"children":854},{"style":115},[855],{"type":22,"value":524},{"type":16,"tag":75,"props":857,"children":859},{"class":77,"line":858},16,[860,864,869,874,879,884],{"type":16,"tag":75,"props":861,"children":862},{"style":289},[863],{"type":22,"value":492},{"type":16,"tag":75,"props":865,"children":866},{"style":115},[867],{"type":22,"value":868}," {",{"type":16,"tag":75,"props":870,"children":871},{"style":104},[872],{"type":22,"value":873},"\"access_token\"",{"type":16,"tag":75,"props":875,"children":876},{"style":115},[877],{"type":22,"value":878},": create_token({",{"type":16,"tag":75,"props":880,"children":881},{"style":104},[882],{"type":22,"value":883},"\"sub\"",{"type":16,"tag":75,"props":885,"children":886},{"style":115},[887],{"type":22,"value":888},": payload.username})}\n",{"type":16,"tag":40,"props":890,"children":892},{"id":891},"_3-vue3-请求封装与拦截器",[893],{"type":22,"value":894},"3. Vue3 请求封装与拦截器",{"type":16,"tag":47,"props":896,"children":900},{"code":897,"language":898,"meta":7,"className":899,"style":7},"\u002F\u002F frontend\u002Fsrc\u002Fapi\u002Fclient.ts\nimport axios from \"axios\"\nimport { useAuthStore } from \"@\u002Fstores\u002Fauth\"\n\nconst api = axios.create({ baseURL: \"\u002Fapi\", timeout: 5000 })\n\napi.interceptors.request.use(cfg => {\n  const token = useAuthStore().token\n  if (token) cfg.headers.Authorization = `Bearer ${token}`\n  return cfg\n})\n\napi.interceptors.response.use(\n  res => res.data,\n  err => {\n    if (err.response?.status === 401) useAuthStore().logout()\n    return Promise.reject(err)\n  }\n)\n\nexport default api\n","ts","language-ts shiki shiki-themes github-light github-dark",[901],{"type":16,"tag":52,"props":902,"children":903},{"__ignoreMap":7},[904,912,933,954,961,1013,1020,1052,1079,1111,1124,1132,1139,1156,1173,1189,1236,1264,1273,1281,1289],{"type":16,"tag":75,"props":905,"children":906},{"class":77,"line":78},[907],{"type":16,"tag":75,"props":908,"children":909},{"style":82},[910],{"type":22,"value":911},"\u002F\u002F frontend\u002Fsrc\u002Fapi\u002Fclient.ts\n",{"type":16,"tag":75,"props":913,"children":914},{"class":77,"line":88},[915,919,924,928],{"type":16,"tag":75,"props":916,"children":917},{"style":289},[918],{"type":22,"value":302},{"type":16,"tag":75,"props":920,"children":921},{"style":115},[922],{"type":22,"value":923}," axios ",{"type":16,"tag":75,"props":925,"children":926},{"style":289},[927],{"type":22,"value":292},{"type":16,"tag":75,"props":929,"children":930},{"style":104},[931],{"type":22,"value":932}," \"axios\"\n",{"type":16,"tag":75,"props":934,"children":935},{"class":77,"line":131},[936,940,945,949],{"type":16,"tag":75,"props":937,"children":938},{"style":289},[939],{"type":22,"value":302},{"type":16,"tag":75,"props":941,"children":942},{"style":115},[943],{"type":22,"value":944}," { useAuthStore } ",{"type":16,"tag":75,"props":946,"children":947},{"style":289},[948],{"type":22,"value":292},{"type":16,"tag":75,"props":950,"children":951},{"style":104},[952],{"type":22,"value":953}," \"@\u002Fstores\u002Fauth\"\n",{"type":16,"tag":75,"props":955,"children":956},{"class":77,"line":165},[957],{"type":16,"tag":75,"props":958,"children":959},{"emptyLinePlaceholder":169},[960],{"type":22,"value":172},{"type":16,"tag":75,"props":962,"children":963},{"class":77,"line":175},[964,969,974,978,983,988,993,998,1003,1008],{"type":16,"tag":75,"props":965,"children":966},{"style":289},[967],{"type":22,"value":968},"const",{"type":16,"tag":75,"props":970,"children":971},{"style":98},[972],{"type":22,"value":973}," api",{"type":16,"tag":75,"props":975,"children":976},{"style":289},[977],{"type":22,"value":348},{"type":16,"tag":75,"props":979,"children":980},{"style":115},[981],{"type":22,"value":982}," axios.",{"type":16,"tag":75,"props":984,"children":985},{"style":92},[986],{"type":22,"value":987},"create",{"type":16,"tag":75,"props":989,"children":990},{"style":115},[991],{"type":22,"value":992},"({ baseURL: ",{"type":16,"tag":75,"props":994,"children":995},{"style":104},[996],{"type":22,"value":997},"\"\u002Fapi\"",{"type":16,"tag":75,"props":999,"children":1000},{"style":115},[1001],{"type":22,"value":1002},", timeout: ",{"type":16,"tag":75,"props":1004,"children":1005},{"style":98},[1006],{"type":22,"value":1007},"5000",{"type":16,"tag":75,"props":1009,"children":1010},{"style":115},[1011],{"type":22,"value":1012}," })\n",{"type":16,"tag":75,"props":1014,"children":1015},{"class":77,"line":184},[1016],{"type":16,"tag":75,"props":1017,"children":1018},{"emptyLinePlaceholder":169},[1019],{"type":22,"value":172},{"type":16,"tag":75,"props":1021,"children":1022},{"class":77,"line":223},[1023,1028,1033,1037,1042,1047],{"type":16,"tag":75,"props":1024,"children":1025},{"style":115},[1026],{"type":22,"value":1027},"api.interceptors.request.",{"type":16,"tag":75,"props":1029,"children":1030},{"style":92},[1031],{"type":22,"value":1032},"use",{"type":16,"tag":75,"props":1034,"children":1035},{"style":115},[1036],{"type":22,"value":693},{"type":16,"tag":75,"props":1038,"children":1039},{"style":419},[1040],{"type":22,"value":1041},"cfg",{"type":16,"tag":75,"props":1043,"children":1044},{"style":289},[1045],{"type":22,"value":1046}," =>",{"type":16,"tag":75,"props":1048,"children":1049},{"style":115},[1050],{"type":22,"value":1051}," {\n",{"type":16,"tag":75,"props":1053,"children":1054},{"class":77,"line":380},[1055,1060,1065,1069,1074],{"type":16,"tag":75,"props":1056,"children":1057},{"style":289},[1058],{"type":22,"value":1059},"  const",{"type":16,"tag":75,"props":1061,"children":1062},{"style":98},[1063],{"type":22,"value":1064}," token",{"type":16,"tag":75,"props":1066,"children":1067},{"style":289},[1068],{"type":22,"value":348},{"type":16,"tag":75,"props":1070,"children":1071},{"style":92},[1072],{"type":22,"value":1073}," useAuthStore",{"type":16,"tag":75,"props":1075,"children":1076},{"style":115},[1077],{"type":22,"value":1078},"().token\n",{"type":16,"tag":75,"props":1080,"children":1081},{"class":77,"line":439},[1082,1087,1092,1096,1101,1106],{"type":16,"tag":75,"props":1083,"children":1084},{"style":289},[1085],{"type":22,"value":1086},"  if",{"type":16,"tag":75,"props":1088,"children":1089},{"style":115},[1090],{"type":22,"value":1091}," (token) cfg.headers.Authorization ",{"type":16,"tag":75,"props":1093,"children":1094},{"style":289},[1095],{"type":22,"value":411},{"type":16,"tag":75,"props":1097,"children":1098},{"style":104},[1099],{"type":22,"value":1100}," `Bearer ${",{"type":16,"tag":75,"props":1102,"children":1103},{"style":115},[1104],{"type":22,"value":1105},"token",{"type":16,"tag":75,"props":1107,"children":1108},{"style":104},[1109],{"type":22,"value":1110},"}`\n",{"type":16,"tag":75,"props":1112,"children":1113},{"class":77,"line":457},[1114,1119],{"type":16,"tag":75,"props":1115,"children":1116},{"style":289},[1117],{"type":22,"value":1118},"  return",{"type":16,"tag":75,"props":1120,"children":1121},{"style":115},[1122],{"type":22,"value":1123}," cfg\n",{"type":16,"tag":75,"props":1125,"children":1126},{"class":77,"line":486},[1127],{"type":16,"tag":75,"props":1128,"children":1129},{"style":115},[1130],{"type":22,"value":1131},"})\n",{"type":16,"tag":75,"props":1133,"children":1134},{"class":77,"line":738},[1135],{"type":16,"tag":75,"props":1136,"children":1137},{"emptyLinePlaceholder":169},[1138],{"type":22,"value":172},{"type":16,"tag":75,"props":1140,"children":1141},{"class":77,"line":760},[1142,1147,1151],{"type":16,"tag":75,"props":1143,"children":1144},{"style":115},[1145],{"type":22,"value":1146},"api.interceptors.response.",{"type":16,"tag":75,"props":1148,"children":1149},{"style":92},[1150],{"type":22,"value":1032},{"type":16,"tag":75,"props":1152,"children":1153},{"style":115},[1154],{"type":22,"value":1155},"(\n",{"type":16,"tag":75,"props":1157,"children":1158},{"class":77,"line":778},[1159,1164,1168],{"type":16,"tag":75,"props":1160,"children":1161},{"style":419},[1162],{"type":22,"value":1163},"  res",{"type":16,"tag":75,"props":1165,"children":1166},{"style":289},[1167],{"type":22,"value":1046},{"type":16,"tag":75,"props":1169,"children":1170},{"style":115},[1171],{"type":22,"value":1172}," res.data,\n",{"type":16,"tag":75,"props":1174,"children":1175},{"class":77,"line":826},[1176,1181,1185],{"type":16,"tag":75,"props":1177,"children":1178},{"style":419},[1179],{"type":22,"value":1180},"  err",{"type":16,"tag":75,"props":1182,"children":1183},{"style":289},[1184],{"type":22,"value":1046},{"type":16,"tag":75,"props":1186,"children":1187},{"style":115},[1188],{"type":22,"value":1051},{"type":16,"tag":75,"props":1190,"children":1191},{"class":77,"line":858},[1192,1196,1201,1206,1211,1216,1221,1226,1231],{"type":16,"tag":75,"props":1193,"children":1194},{"style":289},[1195],{"type":22,"value":784},{"type":16,"tag":75,"props":1197,"children":1198},{"style":115},[1199],{"type":22,"value":1200}," (err.response?.status ",{"type":16,"tag":75,"props":1202,"children":1203},{"style":289},[1204],{"type":22,"value":1205},"===",{"type":16,"tag":75,"props":1207,"children":1208},{"style":98},[1209],{"type":22,"value":1210}," 401",{"type":16,"tag":75,"props":1212,"children":1213},{"style":115},[1214],{"type":22,"value":1215},") ",{"type":16,"tag":75,"props":1217,"children":1218},{"style":92},[1219],{"type":22,"value":1220},"useAuthStore",{"type":16,"tag":75,"props":1222,"children":1223},{"style":115},[1224],{"type":22,"value":1225},"().",{"type":16,"tag":75,"props":1227,"children":1228},{"style":92},[1229],{"type":22,"value":1230},"logout",{"type":16,"tag":75,"props":1232,"children":1233},{"style":115},[1234],{"type":22,"value":1235},"()\n",{"type":16,"tag":75,"props":1237,"children":1239},{"class":77,"line":1238},17,[1240,1244,1249,1254,1259],{"type":16,"tag":75,"props":1241,"children":1242},{"style":289},[1243],{"type":22,"value":492},{"type":16,"tag":75,"props":1245,"children":1246},{"style":98},[1247],{"type":22,"value":1248}," Promise",{"type":16,"tag":75,"props":1250,"children":1251},{"style":115},[1252],{"type":22,"value":1253},".",{"type":16,"tag":75,"props":1255,"children":1256},{"style":92},[1257],{"type":22,"value":1258},"reject",{"type":16,"tag":75,"props":1260,"children":1261},{"style":115},[1262],{"type":22,"value":1263},"(err)\n",{"type":16,"tag":75,"props":1265,"children":1267},{"class":77,"line":1266},18,[1268],{"type":16,"tag":75,"props":1269,"children":1270},{"style":115},[1271],{"type":22,"value":1272},"  }\n",{"type":16,"tag":75,"props":1274,"children":1276},{"class":77,"line":1275},19,[1277],{"type":16,"tag":75,"props":1278,"children":1279},{"style":115},[1280],{"type":22,"value":524},{"type":16,"tag":75,"props":1282,"children":1284},{"class":77,"line":1283},20,[1285],{"type":16,"tag":75,"props":1286,"children":1287},{"emptyLinePlaceholder":169},[1288],{"type":22,"value":172},{"type":16,"tag":75,"props":1290,"children":1292},{"class":77,"line":1291},21,[1293,1298,1303],{"type":16,"tag":75,"props":1294,"children":1295},{"style":289},[1296],{"type":22,"value":1297},"export",{"type":16,"tag":75,"props":1299,"children":1300},{"style":289},[1301],{"type":22,"value":1302}," default",{"type":16,"tag":75,"props":1304,"children":1305},{"style":115},[1306],{"type":22,"value":1307}," api\n",{"type":16,"tag":47,"props":1309,"children":1311},{"code":1310,"language":898,"meta":7,"className":899,"style":7},"\u002F\u002F frontend\u002Fsrc\u002Fstores\u002Fauth.ts\nimport { defineStore } from \"pinia\"\nimport { ref } from \"vue\"\n\nexport const useAuthStore = defineStore(\"auth\", () => {\n  const token = ref\u003Cstring | null>(localStorage.getItem(\"token\"))\n  const setToken = (t: string) => { token.value = t; localStorage.setItem(\"token\", t) }\n  const logout = () => { token.value = null; localStorage.removeItem(\"token\") }\n  return { token, setToken, logout }\n})\n",[1312],{"type":16,"tag":52,"props":1313,"children":1314},{"__ignoreMap":7},[1315,1323,1344,1365,1372,1419,1483,1559,1619,1631],{"type":16,"tag":75,"props":1316,"children":1317},{"class":77,"line":78},[1318],{"type":16,"tag":75,"props":1319,"children":1320},{"style":82},[1321],{"type":22,"value":1322},"\u002F\u002F frontend\u002Fsrc\u002Fstores\u002Fauth.ts\n",{"type":16,"tag":75,"props":1324,"children":1325},{"class":77,"line":88},[1326,1330,1335,1339],{"type":16,"tag":75,"props":1327,"children":1328},{"style":289},[1329],{"type":22,"value":302},{"type":16,"tag":75,"props":1331,"children":1332},{"style":115},[1333],{"type":22,"value":1334}," { defineStore } ",{"type":16,"tag":75,"props":1336,"children":1337},{"style":289},[1338],{"type":22,"value":292},{"type":16,"tag":75,"props":1340,"children":1341},{"style":104},[1342],{"type":22,"value":1343}," \"pinia\"\n",{"type":16,"tag":75,"props":1345,"children":1346},{"class":77,"line":131},[1347,1351,1356,1360],{"type":16,"tag":75,"props":1348,"children":1349},{"style":289},[1350],{"type":22,"value":302},{"type":16,"tag":75,"props":1352,"children":1353},{"style":115},[1354],{"type":22,"value":1355}," { ref } ",{"type":16,"tag":75,"props":1357,"children":1358},{"style":289},[1359],{"type":22,"value":292},{"type":16,"tag":75,"props":1361,"children":1362},{"style":104},[1363],{"type":22,"value":1364}," \"vue\"\n",{"type":16,"tag":75,"props":1366,"children":1367},{"class":77,"line":165},[1368],{"type":16,"tag":75,"props":1369,"children":1370},{"emptyLinePlaceholder":169},[1371],{"type":22,"value":172},{"type":16,"tag":75,"props":1373,"children":1374},{"class":77,"line":175},[1375,1379,1384,1388,1392,1397,1401,1405,1410,1415],{"type":16,"tag":75,"props":1376,"children":1377},{"style":289},[1378],{"type":22,"value":1297},{"type":16,"tag":75,"props":1380,"children":1381},{"style":289},[1382],{"type":22,"value":1383}," const",{"type":16,"tag":75,"props":1385,"children":1386},{"style":98},[1387],{"type":22,"value":1073},{"type":16,"tag":75,"props":1389,"children":1390},{"style":289},[1391],{"type":22,"value":348},{"type":16,"tag":75,"props":1393,"children":1394},{"style":92},[1395],{"type":22,"value":1396}," defineStore",{"type":16,"tag":75,"props":1398,"children":1399},{"style":115},[1400],{"type":22,"value":693},{"type":16,"tag":75,"props":1402,"children":1403},{"style":104},[1404],{"type":22,"value":663},{"type":16,"tag":75,"props":1406,"children":1407},{"style":115},[1408],{"type":22,"value":1409},", () ",{"type":16,"tag":75,"props":1411,"children":1412},{"style":289},[1413],{"type":22,"value":1414},"=>",{"type":16,"tag":75,"props":1416,"children":1417},{"style":115},[1418],{"type":22,"value":1051},{"type":16,"tag":75,"props":1420,"children":1421},{"class":77,"line":184},[1422,1426,1430,1434,1439,1444,1449,1454,1459,1464,1469,1473,1478],{"type":16,"tag":75,"props":1423,"children":1424},{"style":289},[1425],{"type":22,"value":1059},{"type":16,"tag":75,"props":1427,"children":1428},{"style":98},[1429],{"type":22,"value":1064},{"type":16,"tag":75,"props":1431,"children":1432},{"style":289},[1433],{"type":22,"value":348},{"type":16,"tag":75,"props":1435,"children":1436},{"style":92},[1437],{"type":22,"value":1438}," ref",{"type":16,"tag":75,"props":1440,"children":1441},{"style":115},[1442],{"type":22,"value":1443},"\u003C",{"type":16,"tag":75,"props":1445,"children":1446},{"style":98},[1447],{"type":22,"value":1448},"string",{"type":16,"tag":75,"props":1450,"children":1451},{"style":289},[1452],{"type":22,"value":1453}," |",{"type":16,"tag":75,"props":1455,"children":1456},{"style":98},[1457],{"type":22,"value":1458}," null",{"type":16,"tag":75,"props":1460,"children":1461},{"style":115},[1462],{"type":22,"value":1463},">(localStorage.",{"type":16,"tag":75,"props":1465,"children":1466},{"style":92},[1467],{"type":22,"value":1468},"getItem",{"type":16,"tag":75,"props":1470,"children":1471},{"style":115},[1472],{"type":22,"value":693},{"type":16,"tag":75,"props":1474,"children":1475},{"style":104},[1476],{"type":22,"value":1477},"\"token\"",{"type":16,"tag":75,"props":1479,"children":1480},{"style":115},[1481],{"type":22,"value":1482},"))\n",{"type":16,"tag":75,"props":1484,"children":1485},{"class":77,"line":223},[1486,1490,1495,1499,1504,1509,1514,1519,1523,1527,1532,1536,1541,1546,1550,1554],{"type":16,"tag":75,"props":1487,"children":1488},{"style":289},[1489],{"type":22,"value":1059},{"type":16,"tag":75,"props":1491,"children":1492},{"style":92},[1493],{"type":22,"value":1494}," setToken",{"type":16,"tag":75,"props":1496,"children":1497},{"style":289},[1498],{"type":22,"value":348},{"type":16,"tag":75,"props":1500,"children":1501},{"style":115},[1502],{"type":22,"value":1503}," (",{"type":16,"tag":75,"props":1505,"children":1506},{"style":419},[1507],{"type":22,"value":1508},"t",{"type":16,"tag":75,"props":1510,"children":1511},{"style":289},[1512],{"type":22,"value":1513},":",{"type":16,"tag":75,"props":1515,"children":1516},{"style":98},[1517],{"type":22,"value":1518}," string",{"type":16,"tag":75,"props":1520,"children":1521},{"style":115},[1522],{"type":22,"value":1215},{"type":16,"tag":75,"props":1524,"children":1525},{"style":289},[1526],{"type":22,"value":1414},{"type":16,"tag":75,"props":1528,"children":1529},{"style":115},[1530],{"type":22,"value":1531}," { token.value ",{"type":16,"tag":75,"props":1533,"children":1534},{"style":289},[1535],{"type":22,"value":411},{"type":16,"tag":75,"props":1537,"children":1538},{"style":115},[1539],{"type":22,"value":1540}," t; localStorage.",{"type":16,"tag":75,"props":1542,"children":1543},{"style":92},[1544],{"type":22,"value":1545},"setItem",{"type":16,"tag":75,"props":1547,"children":1548},{"style":115},[1549],{"type":22,"value":693},{"type":16,"tag":75,"props":1551,"children":1552},{"style":104},[1553],{"type":22,"value":1477},{"type":16,"tag":75,"props":1555,"children":1556},{"style":115},[1557],{"type":22,"value":1558},", t) }\n",{"type":16,"tag":75,"props":1560,"children":1561},{"class":77,"line":380},[1562,1566,1571,1575,1580,1584,1588,1592,1596,1601,1606,1610,1614],{"type":16,"tag":75,"props":1563,"children":1564},{"style":289},[1565],{"type":22,"value":1059},{"type":16,"tag":75,"props":1567,"children":1568},{"style":92},[1569],{"type":22,"value":1570}," logout",{"type":16,"tag":75,"props":1572,"children":1573},{"style":289},[1574],{"type":22,"value":348},{"type":16,"tag":75,"props":1576,"children":1577},{"style":115},[1578],{"type":22,"value":1579}," () ",{"type":16,"tag":75,"props":1581,"children":1582},{"style":289},[1583],{"type":22,"value":1414},{"type":16,"tag":75,"props":1585,"children":1586},{"style":115},[1587],{"type":22,"value":1531},{"type":16,"tag":75,"props":1589,"children":1590},{"style":289},[1591],{"type":22,"value":411},{"type":16,"tag":75,"props":1593,"children":1594},{"style":98},[1595],{"type":22,"value":1458},{"type":16,"tag":75,"props":1597,"children":1598},{"style":115},[1599],{"type":22,"value":1600},"; localStorage.",{"type":16,"tag":75,"props":1602,"children":1603},{"style":92},[1604],{"type":22,"value":1605},"removeItem",{"type":16,"tag":75,"props":1607,"children":1608},{"style":115},[1609],{"type":22,"value":693},{"type":16,"tag":75,"props":1611,"children":1612},{"style":104},[1613],{"type":22,"value":1477},{"type":16,"tag":75,"props":1615,"children":1616},{"style":115},[1617],{"type":22,"value":1618},") }\n",{"type":16,"tag":75,"props":1620,"children":1621},{"class":77,"line":439},[1622,1626],{"type":16,"tag":75,"props":1623,"children":1624},{"style":289},[1625],{"type":22,"value":1118},{"type":16,"tag":75,"props":1627,"children":1628},{"style":115},[1629],{"type":22,"value":1630}," { token, setToken, logout }\n",{"type":16,"tag":75,"props":1632,"children":1633},{"class":77,"line":457},[1634],{"type":16,"tag":75,"props":1635,"children":1636},{"style":115},[1637],{"type":22,"value":1131},{"type":16,"tag":40,"props":1639,"children":1641},{"id":1640},"_4-本地开发与跨域配置",[1642],{"type":22,"value":1643},"4. 本地开发与跨域配置",{"type":16,"tag":28,"props":1645,"children":1646},{},[1647],{"type":16,"tag":60,"props":1648,"children":1649},{},[1650,1652,1658],{"type":22,"value":1651},"Vite 代理 (",{"type":16,"tag":52,"props":1653,"children":1655},{"className":1654},[],[1656],{"type":22,"value":1657},"frontend\u002Fvite.config.ts",{"type":22,"value":1659},")",{"type":16,"tag":47,"props":1661,"children":1663},{"code":1662,"language":898,"meta":7,"className":899,"style":7},"export default defineConfig({\n  server: {\n    proxy: {\n      \"\u002Fapi\": {\n        target: \"http:\u002F\u002F127.0.0.1:8000\",\n        changeOrigin: true,\n        rewrite: path => path.replace(\u002F^\\\u002Fapi\u002F, \"\")\n      }\n    }\n  }\n})\n",[1664],{"type":16,"tag":52,"props":1665,"children":1666},{"__ignoreMap":7},[1667,1688,1696,1704,1717,1735,1752,1827,1835,1843,1850],{"type":16,"tag":75,"props":1668,"children":1669},{"class":77,"line":78},[1670,1674,1678,1683],{"type":16,"tag":75,"props":1671,"children":1672},{"style":289},[1673],{"type":22,"value":1297},{"type":16,"tag":75,"props":1675,"children":1676},{"style":289},[1677],{"type":22,"value":1302},{"type":16,"tag":75,"props":1679,"children":1680},{"style":92},[1681],{"type":22,"value":1682}," defineConfig",{"type":16,"tag":75,"props":1684,"children":1685},{"style":115},[1686],{"type":22,"value":1687},"({\n",{"type":16,"tag":75,"props":1689,"children":1690},{"class":77,"line":88},[1691],{"type":16,"tag":75,"props":1692,"children":1693},{"style":115},[1694],{"type":22,"value":1695},"  server: {\n",{"type":16,"tag":75,"props":1697,"children":1698},{"class":77,"line":131},[1699],{"type":16,"tag":75,"props":1700,"children":1701},{"style":115},[1702],{"type":22,"value":1703},"    proxy: {\n",{"type":16,"tag":75,"props":1705,"children":1706},{"class":77,"line":165},[1707,1712],{"type":16,"tag":75,"props":1708,"children":1709},{"style":104},[1710],{"type":22,"value":1711},"      \"\u002Fapi\"",{"type":16,"tag":75,"props":1713,"children":1714},{"style":115},[1715],{"type":22,"value":1716},": {\n",{"type":16,"tag":75,"props":1718,"children":1719},{"class":77,"line":175},[1720,1725,1730],{"type":16,"tag":75,"props":1721,"children":1722},{"style":115},[1723],{"type":22,"value":1724},"        target: ",{"type":16,"tag":75,"props":1726,"children":1727},{"style":104},[1728],{"type":22,"value":1729},"\"http:\u002F\u002F127.0.0.1:8000\"",{"type":16,"tag":75,"props":1731,"children":1732},{"style":115},[1733],{"type":22,"value":1734},",\n",{"type":16,"tag":75,"props":1736,"children":1737},{"class":77,"line":184},[1738,1743,1748],{"type":16,"tag":75,"props":1739,"children":1740},{"style":115},[1741],{"type":22,"value":1742},"        changeOrigin: ",{"type":16,"tag":75,"props":1744,"children":1745},{"style":98},[1746],{"type":22,"value":1747},"true",{"type":16,"tag":75,"props":1749,"children":1750},{"style":115},[1751],{"type":22,"value":1734},{"type":16,"tag":75,"props":1753,"children":1754},{"class":77,"line":223},[1755,1760,1765,1770,1774,1779,1784,1788,1793,1798,1804,1810,1814,1818,1823],{"type":16,"tag":75,"props":1756,"children":1757},{"style":92},[1758],{"type":22,"value":1759},"        rewrite",{"type":16,"tag":75,"props":1761,"children":1762},{"style":115},[1763],{"type":22,"value":1764},": ",{"type":16,"tag":75,"props":1766,"children":1767},{"style":419},[1768],{"type":22,"value":1769},"path",{"type":16,"tag":75,"props":1771,"children":1772},{"style":289},[1773],{"type":22,"value":1046},{"type":16,"tag":75,"props":1775,"children":1776},{"style":115},[1777],{"type":22,"value":1778}," path.",{"type":16,"tag":75,"props":1780,"children":1781},{"style":92},[1782],{"type":22,"value":1783},"replace",{"type":16,"tag":75,"props":1785,"children":1786},{"style":115},[1787],{"type":22,"value":693},{"type":16,"tag":75,"props":1789,"children":1790},{"style":104},[1791],{"type":22,"value":1792},"\u002F",{"type":16,"tag":75,"props":1794,"children":1795},{"style":289},[1796],{"type":22,"value":1797},"^",{"type":16,"tag":75,"props":1799,"children":1801},{"style":1800},"--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold",[1802],{"type":22,"value":1803},"\\\u002F",{"type":16,"tag":75,"props":1805,"children":1807},{"style":1806},"--shiki-default:#032F62;--shiki-dark:#DBEDFF",[1808],{"type":22,"value":1809},"api",{"type":16,"tag":75,"props":1811,"children":1812},{"style":104},[1813],{"type":22,"value":1792},{"type":16,"tag":75,"props":1815,"children":1816},{"style":115},[1817],{"type":22,"value":506},{"type":16,"tag":75,"props":1819,"children":1820},{"style":104},[1821],{"type":22,"value":1822},"\"\"",{"type":16,"tag":75,"props":1824,"children":1825},{"style":115},[1826],{"type":22,"value":524},{"type":16,"tag":75,"props":1828,"children":1829},{"class":77,"line":380},[1830],{"type":16,"tag":75,"props":1831,"children":1832},{"style":115},[1833],{"type":22,"value":1834},"      }\n",{"type":16,"tag":75,"props":1836,"children":1837},{"class":77,"line":439},[1838],{"type":16,"tag":75,"props":1839,"children":1840},{"style":115},[1841],{"type":22,"value":1842},"    }\n",{"type":16,"tag":75,"props":1844,"children":1845},{"class":77,"line":457},[1846],{"type":16,"tag":75,"props":1847,"children":1848},{"style":115},[1849],{"type":22,"value":1272},{"type":16,"tag":75,"props":1851,"children":1852},{"class":77,"line":486},[1853],{"type":16,"tag":75,"props":1854,"children":1855},{"style":115},[1856],{"type":22,"value":1131},{"type":16,"tag":28,"props":1858,"children":1859},{},[1860],{"type":16,"tag":60,"props":1861,"children":1862},{},[1863,1865,1871],{"type":22,"value":1864},"FastAPI CORS (",{"type":16,"tag":52,"props":1866,"children":1868},{"className":1867},[],[1869],{"type":22,"value":1870},"backend\u002Fapp\u002Fmain.py",{"type":22,"value":1659},{"type":16,"tag":47,"props":1873,"children":1875},{"code":1874,"language":95,"meta":7,"className":271,"style":7},"from fastapi import FastAPI\nfrom fastapi.middleware.cors import CORSMiddleware\n\napp = FastAPI()\napp.add_middleware(CORSMiddleware, allow_origins=[\"*\"], allow_credentials=True,\n                   allow_methods=[\"*\"], allow_headers=[\"*\"])\n",[1876],{"type":16,"tag":52,"props":1877,"children":1878},{"__ignoreMap":7},[1879,1899,1920,1927,1944,1993],{"type":16,"tag":75,"props":1880,"children":1881},{"class":77,"line":78},[1882,1886,1890,1894],{"type":16,"tag":75,"props":1883,"children":1884},{"style":289},[1885],{"type":22,"value":292},{"type":16,"tag":75,"props":1887,"children":1888},{"style":115},[1889],{"type":22,"value":551},{"type":16,"tag":75,"props":1891,"children":1892},{"style":289},[1893],{"type":22,"value":302},{"type":16,"tag":75,"props":1895,"children":1896},{"style":115},[1897],{"type":22,"value":1898}," FastAPI\n",{"type":16,"tag":75,"props":1900,"children":1901},{"class":77,"line":88},[1902,1906,1911,1915],{"type":16,"tag":75,"props":1903,"children":1904},{"style":289},[1905],{"type":22,"value":292},{"type":16,"tag":75,"props":1907,"children":1908},{"style":115},[1909],{"type":22,"value":1910}," fastapi.middleware.cors ",{"type":16,"tag":75,"props":1912,"children":1913},{"style":289},[1914],{"type":22,"value":302},{"type":16,"tag":75,"props":1916,"children":1917},{"style":115},[1918],{"type":22,"value":1919}," CORSMiddleware\n",{"type":16,"tag":75,"props":1921,"children":1922},{"class":77,"line":131},[1923],{"type":16,"tag":75,"props":1924,"children":1925},{"emptyLinePlaceholder":169},[1926],{"type":22,"value":172},{"type":16,"tag":75,"props":1928,"children":1929},{"class":77,"line":165},[1930,1935,1939],{"type":16,"tag":75,"props":1931,"children":1932},{"style":115},[1933],{"type":22,"value":1934},"app ",{"type":16,"tag":75,"props":1936,"children":1937},{"style":289},[1938],{"type":22,"value":411},{"type":16,"tag":75,"props":1940,"children":1941},{"style":115},[1942],{"type":22,"value":1943}," FastAPI()\n",{"type":16,"tag":75,"props":1945,"children":1946},{"class":77,"line":175},[1947,1952,1957,1961,1965,1970,1975,1980,1984,1989],{"type":16,"tag":75,"props":1948,"children":1949},{"style":115},[1950],{"type":22,"value":1951},"app.add_middleware(CORSMiddleware, ",{"type":16,"tag":75,"props":1953,"children":1954},{"style":419},[1955],{"type":22,"value":1956},"allow_origins",{"type":16,"tag":75,"props":1958,"children":1959},{"style":289},[1960],{"type":22,"value":411},{"type":16,"tag":75,"props":1962,"children":1963},{"style":115},[1964],{"type":22,"value":658},{"type":16,"tag":75,"props":1966,"children":1967},{"style":104},[1968],{"type":22,"value":1969},"\"*\"",{"type":16,"tag":75,"props":1971,"children":1972},{"style":115},[1973],{"type":22,"value":1974},"], ",{"type":16,"tag":75,"props":1976,"children":1977},{"style":419},[1978],{"type":22,"value":1979},"allow_credentials",{"type":16,"tag":75,"props":1981,"children":1982},{"style":289},[1983],{"type":22,"value":411},{"type":16,"tag":75,"props":1985,"children":1986},{"style":98},[1987],{"type":22,"value":1988},"True",{"type":16,"tag":75,"props":1990,"children":1991},{"style":115},[1992],{"type":22,"value":1734},{"type":16,"tag":75,"props":1994,"children":1995},{"class":77,"line":184},[1996,2001,2005,2009,2013,2017,2022,2026,2030,2034],{"type":16,"tag":75,"props":1997,"children":1998},{"style":419},[1999],{"type":22,"value":2000},"                   allow_methods",{"type":16,"tag":75,"props":2002,"children":2003},{"style":289},[2004],{"type":22,"value":411},{"type":16,"tag":75,"props":2006,"children":2007},{"style":115},[2008],{"type":22,"value":658},{"type":16,"tag":75,"props":2010,"children":2011},{"style":104},[2012],{"type":22,"value":1969},{"type":16,"tag":75,"props":2014,"children":2015},{"style":115},[2016],{"type":22,"value":1974},{"type":16,"tag":75,"props":2018,"children":2019},{"style":419},[2020],{"type":22,"value":2021},"allow_headers",{"type":16,"tag":75,"props":2023,"children":2024},{"style":289},[2025],{"type":22,"value":411},{"type":16,"tag":75,"props":2027,"children":2028},{"style":115},[2029],{"type":22,"value":658},{"type":16,"tag":75,"props":2031,"children":2032},{"style":104},[2033],{"type":22,"value":1969},{"type":16,"tag":75,"props":2035,"children":2036},{"style":115},[2037],{"type":22,"value":668},{"type":16,"tag":40,"props":2039,"children":2041},{"id":2040},"_5-docker-compose-编排与-nginx",[2042],{"type":22,"value":2043},"5. Docker Compose 编排与 Nginx",{"type":16,"tag":47,"props":2045,"children":2049},{"code":2046,"language":2047,"meta":7,"className":2048,"style":7},"# docker-compose.yml\nservices:\n  backend:\n    build: .\u002Fbackend\n    command: uvicorn app.main:app --host 0.0.0.0 --port 8000 --reload\n    volumes: [.\u002Fbackend:\u002Fapp]\n  frontend:\n    build: .\u002Ffrontend\n    command: npm run dev -- --host\n    volumes: [.\u002Ffrontend:\u002Fapp, \u002Fapp\u002Fnode_modules]\n    ports: [\"5173:5173\"]\n  nginx:\n    image: nginx:alpine\n    ports: [\"80:80\"]\n    volumes: [\".\u002Fnginx.conf:\u002Fetc\u002Fnginx\u002Fconf.d\u002Fdefault.conf:ro\"]\n    depends_on: [backend, frontend]\n","yaml","language-yaml shiki shiki-themes github-light github-dark",[2050],{"type":16,"tag":52,"props":2051,"children":2052},{"__ignoreMap":7},[2053,2061,2074,2086,2103,2120,2143,2155,2171,2187,2216,2237,2249,2266,2286,2306],{"type":16,"tag":75,"props":2054,"children":2055},{"class":77,"line":78},[2056],{"type":16,"tag":75,"props":2057,"children":2058},{"style":82},[2059],{"type":22,"value":2060},"# docker-compose.yml\n",{"type":16,"tag":75,"props":2062,"children":2063},{"class":77,"line":88},[2064,2070],{"type":16,"tag":75,"props":2065,"children":2067},{"style":2066},"--shiki-default:#22863A;--shiki-dark:#85E89D",[2068],{"type":22,"value":2069},"services",{"type":16,"tag":75,"props":2071,"children":2072},{"style":115},[2073],{"type":22,"value":823},{"type":16,"tag":75,"props":2075,"children":2076},{"class":77,"line":131},[2077,2082],{"type":16,"tag":75,"props":2078,"children":2079},{"style":2066},[2080],{"type":22,"value":2081},"  backend",{"type":16,"tag":75,"props":2083,"children":2084},{"style":115},[2085],{"type":22,"value":823},{"type":16,"tag":75,"props":2087,"children":2088},{"class":77,"line":165},[2089,2094,2098],{"type":16,"tag":75,"props":2090,"children":2091},{"style":2066},[2092],{"type":22,"value":2093},"    build",{"type":16,"tag":75,"props":2095,"children":2096},{"style":115},[2097],{"type":22,"value":1764},{"type":16,"tag":75,"props":2099,"children":2100},{"style":104},[2101],{"type":22,"value":2102},".\u002Fbackend\n",{"type":16,"tag":75,"props":2104,"children":2105},{"class":77,"line":175},[2106,2111,2115],{"type":16,"tag":75,"props":2107,"children":2108},{"style":2066},[2109],{"type":22,"value":2110},"    command",{"type":16,"tag":75,"props":2112,"children":2113},{"style":115},[2114],{"type":22,"value":1764},{"type":16,"tag":75,"props":2116,"children":2117},{"style":104},[2118],{"type":22,"value":2119},"uvicorn app.main:app --host 0.0.0.0 --port 8000 --reload\n",{"type":16,"tag":75,"props":2121,"children":2122},{"class":77,"line":184},[2123,2128,2133,2138],{"type":16,"tag":75,"props":2124,"children":2125},{"style":2066},[2126],{"type":22,"value":2127},"    volumes",{"type":16,"tag":75,"props":2129,"children":2130},{"style":115},[2131],{"type":22,"value":2132},": [",{"type":16,"tag":75,"props":2134,"children":2135},{"style":104},[2136],{"type":22,"value":2137},".\u002Fbackend:\u002Fapp",{"type":16,"tag":75,"props":2139,"children":2140},{"style":115},[2141],{"type":22,"value":2142},"]\n",{"type":16,"tag":75,"props":2144,"children":2145},{"class":77,"line":223},[2146,2151],{"type":16,"tag":75,"props":2147,"children":2148},{"style":2066},[2149],{"type":22,"value":2150},"  frontend",{"type":16,"tag":75,"props":2152,"children":2153},{"style":115},[2154],{"type":22,"value":823},{"type":16,"tag":75,"props":2156,"children":2157},{"class":77,"line":380},[2158,2162,2166],{"type":16,"tag":75,"props":2159,"children":2160},{"style":2066},[2161],{"type":22,"value":2093},{"type":16,"tag":75,"props":2163,"children":2164},{"style":115},[2165],{"type":22,"value":1764},{"type":16,"tag":75,"props":2167,"children":2168},{"style":104},[2169],{"type":22,"value":2170},".\u002Ffrontend\n",{"type":16,"tag":75,"props":2172,"children":2173},{"class":77,"line":439},[2174,2178,2182],{"type":16,"tag":75,"props":2175,"children":2176},{"style":2066},[2177],{"type":22,"value":2110},{"type":16,"tag":75,"props":2179,"children":2180},{"style":115},[2181],{"type":22,"value":1764},{"type":16,"tag":75,"props":2183,"children":2184},{"style":104},[2185],{"type":22,"value":2186},"npm run dev -- --host\n",{"type":16,"tag":75,"props":2188,"children":2189},{"class":77,"line":457},[2190,2194,2198,2203,2207,2212],{"type":16,"tag":75,"props":2191,"children":2192},{"style":2066},[2193],{"type":22,"value":2127},{"type":16,"tag":75,"props":2195,"children":2196},{"style":115},[2197],{"type":22,"value":2132},{"type":16,"tag":75,"props":2199,"children":2200},{"style":104},[2201],{"type":22,"value":2202},".\u002Ffrontend:\u002Fapp",{"type":16,"tag":75,"props":2204,"children":2205},{"style":115},[2206],{"type":22,"value":506},{"type":16,"tag":75,"props":2208,"children":2209},{"style":104},[2210],{"type":22,"value":2211},"\u002Fapp\u002Fnode_modules",{"type":16,"tag":75,"props":2213,"children":2214},{"style":115},[2215],{"type":22,"value":2142},{"type":16,"tag":75,"props":2217,"children":2218},{"class":77,"line":486},[2219,2224,2228,2233],{"type":16,"tag":75,"props":2220,"children":2221},{"style":2066},[2222],{"type":22,"value":2223},"    ports",{"type":16,"tag":75,"props":2225,"children":2226},{"style":115},[2227],{"type":22,"value":2132},{"type":16,"tag":75,"props":2229,"children":2230},{"style":104},[2231],{"type":22,"value":2232},"\"5173:5173\"",{"type":16,"tag":75,"props":2234,"children":2235},{"style":115},[2236],{"type":22,"value":2142},{"type":16,"tag":75,"props":2238,"children":2239},{"class":77,"line":738},[2240,2245],{"type":16,"tag":75,"props":2241,"children":2242},{"style":2066},[2243],{"type":22,"value":2244},"  nginx",{"type":16,"tag":75,"props":2246,"children":2247},{"style":115},[2248],{"type":22,"value":823},{"type":16,"tag":75,"props":2250,"children":2251},{"class":77,"line":760},[2252,2257,2261],{"type":16,"tag":75,"props":2253,"children":2254},{"style":2066},[2255],{"type":22,"value":2256},"    image",{"type":16,"tag":75,"props":2258,"children":2259},{"style":115},[2260],{"type":22,"value":1764},{"type":16,"tag":75,"props":2262,"children":2263},{"style":104},[2264],{"type":22,"value":2265},"nginx:alpine\n",{"type":16,"tag":75,"props":2267,"children":2268},{"class":77,"line":778},[2269,2273,2277,2282],{"type":16,"tag":75,"props":2270,"children":2271},{"style":2066},[2272],{"type":22,"value":2223},{"type":16,"tag":75,"props":2274,"children":2275},{"style":115},[2276],{"type":22,"value":2132},{"type":16,"tag":75,"props":2278,"children":2279},{"style":104},[2280],{"type":22,"value":2281},"\"80:80\"",{"type":16,"tag":75,"props":2283,"children":2284},{"style":115},[2285],{"type":22,"value":2142},{"type":16,"tag":75,"props":2287,"children":2288},{"class":77,"line":826},[2289,2293,2297,2302],{"type":16,"tag":75,"props":2290,"children":2291},{"style":2066},[2292],{"type":22,"value":2127},{"type":16,"tag":75,"props":2294,"children":2295},{"style":115},[2296],{"type":22,"value":2132},{"type":16,"tag":75,"props":2298,"children":2299},{"style":104},[2300],{"type":22,"value":2301},"\".\u002Fnginx.conf:\u002Fetc\u002Fnginx\u002Fconf.d\u002Fdefault.conf:ro\"",{"type":16,"tag":75,"props":2303,"children":2304},{"style":115},[2305],{"type":22,"value":2142},{"type":16,"tag":75,"props":2307,"children":2308},{"class":77,"line":858},[2309,2314,2318,2323,2327,2332],{"type":16,"tag":75,"props":2310,"children":2311},{"style":2066},[2312],{"type":22,"value":2313},"    depends_on",{"type":16,"tag":75,"props":2315,"children":2316},{"style":115},[2317],{"type":22,"value":2132},{"type":16,"tag":75,"props":2319,"children":2320},{"style":104},[2321],{"type":22,"value":2322},"backend",{"type":16,"tag":75,"props":2324,"children":2325},{"style":115},[2326],{"type":22,"value":506},{"type":16,"tag":75,"props":2328,"children":2329},{"style":104},[2330],{"type":22,"value":2331},"frontend",{"type":16,"tag":75,"props":2333,"children":2334},{"style":115},[2335],{"type":22,"value":2142},{"type":16,"tag":47,"props":2337,"children":2341},{"code":2338,"language":2339,"meta":7,"className":2340,"style":7},"# nginx.conf\nserver {\n  listen 80;\n  location \u002F {\n    proxy_pass http:\u002F\u002Ffrontend:5173;\n  }\n  location \u002Fapi\u002F {\n    proxy_pass http:\u002F\u002Fbackend:8000\u002Fapi\u002F;\n    proxy_set_header Host $host;\n  }\n}\n","nginx","language-nginx shiki shiki-themes github-light github-dark",[2342],{"type":16,"tag":52,"props":2343,"children":2344},{"__ignoreMap":7},[2345,2353,2365,2383,2401,2414,2421,2437,2449,2462,2469],{"type":16,"tag":75,"props":2346,"children":2347},{"class":77,"line":78},[2348],{"type":16,"tag":75,"props":2349,"children":2350},{"style":82},[2351],{"type":22,"value":2352},"# nginx.conf\n",{"type":16,"tag":75,"props":2354,"children":2355},{"class":77,"line":88},[2356,2361],{"type":16,"tag":75,"props":2357,"children":2358},{"style":289},[2359],{"type":22,"value":2360},"server",{"type":16,"tag":75,"props":2362,"children":2363},{"style":115},[2364],{"type":22,"value":1051},{"type":16,"tag":75,"props":2366,"children":2367},{"class":77,"line":131},[2368,2373,2378],{"type":16,"tag":75,"props":2369,"children":2370},{"style":289},[2371],{"type":22,"value":2372},"  listen ",{"type":16,"tag":75,"props":2374,"children":2375},{"style":98},[2376],{"type":22,"value":2377},"80",{"type":16,"tag":75,"props":2379,"children":2380},{"style":115},[2381],{"type":22,"value":2382},";\n",{"type":16,"tag":75,"props":2384,"children":2385},{"class":77,"line":165},[2386,2391,2396],{"type":16,"tag":75,"props":2387,"children":2388},{"style":289},[2389],{"type":22,"value":2390},"  location",{"type":16,"tag":75,"props":2392,"children":2393},{"style":92},[2394],{"type":22,"value":2395}," \u002F ",{"type":16,"tag":75,"props":2397,"children":2398},{"style":115},[2399],{"type":22,"value":2400},"{\n",{"type":16,"tag":75,"props":2402,"children":2403},{"class":77,"line":175},[2404,2409],{"type":16,"tag":75,"props":2405,"children":2406},{"style":289},[2407],{"type":22,"value":2408},"    proxy_pass ",{"type":16,"tag":75,"props":2410,"children":2411},{"style":115},[2412],{"type":22,"value":2413},"http:\u002F\u002Ffrontend:5173;\n",{"type":16,"tag":75,"props":2415,"children":2416},{"class":77,"line":184},[2417],{"type":16,"tag":75,"props":2418,"children":2419},{"style":115},[2420],{"type":22,"value":1272},{"type":16,"tag":75,"props":2422,"children":2423},{"class":77,"line":223},[2424,2428,2433],{"type":16,"tag":75,"props":2425,"children":2426},{"style":289},[2427],{"type":22,"value":2390},{"type":16,"tag":75,"props":2429,"children":2430},{"style":92},[2431],{"type":22,"value":2432}," \u002Fapi\u002F ",{"type":16,"tag":75,"props":2434,"children":2435},{"style":115},[2436],{"type":22,"value":2400},{"type":16,"tag":75,"props":2438,"children":2439},{"class":77,"line":380},[2440,2444],{"type":16,"tag":75,"props":2441,"children":2442},{"style":289},[2443],{"type":22,"value":2408},{"type":16,"tag":75,"props":2445,"children":2446},{"style":115},[2447],{"type":22,"value":2448},"http:\u002F\u002Fbackend:8000\u002Fapi\u002F;\n",{"type":16,"tag":75,"props":2450,"children":2451},{"class":77,"line":439},[2452,2457],{"type":16,"tag":75,"props":2453,"children":2454},{"style":289},[2455],{"type":22,"value":2456},"    proxy_set_header ",{"type":16,"tag":75,"props":2458,"children":2459},{"style":115},[2460],{"type":22,"value":2461},"Host $host;\n",{"type":16,"tag":75,"props":2463,"children":2464},{"class":77,"line":457},[2465],{"type":16,"tag":75,"props":2466,"children":2467},{"style":115},[2468],{"type":22,"value":1272},{"type":16,"tag":75,"props":2470,"children":2471},{"class":77,"line":486},[2472],{"type":16,"tag":75,"props":2473,"children":2474},{"style":115},[2475],{"type":22,"value":2476},"}\n",{"type":16,"tag":28,"props":2478,"children":2479},{},[2480],{"type":16,"tag":60,"props":2481,"children":2482},{},[2483],{"type":22,"value":2484},"启动",{"type":16,"tag":47,"props":2486,"children":2488},{"code":2487,"language":68,"meta":7,"className":69,"style":7},"docker compose up -d\n# 访问 http:\u002F\u002Flocalhost\n",[2489],{"type":16,"tag":52,"props":2490,"children":2491},{"__ignoreMap":7},[2492,2515],{"type":16,"tag":75,"props":2493,"children":2494},{"class":77,"line":78},[2495,2500,2505,2510],{"type":16,"tag":75,"props":2496,"children":2497},{"style":92},[2498],{"type":22,"value":2499},"docker",{"type":16,"tag":75,"props":2501,"children":2502},{"style":104},[2503],{"type":22,"value":2504}," compose",{"type":16,"tag":75,"props":2506,"children":2507},{"style":104},[2508],{"type":22,"value":2509}," up",{"type":16,"tag":75,"props":2511,"children":2512},{"style":98},[2513],{"type":22,"value":2514}," -d\n",{"type":16,"tag":75,"props":2516,"children":2517},{"class":77,"line":88},[2518],{"type":16,"tag":75,"props":2519,"children":2520},{"style":82},[2521],{"type":22,"value":2522},"# 访问 http:\u002F\u002Flocalhost\n",{"type":16,"tag":2524,"props":2525,"children":2526},"style",{},[2527],{"type":22,"value":2528},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":7,"searchDepth":88,"depth":88,"links":2530},[2531,2532,2533,2534,2535],{"id":42,"depth":88,"text":45},{"id":264,"depth":88,"text":267},{"id":891,"depth":88,"text":894},{"id":1640,"depth":88,"text":1643},{"id":2040,"depth":88,"text":2043},"markdown","content:blog:2-post.md","content","blog\u002F2-post.md","blog\u002F2-post","md",[2543,5128,7293],{"_path":2544,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":2545,"description":2546,"date":2547,"body":2548,"_type":2536,"_id":5124,"_source":2538,"_file":5125,"_stem":5126,"_extension":2541,"code":5127},"\u002Fblog\u002F3-post","Nuxt 4 博客重构实战：实现动态文章目录与阅读进度条","使用 Intersection Observer 与 requestAnimationFrame 优化长文阅读体验","2026-06-17",{"type":13,"children":2549,"toc":5113},[2550,2555,2567,2586,2592,2597,2604,2631,3462,3468,3488,3993,4035,4041,4046,4052,4072,4682,4688,4701,4978,4986,5025,5031,5043,5088,5104,5109],{"type":16,"tag":17,"props":2551,"children":2553},{"id":2552},"nuxt-4-博客重构实战实现动态文章目录与阅读进度条",[2554],{"type":22,"value":2545},{"type":16,"tag":28,"props":2556,"children":2557},{},[2558,2560,2565],{"type":22,"value":2559},"在技术博客的重构过程中，内容固然重要，但",{"type":16,"tag":60,"props":2561,"children":2562},{},[2563],{"type":22,"value":2564},"阅读体验",{"type":22,"value":2566},"往往决定了读者能否耐心看完一篇长文。作为一个前端开发者，我始终认为博客不仅是内容的载体，更是前端技术的试验田。",{"type":16,"tag":28,"props":2568,"children":2569},{},[2570,2572,2584],{"type":22,"value":2571},"在将博客迁移到 Nuxt 4 的过程中，我决定为文章页加入两个核心体验优化：",{"type":16,"tag":60,"props":2573,"children":2574},{},[2575,2577,2582],{"type":22,"value":2576},"动态文章目录（TOC）",{"type":16,"tag":60,"props":2578,"children":2579},{},[2580],{"type":22,"value":2581},"和",{"type":22,"value":2583},"沉浸式阅读进度条",{"type":22,"value":2585},"。本文将记录这两个功能的实现思路，以及在 SSR 环境下遇到的一些坑。",{"type":16,"tag":40,"props":2587,"children":2589},{"id":2588},"一-动态文章目录toc的实现",[2590],{"type":22,"value":2591},"一、 动态文章目录（TOC）的实现",{"type":16,"tag":28,"props":2593,"children":2594},{},[2595],{"type":22,"value":2596},"对于包含大量代码和层级标题的技术文章，侧边目录是刚需。我们需要实现两个功能：解析标题生成目录、滚动时高亮当前章节。",{"type":16,"tag":2598,"props":2599,"children":2601},"h3",{"id":2600},"_1-提取文章标题",[2602],{"type":22,"value":2603},"1. 提取文章标题",{"type":16,"tag":28,"props":2605,"children":2606},{},[2607,2609,2615,2617,2622,2624,2629],{"type":22,"value":2608},"在 Nuxt 中，Markdown 渲染后通常会包裹在一个特定的容器内（例如 ",{"type":16,"tag":52,"props":2610,"children":2612},{"className":2611},[],[2613],{"type":22,"value":2614},".article-content",{"type":22,"value":2616},"）。我们可以在组件挂载后，通过 DOM 查询提取所有的 ",{"type":16,"tag":52,"props":2618,"children":2620},{"className":2619},[],[2621],{"type":22,"value":40},{"type":22,"value":2623}," 和 ",{"type":16,"tag":52,"props":2625,"children":2627},{"className":2626},[],[2628],{"type":22,"value":2598},{"type":22,"value":2630}," 标签。",{"type":16,"tag":47,"props":2632,"children":2636},{"className":2633,"code":2634,"language":2635,"meta":7,"style":7},"language-typescript shiki shiki-themes github-light github-dark","\u002F\u002F composables\u002FuseToc.ts\nimport { ref, onMounted, onUnmounted } from 'vue'\n\ninterface TocItem {\n  id: string\n  text: string\n  level: number\n}\n\nexport function useToc(containerSelector = '.article-content') {\n  const headings = ref\u003CTocItem[]>([])\n  const activeId = ref('')\n  let observer: IntersectionObserver | null = null\n\n  const generateToc = () => {\n    \u002F\u002F 仅在客户端执行 DOM 操作\n    if (import.meta.server) return\n    \n    const container = document.querySelector(containerSelector)\n    if (!container) return\n\n    const elements = container.querySelectorAll('h2, h3')\n    headings.value = Array.from(elements).map((el) => ({\n      id: el.id || `heading-${Math.random().toString(36).substr(2, 9)}`,\n      text: el.textContent || '',\n      level: parseInt(el.tagName.substring(1)),\n    }))\n\n    \u002F\u002F 确保标题有 id，方便锚点跳转\n    elements.forEach((el, index) => {\n      if (!el.id) el.id = headings.value[index].id\n    })\n    \n    initObserver()\n  }\n\n  \u002F\u002F ... 初始化 IntersectionObserver 的逻辑\n}\n","typescript",[2637],{"type":16,"tag":52,"props":2638,"children":2639},{"__ignoreMap":7},[2640,2648,2669,2676,2693,2710,2726,2743,2750,2757,2797,2831,2864,2903,2910,2938,2946,2980,2988,3020,3045,3052,3092,3147,3239,3261,3299,3308,3316,3325,3368,3399,3408,3416,3429,3437,3445,3454],{"type":16,"tag":75,"props":2641,"children":2642},{"class":77,"line":78},[2643],{"type":16,"tag":75,"props":2644,"children":2645},{"style":82},[2646],{"type":22,"value":2647},"\u002F\u002F composables\u002FuseToc.ts\n",{"type":16,"tag":75,"props":2649,"children":2650},{"class":77,"line":88},[2651,2655,2660,2664],{"type":16,"tag":75,"props":2652,"children":2653},{"style":289},[2654],{"type":22,"value":302},{"type":16,"tag":75,"props":2656,"children":2657},{"style":115},[2658],{"type":22,"value":2659}," { ref, onMounted, onUnmounted } ",{"type":16,"tag":75,"props":2661,"children":2662},{"style":289},[2663],{"type":22,"value":292},{"type":16,"tag":75,"props":2665,"children":2666},{"style":104},[2667],{"type":22,"value":2668}," 'vue'\n",{"type":16,"tag":75,"props":2670,"children":2671},{"class":77,"line":131},[2672],{"type":16,"tag":75,"props":2673,"children":2674},{"emptyLinePlaceholder":169},[2675],{"type":22,"value":172},{"type":16,"tag":75,"props":2677,"children":2678},{"class":77,"line":165},[2679,2684,2689],{"type":16,"tag":75,"props":2680,"children":2681},{"style":289},[2682],{"type":22,"value":2683},"interface",{"type":16,"tag":75,"props":2685,"children":2686},{"style":92},[2687],{"type":22,"value":2688}," TocItem",{"type":16,"tag":75,"props":2690,"children":2691},{"style":115},[2692],{"type":22,"value":1051},{"type":16,"tag":75,"props":2694,"children":2695},{"class":77,"line":175},[2696,2701,2705],{"type":16,"tag":75,"props":2697,"children":2698},{"style":419},[2699],{"type":22,"value":2700},"  id",{"type":16,"tag":75,"props":2702,"children":2703},{"style":289},[2704],{"type":22,"value":1513},{"type":16,"tag":75,"props":2706,"children":2707},{"style":98},[2708],{"type":22,"value":2709}," string\n",{"type":16,"tag":75,"props":2711,"children":2712},{"class":77,"line":184},[2713,2718,2722],{"type":16,"tag":75,"props":2714,"children":2715},{"style":419},[2716],{"type":22,"value":2717},"  text",{"type":16,"tag":75,"props":2719,"children":2720},{"style":289},[2721],{"type":22,"value":1513},{"type":16,"tag":75,"props":2723,"children":2724},{"style":98},[2725],{"type":22,"value":2709},{"type":16,"tag":75,"props":2727,"children":2728},{"class":77,"line":223},[2729,2734,2738],{"type":16,"tag":75,"props":2730,"children":2731},{"style":419},[2732],{"type":22,"value":2733},"  level",{"type":16,"tag":75,"props":2735,"children":2736},{"style":289},[2737],{"type":22,"value":1513},{"type":16,"tag":75,"props":2739,"children":2740},{"style":98},[2741],{"type":22,"value":2742}," number\n",{"type":16,"tag":75,"props":2744,"children":2745},{"class":77,"line":380},[2746],{"type":16,"tag":75,"props":2747,"children":2748},{"style":115},[2749],{"type":22,"value":2476},{"type":16,"tag":75,"props":2751,"children":2752},{"class":77,"line":439},[2753],{"type":16,"tag":75,"props":2754,"children":2755},{"emptyLinePlaceholder":169},[2756],{"type":22,"value":172},{"type":16,"tag":75,"props":2758,"children":2759},{"class":77,"line":457},[2760,2764,2769,2774,2778,2783,2787,2792],{"type":16,"tag":75,"props":2761,"children":2762},{"style":289},[2763],{"type":22,"value":1297},{"type":16,"tag":75,"props":2765,"children":2766},{"style":289},[2767],{"type":22,"value":2768}," function",{"type":16,"tag":75,"props":2770,"children":2771},{"style":92},[2772],{"type":22,"value":2773}," useToc",{"type":16,"tag":75,"props":2775,"children":2776},{"style":115},[2777],{"type":22,"value":693},{"type":16,"tag":75,"props":2779,"children":2780},{"style":419},[2781],{"type":22,"value":2782},"containerSelector",{"type":16,"tag":75,"props":2784,"children":2785},{"style":289},[2786],{"type":22,"value":348},{"type":16,"tag":75,"props":2788,"children":2789},{"style":104},[2790],{"type":22,"value":2791}," '.article-content'",{"type":16,"tag":75,"props":2793,"children":2794},{"style":115},[2795],{"type":22,"value":2796},") {\n",{"type":16,"tag":75,"props":2798,"children":2799},{"class":77,"line":486},[2800,2804,2809,2813,2817,2821,2826],{"type":16,"tag":75,"props":2801,"children":2802},{"style":289},[2803],{"type":22,"value":1059},{"type":16,"tag":75,"props":2805,"children":2806},{"style":98},[2807],{"type":22,"value":2808}," headings",{"type":16,"tag":75,"props":2810,"children":2811},{"style":289},[2812],{"type":22,"value":348},{"type":16,"tag":75,"props":2814,"children":2815},{"style":92},[2816],{"type":22,"value":1438},{"type":16,"tag":75,"props":2818,"children":2819},{"style":115},[2820],{"type":22,"value":1443},{"type":16,"tag":75,"props":2822,"children":2823},{"style":92},[2824],{"type":22,"value":2825},"TocItem",{"type":16,"tag":75,"props":2827,"children":2828},{"style":115},[2829],{"type":22,"value":2830},"[]>([])\n",{"type":16,"tag":75,"props":2832,"children":2833},{"class":77,"line":738},[2834,2838,2843,2847,2851,2855,2860],{"type":16,"tag":75,"props":2835,"children":2836},{"style":289},[2837],{"type":22,"value":1059},{"type":16,"tag":75,"props":2839,"children":2840},{"style":98},[2841],{"type":22,"value":2842}," activeId",{"type":16,"tag":75,"props":2844,"children":2845},{"style":289},[2846],{"type":22,"value":348},{"type":16,"tag":75,"props":2848,"children":2849},{"style":92},[2850],{"type":22,"value":1438},{"type":16,"tag":75,"props":2852,"children":2853},{"style":115},[2854],{"type":22,"value":693},{"type":16,"tag":75,"props":2856,"children":2857},{"style":104},[2858],{"type":22,"value":2859},"''",{"type":16,"tag":75,"props":2861,"children":2862},{"style":115},[2863],{"type":22,"value":524},{"type":16,"tag":75,"props":2865,"children":2866},{"class":77,"line":760},[2867,2872,2877,2881,2886,2890,2894,2898],{"type":16,"tag":75,"props":2868,"children":2869},{"style":289},[2870],{"type":22,"value":2871},"  let",{"type":16,"tag":75,"props":2873,"children":2874},{"style":115},[2875],{"type":22,"value":2876}," observer",{"type":16,"tag":75,"props":2878,"children":2879},{"style":289},[2880],{"type":22,"value":1513},{"type":16,"tag":75,"props":2882,"children":2883},{"style":92},[2884],{"type":22,"value":2885}," IntersectionObserver",{"type":16,"tag":75,"props":2887,"children":2888},{"style":289},[2889],{"type":22,"value":1453},{"type":16,"tag":75,"props":2891,"children":2892},{"style":98},[2893],{"type":22,"value":1458},{"type":16,"tag":75,"props":2895,"children":2896},{"style":289},[2897],{"type":22,"value":348},{"type":16,"tag":75,"props":2899,"children":2900},{"style":98},[2901],{"type":22,"value":2902}," null\n",{"type":16,"tag":75,"props":2904,"children":2905},{"class":77,"line":778},[2906],{"type":16,"tag":75,"props":2907,"children":2908},{"emptyLinePlaceholder":169},[2909],{"type":22,"value":172},{"type":16,"tag":75,"props":2911,"children":2912},{"class":77,"line":826},[2913,2917,2922,2926,2930,2934],{"type":16,"tag":75,"props":2914,"children":2915},{"style":289},[2916],{"type":22,"value":1059},{"type":16,"tag":75,"props":2918,"children":2919},{"style":92},[2920],{"type":22,"value":2921}," generateToc",{"type":16,"tag":75,"props":2923,"children":2924},{"style":289},[2925],{"type":22,"value":348},{"type":16,"tag":75,"props":2927,"children":2928},{"style":115},[2929],{"type":22,"value":1579},{"type":16,"tag":75,"props":2931,"children":2932},{"style":289},[2933],{"type":22,"value":1414},{"type":16,"tag":75,"props":2935,"children":2936},{"style":115},[2937],{"type":22,"value":1051},{"type":16,"tag":75,"props":2939,"children":2940},{"class":77,"line":858},[2941],{"type":16,"tag":75,"props":2942,"children":2943},{"style":82},[2944],{"type":22,"value":2945},"    \u002F\u002F 仅在客户端执行 DOM 操作\n",{"type":16,"tag":75,"props":2947,"children":2948},{"class":77,"line":1238},[2949,2953,2957,2961,2965,2970,2975],{"type":16,"tag":75,"props":2950,"children":2951},{"style":289},[2952],{"type":22,"value":784},{"type":16,"tag":75,"props":2954,"children":2955},{"style":115},[2956],{"type":22,"value":1503},{"type":16,"tag":75,"props":2958,"children":2959},{"style":289},[2960],{"type":22,"value":302},{"type":16,"tag":75,"props":2962,"children":2963},{"style":115},[2964],{"type":22,"value":1253},{"type":16,"tag":75,"props":2966,"children":2967},{"style":98},[2968],{"type":22,"value":2969},"meta",{"type":16,"tag":75,"props":2971,"children":2972},{"style":115},[2973],{"type":22,"value":2974},".server) ",{"type":16,"tag":75,"props":2976,"children":2977},{"style":289},[2978],{"type":22,"value":2979},"return\n",{"type":16,"tag":75,"props":2981,"children":2982},{"class":77,"line":1266},[2983],{"type":16,"tag":75,"props":2984,"children":2985},{"style":115},[2986],{"type":22,"value":2987},"    \n",{"type":16,"tag":75,"props":2989,"children":2990},{"class":77,"line":1275},[2991,2996,3001,3005,3010,3015],{"type":16,"tag":75,"props":2992,"children":2993},{"style":289},[2994],{"type":22,"value":2995},"    const",{"type":16,"tag":75,"props":2997,"children":2998},{"style":98},[2999],{"type":22,"value":3000}," container",{"type":16,"tag":75,"props":3002,"children":3003},{"style":289},[3004],{"type":22,"value":348},{"type":16,"tag":75,"props":3006,"children":3007},{"style":115},[3008],{"type":22,"value":3009}," document.",{"type":16,"tag":75,"props":3011,"children":3012},{"style":92},[3013],{"type":22,"value":3014},"querySelector",{"type":16,"tag":75,"props":3016,"children":3017},{"style":115},[3018],{"type":22,"value":3019},"(containerSelector)\n",{"type":16,"tag":75,"props":3021,"children":3022},{"class":77,"line":1283},[3023,3027,3031,3036,3041],{"type":16,"tag":75,"props":3024,"children":3025},{"style":289},[3026],{"type":22,"value":784},{"type":16,"tag":75,"props":3028,"children":3029},{"style":115},[3030],{"type":22,"value":1503},{"type":16,"tag":75,"props":3032,"children":3033},{"style":289},[3034],{"type":22,"value":3035},"!",{"type":16,"tag":75,"props":3037,"children":3038},{"style":115},[3039],{"type":22,"value":3040},"container) ",{"type":16,"tag":75,"props":3042,"children":3043},{"style":289},[3044],{"type":22,"value":2979},{"type":16,"tag":75,"props":3046,"children":3047},{"class":77,"line":1291},[3048],{"type":16,"tag":75,"props":3049,"children":3050},{"emptyLinePlaceholder":169},[3051],{"type":22,"value":172},{"type":16,"tag":75,"props":3053,"children":3055},{"class":77,"line":3054},22,[3056,3060,3065,3069,3074,3079,3083,3088],{"type":16,"tag":75,"props":3057,"children":3058},{"style":289},[3059],{"type":22,"value":2995},{"type":16,"tag":75,"props":3061,"children":3062},{"style":98},[3063],{"type":22,"value":3064}," elements",{"type":16,"tag":75,"props":3066,"children":3067},{"style":289},[3068],{"type":22,"value":348},{"type":16,"tag":75,"props":3070,"children":3071},{"style":115},[3072],{"type":22,"value":3073}," container.",{"type":16,"tag":75,"props":3075,"children":3076},{"style":92},[3077],{"type":22,"value":3078},"querySelectorAll",{"type":16,"tag":75,"props":3080,"children":3081},{"style":115},[3082],{"type":22,"value":693},{"type":16,"tag":75,"props":3084,"children":3085},{"style":104},[3086],{"type":22,"value":3087},"'h2, h3'",{"type":16,"tag":75,"props":3089,"children":3090},{"style":115},[3091],{"type":22,"value":524},{"type":16,"tag":75,"props":3093,"children":3095},{"class":77,"line":3094},23,[3096,3101,3105,3110,3114,3119,3124,3129,3134,3138,3142],{"type":16,"tag":75,"props":3097,"children":3098},{"style":115},[3099],{"type":22,"value":3100},"    headings.value ",{"type":16,"tag":75,"props":3102,"children":3103},{"style":289},[3104],{"type":22,"value":411},{"type":16,"tag":75,"props":3106,"children":3107},{"style":115},[3108],{"type":22,"value":3109}," Array.",{"type":16,"tag":75,"props":3111,"children":3112},{"style":92},[3113],{"type":22,"value":292},{"type":16,"tag":75,"props":3115,"children":3116},{"style":115},[3117],{"type":22,"value":3118},"(elements).",{"type":16,"tag":75,"props":3120,"children":3121},{"style":92},[3122],{"type":22,"value":3123},"map",{"type":16,"tag":75,"props":3125,"children":3126},{"style":115},[3127],{"type":22,"value":3128},"((",{"type":16,"tag":75,"props":3130,"children":3131},{"style":419},[3132],{"type":22,"value":3133},"el",{"type":16,"tag":75,"props":3135,"children":3136},{"style":115},[3137],{"type":22,"value":1215},{"type":16,"tag":75,"props":3139,"children":3140},{"style":289},[3141],{"type":22,"value":1414},{"type":16,"tag":75,"props":3143,"children":3144},{"style":115},[3145],{"type":22,"value":3146}," ({\n",{"type":16,"tag":75,"props":3148,"children":3150},{"class":77,"line":3149},24,[3151,3156,3161,3166,3171,3175,3180,3184,3189,3193,3198,3203,3208,3212,3217,3221,3226,3230,3235],{"type":16,"tag":75,"props":3152,"children":3153},{"style":115},[3154],{"type":22,"value":3155},"      id: el.id ",{"type":16,"tag":75,"props":3157,"children":3158},{"style":289},[3159],{"type":22,"value":3160},"||",{"type":16,"tag":75,"props":3162,"children":3163},{"style":104},[3164],{"type":22,"value":3165}," `heading-${",{"type":16,"tag":75,"props":3167,"children":3168},{"style":115},[3169],{"type":22,"value":3170},"Math",{"type":16,"tag":75,"props":3172,"children":3173},{"style":104},[3174],{"type":22,"value":1253},{"type":16,"tag":75,"props":3176,"children":3177},{"style":92},[3178],{"type":22,"value":3179},"random",{"type":16,"tag":75,"props":3181,"children":3182},{"style":104},[3183],{"type":22,"value":1225},{"type":16,"tag":75,"props":3185,"children":3186},{"style":92},[3187],{"type":22,"value":3188},"toString",{"type":16,"tag":75,"props":3190,"children":3191},{"style":104},[3192],{"type":22,"value":693},{"type":16,"tag":75,"props":3194,"children":3195},{"style":98},[3196],{"type":22,"value":3197},"36",{"type":16,"tag":75,"props":3199,"children":3200},{"style":104},[3201],{"type":22,"value":3202},").",{"type":16,"tag":75,"props":3204,"children":3205},{"style":92},[3206],{"type":22,"value":3207},"substr",{"type":16,"tag":75,"props":3209,"children":3210},{"style":104},[3211],{"type":22,"value":693},{"type":16,"tag":75,"props":3213,"children":3214},{"style":98},[3215],{"type":22,"value":3216},"2",{"type":16,"tag":75,"props":3218,"children":3219},{"style":104},[3220],{"type":22,"value":506},{"type":16,"tag":75,"props":3222,"children":3223},{"style":98},[3224],{"type":22,"value":3225},"9",{"type":16,"tag":75,"props":3227,"children":3228},{"style":104},[3229],{"type":22,"value":1659},{"type":16,"tag":75,"props":3231,"children":3232},{"style":104},[3233],{"type":22,"value":3234},"}`",{"type":16,"tag":75,"props":3236,"children":3237},{"style":115},[3238],{"type":22,"value":1734},{"type":16,"tag":75,"props":3240,"children":3242},{"class":77,"line":3241},25,[3243,3248,3252,3257],{"type":16,"tag":75,"props":3244,"children":3245},{"style":115},[3246],{"type":22,"value":3247},"      text: el.textContent ",{"type":16,"tag":75,"props":3249,"children":3250},{"style":289},[3251],{"type":22,"value":3160},{"type":16,"tag":75,"props":3253,"children":3254},{"style":104},[3255],{"type":22,"value":3256}," ''",{"type":16,"tag":75,"props":3258,"children":3259},{"style":115},[3260],{"type":22,"value":1734},{"type":16,"tag":75,"props":3262,"children":3264},{"class":77,"line":3263},26,[3265,3270,3275,3280,3285,3289,3294],{"type":16,"tag":75,"props":3266,"children":3267},{"style":115},[3268],{"type":22,"value":3269},"      level: ",{"type":16,"tag":75,"props":3271,"children":3272},{"style":92},[3273],{"type":22,"value":3274},"parseInt",{"type":16,"tag":75,"props":3276,"children":3277},{"style":115},[3278],{"type":22,"value":3279},"(el.tagName.",{"type":16,"tag":75,"props":3281,"children":3282},{"style":92},[3283],{"type":22,"value":3284},"substring",{"type":16,"tag":75,"props":3286,"children":3287},{"style":115},[3288],{"type":22,"value":693},{"type":16,"tag":75,"props":3290,"children":3291},{"style":98},[3292],{"type":22,"value":3293},"1",{"type":16,"tag":75,"props":3295,"children":3296},{"style":115},[3297],{"type":22,"value":3298},")),\n",{"type":16,"tag":75,"props":3300,"children":3302},{"class":77,"line":3301},27,[3303],{"type":16,"tag":75,"props":3304,"children":3305},{"style":115},[3306],{"type":22,"value":3307},"    }))\n",{"type":16,"tag":75,"props":3309,"children":3311},{"class":77,"line":3310},28,[3312],{"type":16,"tag":75,"props":3313,"children":3314},{"emptyLinePlaceholder":169},[3315],{"type":22,"value":172},{"type":16,"tag":75,"props":3317,"children":3319},{"class":77,"line":3318},29,[3320],{"type":16,"tag":75,"props":3321,"children":3322},{"style":82},[3323],{"type":22,"value":3324},"    \u002F\u002F 确保标题有 id，方便锚点跳转\n",{"type":16,"tag":75,"props":3326,"children":3328},{"class":77,"line":3327},30,[3329,3334,3339,3343,3347,3351,3356,3360,3364],{"type":16,"tag":75,"props":3330,"children":3331},{"style":115},[3332],{"type":22,"value":3333},"    elements.",{"type":16,"tag":75,"props":3335,"children":3336},{"style":92},[3337],{"type":22,"value":3338},"forEach",{"type":16,"tag":75,"props":3340,"children":3341},{"style":115},[3342],{"type":22,"value":3128},{"type":16,"tag":75,"props":3344,"children":3345},{"style":419},[3346],{"type":22,"value":3133},{"type":16,"tag":75,"props":3348,"children":3349},{"style":115},[3350],{"type":22,"value":506},{"type":16,"tag":75,"props":3352,"children":3353},{"style":419},[3354],{"type":22,"value":3355},"index",{"type":16,"tag":75,"props":3357,"children":3358},{"style":115},[3359],{"type":22,"value":1215},{"type":16,"tag":75,"props":3361,"children":3362},{"style":289},[3363],{"type":22,"value":1414},{"type":16,"tag":75,"props":3365,"children":3366},{"style":115},[3367],{"type":22,"value":1051},{"type":16,"tag":75,"props":3369,"children":3371},{"class":77,"line":3370},31,[3372,3377,3381,3385,3390,3394],{"type":16,"tag":75,"props":3373,"children":3374},{"style":289},[3375],{"type":22,"value":3376},"      if",{"type":16,"tag":75,"props":3378,"children":3379},{"style":115},[3380],{"type":22,"value":1503},{"type":16,"tag":75,"props":3382,"children":3383},{"style":289},[3384],{"type":22,"value":3035},{"type":16,"tag":75,"props":3386,"children":3387},{"style":115},[3388],{"type":22,"value":3389},"el.id) el.id ",{"type":16,"tag":75,"props":3391,"children":3392},{"style":289},[3393],{"type":22,"value":411},{"type":16,"tag":75,"props":3395,"children":3396},{"style":115},[3397],{"type":22,"value":3398}," headings.value[index].id\n",{"type":16,"tag":75,"props":3400,"children":3402},{"class":77,"line":3401},32,[3403],{"type":16,"tag":75,"props":3404,"children":3405},{"style":115},[3406],{"type":22,"value":3407},"    })\n",{"type":16,"tag":75,"props":3409,"children":3411},{"class":77,"line":3410},33,[3412],{"type":16,"tag":75,"props":3413,"children":3414},{"style":115},[3415],{"type":22,"value":2987},{"type":16,"tag":75,"props":3417,"children":3419},{"class":77,"line":3418},34,[3420,3425],{"type":16,"tag":75,"props":3421,"children":3422},{"style":92},[3423],{"type":22,"value":3424},"    initObserver",{"type":16,"tag":75,"props":3426,"children":3427},{"style":115},[3428],{"type":22,"value":1235},{"type":16,"tag":75,"props":3430,"children":3432},{"class":77,"line":3431},35,[3433],{"type":16,"tag":75,"props":3434,"children":3435},{"style":115},[3436],{"type":22,"value":1272},{"type":16,"tag":75,"props":3438,"children":3440},{"class":77,"line":3439},36,[3441],{"type":16,"tag":75,"props":3442,"children":3443},{"emptyLinePlaceholder":169},[3444],{"type":22,"value":172},{"type":16,"tag":75,"props":3446,"children":3448},{"class":77,"line":3447},37,[3449],{"type":16,"tag":75,"props":3450,"children":3451},{"style":82},[3452],{"type":22,"value":3453},"  \u002F\u002F ... 初始化 IntersectionObserver 的逻辑\n",{"type":16,"tag":75,"props":3455,"children":3457},{"class":77,"line":3456},38,[3458],{"type":16,"tag":75,"props":3459,"children":3460},{"style":115},[3461],{"type":22,"value":2476},{"type":16,"tag":2598,"props":3463,"children":3465},{"id":3464},"_2-滚动高亮当前章节",[3466],{"type":22,"value":3467},"2. 滚动高亮当前章节",{"type":16,"tag":28,"props":3469,"children":3470},{},[3471,3473,3479,3481,3486],{"type":22,"value":3472},"早期我使用监听 ",{"type":16,"tag":52,"props":3474,"children":3476},{"className":3475},[],[3477],{"type":22,"value":3478},"scroll",{"type":22,"value":3480}," 事件来计算标题位置，但在长文章中会导致严重的性能问题。后来改用 ",{"type":16,"tag":60,"props":3482,"children":3483},{},[3484],{"type":22,"value":3485},"Intersection Observer API",{"type":22,"value":3487},"，由浏览器底层异步监听，性能极佳。",{"type":16,"tag":47,"props":3489,"children":3491},{"className":2633,"code":3490,"language":2635,"meta":7,"style":7},"  const initObserver = () => {\n    if (observer) observer.disconnect()\n\n    observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          \u002F\u002F 当标题进入视口时，更新激活状态\n          if (entry.isIntersecting) {\n            activeId.value = entry.target.id\n          }\n        })\n      },\n      {\n        \u002F\u002F 调整根容器的边距，让标题在滚动到视口顶部 20% 时就触发高亮\n        rootMargin: '-20% 0px -80% 0px', \n        threshold: 0,\n      }\n    )\n\n    headings.value.forEach((item) => {\n      const el = document.getElementById(item.id)\n      if (el) observer?.observe(el)\n    })\n  }\n\n  onMounted(() => {\n    generateToc()\n  })\n\n  onUnmounted(() => {\n    observer?.disconnect()\n  })\n\n  return { headings, activeId }\n}\n",[3492],{"type":16,"tag":52,"props":3493,"children":3494},{"__ignoreMap":7},[3495,3523,3544,3551,3576,3601,3634,3642,3655,3672,3680,3688,3696,3704,3712,3730,3747,3754,3762,3769,3802,3833,3855,3862,3869,3876,3897,3909,3917,3924,3944,3960,3967,3974,3986],{"type":16,"tag":75,"props":3496,"children":3497},{"class":77,"line":78},[3498,3502,3507,3511,3515,3519],{"type":16,"tag":75,"props":3499,"children":3500},{"style":289},[3501],{"type":22,"value":1059},{"type":16,"tag":75,"props":3503,"children":3504},{"style":92},[3505],{"type":22,"value":3506}," initObserver",{"type":16,"tag":75,"props":3508,"children":3509},{"style":289},[3510],{"type":22,"value":348},{"type":16,"tag":75,"props":3512,"children":3513},{"style":115},[3514],{"type":22,"value":1579},{"type":16,"tag":75,"props":3516,"children":3517},{"style":289},[3518],{"type":22,"value":1414},{"type":16,"tag":75,"props":3520,"children":3521},{"style":115},[3522],{"type":22,"value":1051},{"type":16,"tag":75,"props":3524,"children":3525},{"class":77,"line":88},[3526,3530,3535,3540],{"type":16,"tag":75,"props":3527,"children":3528},{"style":289},[3529],{"type":22,"value":784},{"type":16,"tag":75,"props":3531,"children":3532},{"style":115},[3533],{"type":22,"value":3534}," (observer) observer.",{"type":16,"tag":75,"props":3536,"children":3537},{"style":92},[3538],{"type":22,"value":3539},"disconnect",{"type":16,"tag":75,"props":3541,"children":3542},{"style":115},[3543],{"type":22,"value":1235},{"type":16,"tag":75,"props":3545,"children":3546},{"class":77,"line":131},[3547],{"type":16,"tag":75,"props":3548,"children":3549},{"emptyLinePlaceholder":169},[3550],{"type":22,"value":172},{"type":16,"tag":75,"props":3552,"children":3553},{"class":77,"line":165},[3554,3559,3563,3568,3572],{"type":16,"tag":75,"props":3555,"children":3556},{"style":115},[3557],{"type":22,"value":3558},"    observer ",{"type":16,"tag":75,"props":3560,"children":3561},{"style":289},[3562],{"type":22,"value":411},{"type":16,"tag":75,"props":3564,"children":3565},{"style":289},[3566],{"type":22,"value":3567}," new",{"type":16,"tag":75,"props":3569,"children":3570},{"style":92},[3571],{"type":22,"value":2885},{"type":16,"tag":75,"props":3573,"children":3574},{"style":115},[3575],{"type":22,"value":1155},{"type":16,"tag":75,"props":3577,"children":3578},{"class":77,"line":175},[3579,3584,3589,3593,3597],{"type":16,"tag":75,"props":3580,"children":3581},{"style":115},[3582],{"type":22,"value":3583},"      (",{"type":16,"tag":75,"props":3585,"children":3586},{"style":419},[3587],{"type":22,"value":3588},"entries",{"type":16,"tag":75,"props":3590,"children":3591},{"style":115},[3592],{"type":22,"value":1215},{"type":16,"tag":75,"props":3594,"children":3595},{"style":289},[3596],{"type":22,"value":1414},{"type":16,"tag":75,"props":3598,"children":3599},{"style":115},[3600],{"type":22,"value":1051},{"type":16,"tag":75,"props":3602,"children":3603},{"class":77,"line":184},[3604,3609,3613,3617,3622,3626,3630],{"type":16,"tag":75,"props":3605,"children":3606},{"style":115},[3607],{"type":22,"value":3608},"        entries.",{"type":16,"tag":75,"props":3610,"children":3611},{"style":92},[3612],{"type":22,"value":3338},{"type":16,"tag":75,"props":3614,"children":3615},{"style":115},[3616],{"type":22,"value":3128},{"type":16,"tag":75,"props":3618,"children":3619},{"style":419},[3620],{"type":22,"value":3621},"entry",{"type":16,"tag":75,"props":3623,"children":3624},{"style":115},[3625],{"type":22,"value":1215},{"type":16,"tag":75,"props":3627,"children":3628},{"style":289},[3629],{"type":22,"value":1414},{"type":16,"tag":75,"props":3631,"children":3632},{"style":115},[3633],{"type":22,"value":1051},{"type":16,"tag":75,"props":3635,"children":3636},{"class":77,"line":223},[3637],{"type":16,"tag":75,"props":3638,"children":3639},{"style":82},[3640],{"type":22,"value":3641},"          \u002F\u002F 当标题进入视口时，更新激活状态\n",{"type":16,"tag":75,"props":3643,"children":3644},{"class":77,"line":380},[3645,3650],{"type":16,"tag":75,"props":3646,"children":3647},{"style":289},[3648],{"type":22,"value":3649},"          if",{"type":16,"tag":75,"props":3651,"children":3652},{"style":115},[3653],{"type":22,"value":3654}," (entry.isIntersecting) {\n",{"type":16,"tag":75,"props":3656,"children":3657},{"class":77,"line":439},[3658,3663,3667],{"type":16,"tag":75,"props":3659,"children":3660},{"style":115},[3661],{"type":22,"value":3662},"            activeId.value ",{"type":16,"tag":75,"props":3664,"children":3665},{"style":289},[3666],{"type":22,"value":411},{"type":16,"tag":75,"props":3668,"children":3669},{"style":115},[3670],{"type":22,"value":3671}," entry.target.id\n",{"type":16,"tag":75,"props":3673,"children":3674},{"class":77,"line":457},[3675],{"type":16,"tag":75,"props":3676,"children":3677},{"style":115},[3678],{"type":22,"value":3679},"          }\n",{"type":16,"tag":75,"props":3681,"children":3682},{"class":77,"line":486},[3683],{"type":16,"tag":75,"props":3684,"children":3685},{"style":115},[3686],{"type":22,"value":3687},"        })\n",{"type":16,"tag":75,"props":3689,"children":3690},{"class":77,"line":738},[3691],{"type":16,"tag":75,"props":3692,"children":3693},{"style":115},[3694],{"type":22,"value":3695},"      },\n",{"type":16,"tag":75,"props":3697,"children":3698},{"class":77,"line":760},[3699],{"type":16,"tag":75,"props":3700,"children":3701},{"style":115},[3702],{"type":22,"value":3703},"      {\n",{"type":16,"tag":75,"props":3705,"children":3706},{"class":77,"line":778},[3707],{"type":16,"tag":75,"props":3708,"children":3709},{"style":82},[3710],{"type":22,"value":3711},"        \u002F\u002F 调整根容器的边距，让标题在滚动到视口顶部 20% 时就触发高亮\n",{"type":16,"tag":75,"props":3713,"children":3714},{"class":77,"line":826},[3715,3720,3725],{"type":16,"tag":75,"props":3716,"children":3717},{"style":115},[3718],{"type":22,"value":3719},"        rootMargin: ",{"type":16,"tag":75,"props":3721,"children":3722},{"style":104},[3723],{"type":22,"value":3724},"'-20% 0px -80% 0px'",{"type":16,"tag":75,"props":3726,"children":3727},{"style":115},[3728],{"type":22,"value":3729},", \n",{"type":16,"tag":75,"props":3731,"children":3732},{"class":77,"line":858},[3733,3738,3743],{"type":16,"tag":75,"props":3734,"children":3735},{"style":115},[3736],{"type":22,"value":3737},"        threshold: ",{"type":16,"tag":75,"props":3739,"children":3740},{"style":98},[3741],{"type":22,"value":3742},"0",{"type":16,"tag":75,"props":3744,"children":3745},{"style":115},[3746],{"type":22,"value":1734},{"type":16,"tag":75,"props":3748,"children":3749},{"class":77,"line":1238},[3750],{"type":16,"tag":75,"props":3751,"children":3752},{"style":115},[3753],{"type":22,"value":1834},{"type":16,"tag":75,"props":3755,"children":3756},{"class":77,"line":1266},[3757],{"type":16,"tag":75,"props":3758,"children":3759},{"style":115},[3760],{"type":22,"value":3761},"    )\n",{"type":16,"tag":75,"props":3763,"children":3764},{"class":77,"line":1275},[3765],{"type":16,"tag":75,"props":3766,"children":3767},{"emptyLinePlaceholder":169},[3768],{"type":22,"value":172},{"type":16,"tag":75,"props":3770,"children":3771},{"class":77,"line":1283},[3772,3777,3781,3785,3790,3794,3798],{"type":16,"tag":75,"props":3773,"children":3774},{"style":115},[3775],{"type":22,"value":3776},"    headings.value.",{"type":16,"tag":75,"props":3778,"children":3779},{"style":92},[3780],{"type":22,"value":3338},{"type":16,"tag":75,"props":3782,"children":3783},{"style":115},[3784],{"type":22,"value":3128},{"type":16,"tag":75,"props":3786,"children":3787},{"style":419},[3788],{"type":22,"value":3789},"item",{"type":16,"tag":75,"props":3791,"children":3792},{"style":115},[3793],{"type":22,"value":1215},{"type":16,"tag":75,"props":3795,"children":3796},{"style":289},[3797],{"type":22,"value":1414},{"type":16,"tag":75,"props":3799,"children":3800},{"style":115},[3801],{"type":22,"value":1051},{"type":16,"tag":75,"props":3803,"children":3804},{"class":77,"line":1291},[3805,3810,3815,3819,3823,3828],{"type":16,"tag":75,"props":3806,"children":3807},{"style":289},[3808],{"type":22,"value":3809},"      const",{"type":16,"tag":75,"props":3811,"children":3812},{"style":98},[3813],{"type":22,"value":3814}," el",{"type":16,"tag":75,"props":3816,"children":3817},{"style":289},[3818],{"type":22,"value":348},{"type":16,"tag":75,"props":3820,"children":3821},{"style":115},[3822],{"type":22,"value":3009},{"type":16,"tag":75,"props":3824,"children":3825},{"style":92},[3826],{"type":22,"value":3827},"getElementById",{"type":16,"tag":75,"props":3829,"children":3830},{"style":115},[3831],{"type":22,"value":3832},"(item.id)\n",{"type":16,"tag":75,"props":3834,"children":3835},{"class":77,"line":3054},[3836,3840,3845,3850],{"type":16,"tag":75,"props":3837,"children":3838},{"style":289},[3839],{"type":22,"value":3376},{"type":16,"tag":75,"props":3841,"children":3842},{"style":115},[3843],{"type":22,"value":3844}," (el) observer?.",{"type":16,"tag":75,"props":3846,"children":3847},{"style":92},[3848],{"type":22,"value":3849},"observe",{"type":16,"tag":75,"props":3851,"children":3852},{"style":115},[3853],{"type":22,"value":3854},"(el)\n",{"type":16,"tag":75,"props":3856,"children":3857},{"class":77,"line":3094},[3858],{"type":16,"tag":75,"props":3859,"children":3860},{"style":115},[3861],{"type":22,"value":3407},{"type":16,"tag":75,"props":3863,"children":3864},{"class":77,"line":3149},[3865],{"type":16,"tag":75,"props":3866,"children":3867},{"style":115},[3868],{"type":22,"value":1272},{"type":16,"tag":75,"props":3870,"children":3871},{"class":77,"line":3241},[3872],{"type":16,"tag":75,"props":3873,"children":3874},{"emptyLinePlaceholder":169},[3875],{"type":22,"value":172},{"type":16,"tag":75,"props":3877,"children":3878},{"class":77,"line":3263},[3879,3884,3889,3893],{"type":16,"tag":75,"props":3880,"children":3881},{"style":92},[3882],{"type":22,"value":3883},"  onMounted",{"type":16,"tag":75,"props":3885,"children":3886},{"style":115},[3887],{"type":22,"value":3888},"(() ",{"type":16,"tag":75,"props":3890,"children":3891},{"style":289},[3892],{"type":22,"value":1414},{"type":16,"tag":75,"props":3894,"children":3895},{"style":115},[3896],{"type":22,"value":1051},{"type":16,"tag":75,"props":3898,"children":3899},{"class":77,"line":3301},[3900,3905],{"type":16,"tag":75,"props":3901,"children":3902},{"style":92},[3903],{"type":22,"value":3904},"    generateToc",{"type":16,"tag":75,"props":3906,"children":3907},{"style":115},[3908],{"type":22,"value":1235},{"type":16,"tag":75,"props":3910,"children":3911},{"class":77,"line":3310},[3912],{"type":16,"tag":75,"props":3913,"children":3914},{"style":115},[3915],{"type":22,"value":3916},"  })\n",{"type":16,"tag":75,"props":3918,"children":3919},{"class":77,"line":3318},[3920],{"type":16,"tag":75,"props":3921,"children":3922},{"emptyLinePlaceholder":169},[3923],{"type":22,"value":172},{"type":16,"tag":75,"props":3925,"children":3926},{"class":77,"line":3327},[3927,3932,3936,3940],{"type":16,"tag":75,"props":3928,"children":3929},{"style":92},[3930],{"type":22,"value":3931},"  onUnmounted",{"type":16,"tag":75,"props":3933,"children":3934},{"style":115},[3935],{"type":22,"value":3888},{"type":16,"tag":75,"props":3937,"children":3938},{"style":289},[3939],{"type":22,"value":1414},{"type":16,"tag":75,"props":3941,"children":3942},{"style":115},[3943],{"type":22,"value":1051},{"type":16,"tag":75,"props":3945,"children":3946},{"class":77,"line":3370},[3947,3952,3956],{"type":16,"tag":75,"props":3948,"children":3949},{"style":115},[3950],{"type":22,"value":3951},"    observer?.",{"type":16,"tag":75,"props":3953,"children":3954},{"style":92},[3955],{"type":22,"value":3539},{"type":16,"tag":75,"props":3957,"children":3958},{"style":115},[3959],{"type":22,"value":1235},{"type":16,"tag":75,"props":3961,"children":3962},{"class":77,"line":3401},[3963],{"type":16,"tag":75,"props":3964,"children":3965},{"style":115},[3966],{"type":22,"value":3916},{"type":16,"tag":75,"props":3968,"children":3969},{"class":77,"line":3410},[3970],{"type":16,"tag":75,"props":3971,"children":3972},{"emptyLinePlaceholder":169},[3973],{"type":22,"value":172},{"type":16,"tag":75,"props":3975,"children":3976},{"class":77,"line":3418},[3977,3981],{"type":16,"tag":75,"props":3978,"children":3979},{"style":289},[3980],{"type":22,"value":1118},{"type":16,"tag":75,"props":3982,"children":3983},{"style":115},[3984],{"type":22,"value":3985}," { headings, activeId }\n",{"type":16,"tag":75,"props":3987,"children":3988},{"class":77,"line":3431},[3989],{"type":16,"tag":75,"props":3990,"children":3991},{"style":115},[3992],{"type":22,"value":2476},{"type":16,"tag":28,"props":3994,"children":3995},{},[3996,4001,4003,4009,4011,4017,4019,4025,4027,4033],{"type":16,"tag":60,"props":3997,"children":3998},{},[3999],{"type":22,"value":4000},"💡 踩坑记录：",{"type":22,"value":4002},"\n在 Nuxt 的 SSR 模式下，直接在 ",{"type":16,"tag":52,"props":4004,"children":4006},{"className":4005},[],[4007],{"type":22,"value":4008},"setup",{"type":22,"value":4010}," 阶段访问 ",{"type":16,"tag":52,"props":4012,"children":4014},{"className":4013},[],[4015],{"type":22,"value":4016},"document",{"type":22,"value":4018}," 会报错。必须确保 DOM 操作在 ",{"type":16,"tag":52,"props":4020,"children":4022},{"className":4021},[],[4023],{"type":22,"value":4024},"onMounted",{"type":22,"value":4026}," 钩子中执行，或者使用 ",{"type":16,"tag":52,"props":4028,"children":4030},{"className":4029},[],[4031],{"type":22,"value":4032},"import.meta.client",{"type":22,"value":4034}," 进行环境判断。",{"type":16,"tag":40,"props":4036,"children":4038},{"id":4037},"二-沉浸式阅读进度条",[4039],{"type":22,"value":4040},"二、 沉浸式阅读进度条",{"type":16,"tag":28,"props":4042,"children":4043},{},[4044],{"type":22,"value":4045},"进度条能给读者一个明确的心理预期：“这篇文章还有多少没看完”。实现思路很简单：计算当前滚动高度占页面总高度的百分比。",{"type":16,"tag":2598,"props":4047,"children":4049},{"id":4048},"_1-基础逻辑与性能优化",[4050],{"type":22,"value":4051},"1. 基础逻辑与性能优化",{"type":16,"tag":28,"props":4053,"children":4054},{},[4055,4057,4062,4064,4070],{"type":22,"value":4056},"直接监听 ",{"type":16,"tag":52,"props":4058,"children":4060},{"className":4059},[],[4061],{"type":22,"value":3478},{"type":22,"value":4063}," 事件并频繁修改响应式数据会导致页面卡顿。我们需要结合 ",{"type":16,"tag":52,"props":4065,"children":4067},{"className":4066},[],[4068],{"type":22,"value":4069},"requestAnimationFrame",{"type":22,"value":4071}," 进行节流优化。",{"type":16,"tag":47,"props":4073,"children":4075},{"className":2633,"code":4074,"language":2635,"meta":7,"style":7},"\u002F\u002F composables\u002FuseReadingProgress.ts\nimport { ref, onMounted, onUnmounted } from 'vue'\n\nexport function useReadingProgress() {\n  const progress = ref(0)\n  let ticking = false\n\n  const updateProgress = () => {\n    const scrollTop = window.scrollY || document.documentElement.scrollTop\n    const docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight\n    \n    \u002F\u002F 防止除以 0 或负数\n    progress.value = docHeight > 0 ? Math.min(100, (scrollTop \u002F docHeight) * 100) : 0\n    ticking = false\n  }\n\n  const onScroll = () => {\n    if (!ticking) {\n      window.requestAnimationFrame(updateProgress)\n      ticking = true\n    }\n  }\n\n  onMounted(() => {\n    window.addEventListener('scroll', onScroll, { passive: true })\n    updateProgress() \u002F\u002F 初始化\n  })\n\n  onUnmounted(() => {\n    window.removeEventListener('scroll', onScroll)\n  })\n\n  return { progress }\n}\n",[4076],{"type":16,"tag":52,"props":4077,"children":4078},{"__ignoreMap":7},[4079,4087,4106,4113,4134,4166,4187,4194,4222,4252,4283,4290,4298,4386,4402,4409,4416,4444,4464,4481,4498,4505,4512,4519,4538,4573,4591,4598,4605,4624,4649,4656,4663,4675],{"type":16,"tag":75,"props":4080,"children":4081},{"class":77,"line":78},[4082],{"type":16,"tag":75,"props":4083,"children":4084},{"style":82},[4085],{"type":22,"value":4086},"\u002F\u002F composables\u002FuseReadingProgress.ts\n",{"type":16,"tag":75,"props":4088,"children":4089},{"class":77,"line":88},[4090,4094,4098,4102],{"type":16,"tag":75,"props":4091,"children":4092},{"style":289},[4093],{"type":22,"value":302},{"type":16,"tag":75,"props":4095,"children":4096},{"style":115},[4097],{"type":22,"value":2659},{"type":16,"tag":75,"props":4099,"children":4100},{"style":289},[4101],{"type":22,"value":292},{"type":16,"tag":75,"props":4103,"children":4104},{"style":104},[4105],{"type":22,"value":2668},{"type":16,"tag":75,"props":4107,"children":4108},{"class":77,"line":131},[4109],{"type":16,"tag":75,"props":4110,"children":4111},{"emptyLinePlaceholder":169},[4112],{"type":22,"value":172},{"type":16,"tag":75,"props":4114,"children":4115},{"class":77,"line":165},[4116,4120,4124,4129],{"type":16,"tag":75,"props":4117,"children":4118},{"style":289},[4119],{"type":22,"value":1297},{"type":16,"tag":75,"props":4121,"children":4122},{"style":289},[4123],{"type":22,"value":2768},{"type":16,"tag":75,"props":4125,"children":4126},{"style":92},[4127],{"type":22,"value":4128}," useReadingProgress",{"type":16,"tag":75,"props":4130,"children":4131},{"style":115},[4132],{"type":22,"value":4133},"() {\n",{"type":16,"tag":75,"props":4135,"children":4136},{"class":77,"line":175},[4137,4141,4146,4150,4154,4158,4162],{"type":16,"tag":75,"props":4138,"children":4139},{"style":289},[4140],{"type":22,"value":1059},{"type":16,"tag":75,"props":4142,"children":4143},{"style":98},[4144],{"type":22,"value":4145}," progress",{"type":16,"tag":75,"props":4147,"children":4148},{"style":289},[4149],{"type":22,"value":348},{"type":16,"tag":75,"props":4151,"children":4152},{"style":92},[4153],{"type":22,"value":1438},{"type":16,"tag":75,"props":4155,"children":4156},{"style":115},[4157],{"type":22,"value":693},{"type":16,"tag":75,"props":4159,"children":4160},{"style":98},[4161],{"type":22,"value":3742},{"type":16,"tag":75,"props":4163,"children":4164},{"style":115},[4165],{"type":22,"value":524},{"type":16,"tag":75,"props":4167,"children":4168},{"class":77,"line":184},[4169,4173,4178,4182],{"type":16,"tag":75,"props":4170,"children":4171},{"style":289},[4172],{"type":22,"value":2871},{"type":16,"tag":75,"props":4174,"children":4175},{"style":115},[4176],{"type":22,"value":4177}," ticking ",{"type":16,"tag":75,"props":4179,"children":4180},{"style":289},[4181],{"type":22,"value":411},{"type":16,"tag":75,"props":4183,"children":4184},{"style":98},[4185],{"type":22,"value":4186}," false\n",{"type":16,"tag":75,"props":4188,"children":4189},{"class":77,"line":223},[4190],{"type":16,"tag":75,"props":4191,"children":4192},{"emptyLinePlaceholder":169},[4193],{"type":22,"value":172},{"type":16,"tag":75,"props":4195,"children":4196},{"class":77,"line":380},[4197,4201,4206,4210,4214,4218],{"type":16,"tag":75,"props":4198,"children":4199},{"style":289},[4200],{"type":22,"value":1059},{"type":16,"tag":75,"props":4202,"children":4203},{"style":92},[4204],{"type":22,"value":4205}," updateProgress",{"type":16,"tag":75,"props":4207,"children":4208},{"style":289},[4209],{"type":22,"value":348},{"type":16,"tag":75,"props":4211,"children":4212},{"style":115},[4213],{"type":22,"value":1579},{"type":16,"tag":75,"props":4215,"children":4216},{"style":289},[4217],{"type":22,"value":1414},{"type":16,"tag":75,"props":4219,"children":4220},{"style":115},[4221],{"type":22,"value":1051},{"type":16,"tag":75,"props":4223,"children":4224},{"class":77,"line":439},[4225,4229,4234,4238,4243,4247],{"type":16,"tag":75,"props":4226,"children":4227},{"style":289},[4228],{"type":22,"value":2995},{"type":16,"tag":75,"props":4230,"children":4231},{"style":98},[4232],{"type":22,"value":4233}," scrollTop",{"type":16,"tag":75,"props":4235,"children":4236},{"style":289},[4237],{"type":22,"value":348},{"type":16,"tag":75,"props":4239,"children":4240},{"style":115},[4241],{"type":22,"value":4242}," window.scrollY ",{"type":16,"tag":75,"props":4244,"children":4245},{"style":289},[4246],{"type":22,"value":3160},{"type":16,"tag":75,"props":4248,"children":4249},{"style":115},[4250],{"type":22,"value":4251}," document.documentElement.scrollTop\n",{"type":16,"tag":75,"props":4253,"children":4254},{"class":77,"line":457},[4255,4259,4264,4268,4273,4278],{"type":16,"tag":75,"props":4256,"children":4257},{"style":289},[4258],{"type":22,"value":2995},{"type":16,"tag":75,"props":4260,"children":4261},{"style":98},[4262],{"type":22,"value":4263}," docHeight",{"type":16,"tag":75,"props":4265,"children":4266},{"style":289},[4267],{"type":22,"value":348},{"type":16,"tag":75,"props":4269,"children":4270},{"style":115},[4271],{"type":22,"value":4272}," document.documentElement.scrollHeight ",{"type":16,"tag":75,"props":4274,"children":4275},{"style":289},[4276],{"type":22,"value":4277},"-",{"type":16,"tag":75,"props":4279,"children":4280},{"style":115},[4281],{"type":22,"value":4282}," document.documentElement.clientHeight\n",{"type":16,"tag":75,"props":4284,"children":4285},{"class":77,"line":486},[4286],{"type":16,"tag":75,"props":4287,"children":4288},{"style":115},[4289],{"type":22,"value":2987},{"type":16,"tag":75,"props":4291,"children":4292},{"class":77,"line":738},[4293],{"type":16,"tag":75,"props":4294,"children":4295},{"style":82},[4296],{"type":22,"value":4297},"    \u002F\u002F 防止除以 0 或负数\n",{"type":16,"tag":75,"props":4299,"children":4300},{"class":77,"line":760},[4301,4306,4310,4315,4320,4325,4330,4335,4340,4344,4349,4354,4358,4363,4368,4373,4377,4381],{"type":16,"tag":75,"props":4302,"children":4303},{"style":115},[4304],{"type":22,"value":4305},"    progress.value ",{"type":16,"tag":75,"props":4307,"children":4308},{"style":289},[4309],{"type":22,"value":411},{"type":16,"tag":75,"props":4311,"children":4312},{"style":115},[4313],{"type":22,"value":4314}," docHeight ",{"type":16,"tag":75,"props":4316,"children":4317},{"style":289},[4318],{"type":22,"value":4319},">",{"type":16,"tag":75,"props":4321,"children":4322},{"style":98},[4323],{"type":22,"value":4324}," 0",{"type":16,"tag":75,"props":4326,"children":4327},{"style":289},[4328],{"type":22,"value":4329}," ?",{"type":16,"tag":75,"props":4331,"children":4332},{"style":115},[4333],{"type":22,"value":4334}," Math.",{"type":16,"tag":75,"props":4336,"children":4337},{"style":92},[4338],{"type":22,"value":4339},"min",{"type":16,"tag":75,"props":4341,"children":4342},{"style":115},[4343],{"type":22,"value":693},{"type":16,"tag":75,"props":4345,"children":4346},{"style":98},[4347],{"type":22,"value":4348},"100",{"type":16,"tag":75,"props":4350,"children":4351},{"style":115},[4352],{"type":22,"value":4353},", (scrollTop ",{"type":16,"tag":75,"props":4355,"children":4356},{"style":289},[4357],{"type":22,"value":1792},{"type":16,"tag":75,"props":4359,"children":4360},{"style":115},[4361],{"type":22,"value":4362}," docHeight) ",{"type":16,"tag":75,"props":4364,"children":4365},{"style":289},[4366],{"type":22,"value":4367},"*",{"type":16,"tag":75,"props":4369,"children":4370},{"style":98},[4371],{"type":22,"value":4372}," 100",{"type":16,"tag":75,"props":4374,"children":4375},{"style":115},[4376],{"type":22,"value":1215},{"type":16,"tag":75,"props":4378,"children":4379},{"style":289},[4380],{"type":22,"value":1513},{"type":16,"tag":75,"props":4382,"children":4383},{"style":98},[4384],{"type":22,"value":4385}," 0\n",{"type":16,"tag":75,"props":4387,"children":4388},{"class":77,"line":778},[4389,4394,4398],{"type":16,"tag":75,"props":4390,"children":4391},{"style":115},[4392],{"type":22,"value":4393},"    ticking ",{"type":16,"tag":75,"props":4395,"children":4396},{"style":289},[4397],{"type":22,"value":411},{"type":16,"tag":75,"props":4399,"children":4400},{"style":98},[4401],{"type":22,"value":4186},{"type":16,"tag":75,"props":4403,"children":4404},{"class":77,"line":826},[4405],{"type":16,"tag":75,"props":4406,"children":4407},{"style":115},[4408],{"type":22,"value":1272},{"type":16,"tag":75,"props":4410,"children":4411},{"class":77,"line":858},[4412],{"type":16,"tag":75,"props":4413,"children":4414},{"emptyLinePlaceholder":169},[4415],{"type":22,"value":172},{"type":16,"tag":75,"props":4417,"children":4418},{"class":77,"line":1238},[4419,4423,4428,4432,4436,4440],{"type":16,"tag":75,"props":4420,"children":4421},{"style":289},[4422],{"type":22,"value":1059},{"type":16,"tag":75,"props":4424,"children":4425},{"style":92},[4426],{"type":22,"value":4427}," onScroll",{"type":16,"tag":75,"props":4429,"children":4430},{"style":289},[4431],{"type":22,"value":348},{"type":16,"tag":75,"props":4433,"children":4434},{"style":115},[4435],{"type":22,"value":1579},{"type":16,"tag":75,"props":4437,"children":4438},{"style":289},[4439],{"type":22,"value":1414},{"type":16,"tag":75,"props":4441,"children":4442},{"style":115},[4443],{"type":22,"value":1051},{"type":16,"tag":75,"props":4445,"children":4446},{"class":77,"line":1266},[4447,4451,4455,4459],{"type":16,"tag":75,"props":4448,"children":4449},{"style":289},[4450],{"type":22,"value":784},{"type":16,"tag":75,"props":4452,"children":4453},{"style":115},[4454],{"type":22,"value":1503},{"type":16,"tag":75,"props":4456,"children":4457},{"style":289},[4458],{"type":22,"value":3035},{"type":16,"tag":75,"props":4460,"children":4461},{"style":115},[4462],{"type":22,"value":4463},"ticking) {\n",{"type":16,"tag":75,"props":4465,"children":4466},{"class":77,"line":1275},[4467,4472,4476],{"type":16,"tag":75,"props":4468,"children":4469},{"style":115},[4470],{"type":22,"value":4471},"      window.",{"type":16,"tag":75,"props":4473,"children":4474},{"style":92},[4475],{"type":22,"value":4069},{"type":16,"tag":75,"props":4477,"children":4478},{"style":115},[4479],{"type":22,"value":4480},"(updateProgress)\n",{"type":16,"tag":75,"props":4482,"children":4483},{"class":77,"line":1283},[4484,4489,4493],{"type":16,"tag":75,"props":4485,"children":4486},{"style":115},[4487],{"type":22,"value":4488},"      ticking ",{"type":16,"tag":75,"props":4490,"children":4491},{"style":289},[4492],{"type":22,"value":411},{"type":16,"tag":75,"props":4494,"children":4495},{"style":98},[4496],{"type":22,"value":4497}," true\n",{"type":16,"tag":75,"props":4499,"children":4500},{"class":77,"line":1291},[4501],{"type":16,"tag":75,"props":4502,"children":4503},{"style":115},[4504],{"type":22,"value":1842},{"type":16,"tag":75,"props":4506,"children":4507},{"class":77,"line":3054},[4508],{"type":16,"tag":75,"props":4509,"children":4510},{"style":115},[4511],{"type":22,"value":1272},{"type":16,"tag":75,"props":4513,"children":4514},{"class":77,"line":3094},[4515],{"type":16,"tag":75,"props":4516,"children":4517},{"emptyLinePlaceholder":169},[4518],{"type":22,"value":172},{"type":16,"tag":75,"props":4520,"children":4521},{"class":77,"line":3149},[4522,4526,4530,4534],{"type":16,"tag":75,"props":4523,"children":4524},{"style":92},[4525],{"type":22,"value":3883},{"type":16,"tag":75,"props":4527,"children":4528},{"style":115},[4529],{"type":22,"value":3888},{"type":16,"tag":75,"props":4531,"children":4532},{"style":289},[4533],{"type":22,"value":1414},{"type":16,"tag":75,"props":4535,"children":4536},{"style":115},[4537],{"type":22,"value":1051},{"type":16,"tag":75,"props":4539,"children":4540},{"class":77,"line":3241},[4541,4546,4551,4555,4560,4565,4569],{"type":16,"tag":75,"props":4542,"children":4543},{"style":115},[4544],{"type":22,"value":4545},"    window.",{"type":16,"tag":75,"props":4547,"children":4548},{"style":92},[4549],{"type":22,"value":4550},"addEventListener",{"type":16,"tag":75,"props":4552,"children":4553},{"style":115},[4554],{"type":22,"value":693},{"type":16,"tag":75,"props":4556,"children":4557},{"style":104},[4558],{"type":22,"value":4559},"'scroll'",{"type":16,"tag":75,"props":4561,"children":4562},{"style":115},[4563],{"type":22,"value":4564},", onScroll, { passive: ",{"type":16,"tag":75,"props":4566,"children":4567},{"style":98},[4568],{"type":22,"value":1747},{"type":16,"tag":75,"props":4570,"children":4571},{"style":115},[4572],{"type":22,"value":1012},{"type":16,"tag":75,"props":4574,"children":4575},{"class":77,"line":3263},[4576,4581,4586],{"type":16,"tag":75,"props":4577,"children":4578},{"style":92},[4579],{"type":22,"value":4580},"    updateProgress",{"type":16,"tag":75,"props":4582,"children":4583},{"style":115},[4584],{"type":22,"value":4585},"() ",{"type":16,"tag":75,"props":4587,"children":4588},{"style":82},[4589],{"type":22,"value":4590},"\u002F\u002F 初始化\n",{"type":16,"tag":75,"props":4592,"children":4593},{"class":77,"line":3301},[4594],{"type":16,"tag":75,"props":4595,"children":4596},{"style":115},[4597],{"type":22,"value":3916},{"type":16,"tag":75,"props":4599,"children":4600},{"class":77,"line":3310},[4601],{"type":16,"tag":75,"props":4602,"children":4603},{"emptyLinePlaceholder":169},[4604],{"type":22,"value":172},{"type":16,"tag":75,"props":4606,"children":4607},{"class":77,"line":3318},[4608,4612,4616,4620],{"type":16,"tag":75,"props":4609,"children":4610},{"style":92},[4611],{"type":22,"value":3931},{"type":16,"tag":75,"props":4613,"children":4614},{"style":115},[4615],{"type":22,"value":3888},{"type":16,"tag":75,"props":4617,"children":4618},{"style":289},[4619],{"type":22,"value":1414},{"type":16,"tag":75,"props":4621,"children":4622},{"style":115},[4623],{"type":22,"value":1051},{"type":16,"tag":75,"props":4625,"children":4626},{"class":77,"line":3327},[4627,4631,4636,4640,4644],{"type":16,"tag":75,"props":4628,"children":4629},{"style":115},[4630],{"type":22,"value":4545},{"type":16,"tag":75,"props":4632,"children":4633},{"style":92},[4634],{"type":22,"value":4635},"removeEventListener",{"type":16,"tag":75,"props":4637,"children":4638},{"style":115},[4639],{"type":22,"value":693},{"type":16,"tag":75,"props":4641,"children":4642},{"style":104},[4643],{"type":22,"value":4559},{"type":16,"tag":75,"props":4645,"children":4646},{"style":115},[4647],{"type":22,"value":4648},", onScroll)\n",{"type":16,"tag":75,"props":4650,"children":4651},{"class":77,"line":3370},[4652],{"type":16,"tag":75,"props":4653,"children":4654},{"style":115},[4655],{"type":22,"value":3916},{"type":16,"tag":75,"props":4657,"children":4658},{"class":77,"line":3401},[4659],{"type":16,"tag":75,"props":4660,"children":4661},{"emptyLinePlaceholder":169},[4662],{"type":22,"value":172},{"type":16,"tag":75,"props":4664,"children":4665},{"class":77,"line":3410},[4666,4670],{"type":16,"tag":75,"props":4667,"children":4668},{"style":289},[4669],{"type":22,"value":1118},{"type":16,"tag":75,"props":4671,"children":4672},{"style":115},[4673],{"type":22,"value":4674}," { progress }\n",{"type":16,"tag":75,"props":4676,"children":4677},{"class":77,"line":3418},[4678],{"type":16,"tag":75,"props":4679,"children":4680},{"style":115},[4681],{"type":22,"value":2476},{"type":16,"tag":2598,"props":4683,"children":4685},{"id":4684},"_2-结合-tailwind-css-v4-实现丝滑动画",[4686],{"type":22,"value":4687},"2. 结合 Tailwind CSS v4 实现丝滑动画",{"type":16,"tag":28,"props":4689,"children":4690},{},[4691,4693,4699],{"type":22,"value":4692},"在 Nuxt 4 中，我们可以直接使用 Tailwind CSS v4 来渲染进度条。利用 CSS 变量和 ",{"type":16,"tag":52,"props":4694,"children":4696},{"className":4695},[],[4697],{"type":22,"value":4698},"transition",{"type":22,"value":4700},"，可以让进度条的变化更加平滑。",{"type":16,"tag":47,"props":4702,"children":4706},{"className":4703,"code":4704,"language":4705,"meta":7,"style":7},"language-vue shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003Cdiv class=\"fixed top-0 left-0 w-full h-1 z-50 bg-gray-200 dark:bg-gray-800\">\n    \u003Cdiv \n      class=\"h-full bg-blue-500 transition-all duration-150 ease-out\"\n      :style=\"{ width: `${progress}%` }\"\n    \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst { progress } = useReadingProgress()\n\u003C\u002Fscript>\n","vue",[4707],{"type":16,"tag":52,"props":4708,"children":4709},{"__ignoreMap":7},[4710,4727,4758,4775,4792,4843,4856,4872,4888,4895,4930,4963],{"type":16,"tag":75,"props":4711,"children":4712},{"class":77,"line":78},[4713,4717,4722],{"type":16,"tag":75,"props":4714,"children":4715},{"style":115},[4716],{"type":22,"value":1443},{"type":16,"tag":75,"props":4718,"children":4719},{"style":2066},[4720],{"type":22,"value":4721},"template",{"type":16,"tag":75,"props":4723,"children":4724},{"style":115},[4725],{"type":22,"value":4726},">\n",{"type":16,"tag":75,"props":4728,"children":4729},{"class":77,"line":88},[4730,4735,4740,4745,4749,4754],{"type":16,"tag":75,"props":4731,"children":4732},{"style":115},[4733],{"type":22,"value":4734},"  \u003C",{"type":16,"tag":75,"props":4736,"children":4737},{"style":2066},[4738],{"type":22,"value":4739},"div",{"type":16,"tag":75,"props":4741,"children":4742},{"style":92},[4743],{"type":22,"value":4744}," class",{"type":16,"tag":75,"props":4746,"children":4747},{"style":115},[4748],{"type":22,"value":411},{"type":16,"tag":75,"props":4750,"children":4751},{"style":104},[4752],{"type":22,"value":4753},"\"fixed top-0 left-0 w-full h-1 z-50 bg-gray-200 dark:bg-gray-800\"",{"type":16,"tag":75,"props":4755,"children":4756},{"style":115},[4757],{"type":22,"value":4726},{"type":16,"tag":75,"props":4759,"children":4760},{"class":77,"line":131},[4761,4766,4770],{"type":16,"tag":75,"props":4762,"children":4763},{"style":115},[4764],{"type":22,"value":4765},"    \u003C",{"type":16,"tag":75,"props":4767,"children":4768},{"style":2066},[4769],{"type":22,"value":4739},{"type":16,"tag":75,"props":4771,"children":4772},{"style":115},[4773],{"type":22,"value":4774}," \n",{"type":16,"tag":75,"props":4776,"children":4777},{"class":77,"line":165},[4778,4783,4787],{"type":16,"tag":75,"props":4779,"children":4780},{"style":92},[4781],{"type":22,"value":4782},"      class",{"type":16,"tag":75,"props":4784,"children":4785},{"style":115},[4786],{"type":22,"value":411},{"type":16,"tag":75,"props":4788,"children":4789},{"style":104},[4790],{"type":22,"value":4791},"\"h-full bg-blue-500 transition-all duration-150 ease-out\"\n",{"type":16,"tag":75,"props":4793,"children":4794},{"class":77,"line":175},[4795,4800,4804,4808,4813,4818,4823,4828,4833,4838],{"type":16,"tag":75,"props":4796,"children":4797},{"style":115},[4798],{"type":22,"value":4799},"      :",{"type":16,"tag":75,"props":4801,"children":4802},{"style":92},[4803],{"type":22,"value":2524},{"type":16,"tag":75,"props":4805,"children":4806},{"style":115},[4807],{"type":22,"value":411},{"type":16,"tag":75,"props":4809,"children":4810},{"style":104},[4811],{"type":22,"value":4812},"\"",{"type":16,"tag":75,"props":4814,"children":4815},{"style":115},[4816],{"type":22,"value":4817},"{ width: ",{"type":16,"tag":75,"props":4819,"children":4820},{"style":104},[4821],{"type":22,"value":4822},"`${",{"type":16,"tag":75,"props":4824,"children":4825},{"style":115},[4826],{"type":22,"value":4827},"progress",{"type":16,"tag":75,"props":4829,"children":4830},{"style":104},[4831],{"type":22,"value":4832},"}%`",{"type":16,"tag":75,"props":4834,"children":4835},{"style":115},[4836],{"type":22,"value":4837}," }",{"type":16,"tag":75,"props":4839,"children":4840},{"style":104},[4841],{"type":22,"value":4842},"\"\n",{"type":16,"tag":75,"props":4844,"children":4845},{"class":77,"line":184},[4846,4852],{"type":16,"tag":75,"props":4847,"children":4849},{"style":4848},"--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic",[4850],{"type":22,"value":4851},"    \u002F",{"type":16,"tag":75,"props":4853,"children":4854},{"style":115},[4855],{"type":22,"value":4726},{"type":16,"tag":75,"props":4857,"children":4858},{"class":77,"line":223},[4859,4864,4868],{"type":16,"tag":75,"props":4860,"children":4861},{"style":115},[4862],{"type":22,"value":4863},"  \u003C\u002F",{"type":16,"tag":75,"props":4865,"children":4866},{"style":2066},[4867],{"type":22,"value":4739},{"type":16,"tag":75,"props":4869,"children":4870},{"style":115},[4871],{"type":22,"value":4726},{"type":16,"tag":75,"props":4873,"children":4874},{"class":77,"line":380},[4875,4880,4884],{"type":16,"tag":75,"props":4876,"children":4877},{"style":115},[4878],{"type":22,"value":4879},"\u003C\u002F",{"type":16,"tag":75,"props":4881,"children":4882},{"style":2066},[4883],{"type":22,"value":4721},{"type":16,"tag":75,"props":4885,"children":4886},{"style":115},[4887],{"type":22,"value":4726},{"type":16,"tag":75,"props":4889,"children":4890},{"class":77,"line":439},[4891],{"type":16,"tag":75,"props":4892,"children":4893},{"emptyLinePlaceholder":169},[4894],{"type":22,"value":172},{"type":16,"tag":75,"props":4896,"children":4897},{"class":77,"line":457},[4898,4902,4907,4912,4917,4921,4926],{"type":16,"tag":75,"props":4899,"children":4900},{"style":115},[4901],{"type":22,"value":1443},{"type":16,"tag":75,"props":4903,"children":4904},{"style":2066},[4905],{"type":22,"value":4906},"script",{"type":16,"tag":75,"props":4908,"children":4909},{"style":92},[4910],{"type":22,"value":4911}," setup",{"type":16,"tag":75,"props":4913,"children":4914},{"style":92},[4915],{"type":22,"value":4916}," lang",{"type":16,"tag":75,"props":4918,"children":4919},{"style":115},[4920],{"type":22,"value":411},{"type":16,"tag":75,"props":4922,"children":4923},{"style":104},[4924],{"type":22,"value":4925},"\"ts\"",{"type":16,"tag":75,"props":4927,"children":4928},{"style":115},[4929],{"type":22,"value":4726},{"type":16,"tag":75,"props":4931,"children":4932},{"class":77,"line":486},[4933,4937,4942,4946,4951,4955,4959],{"type":16,"tag":75,"props":4934,"children":4935},{"style":289},[4936],{"type":22,"value":968},{"type":16,"tag":75,"props":4938,"children":4939},{"style":115},[4940],{"type":22,"value":4941}," { ",{"type":16,"tag":75,"props":4943,"children":4944},{"style":98},[4945],{"type":22,"value":4827},{"type":16,"tag":75,"props":4947,"children":4948},{"style":115},[4949],{"type":22,"value":4950}," } ",{"type":16,"tag":75,"props":4952,"children":4953},{"style":289},[4954],{"type":22,"value":411},{"type":16,"tag":75,"props":4956,"children":4957},{"style":92},[4958],{"type":22,"value":4128},{"type":16,"tag":75,"props":4960,"children":4961},{"style":115},[4962],{"type":22,"value":1235},{"type":16,"tag":75,"props":4964,"children":4965},{"class":77,"line":738},[4966,4970,4974],{"type":16,"tag":75,"props":4967,"children":4968},{"style":115},[4969],{"type":22,"value":4879},{"type":16,"tag":75,"props":4971,"children":4972},{"style":2066},[4973],{"type":22,"value":4906},{"type":16,"tag":75,"props":4975,"children":4976},{"style":115},[4977],{"type":22,"value":4726},{"type":16,"tag":28,"props":4979,"children":4980},{},[4981],{"type":16,"tag":60,"props":4982,"children":4983},{},[4984],{"type":22,"value":4985},"💡 优化细节：",{"type":16,"tag":4987,"props":4988,"children":4989},"ol",{},[4990,5012],{"type":16,"tag":4991,"props":4992,"children":4993},"li",{},[4994,4996,5002,5004,5010],{"type":22,"value":4995},"使用 ",{"type":16,"tag":52,"props":4997,"children":4999},{"className":4998},[],[5000],{"type":22,"value":5001},"passive: true",{"type":22,"value":5003}," 监听滚动事件，告诉浏览器不会调用 ",{"type":16,"tag":52,"props":5005,"children":5007},{"className":5006},[],[5008],{"type":22,"value":5009},"preventDefault()",{"type":22,"value":5011},"，从而提升滚动性能。",{"type":16,"tag":4991,"props":5013,"children":5014},{},[5015,5017,5023],{"type":22,"value":5016},"进度条使用 ",{"type":16,"tag":52,"props":5018,"children":5020},{"className":5019},[],[5021],{"type":22,"value":5022},"transition-all duration-150",{"type":22,"value":5024},"，避免数值跳变带来的视觉突兀感。",{"type":16,"tag":40,"props":5026,"children":5028},{"id":5027},"三-总结",[5029],{"type":22,"value":5030},"三、 总结",{"type":16,"tag":28,"props":5032,"children":5033},{},[5034,5036,5041],{"type":22,"value":5035},"通过这次重构，我深刻体会到：",{"type":16,"tag":60,"props":5037,"children":5038},{},[5039],{"type":22,"value":5040},"优秀的阅读体验是由无数个细节堆砌而成的",{"type":22,"value":5042},"。",{"type":16,"tag":5044,"props":5045,"children":5046},"ul",{},[5047,5057,5069],{"type":16,"tag":4991,"props":5048,"children":5049},{},[5050,5055],{"type":16,"tag":60,"props":5051,"children":5052},{},[5053],{"type":22,"value":5054},"Intersection Observer",{"type":22,"value":5056}," 替代传统的滚动监听，是处理目录高亮的最佳实践。",{"type":16,"tag":4991,"props":5058,"children":5059},{},[5060,5062,5067],{"type":22,"value":5061},"在 SSR 框架（如 Nuxt）中，时刻牢记",{"type":16,"tag":60,"props":5063,"children":5064},{},[5065],{"type":22,"value":5066},"客户端与服务端的环境差异",{"type":22,"value":5068},"，避免 hydration mismatch（水合不匹配）错误。",{"type":16,"tag":4991,"props":5070,"children":5071},{},[5072,5074,5079,5081,5086],{"type":22,"value":5073},"善用 ",{"type":16,"tag":52,"props":5075,"children":5077},{"className":5076},[],[5078],{"type":22,"value":4069},{"type":22,"value":5080}," 和 CSS ",{"type":16,"tag":52,"props":5082,"children":5084},{"className":5083},[],[5085],{"type":22,"value":4698},{"type":22,"value":5087},"，可以用极低的成本换取丝滑的视觉体验。",{"type":16,"tag":28,"props":5089,"children":5090},{},[5091,5093,5102],{"type":22,"value":5092},"目前这两个功能已经在 ",{"type":16,"tag":5094,"props":5095,"children":5099},"a",{"href":5096,"rel":5097},"https:\u002F\u002Fninglab.top",[5098],"nofollow",[5100],{"type":22,"value":5101},"ninglab.top",{"type":22,"value":5103}," 上线，阅读体验有了显著提升。下一步，我计划引入 Giscus 评论系统，让博客真正“活”起来。",{"type":16,"tag":28,"props":5105,"children":5106},{},[5107],{"type":22,"value":5108},"如果你也在重构博客，或者对 Nuxt 4 的某些特性有疑问，欢迎在评论区交流！",{"type":16,"tag":2524,"props":5110,"children":5111},{},[5112],{"type":22,"value":2528},{"title":7,"searchDepth":88,"depth":88,"links":5114},[5115,5119,5123],{"id":2588,"depth":88,"text":2591,"children":5116},[5117,5118],{"id":2600,"depth":131,"text":2603},{"id":3464,"depth":131,"text":3467},{"id":4037,"depth":88,"text":4040,"children":5120},[5121,5122],{"id":4048,"depth":131,"text":4051},{"id":4684,"depth":131,"text":4687},{"id":5027,"depth":88,"text":5030},"content:blog:3-post.md","blog\u002F3-post.md","blog\u002F3-post","2LK7M1",{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"code":11,"body":5129,"_type":2536,"_id":2537,"_source":2538,"_file":2539,"_stem":2540,"_extension":2541},{"type":13,"children":5130,"toc":7286},[5131,5135,5146,5150,5157,5164,5315,5319,5534,5848,5852,6205,6501,6505,6518,6689,6702,6854,6858,7120,7243,7250,7282],{"type":16,"tag":17,"props":5132,"children":5133},{"id":19},[5134],{"type":22,"value":8},{"type":16,"tag":24,"props":5136,"children":5137},{},[5138],{"type":16,"tag":28,"props":5139,"children":5140},{},[5141,5142,5145],{"type":22,"value":32},{"type":16,"tag":34,"props":5143,"children":5144},{},[],{"type":22,"value":38},{"type":16,"tag":40,"props":5147,"children":5148},{"id":42},[5149],{"type":22,"value":45},{"type":16,"tag":47,"props":5151,"children":5152},{"code":49},[5153],{"type":16,"tag":52,"props":5154,"children":5155},{"__ignoreMap":7},[5156],{"type":22,"value":49},{"type":16,"tag":28,"props":5158,"children":5159},{},[5160],{"type":16,"tag":60,"props":5161,"children":5162},{},[5163],{"type":22,"value":64},{"type":16,"tag":47,"props":5165,"children":5166},{"code":67,"language":68,"meta":7,"className":69,"style":7},[5167],{"type":16,"tag":52,"props":5168,"children":5169},{"__ignoreMap":7},[5170,5177,5208,5235,5242,5249,5280],{"type":16,"tag":75,"props":5171,"children":5172},{"class":77,"line":78},[5173],{"type":16,"tag":75,"props":5174,"children":5175},{"style":82},[5176],{"type":22,"value":85},{"type":16,"tag":75,"props":5178,"children":5179},{"class":77,"line":88},[5180,5184,5188,5192,5196,5200,5204],{"type":16,"tag":75,"props":5181,"children":5182},{"style":92},[5183],{"type":22,"value":95},{"type":16,"tag":75,"props":5185,"children":5186},{"style":98},[5187],{"type":22,"value":101},{"type":16,"tag":75,"props":5189,"children":5190},{"style":104},[5191],{"type":22,"value":107},{"type":16,"tag":75,"props":5193,"children":5194},{"style":104},[5195],{"type":22,"value":112},{"type":16,"tag":75,"props":5197,"children":5198},{"style":115},[5199],{"type":22,"value":118},{"type":16,"tag":75,"props":5201,"children":5202},{"style":98},[5203],{"type":22,"value":123},{"type":16,"tag":75,"props":5205,"children":5206},{"style":104},[5207],{"type":22,"value":128},{"type":16,"tag":75,"props":5209,"children":5210},{"class":77,"line":131},[5211,5215,5219,5223,5227,5231],{"type":16,"tag":75,"props":5212,"children":5213},{"style":92},[5214],{"type":22,"value":137},{"type":16,"tag":75,"props":5216,"children":5217},{"style":104},[5218],{"type":22,"value":142},{"type":16,"tag":75,"props":5220,"children":5221},{"style":104},[5222],{"type":22,"value":147},{"type":16,"tag":75,"props":5224,"children":5225},{"style":104},[5226],{"type":22,"value":152},{"type":16,"tag":75,"props":5228,"children":5229},{"style":104},[5230],{"type":22,"value":157},{"type":16,"tag":75,"props":5232,"children":5233},{"style":104},[5234],{"type":22,"value":162},{"type":16,"tag":75,"props":5236,"children":5237},{"class":77,"line":165},[5238],{"type":16,"tag":75,"props":5239,"children":5240},{"emptyLinePlaceholder":169},[5241],{"type":22,"value":172},{"type":16,"tag":75,"props":5243,"children":5244},{"class":77,"line":175},[5245],{"type":16,"tag":75,"props":5246,"children":5247},{"style":82},[5248],{"type":22,"value":181},{"type":16,"tag":75,"props":5250,"children":5251},{"class":77,"line":184},[5252,5256,5260,5264,5268,5272,5276],{"type":16,"tag":75,"props":5253,"children":5254},{"style":92},[5255],{"type":22,"value":190},{"type":16,"tag":75,"props":5257,"children":5258},{"style":104},[5259],{"type":22,"value":195},{"type":16,"tag":75,"props":5261,"children":5262},{"style":104},[5263],{"type":22,"value":200},{"type":16,"tag":75,"props":5265,"children":5266},{"style":104},[5267],{"type":22,"value":205},{"type":16,"tag":75,"props":5269,"children":5270},{"style":98},[5271],{"type":22,"value":210},{"type":16,"tag":75,"props":5273,"children":5274},{"style":98},[5275],{"type":22,"value":215},{"type":16,"tag":75,"props":5277,"children":5278},{"style":104},[5279],{"type":22,"value":220},{"type":16,"tag":75,"props":5281,"children":5282},{"class":77,"line":223},[5283,5287,5291,5295,5299,5303,5307,5311],{"type":16,"tag":75,"props":5284,"children":5285},{"style":98},[5286],{"type":22,"value":229},{"type":16,"tag":75,"props":5288,"children":5289},{"style":104},[5290],{"type":22,"value":205},{"type":16,"tag":75,"props":5292,"children":5293},{"style":115},[5294],{"type":22,"value":118},{"type":16,"tag":75,"props":5296,"children":5297},{"style":92},[5298],{"type":22,"value":190},{"type":16,"tag":75,"props":5300,"children":5301},{"style":104},[5302],{"type":22,"value":246},{"type":16,"tag":75,"props":5304,"children":5305},{"style":104},[5306],{"type":22,"value":251},{"type":16,"tag":75,"props":5308,"children":5309},{"style":104},[5310],{"type":22,"value":256},{"type":16,"tag":75,"props":5312,"children":5313},{"style":104},[5314],{"type":22,"value":261},{"type":16,"tag":40,"props":5316,"children":5317},{"id":264},[5318],{"type":22,"value":267},{"type":16,"tag":47,"props":5320,"children":5321},{"code":270,"language":95,"meta":7,"className":271,"style":7},[5322],{"type":16,"tag":52,"props":5323,"children":5324},{"__ignoreMap":7},[5325,5332,5351,5370,5377,5392,5407,5414,5461,5476,5499],{"type":16,"tag":75,"props":5326,"children":5327},{"class":77,"line":78},[5328],{"type":16,"tag":75,"props":5329,"children":5330},{"style":82},[5331],{"type":22,"value":283},{"type":16,"tag":75,"props":5333,"children":5334},{"class":77,"line":88},[5335,5339,5343,5347],{"type":16,"tag":75,"props":5336,"children":5337},{"style":289},[5338],{"type":22,"value":292},{"type":16,"tag":75,"props":5340,"children":5341},{"style":115},[5342],{"type":22,"value":297},{"type":16,"tag":75,"props":5344,"children":5345},{"style":289},[5346],{"type":22,"value":302},{"type":16,"tag":75,"props":5348,"children":5349},{"style":115},[5350],{"type":22,"value":307},{"type":16,"tag":75,"props":5352,"children":5353},{"class":77,"line":131},[5354,5358,5362,5366],{"type":16,"tag":75,"props":5355,"children":5356},{"style":289},[5357],{"type":22,"value":292},{"type":16,"tag":75,"props":5359,"children":5360},{"style":115},[5361],{"type":22,"value":319},{"type":16,"tag":75,"props":5363,"children":5364},{"style":289},[5365],{"type":22,"value":302},{"type":16,"tag":75,"props":5367,"children":5368},{"style":115},[5369],{"type":22,"value":328},{"type":16,"tag":75,"props":5371,"children":5372},{"class":77,"line":165},[5373],{"type":16,"tag":75,"props":5374,"children":5375},{"emptyLinePlaceholder":169},[5376],{"type":22,"value":172},{"type":16,"tag":75,"props":5378,"children":5379},{"class":77,"line":175},[5380,5384,5388],{"type":16,"tag":75,"props":5381,"children":5382},{"style":98},[5383],{"type":22,"value":343},{"type":16,"tag":75,"props":5385,"children":5386},{"style":289},[5387],{"type":22,"value":348},{"type":16,"tag":75,"props":5389,"children":5390},{"style":104},[5391],{"type":22,"value":353},{"type":16,"tag":75,"props":5393,"children":5394},{"class":77,"line":184},[5395,5399,5403],{"type":16,"tag":75,"props":5396,"children":5397},{"style":98},[5398],{"type":22,"value":361},{"type":16,"tag":75,"props":5400,"children":5401},{"style":289},[5402],{"type":22,"value":348},{"type":16,"tag":75,"props":5404,"children":5405},{"style":104},[5406],{"type":22,"value":370},{"type":16,"tag":75,"props":5408,"children":5409},{"class":77,"line":223},[5410],{"type":16,"tag":75,"props":5411,"children":5412},{"emptyLinePlaceholder":169},[5413],{"type":22,"value":172},{"type":16,"tag":75,"props":5415,"children":5416},{"class":77,"line":380},[5417,5421,5425,5429,5433,5437,5441,5445,5449,5453,5457],{"type":16,"tag":75,"props":5418,"children":5419},{"style":289},[5420],{"type":22,"value":386},{"type":16,"tag":75,"props":5422,"children":5423},{"style":92},[5424],{"type":22,"value":391},{"type":16,"tag":75,"props":5426,"children":5427},{"style":115},[5428],{"type":22,"value":396},{"type":16,"tag":75,"props":5430,"children":5431},{"style":98},[5432],{"type":22,"value":401},{"type":16,"tag":75,"props":5434,"children":5435},{"style":115},[5436],{"type":22,"value":406},{"type":16,"tag":75,"props":5438,"children":5439},{"style":289},[5440],{"type":22,"value":411},{"type":16,"tag":75,"props":5442,"children":5443},{"style":115},[5444],{"type":22,"value":416},{"type":16,"tag":75,"props":5446,"children":5447},{"style":419},[5448],{"type":22,"value":422},{"type":16,"tag":75,"props":5450,"children":5451},{"style":289},[5452],{"type":22,"value":411},{"type":16,"tag":75,"props":5454,"children":5455},{"style":98},[5456],{"type":22,"value":431},{"type":16,"tag":75,"props":5458,"children":5459},{"style":115},[5460],{"type":22,"value":436},{"type":16,"tag":75,"props":5462,"children":5463},{"class":77,"line":439},[5464,5468,5472],{"type":16,"tag":75,"props":5465,"children":5466},{"style":115},[5467],{"type":22,"value":445},{"type":16,"tag":75,"props":5469,"children":5470},{"style":289},[5471],{"type":22,"value":411},{"type":16,"tag":75,"props":5473,"children":5474},{"style":115},[5475],{"type":22,"value":454},{"type":16,"tag":75,"props":5477,"children":5478},{"class":77,"line":457},[5479,5483,5487,5491,5495],{"type":16,"tag":75,"props":5480,"children":5481},{"style":115},[5482],{"type":22,"value":463},{"type":16,"tag":75,"props":5484,"children":5485},{"style":104},[5486],{"type":22,"value":468},{"type":16,"tag":75,"props":5488,"children":5489},{"style":115},[5490],{"type":22,"value":473},{"type":16,"tag":75,"props":5492,"children":5493},{"style":289},[5494],{"type":22,"value":478},{"type":16,"tag":75,"props":5496,"children":5497},{"style":115},[5498],{"type":22,"value":483},{"type":16,"tag":75,"props":5500,"children":5501},{"class":77,"line":486},[5502,5506,5510,5514,5518,5522,5526,5530],{"type":16,"tag":75,"props":5503,"children":5504},{"style":289},[5505],{"type":22,"value":492},{"type":16,"tag":75,"props":5507,"children":5508},{"style":115},[5509],{"type":22,"value":497},{"type":16,"tag":75,"props":5511,"children":5512},{"style":98},[5513],{"type":22,"value":343},{"type":16,"tag":75,"props":5515,"children":5516},{"style":115},[5517],{"type":22,"value":506},{"type":16,"tag":75,"props":5519,"children":5520},{"style":419},[5521],{"type":22,"value":511},{"type":16,"tag":75,"props":5523,"children":5524},{"style":289},[5525],{"type":22,"value":411},{"type":16,"tag":75,"props":5527,"children":5528},{"style":98},[5529],{"type":22,"value":361},{"type":16,"tag":75,"props":5531,"children":5532},{"style":115},[5533],{"type":22,"value":524},{"type":16,"tag":47,"props":5535,"children":5536},{"code":527,"language":95,"meta":7,"className":271,"style":7},[5537],{"type":16,"tag":52,"props":5538,"children":5539},{"__ignoreMap":7},[5540,5547,5566,5585,5604,5611,5662,5669,5692,5703,5714,5721,5740,5755,5794,5821],{"type":16,"tag":75,"props":5541,"children":5542},{"class":77,"line":78},[5543],{"type":16,"tag":75,"props":5544,"children":5545},{"style":82},[5546],{"type":22,"value":539},{"type":16,"tag":75,"props":5548,"children":5549},{"class":77,"line":88},[5550,5554,5558,5562],{"type":16,"tag":75,"props":5551,"children":5552},{"style":289},[5553],{"type":22,"value":292},{"type":16,"tag":75,"props":5555,"children":5556},{"style":115},[5557],{"type":22,"value":551},{"type":16,"tag":75,"props":5559,"children":5560},{"style":289},[5561],{"type":22,"value":302},{"type":16,"tag":75,"props":5563,"children":5564},{"style":115},[5565],{"type":22,"value":560},{"type":16,"tag":75,"props":5567,"children":5568},{"class":77,"line":131},[5569,5573,5577,5581],{"type":16,"tag":75,"props":5570,"children":5571},{"style":289},[5572],{"type":22,"value":292},{"type":16,"tag":75,"props":5574,"children":5575},{"style":115},[5576],{"type":22,"value":572},{"type":16,"tag":75,"props":5578,"children":5579},{"style":289},[5580],{"type":22,"value":302},{"type":16,"tag":75,"props":5582,"children":5583},{"style":115},[5584],{"type":22,"value":581},{"type":16,"tag":75,"props":5586,"children":5587},{"class":77,"line":165},[5588,5592,5596,5600],{"type":16,"tag":75,"props":5589,"children":5590},{"style":289},[5591],{"type":22,"value":292},{"type":16,"tag":75,"props":5593,"children":5594},{"style":115},[5595],{"type":22,"value":593},{"type":16,"tag":75,"props":5597,"children":5598},{"style":289},[5599],{"type":22,"value":302},{"type":16,"tag":75,"props":5601,"children":5602},{"style":115},[5603],{"type":22,"value":602},{"type":16,"tag":75,"props":5605,"children":5606},{"class":77,"line":175},[5607],{"type":16,"tag":75,"props":5608,"children":5609},{"emptyLinePlaceholder":169},[5610],{"type":22,"value":172},{"type":16,"tag":75,"props":5612,"children":5613},{"class":77,"line":184},[5614,5618,5622,5626,5630,5634,5638,5642,5646,5650,5654,5658],{"type":16,"tag":75,"props":5615,"children":5616},{"style":115},[5617],{"type":22,"value":617},{"type":16,"tag":75,"props":5619,"children":5620},{"style":289},[5621],{"type":22,"value":411},{"type":16,"tag":75,"props":5623,"children":5624},{"style":115},[5625],{"type":22,"value":626},{"type":16,"tag":75,"props":5627,"children":5628},{"style":419},[5629],{"type":22,"value":631},{"type":16,"tag":75,"props":5631,"children":5632},{"style":289},[5633],{"type":22,"value":411},{"type":16,"tag":75,"props":5635,"children":5636},{"style":104},[5637],{"type":22,"value":640},{"type":16,"tag":75,"props":5639,"children":5640},{"style":115},[5641],{"type":22,"value":506},{"type":16,"tag":75,"props":5643,"children":5644},{"style":419},[5645],{"type":22,"value":649},{"type":16,"tag":75,"props":5647,"children":5648},{"style":289},[5649],{"type":22,"value":411},{"type":16,"tag":75,"props":5651,"children":5652},{"style":115},[5653],{"type":22,"value":658},{"type":16,"tag":75,"props":5655,"children":5656},{"style":104},[5657],{"type":22,"value":663},{"type":16,"tag":75,"props":5659,"children":5660},{"style":115},[5661],{"type":22,"value":668},{"type":16,"tag":75,"props":5663,"children":5664},{"class":77,"line":223},[5665],{"type":16,"tag":75,"props":5666,"children":5667},{"emptyLinePlaceholder":169},[5668],{"type":22,"value":172},{"type":16,"tag":75,"props":5670,"children":5671},{"class":77,"line":380},[5672,5676,5680,5684,5688],{"type":16,"tag":75,"props":5673,"children":5674},{"style":289},[5675],{"type":22,"value":683},{"type":16,"tag":75,"props":5677,"children":5678},{"style":92},[5679],{"type":22,"value":688},{"type":16,"tag":75,"props":5681,"children":5682},{"style":115},[5683],{"type":22,"value":693},{"type":16,"tag":75,"props":5685,"children":5686},{"style":92},[5687],{"type":22,"value":698},{"type":16,"tag":75,"props":5689,"children":5690},{"style":115},[5691],{"type":22,"value":703},{"type":16,"tag":75,"props":5693,"children":5694},{"class":77,"line":439},[5695,5699],{"type":16,"tag":75,"props":5696,"children":5697},{"style":115},[5698],{"type":22,"value":711},{"type":16,"tag":75,"props":5700,"children":5701},{"style":98},[5702],{"type":22,"value":716},{"type":16,"tag":75,"props":5704,"children":5705},{"class":77,"line":457},[5706,5710],{"type":16,"tag":75,"props":5707,"children":5708},{"style":115},[5709],{"type":22,"value":724},{"type":16,"tag":75,"props":5711,"children":5712},{"style":98},[5713],{"type":22,"value":716},{"type":16,"tag":75,"props":5715,"children":5716},{"class":77,"line":486},[5717],{"type":16,"tag":75,"props":5718,"children":5719},{"emptyLinePlaceholder":169},[5720],{"type":22,"value":172},{"type":16,"tag":75,"props":5722,"children":5723},{"class":77,"line":738},[5724,5728,5732,5736],{"type":16,"tag":75,"props":5725,"children":5726},{"style":92},[5727],{"type":22,"value":744},{"type":16,"tag":75,"props":5729,"children":5730},{"style":115},[5731],{"type":22,"value":693},{"type":16,"tag":75,"props":5733,"children":5734},{"style":104},[5735],{"type":22,"value":753},{"type":16,"tag":75,"props":5737,"children":5738},{"style":115},[5739],{"type":22,"value":524},{"type":16,"tag":75,"props":5741,"children":5742},{"class":77,"line":760},[5743,5747,5751],{"type":16,"tag":75,"props":5744,"children":5745},{"style":289},[5746],{"type":22,"value":386},{"type":16,"tag":75,"props":5748,"children":5749},{"style":92},[5750],{"type":22,"value":770},{"type":16,"tag":75,"props":5752,"children":5753},{"style":115},[5754],{"type":22,"value":775},{"type":16,"tag":75,"props":5756,"children":5757},{"class":77,"line":778},[5758,5762,5766,5770,5774,5778,5782,5786,5790],{"type":16,"tag":75,"props":5759,"children":5760},{"style":289},[5761],{"type":22,"value":784},{"type":16,"tag":75,"props":5763,"children":5764},{"style":115},[5765],{"type":22,"value":789},{"type":16,"tag":75,"props":5767,"children":5768},{"style":289},[5769],{"type":22,"value":794},{"type":16,"tag":75,"props":5771,"children":5772},{"style":104},[5773],{"type":22,"value":799},{"type":16,"tag":75,"props":5775,"children":5776},{"style":289},[5777],{"type":22,"value":804},{"type":16,"tag":75,"props":5779,"children":5780},{"style":115},[5781],{"type":22,"value":809},{"type":16,"tag":75,"props":5783,"children":5784},{"style":289},[5785],{"type":22,"value":794},{"type":16,"tag":75,"props":5787,"children":5788},{"style":104},[5789],{"type":22,"value":818},{"type":16,"tag":75,"props":5791,"children":5792},{"style":115},[5793],{"type":22,"value":823},{"type":16,"tag":75,"props":5795,"children":5796},{"class":77,"line":826},[5797,5801,5805,5809,5813,5817],{"type":16,"tag":75,"props":5798,"children":5799},{"style":289},[5800],{"type":22,"value":832},{"type":16,"tag":75,"props":5802,"children":5803},{"style":115},[5804],{"type":22,"value":837},{"type":16,"tag":75,"props":5806,"children":5807},{"style":98},[5808],{"type":22,"value":842},{"type":16,"tag":75,"props":5810,"children":5811},{"style":115},[5812],{"type":22,"value":506},{"type":16,"tag":75,"props":5814,"children":5815},{"style":104},[5816],{"type":22,"value":851},{"type":16,"tag":75,"props":5818,"children":5819},{"style":115},[5820],{"type":22,"value":524},{"type":16,"tag":75,"props":5822,"children":5823},{"class":77,"line":858},[5824,5828,5832,5836,5840,5844],{"type":16,"tag":75,"props":5825,"children":5826},{"style":289},[5827],{"type":22,"value":492},{"type":16,"tag":75,"props":5829,"children":5830},{"style":115},[5831],{"type":22,"value":868},{"type":16,"tag":75,"props":5833,"children":5834},{"style":104},[5835],{"type":22,"value":873},{"type":16,"tag":75,"props":5837,"children":5838},{"style":115},[5839],{"type":22,"value":878},{"type":16,"tag":75,"props":5841,"children":5842},{"style":104},[5843],{"type":22,"value":883},{"type":16,"tag":75,"props":5845,"children":5846},{"style":115},[5847],{"type":22,"value":888},{"type":16,"tag":40,"props":5849,"children":5850},{"id":891},[5851],{"type":22,"value":894},{"type":16,"tag":47,"props":5853,"children":5854},{"code":897,"language":898,"meta":7,"className":899,"style":7},[5855],{"type":16,"tag":52,"props":5856,"children":5857},{"__ignoreMap":7},[5858,5865,5884,5903,5910,5953,5960,5987,6010,6037,6048,6055,6062,6077,6092,6107,6146,6169,6176,6183,6190],{"type":16,"tag":75,"props":5859,"children":5860},{"class":77,"line":78},[5861],{"type":16,"tag":75,"props":5862,"children":5863},{"style":82},[5864],{"type":22,"value":911},{"type":16,"tag":75,"props":5866,"children":5867},{"class":77,"line":88},[5868,5872,5876,5880],{"type":16,"tag":75,"props":5869,"children":5870},{"style":289},[5871],{"type":22,"value":302},{"type":16,"tag":75,"props":5873,"children":5874},{"style":115},[5875],{"type":22,"value":923},{"type":16,"tag":75,"props":5877,"children":5878},{"style":289},[5879],{"type":22,"value":292},{"type":16,"tag":75,"props":5881,"children":5882},{"style":104},[5883],{"type":22,"value":932},{"type":16,"tag":75,"props":5885,"children":5886},{"class":77,"line":131},[5887,5891,5895,5899],{"type":16,"tag":75,"props":5888,"children":5889},{"style":289},[5890],{"type":22,"value":302},{"type":16,"tag":75,"props":5892,"children":5893},{"style":115},[5894],{"type":22,"value":944},{"type":16,"tag":75,"props":5896,"children":5897},{"style":289},[5898],{"type":22,"value":292},{"type":16,"tag":75,"props":5900,"children":5901},{"style":104},[5902],{"type":22,"value":953},{"type":16,"tag":75,"props":5904,"children":5905},{"class":77,"line":165},[5906],{"type":16,"tag":75,"props":5907,"children":5908},{"emptyLinePlaceholder":169},[5909],{"type":22,"value":172},{"type":16,"tag":75,"props":5911,"children":5912},{"class":77,"line":175},[5913,5917,5921,5925,5929,5933,5937,5941,5945,5949],{"type":16,"tag":75,"props":5914,"children":5915},{"style":289},[5916],{"type":22,"value":968},{"type":16,"tag":75,"props":5918,"children":5919},{"style":98},[5920],{"type":22,"value":973},{"type":16,"tag":75,"props":5922,"children":5923},{"style":289},[5924],{"type":22,"value":348},{"type":16,"tag":75,"props":5926,"children":5927},{"style":115},[5928],{"type":22,"value":982},{"type":16,"tag":75,"props":5930,"children":5931},{"style":92},[5932],{"type":22,"value":987},{"type":16,"tag":75,"props":5934,"children":5935},{"style":115},[5936],{"type":22,"value":992},{"type":16,"tag":75,"props":5938,"children":5939},{"style":104},[5940],{"type":22,"value":997},{"type":16,"tag":75,"props":5942,"children":5943},{"style":115},[5944],{"type":22,"value":1002},{"type":16,"tag":75,"props":5946,"children":5947},{"style":98},[5948],{"type":22,"value":1007},{"type":16,"tag":75,"props":5950,"children":5951},{"style":115},[5952],{"type":22,"value":1012},{"type":16,"tag":75,"props":5954,"children":5955},{"class":77,"line":184},[5956],{"type":16,"tag":75,"props":5957,"children":5958},{"emptyLinePlaceholder":169},[5959],{"type":22,"value":172},{"type":16,"tag":75,"props":5961,"children":5962},{"class":77,"line":223},[5963,5967,5971,5975,5979,5983],{"type":16,"tag":75,"props":5964,"children":5965},{"style":115},[5966],{"type":22,"value":1027},{"type":16,"tag":75,"props":5968,"children":5969},{"style":92},[5970],{"type":22,"value":1032},{"type":16,"tag":75,"props":5972,"children":5973},{"style":115},[5974],{"type":22,"value":693},{"type":16,"tag":75,"props":5976,"children":5977},{"style":419},[5978],{"type":22,"value":1041},{"type":16,"tag":75,"props":5980,"children":5981},{"style":289},[5982],{"type":22,"value":1046},{"type":16,"tag":75,"props":5984,"children":5985},{"style":115},[5986],{"type":22,"value":1051},{"type":16,"tag":75,"props":5988,"children":5989},{"class":77,"line":380},[5990,5994,5998,6002,6006],{"type":16,"tag":75,"props":5991,"children":5992},{"style":289},[5993],{"type":22,"value":1059},{"type":16,"tag":75,"props":5995,"children":5996},{"style":98},[5997],{"type":22,"value":1064},{"type":16,"tag":75,"props":5999,"children":6000},{"style":289},[6001],{"type":22,"value":348},{"type":16,"tag":75,"props":6003,"children":6004},{"style":92},[6005],{"type":22,"value":1073},{"type":16,"tag":75,"props":6007,"children":6008},{"style":115},[6009],{"type":22,"value":1078},{"type":16,"tag":75,"props":6011,"children":6012},{"class":77,"line":439},[6013,6017,6021,6025,6029,6033],{"type":16,"tag":75,"props":6014,"children":6015},{"style":289},[6016],{"type":22,"value":1086},{"type":16,"tag":75,"props":6018,"children":6019},{"style":115},[6020],{"type":22,"value":1091},{"type":16,"tag":75,"props":6022,"children":6023},{"style":289},[6024],{"type":22,"value":411},{"type":16,"tag":75,"props":6026,"children":6027},{"style":104},[6028],{"type":22,"value":1100},{"type":16,"tag":75,"props":6030,"children":6031},{"style":115},[6032],{"type":22,"value":1105},{"type":16,"tag":75,"props":6034,"children":6035},{"style":104},[6036],{"type":22,"value":1110},{"type":16,"tag":75,"props":6038,"children":6039},{"class":77,"line":457},[6040,6044],{"type":16,"tag":75,"props":6041,"children":6042},{"style":289},[6043],{"type":22,"value":1118},{"type":16,"tag":75,"props":6045,"children":6046},{"style":115},[6047],{"type":22,"value":1123},{"type":16,"tag":75,"props":6049,"children":6050},{"class":77,"line":486},[6051],{"type":16,"tag":75,"props":6052,"children":6053},{"style":115},[6054],{"type":22,"value":1131},{"type":16,"tag":75,"props":6056,"children":6057},{"class":77,"line":738},[6058],{"type":16,"tag":75,"props":6059,"children":6060},{"emptyLinePlaceholder":169},[6061],{"type":22,"value":172},{"type":16,"tag":75,"props":6063,"children":6064},{"class":77,"line":760},[6065,6069,6073],{"type":16,"tag":75,"props":6066,"children":6067},{"style":115},[6068],{"type":22,"value":1146},{"type":16,"tag":75,"props":6070,"children":6071},{"style":92},[6072],{"type":22,"value":1032},{"type":16,"tag":75,"props":6074,"children":6075},{"style":115},[6076],{"type":22,"value":1155},{"type":16,"tag":75,"props":6078,"children":6079},{"class":77,"line":778},[6080,6084,6088],{"type":16,"tag":75,"props":6081,"children":6082},{"style":419},[6083],{"type":22,"value":1163},{"type":16,"tag":75,"props":6085,"children":6086},{"style":289},[6087],{"type":22,"value":1046},{"type":16,"tag":75,"props":6089,"children":6090},{"style":115},[6091],{"type":22,"value":1172},{"type":16,"tag":75,"props":6093,"children":6094},{"class":77,"line":826},[6095,6099,6103],{"type":16,"tag":75,"props":6096,"children":6097},{"style":419},[6098],{"type":22,"value":1180},{"type":16,"tag":75,"props":6100,"children":6101},{"style":289},[6102],{"type":22,"value":1046},{"type":16,"tag":75,"props":6104,"children":6105},{"style":115},[6106],{"type":22,"value":1051},{"type":16,"tag":75,"props":6108,"children":6109},{"class":77,"line":858},[6110,6114,6118,6122,6126,6130,6134,6138,6142],{"type":16,"tag":75,"props":6111,"children":6112},{"style":289},[6113],{"type":22,"value":784},{"type":16,"tag":75,"props":6115,"children":6116},{"style":115},[6117],{"type":22,"value":1200},{"type":16,"tag":75,"props":6119,"children":6120},{"style":289},[6121],{"type":22,"value":1205},{"type":16,"tag":75,"props":6123,"children":6124},{"style":98},[6125],{"type":22,"value":1210},{"type":16,"tag":75,"props":6127,"children":6128},{"style":115},[6129],{"type":22,"value":1215},{"type":16,"tag":75,"props":6131,"children":6132},{"style":92},[6133],{"type":22,"value":1220},{"type":16,"tag":75,"props":6135,"children":6136},{"style":115},[6137],{"type":22,"value":1225},{"type":16,"tag":75,"props":6139,"children":6140},{"style":92},[6141],{"type":22,"value":1230},{"type":16,"tag":75,"props":6143,"children":6144},{"style":115},[6145],{"type":22,"value":1235},{"type":16,"tag":75,"props":6147,"children":6148},{"class":77,"line":1238},[6149,6153,6157,6161,6165],{"type":16,"tag":75,"props":6150,"children":6151},{"style":289},[6152],{"type":22,"value":492},{"type":16,"tag":75,"props":6154,"children":6155},{"style":98},[6156],{"type":22,"value":1248},{"type":16,"tag":75,"props":6158,"children":6159},{"style":115},[6160],{"type":22,"value":1253},{"type":16,"tag":75,"props":6162,"children":6163},{"style":92},[6164],{"type":22,"value":1258},{"type":16,"tag":75,"props":6166,"children":6167},{"style":115},[6168],{"type":22,"value":1263},{"type":16,"tag":75,"props":6170,"children":6171},{"class":77,"line":1266},[6172],{"type":16,"tag":75,"props":6173,"children":6174},{"style":115},[6175],{"type":22,"value":1272},{"type":16,"tag":75,"props":6177,"children":6178},{"class":77,"line":1275},[6179],{"type":16,"tag":75,"props":6180,"children":6181},{"style":115},[6182],{"type":22,"value":524},{"type":16,"tag":75,"props":6184,"children":6185},{"class":77,"line":1283},[6186],{"type":16,"tag":75,"props":6187,"children":6188},{"emptyLinePlaceholder":169},[6189],{"type":22,"value":172},{"type":16,"tag":75,"props":6191,"children":6192},{"class":77,"line":1291},[6193,6197,6201],{"type":16,"tag":75,"props":6194,"children":6195},{"style":289},[6196],{"type":22,"value":1297},{"type":16,"tag":75,"props":6198,"children":6199},{"style":289},[6200],{"type":22,"value":1302},{"type":16,"tag":75,"props":6202,"children":6203},{"style":115},[6204],{"type":22,"value":1307},{"type":16,"tag":47,"props":6206,"children":6207},{"code":1310,"language":898,"meta":7,"className":899,"style":7},[6208],{"type":16,"tag":52,"props":6209,"children":6210},{"__ignoreMap":7},[6211,6218,6237,6256,6263,6306,6361,6428,6483,6494],{"type":16,"tag":75,"props":6212,"children":6213},{"class":77,"line":78},[6214],{"type":16,"tag":75,"props":6215,"children":6216},{"style":82},[6217],{"type":22,"value":1322},{"type":16,"tag":75,"props":6219,"children":6220},{"class":77,"line":88},[6221,6225,6229,6233],{"type":16,"tag":75,"props":6222,"children":6223},{"style":289},[6224],{"type":22,"value":302},{"type":16,"tag":75,"props":6226,"children":6227},{"style":115},[6228],{"type":22,"value":1334},{"type":16,"tag":75,"props":6230,"children":6231},{"style":289},[6232],{"type":22,"value":292},{"type":16,"tag":75,"props":6234,"children":6235},{"style":104},[6236],{"type":22,"value":1343},{"type":16,"tag":75,"props":6238,"children":6239},{"class":77,"line":131},[6240,6244,6248,6252],{"type":16,"tag":75,"props":6241,"children":6242},{"style":289},[6243],{"type":22,"value":302},{"type":16,"tag":75,"props":6245,"children":6246},{"style":115},[6247],{"type":22,"value":1355},{"type":16,"tag":75,"props":6249,"children":6250},{"style":289},[6251],{"type":22,"value":292},{"type":16,"tag":75,"props":6253,"children":6254},{"style":104},[6255],{"type":22,"value":1364},{"type":16,"tag":75,"props":6257,"children":6258},{"class":77,"line":165},[6259],{"type":16,"tag":75,"props":6260,"children":6261},{"emptyLinePlaceholder":169},[6262],{"type":22,"value":172},{"type":16,"tag":75,"props":6264,"children":6265},{"class":77,"line":175},[6266,6270,6274,6278,6282,6286,6290,6294,6298,6302],{"type":16,"tag":75,"props":6267,"children":6268},{"style":289},[6269],{"type":22,"value":1297},{"type":16,"tag":75,"props":6271,"children":6272},{"style":289},[6273],{"type":22,"value":1383},{"type":16,"tag":75,"props":6275,"children":6276},{"style":98},[6277],{"type":22,"value":1073},{"type":16,"tag":75,"props":6279,"children":6280},{"style":289},[6281],{"type":22,"value":348},{"type":16,"tag":75,"props":6283,"children":6284},{"style":92},[6285],{"type":22,"value":1396},{"type":16,"tag":75,"props":6287,"children":6288},{"style":115},[6289],{"type":22,"value":693},{"type":16,"tag":75,"props":6291,"children":6292},{"style":104},[6293],{"type":22,"value":663},{"type":16,"tag":75,"props":6295,"children":6296},{"style":115},[6297],{"type":22,"value":1409},{"type":16,"tag":75,"props":6299,"children":6300},{"style":289},[6301],{"type":22,"value":1414},{"type":16,"tag":75,"props":6303,"children":6304},{"style":115},[6305],{"type":22,"value":1051},{"type":16,"tag":75,"props":6307,"children":6308},{"class":77,"line":184},[6309,6313,6317,6321,6325,6329,6333,6337,6341,6345,6349,6353,6357],{"type":16,"tag":75,"props":6310,"children":6311},{"style":289},[6312],{"type":22,"value":1059},{"type":16,"tag":75,"props":6314,"children":6315},{"style":98},[6316],{"type":22,"value":1064},{"type":16,"tag":75,"props":6318,"children":6319},{"style":289},[6320],{"type":22,"value":348},{"type":16,"tag":75,"props":6322,"children":6323},{"style":92},[6324],{"type":22,"value":1438},{"type":16,"tag":75,"props":6326,"children":6327},{"style":115},[6328],{"type":22,"value":1443},{"type":16,"tag":75,"props":6330,"children":6331},{"style":98},[6332],{"type":22,"value":1448},{"type":16,"tag":75,"props":6334,"children":6335},{"style":289},[6336],{"type":22,"value":1453},{"type":16,"tag":75,"props":6338,"children":6339},{"style":98},[6340],{"type":22,"value":1458},{"type":16,"tag":75,"props":6342,"children":6343},{"style":115},[6344],{"type":22,"value":1463},{"type":16,"tag":75,"props":6346,"children":6347},{"style":92},[6348],{"type":22,"value":1468},{"type":16,"tag":75,"props":6350,"children":6351},{"style":115},[6352],{"type":22,"value":693},{"type":16,"tag":75,"props":6354,"children":6355},{"style":104},[6356],{"type":22,"value":1477},{"type":16,"tag":75,"props":6358,"children":6359},{"style":115},[6360],{"type":22,"value":1482},{"type":16,"tag":75,"props":6362,"children":6363},{"class":77,"line":223},[6364,6368,6372,6376,6380,6384,6388,6392,6396,6400,6404,6408,6412,6416,6420,6424],{"type":16,"tag":75,"props":6365,"children":6366},{"style":289},[6367],{"type":22,"value":1059},{"type":16,"tag":75,"props":6369,"children":6370},{"style":92},[6371],{"type":22,"value":1494},{"type":16,"tag":75,"props":6373,"children":6374},{"style":289},[6375],{"type":22,"value":348},{"type":16,"tag":75,"props":6377,"children":6378},{"style":115},[6379],{"type":22,"value":1503},{"type":16,"tag":75,"props":6381,"children":6382},{"style":419},[6383],{"type":22,"value":1508},{"type":16,"tag":75,"props":6385,"children":6386},{"style":289},[6387],{"type":22,"value":1513},{"type":16,"tag":75,"props":6389,"children":6390},{"style":98},[6391],{"type":22,"value":1518},{"type":16,"tag":75,"props":6393,"children":6394},{"style":115},[6395],{"type":22,"value":1215},{"type":16,"tag":75,"props":6397,"children":6398},{"style":289},[6399],{"type":22,"value":1414},{"type":16,"tag":75,"props":6401,"children":6402},{"style":115},[6403],{"type":22,"value":1531},{"type":16,"tag":75,"props":6405,"children":6406},{"style":289},[6407],{"type":22,"value":411},{"type":16,"tag":75,"props":6409,"children":6410},{"style":115},[6411],{"type":22,"value":1540},{"type":16,"tag":75,"props":6413,"children":6414},{"style":92},[6415],{"type":22,"value":1545},{"type":16,"tag":75,"props":6417,"children":6418},{"style":115},[6419],{"type":22,"value":693},{"type":16,"tag":75,"props":6421,"children":6422},{"style":104},[6423],{"type":22,"value":1477},{"type":16,"tag":75,"props":6425,"children":6426},{"style":115},[6427],{"type":22,"value":1558},{"type":16,"tag":75,"props":6429,"children":6430},{"class":77,"line":380},[6431,6435,6439,6443,6447,6451,6455,6459,6463,6467,6471,6475,6479],{"type":16,"tag":75,"props":6432,"children":6433},{"style":289},[6434],{"type":22,"value":1059},{"type":16,"tag":75,"props":6436,"children":6437},{"style":92},[6438],{"type":22,"value":1570},{"type":16,"tag":75,"props":6440,"children":6441},{"style":289},[6442],{"type":22,"value":348},{"type":16,"tag":75,"props":6444,"children":6445},{"style":115},[6446],{"type":22,"value":1579},{"type":16,"tag":75,"props":6448,"children":6449},{"style":289},[6450],{"type":22,"value":1414},{"type":16,"tag":75,"props":6452,"children":6453},{"style":115},[6454],{"type":22,"value":1531},{"type":16,"tag":75,"props":6456,"children":6457},{"style":289},[6458],{"type":22,"value":411},{"type":16,"tag":75,"props":6460,"children":6461},{"style":98},[6462],{"type":22,"value":1458},{"type":16,"tag":75,"props":6464,"children":6465},{"style":115},[6466],{"type":22,"value":1600},{"type":16,"tag":75,"props":6468,"children":6469},{"style":92},[6470],{"type":22,"value":1605},{"type":16,"tag":75,"props":6472,"children":6473},{"style":115},[6474],{"type":22,"value":693},{"type":16,"tag":75,"props":6476,"children":6477},{"style":104},[6478],{"type":22,"value":1477},{"type":16,"tag":75,"props":6480,"children":6481},{"style":115},[6482],{"type":22,"value":1618},{"type":16,"tag":75,"props":6484,"children":6485},{"class":77,"line":439},[6486,6490],{"type":16,"tag":75,"props":6487,"children":6488},{"style":289},[6489],{"type":22,"value":1118},{"type":16,"tag":75,"props":6491,"children":6492},{"style":115},[6493],{"type":22,"value":1630},{"type":16,"tag":75,"props":6495,"children":6496},{"class":77,"line":457},[6497],{"type":16,"tag":75,"props":6498,"children":6499},{"style":115},[6500],{"type":22,"value":1131},{"type":16,"tag":40,"props":6502,"children":6503},{"id":1640},[6504],{"type":22,"value":1643},{"type":16,"tag":28,"props":6506,"children":6507},{},[6508],{"type":16,"tag":60,"props":6509,"children":6510},{},[6511,6512,6517],{"type":22,"value":1651},{"type":16,"tag":52,"props":6513,"children":6515},{"className":6514},[],[6516],{"type":22,"value":1657},{"type":22,"value":1659},{"type":16,"tag":47,"props":6519,"children":6520},{"code":1662,"language":898,"meta":7,"className":899,"style":7},[6521],{"type":16,"tag":52,"props":6522,"children":6523},{"__ignoreMap":7},[6524,6543,6550,6557,6568,6583,6598,6661,6668,6675,6682],{"type":16,"tag":75,"props":6525,"children":6526},{"class":77,"line":78},[6527,6531,6535,6539],{"type":16,"tag":75,"props":6528,"children":6529},{"style":289},[6530],{"type":22,"value":1297},{"type":16,"tag":75,"props":6532,"children":6533},{"style":289},[6534],{"type":22,"value":1302},{"type":16,"tag":75,"props":6536,"children":6537},{"style":92},[6538],{"type":22,"value":1682},{"type":16,"tag":75,"props":6540,"children":6541},{"style":115},[6542],{"type":22,"value":1687},{"type":16,"tag":75,"props":6544,"children":6545},{"class":77,"line":88},[6546],{"type":16,"tag":75,"props":6547,"children":6548},{"style":115},[6549],{"type":22,"value":1695},{"type":16,"tag":75,"props":6551,"children":6552},{"class":77,"line":131},[6553],{"type":16,"tag":75,"props":6554,"children":6555},{"style":115},[6556],{"type":22,"value":1703},{"type":16,"tag":75,"props":6558,"children":6559},{"class":77,"line":165},[6560,6564],{"type":16,"tag":75,"props":6561,"children":6562},{"style":104},[6563],{"type":22,"value":1711},{"type":16,"tag":75,"props":6565,"children":6566},{"style":115},[6567],{"type":22,"value":1716},{"type":16,"tag":75,"props":6569,"children":6570},{"class":77,"line":175},[6571,6575,6579],{"type":16,"tag":75,"props":6572,"children":6573},{"style":115},[6574],{"type":22,"value":1724},{"type":16,"tag":75,"props":6576,"children":6577},{"style":104},[6578],{"type":22,"value":1729},{"type":16,"tag":75,"props":6580,"children":6581},{"style":115},[6582],{"type":22,"value":1734},{"type":16,"tag":75,"props":6584,"children":6585},{"class":77,"line":184},[6586,6590,6594],{"type":16,"tag":75,"props":6587,"children":6588},{"style":115},[6589],{"type":22,"value":1742},{"type":16,"tag":75,"props":6591,"children":6592},{"style":98},[6593],{"type":22,"value":1747},{"type":16,"tag":75,"props":6595,"children":6596},{"style":115},[6597],{"type":22,"value":1734},{"type":16,"tag":75,"props":6599,"children":6600},{"class":77,"line":223},[6601,6605,6609,6613,6617,6621,6625,6629,6633,6637,6641,6645,6649,6653,6657],{"type":16,"tag":75,"props":6602,"children":6603},{"style":92},[6604],{"type":22,"value":1759},{"type":16,"tag":75,"props":6606,"children":6607},{"style":115},[6608],{"type":22,"value":1764},{"type":16,"tag":75,"props":6610,"children":6611},{"style":419},[6612],{"type":22,"value":1769},{"type":16,"tag":75,"props":6614,"children":6615},{"style":289},[6616],{"type":22,"value":1046},{"type":16,"tag":75,"props":6618,"children":6619},{"style":115},[6620],{"type":22,"value":1778},{"type":16,"tag":75,"props":6622,"children":6623},{"style":92},[6624],{"type":22,"value":1783},{"type":16,"tag":75,"props":6626,"children":6627},{"style":115},[6628],{"type":22,"value":693},{"type":16,"tag":75,"props":6630,"children":6631},{"style":104},[6632],{"type":22,"value":1792},{"type":16,"tag":75,"props":6634,"children":6635},{"style":289},[6636],{"type":22,"value":1797},{"type":16,"tag":75,"props":6638,"children":6639},{"style":1800},[6640],{"type":22,"value":1803},{"type":16,"tag":75,"props":6642,"children":6643},{"style":1806},[6644],{"type":22,"value":1809},{"type":16,"tag":75,"props":6646,"children":6647},{"style":104},[6648],{"type":22,"value":1792},{"type":16,"tag":75,"props":6650,"children":6651},{"style":115},[6652],{"type":22,"value":506},{"type":16,"tag":75,"props":6654,"children":6655},{"style":104},[6656],{"type":22,"value":1822},{"type":16,"tag":75,"props":6658,"children":6659},{"style":115},[6660],{"type":22,"value":524},{"type":16,"tag":75,"props":6662,"children":6663},{"class":77,"line":380},[6664],{"type":16,"tag":75,"props":6665,"children":6666},{"style":115},[6667],{"type":22,"value":1834},{"type":16,"tag":75,"props":6669,"children":6670},{"class":77,"line":439},[6671],{"type":16,"tag":75,"props":6672,"children":6673},{"style":115},[6674],{"type":22,"value":1842},{"type":16,"tag":75,"props":6676,"children":6677},{"class":77,"line":457},[6678],{"type":16,"tag":75,"props":6679,"children":6680},{"style":115},[6681],{"type":22,"value":1272},{"type":16,"tag":75,"props":6683,"children":6684},{"class":77,"line":486},[6685],{"type":16,"tag":75,"props":6686,"children":6687},{"style":115},[6688],{"type":22,"value":1131},{"type":16,"tag":28,"props":6690,"children":6691},{},[6692],{"type":16,"tag":60,"props":6693,"children":6694},{},[6695,6696,6701],{"type":22,"value":1864},{"type":16,"tag":52,"props":6697,"children":6699},{"className":6698},[],[6700],{"type":22,"value":1870},{"type":22,"value":1659},{"type":16,"tag":47,"props":6703,"children":6704},{"code":1874,"language":95,"meta":7,"className":271,"style":7},[6705],{"type":16,"tag":52,"props":6706,"children":6707},{"__ignoreMap":7},[6708,6727,6746,6753,6768,6811],{"type":16,"tag":75,"props":6709,"children":6710},{"class":77,"line":78},[6711,6715,6719,6723],{"type":16,"tag":75,"props":6712,"children":6713},{"style":289},[6714],{"type":22,"value":292},{"type":16,"tag":75,"props":6716,"children":6717},{"style":115},[6718],{"type":22,"value":551},{"type":16,"tag":75,"props":6720,"children":6721},{"style":289},[6722],{"type":22,"value":302},{"type":16,"tag":75,"props":6724,"children":6725},{"style":115},[6726],{"type":22,"value":1898},{"type":16,"tag":75,"props":6728,"children":6729},{"class":77,"line":88},[6730,6734,6738,6742],{"type":16,"tag":75,"props":6731,"children":6732},{"style":289},[6733],{"type":22,"value":292},{"type":16,"tag":75,"props":6735,"children":6736},{"style":115},[6737],{"type":22,"value":1910},{"type":16,"tag":75,"props":6739,"children":6740},{"style":289},[6741],{"type":22,"value":302},{"type":16,"tag":75,"props":6743,"children":6744},{"style":115},[6745],{"type":22,"value":1919},{"type":16,"tag":75,"props":6747,"children":6748},{"class":77,"line":131},[6749],{"type":16,"tag":75,"props":6750,"children":6751},{"emptyLinePlaceholder":169},[6752],{"type":22,"value":172},{"type":16,"tag":75,"props":6754,"children":6755},{"class":77,"line":165},[6756,6760,6764],{"type":16,"tag":75,"props":6757,"children":6758},{"style":115},[6759],{"type":22,"value":1934},{"type":16,"tag":75,"props":6761,"children":6762},{"style":289},[6763],{"type":22,"value":411},{"type":16,"tag":75,"props":6765,"children":6766},{"style":115},[6767],{"type":22,"value":1943},{"type":16,"tag":75,"props":6769,"children":6770},{"class":77,"line":175},[6771,6775,6779,6783,6787,6791,6795,6799,6803,6807],{"type":16,"tag":75,"props":6772,"children":6773},{"style":115},[6774],{"type":22,"value":1951},{"type":16,"tag":75,"props":6776,"children":6777},{"style":419},[6778],{"type":22,"value":1956},{"type":16,"tag":75,"props":6780,"children":6781},{"style":289},[6782],{"type":22,"value":411},{"type":16,"tag":75,"props":6784,"children":6785},{"style":115},[6786],{"type":22,"value":658},{"type":16,"tag":75,"props":6788,"children":6789},{"style":104},[6790],{"type":22,"value":1969},{"type":16,"tag":75,"props":6792,"children":6793},{"style":115},[6794],{"type":22,"value":1974},{"type":16,"tag":75,"props":6796,"children":6797},{"style":419},[6798],{"type":22,"value":1979},{"type":16,"tag":75,"props":6800,"children":6801},{"style":289},[6802],{"type":22,"value":411},{"type":16,"tag":75,"props":6804,"children":6805},{"style":98},[6806],{"type":22,"value":1988},{"type":16,"tag":75,"props":6808,"children":6809},{"style":115},[6810],{"type":22,"value":1734},{"type":16,"tag":75,"props":6812,"children":6813},{"class":77,"line":184},[6814,6818,6822,6826,6830,6834,6838,6842,6846,6850],{"type":16,"tag":75,"props":6815,"children":6816},{"style":419},[6817],{"type":22,"value":2000},{"type":16,"tag":75,"props":6819,"children":6820},{"style":289},[6821],{"type":22,"value":411},{"type":16,"tag":75,"props":6823,"children":6824},{"style":115},[6825],{"type":22,"value":658},{"type":16,"tag":75,"props":6827,"children":6828},{"style":104},[6829],{"type":22,"value":1969},{"type":16,"tag":75,"props":6831,"children":6832},{"style":115},[6833],{"type":22,"value":1974},{"type":16,"tag":75,"props":6835,"children":6836},{"style":419},[6837],{"type":22,"value":2021},{"type":16,"tag":75,"props":6839,"children":6840},{"style":289},[6841],{"type":22,"value":411},{"type":16,"tag":75,"props":6843,"children":6844},{"style":115},[6845],{"type":22,"value":658},{"type":16,"tag":75,"props":6847,"children":6848},{"style":104},[6849],{"type":22,"value":1969},{"type":16,"tag":75,"props":6851,"children":6852},{"style":115},[6853],{"type":22,"value":668},{"type":16,"tag":40,"props":6855,"children":6856},{"id":2040},[6857],{"type":22,"value":2043},{"type":16,"tag":47,"props":6859,"children":6860},{"code":2046,"language":2047,"meta":7,"className":2048,"style":7},[6861],{"type":16,"tag":52,"props":6862,"children":6863},{"__ignoreMap":7},[6864,6871,6882,6893,6908,6923,6942,6953,6968,6983,7010,7029,7040,7055,7074,7093],{"type":16,"tag":75,"props":6865,"children":6866},{"class":77,"line":78},[6867],{"type":16,"tag":75,"props":6868,"children":6869},{"style":82},[6870],{"type":22,"value":2060},{"type":16,"tag":75,"props":6872,"children":6873},{"class":77,"line":88},[6874,6878],{"type":16,"tag":75,"props":6875,"children":6876},{"style":2066},[6877],{"type":22,"value":2069},{"type":16,"tag":75,"props":6879,"children":6880},{"style":115},[6881],{"type":22,"value":823},{"type":16,"tag":75,"props":6883,"children":6884},{"class":77,"line":131},[6885,6889],{"type":16,"tag":75,"props":6886,"children":6887},{"style":2066},[6888],{"type":22,"value":2081},{"type":16,"tag":75,"props":6890,"children":6891},{"style":115},[6892],{"type":22,"value":823},{"type":16,"tag":75,"props":6894,"children":6895},{"class":77,"line":165},[6896,6900,6904],{"type":16,"tag":75,"props":6897,"children":6898},{"style":2066},[6899],{"type":22,"value":2093},{"type":16,"tag":75,"props":6901,"children":6902},{"style":115},[6903],{"type":22,"value":1764},{"type":16,"tag":75,"props":6905,"children":6906},{"style":104},[6907],{"type":22,"value":2102},{"type":16,"tag":75,"props":6909,"children":6910},{"class":77,"line":175},[6911,6915,6919],{"type":16,"tag":75,"props":6912,"children":6913},{"style":2066},[6914],{"type":22,"value":2110},{"type":16,"tag":75,"props":6916,"children":6917},{"style":115},[6918],{"type":22,"value":1764},{"type":16,"tag":75,"props":6920,"children":6921},{"style":104},[6922],{"type":22,"value":2119},{"type":16,"tag":75,"props":6924,"children":6925},{"class":77,"line":184},[6926,6930,6934,6938],{"type":16,"tag":75,"props":6927,"children":6928},{"style":2066},[6929],{"type":22,"value":2127},{"type":16,"tag":75,"props":6931,"children":6932},{"style":115},[6933],{"type":22,"value":2132},{"type":16,"tag":75,"props":6935,"children":6936},{"style":104},[6937],{"type":22,"value":2137},{"type":16,"tag":75,"props":6939,"children":6940},{"style":115},[6941],{"type":22,"value":2142},{"type":16,"tag":75,"props":6943,"children":6944},{"class":77,"line":223},[6945,6949],{"type":16,"tag":75,"props":6946,"children":6947},{"style":2066},[6948],{"type":22,"value":2150},{"type":16,"tag":75,"props":6950,"children":6951},{"style":115},[6952],{"type":22,"value":823},{"type":16,"tag":75,"props":6954,"children":6955},{"class":77,"line":380},[6956,6960,6964],{"type":16,"tag":75,"props":6957,"children":6958},{"style":2066},[6959],{"type":22,"value":2093},{"type":16,"tag":75,"props":6961,"children":6962},{"style":115},[6963],{"type":22,"value":1764},{"type":16,"tag":75,"props":6965,"children":6966},{"style":104},[6967],{"type":22,"value":2170},{"type":16,"tag":75,"props":6969,"children":6970},{"class":77,"line":439},[6971,6975,6979],{"type":16,"tag":75,"props":6972,"children":6973},{"style":2066},[6974],{"type":22,"value":2110},{"type":16,"tag":75,"props":6976,"children":6977},{"style":115},[6978],{"type":22,"value":1764},{"type":16,"tag":75,"props":6980,"children":6981},{"style":104},[6982],{"type":22,"value":2186},{"type":16,"tag":75,"props":6984,"children":6985},{"class":77,"line":457},[6986,6990,6994,6998,7002,7006],{"type":16,"tag":75,"props":6987,"children":6988},{"style":2066},[6989],{"type":22,"value":2127},{"type":16,"tag":75,"props":6991,"children":6992},{"style":115},[6993],{"type":22,"value":2132},{"type":16,"tag":75,"props":6995,"children":6996},{"style":104},[6997],{"type":22,"value":2202},{"type":16,"tag":75,"props":6999,"children":7000},{"style":115},[7001],{"type":22,"value":506},{"type":16,"tag":75,"props":7003,"children":7004},{"style":104},[7005],{"type":22,"value":2211},{"type":16,"tag":75,"props":7007,"children":7008},{"style":115},[7009],{"type":22,"value":2142},{"type":16,"tag":75,"props":7011,"children":7012},{"class":77,"line":486},[7013,7017,7021,7025],{"type":16,"tag":75,"props":7014,"children":7015},{"style":2066},[7016],{"type":22,"value":2223},{"type":16,"tag":75,"props":7018,"children":7019},{"style":115},[7020],{"type":22,"value":2132},{"type":16,"tag":75,"props":7022,"children":7023},{"style":104},[7024],{"type":22,"value":2232},{"type":16,"tag":75,"props":7026,"children":7027},{"style":115},[7028],{"type":22,"value":2142},{"type":16,"tag":75,"props":7030,"children":7031},{"class":77,"line":738},[7032,7036],{"type":16,"tag":75,"props":7033,"children":7034},{"style":2066},[7035],{"type":22,"value":2244},{"type":16,"tag":75,"props":7037,"children":7038},{"style":115},[7039],{"type":22,"value":823},{"type":16,"tag":75,"props":7041,"children":7042},{"class":77,"line":760},[7043,7047,7051],{"type":16,"tag":75,"props":7044,"children":7045},{"style":2066},[7046],{"type":22,"value":2256},{"type":16,"tag":75,"props":7048,"children":7049},{"style":115},[7050],{"type":22,"value":1764},{"type":16,"tag":75,"props":7052,"children":7053},{"style":104},[7054],{"type":22,"value":2265},{"type":16,"tag":75,"props":7056,"children":7057},{"class":77,"line":778},[7058,7062,7066,7070],{"type":16,"tag":75,"props":7059,"children":7060},{"style":2066},[7061],{"type":22,"value":2223},{"type":16,"tag":75,"props":7063,"children":7064},{"style":115},[7065],{"type":22,"value":2132},{"type":16,"tag":75,"props":7067,"children":7068},{"style":104},[7069],{"type":22,"value":2281},{"type":16,"tag":75,"props":7071,"children":7072},{"style":115},[7073],{"type":22,"value":2142},{"type":16,"tag":75,"props":7075,"children":7076},{"class":77,"line":826},[7077,7081,7085,7089],{"type":16,"tag":75,"props":7078,"children":7079},{"style":2066},[7080],{"type":22,"value":2127},{"type":16,"tag":75,"props":7082,"children":7083},{"style":115},[7084],{"type":22,"value":2132},{"type":16,"tag":75,"props":7086,"children":7087},{"style":104},[7088],{"type":22,"value":2301},{"type":16,"tag":75,"props":7090,"children":7091},{"style":115},[7092],{"type":22,"value":2142},{"type":16,"tag":75,"props":7094,"children":7095},{"class":77,"line":858},[7096,7100,7104,7108,7112,7116],{"type":16,"tag":75,"props":7097,"children":7098},{"style":2066},[7099],{"type":22,"value":2313},{"type":16,"tag":75,"props":7101,"children":7102},{"style":115},[7103],{"type":22,"value":2132},{"type":16,"tag":75,"props":7105,"children":7106},{"style":104},[7107],{"type":22,"value":2322},{"type":16,"tag":75,"props":7109,"children":7110},{"style":115},[7111],{"type":22,"value":506},{"type":16,"tag":75,"props":7113,"children":7114},{"style":104},[7115],{"type":22,"value":2331},{"type":16,"tag":75,"props":7117,"children":7118},{"style":115},[7119],{"type":22,"value":2142},{"type":16,"tag":47,"props":7121,"children":7122},{"code":2338,"language":2339,"meta":7,"className":2340,"style":7},[7123],{"type":16,"tag":52,"props":7124,"children":7125},{"__ignoreMap":7},[7126,7133,7144,7159,7174,7185,7192,7207,7218,7229,7236],{"type":16,"tag":75,"props":7127,"children":7128},{"class":77,"line":78},[7129],{"type":16,"tag":75,"props":7130,"children":7131},{"style":82},[7132],{"type":22,"value":2352},{"type":16,"tag":75,"props":7134,"children":7135},{"class":77,"line":88},[7136,7140],{"type":16,"tag":75,"props":7137,"children":7138},{"style":289},[7139],{"type":22,"value":2360},{"type":16,"tag":75,"props":7141,"children":7142},{"style":115},[7143],{"type":22,"value":1051},{"type":16,"tag":75,"props":7145,"children":7146},{"class":77,"line":131},[7147,7151,7155],{"type":16,"tag":75,"props":7148,"children":7149},{"style":289},[7150],{"type":22,"value":2372},{"type":16,"tag":75,"props":7152,"children":7153},{"style":98},[7154],{"type":22,"value":2377},{"type":16,"tag":75,"props":7156,"children":7157},{"style":115},[7158],{"type":22,"value":2382},{"type":16,"tag":75,"props":7160,"children":7161},{"class":77,"line":165},[7162,7166,7170],{"type":16,"tag":75,"props":7163,"children":7164},{"style":289},[7165],{"type":22,"value":2390},{"type":16,"tag":75,"props":7167,"children":7168},{"style":92},[7169],{"type":22,"value":2395},{"type":16,"tag":75,"props":7171,"children":7172},{"style":115},[7173],{"type":22,"value":2400},{"type":16,"tag":75,"props":7175,"children":7176},{"class":77,"line":175},[7177,7181],{"type":16,"tag":75,"props":7178,"children":7179},{"style":289},[7180],{"type":22,"value":2408},{"type":16,"tag":75,"props":7182,"children":7183},{"style":115},[7184],{"type":22,"value":2413},{"type":16,"tag":75,"props":7186,"children":7187},{"class":77,"line":184},[7188],{"type":16,"tag":75,"props":7189,"children":7190},{"style":115},[7191],{"type":22,"value":1272},{"type":16,"tag":75,"props":7193,"children":7194},{"class":77,"line":223},[7195,7199,7203],{"type":16,"tag":75,"props":7196,"children":7197},{"style":289},[7198],{"type":22,"value":2390},{"type":16,"tag":75,"props":7200,"children":7201},{"style":92},[7202],{"type":22,"value":2432},{"type":16,"tag":75,"props":7204,"children":7205},{"style":115},[7206],{"type":22,"value":2400},{"type":16,"tag":75,"props":7208,"children":7209},{"class":77,"line":380},[7210,7214],{"type":16,"tag":75,"props":7211,"children":7212},{"style":289},[7213],{"type":22,"value":2408},{"type":16,"tag":75,"props":7215,"children":7216},{"style":115},[7217],{"type":22,"value":2448},{"type":16,"tag":75,"props":7219,"children":7220},{"class":77,"line":439},[7221,7225],{"type":16,"tag":75,"props":7222,"children":7223},{"style":289},[7224],{"type":22,"value":2456},{"type":16,"tag":75,"props":7226,"children":7227},{"style":115},[7228],{"type":22,"value":2461},{"type":16,"tag":75,"props":7230,"children":7231},{"class":77,"line":457},[7232],{"type":16,"tag":75,"props":7233,"children":7234},{"style":115},[7235],{"type":22,"value":1272},{"type":16,"tag":75,"props":7237,"children":7238},{"class":77,"line":486},[7239],{"type":16,"tag":75,"props":7240,"children":7241},{"style":115},[7242],{"type":22,"value":2476},{"type":16,"tag":28,"props":7244,"children":7245},{},[7246],{"type":16,"tag":60,"props":7247,"children":7248},{},[7249],{"type":22,"value":2484},{"type":16,"tag":47,"props":7251,"children":7252},{"code":2487,"language":68,"meta":7,"className":69,"style":7},[7253],{"type":16,"tag":52,"props":7254,"children":7255},{"__ignoreMap":7},[7256,7275],{"type":16,"tag":75,"props":7257,"children":7258},{"class":77,"line":78},[7259,7263,7267,7271],{"type":16,"tag":75,"props":7260,"children":7261},{"style":92},[7262],{"type":22,"value":2499},{"type":16,"tag":75,"props":7264,"children":7265},{"style":104},[7266],{"type":22,"value":2504},{"type":16,"tag":75,"props":7268,"children":7269},{"style":104},[7270],{"type":22,"value":2509},{"type":16,"tag":75,"props":7272,"children":7273},{"style":98},[7274],{"type":22,"value":2514},{"type":16,"tag":75,"props":7276,"children":7277},{"class":77,"line":88},[7278],{"type":16,"tag":75,"props":7279,"children":7280},{"style":82},[7281],{"type":22,"value":2522},{"type":16,"tag":2524,"props":7283,"children":7284},{},[7285],{"type":22,"value":2528},{"title":7,"searchDepth":88,"depth":88,"links":7287},[7288,7289,7290,7291,7292],{"id":42,"depth":88,"text":45},{"id":264,"depth":88,"text":267},{"id":891,"depth":88,"text":894},{"id":1640,"depth":88,"text":1643},{"id":2040,"depth":88,"text":2043},{"_path":7294,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":7295,"description":7296,"date":7297,"code":7298,"body":7299,"_type":2536,"_id":7344,"_source":2538,"_file":7345,"_stem":7346,"_extension":2541},"\u002Fblog\u002Ffirst-post","开始使用 Nuxt 4 重构博客","记录从旧项目迁移到 Nuxt 4 的过程与心得。","2026-05-06","D4E5F7",{"type":13,"children":7300,"toc":7341},[7301,7307,7312,7317],{"type":16,"tag":17,"props":7302,"children":7304},{"id":7303},"你好nuxt-4",[7305],{"type":22,"value":7306},"你好，Nuxt 4",{"type":16,"tag":28,"props":7308,"children":7309},{},[7310],{"type":22,"value":7311},"这是第一篇测试文章。Nuxt 4 带来了更清晰的目录结构和更好的性能。",{"type":16,"tag":40,"props":7313,"children":7315},{"id":7314},"主要变化",[7316],{"type":22,"value":7314},{"type":16,"tag":5044,"props":7318,"children":7319},{},[7320,7331,7336],{"type":16,"tag":4991,"props":7321,"children":7322},{},[7323,7329],{"type":16,"tag":52,"props":7324,"children":7326},{"className":7325},[],[7327],{"type":22,"value":7328},"app\u002F",{"type":22,"value":7330}," 目录成为默认应用代码存放处",{"type":16,"tag":4991,"props":7332,"children":7333},{},[7334],{"type":22,"value":7335},"更高效的构建工具链",{"type":16,"tag":4991,"props":7337,"children":7338},{},[7339],{"type":22,"value":7340},"...",{"title":7,"searchDepth":88,"depth":88,"links":7342},[7343],{"id":7314,"depth":88,"text":7314},"content:blog:first-post.md","blog\u002Ffirst-post.md","blog\u002Ffirst-post",1784099949734]